@danske/sapphire-angular 1.26.0 → 1.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/esm2020/lib/field/src/field-error.directive.mjs +4 -2
  2. package/esm2020/lib/field/src/field.component.mjs +30 -11
  3. package/esm2020/lib/field/src/field.module.mjs +7 -4
  4. package/esm2020/lib/select/src/select/select.component.mjs +5 -5
  5. package/esm2020/lib/text-field/src/text-field-input.directive.mjs +3 -3
  6. package/esm2020/lib/text-field/src/text-field.component.mjs +3 -3
  7. package/fesm2015/danske-sapphire-angular.mjs +108 -82
  8. package/fesm2015/danske-sapphire-angular.mjs.map +1 -1
  9. package/fesm2020/danske-sapphire-angular.mjs +106 -82
  10. package/fesm2020/danske-sapphire-angular.mjs.map +1 -1
  11. package/lib/field/src/field-error.directive.d.ts +3 -1
  12. package/lib/field/src/field.component.d.ts +13 -4
  13. package/lib/field/src/field.module.d.ts +1 -1
  14. package/package.json +2 -2
package/fesm2020/danske-sapphire-angular.mjs CHANGED
@@ -1,8 +1,8 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { Injectable, inject, Inject, SkipSelf, Optional, forwardRef, Directive, Component, Input, NgModule, ViewEncapsulation, InjectionToken, isDevMode, ChangeDetectionStrategy, HostBinding, ContentChild, EventEmitter, Output, HostListener, Attribute, ViewChild, Injector, ElementRef, QueryList, ContentChildren, ViewChildren, ChangeDetectorRef, TemplateRef } from '@angular/core';
3
- import * as i1$3 from '@angular/cdk/overlay';
3
+ import * as i1$2 from '@angular/cdk/overlay';
4
4
  import { OverlayContainer, Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
5
- import * as i1$1 from '@angular/common';
5
+ import * as i2 from '@angular/common';
6
6
  import { DOCUMENT, CommonModule, NgIf } from '@angular/common';
7
7
  import * as i1 from '@angular/cdk/platform';
8
8
  import { Platform } from '@angular/cdk/platform';
@@ -11,20 +11,20 @@ import * as icons from '@danske/sapphire-icons/js';
11
11
  import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
12
12
  import * as i3$1 from '@angular/forms';
13
13
  import { NG_VALUE_ACCESSOR, NG_VALIDATORS, CheckboxRequiredValidator, FormsModule, RequiredValidator } from '@angular/forms';
14
- import * as i2 from '@angular/cdk/a11y';
14
+ import * as i2$1 from '@angular/cdk/a11y';
15
15
  import { A11yModule, ListKeyManager } from '@angular/cdk/a11y';
16
- import * as i1$2 from '@angular/cdk/menu';
16
+ import * as i1$1 from '@angular/cdk/menu';
17
17
  import { CdkMenu, CdkMenuItem, CdkMenuTrigger, CdkMenuGroup, CdkMenuModule } from '@angular/cdk/menu';
18
18
  import { hasModifierKey } from '@angular/cdk/keycodes';
19
- import * as i1$4 from '@angular/cdk/portal';
19
+ import * as i1$3 from '@angular/cdk/portal';
20
20
  import { TemplatePortal, DomPortal, PortalModule, CdkPortal, ComponentPortal } from '@angular/cdk/portal';
21
21
  import { Subject, merge, combineLatest, empty, fromEvent } from 'rxjs';
22
22
  import { takeUntil, startWith, map } from 'rxjs/operators';
23
23
  import * as i3 from '@angular/cdk/collections';
24
- import * as i1$5 from '@angular/cdk/listbox';
24
+ import * as i1$4 from '@angular/cdk/listbox';
25
25
  import { CdkListbox, CdkOption, CdkListboxModule } from '@angular/cdk/listbox';
26
26
  export { tokens } from '@danske/sapphire-css/themes';
27
- import * as i1$6 from '@angular/cdk/dialog';
27
+ import * as i1$5 from '@angular/cdk/dialog';
28
28
  import { CdkDialogContainer, DialogModule } from '@angular/cdk/dialog';
29
29
 
30
30
  /**
@@ -378,7 +378,7 @@ class ButtonGroupComponent {
378
378
  }
379
379
  }
380
380
  ButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
381
- ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ButtonGroupComponent, selector: "sp-button-group", inputs: { align: "align", stretch: "stretch", iconSpacing: "iconSpacing", spacing: "spacing", orientation: "orientation" }, ngImport: i0, template: "<div\n class=\"sapphire-button-group\"\n [ngClass]=\"\n stretch !== 'none'\n ? 'sapphire-button-group--stretch'\n : 'sapphire-button-group--align-' + align\n \"\n [class.sapphire-button-group--stretch-auto-vertical]=\"\n stretch === 'autoVertical'\n \"\n [class.sapphire-button-group--spacing-xs]=\"spacing === 'extra-dense'\"\n [class.sapphire-button-group--spacing-s]=\"spacing === 'dense'\"\n [class.sapphire-button-group--spacing-l]=\"spacing === 'large'\"\n [class.sapphire-button-group--vertical]=\"orientation === 'vertical'\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [".sapphire-button-group{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:stretch;gap:var(--sapphire-button-group-size-spacing-m)}.sapphire-button-group--stretch{flex-wrap:wrap-reverse;justify-content:normal;align-items:normal}.sapphire-button-group--stretch>*{min-width:-moz-fit-content!important;min-width:fit-content!important;max-width:100%!important;flex-grow:1!important}.sapphire-button-group--stretch.sapphire-button-group--vertical{flex-direction:column-reverse;flex-wrap:nowrap}.sapphire-button-group--stretch.sapphire-button-group--stretch-auto-vertical.sapphire-button-group:has(> *:nth-child(3)){flex-direction:column-reverse}.sapphire-button-group--spacing-l{gap:var(--sapphire-button-group-size-spacing-l)}.sapphire-button-group--spacing-s{gap:var(--sapphire-button-group-size-spacing-s)}.sapphire-button-group--spacing-xs{gap:var(--sapphire-button-group-size-spacing-xs)}.sapphire-button-group--align-center{justify-content:center}.sapphire-button-group--align-right{justify-content:flex-end}.sapphire-button-group--align-left{justify-content:flex-start}.sapphire-button-group--vertical{flex-direction:column}.sapphire-button-group--vertical.sapphire-button-group--align-center{align-items:center}.sapphire-button-group--vertical.sapphire-button-group--align-right{align-items:flex-end}.sapphire-button-group--vertical.sapphire-button-group--align-left{align-items:flex-start}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
381
+ ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ButtonGroupComponent, selector: "sp-button-group", inputs: { align: "align", stretch: "stretch", iconSpacing: "iconSpacing", spacing: "spacing", orientation: "orientation" }, ngImport: i0, template: "<div\n class=\"sapphire-button-group\"\n [ngClass]=\"\n stretch !== 'none'\n ? 'sapphire-button-group--stretch'\n : 'sapphire-button-group--align-' + align\n \"\n [class.sapphire-button-group--stretch-auto-vertical]=\"\n stretch === 'autoVertical'\n \"\n [class.sapphire-button-group--spacing-xs]=\"spacing === 'extra-dense'\"\n [class.sapphire-button-group--spacing-s]=\"spacing === 'dense'\"\n [class.sapphire-button-group--spacing-l]=\"spacing === 'large'\"\n [class.sapphire-button-group--vertical]=\"orientation === 'vertical'\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [".sapphire-button-group{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:stretch;gap:var(--sapphire-button-group-size-spacing-m)}.sapphire-button-group--stretch{flex-wrap:wrap-reverse;justify-content:normal;align-items:normal}.sapphire-button-group--stretch>*{min-width:-moz-fit-content!important;min-width:fit-content!important;max-width:100%!important;flex-grow:1!important}.sapphire-button-group--stretch.sapphire-button-group--vertical{flex-direction:column-reverse;flex-wrap:nowrap}.sapphire-button-group--stretch.sapphire-button-group--stretch-auto-vertical.sapphire-button-group:has(> *:nth-child(3)){flex-direction:column-reverse}.sapphire-button-group--spacing-l{gap:var(--sapphire-button-group-size-spacing-l)}.sapphire-button-group--spacing-s{gap:var(--sapphire-button-group-size-spacing-s)}.sapphire-button-group--spacing-xs{gap:var(--sapphire-button-group-size-spacing-xs)}.sapphire-button-group--align-center{justify-content:center}.sapphire-button-group--align-right{justify-content:flex-end}.sapphire-button-group--align-left{justify-content:flex-start}.sapphire-button-group--vertical{flex-direction:column}.sapphire-button-group--vertical.sapphire-button-group--align-center{align-items:center}.sapphire-button-group--vertical.sapphire-button-group--align-right{align-items:flex-end}.sapphire-button-group--vertical.sapphire-button-group--align-left{align-items:flex-start}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
382
382
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ButtonGroupComponent, decorators: [{
383
383
  type: Component,
384
384
  args: [{ selector: 'sp-button-group', encapsulation: ViewEncapsulation.None, template: "<div\n class=\"sapphire-button-group\"\n [ngClass]=\"\n stretch !== 'none'\n ? 'sapphire-button-group--stretch'\n : 'sapphire-button-group--align-' + align\n \"\n [class.sapphire-button-group--stretch-auto-vertical]=\"\n stretch === 'autoVertical'\n \"\n [class.sapphire-button-group--spacing-xs]=\"spacing === 'extra-dense'\"\n [class.sapphire-button-group--spacing-s]=\"spacing === 'dense'\"\n [class.sapphire-button-group--spacing-l]=\"spacing === 'large'\"\n [class.sapphire-button-group--vertical]=\"orientation === 'vertical'\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [".sapphire-button-group{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:stretch;gap:var(--sapphire-button-group-size-spacing-m)}.sapphire-button-group--stretch{flex-wrap:wrap-reverse;justify-content:normal;align-items:normal}.sapphire-button-group--stretch>*{min-width:-moz-fit-content!important;min-width:fit-content!important;max-width:100%!important;flex-grow:1!important}.sapphire-button-group--stretch.sapphire-button-group--vertical{flex-direction:column-reverse;flex-wrap:nowrap}.sapphire-button-group--stretch.sapphire-button-group--stretch-auto-vertical.sapphire-button-group:has(> *:nth-child(3)){flex-direction:column-reverse}.sapphire-button-group--spacing-l{gap:var(--sapphire-button-group-size-spacing-l)}.sapphire-button-group--spacing-s{gap:var(--sapphire-button-group-size-spacing-s)}.sapphire-button-group--spacing-xs{gap:var(--sapphire-button-group-size-spacing-xs)}.sapphire-button-group--align-center{justify-content:center}.sapphire-button-group--align-right{justify-content:flex-end}.sapphire-button-group--align-left{justify-content:flex-start}.sapphire-button-group--vertical{flex-direction:column}.sapphire-button-group--vertical.sapphire-button-group--align-center{align-items:center}.sapphire-button-group--vertical.sapphire-button-group--align-right{align-items:flex-end}.sapphire-button-group--vertical.sapphire-button-group--align-left{align-items:flex-start}\n"] }]
@@ -601,7 +601,7 @@ class ButtonComponent {
601
601
  }
602
602
  }
603
603
  ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
604
- ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: { variant: "variant", appearance: "appearance", surface: "surface", size: "size", disabled: "disabled", iconAlign: "iconAlign", type: "type" }, host: { properties: { "attr.disabled": "disabled || null", "class.is-disabled": "disabled", "class.sapphire-button--large": "size === \"large\"", "class.sapphire-button--small": "size === \"small\"", "class.sapphire-button--with-left-icon": "buttonIcon && iconAlign === \"left\"", "class.sapphire-button--with-right-icon": "buttonIcon && iconAlign === \"right\"", "class.sapphire-button--secondary-surface": "surface === \"secondary\"", "type": "this.type", "class": "this.derivedVariantAndStyleClass" }, classAttribute: "sapphire-button" }, queries: [{ propertyName: "buttonIcon", first: true, predicate: ButtonIconDirective, descendants: true }, { propertyName: "icon", first: true, predicate: IconComponent, descendants: true }], hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<span class=\"sapphire-button__content\">\n <span\n *ngIf=\"buttonIcon && iconAlign === 'left'\"\n class=\"sapphire-button__icon\"\n >\n <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n </span>\n\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n\n <span\n *ngIf=\"buttonIcon && iconAlign === 'right'\"\n class=\"sapphire-button__icon\"\n >\n <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n </span>\n\n <ng-template #content>\n <ng-content></ng-content>\n </ng-template>\n <ng-template #iconContent>\n <ng-content select=\"[spButtonIcon]\"></ng-content>\n </ng-template>\n</span>\n", styles: [".sapphire-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;margin:0;font-family:var(--sapphire-button-font-name);font-weight:var(--sapphire-button-font-weight);font-size:var(--sapphire-button-size-font-m);text-transform:var(--sapphire-button-font-text-transform);letter-spacing:var(--sapphire-button-font-letter-spacing);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:0 var(--sapphire-button-size-spacing-horizontal-m);height:var(--sapphire-button-size-height-m);min-width:var(--sapphire-button-size-min-width-no-icon-m);max-width:-moz-fit-content;max-width:fit-content;flex-shrink:0;border-radius:var(--sapphire-button-size-radius-m);border-style:solid;border-width:0;border-color:transparent;transition-property:opacity,background-color,color;transition-duration:var(--sapphire-button-time-transition);transition-timing-function:ease-in-out;cursor:pointer}.sapphire-button__content{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;margin:0;width:100%}a.sapphire-button{text-decoration:none}.sapphire-button:disabled,.sapphire-button.is-disabled{opacity:var(--sapphire-button-opacity-disabled);cursor:not-allowed}.sapphire-button:focus{outline:none}.sapphire-button.is-focus,.sapphire-button:not(.js-focus):focus-visible{outline:var(--sapphire-button-size-focus-ring-border) solid var(--sapphire-button-color-focus-ring);outline-offset:var(--sapphire-button-size-focus-ring-offset)}.sapphire-button--with-left-icon,.sapphire-button--with-right-icon{min-width:var(--sapphire-button-size-min-width-with-icon-default)}.sapphire-button--with-right-icon .sapphire-button__icon{margin-left:var(--sapphire-button-size-spacing-icon-gap)}.sapphire-button--with-left-icon .sapphire-button__icon{margin-right:var(--sapphire-button-size-spacing-icon-gap)}.sapphire-button__spinner{position:absolute;display:inherit}.sapphire-button--loading .sapphire-button__content{visibility:hidden}.sapphire-button--primary-fill{background-color:var(--sapphire-button-color-background-primary-default);color:var(--sapphire-button-color-content-primary-default)}.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-primary-hover)}.sapphire-button--primary-fill.is-focus,.sapphire-button--primary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-primary-focus)}.sapphire-button--primary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):active,.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-primary-active)}.sapphire-button--secondary-fill{background-color:var(--sapphire-button-color-background-secondary-default);color:var(--sapphire-button-color-content-secondary-default)}.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-secondary-hover);color:var(--sapphire-button-color-content-secondary-hover)}.sapphire-button--secondary-fill.is-focus,.sapphire-button--secondary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-secondary-focus)}.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-secondary-active);color:var(--sapphire-button-color-content-secondary-active)}.sapphire-button--secondary-fill.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-secondary-surface-secondary-default)}.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-secondary-surface-secondary-hover)}.sapphire-button--secondary-fill.sapphire-button--secondary-surface.is-focus,.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-secondary-surface-secondary-focus)}.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-secondary-surface-secondary-active)}.sapphire-button--secondary-ghost{background-color:var(--sapphire-button-color-background-secondary-ghost-default);color:var(--sapphire-button-color-content-secondary-default)}.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-secondary-ghost-hover);color:var(--sapphire-button-color-content-secondary-hover)}.sapphire-button--secondary-ghost.is-focus,.sapphire-button--secondary-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-secondary-ghost-focus)}.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-secondary-ghost-active);color:var(--sapphire-button-color-content-secondary-active)}.sapphire-button--secondary-ghost.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-secondary-ghost-surface-secondary-default)}.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-secondary-ghost-surface-secondary-hover)}.sapphire-button--secondary-ghost.sapphire-button--secondary-surface.is-focus,.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-secondary-ghost-surface-secondary-focus)}.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-secondary-ghost-surface-secondary-active)}.sapphire-button--secondary-text{color:var(--sapphire-button-color-content-secondary-default);border-radius:var(--sapphire-button-size-radius-text);background:var(--sapphire-button-color-background-secondary-text);padding:0}.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-button-color-content-secondary-hover)}.sapphire-button--secondary-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-button-color-content-secondary-active)}.sapphire-button--tertiary-fill{background-color:var(--sapphire-button-color-background-tertiary-default);color:var(--sapphire-button-color-content-tertiary-default)}.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-tertiary-hover);color:var(--sapphire-button-color-content-tertiary-hover)}.sapphire-button--tertiary-fill.is-focus,.sapphire-button--tertiary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-tertiary-focus)}.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-tertiary-active);color:var(--sapphire-button-color-content-tertiary-active)}.sapphire-button--tertiary-fill.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-tertiary-surface-secondary-default)}.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-tertiary-surface-secondary-hover)}.sapphire-button--tertiary-fill.sapphire-button--secondary-surface.is-focus,.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-tertiary-surface-secondary-focus)}.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-tertiary-surface-secondary-active)}.sapphire-button--tertiary-ghost{background-color:var(--sapphire-button-color-background-tertiary-ghost-default);color:var(--sapphire-button-color-content-tertiary-default)}.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-tertiary-ghost-hover);color:var(--sapphire-button-color-content-tertiary-hover)}.sapphire-button--tertiary-ghost.is-focus,.sapphire-button--tertiary-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-tertiary-ghost-focus)}.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-tertiary-ghost-active);color:var(--sapphire-button-color-content-tertiary-active)}.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-tertiary-ghost-surface-secondary-default)}.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-tertiary-ghost-surface-secondary-hover)}.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface.is-focus,.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-tertiary-ghost-surface-secondary-focus)}.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-tertiary-ghost-surface-secondary-active)}.sapphire-button--tertiary-text{color:var(--sapphire-button-color-content-tertiary-default);border-radius:var(--sapphire-button-size-radius-text);background:var(--sapphire-button-color-background-tertiary-text);padding:0}.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-button-color-content-tertiary-hover)}.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-button-color-content-tertiary-active)}.sapphire-button--danger-fill{background-color:var(--sapphire-button-color-background-danger-default);color:var(--sapphire-button-color-content-danger-default)}.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-danger-hover);color:var(--sapphire-button-color-content-danger-hover)}.sapphire-button--danger-fill.is-focus,.sapphire-button--danger-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-danger-focus)}.sapphire-button--danger-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-danger-active);color:var(--sapphire-button-color-content-danger-active)}.sapphire-button--danger-fill.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-danger-surface-secondary-default)}.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-danger-surface-secondary-hover)}.sapphire-button--danger-fill.sapphire-button--secondary-surface.is-focus,.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-danger-surface-secondary-focus)}.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-danger-surface-secondary-active)}.sapphire-button--danger-ghost{background-color:var(--sapphire-button-color-background-danger-ghost-default);color:var(--sapphire-button-color-content-danger-default)}.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-danger-ghost-hover);color:var(--sapphire-button-color-content-danger-hover)}.sapphire-button--danger-ghost.is-focus,.sapphire-button--danger-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-danger-ghost-focus)}.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-danger-ghost-active);color:var(--sapphire-button-color-content-danger-active)}.sapphire-button--danger-ghost.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-danger-ghost-surface-secondary-default)}.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-danger-ghost-surface-secondary-hover)}.sapphire-button--danger-ghost.sapphire-button--secondary-surface.is-focus,.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-danger-ghost-surface-secondary-focus)}.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-danger-ghost-surface-secondary-active)}.sapphire-button--danger-text{color:var(--sapphire-button-color-content-danger-default);border-radius:var(--sapphire-button-size-radius-text);background:var(--sapphire-button-color-background-danger-text);padding:0}.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-button-color-content-danger-hover)}.sapphire-button--danger-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-button-color-content-danger-active)}.sapphire-button--selected{background-color:var(--sapphire-button-color-background-selected-default);color:var(--sapphire-button-color-content-selected-default)}.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-selected-hover)}.sapphire-button--selected.is-focus,.sapphire-button--selected:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-selected-focus)}.sapphire-button--selected:not(:disabled):not(.is-disabled).is-active,.sapphire-button--selected:not(:disabled):not(.is-disabled):active,.sapphire-button--selected:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-selected-active);color:var(--sapphire-button-color-content-selected-active)}.sapphire-button--unselected{background-color:var(--sapphire-button-color-background-unselected-default);color:var(--sapphire-button-color-content-unselected-default)}.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-unselected-hover)}.sapphire-button--unselected.is-focus,.sapphire-button--unselected:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-unselected-focus)}.sapphire-button--unselected:not(:disabled):not(.is-disabled).is-active,.sapphire-button--unselected:not(:disabled):not(.is-disabled):active,.sapphire-button--unselected:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-unselected-active);color:var(--sapphire-button-color-content-unselected-active)}.sapphire-button__icon{display:flex;flex-direction:column;justify-content:center;align-items:center;height:var(--sapphire-button-size-icon-m);width:var(--sapphire-button-size-icon-m)}.sapphire-button--large .sapphire-button__icon{height:var(--sapphire-button-size-icon-l);width:var(--sapphire-button-size-icon-l)}.sapphire-button--small .sapphire-button__icon{height:var(--sapphire-button-size-icon-s);width:var(--sapphire-button-size-icon-s)}.sapphire-button--large{height:var(--sapphire-button-size-height-l);min-width:var(--sapphire-button-size-min-width-no-icon-l);padding:0 var(--sapphire-button-size-spacing-horizontal-l);font-size:var(--sapphire-button-size-font-l);border-radius:var(--sapphire-button-size-radius-l)}.sapphire-button--large.sapphire-button--secondary-text,.sapphire-button--large.sapphire-button--tertiary-text,.sapphire-button--large.sapphire-button--danger-text{padding:0;border-radius:var(--sapphire-button-size-radius-text)}.sapphire-button--small{height:var(--sapphire-button-size-height-s);min-width:var(--sapphire-button-size-min-width-no-icon-s);padding:0 var(--sapphire-button-size-spacing-horizontal-s);font-size:var(--sapphire-button-size-font-s);border-radius:var(--sapphire-button-size-radius-s)}.sapphire-button--small.sapphire-button--secondary-text,.sapphire-button--small.sapphire-button--tertiary-text,.sapphire-button--small.sapphire-button--danger-text{padding:0;border-radius:var(--sapphire-button-size-radius-text)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
604
+ ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: { variant: "variant", appearance: "appearance", surface: "surface", size: "size", disabled: "disabled", iconAlign: "iconAlign", type: "type" }, host: { properties: { "attr.disabled": "disabled || null", "class.is-disabled": "disabled", "class.sapphire-button--large": "size === \"large\"", "class.sapphire-button--small": "size === \"small\"", "class.sapphire-button--with-left-icon": "buttonIcon && iconAlign === \"left\"", "class.sapphire-button--with-right-icon": "buttonIcon && iconAlign === \"right\"", "class.sapphire-button--secondary-surface": "surface === \"secondary\"", "type": "this.type", "class": "this.derivedVariantAndStyleClass" }, classAttribute: "sapphire-button" }, queries: [{ propertyName: "buttonIcon", first: true, predicate: ButtonIconDirective, descendants: true }, { propertyName: "icon", first: true, predicate: IconComponent, descendants: true }], hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<span class=\"sapphire-button__content\">\n <span\n *ngIf=\"buttonIcon && iconAlign === 'left'\"\n class=\"sapphire-button__icon\"\n >\n <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n </span>\n\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n\n <span\n *ngIf=\"buttonIcon && iconAlign === 'right'\"\n class=\"sapphire-button__icon\"\n >\n <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n </span>\n\n <ng-template #content>\n <ng-content></ng-content>\n </ng-template>\n <ng-template #iconContent>\n <ng-content select=\"[spButtonIcon]\"></ng-content>\n </ng-template>\n</span>\n", styles: [".sapphire-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;margin:0;font-family:var(--sapphire-button-font-name);font-weight:var(--sapphire-button-font-weight);font-size:var(--sapphire-button-size-font-m);text-transform:var(--sapphire-button-font-text-transform);letter-spacing:var(--sapphire-button-font-letter-spacing);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:0 var(--sapphire-button-size-spacing-horizontal-m);height:var(--sapphire-button-size-height-m);min-width:var(--sapphire-button-size-min-width-no-icon-m);max-width:-moz-fit-content;max-width:fit-content;flex-shrink:0;border-radius:var(--sapphire-button-size-radius-m);border-style:solid;border-width:0;border-color:transparent;transition-property:opacity,background-color,color;transition-duration:var(--sapphire-button-time-transition);transition-timing-function:ease-in-out;cursor:pointer}.sapphire-button__content{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;margin:0;width:100%}a.sapphire-button{text-decoration:none}.sapphire-button:disabled,.sapphire-button.is-disabled{opacity:var(--sapphire-button-opacity-disabled);cursor:not-allowed}.sapphire-button:focus{outline:none}.sapphire-button.is-focus,.sapphire-button:not(.js-focus):focus-visible{outline:var(--sapphire-button-size-focus-ring-border) solid var(--sapphire-button-color-focus-ring);outline-offset:var(--sapphire-button-size-focus-ring-offset)}.sapphire-button--with-left-icon,.sapphire-button--with-right-icon{min-width:var(--sapphire-button-size-min-width-with-icon-default)}.sapphire-button--with-right-icon .sapphire-button__icon{margin-left:var(--sapphire-button-size-spacing-icon-gap)}.sapphire-button--with-left-icon .sapphire-button__icon{margin-right:var(--sapphire-button-size-spacing-icon-gap)}.sapphire-button__spinner{position:absolute;display:inherit}.sapphire-button--loading .sapphire-button__content{visibility:hidden}.sapphire-button--primary-fill{background-color:var(--sapphire-button-color-background-primary-default);color:var(--sapphire-button-color-content-primary-default)}.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-primary-hover)}.sapphire-button--primary-fill.is-focus,.sapphire-button--primary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-primary-focus)}.sapphire-button--primary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):active,.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-primary-active)}.sapphire-button--secondary-fill{background-color:var(--sapphire-button-color-background-secondary-default);color:var(--sapphire-button-color-content-secondary-default)}.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-secondary-hover);color:var(--sapphire-button-color-content-secondary-hover)}.sapphire-button--secondary-fill.is-focus,.sapphire-button--secondary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-secondary-focus)}.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-secondary-active);color:var(--sapphire-button-color-content-secondary-active)}.sapphire-button--secondary-fill.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-secondary-surface-secondary-default)}.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-secondary-surface-secondary-hover)}.sapphire-button--secondary-fill.sapphire-button--secondary-surface.is-focus,.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-secondary-surface-secondary-focus)}.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-secondary-surface-secondary-active)}.sapphire-button--secondary-ghost{background-color:var(--sapphire-button-color-background-secondary-ghost-default);color:var(--sapphire-button-color-content-secondary-default)}.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-secondary-ghost-hover);color:var(--sapphire-button-color-content-secondary-hover)}.sapphire-button--secondary-ghost.is-focus,.sapphire-button--secondary-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-secondary-ghost-focus)}.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-secondary-ghost-active);color:var(--sapphire-button-color-content-secondary-active)}.sapphire-button--secondary-ghost.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-secondary-ghost-surface-secondary-default)}.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-secondary-ghost-surface-secondary-hover)}.sapphire-button--secondary-ghost.sapphire-button--secondary-surface.is-focus,.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-secondary-ghost-surface-secondary-focus)}.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-secondary-ghost-surface-secondary-active)}.sapphire-button--secondary-text{color:var(--sapphire-button-color-content-secondary-default);border-radius:var(--sapphire-button-size-radius-text);background:var(--sapphire-button-color-background-secondary-text);padding:0}.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-button-color-content-secondary-hover)}.sapphire-button--secondary-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-button-color-content-secondary-active)}.sapphire-button--tertiary-fill{background-color:var(--sapphire-button-color-background-tertiary-default);color:var(--sapphire-button-color-content-tertiary-default)}.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-tertiary-hover);color:var(--sapphire-button-color-content-tertiary-hover)}.sapphire-button--tertiary-fill.is-focus,.sapphire-button--tertiary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-tertiary-focus)}.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-tertiary-active);color:var(--sapphire-button-color-content-tertiary-active)}.sapphire-button--tertiary-fill.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-tertiary-surface-secondary-default)}.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-tertiary-surface-secondary-hover)}.sapphire-button--tertiary-fill.sapphire-button--secondary-surface.is-focus,.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-tertiary-surface-secondary-focus)}.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-tertiary-surface-secondary-active)}.sapphire-button--tertiary-ghost{background-color:var(--sapphire-button-color-background-tertiary-ghost-default);color:var(--sapphire-button-color-content-tertiary-default)}.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-tertiary-ghost-hover);color:var(--sapphire-button-color-content-tertiary-hover)}.sapphire-button--tertiary-ghost.is-focus,.sapphire-button--tertiary-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-tertiary-ghost-focus)}.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-tertiary-ghost-active);color:var(--sapphire-button-color-content-tertiary-active)}.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-tertiary-ghost-surface-secondary-default)}.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-tertiary-ghost-surface-secondary-hover)}.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface.is-focus,.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-tertiary-ghost-surface-secondary-focus)}.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-tertiary-ghost-surface-secondary-active)}.sapphire-button--tertiary-text{color:var(--sapphire-button-color-content-tertiary-default);border-radius:var(--sapphire-button-size-radius-text);background:var(--sapphire-button-color-background-tertiary-text);padding:0}.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-button-color-content-tertiary-hover)}.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-button-color-content-tertiary-active)}.sapphire-button--danger-fill{background-color:var(--sapphire-button-color-background-danger-default);color:var(--sapphire-button-color-content-danger-default)}.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-danger-hover);color:var(--sapphire-button-color-content-danger-hover)}.sapphire-button--danger-fill.is-focus,.sapphire-button--danger-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-danger-focus)}.sapphire-button--danger-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-danger-active);color:var(--sapphire-button-color-content-danger-active)}.sapphire-button--danger-fill.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-danger-surface-secondary-default)}.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-danger-surface-secondary-hover)}.sapphire-button--danger-fill.sapphire-button--secondary-surface.is-focus,.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-danger-surface-secondary-focus)}.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-danger-surface-secondary-active)}.sapphire-button--danger-ghost{background-color:var(--sapphire-button-color-background-danger-ghost-default);color:var(--sapphire-button-color-content-danger-default)}.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-danger-ghost-hover);color:var(--sapphire-button-color-content-danger-hover)}.sapphire-button--danger-ghost.is-focus,.sapphire-button--danger-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-danger-ghost-focus)}.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-danger-ghost-active);color:var(--sapphire-button-color-content-danger-active)}.sapphire-button--danger-ghost.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-danger-ghost-surface-secondary-default)}.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-danger-ghost-surface-secondary-hover)}.sapphire-button--danger-ghost.sapphire-button--secondary-surface.is-focus,.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-danger-ghost-surface-secondary-focus)}.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-danger-ghost-surface-secondary-active)}.sapphire-button--danger-text{color:var(--sapphire-button-color-content-danger-default);border-radius:var(--sapphire-button-size-radius-text);background:var(--sapphire-button-color-background-danger-text);padding:0}.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-button-color-content-danger-hover)}.sapphire-button--danger-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-button-color-content-danger-active)}.sapphire-button--selected{background-color:var(--sapphire-button-color-background-selected-default);color:var(--sapphire-button-color-content-selected-default)}.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-selected-hover)}.sapphire-button--selected.is-focus,.sapphire-button--selected:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-selected-focus)}.sapphire-button--selected:not(:disabled):not(.is-disabled).is-active,.sapphire-button--selected:not(:disabled):not(.is-disabled):active,.sapphire-button--selected:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-selected-active);color:var(--sapphire-button-color-content-selected-active)}.sapphire-button--unselected{background-color:var(--sapphire-button-color-background-unselected-default);color:var(--sapphire-button-color-content-unselected-default)}.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-unselected-hover)}.sapphire-button--unselected.is-focus,.sapphire-button--unselected:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-unselected-focus)}.sapphire-button--unselected:not(:disabled):not(.is-disabled).is-active,.sapphire-button--unselected:not(:disabled):not(.is-disabled):active,.sapphire-button--unselected:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-unselected-active);color:var(--sapphire-button-color-content-unselected-active)}.sapphire-button__icon{display:flex;flex-direction:column;justify-content:center;align-items:center;height:var(--sapphire-button-size-icon-m);width:var(--sapphire-button-size-icon-m)}.sapphire-button--large .sapphire-button__icon{height:var(--sapphire-button-size-icon-l);width:var(--sapphire-button-size-icon-l)}.sapphire-button--small .sapphire-button__icon{height:var(--sapphire-button-size-icon-s);width:var(--sapphire-button-size-icon-s)}.sapphire-button--large{height:var(--sapphire-button-size-height-l);min-width:var(--sapphire-button-size-min-width-no-icon-l);padding:0 var(--sapphire-button-size-spacing-horizontal-l);font-size:var(--sapphire-button-size-font-l);border-radius:var(--sapphire-button-size-radius-l)}.sapphire-button--large.sapphire-button--secondary-text,.sapphire-button--large.sapphire-button--tertiary-text,.sapphire-button--large.sapphire-button--danger-text{padding:0;border-radius:var(--sapphire-button-size-radius-text)}.sapphire-button--small{height:var(--sapphire-button-size-height-s);min-width:var(--sapphire-button-size-min-width-no-icon-s);padding:0 var(--sapphire-button-size-spacing-horizontal-s);font-size:var(--sapphire-button-size-font-s);border-radius:var(--sapphire-button-size-radius-s)}.sapphire-button--small.sapphire-button--secondary-text,.sapphire-button--small.sapphire-button--tertiary-text,.sapphire-button--small.sapphire-button--danger-text{padding:0;border-radius:var(--sapphire-button-size-radius-text)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
605
605
  __decorate([
606
606
  CoerceBoolean
607
607
  ], ButtonComponent.prototype, "disabled", void 0);
@@ -793,7 +793,7 @@ ToggleButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
793
793
  useExisting: forwardRef(() => ToggleButtonComponent),
794
794
  multi: true,
795
795
  },
796
- ], queries: [{ propertyName: "buttonIcon", first: true, predicate: ButtonIconDirective, descendants: true }, { propertyName: "icon", first: true, predicate: IconComponent, descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<span class=\"sapphire-button__content\">\n <span\n *ngIf=\"buttonIcon && iconAlign === 'left'\"\n class=\"sapphire-button__icon\"\n >\n <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n </span>\n\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n\n <span\n *ngIf=\"buttonIcon && iconAlign === 'right'\"\n class=\"sapphire-button__icon\"\n >\n <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n </span>\n\n <ng-template #content>\n <ng-content></ng-content>\n </ng-template>\n <ng-template #iconContent>\n <ng-content select=\"[spButtonIcon]\"></ng-content>\n </ng-template>\n</span>\n", styles: [".sapphire-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;margin:0;font-family:var(--sapphire-button-font-name);font-weight:var(--sapphire-button-font-weight);font-size:var(--sapphire-button-size-font-m);text-transform:var(--sapphire-button-font-text-transform);letter-spacing:var(--sapphire-button-font-letter-spacing);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:0 var(--sapphire-button-size-spacing-horizontal-m);height:var(--sapphire-button-size-height-m);min-width:var(--sapphire-button-size-min-width-no-icon-m);max-width:-moz-fit-content;max-width:fit-content;flex-shrink:0;border-radius:var(--sapphire-button-size-radius-m);border-style:solid;border-width:0;border-color:transparent;transition-property:opacity,background-color,color;transition-duration:var(--sapphire-button-time-transition);transition-timing-function:ease-in-out;cursor:pointer}.sapphire-button__content{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;margin:0;width:100%}a.sapphire-button{text-decoration:none}.sapphire-button:disabled,.sapphire-button.is-disabled{opacity:var(--sapphire-button-opacity-disabled);cursor:not-allowed}.sapphire-button:focus{outline:none}.sapphire-button.is-focus,.sapphire-button:not(.js-focus):focus-visible{outline:var(--sapphire-button-size-focus-ring-border) solid var(--sapphire-button-color-focus-ring);outline-offset:var(--sapphire-button-size-focus-ring-offset)}.sapphire-button--with-left-icon,.sapphire-button--with-right-icon{min-width:var(--sapphire-button-size-min-width-with-icon-default)}.sapphire-button--with-right-icon .sapphire-button__icon{margin-left:var(--sapphire-button-size-spacing-icon-gap)}.sapphire-button--with-left-icon .sapphire-button__icon{margin-right:var(--sapphire-button-size-spacing-icon-gap)}.sapphire-button__spinner{position:absolute;display:inherit}.sapphire-button--loading .sapphire-button__content{visibility:hidden}.sapphire-button--primary-fill{background-color:var(--sapphire-button-color-background-primary-default);color:var(--sapphire-button-color-content-primary-default)}.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-primary-hover)}.sapphire-button--primary-fill.is-focus,.sapphire-button--primary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-primary-focus)}.sapphire-button--primary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):active,.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-primary-active)}.sapphire-button--secondary-fill{background-color:var(--sapphire-button-color-background-secondary-default);color:var(--sapphire-button-color-content-secondary-default)}.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-secondary-hover);color:var(--sapphire-button-color-content-secondary-hover)}.sapphire-button--secondary-fill.is-focus,.sapphire-button--secondary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-secondary-focus)}.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-secondary-active);color:var(--sapphire-button-color-content-secondary-active)}.sapphire-button--secondary-fill.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-secondary-surface-secondary-default)}.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-secondary-surface-secondary-hover)}.sapphire-button--secondary-fill.sapphire-button--secondary-surface.is-focus,.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-secondary-surface-secondary-focus)}.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-secondary-surface-secondary-active)}.sapphire-button--secondary-ghost{background-color:var(--sapphire-button-color-background-secondary-ghost-default);color:var(--sapphire-button-color-content-secondary-default)}.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-secondary-ghost-hover);color:var(--sapphire-button-color-content-secondary-hover)}.sapphire-button--secondary-ghost.is-focus,.sapphire-button--secondary-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-secondary-ghost-focus)}.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-secondary-ghost-active);color:var(--sapphire-button-color-content-secondary-active)}.sapphire-button--secondary-ghost.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-secondary-ghost-surface-secondary-default)}.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-secondary-ghost-surface-secondary-hover)}.sapphire-button--secondary-ghost.sapphire-button--secondary-surface.is-focus,.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-secondary-ghost-surface-secondary-focus)}.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-secondary-ghost-surface-secondary-active)}.sapphire-button--secondary-text{color:var(--sapphire-button-color-content-secondary-default);border-radius:var(--sapphire-button-size-radius-text);background:var(--sapphire-button-color-background-secondary-text);padding:0}.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-button-color-content-secondary-hover)}.sapphire-button--secondary-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-button-color-content-secondary-active)}.sapphire-button--tertiary-fill{background-color:var(--sapphire-button-color-background-tertiary-default);color:var(--sapphire-button-color-content-tertiary-default)}.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-tertiary-hover);color:var(--sapphire-button-color-content-tertiary-hover)}.sapphire-button--tertiary-fill.is-focus,.sapphire-button--tertiary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-tertiary-focus)}.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-tertiary-active);color:var(--sapphire-button-color-content-tertiary-active)}.sapphire-button--tertiary-fill.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-tertiary-surface-secondary-default)}.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-tertiary-surface-secondary-hover)}.sapphire-button--tertiary-fill.sapphire-button--secondary-surface.is-focus,.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-tertiary-surface-secondary-focus)}.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-tertiary-surface-secondary-active)}.sapphire-button--tertiary-ghost{background-color:var(--sapphire-button-color-background-tertiary-ghost-default);color:var(--sapphire-button-color-content-tertiary-default)}.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-tertiary-ghost-hover);color:var(--sapphire-button-color-content-tertiary-hover)}.sapphire-button--tertiary-ghost.is-focus,.sapphire-button--tertiary-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-tertiary-ghost-focus)}.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-tertiary-ghost-active);color:var(--sapphire-button-color-content-tertiary-active)}.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-tertiary-ghost-surface-secondary-default)}.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-tertiary-ghost-surface-secondary-hover)}.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface.is-focus,.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-tertiary-ghost-surface-secondary-focus)}.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-tertiary-ghost-surface-secondary-active)}.sapphire-button--tertiary-text{color:var(--sapphire-button-color-content-tertiary-default);border-radius:var(--sapphire-button-size-radius-text);background:var(--sapphire-button-color-background-tertiary-text);padding:0}.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-button-color-content-tertiary-hover)}.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-button-color-content-tertiary-active)}.sapphire-button--danger-fill{background-color:var(--sapphire-button-color-background-danger-default);color:var(--sapphire-button-color-content-danger-default)}.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-danger-hover);color:var(--sapphire-button-color-content-danger-hover)}.sapphire-button--danger-fill.is-focus,.sapphire-button--danger-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-danger-focus)}.sapphire-button--danger-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-danger-active);color:var(--sapphire-button-color-content-danger-active)}.sapphire-button--danger-fill.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-danger-surface-secondary-default)}.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-danger-surface-secondary-hover)}.sapphire-button--danger-fill.sapphire-button--secondary-surface.is-focus,.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-danger-surface-secondary-focus)}.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-danger-surface-secondary-active)}.sapphire-button--danger-ghost{background-color:var(--sapphire-button-color-background-danger-ghost-default);color:var(--sapphire-button-color-content-danger-default)}.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-danger-ghost-hover);color:var(--sapphire-button-color-content-danger-hover)}.sapphire-button--danger-ghost.is-focus,.sapphire-button--danger-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-danger-ghost-focus)}.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-danger-ghost-active);color:var(--sapphire-button-color-content-danger-active)}.sapphire-button--danger-ghost.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-danger-ghost-surface-secondary-default)}.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-danger-ghost-surface-secondary-hover)}.sapphire-button--danger-ghost.sapphire-button--secondary-surface.is-focus,.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-danger-ghost-surface-secondary-focus)}.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-danger-ghost-surface-secondary-active)}.sapphire-button--danger-text{color:var(--sapphire-button-color-content-danger-default);border-radius:var(--sapphire-button-size-radius-text);background:var(--sapphire-button-color-background-danger-text);padding:0}.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-button-color-content-danger-hover)}.sapphire-button--danger-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-button-color-content-danger-active)}.sapphire-button--selected{background-color:var(--sapphire-button-color-background-selected-default);color:var(--sapphire-button-color-content-selected-default)}.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-selected-hover)}.sapphire-button--selected.is-focus,.sapphire-button--selected:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-selected-focus)}.sapphire-button--selected:not(:disabled):not(.is-disabled).is-active,.sapphire-button--selected:not(:disabled):not(.is-disabled):active,.sapphire-button--selected:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-selected-active);color:var(--sapphire-button-color-content-selected-active)}.sapphire-button--unselected{background-color:var(--sapphire-button-color-background-unselected-default);color:var(--sapphire-button-color-content-unselected-default)}.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-unselected-hover)}.sapphire-button--unselected.is-focus,.sapphire-button--unselected:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-unselected-focus)}.sapphire-button--unselected:not(:disabled):not(.is-disabled).is-active,.sapphire-button--unselected:not(:disabled):not(.is-disabled):active,.sapphire-button--unselected:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-unselected-active);color:var(--sapphire-button-color-content-unselected-active)}.sapphire-button__icon{display:flex;flex-direction:column;justify-content:center;align-items:center;height:var(--sapphire-button-size-icon-m);width:var(--sapphire-button-size-icon-m)}.sapphire-button--large .sapphire-button__icon{height:var(--sapphire-button-size-icon-l);width:var(--sapphire-button-size-icon-l)}.sapphire-button--small .sapphire-button__icon{height:var(--sapphire-button-size-icon-s);width:var(--sapphire-button-size-icon-s)}.sapphire-button--large{height:var(--sapphire-button-size-height-l);min-width:var(--sapphire-button-size-min-width-no-icon-l);padding:0 var(--sapphire-button-size-spacing-horizontal-l);font-size:var(--sapphire-button-size-font-l);border-radius:var(--sapphire-button-size-radius-l)}.sapphire-button--large.sapphire-button--secondary-text,.sapphire-button--large.sapphire-button--tertiary-text,.sapphire-button--large.sapphire-button--danger-text{padding:0;border-radius:var(--sapphire-button-size-radius-text)}.sapphire-button--small{height:var(--sapphire-button-size-height-s);min-width:var(--sapphire-button-size-min-width-no-icon-s);padding:0 var(--sapphire-button-size-spacing-horizontal-s);font-size:var(--sapphire-button-size-font-s);border-radius:var(--sapphire-button-size-radius-s)}.sapphire-button--small.sapphire-button--secondary-text,.sapphire-button--small.sapphire-button--tertiary-text,.sapphire-button--small.sapphire-button--danger-text{padding:0;border-radius:var(--sapphire-button-size-radius-text)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
796
+ ], queries: [{ propertyName: "buttonIcon", first: true, predicate: ButtonIconDirective, descendants: true }, { propertyName: "icon", first: true, predicate: IconComponent, descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<span class=\"sapphire-button__content\">\n <span\n *ngIf=\"buttonIcon && iconAlign === 'left'\"\n class=\"sapphire-button__icon\"\n >\n <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n </span>\n\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n\n <span\n *ngIf=\"buttonIcon && iconAlign === 'right'\"\n class=\"sapphire-button__icon\"\n >\n <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n </span>\n\n <ng-template #content>\n <ng-content></ng-content>\n </ng-template>\n <ng-template #iconContent>\n <ng-content select=\"[spButtonIcon]\"></ng-content>\n </ng-template>\n</span>\n", styles: [".sapphire-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;margin:0;font-family:var(--sapphire-button-font-name);font-weight:var(--sapphire-button-font-weight);font-size:var(--sapphire-button-size-font-m);text-transform:var(--sapphire-button-font-text-transform);letter-spacing:var(--sapphire-button-font-letter-spacing);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:0 var(--sapphire-button-size-spacing-horizontal-m);height:var(--sapphire-button-size-height-m);min-width:var(--sapphire-button-size-min-width-no-icon-m);max-width:-moz-fit-content;max-width:fit-content;flex-shrink:0;border-radius:var(--sapphire-button-size-radius-m);border-style:solid;border-width:0;border-color:transparent;transition-property:opacity,background-color,color;transition-duration:var(--sapphire-button-time-transition);transition-timing-function:ease-in-out;cursor:pointer}.sapphire-button__content{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;margin:0;width:100%}a.sapphire-button{text-decoration:none}.sapphire-button:disabled,.sapphire-button.is-disabled{opacity:var(--sapphire-button-opacity-disabled);cursor:not-allowed}.sapphire-button:focus{outline:none}.sapphire-button.is-focus,.sapphire-button:not(.js-focus):focus-visible{outline:var(--sapphire-button-size-focus-ring-border) solid var(--sapphire-button-color-focus-ring);outline-offset:var(--sapphire-button-size-focus-ring-offset)}.sapphire-button--with-left-icon,.sapphire-button--with-right-icon{min-width:var(--sapphire-button-size-min-width-with-icon-default)}.sapphire-button--with-right-icon .sapphire-button__icon{margin-left:var(--sapphire-button-size-spacing-icon-gap)}.sapphire-button--with-left-icon .sapphire-button__icon{margin-right:var(--sapphire-button-size-spacing-icon-gap)}.sapphire-button__spinner{position:absolute;display:inherit}.sapphire-button--loading .sapphire-button__content{visibility:hidden}.sapphire-button--primary-fill{background-color:var(--sapphire-button-color-background-primary-default);color:var(--sapphire-button-color-content-primary-default)}.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-primary-hover)}.sapphire-button--primary-fill.is-focus,.sapphire-button--primary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-primary-focus)}.sapphire-button--primary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):active,.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-primary-active)}.sapphire-button--secondary-fill{background-color:var(--sapphire-button-color-background-secondary-default);color:var(--sapphire-button-color-content-secondary-default)}.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-secondary-hover);color:var(--sapphire-button-color-content-secondary-hover)}.sapphire-button--secondary-fill.is-focus,.sapphire-button--secondary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-secondary-focus)}.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-secondary-active);color:var(--sapphire-button-color-content-secondary-active)}.sapphire-button--secondary-fill.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-secondary-surface-secondary-default)}.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-secondary-surface-secondary-hover)}.sapphire-button--secondary-fill.sapphire-button--secondary-surface.is-focus,.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-secondary-surface-secondary-focus)}.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-secondary-surface-secondary-active)}.sapphire-button--secondary-ghost{background-color:var(--sapphire-button-color-background-secondary-ghost-default);color:var(--sapphire-button-color-content-secondary-default)}.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-secondary-ghost-hover);color:var(--sapphire-button-color-content-secondary-hover)}.sapphire-button--secondary-ghost.is-focus,.sapphire-button--secondary-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-secondary-ghost-focus)}.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-secondary-ghost-active);color:var(--sapphire-button-color-content-secondary-active)}.sapphire-button--secondary-ghost.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-secondary-ghost-surface-secondary-default)}.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-secondary-ghost-surface-secondary-hover)}.sapphire-button--secondary-ghost.sapphire-button--secondary-surface.is-focus,.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-secondary-ghost-surface-secondary-focus)}.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-secondary-ghost-surface-secondary-active)}.sapphire-button--secondary-text{color:var(--sapphire-button-color-content-secondary-default);border-radius:var(--sapphire-button-size-radius-text);background:var(--sapphire-button-color-background-secondary-text);padding:0}.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-button-color-content-secondary-hover)}.sapphire-button--secondary-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-button-color-content-secondary-active)}.sapphire-button--tertiary-fill{background-color:var(--sapphire-button-color-background-tertiary-default);color:var(--sapphire-button-color-content-tertiary-default)}.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-tertiary-hover);color:var(--sapphire-button-color-content-tertiary-hover)}.sapphire-button--tertiary-fill.is-focus,.sapphire-button--tertiary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-tertiary-focus)}.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-tertiary-active);color:var(--sapphire-button-color-content-tertiary-active)}.sapphire-button--tertiary-fill.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-tertiary-surface-secondary-default)}.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-tertiary-surface-secondary-hover)}.sapphire-button--tertiary-fill.sapphire-button--secondary-surface.is-focus,.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-tertiary-surface-secondary-focus)}.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-tertiary-surface-secondary-active)}.sapphire-button--tertiary-ghost{background-color:var(--sapphire-button-color-background-tertiary-ghost-default);color:var(--sapphire-button-color-content-tertiary-default)}.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-tertiary-ghost-hover);color:var(--sapphire-button-color-content-tertiary-hover)}.sapphire-button--tertiary-ghost.is-focus,.sapphire-button--tertiary-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-tertiary-ghost-focus)}.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-tertiary-ghost-active);color:var(--sapphire-button-color-content-tertiary-active)}.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-tertiary-ghost-surface-secondary-default)}.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-tertiary-ghost-surface-secondary-hover)}.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface.is-focus,.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-tertiary-ghost-surface-secondary-focus)}.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-tertiary-ghost-surface-secondary-active)}.sapphire-button--tertiary-text{color:var(--sapphire-button-color-content-tertiary-default);border-radius:var(--sapphire-button-size-radius-text);background:var(--sapphire-button-color-background-tertiary-text);padding:0}.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-button-color-content-tertiary-hover)}.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-button-color-content-tertiary-active)}.sapphire-button--danger-fill{background-color:var(--sapphire-button-color-background-danger-default);color:var(--sapphire-button-color-content-danger-default)}.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-danger-hover);color:var(--sapphire-button-color-content-danger-hover)}.sapphire-button--danger-fill.is-focus,.sapphire-button--danger-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-danger-focus)}.sapphire-button--danger-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-danger-active);color:var(--sapphire-button-color-content-danger-active)}.sapphire-button--danger-fill.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-danger-surface-secondary-default)}.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-danger-surface-secondary-hover)}.sapphire-button--danger-fill.sapphire-button--secondary-surface.is-focus,.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-danger-surface-secondary-focus)}.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-danger-surface-secondary-active)}.sapphire-button--danger-ghost{background-color:var(--sapphire-button-color-background-danger-ghost-default);color:var(--sapphire-button-color-content-danger-default)}.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-danger-ghost-hover);color:var(--sapphire-button-color-content-danger-hover)}.sapphire-button--danger-ghost.is-focus,.sapphire-button--danger-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-danger-ghost-focus)}.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-danger-ghost-active);color:var(--sapphire-button-color-content-danger-active)}.sapphire-button--danger-ghost.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-danger-ghost-surface-secondary-default)}.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-danger-ghost-surface-secondary-hover)}.sapphire-button--danger-ghost.sapphire-button--secondary-surface.is-focus,.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-danger-ghost-surface-secondary-focus)}.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-danger-ghost-surface-secondary-active)}.sapphire-button--danger-text{color:var(--sapphire-button-color-content-danger-default);border-radius:var(--sapphire-button-size-radius-text);background:var(--sapphire-button-color-background-danger-text);padding:0}.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-button-color-content-danger-hover)}.sapphire-button--danger-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-button-color-content-danger-active)}.sapphire-button--selected{background-color:var(--sapphire-button-color-background-selected-default);color:var(--sapphire-button-color-content-selected-default)}.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-selected-hover)}.sapphire-button--selected.is-focus,.sapphire-button--selected:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-selected-focus)}.sapphire-button--selected:not(:disabled):not(.is-disabled).is-active,.sapphire-button--selected:not(:disabled):not(.is-disabled):active,.sapphire-button--selected:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-selected-active);color:var(--sapphire-button-color-content-selected-active)}.sapphire-button--unselected{background-color:var(--sapphire-button-color-background-unselected-default);color:var(--sapphire-button-color-content-unselected-default)}.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-unselected-hover)}.sapphire-button--unselected.is-focus,.sapphire-button--unselected:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-unselected-focus)}.sapphire-button--unselected:not(:disabled):not(.is-disabled).is-active,.sapphire-button--unselected:not(:disabled):not(.is-disabled):active,.sapphire-button--unselected:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-unselected-active);color:var(--sapphire-button-color-content-unselected-active)}.sapphire-button__icon{display:flex;flex-direction:column;justify-content:center;align-items:center;height:var(--sapphire-button-size-icon-m);width:var(--sapphire-button-size-icon-m)}.sapphire-button--large .sapphire-button__icon{height:var(--sapphire-button-size-icon-l);width:var(--sapphire-button-size-icon-l)}.sapphire-button--small .sapphire-button__icon{height:var(--sapphire-button-size-icon-s);width:var(--sapphire-button-size-icon-s)}.sapphire-button--large{height:var(--sapphire-button-size-height-l);min-width:var(--sapphire-button-size-min-width-no-icon-l);padding:0 var(--sapphire-button-size-spacing-horizontal-l);font-size:var(--sapphire-button-size-font-l);border-radius:var(--sapphire-button-size-radius-l)}.sapphire-button--large.sapphire-button--secondary-text,.sapphire-button--large.sapphire-button--tertiary-text,.sapphire-button--large.sapphire-button--danger-text{padding:0;border-radius:var(--sapphire-button-size-radius-text)}.sapphire-button--small{height:var(--sapphire-button-size-height-s);min-width:var(--sapphire-button-size-min-width-no-icon-s);padding:0 var(--sapphire-button-size-spacing-horizontal-s);font-size:var(--sapphire-button-size-font-s);border-radius:var(--sapphire-button-size-radius-s)}.sapphire-button--small.sapphire-button--secondary-text,.sapphire-button--small.sapphire-button--tertiary-text,.sapphire-button--small.sapphire-button--danger-text{padding:0;border-radius:var(--sapphire-button-size-radius-text)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
797
797
  __decorate([
798
798
  CoerceBoolean
799
799
  ], ToggleButtonComponent.prototype, "selected", void 0);
@@ -1158,7 +1158,7 @@ CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
1158
1158
  useExisting: forwardRef(() => CheckboxComponent),
1159
1159
  multi: true,
1160
1160
  },
1161
- ], viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["spCheckbox"], usesInheritance: true, hostDirectives: [{ directive: ThemeCheckDirective }], ngImport: i0, template: "<label\n [for]=\"_inputId\"\n class=\"sapphire-checkbox\"\n [class.sapphire-checkbox--checked]=\"selected\"\n [class.sapphire-checkbox--indeterminate]=\"indeterminate\"\n [class.sapphire-checkbox--medium]=\"size === 'medium'\"\n>\n <input\n #input\n type=\"checkbox\"\n class=\"sapphire-checkbox__input\"\n [attr.aria-checked]=\"_getAriaChecked()\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [checked]=\"selected\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [id]=\"_inputId\"\n [required]=\"required\"\n [tabIndex]=\"tabIndex\"\n (blur)=\"_onBlur()\"\n (click)=\"_onInputClick($event)\"\n (change)=\"_onInteractionEvent($event)\"\n />\n <span class=\"sapphire-checkbox__box\">\n <svg\n *ngIf=\"indeterminate\"\n class=\"sapphire-checkbox__box-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"square\"\n d=\"M7 12h10\"\n />\n <path fill=\"currentColor\" fill-rule=\"nonzero\" d=\"M18 11v2H6v-2z\" />\n </g>\n </svg>\n <svg\n *ngIf=\"selected && !indeterminate\"\n class=\"sapphire-checkbox__box-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M17.782 6.918l.753.659a.5.5 0 01.047.705L10.9 17.061a.5.5 0 01-.73.024l-4.232-4.231a.5.5 0 010-.708l.707-.707a.5.5 0 01.708 0l3.097 3.097 6.626-7.57a.5.5 0 01.705-.048z\"\n fill=\"currentColor\"\n fill-rule=\"nonzero\"\n />\n </svg>\n </span>\n <span class=\"sapphire-checkbox__label\"><ng-content></ng-content></span>\n</label>\n", styles: [".sapphire-checkbox{font-family:var(--sapphire-checkbox-font-label-name);display:inline-flex;position:relative;max-width:100%}.sapphire-checkbox__input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-checkbox__label{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-left:var(--sapphire-checkbox-size-spacing-label);font-size:var(--sapphire-checkbox-size-font-content-l);color:var(--sapphire-checkbox-color-label);line-height:var(--sapphire-checkbox-size-height-label-l)}.sapphire-checkbox__label:empty{margin-left:0}.sapphire-checkbox--medium .sapphire-checkbox__label{font-size:var(--sapphire-checkbox-size-font-content-m);line-height:var(--sapphire-checkbox-size-height-label-m)}.sapphire-checkbox__error-text{display:block;font-family:var(--sapphire-checkbox-font-error-text-name);font-weight:var(--sapphire-checkbox-font-error-text-weight);font-size:var(--sapphire-checkbox-size-font-error-text-l);line-height:var(--sapphire-checkbox-size-line-height-error-text-l);color:var(--sapphire-checkbox-color-error-text);margin-top:var(--sapphire-checkbox-size-spacing-error-text-vertical);margin-left:calc(var(--sapphire-checkbox-size-spacing-label) + var(--sapphire-checkbox-size-width-box-l))}.sapphire-checkbox__error-text--medium{font-size:var(--sapphire-checkbox-size-font-error-text-m);line-height:var(--sapphire-checkbox-size-line-height-error-text-m);margin-left:calc(var(--sapphire-checkbox-size-spacing-label) + var(--sapphire-checkbox-size-width-box-m))}.sapphire-checkbox__box{box-sizing:border-box;position:relative;width:var(--sapphire-checkbox-size-width-box-l);height:var(--sapphire-checkbox-size-height-box-l);border-radius:var(--sapphire-checkbox-size-radius);border:var(--sapphire-checkbox-size-width-border-unchecked) solid var(--sapphire-checkbox-color-border-unchecked-default);background-color:var(--sapphire-checkbox-color-background-unchecked);transition:all var(--sapphire-checkbox-time-transition);flex-shrink:0;display:inline-flex;justify-content:center;align-items:center}.sapphire-checkbox__box:has(~ .sapphire-checkbox__label:not(:empty)){margin-top:var(--sapphire-checkbox-size-spacing-box)}.sapphire-checkbox--medium .sapphire-checkbox__box{width:var(--sapphire-checkbox-size-width-box-m);height:var(--sapphire-checkbox-size-height-box-m)}.sapphire-checkbox__box-icon{display:inherit;line-height:0;color:var(--sapphire-checkbox-color-icon);margin:calc(var(--sapphire-checkbox-size-width-border-unchecked) * -1);height:var(--sapphire-checkbox-size-height-box-l);width:var(--sapphire-checkbox-size-width-box-l)}.sapphire-checkbox--medium .sapphire-checkbox__box-icon{height:var(--sapphire-checkbox-size-height-box-m);width:var(--sapphire-checkbox-size-width-box-m)}.sapphire-checkbox--error .sapphire-checkbox__box{border-color:var(--sapphire-checkbox-color-border-unchecked-error-default)}.sapphire-checkbox--checked .sapphire-checkbox__box,.sapphire-checkbox--indeterminate .sapphire-checkbox__box{border-width:var(--sapphire-checkbox-size-width-border-checked);background-color:var(--sapphire-checkbox-color-background-checked-default)}.sapphire-checkbox--checked.sapphire-checkbox--error .sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error .sapphire-checkbox__box{background-color:var(--sapphire-checkbox-color-background-checked-error-default)}.sapphire-checkbox:not(:active):not(.is-active):not(.sapphire-checkbox--checked).is-hover .sapphire-checkbox__box,.sapphire-checkbox:not(:active):not(.is-active):not(.sapphire-checkbox--checked):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{border-color:var(--sapphire-checkbox-color-border-unchecked-hover)}.sapphire-checkbox--error:not(:active):not(.is-active):not(.sapphire-checkbox--checked).is-hover .sapphire-checkbox__box,.sapphire-checkbox--error:not(:active):not(.is-active):not(.sapphire-checkbox--checked):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{border-color:var(--sapphire-checkbox-color-border-unchecked-error-hover)}.sapphire-checkbox--checked:not(:active):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--checked:not(:active):not(.is-active):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box,.sapphire-checkbox--indeterminate:not(:active):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--indeterminate:not(:active):not(.is-active):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{background-color:var(--sapphire-checkbox-color-background-checked-hover)}.sapphire-checkbox--checked.sapphire-checkbox--error:not(:active):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--checked.sapphire-checkbox--error:not(:active):not(.is-active):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error:not(:active):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error:not(:active):not(.is-active):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{background-color:var(--sapphire-checkbox-color-background-checked-error-hover)}.sapphire-checkbox.is-focus .sapphire-checkbox__box,.sapphire-checkbox:not(.js-focus) .sapphire-checkbox__input:focus-visible~.sapphire-checkbox__box{outline:var(--sapphire-checkbox-size-focus-ring-border) solid var(--sapphire-checkbox-color-focus-ring);outline-offset:var(--sapphire-checkbox-size-focus-ring-offset)}.sapphire-checkbox__input:disabled{cursor:not-allowed}.sapphire-checkbox:not(.sapphire-checkbox--no-disabled) .sapphire-checkbox__input:disabled~.sapphire-checkbox__box,.sapphire-checkbox:not(.sapphire-checkbox--no-disabled) .sapphire-checkbox__input:disabled~.sapphire-checkbox__label{opacity:var(--sapphire-checkbox-opacity-disabled)}:host{display:inline-flex}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1161
+ ], viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["spCheckbox"], usesInheritance: true, hostDirectives: [{ directive: ThemeCheckDirective }], ngImport: i0, template: "<label\n [for]=\"_inputId\"\n class=\"sapphire-checkbox\"\n [class.sapphire-checkbox--checked]=\"selected\"\n [class.sapphire-checkbox--indeterminate]=\"indeterminate\"\n [class.sapphire-checkbox--medium]=\"size === 'medium'\"\n>\n <input\n #input\n type=\"checkbox\"\n class=\"sapphire-checkbox__input\"\n [attr.aria-checked]=\"_getAriaChecked()\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [checked]=\"selected\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [id]=\"_inputId\"\n [required]=\"required\"\n [tabIndex]=\"tabIndex\"\n (blur)=\"_onBlur()\"\n (click)=\"_onInputClick($event)\"\n (change)=\"_onInteractionEvent($event)\"\n />\n <span class=\"sapphire-checkbox__box\">\n <svg\n *ngIf=\"indeterminate\"\n class=\"sapphire-checkbox__box-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"square\"\n d=\"M7 12h10\"\n />\n <path fill=\"currentColor\" fill-rule=\"nonzero\" d=\"M18 11v2H6v-2z\" />\n </g>\n </svg>\n <svg\n *ngIf=\"selected && !indeterminate\"\n class=\"sapphire-checkbox__box-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M17.782 6.918l.753.659a.5.5 0 01.047.705L10.9 17.061a.5.5 0 01-.73.024l-4.232-4.231a.5.5 0 010-.708l.707-.707a.5.5 0 01.708 0l3.097 3.097 6.626-7.57a.5.5 0 01.705-.048z\"\n fill=\"currentColor\"\n fill-rule=\"nonzero\"\n />\n </svg>\n </span>\n <span class=\"sapphire-checkbox__label\"><ng-content></ng-content></span>\n</label>\n", styles: [".sapphire-checkbox{font-family:var(--sapphire-checkbox-font-label-name);display:inline-flex;position:relative;max-width:100%}.sapphire-checkbox__input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-checkbox__label{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-left:var(--sapphire-checkbox-size-spacing-label);font-size:var(--sapphire-checkbox-size-font-content-l);color:var(--sapphire-checkbox-color-label);line-height:var(--sapphire-checkbox-size-height-label-l)}.sapphire-checkbox__label:empty{margin-left:0}.sapphire-checkbox--medium .sapphire-checkbox__label{font-size:var(--sapphire-checkbox-size-font-content-m);line-height:var(--sapphire-checkbox-size-height-label-m)}.sapphire-checkbox__error-text{display:block;font-family:var(--sapphire-checkbox-font-error-text-name);font-weight:var(--sapphire-checkbox-font-error-text-weight);font-size:var(--sapphire-checkbox-size-font-error-text-l);line-height:var(--sapphire-checkbox-size-line-height-error-text-l);color:var(--sapphire-checkbox-color-error-text);margin-top:var(--sapphire-checkbox-size-spacing-error-text-vertical);margin-left:calc(var(--sapphire-checkbox-size-spacing-label) + var(--sapphire-checkbox-size-width-box-l))}.sapphire-checkbox__error-text--medium{font-size:var(--sapphire-checkbox-size-font-error-text-m);line-height:var(--sapphire-checkbox-size-line-height-error-text-m);margin-left:calc(var(--sapphire-checkbox-size-spacing-label) + var(--sapphire-checkbox-size-width-box-m))}.sapphire-checkbox__box{box-sizing:border-box;position:relative;width:var(--sapphire-checkbox-size-width-box-l);height:var(--sapphire-checkbox-size-height-box-l);border-radius:var(--sapphire-checkbox-size-radius);border:var(--sapphire-checkbox-size-width-border-unchecked) solid var(--sapphire-checkbox-color-border-unchecked-default);background-color:var(--sapphire-checkbox-color-background-unchecked);transition:all var(--sapphire-checkbox-time-transition);flex-shrink:0;display:inline-flex;justify-content:center;align-items:center}.sapphire-checkbox__box:has(~ .sapphire-checkbox__label:not(:empty)){margin-top:var(--sapphire-checkbox-size-spacing-box)}.sapphire-checkbox--medium .sapphire-checkbox__box{width:var(--sapphire-checkbox-size-width-box-m);height:var(--sapphire-checkbox-size-height-box-m)}.sapphire-checkbox__box-icon{display:inherit;line-height:0;color:var(--sapphire-checkbox-color-icon);margin:calc(var(--sapphire-checkbox-size-width-border-unchecked) * -1);height:var(--sapphire-checkbox-size-height-box-l);width:var(--sapphire-checkbox-size-width-box-l)}.sapphire-checkbox--medium .sapphire-checkbox__box-icon{height:var(--sapphire-checkbox-size-height-box-m);width:var(--sapphire-checkbox-size-width-box-m)}.sapphire-checkbox--error .sapphire-checkbox__box{border-color:var(--sapphire-checkbox-color-border-unchecked-error-default)}.sapphire-checkbox--checked .sapphire-checkbox__box,.sapphire-checkbox--indeterminate .sapphire-checkbox__box{border-width:var(--sapphire-checkbox-size-width-border-checked);background-color:var(--sapphire-checkbox-color-background-checked-default)}.sapphire-checkbox--checked.sapphire-checkbox--error .sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error .sapphire-checkbox__box{background-color:var(--sapphire-checkbox-color-background-checked-error-default)}.sapphire-checkbox:not(:active):not(.is-active):not(.sapphire-checkbox--checked).is-hover .sapphire-checkbox__box,.sapphire-checkbox:not(:active):not(.is-active):not(.sapphire-checkbox--checked):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{border-color:var(--sapphire-checkbox-color-border-unchecked-hover)}.sapphire-checkbox--error:not(:active):not(.is-active):not(.sapphire-checkbox--checked).is-hover .sapphire-checkbox__box,.sapphire-checkbox--error:not(:active):not(.is-active):not(.sapphire-checkbox--checked):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{border-color:var(--sapphire-checkbox-color-border-unchecked-error-hover)}.sapphire-checkbox--checked:not(:active):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--checked:not(:active):not(.is-active):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box,.sapphire-checkbox--indeterminate:not(:active):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--indeterminate:not(:active):not(.is-active):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{background-color:var(--sapphire-checkbox-color-background-checked-hover)}.sapphire-checkbox--checked.sapphire-checkbox--error:not(:active):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--checked.sapphire-checkbox--error:not(:active):not(.is-active):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error:not(:active):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error:not(:active):not(.is-active):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{background-color:var(--sapphire-checkbox-color-background-checked-error-hover)}.sapphire-checkbox.is-focus .sapphire-checkbox__box,.sapphire-checkbox:not(.js-focus) .sapphire-checkbox__input:focus-visible~.sapphire-checkbox__box{outline:var(--sapphire-checkbox-size-focus-ring-border) solid var(--sapphire-checkbox-color-focus-ring);outline-offset:var(--sapphire-checkbox-size-focus-ring-offset)}.sapphire-checkbox__input:disabled{cursor:not-allowed}.sapphire-checkbox:not(.sapphire-checkbox--no-disabled) .sapphire-checkbox__input:disabled~.sapphire-checkbox__box,.sapphire-checkbox:not(.sapphire-checkbox--no-disabled) .sapphire-checkbox__input:disabled~.sapphire-checkbox__label{opacity:var(--sapphire-checkbox-opacity-disabled)}:host{display:inline-flex}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1162
1162
  __decorate([
1163
1163
  AutoId()
1164
1164
  ], CheckboxComponent.prototype, "id", void 0);
@@ -1266,7 +1266,7 @@ class MenuComponent {
1266
1266
  }
1267
1267
  }
1268
1268
  MenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1269
- MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: MenuComponent, selector: "sp-menu", inputs: { size: "size" }, host: { properties: { "class.sapphire-popover": "true", "class.sapphire-popover--max-width": "true" } }, hostDirectives: [{ directive: i1$2.CdkMenu, outputs: ["closed", "closed"] }, { directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<div\n class=\"sapphire-listbox\"\n [class.sapphire-listbox--medium]=\"size === 'medium'\"\n [class.sapphire-listbox--small]=\"size === 'small'\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [".sapphire-listbox{box-sizing:border-box;min-width:var(--sapphire-listbox-size-width-min);margin:0;position:relative;list-style:none;outline:none;padding:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical)) 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-listbox__item{display:flex;justify-content:space-between;align-items:center;padding:var(--sapphire-listbox-size-spacing-outer-vertical) var(--sapphire-listbox-size-spacing-outer-horizontal);color:var(--sapphire-listbox-color-content-normal-primary-default);outline:none;cursor:pointer;text-decoration:none;min-width:max-content}.sapphire-listbox__item--danger{color:var(--sapphire-listbox-color-content-danger-default)}.sapphire-listbox__item--selected{color:var(--sapphire-listbox-color-content-selected-default)}.sapphire-listbox__item--selected .sapphire-listbox__content{background-color:var(--sapphire-listbox-color-background-selected-default)}.sapphire-listbox__content{width:100%;max-width:calc(100vw - 2 * var(--sapphire-listbox-size-width-icon-l));display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-listbox-size-spacing-inner-horizontal-l);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-l);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-l) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-l);border-radius:var(--sapphire-listbox-size-radius-item);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-listbox-time-transition);transition-timing-function:ease-in-out;min-height:var(--sapphire-listbox-size-height-min-height)}.sapphire-listbox--medium .sapphire-listbox__content{gap:var(--sapphire-listbox-size-spacing-inner-horizontal-m);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-m);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-m) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-m)}.sapphire-listbox--small .sapphire-listbox__content{gap:var(--sapphire-listbox-size-spacing-inner-horizontal-s);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-s);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-s) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-s)}.sapphire-listbox__icon{line-height:0}.sapphire-listbox__text-container{font-family:var(--sapphire-listbox-font-name);line-height:var(--sapphire-listbox-size-line-height)}.sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-listbox-font-weight-primary);font-size:var(--sapphire-listbox-size-font-primary-l)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-listbox-font-weight-secondary);font-size:var(--sapphire-listbox-size-font-secondary-l)}.sapphire-listbox--medium .sapphire-listbox__primary-text{font-size:var(--sapphire-listbox-size-font-primary-m)}.sapphire-listbox--small .sapphire-listbox__primary-text{font-size:var(--sapphire-listbox-size-font-primary-s)}.sapphire-listbox--medium .sapphire-listbox__secondary-text{font-size:var(--sapphire-listbox-size-font-secondary-m)}.sapphire-listbox--small .sapphire-listbox__secondary-text{font-size:var(--sapphire-listbox-size-font-secondary-s)}.sapphire-listbox__item:not(.sapphire-listbox__item--danger):not(.sapphire-listbox__item--selected) .sapphire-listbox__secondary-text{color:var(--sapphire-listbox-color-content-normal-secondary-default)}.sapphire-listbox__item.is-disabled{opacity:var(--sapphire-listbox-opacity-disabled);cursor:not-allowed}.sapphire-listbox__section{padding:0;list-style:none}.sapphire-listbox__separator{height:var(--sapphire-listbox-size-height-separator);width:100%;background:var(--sapphire-listbox-color-separator);margin-top:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical));margin-bottom:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical))}.sapphire-listbox__item:not(.is-disabled).is-focus .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-focus):focus-visible .sapphire-listbox__content{box-shadow:0 0 0 var(--sapphire-listbox-size-focus-ring) var(--sapphire-listbox-color-focus-ring)}.sapphire-listbox__item:not(.is-disabled).is-hover:not(.is-active) .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-normal-primary-hover);background-color:var(--sapphire-listbox-color-background-normal-hover)}.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-danger-hover);background-color:var(--sapphire-listbox-color-background-danger-hover)}.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-selected-hover);background-color:var(--sapphire-listbox-color-background-selected-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-normal-primary-active);background-color:var(--sapphire-listbox-color-background-normal-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-danger-active);background-color:var(--sapphire-listbox-color-background-danger-active)}.sapphire-listbox__item--selected:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-selected-active);background-color:var(--sapphire-listbox-color-background-selected-active)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background-color:var(--sapphire-popover-color-background);box-shadow:var(--sapphire-popover-shadow);animation:fade-in var(--sapphire-popover-time-transition) ease-in-out;border-radius:var(--sapphire-popover-size-radius);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-popover--padded{padding:var(--sapphire-popover-size-spacing-padded)}.sapphire-popover--max-width{max-width:var(--sapphire-popover-size-max-width)}.sapphire-menu-backdrop{background:none}\n"] });
1269
+ MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: MenuComponent, selector: "sp-menu", inputs: { size: "size" }, host: { properties: { "class.sapphire-popover": "true", "class.sapphire-popover--max-width": "true" } }, hostDirectives: [{ directive: i1$1.CdkMenu, outputs: ["closed", "closed"] }, { directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<div\n class=\"sapphire-listbox\"\n [class.sapphire-listbox--medium]=\"size === 'medium'\"\n [class.sapphire-listbox--small]=\"size === 'small'\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [".sapphire-listbox{box-sizing:border-box;min-width:var(--sapphire-listbox-size-width-min);margin:0;position:relative;list-style:none;outline:none;padding:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical)) 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-listbox__item{display:flex;justify-content:space-between;align-items:center;padding:var(--sapphire-listbox-size-spacing-outer-vertical) var(--sapphire-listbox-size-spacing-outer-horizontal);color:var(--sapphire-listbox-color-content-normal-primary-default);outline:none;cursor:pointer;text-decoration:none;min-width:max-content}.sapphire-listbox__item--danger{color:var(--sapphire-listbox-color-content-danger-default)}.sapphire-listbox__item--selected{color:var(--sapphire-listbox-color-content-selected-default)}.sapphire-listbox__item--selected .sapphire-listbox__content{background-color:var(--sapphire-listbox-color-background-selected-default)}.sapphire-listbox__content{width:100%;max-width:calc(100vw - 2 * var(--sapphire-listbox-size-width-icon-l));display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-listbox-size-spacing-inner-horizontal-l);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-l);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-l) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-l);border-radius:var(--sapphire-listbox-size-radius-item);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-listbox-time-transition);transition-timing-function:ease-in-out;min-height:var(--sapphire-listbox-size-height-min-height)}.sapphire-listbox--medium .sapphire-listbox__content{gap:var(--sapphire-listbox-size-spacing-inner-horizontal-m);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-m);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-m) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-m)}.sapphire-listbox--small .sapphire-listbox__content{gap:var(--sapphire-listbox-size-spacing-inner-horizontal-s);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-s);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-s) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-s)}.sapphire-listbox__icon{line-height:0}.sapphire-listbox__text-container{font-family:var(--sapphire-listbox-font-name);line-height:var(--sapphire-listbox-size-line-height)}.sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-listbox-font-weight-primary);font-size:var(--sapphire-listbox-size-font-primary-l)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-listbox-font-weight-secondary);font-size:var(--sapphire-listbox-size-font-secondary-l)}.sapphire-listbox--medium .sapphire-listbox__primary-text{font-size:var(--sapphire-listbox-size-font-primary-m)}.sapphire-listbox--small .sapphire-listbox__primary-text{font-size:var(--sapphire-listbox-size-font-primary-s)}.sapphire-listbox--medium .sapphire-listbox__secondary-text{font-size:var(--sapphire-listbox-size-font-secondary-m)}.sapphire-listbox--small .sapphire-listbox__secondary-text{font-size:var(--sapphire-listbox-size-font-secondary-s)}.sapphire-listbox__item:not(.sapphire-listbox__item--danger):not(.sapphire-listbox__item--selected) .sapphire-listbox__secondary-text{color:var(--sapphire-listbox-color-content-normal-secondary-default)}.sapphire-listbox__item.is-disabled{opacity:var(--sapphire-listbox-opacity-disabled);cursor:not-allowed}.sapphire-listbox__section{padding:0;list-style:none}.sapphire-listbox__separator{height:var(--sapphire-listbox-size-height-separator);width:100%;background:var(--sapphire-listbox-color-separator);margin-top:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical));margin-bottom:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical))}.sapphire-listbox__item:not(.is-disabled).is-focus .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-focus):focus-visible .sapphire-listbox__content{box-shadow:0 0 0 var(--sapphire-listbox-size-focus-ring) var(--sapphire-listbox-color-focus-ring)}.sapphire-listbox__item:not(.is-disabled).is-hover:not(.is-active) .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-normal-primary-hover);background-color:var(--sapphire-listbox-color-background-normal-hover)}.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-danger-hover);background-color:var(--sapphire-listbox-color-background-danger-hover)}.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-selected-hover);background-color:var(--sapphire-listbox-color-background-selected-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-normal-primary-active);background-color:var(--sapphire-listbox-color-background-normal-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-danger-active);background-color:var(--sapphire-listbox-color-background-danger-active)}.sapphire-listbox__item--selected:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-selected-active);background-color:var(--sapphire-listbox-color-background-selected-active)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background-color:var(--sapphire-popover-color-background);box-shadow:var(--sapphire-popover-shadow);animation:fade-in var(--sapphire-popover-time-transition) ease-in-out;border-radius:var(--sapphire-popover-size-radius);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-popover--padded{padding:var(--sapphire-popover-size-spacing-padded)}.sapphire-popover--max-width{max-width:var(--sapphire-popover-size-max-width)}.sapphire-menu-backdrop{background:none}\n"] });
1270
1270
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuComponent, decorators: [{
1271
1271
  type: Component,
1272
1272
  args: [{ selector: 'sp-menu', hostDirectives: [
@@ -1287,7 +1287,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
1287
1287
  class MenuItemComponent {
1288
1288
  }
1289
1289
  MenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1290
- MenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: MenuItemComponent, selector: "sp-menu-item", inputs: { disabled: "disabled", danger: "danger" }, host: { properties: { "class.sapphire-listbox__item": "true", "class.is-disabled": "this.disabled", "class.sapphire-listbox__item--danger": "this.danger" } }, hostDirectives: [{ directive: i1$2.CdkMenuItem, inputs: ["cdkMenuItemDisabled", "disabled", "cdkMenuitemTypeaheadLabel", "typeaheadLabel"], outputs: ["cdkMenuItemTriggered", "triggered"] }, { directive: UseComponentStyles }], ngImport: i0, template: "<div class=\"sapphire-listbox__content\" _spUseComponentStyles>\n <ng-content select=\"sp-menu-item-icon\"></ng-content>\n <div class=\"sapphire-listbox__text-container\" _spUseComponentStyles>\n <div class=\"sapphire-listbox__primary-text\" _spUseComponentStyles>\n <ng-content select=\"sp-menu-primary-text\"></ng-content>\n <!-- If nothing matches other ng-content selectors then render it as primary text -->\n <ng-content></ng-content>\n </div>\n <ng-content select=\"sp-menu-secondary-text\"></ng-content>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
1290
+ MenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: MenuItemComponent, selector: "sp-menu-item", inputs: { disabled: "disabled", danger: "danger" }, host: { properties: { "class.sapphire-listbox__item": "true", "class.is-disabled": "this.disabled", "class.sapphire-listbox__item--danger": "this.danger" } }, hostDirectives: [{ directive: i1$1.CdkMenuItem, inputs: ["cdkMenuItemDisabled", "disabled", "cdkMenuitemTypeaheadLabel", "typeaheadLabel"], outputs: ["cdkMenuItemTriggered", "triggered"] }, { directive: UseComponentStyles }], ngImport: i0, template: "<div class=\"sapphire-listbox__content\" _spUseComponentStyles>\n <ng-content select=\"sp-menu-item-icon\"></ng-content>\n <div class=\"sapphire-listbox__text-container\" _spUseComponentStyles>\n <div class=\"sapphire-listbox__primary-text\" _spUseComponentStyles>\n <ng-content select=\"sp-menu-primary-text\"></ng-content>\n <!-- If nothing matches other ng-content selectors then render it as primary text -->\n <ng-content></ng-content>\n </div>\n <ng-content select=\"sp-menu-secondary-text\"></ng-content>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
1291
1291
  __decorate([
1292
1292
  CoerceBoolean
1293
1293
  ], MenuItemComponent.prototype, "disabled", void 0);
@@ -1493,8 +1493,8 @@ class MenuTriggerDirective {
1493
1493
  return `${this.direction} ${this.align}`;
1494
1494
  }
1495
1495
  }
1496
- MenuTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuTriggerDirective, deps: [{ token: i1$2.CdkMenuTrigger }], target: i0.ɵɵFactoryTarget.Directive });
1497
- MenuTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: MenuTriggerDirective, selector: "[spMenuTriggerFor]", inputs: { align: ["spMenuTriggerAlign", "align"], direction: ["spMenuTriggerDirection", "direction"] }, host: { listeners: { "keydown.space": "handleSpace()", "keydown.escape": "handleEscape()" }, properties: { "class.is-active": "isOpen()" } }, exportAs: ["spMenuTrigger"], hostDirectives: [{ directive: i1$2.CdkMenuTrigger, inputs: ["cdkMenuTriggerFor", "spMenuTriggerFor"], outputs: ["cdkMenuOpened", "spMenuOpened", "cdkMenuClosed", "spMenuClosed"] }], ngImport: i0 });
1496
+ MenuTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuTriggerDirective, deps: [{ token: i1$1.CdkMenuTrigger }], target: i0.ɵɵFactoryTarget.Directive });
1497
+ MenuTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: MenuTriggerDirective, selector: "[spMenuTriggerFor]", inputs: { align: ["spMenuTriggerAlign", "align"], direction: ["spMenuTriggerDirection", "direction"] }, host: { listeners: { "keydown.space": "handleSpace()", "keydown.escape": "handleEscape()" }, properties: { "class.is-active": "isOpen()" } }, exportAs: ["spMenuTrigger"], hostDirectives: [{ directive: i1$1.CdkMenuTrigger, inputs: ["cdkMenuTriggerFor", "spMenuTriggerFor"], outputs: ["cdkMenuOpened", "spMenuOpened", "cdkMenuClosed", "spMenuClosed"] }], ngImport: i0 });
1498
1498
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuTriggerDirective, decorators: [{
1499
1499
  type: Directive,
1500
1500
  args: [{
@@ -1511,7 +1511,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
1511
1511
  '[class.is-active]': 'isOpen()',
1512
1512
  },
1513
1513
  }]
1514
- }], ctorParameters: function () { return [{ type: i1$2.CdkMenuTrigger }]; }, propDecorators: { align: [{
1514
+ }], ctorParameters: function () { return [{ type: i1$1.CdkMenuTrigger }]; }, propDecorators: { align: [{
1515
1515
  type: Input,
1516
1516
  args: ['spMenuTriggerAlign']
1517
1517
  }], direction: [{
@@ -1533,14 +1533,14 @@ class MenuSectionComponent {
1533
1533
  return this.menu.items?.first === this.firstMenuItem;
1534
1534
  }
1535
1535
  }
1536
- MenuSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuSectionComponent, deps: [{ token: i1$2.CdkMenu }], target: i0.ɵɵFactoryTarget.Component });
1537
- MenuSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: MenuSectionComponent, selector: "sp-menu-section", host: { properties: { "class.sapphire-listbox__section": "true" } }, queries: [{ propertyName: "firstMenuItem", first: true, predicate: CdkMenuItem, descendants: true }], hostDirectives: [{ directive: i1$2.CdkMenuGroup }, { directive: UseComponentStyles }], ngImport: i0, template: "<div\n *ngIf=\"!_isFirstSection()\"\n class=\"sapphire-listbox__separator\"\n _spUseComponentStyles\n></div>\n<ng-content></ng-content>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
1536
+ MenuSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuSectionComponent, deps: [{ token: i1$1.CdkMenu }], target: i0.ɵɵFactoryTarget.Component });
1537
+ MenuSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: MenuSectionComponent, selector: "sp-menu-section", host: { properties: { "class.sapphire-listbox__section": "true" } }, queries: [{ propertyName: "firstMenuItem", first: true, predicate: CdkMenuItem, descendants: true }], hostDirectives: [{ directive: i1$1.CdkMenuGroup }, { directive: UseComponentStyles }], ngImport: i0, template: "<div\n *ngIf=\"!_isFirstSection()\"\n class=\"sapphire-listbox__separator\"\n _spUseComponentStyles\n></div>\n<ng-content></ng-content>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
1538
1538
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuSectionComponent, decorators: [{
1539
1539
  type: Component,
1540
1540
  args: [{ selector: 'sp-menu-section', hostDirectives: [CdkMenuGroup, UseComponentStyles], host: {
1541
1541
  '[class.sapphire-listbox__section]': 'true',
1542
1542
  }, template: "<div\n *ngIf=\"!_isFirstSection()\"\n class=\"sapphire-listbox__separator\"\n _spUseComponentStyles\n></div>\n<ng-content></ng-content>\n" }]
1543
- }], ctorParameters: function () { return [{ type: i1$2.CdkMenu }]; }, propDecorators: { firstMenuItem: [{
1543
+ }], ctorParameters: function () { return [{ type: i1$1.CdkMenu }]; }, propDecorators: { firstMenuItem: [{
1544
1544
  type: ContentChild,
1545
1545
  args: [CdkMenuItem]
1546
1546
  }] } });
@@ -1859,7 +1859,7 @@ class PopoverTriggerDirective {
1859
1859
  .withViewportMargin(placement.includes('end') ? 0 : 6));
1860
1860
  }
1861
1861
  }
1862
- PopoverTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PopoverTriggerDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$3.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
1862
+ PopoverTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PopoverTriggerDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
1863
1863
  PopoverTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: PopoverTriggerDirective, selector: "[spPopoverTriggerFor]", inputs: { placement: ["spPopoverPlacement", "placement"], templateRef: ["spPopoverTriggerFor", "templateRef"], nonModal: ["spPopoverNonModal", "nonModal"], openOnPressStart: ["spPopoverTriggerOpenOnPressStart", "openOnPressStart"], closeOnScroll: ["spPopoverTriggerCloseOnScroll", "closeOnScroll"], disabled: ["spPopoverTriggerDisabled", "disabled"] }, outputs: { opened: "spPopoverTriggerOpened", closed: "spPopoverTriggerClosed" }, host: { listeners: { "mousedown": "handleMousedown($event)", "click": "handleClick($event)", "keydown.tab": "handleTab()", "focusout": "onFocusout($event)", "keydown": "handleKeyDown($event)" }, properties: { "class.is-active": "isOpen()", "attr.aria-expanded": "isOpen()", "attr.aria-controls": "this.getPopoverId" } }, providers: [
1864
1864
  { provide: POPOVER_TRIGGER, useExisting: PopoverTriggerDirective },
1865
1865
  ], exportAs: ["spPopoverTrigger"], ngImport: i0 });
@@ -1888,7 +1888,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
1888
1888
  },
1889
1889
  exportAs: 'spPopoverTrigger',
1890
1890
  }]
1891
- }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$3.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i0.Injector }]; }, propDecorators: { placement: [{
1891
+ }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$2.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i0.Injector }]; }, propDecorators: { placement: [{
1892
1892
  type: Input,
1893
1893
  args: ['spPopoverPlacement']
1894
1894
  }], templateRef: [{
@@ -2019,7 +2019,7 @@ class PopoverComponent {
2019
2019
  }
2020
2020
  }
2021
2021
  PopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PopoverComponent, deps: [{ token: POPOVER_TRIGGER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
2022
- PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: PopoverComponent, selector: "sp-popover", inputs: { noPadding: "noPadding", noMaxWidth: "noMaxWidth", noAutoFocus: "noAutoFocus", trapFocus: "trapFocus" }, host: { attributes: { "role": "presentation" }, listeners: { "keydown.Escape": "handleEscape($event)" }, properties: { "class.sapphire-popover": "true", "class.sapphire-popover--padded": "!noPadding", "class.sapphire-popover--max-width": "!noMaxWidth" } }, queries: [{ propertyName: "title", first: true, predicate: PopoverTitleDirective, descendants: true }], viewQueries: [{ propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true, read: ElementRef }], hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<!--\n NOTE: cdkTrapFocus is required for cdkTrapFocusAutoCapture to work, which would be similar to\n <FocusScope autoFocus /> in react-aria.\n\n It prevents focus from going out of popover by bringing it back to the first\n focusable element.\n\n We sometimes counter this in (cdkFocusChange) and sometimes don't, based on\n the \"trapFocus\" input.\n -->\n<div\n #contentWrapper\n [id]=\"ID\"\n role=\"dialog\"\n tabindex=\"-1\"\n cdkMonitorSubtreeFocus\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"!noAutoFocus\"\n class=\"dialog\"\n [attr.aria-labelledby]=\"title?.ID\"\n (cdkFocusChange)=\"_contentFocusChanged($event)\"\n>\n <ng-content></ng-content>\n</div>\n", styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background-color:var(--sapphire-popover-color-background);box-shadow:var(--sapphire-popover-shadow);animation:fade-in var(--sapphire-popover-time-transition) ease-in-out;border-radius:var(--sapphire-popover-size-radius);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-popover--padded{padding:var(--sapphire-popover-size-spacing-padded)}.sapphire-popover--max-width{max-width:var(--sapphire-popover-size-max-width)}.dialog{outline:none}\n"], dependencies: [{ kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }] });
2022
+ PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: PopoverComponent, selector: "sp-popover", inputs: { noPadding: "noPadding", noMaxWidth: "noMaxWidth", noAutoFocus: "noAutoFocus", trapFocus: "trapFocus" }, host: { attributes: { "role": "presentation" }, listeners: { "keydown.Escape": "handleEscape($event)" }, properties: { "class.sapphire-popover": "true", "class.sapphire-popover--padded": "!noPadding", "class.sapphire-popover--max-width": "!noMaxWidth" } }, queries: [{ propertyName: "title", first: true, predicate: PopoverTitleDirective, descendants: true }], viewQueries: [{ propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true, read: ElementRef }], hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<!--\n NOTE: cdkTrapFocus is required for cdkTrapFocusAutoCapture to work, which would be similar to\n <FocusScope autoFocus /> in react-aria.\n\n It prevents focus from going out of popover by bringing it back to the first\n focusable element.\n\n We sometimes counter this in (cdkFocusChange) and sometimes don't, based on\n the \"trapFocus\" input.\n -->\n<div\n #contentWrapper\n [id]=\"ID\"\n role=\"dialog\"\n tabindex=\"-1\"\n cdkMonitorSubtreeFocus\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"!noAutoFocus\"\n class=\"dialog\"\n [attr.aria-labelledby]=\"title?.ID\"\n (cdkFocusChange)=\"_contentFocusChanged($event)\"\n>\n <ng-content></ng-content>\n</div>\n", styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background-color:var(--sapphire-popover-color-background);box-shadow:var(--sapphire-popover-shadow);animation:fade-in var(--sapphire-popover-time-transition) ease-in-out;border-radius:var(--sapphire-popover-size-radius);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-popover--padded{padding:var(--sapphire-popover-size-spacing-padded)}.sapphire-popover--max-width{max-width:var(--sapphire-popover-size-max-width)}.dialog{outline:none}\n"], dependencies: [{ kind: "directive", type: i2$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i2$1.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }] });
2023
2023
  __decorate([
2024
2024
  CoerceBoolean
2025
2025
  ], PopoverComponent.prototype, "noPadding", void 0);
@@ -2182,7 +2182,7 @@ class FieldErrorDirective {
2182
2182
  }
2183
2183
  }
2184
2184
  FieldErrorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: FieldErrorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
2185
- FieldErrorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: FieldErrorDirective, isStandalone: true, selector: "sp-field-error", inputs: { id: "id" }, host: { properties: { "id": "this.id" }, classAttribute: "sapphire-field__note" }, ngImport: i0 });
2185
+ FieldErrorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: FieldErrorDirective, isStandalone: true, selector: "sp-field-error", inputs: { id: "id", target: "target" }, host: { properties: { "id": "this.id" }, classAttribute: "sapphire-field__note" }, ngImport: i0 });
2186
2186
  __decorate([
2187
2187
  AutoId()
2188
2188
  ], FieldErrorDirective.prototype, "id", void 0);
@@ -2199,6 +2199,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
2199
2199
  type: HostBinding
2200
2200
  }, {
2201
2201
  type: Input
2202
+ }], target: [{
2203
+ type: Input
2202
2204
  }] } });
2203
2205
 
2204
2206
  /**
@@ -2487,7 +2489,7 @@ class RadioComponent extends _RadioMixinBase {
2487
2489
  }
2488
2490
  }
2489
2491
  }
2490
- 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.FocusMonitor }, { token: i3.UniqueSelectionDispatcher }], target: i0.ɵɵFactoryTarget.Component });
2492
+ 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$1.FocusMonitor }, { token: i3.UniqueSelectionDispatcher }], target: i0.ɵɵFactoryTarget.Component });
2491
2493
  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--medium]=\"radioGroup?._field?.size === 'medium'\"\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-radio-font-label-name);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-radio-size-spacing-label);font-size:var(--sapphire-radio-size-font-l);line-height:var(--sapphire-radio-size-height-label-l);color:var(--sapphire-radio-color-label);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-radio--medium .sapphire-radio__label{font-size:var(--sapphire-radio-size-font-m);line-height:var(--sapphire-radio-size-height-label-m)}.sapphire-radio__box{box-sizing:border-box;background-color:var(--sapphire-radio-color-background-box-unchecked-default);width:var(--sapphire-radio-size-width-box-l);height:var(--sapphire-radio-size-height-box-l);flex-shrink:0;border-radius:50%;border:var(--sapphire-radio-size-width-border-unchecked) solid var(--sapphire-radio-color-border-box-unchecked-default);position:relative;margin-top:var(--sapphire-radio-size-spacing-box);transition-property:background-color,border-color,border-width;transition-duration:var(--sapphire-radio-time-transition);transition-timing-function:ease-in-out}.sapphire-radio--medium .sapphire-radio__box{width:var(--sapphire-radio-size-width-box-m);height:var(--sapphire-radio-size-height-box-m)}.sapphire-radio--checked .sapphire-radio__box{border-color:var(--sapphire-radio-color-background-box-checked-default);border-width:calc((var(--sapphire-radio-size-height-box-l) - var(--sapphire-radio-size-circle-l)) / 2)}.sapphire-radio--medium.sapphire-radio--checked .sapphire-radio__box{border-width:calc((var(--sapphire-radio-size-height-box-m) - var(--sapphire-radio-size-circle-m)) / 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-radio-color-border-box-unchecked-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-radio-color-background-box-checked-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-radio-size-focus-ring-border) solid var(--sapphire-radio-color-focus-ring);outline-offset:var(--sapphire-radio-size-focus-ring-offset)}.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-radio-opacity-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.Default });
2492
2494
  __decorate([
2493
2495
  AutoId()
@@ -2506,7 +2508,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
2506
2508
  }] }, { type: i0.ElementRef }, { type: undefined, decorators: [{
2507
2509
  type: Attribute,
2508
2510
  args: ['tabindex']
2509
- }] }, { type: i2.FocusMonitor }, { type: i3.UniqueSelectionDispatcher }]; }, propDecorators: { ariaLabel: [{
2511
+ }] }, { type: i2$1.FocusMonitor }, { type: i3.UniqueSelectionDispatcher }]; }, propDecorators: { ariaLabel: [{
2510
2512
  type: Input,
2511
2513
  args: ['aria-label']
2512
2514
  }], ariaLabelledby: [{
@@ -2681,7 +2683,7 @@ RadioGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
2681
2683
  provide: FieldControl,
2682
2684
  useExisting: forwardRef(() => RadioGroupComponent),
2683
2685
  },
2684
- ], 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--medium]=\"_field?.size === 'medium'\"\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-field-group-size-spacing-field-horizontal);row-gap:var(--sapphire-field-group-size-spacing-field-vertical-l)}.sapphire-field-group--horizontal{flex-direction:row}.sapphire-field-group--vertical{flex-direction:column}.sapphire-field-group--medium{row-gap:var(--sapphire-field-group-size-spacing-field-vertical-m)}\n"], dependencies: [{ kind: "directive", type: i2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
2686
+ ], 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--medium]=\"_field?.size === 'medium'\"\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-field-group-size-spacing-field-horizontal);row-gap:var(--sapphire-field-group-size-spacing-field-vertical-l)}.sapphire-field-group--horizontal{flex-direction:row}.sapphire-field-group--vertical{flex-direction:column}.sapphire-field-group--medium{row-gap:var(--sapphire-field-group-size-spacing-field-vertical-m)}\n"], dependencies: [{ kind: "directive", type: i2$1.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
2685
2687
  __decorate([
2686
2688
  AutoId()
2687
2689
  ], RadioGroupComponent.prototype, "uniqueId", void 0);
@@ -2766,7 +2768,7 @@ class FieldComponent {
2766
2768
  this.changed = false;
2767
2769
  }
2768
2770
  ngAfterContentInit() {
2769
- if (!this.control && isDevMode()) {
2771
+ if (!this.controls && isDevMode()) {
2770
2772
  throw new Error('sp-field is rendered without any control like sp-select, sp-text-field, or sp-radio-group inside it.');
2771
2773
  }
2772
2774
  }
@@ -2787,8 +2789,27 @@ class FieldComponent {
2787
2789
  /**
2788
2790
  * Whether the field contains an error message (sp-field-error).
2789
2791
  */
2790
- hasError() {
2791
- return this.error != undefined;
2792
+ hasError(targetField) {
2793
+ return (this.error !== undefined &&
2794
+ (!targetField || !this.error.target || this.error.target === targetField));
2795
+ }
2796
+ /**
2797
+ * If there are multiple controls, the field is only disabled when all of them are disabled
2798
+ */
2799
+ isDisabled() {
2800
+ if (!this.controls || this.controls.length === 0) {
2801
+ return false;
2802
+ }
2803
+ return this.controls?.toArray().every((control) => control.isDisabled());
2804
+ }
2805
+ /**
2806
+ * Only support features like `for` or `labelClick` if the field has one control.
2807
+ */
2808
+ get control() {
2809
+ return this.controls?.length === 1 ? this.controls.first : undefined;
2810
+ }
2811
+ get isGroup() {
2812
+ return this.controls ? this.controls.length > 1 : false;
2792
2813
  }
2793
2814
  /**
2794
2815
  * Whether the field control is radio group (sp-radio-group).
@@ -2816,12 +2837,12 @@ class FieldComponent {
2816
2837
  }
2817
2838
  }
2818
2839
  FieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: FieldComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
2819
- FieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: FieldComponent, selector: "sp-field", inputs: { necessityIndicator: "necessityIndicator", labelPlacement: "labelPlacement", size: "size" }, host: { properties: { "class.sapphire-field--label-placement-side": "labelPlacement === \"side\"", "class.sapphire-field--label-alignment-top": "labelPlacement === \"side\" && hasFieldGroupChild()", "class.sapphire-field--medium": "size === \"medium\"", "class.sapphire-field--error": "hasError()", "class.is-disabled": "control?.isDisabled()" }, classAttribute: "sapphire-field" }, providers: [
2840
+ FieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: FieldComponent, selector: "sp-field", inputs: { necessityIndicator: "necessityIndicator", labelPlacement: "labelPlacement", size: "size" }, host: { properties: { "class.sapphire-field--label-placement-side": "labelPlacement === \"side\"", "class.sapphire-field--label-alignment-top": "labelPlacement === \"side\" && hasFieldGroupChild()", "class.sapphire-field--medium": "size === \"medium\"", "class.sapphire-field--error": "hasError()", "class.is-disabled": "isDisabled()" }, classAttribute: "sapphire-field" }, providers: [
2820
2841
  {
2821
2842
  provide: ICON_SIZE_PROVIDER,
2822
2843
  useExisting: forwardRef(() => FieldComponent),
2823
2844
  },
2824
- ], queries: [{ propertyName: "note", first: true, predicate: FieldNoteDirective, descendants: true }, { propertyName: "error", first: true, predicate: FieldErrorDirective, descendants: true }, { propertyName: "radioGroup", first: true, predicate: RadioGroupComponent, descendants: true }, { propertyName: "_fieldLabel", first: true, predicate: FieldLabelDirective, descendants: true }, { propertyName: "control", first: true, predicate: FieldControl, descendants: true }, { propertyName: "requiredValidator", first: true, predicate: RequiredValidator, descendants: true }], viewQueries: [{ propertyName: "label", first: true, predicate: LabelComponent, descendants: true }], hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<div class=\"sapphire-field__label\" *ngIf=\"_fieldLabel\">\n <sp-label\n [necessityIndicator]=\"labelNecessityIndicator\"\n [for]=\"control?.getId?.()\"\n [disabled]=\"control?.isDisabled()\"\n (labelClick)=\"control?.focus?.('keyboard')\"\n [size]=\"size\"\n >\n <ng-content select=\"sp-field-label\"></ng-content>\n <ng-content\n select=\"sp-contextual-help\"\n ngProjectAs=\"sp-contextual-help\"\n ></ng-content>\n </sp-label>\n</div>\n<div class=\"sapphire-field__control\">\n <ng-content></ng-content>\n</div>\n<div class=\"sapphire-field__message\" *ngIf=\"note || error || _noteSuffixPortal\">\n <div class=\"sapphire-field__note-row\">\n <div class=\"sapphire-field__note\" *ngIf=\"error\">\n <ng-content select=\"sp-field-error\"></ng-content>\n </div>\n <div class=\"sapphire-field__note\" *ngIf=\"note && !error\">\n <ng-content select=\"sp-field-note\"></ng-content>\n </div>\n <ng-container *ngIf=\"_noteSuffixPortal\">\n <ng-container *cdkPortalOutlet=\"_noteSuffixPortal\"></ng-container>\n </ng-container>\n </div>\n</div>\n", styles: [".sapphire-field{display:inline-grid;grid-template-columns:auto;row-gap:var(--sapphire-field-size-spacing-vertical);column-gap:var(--sapphire-field-size-spacing-horizontal);font-family:var(--sapphire-field-font-name);grid-auto-rows:min-content;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box}fieldset.sapphire-field{border:0;margin:0;padding:0}.sapphire-field__label{order:1;justify-content:end}legend.sapphire-field__label{padding:0;float:left}.sapphire-field__control{order:2;min-width:100%}.sapphire-field__control--group{display:flex;gap:var(--sapphire-field-size-spacing-control-group)}.sapphire-field--no-shrink .sapphire-field__control{min-width:initial}.sapphire-field__message{min-width:100%;max-width:min-content;order:3}.sapphire-field__note-row{display:flex;align-items:top;font-size:var(--sapphire-field-size-font-note-l);line-height:var(--sapphire-field-size-line-height-note-l);color:var(--sapphire-field-color-note-default)}.sapphire-field--medium .sapphire-field__note-row{font-size:var(--sapphire-field-size-font-note-m);line-height:var(--sapphire-field-size-line-height-note-m)}.sapphire-field__note{flex:1}.sapphire-field--error .sapphire-field__note{color:var(--sapphire-field-color-note-error)}.sapphire-field.is-disabled{opacity:var(--sapphire-field-opacity-disabled);cursor:not-allowed}.sapphire-field.is-disabled .sapphire-field__control *{cursor:inherit}.sapphire-field--label-placement-side{grid-template-columns:max-content auto}.sapphire-field--label-placement-side .sapphire-field__control,.sapphire-field--label-placement-side .sapphire-field__message{grid-column:2}.sapphire-field--label-placement-side .sapphire-field__label{display:flex;align-items:center;max-height:var(--sapphire-field-size-max-height-label-l)}.sapphire-field--label-placement-side.sapphire-field--medium .sapphire-field__label{max-height:var(--sapphire-field-size-max-height-label-m)}.sapphire-field--label-placement-side.sapphire-field--label-alignment-top .sapphire-field__label{align-items:flex-start;max-height:unset}.sapphire-fieldset{display:inline-flex;flex-direction:column;width:min-content;gap:var(--sapphire-field-size-spacing-fieldset-large)}.sapphire-fieldset .sapphire-field--label-placement-side{grid-template-columns:1fr min-content}.sapphire-fieldset .sapphire-field--label-placement-side .sapphire-field__label{white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: LabelComponent, selector: "sp-label", inputs: ["id", "for", "disabled", "necessityIndicator", "size"], outputs: ["labelClick"] }] });
2845
+ ], queries: [{ propertyName: "note", first: true, predicate: FieldNoteDirective, descendants: true }, { propertyName: "error", first: true, predicate: FieldErrorDirective, descendants: true }, { propertyName: "radioGroup", first: true, predicate: RadioGroupComponent, descendants: true }, { propertyName: "_fieldLabel", first: true, predicate: FieldLabelDirective, descendants: true }, { propertyName: "requiredValidator", first: true, predicate: RequiredValidator, descendants: true }, { propertyName: "controls", predicate: FieldControl }], viewQueries: [{ propertyName: "label", first: true, predicate: LabelComponent, descendants: true }], hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<div class=\"sapphire-field__label\" *ngIf=\"_fieldLabel\">\n <sp-label\n [necessityIndicator]=\"labelNecessityIndicator\"\n [for]=\"control?.getId?.()\"\n [disabled]=\"isDisabled()\"\n (labelClick)=\"control?.focus?.('keyboard')\"\n [size]=\"size\"\n >\n <ng-content select=\"sp-field-label\"></ng-content>\n <ng-content\n select=\"sp-contextual-help\"\n ngProjectAs=\"sp-contextual-help\"\n ></ng-content>\n </sp-label>\n</div>\n<div\n class=\"sapphire-field__control\"\n [ngClass]=\"{\n 'sapphire-field__control--group': isGroup\n }\"\n>\n <ng-content></ng-content>\n</div>\n<div class=\"sapphire-field__message\" *ngIf=\"note || error || _noteSuffixPortal\">\n <div class=\"sapphire-field__note-row\">\n <div class=\"sapphire-field__note\" *ngIf=\"error\">\n <ng-content select=\"sp-field-error\"></ng-content>\n </div>\n <div class=\"sapphire-field__note\" *ngIf=\"note && !error\">\n <ng-content select=\"sp-field-note\"></ng-content>\n </div>\n <ng-container *ngIf=\"_noteSuffixPortal\">\n <ng-container *cdkPortalOutlet=\"_noteSuffixPortal\"></ng-container>\n </ng-container>\n </div>\n</div>\n", styles: [".sapphire-field{display:inline-grid;grid-template-columns:auto;row-gap:var(--sapphire-field-size-spacing-vertical);column-gap:var(--sapphire-field-size-spacing-horizontal);font-family:var(--sapphire-field-font-name);grid-auto-rows:min-content;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box}fieldset.sapphire-field{border:0;margin:0;padding:0}.sapphire-field__label{order:1;justify-content:end}legend.sapphire-field__label{padding:0;float:left}.sapphire-field__control{order:2;min-width:100%}.sapphire-field__control--group{display:flex;gap:var(--sapphire-field-size-spacing-control-group)}.sapphire-field--no-shrink .sapphire-field__control{min-width:initial}.sapphire-field__message{min-width:100%;max-width:min-content;order:3}.sapphire-field__note-row{display:flex;align-items:top;font-size:var(--sapphire-field-size-font-note-l);line-height:var(--sapphire-field-size-line-height-note-l);color:var(--sapphire-field-color-note-default)}.sapphire-field--medium .sapphire-field__note-row{font-size:var(--sapphire-field-size-font-note-m);line-height:var(--sapphire-field-size-line-height-note-m)}.sapphire-field__note{flex:1}.sapphire-field--error .sapphire-field__note{color:var(--sapphire-field-color-note-error)}.sapphire-field.is-disabled{opacity:var(--sapphire-field-opacity-disabled);cursor:not-allowed}.sapphire-field.is-disabled .sapphire-field__control *{cursor:inherit}.sapphire-field--label-placement-side{grid-template-columns:max-content auto}.sapphire-field--label-placement-side .sapphire-field__control,.sapphire-field--label-placement-side .sapphire-field__message{grid-column:2}.sapphire-field--label-placement-side .sapphire-field__label{display:flex;align-items:center;max-height:var(--sapphire-field-size-max-height-label-l)}.sapphire-field--label-placement-side.sapphire-field--medium .sapphire-field__label{max-height:var(--sapphire-field-size-max-height-label-m)}.sapphire-field--label-placement-side.sapphire-field--label-alignment-top .sapphire-field__label{align-items:flex-start;max-height:unset}.sapphire-fieldset{display:inline-flex;flex-direction:column;width:min-content;gap:var(--sapphire-field-size-spacing-fieldset-large)}.sapphire-fieldset .sapphire-field--label-placement-side{grid-template-columns:1fr min-content}.sapphire-fieldset .sapphire-field--label-placement-side .sapphire-field__label{white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: LabelComponent, selector: "sp-label", inputs: ["id", "for", "disabled", "necessityIndicator", "size"], outputs: ["labelClick"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
2825
2846
  __decorate([
2826
2847
  CoerceBoolean
2827
2848
  ], FieldComponent.prototype, "necessityIndicator", void 0);
@@ -2833,13 +2854,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
2833
2854
  '[class.sapphire-field--label-alignment-top]': 'labelPlacement === "side" && hasFieldGroupChild()',
2834
2855
  '[class.sapphire-field--medium]': 'size === "medium"',
2835
2856
  '[class.sapphire-field--error]': 'hasError()',
2836
- '[class.is-disabled]': 'control?.isDisabled()',
2857
+ '[class.is-disabled]': 'isDisabled()',
2837
2858
  }, hostDirectives: [UseComponentStylesOnHost], providers: [
2838
2859
  {
2839
2860
  provide: ICON_SIZE_PROVIDER,
2840
2861
  useExisting: forwardRef(() => FieldComponent),
2841
2862
  },
2842
- ], template: "<div class=\"sapphire-field__label\" *ngIf=\"_fieldLabel\">\n <sp-label\n [necessityIndicator]=\"labelNecessityIndicator\"\n [for]=\"control?.getId?.()\"\n [disabled]=\"control?.isDisabled()\"\n (labelClick)=\"control?.focus?.('keyboard')\"\n [size]=\"size\"\n >\n <ng-content select=\"sp-field-label\"></ng-content>\n <ng-content\n select=\"sp-contextual-help\"\n ngProjectAs=\"sp-contextual-help\"\n ></ng-content>\n </sp-label>\n</div>\n<div class=\"sapphire-field__control\">\n <ng-content></ng-content>\n</div>\n<div class=\"sapphire-field__message\" *ngIf=\"note || error || _noteSuffixPortal\">\n <div class=\"sapphire-field__note-row\">\n <div class=\"sapphire-field__note\" *ngIf=\"error\">\n <ng-content select=\"sp-field-error\"></ng-content>\n </div>\n <div class=\"sapphire-field__note\" *ngIf=\"note && !error\">\n <ng-content select=\"sp-field-note\"></ng-content>\n </div>\n <ng-container *ngIf=\"_noteSuffixPortal\">\n <ng-container *cdkPortalOutlet=\"_noteSuffixPortal\"></ng-container>\n </ng-container>\n </div>\n</div>\n", styles: [".sapphire-field{display:inline-grid;grid-template-columns:auto;row-gap:var(--sapphire-field-size-spacing-vertical);column-gap:var(--sapphire-field-size-spacing-horizontal);font-family:var(--sapphire-field-font-name);grid-auto-rows:min-content;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box}fieldset.sapphire-field{border:0;margin:0;padding:0}.sapphire-field__label{order:1;justify-content:end}legend.sapphire-field__label{padding:0;float:left}.sapphire-field__control{order:2;min-width:100%}.sapphire-field__control--group{display:flex;gap:var(--sapphire-field-size-spacing-control-group)}.sapphire-field--no-shrink .sapphire-field__control{min-width:initial}.sapphire-field__message{min-width:100%;max-width:min-content;order:3}.sapphire-field__note-row{display:flex;align-items:top;font-size:var(--sapphire-field-size-font-note-l);line-height:var(--sapphire-field-size-line-height-note-l);color:var(--sapphire-field-color-note-default)}.sapphire-field--medium .sapphire-field__note-row{font-size:var(--sapphire-field-size-font-note-m);line-height:var(--sapphire-field-size-line-height-note-m)}.sapphire-field__note{flex:1}.sapphire-field--error .sapphire-field__note{color:var(--sapphire-field-color-note-error)}.sapphire-field.is-disabled{opacity:var(--sapphire-field-opacity-disabled);cursor:not-allowed}.sapphire-field.is-disabled .sapphire-field__control *{cursor:inherit}.sapphire-field--label-placement-side{grid-template-columns:max-content auto}.sapphire-field--label-placement-side .sapphire-field__control,.sapphire-field--label-placement-side .sapphire-field__message{grid-column:2}.sapphire-field--label-placement-side .sapphire-field__label{display:flex;align-items:center;max-height:var(--sapphire-field-size-max-height-label-l)}.sapphire-field--label-placement-side.sapphire-field--medium .sapphire-field__label{max-height:var(--sapphire-field-size-max-height-label-m)}.sapphire-field--label-placement-side.sapphire-field--label-alignment-top .sapphire-field__label{align-items:flex-start;max-height:unset}.sapphire-fieldset{display:inline-flex;flex-direction:column;width:min-content;gap:var(--sapphire-field-size-spacing-fieldset-large)}.sapphire-fieldset .sapphire-field--label-placement-side{grid-template-columns:1fr min-content}.sapphire-fieldset .sapphire-field--label-placement-side .sapphire-field__label{white-space:nowrap}\n"] }]
2863
+ ], template: "<div class=\"sapphire-field__label\" *ngIf=\"_fieldLabel\">\n <sp-label\n [necessityIndicator]=\"labelNecessityIndicator\"\n [for]=\"control?.getId?.()\"\n [disabled]=\"isDisabled()\"\n (labelClick)=\"control?.focus?.('keyboard')\"\n [size]=\"size\"\n >\n <ng-content select=\"sp-field-label\"></ng-content>\n <ng-content\n select=\"sp-contextual-help\"\n ngProjectAs=\"sp-contextual-help\"\n ></ng-content>\n </sp-label>\n</div>\n<div\n class=\"sapphire-field__control\"\n [ngClass]=\"{\n 'sapphire-field__control--group': isGroup\n }\"\n>\n <ng-content></ng-content>\n</div>\n<div class=\"sapphire-field__message\" *ngIf=\"note || error || _noteSuffixPortal\">\n <div class=\"sapphire-field__note-row\">\n <div class=\"sapphire-field__note\" *ngIf=\"error\">\n <ng-content select=\"sp-field-error\"></ng-content>\n </div>\n <div class=\"sapphire-field__note\" *ngIf=\"note && !error\">\n <ng-content select=\"sp-field-note\"></ng-content>\n </div>\n <ng-container *ngIf=\"_noteSuffixPortal\">\n <ng-container *cdkPortalOutlet=\"_noteSuffixPortal\"></ng-container>\n </ng-container>\n </div>\n</div>\n", styles: [".sapphire-field{display:inline-grid;grid-template-columns:auto;row-gap:var(--sapphire-field-size-spacing-vertical);column-gap:var(--sapphire-field-size-spacing-horizontal);font-family:var(--sapphire-field-font-name);grid-auto-rows:min-content;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box}fieldset.sapphire-field{border:0;margin:0;padding:0}.sapphire-field__label{order:1;justify-content:end}legend.sapphire-field__label{padding:0;float:left}.sapphire-field__control{order:2;min-width:100%}.sapphire-field__control--group{display:flex;gap:var(--sapphire-field-size-spacing-control-group)}.sapphire-field--no-shrink .sapphire-field__control{min-width:initial}.sapphire-field__message{min-width:100%;max-width:min-content;order:3}.sapphire-field__note-row{display:flex;align-items:top;font-size:var(--sapphire-field-size-font-note-l);line-height:var(--sapphire-field-size-line-height-note-l);color:var(--sapphire-field-color-note-default)}.sapphire-field--medium .sapphire-field__note-row{font-size:var(--sapphire-field-size-font-note-m);line-height:var(--sapphire-field-size-line-height-note-m)}.sapphire-field__note{flex:1}.sapphire-field--error .sapphire-field__note{color:var(--sapphire-field-color-note-error)}.sapphire-field.is-disabled{opacity:var(--sapphire-field-opacity-disabled);cursor:not-allowed}.sapphire-field.is-disabled .sapphire-field__control *{cursor:inherit}.sapphire-field--label-placement-side{grid-template-columns:max-content auto}.sapphire-field--label-placement-side .sapphire-field__control,.sapphire-field--label-placement-side .sapphire-field__message{grid-column:2}.sapphire-field--label-placement-side .sapphire-field__label{display:flex;align-items:center;max-height:var(--sapphire-field-size-max-height-label-l)}.sapphire-field--label-placement-side.sapphire-field--medium .sapphire-field__label{max-height:var(--sapphire-field-size-max-height-label-m)}.sapphire-field--label-placement-side.sapphire-field--label-alignment-top .sapphire-field__label{align-items:flex-start;max-height:unset}.sapphire-fieldset{display:inline-flex;flex-direction:column;width:min-content;gap:var(--sapphire-field-size-spacing-fieldset-large)}.sapphire-fieldset .sapphire-field--label-placement-side{grid-template-columns:1fr min-content}.sapphire-fieldset .sapphire-field--label-placement-side .sapphire-field__label{white-space:nowrap}\n"] }]
2843
2864
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { necessityIndicator: [{
2844
2865
  type: Input
2845
2866
  }], labelPlacement: [{
@@ -2861,8 +2882,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
2861
2882
  }], _fieldLabel: [{
2862
2883
  type: ContentChild,
2863
2884
  args: [FieldLabelDirective]
2864
- }], control: [{
2865
- type: ContentChild,
2885
+ }], controls: [{
2886
+ type: ContentChildren,
2866
2887
  args: [FieldControl]
2867
2888
  }], requiredValidator: [{
2868
2889
  type: ContentChild,
@@ -2907,13 +2928,15 @@ SapphireFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
2907
2928
  FieldNoteSuffixDirective,
2908
2929
  FieldErrorDirective,
2909
2930
  PortalModule,
2910
- LabelComponent], exports: [FieldLabelDirective,
2931
+ LabelComponent,
2932
+ CommonModule], exports: [FieldLabelDirective,
2911
2933
  FieldNoteDirective,
2912
2934
  FieldNoteSuffixDirective,
2913
2935
  FieldErrorDirective,
2914
2936
  FieldComponent] });
2915
2937
  SapphireFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireFieldModule, imports: [PortalModule,
2916
- LabelComponent] });
2938
+ LabelComponent,
2939
+ CommonModule] });
2917
2940
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireFieldModule, decorators: [{
2918
2941
  type: NgModule,
2919
2942
  args: [{
@@ -2926,6 +2949,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
2926
2949
  FieldErrorDirective,
2927
2950
  PortalModule,
2928
2951
  LabelComponent,
2952
+ CommonModule,
2929
2953
  ],
2930
2954
  exports: [
2931
2955
  FieldLabelDirective,
@@ -2968,7 +2992,7 @@ class TextFieldInputDirective {
2968
2992
  }
2969
2993
  }
2970
2994
  TextFieldInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TextFieldInputDirective, deps: [{ token: i0.ElementRef }, { token: FieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
2971
- TextFieldInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: TextFieldInputDirective, selector: "[spTextFieldInput]", inputs: { id: "id", disabled: "disabled", required: "required" }, host: { listeners: { "input": "ngDoCheck($event.target.value)", "blur": "onBlur()" }, properties: { "id": "id", "attr.aria-describedby": "field?.error?.id || field?.note?.id", "attr.aria-invalid": "field?.hasError() ? true : null", "style": "this.style" }, classAttribute: "sapphire-text-field__input" }, hostDirectives: [{ directive: UseComponentStyles }], ngImport: i0 });
2995
+ TextFieldInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: TextFieldInputDirective, selector: "[spTextFieldInput]", inputs: { id: "id", disabled: "disabled", required: "required" }, host: { listeners: { "input": "ngDoCheck($event.target.value)", "blur": "onBlur()" }, properties: { "id": "id", "attr.aria-describedby": "field?.error?.id || field?.note?.id", "attr.aria-invalid": "field?.hasError(this) ? true : null", "style": "this.style" }, classAttribute: "sapphire-text-field__input" }, hostDirectives: [{ directive: UseComponentStyles }], ngImport: i0 });
2972
2996
  __decorate([
2973
2997
  AutoId()
2974
2998
  ], TextFieldInputDirective.prototype, "id", void 0);
@@ -2983,7 +3007,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
2983
3007
  '[id]': 'id',
2984
3008
  class: 'sapphire-text-field__input',
2985
3009
  '[attr.aria-describedby]': 'field?.error?.id || field?.note?.id',
2986
- '[attr.aria-invalid]': 'field?.hasError() ? true : null',
3010
+ '[attr.aria-invalid]': 'field?.hasError(this) ? true : null',
2987
3011
  },
2988
3012
  hostDirectives: [UseComponentStyles],
2989
3013
  }]
@@ -3022,18 +3046,18 @@ class TextFieldComponent {
3022
3046
  }
3023
3047
  }
3024
3048
  TextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TextFieldComponent, deps: [{ token: FieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
3025
- TextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: TextFieldComponent, selector: "sp-text-field", inputs: { characterCounterMax: "characterCounterMax" }, host: { properties: { "class.sapphire-text-field--multiline": "_inputDirective.textarea", "class.sapphire-text-field--error": "field?.hasError()", "class.sapphire-text-field--medium": "field?.size === \"medium\"" }, classAttribute: "sapphire-text-field" }, providers: [
3049
+ TextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: TextFieldComponent, selector: "sp-text-field", inputs: { characterCounterMax: "characterCounterMax" }, host: { properties: { "class.sapphire-text-field--multiline": "_inputDirective.textarea", "class.sapphire-text-field--error": "field?.hasError(this)", "class.sapphire-text-field--medium": "field?.size === \"medium\"" }, classAttribute: "sapphire-text-field" }, providers: [
3026
3050
  {
3027
3051
  provide: FieldControl,
3028
3052
  useExisting: forwardRef(() => TextFieldComponent),
3029
3053
  },
3030
- ], queries: [{ propertyName: "inputElement", first: true, predicate: TextFieldInputDirective, descendants: true, read: ElementRef }, { propertyName: "_inputDirective", first: true, predicate: TextFieldInputDirective, descendants: true }], hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<ng-content\n select=\"sp-text-field-prefix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"input\"></ng-content>\n<ng-content\n select=\"sp-text-field-postfix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"textarea\"></ng-content>\n\n<span\n *ngIf=\"characterCounterMax !== undefined\"\n spFieldNoteSuffix\n class=\"sapphire-text-field__counter\"\n [class.sapphire-text-field__counter--error]=\"isCharacterCounterExceeded()\"\n >{{ _inputDirective?.valueLength }}/{{ characterCounterMax }}</span\n>\n", styles: [".sapphire-text-field{width:var(--sapphire-text-field-size-width-control);outline:solid var(--sapphire-text-field-size-width-border) var(--sapphire-text-field-color-border-default);outline-offset:calc(0px - var(--sapphire-text-field-size-width-border));box-sizing:border-box;overflow-x:hidden;display:flex;align-items:center;border-radius:var(--sapphire-text-field-size-radius);cursor:text;color:var(--sapphire-text-field-color-content-control);background-color:var(--sapphire-text-field-color-background-control);height:var(--sapphire-text-field-size-height-field-l);font-family:var(--sapphire-text-field-font-name);font-size:var(--sapphire-text-field-size-font-content-l);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text-field--medium{height:var(--sapphire-text-field-size-height-field-m);font-size:var(--sapphire-text-field-size-font-content-m)}.sapphire-text-field__input{box-sizing:border-box;width:100%;height:100%;margin:0;padding:0 var(--sapphire-text-field-size-spacing-control-horizontal-l);line-height:var(--sapphire-text-field-size-line-height-content);font-family:inherit;font-size:inherit;font-weight:var(--sapphire-text-field-size-font-weight-input);caret-color:var(--sapphire-text-field-color-caret);color:inherit;background-color:transparent;border:none;outline:none}.sapphire-text-field--medium .sapphire-text-field__input{padding:0 var(--sapphire-text-field-size-spacing-control-horizontal-m)}.sapphire-text-field__input::placeholder{opacity:1;color:var(--sapphire-text-field-color-placeholder)}.sapphire-text-field__input--align-right{text-align:right}.sapphire-text-field:not(.sapphire-text-field--multiline){gap:var(--sapphire-text-field-size-spacing-control-gap)}.sapphire-text-field:has(.sapphire-text-field__prefix) .sapphire-text-field__input{padding-left:0}.sapphire-text-field .sapphire-text-field__prefix{color:var(--sapphire-text-field-color-affix);flex-shrink:0;z-index:1;margin-left:var(--sapphire-text-field-size-spacing-control-horizontal-l)}.sapphire-text-field--medium .sapphire-text-field__prefix{margin-left:var(--sapphire-text-field-size-spacing-control-horizontal-m)}.sapphire-text-field:has(.sapphire-text-field__postfix) .sapphire-text-field__input{padding-right:0}.sapphire-text-field .sapphire-text-field__postfix{color:var(--sapphire-text-field-color-affix);flex-shrink:0;z-index:1;margin-right:var(--sapphire-text-field-size-spacing-control-horizontal-l)}.sapphire-text-field--medium .sapphire-text-field__postfix{margin-right:var(--sapphire-text-field-size-spacing-control-horizontal-m)}.sapphire-text-field .sapphire-text-field__prefix--icon,.sapphire-text-field .sapphire-text-field__postfix--icon{width:var(--sapphire-text-field-size-affix-icon-width-l);height:var(--sapphire-text-field-size-affix-icon-height-l)}.sapphire-text-field--medium .sapphire-text-field__prefix--icon,.sapphire-text-field--medium .sapphire-text-field__postfix--icon{width:var(--sapphire-text-field-size-affix-icon-width-m);height:var(--sapphire-text-field-size-affix-icon-height-m)}.sapphire-text-field--multiline{display:inline-block;line-height:0;height:unset;padding:0}.sapphire-text-field--multiline .sapphire-text-field__input{resize:none;width:100%;padding:var(--sapphire-text-field-size-spacing-control-vertical-l) var(--sapphire-text-field-size-spacing-control-horizontal-l);scroll-padding-bottom:var(--sapphire-text-field-size-spacing-control-vertical-l)}.sapphire-text-field--medium .sapphire-text-field--multiline .sapphire-text-field__input{padding:var(--sapphire-text-field-size-spacing-control-vertical-m) var(--sapphire-text-field-size-spacing-control-horizontal-m);scroll-padding-bottom:var(--sapphire-text-field-size-spacing-control-vertical-m)}.sapphire-text-field--multiline.sapphire-text-field--resizable .sapphire-text-field__input{resize:vertical}.sapphire-text-field__counter{color:var(--sapphire-text-field-color-counter-default);padding-left:var(--sapphire-text-field-size-spacing-note-horizontal);margin-left:auto}.sapphire-text-field__counter--error{color:var(--sapphire-text-field-color-counter-error)}.sapphire-text-field--error{outline:solid var(--sapphire-text-field-size-width-border) var(--sapphire-text-field-color-border-error)}.sapphire-text-field.is-focus,.sapphire-text-field:focus-within{outline:solid var(--sapphire-text-field-size-focus-ring) var(--sapphire-text-field-color-focus-ring);outline-offset:calc(0px - var(--sapphire-text-field-size-focus-ring))}.sapphire-text-field.is-focus .sapphire-text-field__input:-webkit-autofill,.sapphire-text-field:focus-within .sapphire-text-field__input:-webkit-autofill{box-shadow:0 0 0 var(--sapphire-text-field-size-height-field-l) inset var(--sapphire-text-field-color-background-control)!important}.sapphire-text-field.is-focus .sapphire-text-field__input:autofill,.sapphire-text-field:focus-within .sapphire-text-field__input:autofill{box-shadow:0 0 0 var(--sapphire-text-field-size-height-field-l) inset var(--sapphire-text-field-color-background-control)!important}.sapphire-text-field__stepper{display:flex;flex-direction:column;justify-items:stretch;padding:var(--sapphire-text-field-size-spacing-control-stepper) calc(var(--sapphire-text-field-size-spacing-control-stepper) + var(--sapphire-text-field-size-width-border));gap:var(--sapphire-text-field-size-spacing-control-stepper)}.sapphire-text-field:has(.sapphire-text-field__stepper) .sapphire-text-field__postfix{margin-right:0}.sapphire-text-field__stepper-button{display:flex;align-items:center;justify-content:center;width:var(--sapphire-text-field-size-width-stepper-l);margin:0;padding:0;max-width:-moz-fit-content;max-width:fit-content;flex-shrink:0;border-radius:var(--sapphire-text-field-size-radius);border-style:solid;border-width:0;border-color:transparent;transition-property:opacity,background-color,color;transition-duration:var(--sapphire-text-field-time-transition);transition-timing-function:ease-in-out;cursor:pointer;background-color:var(--sapphire-text-field-color-background-stepper-default);color:var(--sapphire-text-field-color-content-stepper-default)}.sapphire-text-field__stepper-button:not(:active):not(.is-active):not(.js-hover):hover,.sapphire-text-field__stepper-button:not(:active):not(.is-active).is-hover{background-color:var(--sapphire-text-field-color-background-stepper-hover);color:var(--sapphire-text-field-color-content-stepper-hover)}.sapphire-text-field__stepper-button.is-active,.sapphire-text-field__stepper-button:active{background-color:var(--sapphire-text-field-color-background-stepper-active);color:var(--sapphire-text-field-color-content-stepper-active)}.sapphire-text-field--medium.sapphire-text-field__stepper-button{width:var(--sapphire-text-field-size-width-stepper-m)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: FieldNoteSuffixDirective, selector: "[spFieldNoteSuffix]" }] });
3054
+ ], queries: [{ propertyName: "inputElement", first: true, predicate: TextFieldInputDirective, descendants: true, read: ElementRef }, { propertyName: "_inputDirective", first: true, predicate: TextFieldInputDirective, descendants: true }], hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<ng-content\n select=\"sp-text-field-prefix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"input\"></ng-content>\n<ng-content\n select=\"sp-text-field-postfix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"textarea\"></ng-content>\n\n<span\n *ngIf=\"characterCounterMax !== undefined\"\n spFieldNoteSuffix\n class=\"sapphire-text-field__counter\"\n [class.sapphire-text-field__counter--error]=\"isCharacterCounterExceeded()\"\n >{{ _inputDirective?.valueLength }}/{{ characterCounterMax }}</span\n>\n", styles: [".sapphire-text-field{width:var(--sapphire-text-field-size-width-control);outline:solid var(--sapphire-text-field-size-width-border) var(--sapphire-text-field-color-border-default);outline-offset:calc(0px - var(--sapphire-text-field-size-width-border));box-sizing:border-box;overflow-x:hidden;display:flex;align-items:center;border-radius:var(--sapphire-text-field-size-radius);cursor:text;color:var(--sapphire-text-field-color-content-control);background-color:var(--sapphire-text-field-color-background-control);height:var(--sapphire-text-field-size-height-field-l);font-family:var(--sapphire-text-field-font-name);font-size:var(--sapphire-text-field-size-font-content-l);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text-field--medium{height:var(--sapphire-text-field-size-height-field-m);font-size:var(--sapphire-text-field-size-font-content-m)}.sapphire-text-field__input{box-sizing:border-box;width:100%;height:100%;margin:0;padding:0 var(--sapphire-text-field-size-spacing-control-horizontal-l);line-height:var(--sapphire-text-field-size-line-height-content);font-family:inherit;font-size:inherit;font-weight:var(--sapphire-text-field-size-font-weight-input);caret-color:var(--sapphire-text-field-color-caret);color:inherit;background-color:transparent;border:none;outline:none}.sapphire-text-field--medium .sapphire-text-field__input{padding:0 var(--sapphire-text-field-size-spacing-control-horizontal-m)}.sapphire-text-field__input::placeholder{opacity:1;color:var(--sapphire-text-field-color-placeholder)}.sapphire-text-field__input--align-right{text-align:right}.sapphire-text-field:not(.sapphire-text-field--multiline){gap:var(--sapphire-text-field-size-spacing-control-gap)}.sapphire-text-field:has(.sapphire-text-field__prefix) .sapphire-text-field__input{padding-left:0}.sapphire-text-field .sapphire-text-field__prefix{color:var(--sapphire-text-field-color-affix);flex-shrink:0;z-index:1;margin-left:var(--sapphire-text-field-size-spacing-control-horizontal-l)}.sapphire-text-field--medium .sapphire-text-field__prefix{margin-left:var(--sapphire-text-field-size-spacing-control-horizontal-m)}.sapphire-text-field:has(.sapphire-text-field__postfix) .sapphire-text-field__input{padding-right:0}.sapphire-text-field .sapphire-text-field__postfix{color:var(--sapphire-text-field-color-affix);flex-shrink:0;z-index:1;margin-right:var(--sapphire-text-field-size-spacing-control-horizontal-l)}.sapphire-text-field--medium .sapphire-text-field__postfix{margin-right:var(--sapphire-text-field-size-spacing-control-horizontal-m)}.sapphire-text-field .sapphire-text-field__prefix--icon,.sapphire-text-field .sapphire-text-field__postfix--icon{width:var(--sapphire-text-field-size-affix-icon-width-l);height:var(--sapphire-text-field-size-affix-icon-height-l)}.sapphire-text-field--medium .sapphire-text-field__prefix--icon,.sapphire-text-field--medium .sapphire-text-field__postfix--icon{width:var(--sapphire-text-field-size-affix-icon-width-m);height:var(--sapphire-text-field-size-affix-icon-height-m)}.sapphire-text-field--multiline{display:inline-block;line-height:0;height:unset;padding:0}.sapphire-text-field--multiline .sapphire-text-field__input{resize:none;width:100%;padding:var(--sapphire-text-field-size-spacing-control-vertical-l) var(--sapphire-text-field-size-spacing-control-horizontal-l);scroll-padding-bottom:var(--sapphire-text-field-size-spacing-control-vertical-l)}.sapphire-text-field--medium .sapphire-text-field--multiline .sapphire-text-field__input{padding:var(--sapphire-text-field-size-spacing-control-vertical-m) var(--sapphire-text-field-size-spacing-control-horizontal-m);scroll-padding-bottom:var(--sapphire-text-field-size-spacing-control-vertical-m)}.sapphire-text-field--multiline.sapphire-text-field--resizable .sapphire-text-field__input{resize:vertical}.sapphire-text-field__counter{color:var(--sapphire-text-field-color-counter-default);padding-left:var(--sapphire-text-field-size-spacing-note-horizontal);margin-left:auto}.sapphire-text-field__counter--error{color:var(--sapphire-text-field-color-counter-error)}.sapphire-text-field--error{outline:solid var(--sapphire-text-field-size-width-border) var(--sapphire-text-field-color-border-error)}.sapphire-text-field.is-focus,.sapphire-text-field:focus-within{outline:solid var(--sapphire-text-field-size-focus-ring) var(--sapphire-text-field-color-focus-ring);outline-offset:calc(0px - var(--sapphire-text-field-size-focus-ring))}.sapphire-text-field.is-focus .sapphire-text-field__input:-webkit-autofill,.sapphire-text-field:focus-within .sapphire-text-field__input:-webkit-autofill{box-shadow:0 0 0 var(--sapphire-text-field-size-height-field-l) inset var(--sapphire-text-field-color-background-control)!important}.sapphire-text-field.is-focus .sapphire-text-field__input:autofill,.sapphire-text-field:focus-within .sapphire-text-field__input:autofill{box-shadow:0 0 0 var(--sapphire-text-field-size-height-field-l) inset var(--sapphire-text-field-color-background-control)!important}.sapphire-text-field__stepper{display:flex;flex-direction:column;justify-items:stretch;padding:var(--sapphire-text-field-size-spacing-control-stepper) calc(var(--sapphire-text-field-size-spacing-control-stepper) + var(--sapphire-text-field-size-width-border));gap:var(--sapphire-text-field-size-spacing-control-stepper)}.sapphire-text-field:has(.sapphire-text-field__stepper) .sapphire-text-field__postfix{margin-right:0}.sapphire-text-field__stepper-button{display:flex;align-items:center;justify-content:center;width:var(--sapphire-text-field-size-width-stepper-l);margin:0;padding:0;max-width:-moz-fit-content;max-width:fit-content;flex-shrink:0;border-radius:var(--sapphire-text-field-size-radius);border-style:solid;border-width:0;border-color:transparent;transition-property:opacity,background-color,color;transition-duration:var(--sapphire-text-field-time-transition);transition-timing-function:ease-in-out;cursor:pointer;background-color:var(--sapphire-text-field-color-background-stepper-default);color:var(--sapphire-text-field-color-content-stepper-default)}.sapphire-text-field__stepper-button:not(:active):not(.is-active):not(.js-hover):hover,.sapphire-text-field__stepper-button:not(:active):not(.is-active).is-hover{background-color:var(--sapphire-text-field-color-background-stepper-hover);color:var(--sapphire-text-field-color-content-stepper-hover)}.sapphire-text-field__stepper-button.is-active,.sapphire-text-field__stepper-button:active{background-color:var(--sapphire-text-field-color-background-stepper-active);color:var(--sapphire-text-field-color-content-stepper-active)}.sapphire-text-field--medium.sapphire-text-field__stepper-button{width:var(--sapphire-text-field-size-width-stepper-m)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: FieldNoteSuffixDirective, selector: "[spFieldNoteSuffix]" }] });
3031
3055
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TextFieldComponent, decorators: [{
3032
3056
  type: Component,
3033
3057
  args: [{ selector: 'sp-text-field', host: {
3034
3058
  class: 'sapphire-text-field',
3035
3059
  '[class.sapphire-text-field--multiline]': '_inputDirective.textarea',
3036
- '[class.sapphire-text-field--error]': 'field?.hasError()',
3060
+ '[class.sapphire-text-field--error]': 'field?.hasError(this)',
3037
3061
  '[class.sapphire-text-field--medium]': 'field?.size === "medium"',
3038
3062
  }, providers: [
3039
3063
  {
@@ -3228,7 +3252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
3228
3252
  class OptionIconDirective {
3229
3253
  }
3230
3254
  OptionIconDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: OptionIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Component });
3231
- OptionIconDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: OptionIconDirective, selector: "sp-option-icon", viewQueries: [{ propertyName: "contentPortal", first: true, predicate: CdkPortal, descendants: true }], ngImport: i0, template: '<ng-template cdkPortal><ng-content></ng-content></ng-template>', isInline: true, dependencies: [{ kind: "directive", type: i1$4.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }] });
3255
+ OptionIconDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: OptionIconDirective, selector: "sp-option-icon", viewQueries: [{ propertyName: "contentPortal", first: true, predicate: CdkPortal, descendants: true }], ngImport: i0, template: '<ng-template cdkPortal><ng-content></ng-content></ng-template>', isInline: true, dependencies: [{ kind: "directive", type: i1$3.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }] });
3232
3256
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: OptionIconDirective, decorators: [{
3233
3257
  type: Component,
3234
3258
  args: [{
@@ -3246,7 +3270,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
3246
3270
  class OptionSecondaryTextDirective {
3247
3271
  }
3248
3272
  OptionSecondaryTextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: OptionSecondaryTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Component });
3249
- OptionSecondaryTextDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: OptionSecondaryTextDirective, selector: "sp-option-secondary-text", viewQueries: [{ propertyName: "contentPortal", first: true, predicate: CdkPortal, descendants: true }], ngImport: i0, template: '<ng-template cdkPortal><ng-content></ng-content></ng-template>', isInline: true, dependencies: [{ kind: "directive", type: i1$4.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }] });
3273
+ OptionSecondaryTextDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: OptionSecondaryTextDirective, selector: "sp-option-secondary-text", viewQueries: [{ propertyName: "contentPortal", first: true, predicate: CdkPortal, descendants: true }], ngImport: i0, template: '<ng-template cdkPortal><ng-content></ng-content></ng-template>', isInline: true, dependencies: [{ kind: "directive", type: i1$3.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }] });
3250
3274
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: OptionSecondaryTextDirective, decorators: [{
3251
3275
  type: Component,
3252
3276
  args: [{
@@ -3395,7 +3419,7 @@ class CdkOptionScrollIssuePatch {
3395
3419
  }
3396
3420
  }
3397
3421
  }
3398
- CdkOptionScrollIssuePatch.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: CdkOptionScrollIssuePatch, deps: [{ token: i1$5.CdkListbox }, { token: i1$5.CdkOption }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
3422
+ CdkOptionScrollIssuePatch.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: CdkOptionScrollIssuePatch, deps: [{ token: i1$4.CdkListbox }, { token: i1$4.CdkOption }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
3399
3423
  CdkOptionScrollIssuePatch.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: CdkOptionScrollIssuePatch, isStandalone: true, selector: "[cdkOption]", ngImport: i0 });
3400
3424
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: CdkOptionScrollIssuePatch, decorators: [{
3401
3425
  type: Directive,
@@ -3403,7 +3427,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
3403
3427
  selector: '[cdkOption]',
3404
3428
  standalone: true,
3405
3429
  }]
3406
- }], ctorParameters: function () { return [{ type: i1$5.CdkListbox }, { type: i1$5.CdkOption }, { type: i0.ElementRef }]; } });
3430
+ }], ctorParameters: function () { return [{ type: i1$4.CdkListbox }, { type: i1$4.CdkOption }, { type: i0.ElementRef }]; } });
3407
3431
 
3408
3432
  /**
3409
3433
  * JS-based :active state for non-button clickable elements.
@@ -3492,7 +3516,7 @@ class FocusedDirective {
3492
3516
  this.hostFocused = false;
3493
3517
  }
3494
3518
  }
3495
- FocusedDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: FocusedDirective, deps: [{ token: i2.InputModalityDetector }], target: i0.ɵɵFactoryTarget.Directive });
3519
+ FocusedDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: FocusedDirective, deps: [{ token: i2$1.InputModalityDetector }], target: i0.ɵɵFactoryTarget.Directive });
3496
3520
  FocusedDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: FocusedDirective, isStandalone: true, selector: "[spFocused]", inputs: { focusedClass: ["spFocusedClass", "focusedClass"], focusedInput: ["spFocused", "focusedInput"] }, host: { listeners: { "focusin": "onFocusIn()", "focusout": "onFocusOut()" }, properties: { "class": "this.className" } }, exportAs: ["spFocused"], ngImport: i0 });
3497
3521
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: FocusedDirective, decorators: [{
3498
3522
  type: Directive,
@@ -3501,7 +3525,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
3501
3525
  selector: '[spFocused]',
3502
3526
  exportAs: 'spFocused',
3503
3527
  }]
3504
- }], ctorParameters: function () { return [{ type: i2.InputModalityDetector }]; }, propDecorators: { focusedClass: [{
3528
+ }], ctorParameters: function () { return [{ type: i2$1.InputModalityDetector }]; }, propDecorators: { focusedClass: [{
3505
3529
  type: Input,
3506
3530
  args: ['spFocusedClass']
3507
3531
  }], focusedInput: [{
@@ -3531,7 +3555,7 @@ class ListboxItemComponent {
3531
3555
  }
3532
3556
  }
3533
3557
  ListboxItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ListboxItemComponent, deps: [{ token: PressedDirective }], target: i0.ɵɵFactoryTarget.Component });
3534
- ListboxItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ListboxItemComponent, selector: "li[sp-listbox-item]", inputs: { selected: "selected", focused: "focused", option: "option", size: "size" }, host: { properties: { "class.sapphire-listbox__item--selected": "selected", "class.is-disabled": "option.disabled" }, classAttribute: "sapphire-listbox__item" }, hostDirectives: [{ directive: UseComponentStyles }, { directive: PressedDirective }, { directive: FocusedDirective, inputs: ["spFocused", "focused"] }], ngImport: i0, template: "<div class=\"sapphire-listbox__content\" _spUseComponentStyles>\n <div\n class=\"sapphire-listbox__icon\"\n _spUseComponentStyles\n *ngIf=\"option.icon?.contentPortal as icon\"\n >\n <ng-container *cdkPortalOutlet=\"icon\"></ng-container>\n </div>\n <div class=\"sapphire-listbox__text-container\" _spUseComponentStyles>\n <div class=\"sapphire-listbox__primary-text\" _spUseComponentStyles>\n <ng-container *ngIf=\"option.primaryText\">\n <ng-container *cdkPortalOutlet=\"option.primaryText\"></ng-container>\n </ng-container>\n </div>\n <div\n class=\"sapphire-listbox__secondary-text\"\n _spUseComponentStyles\n *ngIf=\"option.secondaryText?.contentPortal as secondaryText\"\n >\n <ng-container *cdkPortalOutlet=\"secondaryText\"></ng-container>\n </div>\n </div>\n <div class=\"sapphire-listbox__icon\" _spUseComponentStyles *ngIf=\"selected\">\n <sp-icon name=\"checkMark\"></sp-icon>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "directive", type: i1$4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
3558
+ ListboxItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ListboxItemComponent, selector: "li[sp-listbox-item]", inputs: { selected: "selected", focused: "focused", option: "option", size: "size" }, host: { properties: { "class.sapphire-listbox__item--selected": "selected", "class.is-disabled": "option.disabled" }, classAttribute: "sapphire-listbox__item" }, hostDirectives: [{ directive: UseComponentStyles }, { directive: PressedDirective }, { directive: FocusedDirective, inputs: ["spFocused", "focused"] }], ngImport: i0, template: "<div class=\"sapphire-listbox__content\" _spUseComponentStyles>\n <div\n class=\"sapphire-listbox__icon\"\n _spUseComponentStyles\n *ngIf=\"option.icon?.contentPortal as icon\"\n >\n <ng-container *cdkPortalOutlet=\"icon\"></ng-container>\n </div>\n <div class=\"sapphire-listbox__text-container\" _spUseComponentStyles>\n <div class=\"sapphire-listbox__primary-text\" _spUseComponentStyles>\n <ng-container *ngIf=\"option.primaryText\">\n <ng-container *cdkPortalOutlet=\"option.primaryText\"></ng-container>\n </ng-container>\n </div>\n <div\n class=\"sapphire-listbox__secondary-text\"\n _spUseComponentStyles\n *ngIf=\"option.secondaryText?.contentPortal as secondaryText\"\n >\n <ng-container *cdkPortalOutlet=\"secondaryText\"></ng-container>\n </div>\n </div>\n <div class=\"sapphire-listbox__icon\" _spUseComponentStyles *ngIf=\"selected\">\n <sp-icon name=\"checkMark\"></sp-icon>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "directive", type: i1$3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
3535
3559
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ListboxItemComponent, decorators: [{
3536
3560
  type: Component,
3537
3561
  args: [{ selector: 'li[sp-listbox-item]', host: {
@@ -3753,7 +3777,7 @@ ListboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
3753
3777
  useExisting: forwardRef(() => ListboxComponent),
3754
3778
  },
3755
3779
  ViewEncapsulationProvider,
3756
- ], queries: [{ propertyName: "itemsInContent", predicate: ListboxChild }], viewQueries: [{ propertyName: "cdkListbox", first: true, predicate: CdkListbox, descendants: true }, { propertyName: "cdkOptions", predicate: CdkOption, descendants: true }], exportAs: ["spListbox"], ngImport: i0, template: "<ul\n class=\"sapphire-listbox\"\n cdkListbox\n [id]=\"id || ''\"\n [cdkListboxCompareWith]=\"\"\n [cdkListboxMultiple]=\"!!multiple\"\n [cdkListboxDisabled]=\"!!disabled\"\n [cdkListboxNavigationWrapDisabled]=\"\n navigationWrapDisabled && !_forceEnableNavigationWrap\n \"\n [cdkListboxValue]=\"_validSelectedValues\"\n [cdkListboxUseActiveDescendant]=\"_shouldUseVirtualFocus()\"\n (cdkListboxValueChange)=\"_handleSelectionChange($event)\"\n (keydown.enter)=\"selected.emit($event)\"\n (keydown.space)=\"selected.emit($event)\"\n (mousedown)=\"_isConnectedToInput() && $event.preventDefault()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [class.sapphire-listbox--medium]=\"size === 'medium'\"\n [class.sapphire-listbox--small]=\"size === 'small'\"\n>\n <ng-container *ngFor=\"let item of options; let last = last\">\n <ng-container *ngIf=\"_isSection(item)\">\n <li role=\"presentation\">\n <ul\n role=\"group\"\n class=\"sapphire-listbox__section\"\n [attr.aria-label]=\"item.ariaLabel\"\n >\n <li\n *ngFor=\"let option of item.children\"\n [cdkOption]=\"option.value\"\n [cdkOptionDisabled]=\"!!option.disabled\"\n [cdkOptionTypeaheadLabel]=\"option.label\"\n #cdkOption=\"cdkOption\"\n sp-listbox-item\n [option]=\"option\"\n [selected]=\"isSelected(option)\"\n [focused]=\"cdkOption.isActive()\"\n (click)=\"!(disabled || option.disabled) && selected.emit($event)\"\n [size]=\"size\"\n ></li>\n </ul>\n </li>\n <li\n *ngIf=\"!last\"\n role=\"separator\"\n class=\"sapphire-listbox__separator\"\n ></li>\n </ng-container>\n <li\n *ngIf=\"_isOption(item)\"\n [cdkOption]=\"item.value\"\n [cdkOptionDisabled]=\"!!item.disabled\"\n [cdkOptionTypeaheadLabel]=\"item.label\"\n #cdkOption=\"cdkOption\"\n sp-listbox-item\n [option]=\"item\"\n [selected]=\"isSelected(item)\"\n [focused]=\"cdkOption.isActive()\"\n (click)=\"!(disabled || item.disabled) && selected.emit($event)\"\n [size]=\"size\"\n ></li>\n </ng-container>\n</ul>\n", styles: [".sapphire-listbox{box-sizing:border-box;min-width:var(--sapphire-listbox-size-width-min);margin:0;position:relative;list-style:none;outline:none;padding:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical)) 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-listbox__item{display:flex;justify-content:space-between;align-items:center;padding:var(--sapphire-listbox-size-spacing-outer-vertical) var(--sapphire-listbox-size-spacing-outer-horizontal);color:var(--sapphire-listbox-color-content-normal-primary-default);outline:none;cursor:pointer;text-decoration:none;min-width:max-content}.sapphire-listbox__item--danger{color:var(--sapphire-listbox-color-content-danger-default)}.sapphire-listbox__item--selected{color:var(--sapphire-listbox-color-content-selected-default)}.sapphire-listbox__item--selected .sapphire-listbox__content{background-color:var(--sapphire-listbox-color-background-selected-default)}.sapphire-listbox__content{width:100%;max-width:calc(100vw - 2 * var(--sapphire-listbox-size-width-icon-l));display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-listbox-size-spacing-inner-horizontal-l);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-l);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-l) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-l);border-radius:var(--sapphire-listbox-size-radius-item);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-listbox-time-transition);transition-timing-function:ease-in-out;min-height:var(--sapphire-listbox-size-height-min-height)}.sapphire-listbox--medium .sapphire-listbox__content{gap:var(--sapphire-listbox-size-spacing-inner-horizontal-m);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-m);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-m) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-m)}.sapphire-listbox--small .sapphire-listbox__content{gap:var(--sapphire-listbox-size-spacing-inner-horizontal-s);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-s);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-s) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-s)}.sapphire-listbox__icon{line-height:0}.sapphire-listbox__text-container{font-family:var(--sapphire-listbox-font-name);line-height:var(--sapphire-listbox-size-line-height)}.sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-listbox-font-weight-primary);font-size:var(--sapphire-listbox-size-font-primary-l)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-listbox-font-weight-secondary);font-size:var(--sapphire-listbox-size-font-secondary-l)}.sapphire-listbox--medium .sapphire-listbox__primary-text{font-size:var(--sapphire-listbox-size-font-primary-m)}.sapphire-listbox--small .sapphire-listbox__primary-text{font-size:var(--sapphire-listbox-size-font-primary-s)}.sapphire-listbox--medium .sapphire-listbox__secondary-text{font-size:var(--sapphire-listbox-size-font-secondary-m)}.sapphire-listbox--small .sapphire-listbox__secondary-text{font-size:var(--sapphire-listbox-size-font-secondary-s)}.sapphire-listbox__item:not(.sapphire-listbox__item--danger):not(.sapphire-listbox__item--selected) .sapphire-listbox__secondary-text{color:var(--sapphire-listbox-color-content-normal-secondary-default)}.sapphire-listbox__item.is-disabled{opacity:var(--sapphire-listbox-opacity-disabled);cursor:not-allowed}.sapphire-listbox__section{padding:0;list-style:none}.sapphire-listbox__separator{height:var(--sapphire-listbox-size-height-separator);width:100%;background:var(--sapphire-listbox-color-separator);margin-top:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical));margin-bottom:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical))}.sapphire-listbox__item:not(.is-disabled).is-focus .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-focus):focus-visible .sapphire-listbox__content{box-shadow:0 0 0 var(--sapphire-listbox-size-focus-ring) var(--sapphire-listbox-color-focus-ring)}.sapphire-listbox__item:not(.is-disabled).is-hover:not(.is-active) .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-normal-primary-hover);background-color:var(--sapphire-listbox-color-background-normal-hover)}.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-danger-hover);background-color:var(--sapphire-listbox-color-background-danger-hover)}.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-selected-hover);background-color:var(--sapphire-listbox-color-background-selected-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-normal-primary-active);background-color:var(--sapphire-listbox-color-background-normal-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-danger-active);background-color:var(--sapphire-listbox-color-background-danger-active)}.sapphire-listbox__item--selected:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-selected-active);background-color:var(--sapphire-listbox-color-background-selected-active)}:host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i1$5.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "directive", type: CdkOptionScrollIssuePatch, selector: "[cdkOption]" }, { kind: "component", type: ListboxItemComponent, selector: "li[sp-listbox-item]", inputs: ["selected", "focused", "option", "size"] }] });
3780
+ ], queries: [{ propertyName: "itemsInContent", predicate: ListboxChild }], viewQueries: [{ propertyName: "cdkListbox", first: true, predicate: CdkListbox, descendants: true }, { propertyName: "cdkOptions", predicate: CdkOption, descendants: true }], exportAs: ["spListbox"], ngImport: i0, template: "<ul\n class=\"sapphire-listbox\"\n cdkListbox\n [id]=\"id || ''\"\n [cdkListboxCompareWith]=\"\"\n [cdkListboxMultiple]=\"!!multiple\"\n [cdkListboxDisabled]=\"!!disabled\"\n [cdkListboxNavigationWrapDisabled]=\"\n navigationWrapDisabled && !_forceEnableNavigationWrap\n \"\n [cdkListboxValue]=\"_validSelectedValues\"\n [cdkListboxUseActiveDescendant]=\"_shouldUseVirtualFocus()\"\n (cdkListboxValueChange)=\"_handleSelectionChange($event)\"\n (keydown.enter)=\"selected.emit($event)\"\n (keydown.space)=\"selected.emit($event)\"\n (mousedown)=\"_isConnectedToInput() && $event.preventDefault()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [class.sapphire-listbox--medium]=\"size === 'medium'\"\n [class.sapphire-listbox--small]=\"size === 'small'\"\n>\n <ng-container *ngFor=\"let item of options; let last = last\">\n <ng-container *ngIf=\"_isSection(item)\">\n <li role=\"presentation\">\n <ul\n role=\"group\"\n class=\"sapphire-listbox__section\"\n [attr.aria-label]=\"item.ariaLabel\"\n >\n <li\n *ngFor=\"let option of item.children\"\n [cdkOption]=\"option.value\"\n [cdkOptionDisabled]=\"!!option.disabled\"\n [cdkOptionTypeaheadLabel]=\"option.label\"\n #cdkOption=\"cdkOption\"\n sp-listbox-item\n [option]=\"option\"\n [selected]=\"isSelected(option)\"\n [focused]=\"cdkOption.isActive()\"\n (click)=\"!(disabled || option.disabled) && selected.emit($event)\"\n [size]=\"size\"\n ></li>\n </ul>\n </li>\n <li\n *ngIf=\"!last\"\n role=\"separator\"\n class=\"sapphire-listbox__separator\"\n ></li>\n </ng-container>\n <li\n *ngIf=\"_isOption(item)\"\n [cdkOption]=\"item.value\"\n [cdkOptionDisabled]=\"!!item.disabled\"\n [cdkOptionTypeaheadLabel]=\"item.label\"\n #cdkOption=\"cdkOption\"\n sp-listbox-item\n [option]=\"item\"\n [selected]=\"isSelected(item)\"\n [focused]=\"cdkOption.isActive()\"\n (click)=\"!(disabled || item.disabled) && selected.emit($event)\"\n [size]=\"size\"\n ></li>\n </ng-container>\n</ul>\n", styles: [".sapphire-listbox{box-sizing:border-box;min-width:var(--sapphire-listbox-size-width-min);margin:0;position:relative;list-style:none;outline:none;padding:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical)) 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-listbox__item{display:flex;justify-content:space-between;align-items:center;padding:var(--sapphire-listbox-size-spacing-outer-vertical) var(--sapphire-listbox-size-spacing-outer-horizontal);color:var(--sapphire-listbox-color-content-normal-primary-default);outline:none;cursor:pointer;text-decoration:none;min-width:max-content}.sapphire-listbox__item--danger{color:var(--sapphire-listbox-color-content-danger-default)}.sapphire-listbox__item--selected{color:var(--sapphire-listbox-color-content-selected-default)}.sapphire-listbox__item--selected .sapphire-listbox__content{background-color:var(--sapphire-listbox-color-background-selected-default)}.sapphire-listbox__content{width:100%;max-width:calc(100vw - 2 * var(--sapphire-listbox-size-width-icon-l));display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-listbox-size-spacing-inner-horizontal-l);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-l);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-l) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-l);border-radius:var(--sapphire-listbox-size-radius-item);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-listbox-time-transition);transition-timing-function:ease-in-out;min-height:var(--sapphire-listbox-size-height-min-height)}.sapphire-listbox--medium .sapphire-listbox__content{gap:var(--sapphire-listbox-size-spacing-inner-horizontal-m);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-m);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-m) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-m)}.sapphire-listbox--small .sapphire-listbox__content{gap:var(--sapphire-listbox-size-spacing-inner-horizontal-s);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-s);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-s) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-s)}.sapphire-listbox__icon{line-height:0}.sapphire-listbox__text-container{font-family:var(--sapphire-listbox-font-name);line-height:var(--sapphire-listbox-size-line-height)}.sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-listbox-font-weight-primary);font-size:var(--sapphire-listbox-size-font-primary-l)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-listbox-font-weight-secondary);font-size:var(--sapphire-listbox-size-font-secondary-l)}.sapphire-listbox--medium .sapphire-listbox__primary-text{font-size:var(--sapphire-listbox-size-font-primary-m)}.sapphire-listbox--small .sapphire-listbox__primary-text{font-size:var(--sapphire-listbox-size-font-primary-s)}.sapphire-listbox--medium .sapphire-listbox__secondary-text{font-size:var(--sapphire-listbox-size-font-secondary-m)}.sapphire-listbox--small .sapphire-listbox__secondary-text{font-size:var(--sapphire-listbox-size-font-secondary-s)}.sapphire-listbox__item:not(.sapphire-listbox__item--danger):not(.sapphire-listbox__item--selected) .sapphire-listbox__secondary-text{color:var(--sapphire-listbox-color-content-normal-secondary-default)}.sapphire-listbox__item.is-disabled{opacity:var(--sapphire-listbox-opacity-disabled);cursor:not-allowed}.sapphire-listbox__section{padding:0;list-style:none}.sapphire-listbox__separator{height:var(--sapphire-listbox-size-height-separator);width:100%;background:var(--sapphire-listbox-color-separator);margin-top:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical));margin-bottom:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical))}.sapphire-listbox__item:not(.is-disabled).is-focus .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-focus):focus-visible .sapphire-listbox__content{box-shadow:0 0 0 var(--sapphire-listbox-size-focus-ring) var(--sapphire-listbox-color-focus-ring)}.sapphire-listbox__item:not(.is-disabled).is-hover:not(.is-active) .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-normal-primary-hover);background-color:var(--sapphire-listbox-color-background-normal-hover)}.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-danger-hover);background-color:var(--sapphire-listbox-color-background-danger-hover)}.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-selected-hover);background-color:var(--sapphire-listbox-color-background-selected-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-normal-primary-active);background-color:var(--sapphire-listbox-color-background-normal-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-danger-active);background-color:var(--sapphire-listbox-color-background-danger-active)}.sapphire-listbox__item--selected:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-selected-active);background-color:var(--sapphire-listbox-color-background-selected-active)}:host{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i1$4.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "directive", type: CdkOptionScrollIssuePatch, selector: "[cdkOption]" }, { kind: "component", type: ListboxItemComponent, selector: "li[sp-listbox-item]", inputs: ["selected", "focused", "option", "size"] }] });
3757
3781
  __decorate([
3758
3782
  CoerceBoolean
3759
3783
  ], ListboxComponent.prototype, "disabled", void 0);
@@ -4461,7 +4485,7 @@ class HiddenSelectComponent {
4461
4485
  }
4462
4486
  }
4463
4487
  HiddenSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: HiddenSelectComponent, deps: [{ token: SelectComponentBase }], target: i0.ɵɵFactoryTarget.Component });
4464
- HiddenSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: HiddenSelectComponent, selector: "sp-hidden-select", ngImport: i0, template: "<ng-container *ngIf=\"_select._initialized\">\n <select\n *ngIf=\"_isMobile && !_select.multiple\"\n class=\"sapphire-select__native-select\"\n _spUseComponentStyles\n [disabled]=\"_select.disabled\"\n [attr.name]=\"_select.name\"\n [attr.autocomplete]=\"_select.autocomplete\"\n (change)=\"_onNativeSelectChange($event)\"\n >\n <option\n *ngFor=\"let option of _select.options\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled\"\n [selected]=\"_select.listboxValue.includes(option.value)\"\n >\n {{ option.label }}\n </option>\n </select>\n <div\n *ngIf=\"!_isMobile || _select.multiple\"\n aria-hidden=\"true\"\n spVisuallyHidden\n >\n <input\n type=\"text\"\n style=\"font-size: 16px\"\n [disabled]=\"_select.disabled\"\n [tabIndex]=\"_select.isFocused() || _select.isOpen() ? -1 : 0\"\n (focus)=\"_select.focus('keyboard')\"\n />\n <label>\n {{ _select.getLabelText() }}\n <select\n [attr.size]=\"_select.multiple ? _select.options.length : null\"\n [disabled]=\"_select.disabled\"\n tabindex=\"-1\"\n [multiple]=\"_select.multiple\"\n (change)=\"_onNativeSelectChange($event)\"\n [attr.name]=\"_select.name\"\n [attr.autocomplete]=\"_select.autocomplete\"\n >\n <option\n *ngFor=\"let option of _select.options\"\n [value]=\"option.value\"\n [selected]=\"_select.listboxValue.includes(option.value)\"\n [disabled]=\"option.disabled\"\n >\n {{ option.label }}\n </option>\n </select>\n </label>\n </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: VisuallyHiddenDirective, selector: "[spVisuallyHidden]", inputs: ["spVisuallyHidden"] }, { kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
4488
+ HiddenSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: HiddenSelectComponent, selector: "sp-hidden-select", ngImport: i0, template: "<ng-container *ngIf=\"_select._initialized\">\n <select\n *ngIf=\"_isMobile && !_select.multiple\"\n class=\"sapphire-select__native-select\"\n _spUseComponentStyles\n [disabled]=\"_select.disabled\"\n [attr.name]=\"_select.name\"\n [attr.autocomplete]=\"_select.autocomplete\"\n (change)=\"_onNativeSelectChange($event)\"\n >\n <option\n *ngFor=\"let option of _select.options\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled\"\n [selected]=\"_select.listboxValue.includes(option.value)\"\n >\n {{ option.label }}\n </option>\n </select>\n <div\n *ngIf=\"!_isMobile || _select.multiple\"\n aria-hidden=\"true\"\n spVisuallyHidden\n >\n <input\n type=\"text\"\n style=\"font-size: 16px\"\n [disabled]=\"_select.disabled\"\n [tabIndex]=\"_select.isFocused() || _select.isOpen() ? -1 : 0\"\n (focus)=\"_select.focus('keyboard')\"\n />\n <label>\n {{ _select.getLabelText() }}\n <select\n [attr.size]=\"_select.multiple ? _select.options.length : null\"\n [disabled]=\"_select.disabled\"\n tabindex=\"-1\"\n [multiple]=\"_select.multiple\"\n (change)=\"_onNativeSelectChange($event)\"\n [attr.name]=\"_select.name\"\n [attr.autocomplete]=\"_select.autocomplete\"\n >\n <option\n *ngFor=\"let option of _select.options\"\n [value]=\"option.value\"\n [selected]=\"_select.listboxValue.includes(option.value)\"\n [disabled]=\"option.disabled\"\n >\n {{ option.label }}\n </option>\n </select>\n </label>\n </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: VisuallyHiddenDirective, selector: "[spVisuallyHidden]", inputs: ["spVisuallyHidden"] }, { kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
4465
4489
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: HiddenSelectComponent, decorators: [{
4466
4490
  type: Component,
4467
4491
  args: [{ selector: 'sp-hidden-select', template: "<ng-container *ngIf=\"_select._initialized\">\n <select\n *ngIf=\"_isMobile && !_select.multiple\"\n class=\"sapphire-select__native-select\"\n _spUseComponentStyles\n [disabled]=\"_select.disabled\"\n [attr.name]=\"_select.name\"\n [attr.autocomplete]=\"_select.autocomplete\"\n (change)=\"_onNativeSelectChange($event)\"\n >\n <option\n *ngFor=\"let option of _select.options\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled\"\n [selected]=\"_select.listboxValue.includes(option.value)\"\n >\n {{ option.label }}\n </option>\n </select>\n <div\n *ngIf=\"!_isMobile || _select.multiple\"\n aria-hidden=\"true\"\n spVisuallyHidden\n >\n <input\n type=\"text\"\n style=\"font-size: 16px\"\n [disabled]=\"_select.disabled\"\n [tabIndex]=\"_select.isFocused() || _select.isOpen() ? -1 : 0\"\n (focus)=\"_select.focus('keyboard')\"\n />\n <label>\n {{ _select.getLabelText() }}\n <select\n [attr.size]=\"_select.multiple ? _select.options.length : null\"\n [disabled]=\"_select.disabled\"\n tabindex=\"-1\"\n [multiple]=\"_select.multiple\"\n (change)=\"_onNativeSelectChange($event)\"\n [attr.name]=\"_select.name\"\n [attr.autocomplete]=\"_select.autocomplete\"\n >\n <option\n *ngFor=\"let option of _select.options\"\n [value]=\"option.value\"\n [selected]=\"_select.listboxValue.includes(option.value)\"\n [disabled]=\"option.disabled\"\n >\n {{ option.label }}\n </option>\n </select>\n </label>\n </div>\n</ng-container>\n" }]
@@ -4732,8 +4756,8 @@ class SelectComponent extends SelectComponentBase {
4732
4756
  return coerceBooleanProperty(this.disabled);
4733
4757
  }
4734
4758
  }
4735
- SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SelectComponent, deps: [{ token: SelectValueHolder }, { token: i2.FocusMonitor }, { token: i2.InputModalityDetector }, { token: FieldComponent, optional: true }, { token: SearchableSelectDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
4736
- SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: SelectComponent, selector: "sp-select", host: { properties: { "class.sapphire-select--error": "_field?.hasError()", "class.sapphire-select--medium": "_field?.size === \"medium\"", "class.is-focus": "isFocusVisible()", "class.is-disabled": "isDisabled()", "attr.id": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.placeholder": "null" }, classAttribute: "sapphire-select" }, providers: [
4759
+ SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SelectComponent, deps: [{ token: SelectValueHolder }, { token: i2$1.FocusMonitor }, { token: i2$1.InputModalityDetector }, { token: FieldComponent, optional: true }, { token: SearchableSelectDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
4760
+ SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: SelectComponent, selector: "sp-select", host: { properties: { "class.sapphire-select--error": "_field?.hasError(this)", "class.sapphire-select--medium": "_field?.size === \"medium\"", "class.is-focus": "isFocusVisible()", "class.is-disabled": "isDisabled()", "attr.id": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.placeholder": "null" }, classAttribute: "sapphire-select" }, providers: [
4737
4761
  {
4738
4762
  provide: NG_VALUE_ACCESSOR,
4739
4763
  useExisting: forwardRef(() => SelectComponent),
@@ -4747,7 +4771,7 @@ SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
4747
4771
  provide: FieldControl,
4748
4772
  useExisting: forwardRef(() => SelectComponent),
4749
4773
  },
4750
- ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true }, { propertyName: "triggerElementRef", first: true, predicate: ["triggerElementRef"], descendants: true, read: ElementRef }, { propertyName: "listbox", first: true, predicate: ListboxComponent, descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef }], exportAs: ["spSelect"], usesInheritance: true, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<sp-hidden-select></sp-hidden-select>\n<div\n role=\"button\"\n aria-haspopup=\"listbox\"\n class=\"sapphire-select__button\"\n [spPopoverTriggerFor]=\"popover\"\n [spPopoverTriggerDisabled]=\"disabled\"\n spPopoverTriggerOpenOnPressStart\n spPopoverTriggerCloseOnScroll\n spPopoverPlacement=\"bottom start\"\n #triggerElementRef\n #triggerRef=\"spPopoverTrigger\"\n (keydown)=\"handleKeyDown($event)\"\n (spPopoverTriggerClosed)=\"_onClose()\"\n (spPopoverTriggerOpened)=\"_onOpen()\"\n (focus)=\"_onFocus()\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n [spPopoverNonModal]=\"searchable\"\n [id]=\"id\"\n [tabindex]=\"-1\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"_getAriaLabelledBy()\"\n [attr.aria-describedby]=\"_field?.error?.id || _field?.note?.id\"\n [attr.aria-invalid]=\"_field?.hasError() ? true : null\"\n>\n <div class=\"sapphire-select__value\" [id]=\"_valueContainerId\">\n <input\n *ngIf=\"searchable\"\n #searchInput\n tabindex=\"-1\"\n role=\"combobox\"\n class=\"sapphire-select__search-input\"\n [spListboxInput]=\"listbox\"\n [spVisuallyHidden]=\"!_isInputVisible()\"\n [attr.data-hidden]=\"!_isInputVisible()\"\n [placeholder]=\"placeholder || ''\"\n (keydown)=\"_onInputKeydown($event)\"\n (beforeinput)=\"open()\"\n [value]=\"_searchableSelectDirective?.searchValue\"\n (input)=\"_onSearchInput($event)\"\n />\n <ng-container *ngIf=\"!searchable || !_isInputVisible()\">\n <div\n *ngIf=\"selectedOptions.length === 0\"\n class=\"sapphire-select__placeholder\"\n >\n {{ placeholder }}\n </div>\n <ng-container *ngIf=\"selectedOptions.length > 0\">\n <ng-container *ngIf=\"!selectionText\">{{\n getSelectionText()\n }}</ng-container>\n <ng-content select=\"sp-selection-text\"></ng-content>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"sapphire-select__icon-container\">\n <sp-icon name=\"chevronDown\"></sp-icon>\n </div>\n</div>\n<ng-template #popover>\n <sp-popover\n [style.display]=\"\n (filteredChildren$ | async)?.length === 0 ? 'none' : undefined\n \"\n noPadding\n noMaxWidth\n [style.min-width]=\"triggerElementRef.offsetWidth + 'px'\"\n >\n <sp-listbox\n [spListboxItems]=\"(filteredChildren$ | async) || undefined\"\n navigationWrapDisabled\n [multiple]=\"multiple\"\n [(selectedValues)]=\"listboxValue\"\n (selectedValuesChange)=\"_searchableSelectDirective?.setSearchValue('')\"\n (selected)=\"_handleSelected()\"\n [size]=\"_field?.size\"\n >\n </sp-listbox>\n </sp-popover>\n</ng-template>\n", styles: [".sapphire-select{position:relative;display:inline-block;color:var(--sapphire-select-color-content);width:var(--sapphire-select-size-width-control);font-family:var(--sapphire-select-font-name);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-select-size-height-field-l);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-select-size-spacing-control-horizontal-l);border:none;background-color:var(--sapphire-select-color-background-field);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-default);border-radius:var(--sapphire-select-size-radius-field);gap:var(--sapphire-select-size-spacing-control-gap-l)}.sapphire-select--medium .sapphire-select__button{height:var(--sapphire-select-size-height-field-m);padding:0 var(--sapphire-select-size-spacing-control-horizontal-m);gap:var(--sapphire-select-size-spacing-control-gap-m)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-select-size-font-content-l);width:100%;font-weight:var(--sapphire-select-size-font-weight-item);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--medium .sapphire-select__value{font-size:var(--sapphire-select-size-font-content-m)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-select-color-placeholder)}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-select-size-width-icon-l);height:var(--sapphire-select-size-height-icon-l)}.sapphire-select--medium .sapphire-select__icon-container{width:var(--sapphire-select-size-width-icon-m);height:var(--sapphire-select-size-height-icon-m)}.sapphire-select__prefix{display:inherit;font-size:var(--sapphire-select-size-font-content-l)}.sapphire-select--medium .sapphire-select__prefix{font-size:var(--sapphire-select-size-font-content-m)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-select-color-placeholder)}.sapphire-select__native-select{position:absolute;inset:0;opacity:.01;width:100%;z-index:1}.sapphire-select--error:not(.is-disabled) .sapphire-select__button{box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-error)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-border-field-error)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "component", type: ListboxComponent, selector: "sp-listbox", inputs: ["selectedValues", "spListboxItems", "disabled", "multiple", "navigationWrapDisabled", "aria-label", "aria-labelledby", "size", "id"], outputs: ["selectedValuesChange", "selected"], exportAs: ["spListbox"] }, { kind: "directive", type: ListboxInputDirective, selector: "input[spListboxInput]", inputs: ["spListboxInput"] }, { kind: "component", type: PopoverComponent, selector: "sp-popover", inputs: ["noPadding", "noMaxWidth", "noAutoFocus", "trapFocus"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[spPopoverTriggerFor]", inputs: ["spPopoverPlacement", "spPopoverTriggerFor", "spPopoverNonModal", "spPopoverTriggerOpenOnPressStart", "spPopoverTriggerCloseOnScroll", "spPopoverTriggerDisabled"], outputs: ["spPopoverTriggerOpened", "spPopoverTriggerClosed"], exportAs: ["spPopoverTrigger"] }, { kind: "directive", type: i2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: VisuallyHiddenDirective, selector: "[spVisuallyHidden]", inputs: ["spVisuallyHidden"] }, { kind: "component", type: HiddenSelectComponent, selector: "sp-hidden-select" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
4774
+ ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true }, { propertyName: "triggerElementRef", first: true, predicate: ["triggerElementRef"], descendants: true, read: ElementRef }, { propertyName: "listbox", first: true, predicate: ListboxComponent, descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef }], exportAs: ["spSelect"], usesInheritance: true, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<sp-hidden-select></sp-hidden-select>\n<div\n role=\"button\"\n aria-haspopup=\"listbox\"\n class=\"sapphire-select__button\"\n [spPopoverTriggerFor]=\"popover\"\n [spPopoverTriggerDisabled]=\"disabled\"\n spPopoverTriggerOpenOnPressStart\n spPopoverTriggerCloseOnScroll\n spPopoverPlacement=\"bottom start\"\n #triggerElementRef\n #triggerRef=\"spPopoverTrigger\"\n (keydown)=\"handleKeyDown($event)\"\n (spPopoverTriggerClosed)=\"_onClose()\"\n (spPopoverTriggerOpened)=\"_onOpen()\"\n (focus)=\"_onFocus()\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n [spPopoverNonModal]=\"searchable\"\n [id]=\"id\"\n [tabindex]=\"-1\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"_getAriaLabelledBy()\"\n [attr.aria-describedby]=\"_field?.error?.id || _field?.note?.id\"\n [attr.aria-invalid]=\"_field?.hasError(this) ? true : null\"\n>\n <div class=\"sapphire-select__value\" [id]=\"_valueContainerId\">\n <input\n *ngIf=\"searchable\"\n #searchInput\n tabindex=\"-1\"\n role=\"combobox\"\n class=\"sapphire-select__search-input\"\n [spListboxInput]=\"listbox\"\n [spVisuallyHidden]=\"!_isInputVisible()\"\n [attr.data-hidden]=\"!_isInputVisible()\"\n [placeholder]=\"placeholder || ''\"\n (keydown)=\"_onInputKeydown($event)\"\n (beforeinput)=\"open()\"\n [value]=\"_searchableSelectDirective?.searchValue\"\n (input)=\"_onSearchInput($event)\"\n />\n <ng-container *ngIf=\"!searchable || !_isInputVisible()\">\n <div\n *ngIf=\"selectedOptions.length === 0\"\n class=\"sapphire-select__placeholder\"\n >\n {{ placeholder }}\n </div>\n <ng-container *ngIf=\"selectedOptions.length > 0\">\n <ng-container *ngIf=\"!selectionText\">{{\n getSelectionText()\n }}</ng-container>\n <ng-content select=\"sp-selection-text\"></ng-content>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"sapphire-select__icon-container\">\n <sp-icon name=\"chevronDown\"></sp-icon>\n </div>\n</div>\n<ng-template #popover>\n <sp-popover\n [style.display]=\"\n (filteredChildren$ | async)?.length === 0 ? 'none' : undefined\n \"\n noPadding\n noMaxWidth\n [style.min-width]=\"triggerElementRef.offsetWidth + 'px'\"\n >\n <sp-listbox\n [spListboxItems]=\"(filteredChildren$ | async) || undefined\"\n navigationWrapDisabled\n [multiple]=\"multiple\"\n [(selectedValues)]=\"listboxValue\"\n (selectedValuesChange)=\"_searchableSelectDirective?.setSearchValue('')\"\n (selected)=\"_handleSelected()\"\n [size]=\"_field?.size\"\n >\n </sp-listbox>\n </sp-popover>\n</ng-template>\n", styles: [".sapphire-select{position:relative;display:inline-block;color:var(--sapphire-select-color-content);width:var(--sapphire-select-size-width-control);font-family:var(--sapphire-select-font-name);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-select-size-height-field-l);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-select-size-spacing-control-horizontal-l);border:none;background-color:var(--sapphire-select-color-background-field);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-default);border-radius:var(--sapphire-select-size-radius-field);gap:var(--sapphire-select-size-spacing-control-gap-l)}.sapphire-select--medium .sapphire-select__button{height:var(--sapphire-select-size-height-field-m);padding:0 var(--sapphire-select-size-spacing-control-horizontal-m);gap:var(--sapphire-select-size-spacing-control-gap-m)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-select-size-font-content-l);width:100%;font-weight:var(--sapphire-select-size-font-weight-item);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--medium .sapphire-select__value{font-size:var(--sapphire-select-size-font-content-m)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-select-color-placeholder)}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-select-size-width-icon-l);height:var(--sapphire-select-size-height-icon-l)}.sapphire-select--medium .sapphire-select__icon-container{width:var(--sapphire-select-size-width-icon-m);height:var(--sapphire-select-size-height-icon-m)}.sapphire-select__prefix{display:inherit;font-size:var(--sapphire-select-size-font-content-l)}.sapphire-select--medium .sapphire-select__prefix{font-size:var(--sapphire-select-size-font-content-m)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-select-color-placeholder)}.sapphire-select__native-select{position:absolute;inset:0;opacity:.01;width:100%;z-index:1}.sapphire-select--error:not(.is-disabled) .sapphire-select__button{box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-error)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-border-field-error)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "component", type: ListboxComponent, selector: "sp-listbox", inputs: ["selectedValues", "spListboxItems", "disabled", "multiple", "navigationWrapDisabled", "aria-label", "aria-labelledby", "size", "id"], outputs: ["selectedValuesChange", "selected"], exportAs: ["spListbox"] }, { kind: "directive", type: ListboxInputDirective, selector: "input[spListboxInput]", inputs: ["spListboxInput"] }, { kind: "component", type: PopoverComponent, selector: "sp-popover", inputs: ["noPadding", "noMaxWidth", "noAutoFocus", "trapFocus"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[spPopoverTriggerFor]", inputs: ["spPopoverPlacement", "spPopoverTriggerFor", "spPopoverNonModal", "spPopoverTriggerOpenOnPressStart", "spPopoverTriggerCloseOnScroll", "spPopoverTriggerDisabled"], outputs: ["spPopoverTriggerOpened", "spPopoverTriggerClosed"], exportAs: ["spPopoverTrigger"] }, { kind: "directive", type: i2$1.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: VisuallyHiddenDirective, selector: "[spVisuallyHidden]", inputs: ["spVisuallyHidden"] }, { kind: "component", type: HiddenSelectComponent, selector: "sp-hidden-select" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
4751
4775
  __decorate([
4752
4776
  AutoId()
4753
4777
  ], SelectComponent.prototype, "_valueContainerId", void 0);
@@ -4769,7 +4793,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
4769
4793
  },
4770
4794
  ], host: {
4771
4795
  class: 'sapphire-select',
4772
- '[class.sapphire-select--error]': '_field?.hasError()',
4796
+ '[class.sapphire-select--error]': '_field?.hasError(this)',
4773
4797
  '[class.sapphire-select--medium]': '_field?.size === "medium"',
4774
4798
  '[class.is-focus]': 'isFocusVisible()',
4775
4799
  '[class.is-disabled]': 'isDisabled()',
@@ -4777,8 +4801,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
4777
4801
  '[attr.aria-label]': 'null',
4778
4802
  '[attr.aria-labelledby]': 'null',
4779
4803
  '[attr.placeholder]': 'null',
4780
- }, hostDirectives: [UseComponentStylesOnHost], template: "<sp-hidden-select></sp-hidden-select>\n<div\n role=\"button\"\n aria-haspopup=\"listbox\"\n class=\"sapphire-select__button\"\n [spPopoverTriggerFor]=\"popover\"\n [spPopoverTriggerDisabled]=\"disabled\"\n spPopoverTriggerOpenOnPressStart\n spPopoverTriggerCloseOnScroll\n spPopoverPlacement=\"bottom start\"\n #triggerElementRef\n #triggerRef=\"spPopoverTrigger\"\n (keydown)=\"handleKeyDown($event)\"\n (spPopoverTriggerClosed)=\"_onClose()\"\n (spPopoverTriggerOpened)=\"_onOpen()\"\n (focus)=\"_onFocus()\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n [spPopoverNonModal]=\"searchable\"\n [id]=\"id\"\n [tabindex]=\"-1\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"_getAriaLabelledBy()\"\n [attr.aria-describedby]=\"_field?.error?.id || _field?.note?.id\"\n [attr.aria-invalid]=\"_field?.hasError() ? true : null\"\n>\n <div class=\"sapphire-select__value\" [id]=\"_valueContainerId\">\n <input\n *ngIf=\"searchable\"\n #searchInput\n tabindex=\"-1\"\n role=\"combobox\"\n class=\"sapphire-select__search-input\"\n [spListboxInput]=\"listbox\"\n [spVisuallyHidden]=\"!_isInputVisible()\"\n [attr.data-hidden]=\"!_isInputVisible()\"\n [placeholder]=\"placeholder || ''\"\n (keydown)=\"_onInputKeydown($event)\"\n (beforeinput)=\"open()\"\n [value]=\"_searchableSelectDirective?.searchValue\"\n (input)=\"_onSearchInput($event)\"\n />\n <ng-container *ngIf=\"!searchable || !_isInputVisible()\">\n <div\n *ngIf=\"selectedOptions.length === 0\"\n class=\"sapphire-select__placeholder\"\n >\n {{ placeholder }}\n </div>\n <ng-container *ngIf=\"selectedOptions.length > 0\">\n <ng-container *ngIf=\"!selectionText\">{{\n getSelectionText()\n }}</ng-container>\n <ng-content select=\"sp-selection-text\"></ng-content>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"sapphire-select__icon-container\">\n <sp-icon name=\"chevronDown\"></sp-icon>\n </div>\n</div>\n<ng-template #popover>\n <sp-popover\n [style.display]=\"\n (filteredChildren$ | async)?.length === 0 ? 'none' : undefined\n \"\n noPadding\n noMaxWidth\n [style.min-width]=\"triggerElementRef.offsetWidth + 'px'\"\n >\n <sp-listbox\n [spListboxItems]=\"(filteredChildren$ | async) || undefined\"\n navigationWrapDisabled\n [multiple]=\"multiple\"\n [(selectedValues)]=\"listboxValue\"\n (selectedValuesChange)=\"_searchableSelectDirective?.setSearchValue('')\"\n (selected)=\"_handleSelected()\"\n [size]=\"_field?.size\"\n >\n </sp-listbox>\n </sp-popover>\n</ng-template>\n", styles: [".sapphire-select{position:relative;display:inline-block;color:var(--sapphire-select-color-content);width:var(--sapphire-select-size-width-control);font-family:var(--sapphire-select-font-name);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-select-size-height-field-l);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-select-size-spacing-control-horizontal-l);border:none;background-color:var(--sapphire-select-color-background-field);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-default);border-radius:var(--sapphire-select-size-radius-field);gap:var(--sapphire-select-size-spacing-control-gap-l)}.sapphire-select--medium .sapphire-select__button{height:var(--sapphire-select-size-height-field-m);padding:0 var(--sapphire-select-size-spacing-control-horizontal-m);gap:var(--sapphire-select-size-spacing-control-gap-m)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-select-size-font-content-l);width:100%;font-weight:var(--sapphire-select-size-font-weight-item);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--medium .sapphire-select__value{font-size:var(--sapphire-select-size-font-content-m)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-select-color-placeholder)}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-select-size-width-icon-l);height:var(--sapphire-select-size-height-icon-l)}.sapphire-select--medium .sapphire-select__icon-container{width:var(--sapphire-select-size-width-icon-m);height:var(--sapphire-select-size-height-icon-m)}.sapphire-select__prefix{display:inherit;font-size:var(--sapphire-select-size-font-content-l)}.sapphire-select--medium .sapphire-select__prefix{font-size:var(--sapphire-select-size-font-content-m)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-select-color-placeholder)}.sapphire-select__native-select{position:absolute;inset:0;opacity:.01;width:100%;z-index:1}.sapphire-select--error:not(.is-disabled) .sapphire-select__button{box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-error)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-border-field-error)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed}\n"] }]
4781
- }], ctorParameters: function () { return [{ type: SelectValueHolder }, { type: i2.FocusMonitor }, { type: i2.InputModalityDetector }, { type: FieldComponent, decorators: [{
4804
+ }, hostDirectives: [UseComponentStylesOnHost], template: "<sp-hidden-select></sp-hidden-select>\n<div\n role=\"button\"\n aria-haspopup=\"listbox\"\n class=\"sapphire-select__button\"\n [spPopoverTriggerFor]=\"popover\"\n [spPopoverTriggerDisabled]=\"disabled\"\n spPopoverTriggerOpenOnPressStart\n spPopoverTriggerCloseOnScroll\n spPopoverPlacement=\"bottom start\"\n #triggerElementRef\n #triggerRef=\"spPopoverTrigger\"\n (keydown)=\"handleKeyDown($event)\"\n (spPopoverTriggerClosed)=\"_onClose()\"\n (spPopoverTriggerOpened)=\"_onOpen()\"\n (focus)=\"_onFocus()\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n [spPopoverNonModal]=\"searchable\"\n [id]=\"id\"\n [tabindex]=\"-1\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"_getAriaLabelledBy()\"\n [attr.aria-describedby]=\"_field?.error?.id || _field?.note?.id\"\n [attr.aria-invalid]=\"_field?.hasError(this) ? true : null\"\n>\n <div class=\"sapphire-select__value\" [id]=\"_valueContainerId\">\n <input\n *ngIf=\"searchable\"\n #searchInput\n tabindex=\"-1\"\n role=\"combobox\"\n class=\"sapphire-select__search-input\"\n [spListboxInput]=\"listbox\"\n [spVisuallyHidden]=\"!_isInputVisible()\"\n [attr.data-hidden]=\"!_isInputVisible()\"\n [placeholder]=\"placeholder || ''\"\n (keydown)=\"_onInputKeydown($event)\"\n (beforeinput)=\"open()\"\n [value]=\"_searchableSelectDirective?.searchValue\"\n (input)=\"_onSearchInput($event)\"\n />\n <ng-container *ngIf=\"!searchable || !_isInputVisible()\">\n <div\n *ngIf=\"selectedOptions.length === 0\"\n class=\"sapphire-select__placeholder\"\n >\n {{ placeholder }}\n </div>\n <ng-container *ngIf=\"selectedOptions.length > 0\">\n <ng-container *ngIf=\"!selectionText\">{{\n getSelectionText()\n }}</ng-container>\n <ng-content select=\"sp-selection-text\"></ng-content>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"sapphire-select__icon-container\">\n <sp-icon name=\"chevronDown\"></sp-icon>\n </div>\n</div>\n<ng-template #popover>\n <sp-popover\n [style.display]=\"\n (filteredChildren$ | async)?.length === 0 ? 'none' : undefined\n \"\n noPadding\n noMaxWidth\n [style.min-width]=\"triggerElementRef.offsetWidth + 'px'\"\n >\n <sp-listbox\n [spListboxItems]=\"(filteredChildren$ | async) || undefined\"\n navigationWrapDisabled\n [multiple]=\"multiple\"\n [(selectedValues)]=\"listboxValue\"\n (selectedValuesChange)=\"_searchableSelectDirective?.setSearchValue('')\"\n (selected)=\"_handleSelected()\"\n [size]=\"_field?.size\"\n >\n </sp-listbox>\n </sp-popover>\n</ng-template>\n", styles: [".sapphire-select{position:relative;display:inline-block;color:var(--sapphire-select-color-content);width:var(--sapphire-select-size-width-control);font-family:var(--sapphire-select-font-name);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-select-size-height-field-l);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-select-size-spacing-control-horizontal-l);border:none;background-color:var(--sapphire-select-color-background-field);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-default);border-radius:var(--sapphire-select-size-radius-field);gap:var(--sapphire-select-size-spacing-control-gap-l)}.sapphire-select--medium .sapphire-select__button{height:var(--sapphire-select-size-height-field-m);padding:0 var(--sapphire-select-size-spacing-control-horizontal-m);gap:var(--sapphire-select-size-spacing-control-gap-m)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-select-size-font-content-l);width:100%;font-weight:var(--sapphire-select-size-font-weight-item);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--medium .sapphire-select__value{font-size:var(--sapphire-select-size-font-content-m)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-select-color-placeholder)}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-select-size-width-icon-l);height:var(--sapphire-select-size-height-icon-l)}.sapphire-select--medium .sapphire-select__icon-container{width:var(--sapphire-select-size-width-icon-m);height:var(--sapphire-select-size-height-icon-m)}.sapphire-select__prefix{display:inherit;font-size:var(--sapphire-select-size-font-content-l)}.sapphire-select--medium .sapphire-select__prefix{font-size:var(--sapphire-select-size-font-content-m)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-select-color-placeholder)}.sapphire-select__native-select{position:absolute;inset:0;opacity:.01;width:100%;z-index:1}.sapphire-select--error:not(.is-disabled) .sapphire-select__button{box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-error)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-border-field-error)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed}\n"] }]
4805
+ }], ctorParameters: function () { return [{ type: SelectValueHolder }, { type: i2$1.FocusMonitor }, { type: i2$1.InputModalityDetector }, { type: FieldComponent, decorators: [{
4782
4806
  type: Optional
4783
4807
  }] }, { type: SearchableSelectDirective, decorators: [{
4784
4808
  type: Optional
@@ -4886,7 +4910,7 @@ class BasicSelectComponent extends SelectComponentBase {
4886
4910
  }
4887
4911
  }
4888
4912
  }
4889
- BasicSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: BasicSelectComponent, deps: [{ token: SelectValueHolder }, { token: i2.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component });
4913
+ BasicSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: BasicSelectComponent, deps: [{ token: SelectValueHolder }, { token: i2$1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component });
4890
4914
  BasicSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: BasicSelectComponent, selector: "sp-basic-select", inputs: { size: "size", variant: "variant" }, host: { properties: { "attr.aria-label": "null", "attr.aria-labelledby": "null" } }, providers: [
4891
4915
  {
4892
4916
  provide: NG_VALUE_ACCESSOR,
@@ -4898,7 +4922,7 @@ BasicSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
4898
4922
  useExisting: forwardRef(() => BasicSelectComponent),
4899
4923
  },
4900
4924
  ViewEncapsulationProvider,
4901
- ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true }, { propertyName: "triggerElementRef", first: true, predicate: ["triggerElementRef"], descendants: true, read: ElementRef }, { propertyName: "listbox", first: true, predicate: ListboxComponent, descendants: true }], exportAs: ["spBasicSelect"], usesInheritance: true, ngImport: i0, template: "<div style=\"position: relative\">\n <sp-hidden-select></sp-hidden-select>\n <button\n sp-button\n [variant]=\"getButtonVariant()\"\n [appearance]=\"getButtonAppearance()\"\n [size]=\"size\"\n iconAlign=\"right\"\n [spPopoverTriggerFor]=\"popover\"\n spPopoverPlacement=\"bottom start\"\n #triggerElementRef\n #triggerRef=\"spPopoverTrigger\"\n (keydown)=\"handleKeyDown($event)\"\n (spPopoverTriggerOpened)=\"_onOpen()\"\n (spPopoverTriggerClosed)=\"_onClose()\"\n cdkMonitorElementFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n aria-haspopup=\"listbox\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [disabled]=\"disabled\"\n >\n <span *ngIf=\"selectedOptions.length === 0\">\n {{ placeholder }}\n </span>\n <ng-container *ngIf=\"selectedOptions.length > 0\">\n <ng-container *ngIf=\"!selectionText\">{{\n getSelectionText()\n }}</ng-container>\n <ng-content select=\"sp-selection-text\"></ng-content>\n </ng-container>\n <sp-icon spButtonIcon name=\"chevronDown\"></sp-icon>\n </button>\n <ng-template #popover>\n <sp-popover noPadding>\n <sp-listbox\n [spListboxItems]=\"listboxChildren\"\n navigationWrapDisabled\n [multiple]=\"multiple\"\n [(selectedValues)]=\"listboxValue\"\n (selected)=\"_handleSelected()\"\n [size]=\"size\"\n >\n </sp-listbox>\n </sp-popover>\n </ng-template>\n</div>\n", styles: [".sapphire-select{position:relative;display:inline-block;color:var(--sapphire-select-color-content);width:var(--sapphire-select-size-width-control);font-family:var(--sapphire-select-font-name);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-select-size-height-field-l);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-select-size-spacing-control-horizontal-l);border:none;background-color:var(--sapphire-select-color-background-field);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-default);border-radius:var(--sapphire-select-size-radius-field);gap:var(--sapphire-select-size-spacing-control-gap-l)}.sapphire-select--medium .sapphire-select__button{height:var(--sapphire-select-size-height-field-m);padding:0 var(--sapphire-select-size-spacing-control-horizontal-m);gap:var(--sapphire-select-size-spacing-control-gap-m)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-select-size-font-content-l);width:100%;font-weight:var(--sapphire-select-size-font-weight-item);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--medium .sapphire-select__value{font-size:var(--sapphire-select-size-font-content-m)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-select-color-placeholder)}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-select-size-width-icon-l);height:var(--sapphire-select-size-height-icon-l)}.sapphire-select--medium .sapphire-select__icon-container{width:var(--sapphire-select-size-width-icon-m);height:var(--sapphire-select-size-height-icon-m)}.sapphire-select__prefix{display:inherit;font-size:var(--sapphire-select-size-font-content-l)}.sapphire-select--medium .sapphire-select__prefix{font-size:var(--sapphire-select-size-font-content-m)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-select-color-placeholder)}.sapphire-select__native-select{position:absolute;inset:0;opacity:.01;width:100%;z-index:1}.sapphire-select--error:not(.is-disabled) .sapphire-select__button{box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-error)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-border-field-error)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "component", type: ListboxComponent, selector: "sp-listbox", inputs: ["selectedValues", "spListboxItems", "disabled", "multiple", "navigationWrapDisabled", "aria-label", "aria-labelledby", "size", "id"], outputs: ["selectedValuesChange", "selected"], exportAs: ["spListbox"] }, { kind: "component", type: PopoverComponent, selector: "sp-popover", inputs: ["noPadding", "noMaxWidth", "noAutoFocus", "trapFocus"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[spPopoverTriggerFor]", inputs: ["spPopoverPlacement", "spPopoverTriggerFor", "spPopoverNonModal", "spPopoverTriggerOpenOnPressStart", "spPopoverTriggerCloseOnScroll", "spPopoverTriggerDisabled"], outputs: ["spPopoverTriggerOpened", "spPopoverTriggerClosed"], exportAs: ["spPopoverTrigger"] }, { kind: "directive", type: i2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "component", type: ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "iconAlign", "type"] }, { kind: "directive", type: ButtonIconDirective, selector: "[spButtonIcon]" }, { kind: "component", type: HiddenSelectComponent, selector: "sp-hidden-select" }] });
4925
+ ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true }, { propertyName: "triggerElementRef", first: true, predicate: ["triggerElementRef"], descendants: true, read: ElementRef }, { propertyName: "listbox", first: true, predicate: ListboxComponent, descendants: true }], exportAs: ["spBasicSelect"], usesInheritance: true, ngImport: i0, template: "<div style=\"position: relative\">\n <sp-hidden-select></sp-hidden-select>\n <button\n sp-button\n [variant]=\"getButtonVariant()\"\n [appearance]=\"getButtonAppearance()\"\n [size]=\"size\"\n iconAlign=\"right\"\n [spPopoverTriggerFor]=\"popover\"\n spPopoverPlacement=\"bottom start\"\n #triggerElementRef\n #triggerRef=\"spPopoverTrigger\"\n (keydown)=\"handleKeyDown($event)\"\n (spPopoverTriggerOpened)=\"_onOpen()\"\n (spPopoverTriggerClosed)=\"_onClose()\"\n cdkMonitorElementFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n aria-haspopup=\"listbox\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [disabled]=\"disabled\"\n >\n <span *ngIf=\"selectedOptions.length === 0\">\n {{ placeholder }}\n </span>\n <ng-container *ngIf=\"selectedOptions.length > 0\">\n <ng-container *ngIf=\"!selectionText\">{{\n getSelectionText()\n }}</ng-container>\n <ng-content select=\"sp-selection-text\"></ng-content>\n </ng-container>\n <sp-icon spButtonIcon name=\"chevronDown\"></sp-icon>\n </button>\n <ng-template #popover>\n <sp-popover noPadding>\n <sp-listbox\n [spListboxItems]=\"listboxChildren\"\n navigationWrapDisabled\n [multiple]=\"multiple\"\n [(selectedValues)]=\"listboxValue\"\n (selected)=\"_handleSelected()\"\n [size]=\"size\"\n >\n </sp-listbox>\n </sp-popover>\n </ng-template>\n</div>\n", styles: [".sapphire-select{position:relative;display:inline-block;color:var(--sapphire-select-color-content);width:var(--sapphire-select-size-width-control);font-family:var(--sapphire-select-font-name);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-select-size-height-field-l);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-select-size-spacing-control-horizontal-l);border:none;background-color:var(--sapphire-select-color-background-field);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-default);border-radius:var(--sapphire-select-size-radius-field);gap:var(--sapphire-select-size-spacing-control-gap-l)}.sapphire-select--medium .sapphire-select__button{height:var(--sapphire-select-size-height-field-m);padding:0 var(--sapphire-select-size-spacing-control-horizontal-m);gap:var(--sapphire-select-size-spacing-control-gap-m)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-select-size-font-content-l);width:100%;font-weight:var(--sapphire-select-size-font-weight-item);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--medium .sapphire-select__value{font-size:var(--sapphire-select-size-font-content-m)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-select-color-placeholder)}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-select-size-width-icon-l);height:var(--sapphire-select-size-height-icon-l)}.sapphire-select--medium .sapphire-select__icon-container{width:var(--sapphire-select-size-width-icon-m);height:var(--sapphire-select-size-height-icon-m)}.sapphire-select__prefix{display:inherit;font-size:var(--sapphire-select-size-font-content-l)}.sapphire-select--medium .sapphire-select__prefix{font-size:var(--sapphire-select-size-font-content-m)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-select-color-placeholder)}.sapphire-select__native-select{position:absolute;inset:0;opacity:.01;width:100%;z-index:1}.sapphire-select--error:not(.is-disabled) .sapphire-select__button{box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-error)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-border-field-error)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "component", type: ListboxComponent, selector: "sp-listbox", inputs: ["selectedValues", "spListboxItems", "disabled", "multiple", "navigationWrapDisabled", "aria-label", "aria-labelledby", "size", "id"], outputs: ["selectedValuesChange", "selected"], exportAs: ["spListbox"] }, { kind: "component", type: PopoverComponent, selector: "sp-popover", inputs: ["noPadding", "noMaxWidth", "noAutoFocus", "trapFocus"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[spPopoverTriggerFor]", inputs: ["spPopoverPlacement", "spPopoverTriggerFor", "spPopoverNonModal", "spPopoverTriggerOpenOnPressStart", "spPopoverTriggerCloseOnScroll", "spPopoverTriggerDisabled"], outputs: ["spPopoverTriggerOpened", "spPopoverTriggerClosed"], exportAs: ["spPopoverTrigger"] }, { kind: "directive", type: i2$1.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "component", type: ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "iconAlign", "type"] }, { kind: "directive", type: ButtonIconDirective, selector: "[spButtonIcon]" }, { kind: "component", type: HiddenSelectComponent, selector: "sp-hidden-select" }] });
4902
4926
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: BasicSelectComponent, decorators: [{
4903
4927
  type: Component,
4904
4928
  args: [{ selector: 'sp-basic-select', exportAs: 'spBasicSelect', providers: [
@@ -4916,7 +4940,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
4916
4940
  '[attr.aria-label]': 'null',
4917
4941
  '[attr.aria-labelledby]': 'null',
4918
4942
  }, template: "<div style=\"position: relative\">\n <sp-hidden-select></sp-hidden-select>\n <button\n sp-button\n [variant]=\"getButtonVariant()\"\n [appearance]=\"getButtonAppearance()\"\n [size]=\"size\"\n iconAlign=\"right\"\n [spPopoverTriggerFor]=\"popover\"\n spPopoverPlacement=\"bottom start\"\n #triggerElementRef\n #triggerRef=\"spPopoverTrigger\"\n (keydown)=\"handleKeyDown($event)\"\n (spPopoverTriggerOpened)=\"_onOpen()\"\n (spPopoverTriggerClosed)=\"_onClose()\"\n cdkMonitorElementFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n aria-haspopup=\"listbox\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [disabled]=\"disabled\"\n >\n <span *ngIf=\"selectedOptions.length === 0\">\n {{ placeholder }}\n </span>\n <ng-container *ngIf=\"selectedOptions.length > 0\">\n <ng-container *ngIf=\"!selectionText\">{{\n getSelectionText()\n }}</ng-container>\n <ng-content select=\"sp-selection-text\"></ng-content>\n </ng-container>\n <sp-icon spButtonIcon name=\"chevronDown\"></sp-icon>\n </button>\n <ng-template #popover>\n <sp-popover noPadding>\n <sp-listbox\n [spListboxItems]=\"listboxChildren\"\n navigationWrapDisabled\n [multiple]=\"multiple\"\n [(selectedValues)]=\"listboxValue\"\n (selected)=\"_handleSelected()\"\n [size]=\"size\"\n >\n </sp-listbox>\n </sp-popover>\n </ng-template>\n</div>\n", styles: [".sapphire-select{position:relative;display:inline-block;color:var(--sapphire-select-color-content);width:var(--sapphire-select-size-width-control);font-family:var(--sapphire-select-font-name);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-select-size-height-field-l);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-select-size-spacing-control-horizontal-l);border:none;background-color:var(--sapphire-select-color-background-field);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-default);border-radius:var(--sapphire-select-size-radius-field);gap:var(--sapphire-select-size-spacing-control-gap-l)}.sapphire-select--medium .sapphire-select__button{height:var(--sapphire-select-size-height-field-m);padding:0 var(--sapphire-select-size-spacing-control-horizontal-m);gap:var(--sapphire-select-size-spacing-control-gap-m)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-select-size-font-content-l);width:100%;font-weight:var(--sapphire-select-size-font-weight-item);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--medium .sapphire-select__value{font-size:var(--sapphire-select-size-font-content-m)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-select-color-placeholder)}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-select-size-width-icon-l);height:var(--sapphire-select-size-height-icon-l)}.sapphire-select--medium .sapphire-select__icon-container{width:var(--sapphire-select-size-width-icon-m);height:var(--sapphire-select-size-height-icon-m)}.sapphire-select__prefix{display:inherit;font-size:var(--sapphire-select-size-font-content-l)}.sapphire-select--medium .sapphire-select__prefix{font-size:var(--sapphire-select-size-font-content-m)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-select-color-placeholder)}.sapphire-select__native-select{position:absolute;inset:0;opacity:.01;width:100%;z-index:1}.sapphire-select--error:not(.is-disabled) .sapphire-select__button{box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-error)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-border-field-error)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed}\n"] }]
4919
- }], ctorParameters: function () { return [{ type: SelectValueHolder }, { type: i2.FocusMonitor }]; }, propDecorators: { size: [{
4943
+ }], ctorParameters: function () { return [{ type: SelectValueHolder }, { type: i2$1.FocusMonitor }]; }, propDecorators: { size: [{
4920
4944
  type: Input
4921
4945
  }], variant: [{
4922
4946
  type: Input
@@ -5346,7 +5370,7 @@ class SegmentedTabsComponent {
5346
5370
  }
5347
5371
  }
5348
5372
  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 });
5349
- 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--large]=\"size === 'large'\"\n [class.sapphire-segmented-control--small]=\"size === 'small'\"\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-segmented-control-size-height-m)}.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-segmented-control-color-tray);border-radius:var(--sapphire-segmented-control-size-radius);padding:var(--sapphire-segmented-control-size-spacing-tray);box-sizing:border-box}.sapphire-segmented-control__glider{position:absolute;top:var(--sapphire-segmented-control-size-spacing-tray);left:0;height:calc(100% - var(--sapphire-segmented-control-size-spacing-tray) * 2);display:block;background-color:var(--sapphire-segmented-control-color-glider);box-shadow:var(--sapphire-segmented-control-shadow-glider);box-sizing:border-box;z-index:1;border-radius:var(--sapphire-segmented-control-size-radius)}.sapphire-segmented-control__glider--with-transition{transition:width var(--sapphire-segmented-control-time-transition) ease-in-out,left var(--sapphire-segmented-control-time-transition) ease-in-out}.sapphire-segmented-control__button{font-family:var(--sapphire-segmented-control-font-name);font-weight:var(--sapphire-segmented-control-font-weight);font-size:var(--sapphire-segmented-control-size-font-m);-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-segmented-control-size-min-width-tab);padding:0 var(--sapphire-segmented-control-size-spacing-tab-horizontal);background-color:transparent;color:var(--sapphire-segmented-control-color-content-inactive);cursor:pointer;outline:none;z-index:2;display:flex;align-items:center;justify-content:center;position:relative;transition:color var(--sapphire-segmented-control-time-transition) ease-in-out}.sapphire-segmented-control__button--active{color:var(--sapphire-segmented-control-color-content-active)}.sapphire-segmented-control__button--disabled{opacity:var(--sapphire-segmented-control-opacity-disabled);cursor:not-allowed}.sapphire-segmented-control.focus-visible:focus-within .sapphire-segmented-control__glider{outline:var(--sapphire-segmented-control-size-focus-ring) solid var(--sapphire-segmented-control-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-segmented-control-size-focus-ring) solid var(--sapphire-segmented-control-color-focus-ring);border-radius:var(--sapphire-segmented-control-size-radius)}.sapphire-segmented-control.focus-visible:focus-within.sapphire-segmented-control--manual-keyboard-activation .sapphire-segmented-control__glider{outline:none}.sapphire-segmented-control--large{height:var(--sapphire-segmented-control-size-height-l)}.sapphire-segmented-control--large .sapphire-segmented-control__button{font-size:var(--sapphire-segmented-control-size-font-l)}.sapphire-segmented-control--small{height:var(--sapphire-segmented-control-size-height-s)}.sapphire-segmented-control--small .sapphire-segmented-control__button{font-size:var(--sapphire-segmented-control-size-font-s)}.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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }] });
5373
+ 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--large]=\"size === 'large'\"\n [class.sapphire-segmented-control--small]=\"size === 'small'\"\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-segmented-control-size-height-m)}.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-segmented-control-color-tray);border-radius:var(--sapphire-segmented-control-size-radius);padding:var(--sapphire-segmented-control-size-spacing-tray);box-sizing:border-box}.sapphire-segmented-control__glider{position:absolute;top:var(--sapphire-segmented-control-size-spacing-tray);left:0;height:calc(100% - var(--sapphire-segmented-control-size-spacing-tray) * 2);display:block;background-color:var(--sapphire-segmented-control-color-glider);box-shadow:var(--sapphire-segmented-control-shadow-glider);box-sizing:border-box;z-index:1;border-radius:var(--sapphire-segmented-control-size-radius)}.sapphire-segmented-control__glider--with-transition{transition:width var(--sapphire-segmented-control-time-transition) ease-in-out,left var(--sapphire-segmented-control-time-transition) ease-in-out}.sapphire-segmented-control__button{font-family:var(--sapphire-segmented-control-font-name);font-weight:var(--sapphire-segmented-control-font-weight);font-size:var(--sapphire-segmented-control-size-font-m);-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-segmented-control-size-min-width-tab);padding:0 var(--sapphire-segmented-control-size-spacing-tab-horizontal);background-color:transparent;color:var(--sapphire-segmented-control-color-content-inactive);cursor:pointer;outline:none;z-index:2;display:flex;align-items:center;justify-content:center;position:relative;transition:color var(--sapphire-segmented-control-time-transition) ease-in-out}.sapphire-segmented-control__button--active{color:var(--sapphire-segmented-control-color-content-active)}.sapphire-segmented-control__button--disabled{opacity:var(--sapphire-segmented-control-opacity-disabled);cursor:not-allowed}.sapphire-segmented-control.focus-visible:focus-within .sapphire-segmented-control__glider{outline:var(--sapphire-segmented-control-size-focus-ring) solid var(--sapphire-segmented-control-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-segmented-control-size-focus-ring) solid var(--sapphire-segmented-control-color-focus-ring);border-radius:var(--sapphire-segmented-control-size-radius)}.sapphire-segmented-control.focus-visible:focus-within.sapphire-segmented-control--manual-keyboard-activation .sapphire-segmented-control__glider{outline:none}.sapphire-segmented-control--large{height:var(--sapphire-segmented-control-size-height-l)}.sapphire-segmented-control--large .sapphire-segmented-control__button{font-size:var(--sapphire-segmented-control-size-font-l)}.sapphire-segmented-control--small{height:var(--sapphire-segmented-control-size-height-s)}.sapphire-segmented-control--small .sapphire-segmented-control__button{font-size:var(--sapphire-segmented-control-size-font-s)}.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$1.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }] });
5350
5374
  __decorate([
5351
5375
  CoerceBoolean
5352
5376
  ], SegmentedTabsComponent.prototype, "disabled", void 0);
@@ -5720,7 +5744,7 @@ class TooltipDirective {
5720
5744
  };
5721
5745
  }
5722
5746
  }
5723
- TooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TooltipDirective, deps: [{ token: i1$3.Overlay }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
5747
+ TooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TooltipDirective, deps: [{ token: i1$2.Overlay }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
5724
5748
  TooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: TooltipDirective, isStandalone: true, selector: "[spTooltip]", inputs: { tooltipText: ["spTooltip", "tooltipText"], delay: ["spTooltipDelay", "delay"], placement: ["spTooltipPlacement", "placement"] }, host: { listeners: { "mouseenter": "warmup()", "mouseleave": "hide()", "click": "hide(true)", "document:keydown.escape": "handleGlobalEscapeKeyEvent()", "focus": "onFocus($event)", "blur": "onBlur($event)" } }, exportAs: ["spTooltip"], ngImport: i0 });
5725
5749
  __decorate([
5726
5750
  AutoId()
@@ -5739,7 +5763,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
5739
5763
  },
5740
5764
  exportAs: 'spTooltip',
5741
5765
  }]
5742
- }], ctorParameters: function () { return [{ type: i1$3.Overlay }, { type: i0.ElementRef }]; }, propDecorators: { id: [], tooltipText: [{
5766
+ }], ctorParameters: function () { return [{ type: i1$2.Overlay }, { type: i0.ElementRef }]; }, propDecorators: { id: [], tooltipText: [{
5743
5767
  type: Input,
5744
5768
  args: ['spTooltip']
5745
5769
  }], delay: [{
@@ -5828,7 +5852,7 @@ class TableHeadCellComponent {
5828
5852
  }
5829
5853
  }
5830
5854
  TableHeadCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TableHeadCellComponent, deps: [{ token: forwardRef(() => TableComponent) }, { token: TableSortHeaderDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
5831
- TableHeadCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: TableHeadCellComponent, selector: "th[sp-table-th]", inputs: { align: "align", width: "width", minWidth: "minWidth", maxWidth: "maxWidth", selectionCell: "selectionCell" }, host: { properties: { "class.sapphire-table__headCell": "!selectionCell", "class.sapphire-table__cell": "selectionCell", "class.sapphire-table__cell--alignLeft": "align === 'left'", "class.sapphire-table__cell--alignCenter": "align === 'center'", "class.sapphire-table__cell--alignRight": "align === 'right'", "class.sapphire-table__selectionCell": "selectionCell", "style.width": "this.width", "style.min-width": "this.minWidth", "style.max-width": "this.maxWidth" } }, hostDirectives: [{ directive: UseComponentStyles }], ngImport: i0, template: "<div\n *ngIf=\"!selectionCell\"\n class=\"sapphire-table__headCell_container\"\n _spUseComponentStyles\n>\n <span *ngIf=\"tableSortHeader && align === 'right'\">\n <ng-container *ngTemplateOutlet=\"sortIcon\"></ng-container>\n </span>\n <span [spTruncatedWithTooltip]=\"cellOverflow === 'truncate'\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </span>\n <span *ngIf=\"tableSortHeader && align !== 'right'\">\n <ng-container *ngTemplateOutlet=\"sortIcon\"></ng-container>\n </span>\n</div>\n<ng-container *ngIf=\"selectionCell\"\n ><ng-container *ngTemplateOutlet=\"content\"></ng-container\n></ng-container>\n\n<ng-template #content><ng-content></ng-content></ng-template>\n\n<ng-template #sortIcon>\n <span\n *ngIf=\"tableSortHeader\"\n aria-hidden=\"true\"\n [class.sapphire-table-sortableIcon]=\"\n tableSortHeader.tableSort.sortDescriptor.column !==\n tableSortHeader.sortHeader\n \"\n [class.sapphire-table-sortedIcon]=\"\n tableSortHeader.tableSort.sortDescriptor.column ===\n tableSortHeader.sortHeader\n \"\n _spUseComponentStyles\n >\n <sp-icon\n [name]=\"\n tableSortHeader.tableSort.sortDescriptor.column ===\n tableSortHeader.sortHeader &&\n tableSortHeader.tableSort.sortDescriptor.direction === 'descending'\n ? 'caretDownMedium'\n : 'caretUpMedium'\n \"\n ></sp-icon>\n </span>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "directive", type: TruncatedWithTooltipDirective, selector: "[spTruncatedWithTooltip]", inputs: ["spTruncatedWithTooltip"] }, { kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
5855
+ TableHeadCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: TableHeadCellComponent, selector: "th[sp-table-th]", inputs: { align: "align", width: "width", minWidth: "minWidth", maxWidth: "maxWidth", selectionCell: "selectionCell" }, host: { properties: { "class.sapphire-table__headCell": "!selectionCell", "class.sapphire-table__cell": "selectionCell", "class.sapphire-table__cell--alignLeft": "align === 'left'", "class.sapphire-table__cell--alignCenter": "align === 'center'", "class.sapphire-table__cell--alignRight": "align === 'right'", "class.sapphire-table__selectionCell": "selectionCell", "style.width": "this.width", "style.min-width": "this.minWidth", "style.max-width": "this.maxWidth" } }, hostDirectives: [{ directive: UseComponentStyles }], ngImport: i0, template: "<div\n *ngIf=\"!selectionCell\"\n class=\"sapphire-table__headCell_container\"\n _spUseComponentStyles\n>\n <span *ngIf=\"tableSortHeader && align === 'right'\">\n <ng-container *ngTemplateOutlet=\"sortIcon\"></ng-container>\n </span>\n <span [spTruncatedWithTooltip]=\"cellOverflow === 'truncate'\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </span>\n <span *ngIf=\"tableSortHeader && align !== 'right'\">\n <ng-container *ngTemplateOutlet=\"sortIcon\"></ng-container>\n </span>\n</div>\n<ng-container *ngIf=\"selectionCell\"\n ><ng-container *ngTemplateOutlet=\"content\"></ng-container\n></ng-container>\n\n<ng-template #content><ng-content></ng-content></ng-template>\n\n<ng-template #sortIcon>\n <span\n *ngIf=\"tableSortHeader\"\n aria-hidden=\"true\"\n [class.sapphire-table-sortableIcon]=\"\n tableSortHeader.tableSort.sortDescriptor.column !==\n tableSortHeader.sortHeader\n \"\n [class.sapphire-table-sortedIcon]=\"\n tableSortHeader.tableSort.sortDescriptor.column ===\n tableSortHeader.sortHeader\n \"\n _spUseComponentStyles\n >\n <sp-icon\n [name]=\"\n tableSortHeader.tableSort.sortDescriptor.column ===\n tableSortHeader.sortHeader &&\n tableSortHeader.tableSort.sortDescriptor.direction === 'descending'\n ? 'caretDownMedium'\n : 'caretUpMedium'\n \"\n ></sp-icon>\n </span>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "directive", type: TruncatedWithTooltipDirective, selector: "[spTruncatedWithTooltip]", inputs: ["spTruncatedWithTooltip"] }, { kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
5832
5856
  __decorate([
5833
5857
  CoerceBoolean
5834
5858
  ], TableHeadCellComponent.prototype, "selectionCell", void 0);
@@ -6109,7 +6133,7 @@ TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version
6109
6133
  <table *ngIf="!table" class="sapphire-table__table">
6110
6134
  <ng-content></ng-content>
6111
6135
  </table>
6112
- `, isInline: true, styles: [".sapphire-table{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;justify-content:space-between}.sapphire-table--overflow{overflow:auto}.sapphire-table__table{border-collapse:collapse;border-spacing:0;background-color:var(--sapphire-table-color-background-table);width:100%}.sapphire-table-sortedIcon,.sapphire-table-sortableIcon{display:inline-flex;visibility:hidden;vertical-align:top}.sapphire-table__head{top:0;z-index:2;line-height:var(--sapphire-table-size-line-height-cell-default);background-color:var(--sapphire-table-color-background-head)}.sapphire-table__head--sticky{position:sticky}.sapphire-table__cell--alignLeft{text-align:left}.sapphire-table__cell--alignCenter{text-align:center}.sapphire-table__cell--alignRight{text-align:end}.sapphire-table__headCell{color:var(--sapphire-table-color-content-cell);box-sizing:border-box;font-size:var(--sapphire-table-size-font-head-default);font-family:var(--sapphire-table-font-name);font-weight:var(--sapphire-table-font-weight-head);line-height:var(--sapphire-table-size-line-height-cell-default);padding:var(--sapphire-table-size-spacing-head-cell-vertical-default) var(--sapphire-table-size-spacing-head-cell-horizontal-default);vertical-align:top}.sapphire-table__headCell_container{padding:var(--sapphire-table-size-spacing-head-cell-container-vertical) var(--sapphire-table-size-spacing-head-cell-container-horizontal);display:inline-flex;align-items:center;box-sizing:border-box;width:100%}.sapphire-table__cell--alignRight .sapphire-table__headCell_container{justify-content:flex-end}.sapphire-table__cell--alignLeft .sapphire-table__headCell_container{justify-content:flex-start}.sapphire-table__cell--alignCenter .sapphire-table__headCell_container{justify-content:center}.sapphire-table__row,.sapphire-table__cell,.sapphire-table__headCell,.sapphire-table__selectionCell{outline:none;position:relative;z-index:1}.sapphire-table__headCell.is-focus .sapphire-table__headCell_container,.sapphire-table__headCell:not(.js-focus):focus-visible .sapphire-table__headCell_container,.sapphire-table__cell.is-focus,.sapphire-table__cell:not(.js-focus):focus-visible,.sapphire-table__selectionCell.is-focus,.sapphire-table__selectionCell:not(.js-focus):focus-visible,.sapphire-table__row.is-focus,.sapphire-table__row:not(.js-focus):focus-visible{outline:none;border-radius:var(--sapphire-table-size-radius-focus);box-shadow:inset 0 0 0 var(--sapphire-table-size-width-border-focus) var(--sapphire-table-color-border-focus)}.sapphire-table__headCell.is-focus .sapphire-table__headCell_container,.sapphire-table__headCell:not(.js-focus):focus-visible .sapphire-table__headCell_container{border-radius:var(--sapphire-table-size-radius-focus)}.sapphire-table__headCell.sapphire-table__headCell--sortable.is-hover .sapphire-table__headCell_container,.sapphire-table__headCell.sapphire-table__headCell--sortable:not(.js-hover):hover .sapphire-table__headCell_container{background-color:var(--sapphire-table-color-background-hover);border-radius:var(--sapphire-table-size-radius-hover)}.sapphire-table__headCell.sapphire-table__headCell--sortable{cursor:pointer}.sapphire-table__headCell--sortable:not(sapphire-table__headCell--sorted):hover .sapphire-table-sortableIcon{visibility:visible}.sapphire-table__headCell--sorted .sapphire-table-sortedIcon{visibility:visible;padding-left:var(--sapphire-table-size-spacing-icon-left-default)}.sapphire-table__headCell .sapphire-table-sortedIcon,.sapphire-table__headCell .sapphire-table-sortableIcon{padding-left:var(--sapphire-table-size-spacing-icon-left-default)}.sapphire-table__cell--alignRight .sapphire-table-sortedIcon,.sapphire-table__cell--alignRight .sapphire-table-sortableIcon{padding-right:var(--sapphire-table-size-spacing-icon-left-default)}.sapphire-table__headCell__text,.sapphire-table__headCell__icon{vertical-align:top;display:inline-block}.sapphire-table__body{position:relative;overflow:auto}.sapphire-table__cell{box-sizing:border-box;color:var(--sapphire-table-color-content-cell);font-family:var(--sapphire-table-font-name);font-weight:var(--sapphire-table-font-weight-data)}.sapphire-table__cell--ellipsed,.sapphire-table__headCell_content--ellipsed{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sapphire-table__cell,.sapphire-table__selectionCell{font-size:var(--sapphire-table-size-font-data-default);line-height:var(--sapphire-table-size-line-height-cell-default);padding:var(--sapphire-table-size-spacing-cell-vertical-default) var(--sapphire-table-size-spacing-cell-horizontal-default)}.sapphire-table__selectionCell{line-height:0;padding-left:var(--sapphire-table-size-spacing-cell-horizontal-end);width:var(--sapphire-table-size-width-selection-cell)}.sapphire-table__selectionCell:not(:first-child){padding-left:var(--sapphire-table-size-spacing-cell-horizontal-default)}.sapphire-table__cell:first-child{padding-left:var(--sapphire-table-size-spacing-cell-horizontal-end)}.sapphire-table__cell:last-child{padding-right:var(--sapphire-table-size-spacing-cell-horizontal-end)}.sapphire-table__headCell:first-child{padding-left:var(--sapphire-table-size-spacing-head-cell-horizontal-end)}.sapphire-table__headCell:last-child{padding-right:var(--sapphire-table-size-spacing-head-cell-horizontal-end)}.sapphire-table__row{position:relative}.sapphire-table__row--active{background-color:var(--sapphire-table-color-background-active)!important}.sapphire-table__row--selected{background-color:var(--sapphire-table-color-background-selected)}.sapphire-table__row:not(.is-focus,:not(.js-focus):focus-visible,.sapphire-table__row--expanded){box-shadow:inset 0 -1px 0 0 var(--sapphire-table-color-border-separator)}.sapphire-table__row-expanded-view{box-shadow:inset 0 -1px 0 0 var(--sapphire-table-color-border-separator)}.sapphire-table__row-expand-button{display:inline-flex;transition:transform ease-in-out var(--sapphire-table-time-transition-arrow);margin-left:var(--sapphire-table-size-spacing-icon-left-default)}.sapphire-table td:has(.sapphire-table__row-expand-button){width:0}.sapphire-table__row--expanded .sapphire-table__row-expand-button{transform:rotate(180deg)}.sapphire-table--without-last-divider .sapphire-table__row:not(.is-focus,:not(.js-focus):focus-visible):last-child{box-shadow:none}.sapphire-table--interactive .sapphire-table__row,.sapphire-table__row--interactive{cursor:default}.sapphire-table--interactive .sapphire-table__row.is-hover,.sapphire-table__row--interactive.is-hover,.sapphire-table--interactive .sapphire-table__row:not(.js-hover):hover,.sapphire-table__row--interactive:not(.js-hover):hover{background-color:var(--sapphire-table-color-background-hover);cursor:pointer}.sapphire-table__row--highlighted{background-color:var(--sapphire-table-color-background-hover)}.sapphire-table__row--highlighted>*:first-child{box-shadow:inset var(--sapphire-table-size-width-highlight) 0 0 0 var(--sapphire-table-color-background-highlight)}.sapphire-table__selection-action-bar{display:flex;align-items:center;justify-content:space-between;padding:var(--sapphire-table-size-spacing-selection-action-bar-vertical) var(--sapphire-table-size-spacing-selection-action-bar-horizontal);background-color:var(--sapphire-table-color-background-selection-action-bar)}.sapphire-table__footer{position:relative;z-index:2}.sapphire-table__footer--sticky{position:sticky;bottom:0;left:0}sp-table{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
6136
+ `, isInline: true, styles: [".sapphire-table{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;justify-content:space-between}.sapphire-table--overflow{overflow:auto}.sapphire-table__table{border-collapse:collapse;border-spacing:0;background-color:var(--sapphire-table-color-background-table);width:100%}.sapphire-table-sortedIcon,.sapphire-table-sortableIcon{display:inline-flex;visibility:hidden;vertical-align:top}.sapphire-table__head{top:0;z-index:2;line-height:var(--sapphire-table-size-line-height-cell-default);background-color:var(--sapphire-table-color-background-head)}.sapphire-table__head--sticky{position:sticky}.sapphire-table__cell--alignLeft{text-align:left}.sapphire-table__cell--alignCenter{text-align:center}.sapphire-table__cell--alignRight{text-align:end}.sapphire-table__headCell{color:var(--sapphire-table-color-content-cell);box-sizing:border-box;font-size:var(--sapphire-table-size-font-head-default);font-family:var(--sapphire-table-font-name);font-weight:var(--sapphire-table-font-weight-head);line-height:var(--sapphire-table-size-line-height-cell-default);padding:var(--sapphire-table-size-spacing-head-cell-vertical-default) var(--sapphire-table-size-spacing-head-cell-horizontal-default);vertical-align:top}.sapphire-table__headCell_container{padding:var(--sapphire-table-size-spacing-head-cell-container-vertical) var(--sapphire-table-size-spacing-head-cell-container-horizontal);display:inline-flex;align-items:center;box-sizing:border-box;width:100%}.sapphire-table__cell--alignRight .sapphire-table__headCell_container{justify-content:flex-end}.sapphire-table__cell--alignLeft .sapphire-table__headCell_container{justify-content:flex-start}.sapphire-table__cell--alignCenter .sapphire-table__headCell_container{justify-content:center}.sapphire-table__row,.sapphire-table__cell,.sapphire-table__headCell,.sapphire-table__selectionCell{outline:none;position:relative;z-index:1}.sapphire-table__headCell.is-focus .sapphire-table__headCell_container,.sapphire-table__headCell:not(.js-focus):focus-visible .sapphire-table__headCell_container,.sapphire-table__cell.is-focus,.sapphire-table__cell:not(.js-focus):focus-visible,.sapphire-table__selectionCell.is-focus,.sapphire-table__selectionCell:not(.js-focus):focus-visible,.sapphire-table__row.is-focus,.sapphire-table__row:not(.js-focus):focus-visible{outline:none;border-radius:var(--sapphire-table-size-radius-focus);box-shadow:inset 0 0 0 var(--sapphire-table-size-width-border-focus) var(--sapphire-table-color-border-focus)}.sapphire-table__headCell.is-focus .sapphire-table__headCell_container,.sapphire-table__headCell:not(.js-focus):focus-visible .sapphire-table__headCell_container{border-radius:var(--sapphire-table-size-radius-focus)}.sapphire-table__headCell.sapphire-table__headCell--sortable.is-hover .sapphire-table__headCell_container,.sapphire-table__headCell.sapphire-table__headCell--sortable:not(.js-hover):hover .sapphire-table__headCell_container{background-color:var(--sapphire-table-color-background-hover);border-radius:var(--sapphire-table-size-radius-hover)}.sapphire-table__headCell.sapphire-table__headCell--sortable{cursor:pointer}.sapphire-table__headCell--sortable:not(sapphire-table__headCell--sorted):hover .sapphire-table-sortableIcon{visibility:visible}.sapphire-table__headCell--sorted .sapphire-table-sortedIcon{visibility:visible;padding-left:var(--sapphire-table-size-spacing-icon-left-default)}.sapphire-table__headCell .sapphire-table-sortedIcon,.sapphire-table__headCell .sapphire-table-sortableIcon{padding-left:var(--sapphire-table-size-spacing-icon-left-default)}.sapphire-table__cell--alignRight .sapphire-table-sortedIcon,.sapphire-table__cell--alignRight .sapphire-table-sortableIcon{padding-right:var(--sapphire-table-size-spacing-icon-left-default)}.sapphire-table__headCell__text,.sapphire-table__headCell__icon{vertical-align:top;display:inline-block}.sapphire-table__body{position:relative;overflow:auto}.sapphire-table__cell{box-sizing:border-box;color:var(--sapphire-table-color-content-cell);font-family:var(--sapphire-table-font-name);font-weight:var(--sapphire-table-font-weight-data)}.sapphire-table__cell--ellipsed,.sapphire-table__headCell_content--ellipsed{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sapphire-table__cell,.sapphire-table__selectionCell{font-size:var(--sapphire-table-size-font-data-default);line-height:var(--sapphire-table-size-line-height-cell-default);padding:var(--sapphire-table-size-spacing-cell-vertical-default) var(--sapphire-table-size-spacing-cell-horizontal-default)}.sapphire-table__selectionCell{line-height:0;padding-left:var(--sapphire-table-size-spacing-cell-horizontal-end);width:var(--sapphire-table-size-width-selection-cell)}.sapphire-table__selectionCell:not(:first-child){padding-left:var(--sapphire-table-size-spacing-cell-horizontal-default)}.sapphire-table__cell:first-child{padding-left:var(--sapphire-table-size-spacing-cell-horizontal-end)}.sapphire-table__cell:last-child{padding-right:var(--sapphire-table-size-spacing-cell-horizontal-end)}.sapphire-table__headCell:first-child{padding-left:var(--sapphire-table-size-spacing-head-cell-horizontal-end)}.sapphire-table__headCell:last-child{padding-right:var(--sapphire-table-size-spacing-head-cell-horizontal-end)}.sapphire-table__row{position:relative}.sapphire-table__row--active{background-color:var(--sapphire-table-color-background-active)!important}.sapphire-table__row--selected{background-color:var(--sapphire-table-color-background-selected)}.sapphire-table__row:not(.is-focus,:not(.js-focus):focus-visible,.sapphire-table__row--expanded){box-shadow:inset 0 -1px 0 0 var(--sapphire-table-color-border-separator)}.sapphire-table__row-expanded-view{box-shadow:inset 0 -1px 0 0 var(--sapphire-table-color-border-separator)}.sapphire-table__row-expand-button{display:inline-flex;transition:transform ease-in-out var(--sapphire-table-time-transition-arrow);margin-left:var(--sapphire-table-size-spacing-icon-left-default)}.sapphire-table td:has(.sapphire-table__row-expand-button){width:0}.sapphire-table__row--expanded .sapphire-table__row-expand-button{transform:rotate(180deg)}.sapphire-table--without-last-divider .sapphire-table__row:not(.is-focus,:not(.js-focus):focus-visible):last-child{box-shadow:none}.sapphire-table--interactive .sapphire-table__row,.sapphire-table__row--interactive{cursor:default}.sapphire-table--interactive .sapphire-table__row.is-hover,.sapphire-table__row--interactive.is-hover,.sapphire-table--interactive .sapphire-table__row:not(.js-hover):hover,.sapphire-table__row--interactive:not(.js-hover):hover{background-color:var(--sapphire-table-color-background-hover);cursor:pointer}.sapphire-table__row--highlighted{background-color:var(--sapphire-table-color-background-hover)}.sapphire-table__row--highlighted>*:first-child{box-shadow:inset var(--sapphire-table-size-width-highlight) 0 0 0 var(--sapphire-table-color-background-highlight)}.sapphire-table__selection-action-bar{display:flex;align-items:center;justify-content:space-between;padding:var(--sapphire-table-size-spacing-selection-action-bar-vertical) var(--sapphire-table-size-spacing-selection-action-bar-horizontal);background-color:var(--sapphire-table-color-background-selection-action-bar)}.sapphire-table__footer{position:relative;z-index:2}.sapphire-table__footer--sticky{position:sticky;bottom:0;left:0}sp-table{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
6113
6137
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TableComponent, decorators: [{
6114
6138
  type: Component,
6115
6139
  args: [{ selector: 'sp-table', template: `
@@ -6267,7 +6291,7 @@ class NotificationBadgeComponent {
6267
6291
  }
6268
6292
  }
6269
6293
  NotificationBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NotificationBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6270
- NotificationBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: NotificationBadgeComponent, selector: "sp-notification-badge", inputs: { containerType: "containerType", size: "size", variant: "variant", count: "count", show: "show", animate: "animate" }, ngImport: i0, template: "<span\n class=\"sapphire-notification-badge-container\"\n [class.sapphire-notification-badge-container--rectangle]=\"\n containerType === 'rectangle'\n \"\n>\n <ng-content></ng-content>\n <span\n role=\"status\"\n class=\"sapphire-notification-badge\"\n [class.sapphire-notification-badge--large]=\"size === 'large'\"\n [class.sapphire-notification-badge--medium]=\"size === 'medium'\"\n [class.sapphire-notification-badge--small]=\"size === 'small'\"\n [class.sapphire-notification-badge--primary]=\"variant === 'primary'\"\n [class.sapphire-notification-badge--secondary]=\"variant === 'secondary'\"\n [class.sapphire-notification-badge--pop-in]=\"show && animate\"\n [class.sapphire-notification-badge--pop-out]=\"!show && animate\"\n *ngIf=\"show || animate\"\n >\n {{\n size !== 'small'\n ? count && count.toString().length > 2\n ? '99+'\n : count\n : ''\n }}\n </span>\n</span>\n", styles: ["@keyframes pop-in{0%{transform:scale(0) translate(50%,-50%);opacity:0}25%{opacity:.1}to{transform:scale(1) translate(50%,-50%)}}@keyframes pop-out{0%{transform:scale(1) translate(50%,-50%)}75%{opacity:.1}to{transform:scale(0) translate(50%,-50%);opacity:0;display:none}}.sapphire-notification-badge{display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--sapphire-notification-badge-color-content-default);font-family:var(--sapphire-notification-badge-font-name);font-weight:var(--sapphire-notification-badge-font-weight);box-sizing:border-box;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-notification-badge--pop-in{animation:pop-in var(--sapphire-notification-badge-time-transition) cubic-bezier(.55,-.49,.39,1.49)}.sapphire-notification-badge--pop-out{animation:pop-out var(--sapphire-notification-badge-time-transition) forwards}.sapphire-notification-badge--large{height:var(--sapphire-notification-badge-size-height-l);border-radius:var(--sapphire-notification-badge-size-radius-l);padding:var(--sapphire-notification-badge-size-spacing-l-vertical) var(--sapphire-notification-badge-size-spacing-l-horizontal);font-size:var(--sapphire-notification-badge-size-font-primary)}.sapphire-notification-badge--medium{height:var(--sapphire-notification-badge-size-height-m);border-radius:var(--sapphire-notification-badge-size-radius-m);padding:0 var(--sapphire-notification-badge-size-spacing-m-horizontal);font-size:var(--sapphire-notification-badge-size-font-secondary);min-width:var(--sapphire-notification-badge-size-width-m);box-sizing:border-box}.sapphire-notification-badge--small{min-width:var(--sapphire-notification-badge-size-width-s);height:var(--sapphire-notification-badge-size-height-s);border-radius:var(--sapphire-notification-badge-size-radius-s)}.sapphire-notification-badge--primary{background-color:var(--sapphire-notification-badge-color-background-primary)}.sapphire-notification-badge--secondary{background-color:var(--sapphire-notification-badge-color-background-secondary)}.sapphire-notification-badge-container{position:relative;display:inline-block;width:max-content}.sapphire-notification-badge-container .sapphire-notification-badge{position:absolute;top:14%;right:14%;transform:scale(1) translate(50%,-50%);transform-origin:100% 0;pointer-events:none}.sapphire-notification-badge-container--rectangle .sapphire-notification-badge{position:absolute;top:0;right:0;transform:scale(1) translate(50%,-50%);transform-origin:100% 0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6294
+ NotificationBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: NotificationBadgeComponent, selector: "sp-notification-badge", inputs: { containerType: "containerType", size: "size", variant: "variant", count: "count", show: "show", animate: "animate" }, ngImport: i0, template: "<span\n class=\"sapphire-notification-badge-container\"\n [class.sapphire-notification-badge-container--rectangle]=\"\n containerType === 'rectangle'\n \"\n>\n <ng-content></ng-content>\n <span\n role=\"status\"\n class=\"sapphire-notification-badge\"\n [class.sapphire-notification-badge--large]=\"size === 'large'\"\n [class.sapphire-notification-badge--medium]=\"size === 'medium'\"\n [class.sapphire-notification-badge--small]=\"size === 'small'\"\n [class.sapphire-notification-badge--primary]=\"variant === 'primary'\"\n [class.sapphire-notification-badge--secondary]=\"variant === 'secondary'\"\n [class.sapphire-notification-badge--pop-in]=\"show && animate\"\n [class.sapphire-notification-badge--pop-out]=\"!show && animate\"\n *ngIf=\"show || animate\"\n >\n {{\n size !== 'small'\n ? count && count.toString().length > 2\n ? '99+'\n : count\n : ''\n }}\n </span>\n</span>\n", styles: ["@keyframes pop-in{0%{transform:scale(0) translate(50%,-50%);opacity:0}25%{opacity:.1}to{transform:scale(1) translate(50%,-50%)}}@keyframes pop-out{0%{transform:scale(1) translate(50%,-50%)}75%{opacity:.1}to{transform:scale(0) translate(50%,-50%);opacity:0;display:none}}.sapphire-notification-badge{display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--sapphire-notification-badge-color-content-default);font-family:var(--sapphire-notification-badge-font-name);font-weight:var(--sapphire-notification-badge-font-weight);box-sizing:border-box;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-notification-badge--pop-in{animation:pop-in var(--sapphire-notification-badge-time-transition) cubic-bezier(.55,-.49,.39,1.49)}.sapphire-notification-badge--pop-out{animation:pop-out var(--sapphire-notification-badge-time-transition) forwards}.sapphire-notification-badge--large{height:var(--sapphire-notification-badge-size-height-l);border-radius:var(--sapphire-notification-badge-size-radius-l);padding:var(--sapphire-notification-badge-size-spacing-l-vertical) var(--sapphire-notification-badge-size-spacing-l-horizontal);font-size:var(--sapphire-notification-badge-size-font-primary)}.sapphire-notification-badge--medium{height:var(--sapphire-notification-badge-size-height-m);border-radius:var(--sapphire-notification-badge-size-radius-m);padding:0 var(--sapphire-notification-badge-size-spacing-m-horizontal);font-size:var(--sapphire-notification-badge-size-font-secondary);min-width:var(--sapphire-notification-badge-size-width-m);box-sizing:border-box}.sapphire-notification-badge--small{min-width:var(--sapphire-notification-badge-size-width-s);height:var(--sapphire-notification-badge-size-height-s);border-radius:var(--sapphire-notification-badge-size-radius-s)}.sapphire-notification-badge--primary{background-color:var(--sapphire-notification-badge-color-background-primary)}.sapphire-notification-badge--secondary{background-color:var(--sapphire-notification-badge-color-background-secondary)}.sapphire-notification-badge-container{position:relative;display:inline-block;width:max-content}.sapphire-notification-badge-container .sapphire-notification-badge{position:absolute;top:14%;right:14%;transform:scale(1) translate(50%,-50%);transform-origin:100% 0;pointer-events:none}.sapphire-notification-badge-container--rectangle .sapphire-notification-badge{position:absolute;top:0;right:0;transform:scale(1) translate(50%,-50%);transform-origin:100% 0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6271
6295
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NotificationBadgeComponent, decorators: [{
6272
6296
  type: Component,
6273
6297
  args: [{ selector: 'sp-notification-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n class=\"sapphire-notification-badge-container\"\n [class.sapphire-notification-badge-container--rectangle]=\"\n containerType === 'rectangle'\n \"\n>\n <ng-content></ng-content>\n <span\n role=\"status\"\n class=\"sapphire-notification-badge\"\n [class.sapphire-notification-badge--large]=\"size === 'large'\"\n [class.sapphire-notification-badge--medium]=\"size === 'medium'\"\n [class.sapphire-notification-badge--small]=\"size === 'small'\"\n [class.sapphire-notification-badge--primary]=\"variant === 'primary'\"\n [class.sapphire-notification-badge--secondary]=\"variant === 'secondary'\"\n [class.sapphire-notification-badge--pop-in]=\"show && animate\"\n [class.sapphire-notification-badge--pop-out]=\"!show && animate\"\n *ngIf=\"show || animate\"\n >\n {{\n size !== 'small'\n ? count && count.toString().length > 2\n ? '99+'\n : count\n : ''\n }}\n </span>\n</span>\n", styles: ["@keyframes pop-in{0%{transform:scale(0) translate(50%,-50%);opacity:0}25%{opacity:.1}to{transform:scale(1) translate(50%,-50%)}}@keyframes pop-out{0%{transform:scale(1) translate(50%,-50%)}75%{opacity:.1}to{transform:scale(0) translate(50%,-50%);opacity:0;display:none}}.sapphire-notification-badge{display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--sapphire-notification-badge-color-content-default);font-family:var(--sapphire-notification-badge-font-name);font-weight:var(--sapphire-notification-badge-font-weight);box-sizing:border-box;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-notification-badge--pop-in{animation:pop-in var(--sapphire-notification-badge-time-transition) cubic-bezier(.55,-.49,.39,1.49)}.sapphire-notification-badge--pop-out{animation:pop-out var(--sapphire-notification-badge-time-transition) forwards}.sapphire-notification-badge--large{height:var(--sapphire-notification-badge-size-height-l);border-radius:var(--sapphire-notification-badge-size-radius-l);padding:var(--sapphire-notification-badge-size-spacing-l-vertical) var(--sapphire-notification-badge-size-spacing-l-horizontal);font-size:var(--sapphire-notification-badge-size-font-primary)}.sapphire-notification-badge--medium{height:var(--sapphire-notification-badge-size-height-m);border-radius:var(--sapphire-notification-badge-size-radius-m);padding:0 var(--sapphire-notification-badge-size-spacing-m-horizontal);font-size:var(--sapphire-notification-badge-size-font-secondary);min-width:var(--sapphire-notification-badge-size-width-m);box-sizing:border-box}.sapphire-notification-badge--small{min-width:var(--sapphire-notification-badge-size-width-s);height:var(--sapphire-notification-badge-size-height-s);border-radius:var(--sapphire-notification-badge-size-radius-s)}.sapphire-notification-badge--primary{background-color:var(--sapphire-notification-badge-color-background-primary)}.sapphire-notification-badge--secondary{background-color:var(--sapphire-notification-badge-color-background-secondary)}.sapphire-notification-badge-container{position:relative;display:inline-block;width:max-content}.sapphire-notification-badge-container .sapphire-notification-badge{position:absolute;top:14%;right:14%;transform:scale(1) translate(50%,-50%);transform-origin:100% 0;pointer-events:none}.sapphire-notification-badge-container--rectangle .sapphire-notification-badge{position:absolute;top:0;right:0;transform:scale(1) translate(50%,-50%);transform-origin:100% 0;pointer-events:none}\n"] }]
@@ -6706,11 +6730,11 @@ class ModalService {
6706
6730
  return this.open(componentOrTemplateRef, options, this.overlay.position().global().right());
6707
6731
  }
6708
6732
  }
6709
- 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 });
6733
+ ModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalService, deps: [{ token: i1$5.Dialog }, { token: i1$2.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
6710
6734
  ModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalService });
6711
6735
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalService, decorators: [{
6712
6736
  type: Injectable
6713
- }], ctorParameters: function () { return [{ type: i1$6.Dialog }, { type: i1$3.Overlay }]; } });
6737
+ }], ctorParameters: function () { return [{ type: i1$5.Dialog }, { type: i1$2.Overlay }]; } });
6714
6738
 
6715
6739
  /**
6716
6740
  * Monitors host element's **scrolled** and **scrollable** state.
@@ -6879,7 +6903,7 @@ class ModalCloseButtonDirective {
6879
6903
  this.dialogRef?.close();
6880
6904
  }
6881
6905
  }
6882
- ModalCloseButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalCloseButtonDirective, deps: [{ token: i1$6.DialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
6906
+ ModalCloseButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalCloseButtonDirective, deps: [{ token: i1$5.DialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
6883
6907
  ModalCloseButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: ModalCloseButtonDirective, isStandalone: true, host: { listeners: { "click": "close()" }, properties: { "attr.aria-label": "\"Dismiss\"" } }, ngImport: i0 });
6884
6908
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalCloseButtonDirective, decorators: [{
6885
6909
  type: Directive,
@@ -6889,7 +6913,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
6889
6913
  '[attr.aria-label]': '"Dismiss"', // TODO: i18n
6890
6914
  },
6891
6915
  }]
6892
- }], ctorParameters: function () { return [{ type: i1$6.DialogRef, decorators: [{
6916
+ }], ctorParameters: function () { return [{ type: i1$5.DialogRef, decorators: [{
6893
6917
  type: Optional
6894
6918
  }] }]; }, propDecorators: { close: [{
6895
6919
  type: HostListener,
@@ -6951,7 +6975,7 @@ class DialogHeaderComponent {
6951
6975
  }
6952
6976
  }
6953
6977
  DialogHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DialogHeaderComponent, deps: [{ token: forwardRef(() => DialogComponent) }], target: i0.ɵɵFactoryTarget.Component });
6954
- DialogHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: DialogHeaderComponent, selector: "sp-dialog-header", hostDirectives: [{ directive: DialogHeaderDirective, inputs: ["id", "id"] }], ngImport: i0, template: "<h4 sp-heading><ng-content></ng-content></h4>\n<div\n *ngIf=\"dialog.type === 'passive'\"\n class=\"sapphire-dialog-close-button-container\"\n>\n <button\n sp-icon-button\n variant=\"tertiary\"\n appearance=\"ghost\"\n size=\"large\"\n spDialogCloseButton\n >\n <sp-icon name=\"close\"></sp-icon>\n </button>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeadingComponent, selector: "h1[sp-heading],h2[sp-heading],h3[sp-heading],h4[sp-heading],h5[sp-heading],h6[sp-heading]", inputs: ["sp-heading", "fontVariant"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "component", type: IconButtonComponent, selector: "button[sp-icon-button], a[sp-icon-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "type"] }, { kind: "directive", type: DialogCloseButtonDirective, selector: "button[spDialogCloseButton]" }] });
6978
+ DialogHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: DialogHeaderComponent, selector: "sp-dialog-header", hostDirectives: [{ directive: DialogHeaderDirective, inputs: ["id", "id"] }], ngImport: i0, template: "<h4 sp-heading><ng-content></ng-content></h4>\n<div\n *ngIf=\"dialog.type === 'passive'\"\n class=\"sapphire-dialog-close-button-container\"\n>\n <button\n sp-icon-button\n variant=\"tertiary\"\n appearance=\"ghost\"\n size=\"large\"\n spDialogCloseButton\n >\n <sp-icon name=\"close\"></sp-icon>\n </button>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeadingComponent, selector: "h1[sp-heading],h2[sp-heading],h3[sp-heading],h4[sp-heading],h5[sp-heading],h6[sp-heading]", inputs: ["sp-heading", "fontVariant"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "component", type: IconButtonComponent, selector: "button[sp-icon-button], a[sp-icon-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "type"] }, { kind: "directive", type: DialogCloseButtonDirective, selector: "button[spDialogCloseButton]" }] });
6955
6979
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DialogHeaderComponent, decorators: [{
6956
6980
  type: Component,
6957
6981
  args: [{ selector: 'sp-dialog-header', hostDirectives: [{ directive: DialogHeaderDirective, inputs: ['id'] }], template: "<h4 sp-heading><ng-content></ng-content></h4>\n<div\n *ngIf=\"dialog.type === 'passive'\"\n class=\"sapphire-dialog-close-button-container\"\n>\n <button\n sp-icon-button\n variant=\"tertiary\"\n appearance=\"ghost\"\n size=\"large\"\n spDialogCloseButton\n >\n <sp-icon name=\"close\"></sp-icon>\n </button>\n</div>\n" }]
@@ -7019,7 +7043,7 @@ class ModalBaseComponent {
7019
7043
  this.dialogRef.immediateClose();
7020
7044
  }
7021
7045
  }
7022
- 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 });
7046
+ 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 });
7023
7047
  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" } }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
7024
7048
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalBaseComponent, decorators: [{
7025
7049
  type: Component,
@@ -7034,7 +7058,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
7034
7058
  '[attr.role]': 'null',
7035
7059
  },
7036
7060
  }]
7037
- }], ctorParameters: function () { return [{ type: i1$6.DialogRef }]; }, propDecorators: { ariaLabel: [{
7061
+ }], ctorParameters: function () { return [{ type: i1$5.DialogRef }]; }, propDecorators: { ariaLabel: [{
7038
7062
  type: Input,
7039
7063
  args: ['aria-label']
7040
7064
  }], ariaLabelledBy: [{
@@ -7075,8 +7099,8 @@ class DialogComponent extends ModalBaseComponent {
7075
7099
  this.size = 'small';
7076
7100
  }
7077
7101
  }
7078
- 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 });
7079
- 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--extra-small": "size === 'extra-small'", "class.sapphire-dialog--small": "size === 'small'", "class.sapphire-dialog--medium": "size === 'medium'", "class.sapphire-dialog--large": "size === 'large'", "class.sapphire-dialog--passive": "type === 'passive'", "class.sapphire-dialog--exiting": "dialogRef.closing" }, classAttribute: "sapphire-dialog" }, queries: [{ propertyName: "footer", first: true, predicate: DialogFooterDirective, descendants: true }, { propertyName: "header", first: true, predicate: DialogHeaderDirective, descendants: true }, { propertyName: "content", first: true, predicate: DialogContentDirective, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<div #headerTemplate>\n <ng-content select=\"sp-dialog-header, [spDialogHeader]\"></ng-content>\n</div>\n\n<!--If header is not provided as <sp-dialog-header>, but as an another div with spDialogHeader,-->\n<!-- we still need the styling of the header to be rendered, so the dialog looks as expected in the spec.-->\n<ng-container *ngIf=\"!headerTemplate.children.length\">\n <div class=\"sapphire-dialog-header\"></div>\n</ng-container>\n\n<ng-content select=\"sp-dialog-content, [sp-dialog-content]\"></ng-content>\n<ng-content select=\"sp-dialog-footer, [spDialogFooter]\"></ng-content>\n", 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-dialog-size-radius);background-color:var(--sapphire-dialog-color-background);font-family:var(--sapphire-dialog-font-name);color:var(--sapphire-dialog-color-content);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-dialog-time-transition);animation-timing-function:ease-in-out;animation-fill-mode:forwards}.sapphire-dialog--exiting{animation-name:fade-out}.sapphire-dialog--extra-small{width:var(--sapphire-dialog-size-width-xs)}.sapphire-dialog--small{width:var(--sapphire-dialog-size-width-s)}.sapphire-dialog--medium{width:var(--sapphire-dialog-size-width-m)}.sapphire-dialog--large{width:var(--sapphire-dialog-size-width-l)}.sapphire-dialog-header{padding:var(--sapphire-dialog-size-spacing-header-top-default) var(--sapphire-dialog-size-spacing-header-right-default) var(--sapphire-dialog-size-spacing-header-bottom-default) var(--sapphire-dialog-size-spacing-header-left-default);display:flex;justify-content:space-between;align-items:center}.sapphire-dialog--passive .sapphire-dialog-header{padding:var(--sapphire-dialog-size-spacing-header-top-passive) var(--sapphire-dialog-size-spacing-header-right-passive) var(--sapphire-dialog-size-spacing-header-bottom-passive) var(--sapphire-dialog-size-spacing-header-left-passive)}.sapphire-dialog-close-button-container{align-self:flex-start}.sapphire-dialog-body{padding:var(--sapphire-dialog-size-spacing-body-top-default) var(--sapphire-dialog-size-spacing-body-right-default) var(--sapphire-dialog-size-spacing-body-bottom-default) var(--sapphire-dialog-size-spacing-body-left-default);overflow-y:auto;overflow-x:hidden}.sapphire-dialog--passive .sapphire-dialog-body{padding:var(--sapphire-dialog-size-spacing-body-top-passive) var(--sapphire-dialog-size-spacing-body-right-passive) var(--sapphire-dialog-size-spacing-body-bottom-passive) var(--sapphire-dialog-size-spacing-body-left-passive)}.sapphire-dialog-footer{padding:var(--sapphire-dialog-size-spacing-footer-top-default) var(--sapphire-dialog-size-spacing-footer-right-default) var(--sapphire-dialog-size-spacing-footer-bottom-default) var(--sapphire-dialog-size-spacing-footer-left-default)}.sapphire-dialog-header+.sapphire-dialog-body{border-top:var(--sapphire-dialog-size-border) solid transparent}.sapphire-dialog-header+.sapphire-dialog-body.sapphire-dialog-body--scrolled{border-top:var(--sapphire-dialog-size-border) solid var(--sapphire-dialog-color-separator)}.sapphire-dialog-body+.sapphire-dialog-footer{border-top:var(--sapphire-dialog-size-border) solid transparent}.sapphire-dialog-body.sapphire-dialog-body--scrollable+.sapphire-dialog-footer{border-top:var(--sapphire-dialog-size-border) solid var(--sapphire-dialog-color-separator)}.sapphire-dialog:has(.sapphire-dialog-body--scrollable)>.sapphire-dialog-footer{padding:var(--sapphire-dialog-size-spacing-footer-top-scrollable) var(--sapphire-dialog-size-spacing-footer-right-scrollable) var(--sapphire-dialog-size-spacing-footer-bottom-scrollable) var(--sapphire-dialog-size-spacing-footer-left-scrollable)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
7102
+ 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 });
7103
+ 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--extra-small": "size === 'extra-small'", "class.sapphire-dialog--small": "size === 'small'", "class.sapphire-dialog--medium": "size === 'medium'", "class.sapphire-dialog--large": "size === 'large'", "class.sapphire-dialog--passive": "type === 'passive'", "class.sapphire-dialog--exiting": "dialogRef.closing" }, classAttribute: "sapphire-dialog" }, queries: [{ propertyName: "footer", first: true, predicate: DialogFooterDirective, descendants: true }, { propertyName: "header", first: true, predicate: DialogHeaderDirective, descendants: true }, { propertyName: "content", first: true, predicate: DialogContentDirective, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<div #headerTemplate>\n <ng-content select=\"sp-dialog-header, [spDialogHeader]\"></ng-content>\n</div>\n\n<!--If header is not provided as <sp-dialog-header>, but as an another div with spDialogHeader,-->\n<!-- we still need the styling of the header to be rendered, so the dialog looks as expected in the spec.-->\n<ng-container *ngIf=\"!headerTemplate.children.length\">\n <div class=\"sapphire-dialog-header\"></div>\n</ng-container>\n\n<ng-content select=\"sp-dialog-content, [sp-dialog-content]\"></ng-content>\n<ng-content select=\"sp-dialog-footer, [spDialogFooter]\"></ng-content>\n", 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-dialog-size-radius);background-color:var(--sapphire-dialog-color-background);font-family:var(--sapphire-dialog-font-name);color:var(--sapphire-dialog-color-content);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-dialog-time-transition);animation-timing-function:ease-in-out;animation-fill-mode:forwards}.sapphire-dialog--exiting{animation-name:fade-out}.sapphire-dialog--extra-small{width:var(--sapphire-dialog-size-width-xs)}.sapphire-dialog--small{width:var(--sapphire-dialog-size-width-s)}.sapphire-dialog--medium{width:var(--sapphire-dialog-size-width-m)}.sapphire-dialog--large{width:var(--sapphire-dialog-size-width-l)}.sapphire-dialog-header{padding:var(--sapphire-dialog-size-spacing-header-top-default) var(--sapphire-dialog-size-spacing-header-right-default) var(--sapphire-dialog-size-spacing-header-bottom-default) var(--sapphire-dialog-size-spacing-header-left-default);display:flex;justify-content:space-between;align-items:center}.sapphire-dialog--passive .sapphire-dialog-header{padding:var(--sapphire-dialog-size-spacing-header-top-passive) var(--sapphire-dialog-size-spacing-header-right-passive) var(--sapphire-dialog-size-spacing-header-bottom-passive) var(--sapphire-dialog-size-spacing-header-left-passive)}.sapphire-dialog-close-button-container{align-self:flex-start}.sapphire-dialog-body{padding:var(--sapphire-dialog-size-spacing-body-top-default) var(--sapphire-dialog-size-spacing-body-right-default) var(--sapphire-dialog-size-spacing-body-bottom-default) var(--sapphire-dialog-size-spacing-body-left-default);overflow-y:auto;overflow-x:hidden}.sapphire-dialog--passive .sapphire-dialog-body{padding:var(--sapphire-dialog-size-spacing-body-top-passive) var(--sapphire-dialog-size-spacing-body-right-passive) var(--sapphire-dialog-size-spacing-body-bottom-passive) var(--sapphire-dialog-size-spacing-body-left-passive)}.sapphire-dialog-footer{padding:var(--sapphire-dialog-size-spacing-footer-top-default) var(--sapphire-dialog-size-spacing-footer-right-default) var(--sapphire-dialog-size-spacing-footer-bottom-default) var(--sapphire-dialog-size-spacing-footer-left-default)}.sapphire-dialog-header+.sapphire-dialog-body{border-top:var(--sapphire-dialog-size-border) solid transparent}.sapphire-dialog-header+.sapphire-dialog-body.sapphire-dialog-body--scrolled{border-top:var(--sapphire-dialog-size-border) solid var(--sapphire-dialog-color-separator)}.sapphire-dialog-body+.sapphire-dialog-footer{border-top:var(--sapphire-dialog-size-border) solid transparent}.sapphire-dialog-body.sapphire-dialog-body--scrollable+.sapphire-dialog-footer{border-top:var(--sapphire-dialog-size-border) solid var(--sapphire-dialog-color-separator)}.sapphire-dialog:has(.sapphire-dialog-body--scrollable)>.sapphire-dialog-footer{padding:var(--sapphire-dialog-size-spacing-footer-top-scrollable) var(--sapphire-dialog-size-spacing-footer-right-scrollable) var(--sapphire-dialog-size-spacing-footer-bottom-scrollable) var(--sapphire-dialog-size-spacing-footer-left-scrollable)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
7080
7104
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DialogComponent, decorators: [{
7081
7105
  type: Component,
7082
7106
  args: [{ selector: 'sp-dialog', host: {
@@ -7088,7 +7112,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
7088
7112
  '[class.sapphire-dialog--passive]': "type === 'passive'",
7089
7113
  '[class.sapphire-dialog--exiting]': 'dialogRef.closing',
7090
7114
  }, hostDirectives: [UseComponentStylesOnHost], template: "<div #headerTemplate>\n <ng-content select=\"sp-dialog-header, [spDialogHeader]\"></ng-content>\n</div>\n\n<!--If header is not provided as <sp-dialog-header>, but as an another div with spDialogHeader,-->\n<!-- we still need the styling of the header to be rendered, so the dialog looks as expected in the spec.-->\n<ng-container *ngIf=\"!headerTemplate.children.length\">\n <div class=\"sapphire-dialog-header\"></div>\n</ng-container>\n\n<ng-content select=\"sp-dialog-content, [sp-dialog-content]\"></ng-content>\n<ng-content select=\"sp-dialog-footer, [spDialogFooter]\"></ng-content>\n", 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-dialog-size-radius);background-color:var(--sapphire-dialog-color-background);font-family:var(--sapphire-dialog-font-name);color:var(--sapphire-dialog-color-content);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-dialog-time-transition);animation-timing-function:ease-in-out;animation-fill-mode:forwards}.sapphire-dialog--exiting{animation-name:fade-out}.sapphire-dialog--extra-small{width:var(--sapphire-dialog-size-width-xs)}.sapphire-dialog--small{width:var(--sapphire-dialog-size-width-s)}.sapphire-dialog--medium{width:var(--sapphire-dialog-size-width-m)}.sapphire-dialog--large{width:var(--sapphire-dialog-size-width-l)}.sapphire-dialog-header{padding:var(--sapphire-dialog-size-spacing-header-top-default) var(--sapphire-dialog-size-spacing-header-right-default) var(--sapphire-dialog-size-spacing-header-bottom-default) var(--sapphire-dialog-size-spacing-header-left-default);display:flex;justify-content:space-between;align-items:center}.sapphire-dialog--passive .sapphire-dialog-header{padding:var(--sapphire-dialog-size-spacing-header-top-passive) var(--sapphire-dialog-size-spacing-header-right-passive) var(--sapphire-dialog-size-spacing-header-bottom-passive) var(--sapphire-dialog-size-spacing-header-left-passive)}.sapphire-dialog-close-button-container{align-self:flex-start}.sapphire-dialog-body{padding:var(--sapphire-dialog-size-spacing-body-top-default) var(--sapphire-dialog-size-spacing-body-right-default) var(--sapphire-dialog-size-spacing-body-bottom-default) var(--sapphire-dialog-size-spacing-body-left-default);overflow-y:auto;overflow-x:hidden}.sapphire-dialog--passive .sapphire-dialog-body{padding:var(--sapphire-dialog-size-spacing-body-top-passive) var(--sapphire-dialog-size-spacing-body-right-passive) var(--sapphire-dialog-size-spacing-body-bottom-passive) var(--sapphire-dialog-size-spacing-body-left-passive)}.sapphire-dialog-footer{padding:var(--sapphire-dialog-size-spacing-footer-top-default) var(--sapphire-dialog-size-spacing-footer-right-default) var(--sapphire-dialog-size-spacing-footer-bottom-default) var(--sapphire-dialog-size-spacing-footer-left-default)}.sapphire-dialog-header+.sapphire-dialog-body{border-top:var(--sapphire-dialog-size-border) solid transparent}.sapphire-dialog-header+.sapphire-dialog-body.sapphire-dialog-body--scrolled{border-top:var(--sapphire-dialog-size-border) solid var(--sapphire-dialog-color-separator)}.sapphire-dialog-body+.sapphire-dialog-footer{border-top:var(--sapphire-dialog-size-border) solid transparent}.sapphire-dialog-body.sapphire-dialog-body--scrollable+.sapphire-dialog-footer{border-top:var(--sapphire-dialog-size-border) solid var(--sapphire-dialog-color-separator)}.sapphire-dialog:has(.sapphire-dialog-body--scrollable)>.sapphire-dialog-footer{padding:var(--sapphire-dialog-size-spacing-footer-top-scrollable) var(--sapphire-dialog-size-spacing-footer-right-scrollable) var(--sapphire-dialog-size-spacing-footer-bottom-scrollable) var(--sapphire-dialog-size-spacing-footer-left-scrollable)}\n"] }]
7091
- }], ctorParameters: function () { return [{ type: i1$6.DialogRef }]; }, propDecorators: { size: [{
7115
+ }], ctorParameters: function () { return [{ type: i1$5.DialogRef }]; }, propDecorators: { size: [{
7092
7116
  type: Input
7093
7117
  }], footer: [{
7094
7118
  type: ContentChild,
@@ -7204,7 +7228,7 @@ class ConfirmationDialogComponent {
7204
7228
  }
7205
7229
  }
7206
7230
  ConfirmationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7207
- ConfirmationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ConfirmationDialogComponent, selector: "sp-confirmation-dialog", inputs: { heading: "heading", primaryActionLabel: "primaryActionLabel", secondaryActionLabel: "secondaryActionLabel" }, outputs: { primaryActionSelected: "primaryActionSelected", secondaryActionSelected: "secondaryActionSelected" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true }], exportAs: ["spConfirmationDialog"], ngImport: i0, template: "<sp-dialog role=\"alertdialog\">\n <sp-dialog-header *ngIf=\"heading\">{{ heading }}</sp-dialog-header>\n <sp-dialog-content><ng-content></ng-content></sp-dialog-content>\n <sp-dialog-footer>\n <button\n sp-button\n variant=\"secondary\"\n (click)=\"dialog && secondaryActionSelected.emit({dialog})\"\n >\n {{ secondaryActionLabel }}\n </button>\n <button\n sp-button\n variant=\"primary\"\n (click)=\"dialog && primaryActionSelected.emit({dialog})\"\n >\n {{ primaryActionLabel }}\n </button>\n </sp-dialog-footer>\n</sp-dialog>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "iconAlign", "type"] }, { kind: "component", type: DialogComponent, selector: "sp-dialog", inputs: ["size"] }, { kind: "component", type: DialogHeaderComponent, selector: "sp-dialog-header" }, { kind: "directive", type: DialogContentDirective, selector: "sp-dialog-content, [sp-dialog-content]" }, { kind: "component", type: DialogFooterComponent, selector: "sp-dialog-footer", inputs: ["stretch", "orientation"] }] });
7231
+ ConfirmationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ConfirmationDialogComponent, selector: "sp-confirmation-dialog", inputs: { heading: "heading", primaryActionLabel: "primaryActionLabel", secondaryActionLabel: "secondaryActionLabel" }, outputs: { primaryActionSelected: "primaryActionSelected", secondaryActionSelected: "secondaryActionSelected" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true }], exportAs: ["spConfirmationDialog"], ngImport: i0, template: "<sp-dialog role=\"alertdialog\">\n <sp-dialog-header *ngIf=\"heading\">{{ heading }}</sp-dialog-header>\n <sp-dialog-content><ng-content></ng-content></sp-dialog-content>\n <sp-dialog-footer>\n <button\n sp-button\n variant=\"secondary\"\n (click)=\"dialog && secondaryActionSelected.emit({dialog})\"\n >\n {{ secondaryActionLabel }}\n </button>\n <button\n sp-button\n variant=\"primary\"\n (click)=\"dialog && primaryActionSelected.emit({dialog})\"\n >\n {{ primaryActionLabel }}\n </button>\n </sp-dialog-footer>\n</sp-dialog>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "iconAlign", "type"] }, { kind: "component", type: DialogComponent, selector: "sp-dialog", inputs: ["size"] }, { kind: "component", type: DialogHeaderComponent, selector: "sp-dialog-header" }, { kind: "directive", type: DialogContentDirective, selector: "sp-dialog-content, [sp-dialog-content]" }, { kind: "component", type: DialogFooterComponent, selector: "sp-dialog-footer", inputs: ["stretch", "orientation"] }] });
7208
7232
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
7209
7233
  type: Component,
7210
7234
  args: [{ selector: 'sp-confirmation-dialog', exportAs: 'spConfirmationDialog', template: "<sp-dialog role=\"alertdialog\">\n <sp-dialog-header *ngIf=\"heading\">{{ heading }}</sp-dialog-header>\n <sp-dialog-content><ng-content></ng-content></sp-dialog-content>\n <sp-dialog-footer>\n <button\n sp-button\n variant=\"secondary\"\n (click)=\"dialog && secondaryActionSelected.emit({dialog})\"\n >\n {{ secondaryActionLabel }}\n </button>\n <button\n sp-button\n variant=\"primary\"\n (click)=\"dialog && primaryActionSelected.emit({dialog})\"\n >\n {{ primaryActionLabel }}\n </button>\n </sp-dialog-footer>\n</sp-dialog>\n" }]
@@ -7257,7 +7281,7 @@ class DangerDialogComponent {
7257
7281
  }
7258
7282
  }
7259
7283
  DangerDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DangerDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7260
- DangerDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: DangerDialogComponent, selector: "sp-danger-dialog", inputs: { heading: "heading", primaryActionLabel: "primaryActionLabel", secondaryActionLabel: "secondaryActionLabel" }, outputs: { primaryActionSelected: "primaryActionSelected", secondaryActionSelected: "secondaryActionSelected" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true }], exportAs: ["spDangerDialog"], ngImport: i0, template: "<sp-dialog role=\"alertdialog\">\n <sp-dialog-header *ngIf=\"heading\">{{ heading }}</sp-dialog-header>\n <sp-dialog-content><ng-content></ng-content></sp-dialog-content>\n <sp-dialog-footer>\n <button\n sp-button\n variant=\"secondary\"\n (click)=\"dialog && secondaryActionSelected.emit({dialog})\"\n >\n {{ secondaryActionLabel }}\n </button>\n <button\n sp-button\n variant=\"dangerSecondary\"\n (click)=\"dialog && primaryActionSelected.emit({dialog})\"\n >\n {{ primaryActionLabel }}\n </button>\n </sp-dialog-footer>\n</sp-dialog>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "iconAlign", "type"] }, { kind: "component", type: DialogComponent, selector: "sp-dialog", inputs: ["size"] }, { kind: "component", type: DialogHeaderComponent, selector: "sp-dialog-header" }, { kind: "directive", type: DialogContentDirective, selector: "sp-dialog-content, [sp-dialog-content]" }, { kind: "component", type: DialogFooterComponent, selector: "sp-dialog-footer", inputs: ["stretch", "orientation"] }] });
7284
+ DangerDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: DangerDialogComponent, selector: "sp-danger-dialog", inputs: { heading: "heading", primaryActionLabel: "primaryActionLabel", secondaryActionLabel: "secondaryActionLabel" }, outputs: { primaryActionSelected: "primaryActionSelected", secondaryActionSelected: "secondaryActionSelected" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true }], exportAs: ["spDangerDialog"], ngImport: i0, template: "<sp-dialog role=\"alertdialog\">\n <sp-dialog-header *ngIf=\"heading\">{{ heading }}</sp-dialog-header>\n <sp-dialog-content><ng-content></ng-content></sp-dialog-content>\n <sp-dialog-footer>\n <button\n sp-button\n variant=\"secondary\"\n (click)=\"dialog && secondaryActionSelected.emit({dialog})\"\n >\n {{ secondaryActionLabel }}\n </button>\n <button\n sp-button\n variant=\"dangerSecondary\"\n (click)=\"dialog && primaryActionSelected.emit({dialog})\"\n >\n {{ primaryActionLabel }}\n </button>\n </sp-dialog-footer>\n</sp-dialog>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "iconAlign", "type"] }, { kind: "component", type: DialogComponent, selector: "sp-dialog", inputs: ["size"] }, { kind: "component", type: DialogHeaderComponent, selector: "sp-dialog-header" }, { kind: "directive", type: DialogContentDirective, selector: "sp-dialog-content, [sp-dialog-content]" }, { kind: "component", type: DialogFooterComponent, selector: "sp-dialog-footer", inputs: ["stretch", "orientation"] }] });
7261
7285
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DangerDialogComponent, decorators: [{
7262
7286
  type: Component,
7263
7287
  args: [{ selector: 'sp-danger-dialog', exportAs: 'spDangerDialog', template: "<sp-dialog role=\"alertdialog\">\n <sp-dialog-header *ngIf=\"heading\">{{ heading }}</sp-dialog-header>\n <sp-dialog-content><ng-content></ng-content></sp-dialog-content>\n <sp-dialog-footer>\n <button\n sp-button\n variant=\"secondary\"\n (click)=\"dialog && secondaryActionSelected.emit({dialog})\"\n >\n {{ secondaryActionLabel }}\n </button>\n <button\n sp-button\n variant=\"dangerSecondary\"\n (click)=\"dialog && primaryActionSelected.emit({dialog})\"\n >\n {{ primaryActionLabel }}\n </button>\n </sp-dialog-footer>\n</sp-dialog>\n" }]
@@ -7334,7 +7358,7 @@ class PanelHeaderComponent {
7334
7358
  }
7335
7359
  }
7336
7360
  PanelHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PanelHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7337
- PanelHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: PanelHeaderComponent, selector: "sp-panel-header", inputs: { subheading: "subheading" }, outputs: { closeEventEmitter: "closeClicked" }, hostDirectives: [{ directive: PanelHeaderDirective, inputs: ["id", "id"] }], ngImport: i0, template: "<div class=\"sapphire-panel-panel-header\" _spUseComponentStyles>\n <ng-content select=\"[spPanelBackButton]\"></ng-content>\n <div class=\"sapphire-panel-panel-heading-container\" _spUseComponentStyles>\n <h4 sp-heading><ng-content></ng-content></h4>\n <div\n *ngIf=\"!!subheading\"\n class=\"sapphire-panel-panel-header-subheading\"\n _spUseComponentStyles\n >\n {{ subheading }}\n </div>\n </div>\n <div\n class=\"sapphire-panel-panel-header-close-button-container\"\n _spUseComponentStyles\n >\n <button\n sp-icon-button\n variant=\"tertiary\"\n appearance=\"ghost\"\n size=\"large\"\n (click)=\"close($event)\"\n spPanelCloseButton\n >\n <sp-icon name=\"close\"></sp-icon>\n </button>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeadingComponent, selector: "h1[sp-heading],h2[sp-heading],h3[sp-heading],h4[sp-heading],h5[sp-heading],h6[sp-heading]", inputs: ["sp-heading", "fontVariant"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "component", type: IconButtonComponent, selector: "button[sp-icon-button], a[sp-icon-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "type"] }, { kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }, { kind: "directive", type: PanelCloseButtonDirective, selector: "button[spPanelCloseButton]" }] });
7361
+ PanelHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: PanelHeaderComponent, selector: "sp-panel-header", inputs: { subheading: "subheading" }, outputs: { closeEventEmitter: "closeClicked" }, hostDirectives: [{ directive: PanelHeaderDirective, inputs: ["id", "id"] }], ngImport: i0, template: "<div class=\"sapphire-panel-panel-header\" _spUseComponentStyles>\n <ng-content select=\"[spPanelBackButton]\"></ng-content>\n <div class=\"sapphire-panel-panel-heading-container\" _spUseComponentStyles>\n <h4 sp-heading><ng-content></ng-content></h4>\n <div\n *ngIf=\"!!subheading\"\n class=\"sapphire-panel-panel-header-subheading\"\n _spUseComponentStyles\n >\n {{ subheading }}\n </div>\n </div>\n <div\n class=\"sapphire-panel-panel-header-close-button-container\"\n _spUseComponentStyles\n >\n <button\n sp-icon-button\n variant=\"tertiary\"\n appearance=\"ghost\"\n size=\"large\"\n (click)=\"close($event)\"\n spPanelCloseButton\n >\n <sp-icon name=\"close\"></sp-icon>\n </button>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeadingComponent, selector: "h1[sp-heading],h2[sp-heading],h3[sp-heading],h4[sp-heading],h5[sp-heading],h6[sp-heading]", inputs: ["sp-heading", "fontVariant"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "component", type: IconButtonComponent, selector: "button[sp-icon-button], a[sp-icon-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "type"] }, { kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }, { kind: "directive", type: PanelCloseButtonDirective, selector: "button[spPanelCloseButton]" }] });
7338
7362
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PanelHeaderComponent, decorators: [{
7339
7363
  type: Component,
7340
7364
  args: [{ selector: 'sp-panel-header', hostDirectives: [{ directive: PanelHeaderDirective, inputs: ['id'] }], template: "<div class=\"sapphire-panel-panel-header\" _spUseComponentStyles>\n <ng-content select=\"[spPanelBackButton]\"></ng-content>\n <div class=\"sapphire-panel-panel-heading-container\" _spUseComponentStyles>\n <h4 sp-heading><ng-content></ng-content></h4>\n <div\n *ngIf=\"!!subheading\"\n class=\"sapphire-panel-panel-header-subheading\"\n _spUseComponentStyles\n >\n {{ subheading }}\n </div>\n </div>\n <div\n class=\"sapphire-panel-panel-header-close-button-container\"\n _spUseComponentStyles\n >\n <button\n sp-icon-button\n variant=\"tertiary\"\n appearance=\"ghost\"\n size=\"large\"\n (click)=\"close($event)\"\n spPanelCloseButton\n >\n <sp-icon name=\"close\"></sp-icon>\n </button>\n </div>\n</div>\n" }]
@@ -7386,7 +7410,7 @@ class PanelComponent extends ModalBaseComponent {
7386
7410
  this.size = 'large';
7387
7411
  }
7388
7412
  }
7389
- 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 });
7413
+ 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 });
7390
7414
  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--small": "size === \"small\"", "class.sapphire-panel--visible": "!dialogRef.closing" }, classAttribute: "sapphire-panel" }, queries: [{ propertyName: "header", first: true, predicate: PanelHeaderDirective, descendants: true }, { propertyName: "content", first: true, predicate: PanelContentComponent, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<ng-content select=\"sp-panel-header, [spPanelHeader]\"></ng-content>\n<ng-content select=\"sp-panel-content\"></ng-content>\n<ng-content select=\"sp-panel-footer, [spPanelFooter]\"></ng-content>\n", styles: [".sapphire-panel{background-color:var(--sapphire-panel-color-background);font-family:var(--sapphire-panel-font-name);color:var(--sapphire-panel-color-content);box-sizing:border-box;overflow:hidden;max-width:100%;display:flex;flex-direction:column;height:100%;outline:0;transition:transform var(--sapphire-panel-time-transition) ease-in-out;transform:translate(100%);width:var(--sapphire-panel-size-width-l)}.sapphire-panel-inline{display:flex;flex-direction:column;background-color:var(--sapphire-panel-color-background);font-family:var(--sapphire-panel-font-name);color:var(--sapphire-panel-color-content)}.sapphire-panel--visible{transform:translate(0)}.sapphire-panel--small{width:var(--sapphire-panel-size-width-s)}.sapphire-panel-header{flex-shrink:0}.sapphire-panel-body{overflow-y:auto;overflow-x:hidden;flex-grow:1;padding:0 var(--sapphire-panel-size-spacing-side)}.sapphire-panel-body.sapphire-panel-body--no-padding{padding:0}.sapphire-panel-footer{flex-shrink:0}.sapphire-panel-panel-heading-container{flex:1;padding:var(--sapphire-panel-size-spacing-heading-vertical) 0}.sapphire-panel-panel-header{flex-shrink:0;display:flex;justify-content:space-between;padding:var(--sapphire-panel-size-spacing-header-vertical) var(--sapphire-panel-size-spacing-side);gap:var(--sapphire-panel-size-spacing-header-gap)}.sapphire-panel-panel-header-subheading{color:var(--sapphire-panel-color-subheading);margin-top:var(--sapphire-panel-size-spacing-heading-gap)}.sapphire-panel-panel-footer{padding:var(--sapphire-panel-size-spacing-footer-top) var(--sapphire-panel-size-spacing-side) var(--sapphire-panel-size-spacing-footer-bottom) var(--sapphire-panel-size-spacing-side)}.sapphire-panel-panel-header-close-button-container{margin-left:var(--sapphire-panel-size-spacing-close-icon-left)}.sapphire-panel-header+.sapphire-panel-body{border-top:var(--sapphire-panel-size-border) solid transparent}.sapphire-panel-header+.sapphire-panel-body.sapphire-panel-body--scrolled{border-top:var(--sapphire-panel-size-border) solid var(--sapphire-panel-color-separator)}.sapphire-panel-body+.sapphire-panel-footer{border-top:var(--sapphire-panel-size-border) solid transparent}.sapphire-panel-body.sapphire-panel-body--scrollable+.sapphire-panel-footer{border-top:var(--sapphire-panel-size-border) solid var(--sapphire-panel-color-separator)}\n"] });
7391
7415
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PanelComponent, decorators: [{
7392
7416
  type: Component,
@@ -7395,7 +7419,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
7395
7419
  '[class.sapphire-panel--small]': 'size === "small"',
7396
7420
  '[class.sapphire-panel--visible]': '!dialogRef.closing',
7397
7421
  }, hostDirectives: [UseComponentStylesOnHost], template: "<ng-content select=\"sp-panel-header, [spPanelHeader]\"></ng-content>\n<ng-content select=\"sp-panel-content\"></ng-content>\n<ng-content select=\"sp-panel-footer, [spPanelFooter]\"></ng-content>\n", styles: [".sapphire-panel{background-color:var(--sapphire-panel-color-background);font-family:var(--sapphire-panel-font-name);color:var(--sapphire-panel-color-content);box-sizing:border-box;overflow:hidden;max-width:100%;display:flex;flex-direction:column;height:100%;outline:0;transition:transform var(--sapphire-panel-time-transition) ease-in-out;transform:translate(100%);width:var(--sapphire-panel-size-width-l)}.sapphire-panel-inline{display:flex;flex-direction:column;background-color:var(--sapphire-panel-color-background);font-family:var(--sapphire-panel-font-name);color:var(--sapphire-panel-color-content)}.sapphire-panel--visible{transform:translate(0)}.sapphire-panel--small{width:var(--sapphire-panel-size-width-s)}.sapphire-panel-header{flex-shrink:0}.sapphire-panel-body{overflow-y:auto;overflow-x:hidden;flex-grow:1;padding:0 var(--sapphire-panel-size-spacing-side)}.sapphire-panel-body.sapphire-panel-body--no-padding{padding:0}.sapphire-panel-footer{flex-shrink:0}.sapphire-panel-panel-heading-container{flex:1;padding:var(--sapphire-panel-size-spacing-heading-vertical) 0}.sapphire-panel-panel-header{flex-shrink:0;display:flex;justify-content:space-between;padding:var(--sapphire-panel-size-spacing-header-vertical) var(--sapphire-panel-size-spacing-side);gap:var(--sapphire-panel-size-spacing-header-gap)}.sapphire-panel-panel-header-subheading{color:var(--sapphire-panel-color-subheading);margin-top:var(--sapphire-panel-size-spacing-heading-gap)}.sapphire-panel-panel-footer{padding:var(--sapphire-panel-size-spacing-footer-top) var(--sapphire-panel-size-spacing-side) var(--sapphire-panel-size-spacing-footer-bottom) var(--sapphire-panel-size-spacing-side)}.sapphire-panel-panel-header-close-button-container{margin-left:var(--sapphire-panel-size-spacing-close-icon-left)}.sapphire-panel-header+.sapphire-panel-body{border-top:var(--sapphire-panel-size-border) solid transparent}.sapphire-panel-header+.sapphire-panel-body.sapphire-panel-body--scrolled{border-top:var(--sapphire-panel-size-border) solid var(--sapphire-panel-color-separator)}.sapphire-panel-body+.sapphire-panel-footer{border-top:var(--sapphire-panel-size-border) solid transparent}.sapphire-panel-body.sapphire-panel-body--scrollable+.sapphire-panel-footer{border-top:var(--sapphire-panel-size-border) solid var(--sapphire-panel-color-separator)}\n"] }]
7398
- }], ctorParameters: function () { return [{ type: i1$6.DialogRef }]; }, propDecorators: { size: [{
7422
+ }], ctorParameters: function () { return [{ type: i1$5.DialogRef }]; }, propDecorators: { size: [{
7399
7423
  type: Input
7400
7424
  }], header: [{
7401
7425
  type: ContentChild,
@@ -7791,7 +7815,7 @@ class PaginationComponent {
7791
7815
  }
7792
7816
  }
7793
7817
  PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7794
- PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: PaginationComponent, selector: "sp-pagination", inputs: { pageSize: "pageSize", itemCount: "itemCount", page: "page", pageSizeOptions: "pageSizeOptions", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"sapphire-pagination\">\n <sp-basic-select\n *ngIf=\"pageSizeOptions\"\n placeholder=\"Select an option\"\n (valueChange)=\"_onPageSizeChange($event)\"\n [value]=\"'' + pageSize\"\n [disabled]=\"!!disabled\"\n aria-label=\"Number of items per page\"\n variant=\"tertiary-ghost\"\n >\n <sp-option\n *ngFor=\"let pageSizeOption of pageSizeOptions\"\n [value]=\"'' + pageSizeOption\"\n >{{ pageSizeOption + ' items per page' }}</sp-option\n >\n </sp-basic-select>\n <span class=\"sapphire-pagination__controls\">\n <span class=\"sapphire-pagination__text--emphasized\">\n {{ startItemIndex }} -\n {{ endItemIndex }}\n <span class=\"sapphire-pagination__text\"> of </span>\n {{ itemCount }}\n </span>\n <button\n sp-icon-button\n variant=\"tertiary\"\n appearance=\"ghost\"\n size=\"small\"\n (click)=\"_onPageChange('previous')\"\n [disabled]=\"_isPreviousPageButtonDisabled() || !!disabled\"\n aria-label=\"Previous\"\n >\n <sp-icon name=\"chevronLeft\"></sp-icon></button\n ><button\n sp-icon-button\n variant=\"tertiary\"\n appearance=\"ghost\"\n size=\"small\"\n (click)=\"_onPageChange('next')\"\n [disabled]=\"_isNextPageButtonDisabled() || !!disabled\"\n aria-label=\"Next\"\n >\n <sp-icon name=\"chevronRight\"></sp-icon>\n </button>\n </span>\n</div>\n", styles: [".sapphire-pagination{display:flex;justify-content:flex-end;align-items:center;padding:var(--sapphire-pagination-size-spacing-container-vertical) var(--sapphire-pagination-size-spacing-container-horizontal);background-color:var(--sapphire-pagination-color-background);font-family:var(--sapphire-pagination-font-name);font-size:var(--sapphire-pagination-size-font-page);height:var(--sapphire-pagination-size-height);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-pagination__controls{display:flex;align-items:center;justify-content:flex-end;flex-grow:1;color:var(--sapphire-pagination-color-text);gap:var(--sapphire-pagination-size-spacing-controls-horizontal)}.sapphire-pagination__text{font-weight:var(--sapphire-pagination-font-weight-alphabetic-text);padding-left:var(--sapphire-pagination-size-spacing-text-horizontal);padding-right:var(--sapphire-pagination-size-spacing-text-horizontal)}.sapphire-pagination__text--emphasized{font-weight:var(--sapphire-pagination-font-weight-numeric-text)}.sapphire-pagination__ellipsis{display:flex;justify-content:center;align-items:center;height:var(--sapphire-pagination-size-ellipsis);width:var(--sapphire-pagination-size-ellipsis);font-size:var(--sapphire-pagination-size-font-ellipsis);font-weight:var(--sapphire-pagination-font-weight-numeric-text)}sp-basic-select{margin-left:calc(-1 * var(--sapphire-button-size-spacing-horizontal-m))}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OptionComponent, selector: "sp-option", inputs: ["value", "disabled"] }, { kind: "component", type: BasicSelectComponent, selector: "sp-basic-select", inputs: ["size", "variant"], exportAs: ["spBasicSelect"] }, { kind: "directive", type: BasicSingleSelectDirective, selector: "sp-basic-select:not([multiple])" }, { kind: "component", type: IconButtonComponent, selector: "button[sp-icon-button], a[sp-icon-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "type"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }] });
7818
+ PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: PaginationComponent, selector: "sp-pagination", inputs: { pageSize: "pageSize", itemCount: "itemCount", page: "page", pageSizeOptions: "pageSizeOptions", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"sapphire-pagination\">\n <sp-basic-select\n *ngIf=\"pageSizeOptions\"\n placeholder=\"Select an option\"\n (valueChange)=\"_onPageSizeChange($event)\"\n [value]=\"'' + pageSize\"\n [disabled]=\"!!disabled\"\n aria-label=\"Number of items per page\"\n variant=\"tertiary-ghost\"\n >\n <sp-option\n *ngFor=\"let pageSizeOption of pageSizeOptions\"\n [value]=\"'' + pageSizeOption\"\n >{{ pageSizeOption + ' items per page' }}</sp-option\n >\n </sp-basic-select>\n <span class=\"sapphire-pagination__controls\">\n <span class=\"sapphire-pagination__text--emphasized\">\n {{ startItemIndex }} -\n {{ endItemIndex }}\n <span class=\"sapphire-pagination__text\"> of </span>\n {{ itemCount }}\n </span>\n <button\n sp-icon-button\n variant=\"tertiary\"\n appearance=\"ghost\"\n size=\"small\"\n (click)=\"_onPageChange('previous')\"\n [disabled]=\"_isPreviousPageButtonDisabled() || !!disabled\"\n aria-label=\"Previous\"\n >\n <sp-icon name=\"chevronLeft\"></sp-icon></button\n ><button\n sp-icon-button\n variant=\"tertiary\"\n appearance=\"ghost\"\n size=\"small\"\n (click)=\"_onPageChange('next')\"\n [disabled]=\"_isNextPageButtonDisabled() || !!disabled\"\n aria-label=\"Next\"\n >\n <sp-icon name=\"chevronRight\"></sp-icon>\n </button>\n </span>\n</div>\n", styles: [".sapphire-pagination{display:flex;justify-content:flex-end;align-items:center;padding:var(--sapphire-pagination-size-spacing-container-vertical) var(--sapphire-pagination-size-spacing-container-horizontal);background-color:var(--sapphire-pagination-color-background);font-family:var(--sapphire-pagination-font-name);font-size:var(--sapphire-pagination-size-font-page);height:var(--sapphire-pagination-size-height);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-pagination__controls{display:flex;align-items:center;justify-content:flex-end;flex-grow:1;color:var(--sapphire-pagination-color-text);gap:var(--sapphire-pagination-size-spacing-controls-horizontal)}.sapphire-pagination__text{font-weight:var(--sapphire-pagination-font-weight-alphabetic-text);padding-left:var(--sapphire-pagination-size-spacing-text-horizontal);padding-right:var(--sapphire-pagination-size-spacing-text-horizontal)}.sapphire-pagination__text--emphasized{font-weight:var(--sapphire-pagination-font-weight-numeric-text)}.sapphire-pagination__ellipsis{display:flex;justify-content:center;align-items:center;height:var(--sapphire-pagination-size-ellipsis);width:var(--sapphire-pagination-size-ellipsis);font-size:var(--sapphire-pagination-size-font-ellipsis);font-weight:var(--sapphire-pagination-font-weight-numeric-text)}sp-basic-select{margin-left:calc(-1 * var(--sapphire-button-size-spacing-horizontal-m))}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OptionComponent, selector: "sp-option", inputs: ["value", "disabled"] }, { kind: "component", type: BasicSelectComponent, selector: "sp-basic-select", inputs: ["size", "variant"], exportAs: ["spBasicSelect"] }, { kind: "directive", type: BasicSingleSelectDirective, selector: "sp-basic-select:not([multiple])" }, { kind: "component", type: IconButtonComponent, selector: "button[sp-icon-button], a[sp-icon-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "type"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }] });
7795
7819
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PaginationComponent, decorators: [{
7796
7820
  type: Component,
7797
7821
  args: [{ selector: 'sp-pagination', template: "<div class=\"sapphire-pagination\">\n <sp-basic-select\n *ngIf=\"pageSizeOptions\"\n placeholder=\"Select an option\"\n (valueChange)=\"_onPageSizeChange($event)\"\n [value]=\"'' + pageSize\"\n [disabled]=\"!!disabled\"\n aria-label=\"Number of items per page\"\n variant=\"tertiary-ghost\"\n >\n <sp-option\n *ngFor=\"let pageSizeOption of pageSizeOptions\"\n [value]=\"'' + pageSizeOption\"\n >{{ pageSizeOption + ' items per page' }}</sp-option\n >\n </sp-basic-select>\n <span class=\"sapphire-pagination__controls\">\n <span class=\"sapphire-pagination__text--emphasized\">\n {{ startItemIndex }} -\n {{ endItemIndex }}\n <span class=\"sapphire-pagination__text\"> of </span>\n {{ itemCount }}\n </span>\n <button\n sp-icon-button\n variant=\"tertiary\"\n appearance=\"ghost\"\n size=\"small\"\n (click)=\"_onPageChange('previous')\"\n [disabled]=\"_isPreviousPageButtonDisabled() || !!disabled\"\n aria-label=\"Previous\"\n >\n <sp-icon name=\"chevronLeft\"></sp-icon></button\n ><button\n sp-icon-button\n variant=\"tertiary\"\n appearance=\"ghost\"\n size=\"small\"\n (click)=\"_onPageChange('next')\"\n [disabled]=\"_isNextPageButtonDisabled() || !!disabled\"\n aria-label=\"Next\"\n >\n <sp-icon name=\"chevronRight\"></sp-icon>\n </button>\n </span>\n</div>\n", styles: [".sapphire-pagination{display:flex;justify-content:flex-end;align-items:center;padding:var(--sapphire-pagination-size-spacing-container-vertical) var(--sapphire-pagination-size-spacing-container-horizontal);background-color:var(--sapphire-pagination-color-background);font-family:var(--sapphire-pagination-font-name);font-size:var(--sapphire-pagination-size-font-page);height:var(--sapphire-pagination-size-height);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-pagination__controls{display:flex;align-items:center;justify-content:flex-end;flex-grow:1;color:var(--sapphire-pagination-color-text);gap:var(--sapphire-pagination-size-spacing-controls-horizontal)}.sapphire-pagination__text{font-weight:var(--sapphire-pagination-font-weight-alphabetic-text);padding-left:var(--sapphire-pagination-size-spacing-text-horizontal);padding-right:var(--sapphire-pagination-size-spacing-text-horizontal)}.sapphire-pagination__text--emphasized{font-weight:var(--sapphire-pagination-font-weight-numeric-text)}.sapphire-pagination__ellipsis{display:flex;justify-content:center;align-items:center;height:var(--sapphire-pagination-size-ellipsis);width:var(--sapphire-pagination-size-ellipsis);font-size:var(--sapphire-pagination-size-font-ellipsis);font-weight:var(--sapphire-pagination-font-weight-numeric-text)}sp-basic-select{margin-left:calc(-1 * var(--sapphire-button-size-spacing-horizontal-m))}\n"] }]