@danske/sapphire-angular 2.4.0 → 2.5.0

package/fesm2020/danske-sapphire-angular.mjs

@@ -2223,7 +2223,7 @@ MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
             provide: ICON_SIZE_PROVIDER,
             useExisting: forwardRef(() => MenuComponent),
         },
-    ], hostDirectives: [{ directive: i1$1.CdkMenu, outputs: ["closed", "closed"] }, { directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<div\n  class=\"sapphire-listbox\"\n  [class.sapphire-listbox--md]=\"size === 'md'\"\n  [class.sapphire-listbox--sm]=\"size === 'sm'\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".sapphire-listbox{box-sizing:border-box;margin:0;position:relative;list-style:none;outline:none;font-family:var(--sapphire-semantic-font-name-default);padding:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5)) 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-semantic-size-spacing-5) var(--sapphire-semantic-size-spacing-10);color:var(--sapphire-semantic-color-content-selection-unselected-default);outline:none;cursor:pointer;text-decoration:none;min-width:max-content}.sapphire-listbox__item--danger{color:var(--sapphire-semantic-color-content-action-danger-default)}.sapphire-listbox__item--selected{color:var(--sapphire-semantic-color-content-selection-selected-default)}.sapphire-listbox__item--selected .sapphire-listbox__content{background-color:var(--sapphire-semantic-color-background-selection-selected-default)}.sapphire-listbox__content{width:100%;max-width:calc(100vw - 2 * var(--sapphire-semantic-size-icon-lg));display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-semantic-size-spacing-30);grid-template-columns:auto 1fr var(--sapphire-semantic-size-icon-lg);padding:calc(var(--sapphire-semantic-size-spacing-30) - var(--sapphire-semantic-size-spacing-5)) var(--sapphire-semantic-size-spacing-30);border-radius:var(--sapphire-semantic-size-radius-sm);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:ease-in-out;min-height:var(--sapphire-semantic-size-height-control-xs)}.sapphire-listbox--md .sapphire-listbox__content{gap:var(--sapphire-semantic-size-spacing-25);grid-template-columns:auto 1fr var(--sapphire-semantic-size-icon-md);padding:calc(var(--sapphire-semantic-size-spacing-20) - var(--sapphire-semantic-size-spacing-5)) var(--sapphire-semantic-size-spacing-25)}.sapphire-listbox--sm .sapphire-listbox__content{gap:var(--sapphire-semantic-size-spacing-20);grid-template-columns:auto 1fr var(--sapphire-semantic-size-icon-sm);padding:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5)) var(--sapphire-semantic-size-spacing-20)}.sapphire-listbox__icon{line-height:0}.sapphire-listbox__text-container{line-height:var(--sapphire-semantic-size-line-height-md)}.sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-semantic-font-weight-default-semibold);font-size:var(--sapphire-semantic-size-font-text-lg)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-text-md)}.sapphire-listbox--md .sapphire-listbox__primary-text{font-size:var(--sapphire-semantic-size-font-text-md)}.sapphire-listbox--sm .sapphire-listbox__primary-text,.sapphire-listbox--md .sapphire-listbox__secondary-text,.sapphire-listbox--sm .sapphire-listbox__secondary-text{font-size:var(--sapphire-semantic-size-font-text-sm)}.sapphire-listbox__item:not(.sapphire-listbox__item--danger):not(.sapphire-listbox__item--selected) .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-listbox__item.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-listbox__section{padding:0;list-style:none}.sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-text-md);color:var(--sapphire-semantic-color-content-default-secondary);padding:var(--sapphire-semantic-size-spacing-30) var(--sapphire-semantic-size-spacing-40) var(--sapphire-semantic-size-spacing-20) var(--sapphire-semantic-size-spacing-40)}.sapphire-listbox--md .sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-text-sm);padding:var(--sapphire-semantic-size-spacing-25) var(--sapphire-global-size-generic-35) var(--sapphire-global-size-generic-15) var(--sapphire-global-size-generic-35)}.sapphire-listbox--sm .sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-text-sm);padding:var(--sapphire-semantic-size-spacing-20) var(--sapphire-semantic-size-spacing-30) var(--sapphire-semantic-size-spacing-10) var(--sapphire-semantic-size-spacing-30)}.sapphire-listbox__separator{height:var(--sapphire-semantic-size-border-sm);width:100%;background:var(--sapphire-semantic-color-border-separator-default);margin-top:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5));margin-bottom:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5))}.sapphire-listbox__item:not(.is-disabled).is-focus .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-focus):focus-visible .sapphire-listbox__content{box-shadow:0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring)}.sapphire-listbox__item:not(.is-disabled).is-hover:not(.is-active) .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-selection-unselected-hover);background-color:var(--sapphire-semantic-color-background-selection-unselected-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-semantic-color-content-action-danger-default);background-color:var(--sapphire-semantic-color-background-action-danger-default)}.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-semantic-color-content-selection-selected-hover);background-color:var(--sapphire-semantic-color-background-selection-selected-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-selection-unselected-active);background-color:var(--sapphire-semantic-color-background-selection-unselected-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-action-danger-active);background-color:var(--sapphire-semantic-color-background-action-danger-hover)}.sapphire-listbox__item--selected:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-selection-selected-active);background-color:var(--sapphire-semantic-color-background-selection-selected-active)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background-color:var(--sapphire-semantic-color-background-popover-default);box-shadow:var(--sapphire-semantic-shadow-popover);animation:fade-in var(--sapphire-semantic-time-fade-quick) ease-in-out;border-radius:var(--sapphire-semantic-size-radius-popover);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-popover--padded{padding:var(--sapphire-semantic-size-spacing-container-horizontal-sm)}.sapphire-popover--max-width{max-width:var(--sapphire-global-size-generic-1120)}.sapphire-menu-backdrop{background:none}\n"] });
+    ], hostDirectives: [{ directive: i1$1.CdkMenu, outputs: ["closed", "closed"] }, { directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<div\n  class=\"sapphire-listbox\"\n  [class.sapphire-listbox--md]=\"size === 'md'\"\n  [class.sapphire-listbox--sm]=\"size === 'sm'\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".sapphire-listbox{box-sizing:border-box;margin:0;position:relative;list-style:none;outline:none;font-family:var(--sapphire-semantic-font-name-default);padding:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5)) 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-semantic-size-spacing-5) var(--sapphire-semantic-size-spacing-10);color:var(--sapphire-semantic-color-content-selection-unselected-default);outline:none;cursor:pointer;text-decoration:none;min-width:max-content}.sapphire-listbox__item--danger{color:var(--sapphire-semantic-color-content-action-danger-default)}.sapphire-listbox__item--selected{color:var(--sapphire-semantic-color-content-selection-selected-default)}.sapphire-listbox__item--selected .sapphire-listbox__content{background-color:var(--sapphire-semantic-color-background-selection-selected-default)}.sapphire-listbox__content{width:100%;max-width:calc(100vw - 2 * var(--sapphire-semantic-size-icon-lg));display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-semantic-size-spacing-30);grid-template-columns:auto 1fr var(--sapphire-semantic-size-icon-lg);padding:calc(var(--sapphire-semantic-size-spacing-30) - var(--sapphire-semantic-size-spacing-5)) var(--sapphire-semantic-size-spacing-30);border-radius:var(--sapphire-semantic-size-radius-sm);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:ease-in-out;min-height:var(--sapphire-semantic-size-height-control-xs)}.sapphire-listbox--md .sapphire-listbox__content{gap:var(--sapphire-semantic-size-spacing-25);grid-template-columns:auto 1fr var(--sapphire-semantic-size-icon-md);padding:calc(var(--sapphire-semantic-size-spacing-20) - var(--sapphire-semantic-size-spacing-5)) var(--sapphire-semantic-size-spacing-25)}.sapphire-listbox--sm .sapphire-listbox__content{gap:var(--sapphire-semantic-size-spacing-20);grid-template-columns:auto 1fr var(--sapphire-semantic-size-icon-sm);padding:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5)) var(--sapphire-semantic-size-spacing-20)}.sapphire-listbox__icon{line-height:0}.sapphire-listbox__text-container{line-height:var(--sapphire-semantic-size-line-height-md)}.sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-semantic-font-weight-default-semibold);font-size:var(--sapphire-semantic-size-font-text-lg)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-text-md)}.sapphire-listbox--md .sapphire-listbox__primary-text{font-size:var(--sapphire-semantic-size-font-text-md)}.sapphire-listbox--sm .sapphire-listbox__primary-text,.sapphire-listbox--md .sapphire-listbox__secondary-text,.sapphire-listbox--sm .sapphire-listbox__secondary-text{font-size:var(--sapphire-semantic-size-font-text-sm)}.sapphire-listbox__item:not(.sapphire-listbox__item--danger):not(.sapphire-listbox__item--selected) .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-listbox__item.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-listbox__section{padding:0;list-style:none}.sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-text-md);color:var(--sapphire-semantic-color-content-default-secondary);padding:var(--sapphire-semantic-size-spacing-30) var(--sapphire-semantic-size-spacing-40) var(--sapphire-semantic-size-spacing-20) var(--sapphire-semantic-size-spacing-40)}.sapphire-listbox--md .sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-text-sm);padding:var(--sapphire-semantic-size-spacing-25) var(--sapphire-global-size-generic-35) var(--sapphire-global-size-generic-15) var(--sapphire-global-size-generic-35)}.sapphire-listbox--sm .sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-text-sm);padding:var(--sapphire-semantic-size-spacing-20) var(--sapphire-semantic-size-spacing-30) var(--sapphire-semantic-size-spacing-10) var(--sapphire-semantic-size-spacing-30)}.sapphire-listbox__separator{height:var(--sapphire-semantic-size-border-sm);width:100%;background:var(--sapphire-semantic-color-border-separator-default);margin-top:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5));margin-bottom:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5))}.sapphire-listbox__item:not(.is-disabled).is-focus .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-focus):focus-visible .sapphire-listbox__content{box-shadow:0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring)}.sapphire-listbox__item:not(.is-disabled).is-hover:not(.is-active) .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-selection-unselected-hover);background-color:var(--sapphire-semantic-color-background-selection-unselected-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-semantic-color-content-action-danger-default);background-color:var(--sapphire-semantic-color-background-action-danger-default)}.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-semantic-color-content-selection-selected-hover);background-color:var(--sapphire-semantic-color-background-selection-selected-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-selection-unselected-active);background-color:var(--sapphire-semantic-color-background-selection-unselected-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-action-danger-active);background-color:var(--sapphire-semantic-color-background-action-danger-hover)}.sapphire-listbox__item--selected:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-selection-selected-active);background-color:var(--sapphire-semantic-color-background-selection-selected-active)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background-color:var(--sapphire-semantic-color-background-popover-default);box-shadow:var(--sapphire-semantic-shadow-popover);animation:fade-in var(--sapphire-semantic-time-fade-quick) ease-in-out;border-radius:var(--sapphire-semantic-size-radius-popover);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex}.sapphire-popover__content{flex-basis:100%}.sapphire-popover--padded{padding:var(--sapphire-semantic-size-spacing-container-horizontal-sm)}.sapphire-popover--max-width{max-width:var(--sapphire-global-size-generic-1120)}.sapphire-menu-backdrop{background:none}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sp-menu', hostDirectives: [
@@ -2241,7 +2241,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                             provide: ICON_SIZE_PROVIDER,
                             useExisting: forwardRef(() => MenuComponent),
                         },
-                    ], template: "<div\n  class=\"sapphire-listbox\"\n  [class.sapphire-listbox--md]=\"size === 'md'\"\n  [class.sapphire-listbox--sm]=\"size === 'sm'\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".sapphire-listbox{box-sizing:border-box;margin:0;position:relative;list-style:none;outline:none;font-family:var(--sapphire-semantic-font-name-default);padding:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5)) 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-semantic-size-spacing-5) var(--sapphire-semantic-size-spacing-10);color:var(--sapphire-semantic-color-content-selection-unselected-default);outline:none;cursor:pointer;text-decoration:none;min-width:max-content}.sapphire-listbox__item--danger{color:var(--sapphire-semantic-color-content-action-danger-default)}.sapphire-listbox__item--selected{color:var(--sapphire-semantic-color-content-selection-selected-default)}.sapphire-listbox__item--selected .sapphire-listbox__content{background-color:var(--sapphire-semantic-color-background-selection-selected-default)}.sapphire-listbox__content{width:100%;max-width:calc(100vw - 2 * var(--sapphire-semantic-size-icon-lg));display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-semantic-size-spacing-30);grid-template-columns:auto 1fr var(--sapphire-semantic-size-icon-lg);padding:calc(var(--sapphire-semantic-size-spacing-30) - var(--sapphire-semantic-size-spacing-5)) var(--sapphire-semantic-size-spacing-30);border-radius:var(--sapphire-semantic-size-radius-sm);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:ease-in-out;min-height:var(--sapphire-semantic-size-height-control-xs)}.sapphire-listbox--md .sapphire-listbox__content{gap:var(--sapphire-semantic-size-spacing-25);grid-template-columns:auto 1fr var(--sapphire-semantic-size-icon-md);padding:calc(var(--sapphire-semantic-size-spacing-20) - var(--sapphire-semantic-size-spacing-5)) var(--sapphire-semantic-size-spacing-25)}.sapphire-listbox--sm .sapphire-listbox__content{gap:var(--sapphire-semantic-size-spacing-20);grid-template-columns:auto 1fr var(--sapphire-semantic-size-icon-sm);padding:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5)) var(--sapphire-semantic-size-spacing-20)}.sapphire-listbox__icon{line-height:0}.sapphire-listbox__text-container{line-height:var(--sapphire-semantic-size-line-height-md)}.sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-semantic-font-weight-default-semibold);font-size:var(--sapphire-semantic-size-font-text-lg)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-text-md)}.sapphire-listbox--md .sapphire-listbox__primary-text{font-size:var(--sapphire-semantic-size-font-text-md)}.sapphire-listbox--sm .sapphire-listbox__primary-text,.sapphire-listbox--md .sapphire-listbox__secondary-text,.sapphire-listbox--sm .sapphire-listbox__secondary-text{font-size:var(--sapphire-semantic-size-font-text-sm)}.sapphire-listbox__item:not(.sapphire-listbox__item--danger):not(.sapphire-listbox__item--selected) .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-listbox__item.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-listbox__section{padding:0;list-style:none}.sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-text-md);color:var(--sapphire-semantic-color-content-default-secondary);padding:var(--sapphire-semantic-size-spacing-30) var(--sapphire-semantic-size-spacing-40) var(--sapphire-semantic-size-spacing-20) var(--sapphire-semantic-size-spacing-40)}.sapphire-listbox--md .sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-text-sm);padding:var(--sapphire-semantic-size-spacing-25) var(--sapphire-global-size-generic-35) var(--sapphire-global-size-generic-15) var(--sapphire-global-size-generic-35)}.sapphire-listbox--sm .sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-text-sm);padding:var(--sapphire-semantic-size-spacing-20) var(--sapphire-semantic-size-spacing-30) var(--sapphire-semantic-size-spacing-10) var(--sapphire-semantic-size-spacing-30)}.sapphire-listbox__separator{height:var(--sapphire-semantic-size-border-sm);width:100%;background:var(--sapphire-semantic-color-border-separator-default);margin-top:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5));margin-bottom:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5))}.sapphire-listbox__item:not(.is-disabled).is-focus .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-focus):focus-visible .sapphire-listbox__content{box-shadow:0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring)}.sapphire-listbox__item:not(.is-disabled).is-hover:not(.is-active) .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-selection-unselected-hover);background-color:var(--sapphire-semantic-color-background-selection-unselected-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-semantic-color-content-action-danger-default);background-color:var(--sapphire-semantic-color-background-action-danger-default)}.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-semantic-color-content-selection-selected-hover);background-color:var(--sapphire-semantic-color-background-selection-selected-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-selection-unselected-active);background-color:var(--sapphire-semantic-color-background-selection-unselected-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-action-danger-active);background-color:var(--sapphire-semantic-color-background-action-danger-hover)}.sapphire-listbox__item--selected:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-selection-selected-active);background-color:var(--sapphire-semantic-color-background-selection-selected-active)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background-color:var(--sapphire-semantic-color-background-popover-default);box-shadow:var(--sapphire-semantic-shadow-popover);animation:fade-in var(--sapphire-semantic-time-fade-quick) ease-in-out;border-radius:var(--sapphire-semantic-size-radius-popover);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-popover--padded{padding:var(--sapphire-semantic-size-spacing-container-horizontal-sm)}.sapphire-popover--max-width{max-width:var(--sapphire-global-size-generic-1120)}.sapphire-menu-backdrop{background:none}\n"] }]
+                    ], template: "<div\n  class=\"sapphire-listbox\"\n  [class.sapphire-listbox--md]=\"size === 'md'\"\n  [class.sapphire-listbox--sm]=\"size === 'sm'\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".sapphire-listbox{box-sizing:border-box;margin:0;position:relative;list-style:none;outline:none;font-family:var(--sapphire-semantic-font-name-default);padding:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5)) 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-semantic-size-spacing-5) var(--sapphire-semantic-size-spacing-10);color:var(--sapphire-semantic-color-content-selection-unselected-default);outline:none;cursor:pointer;text-decoration:none;min-width:max-content}.sapphire-listbox__item--danger{color:var(--sapphire-semantic-color-content-action-danger-default)}.sapphire-listbox__item--selected{color:var(--sapphire-semantic-color-content-selection-selected-default)}.sapphire-listbox__item--selected .sapphire-listbox__content{background-color:var(--sapphire-semantic-color-background-selection-selected-default)}.sapphire-listbox__content{width:100%;max-width:calc(100vw - 2 * var(--sapphire-semantic-size-icon-lg));display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-semantic-size-spacing-30);grid-template-columns:auto 1fr var(--sapphire-semantic-size-icon-lg);padding:calc(var(--sapphire-semantic-size-spacing-30) - var(--sapphire-semantic-size-spacing-5)) var(--sapphire-semantic-size-spacing-30);border-radius:var(--sapphire-semantic-size-radius-sm);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:ease-in-out;min-height:var(--sapphire-semantic-size-height-control-xs)}.sapphire-listbox--md .sapphire-listbox__content{gap:var(--sapphire-semantic-size-spacing-25);grid-template-columns:auto 1fr var(--sapphire-semantic-size-icon-md);padding:calc(var(--sapphire-semantic-size-spacing-20) - var(--sapphire-semantic-size-spacing-5)) var(--sapphire-semantic-size-spacing-25)}.sapphire-listbox--sm .sapphire-listbox__content{gap:var(--sapphire-semantic-size-spacing-20);grid-template-columns:auto 1fr var(--sapphire-semantic-size-icon-sm);padding:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5)) var(--sapphire-semantic-size-spacing-20)}.sapphire-listbox__icon{line-height:0}.sapphire-listbox__text-container{line-height:var(--sapphire-semantic-size-line-height-md)}.sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-semantic-font-weight-default-semibold);font-size:var(--sapphire-semantic-size-font-text-lg)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-text-md)}.sapphire-listbox--md .sapphire-listbox__primary-text{font-size:var(--sapphire-semantic-size-font-text-md)}.sapphire-listbox--sm .sapphire-listbox__primary-text,.sapphire-listbox--md .sapphire-listbox__secondary-text,.sapphire-listbox--sm .sapphire-listbox__secondary-text{font-size:var(--sapphire-semantic-size-font-text-sm)}.sapphire-listbox__item:not(.sapphire-listbox__item--danger):not(.sapphire-listbox__item--selected) .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-listbox__item.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-listbox__section{padding:0;list-style:none}.sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-text-md);color:var(--sapphire-semantic-color-content-default-secondary);padding:var(--sapphire-semantic-size-spacing-30) var(--sapphire-semantic-size-spacing-40) var(--sapphire-semantic-size-spacing-20) var(--sapphire-semantic-size-spacing-40)}.sapphire-listbox--md .sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-text-sm);padding:var(--sapphire-semantic-size-spacing-25) var(--sapphire-global-size-generic-35) var(--sapphire-global-size-generic-15) var(--sapphire-global-size-generic-35)}.sapphire-listbox--sm .sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-text-sm);padding:var(--sapphire-semantic-size-spacing-20) var(--sapphire-semantic-size-spacing-30) var(--sapphire-semantic-size-spacing-10) var(--sapphire-semantic-size-spacing-30)}.sapphire-listbox__separator{height:var(--sapphire-semantic-size-border-sm);width:100%;background:var(--sapphire-semantic-color-border-separator-default);margin-top:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5));margin-bottom:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5))}.sapphire-listbox__item:not(.is-disabled).is-focus .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-focus):focus-visible .sapphire-listbox__content{box-shadow:0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring)}.sapphire-listbox__item:not(.is-disabled).is-hover:not(.is-active) .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-selection-unselected-hover);background-color:var(--sapphire-semantic-color-background-selection-unselected-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-semantic-color-content-action-danger-default);background-color:var(--sapphire-semantic-color-background-action-danger-default)}.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-semantic-color-content-selection-selected-hover);background-color:var(--sapphire-semantic-color-background-selection-selected-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-selection-unselected-active);background-color:var(--sapphire-semantic-color-background-selection-unselected-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-action-danger-active);background-color:var(--sapphire-semantic-color-background-action-danger-hover)}.sapphire-listbox__item--selected:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-selection-selected-active);background-color:var(--sapphire-semantic-color-background-selection-selected-active)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background-color:var(--sapphire-semantic-color-background-popover-default);box-shadow:var(--sapphire-semantic-shadow-popover);animation:fade-in var(--sapphire-semantic-time-fade-quick) ease-in-out;border-radius:var(--sapphire-semantic-size-radius-popover);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex}.sapphire-popover__content{flex-basis:100%}.sapphire-popover--padded{padding:var(--sapphire-semantic-size-spacing-container-horizontal-sm)}.sapphire-popover--max-width{max-width:var(--sapphire-global-size-generic-1120)}.sapphire-menu-backdrop{background:none}\n"] }]
         }], propDecorators: { size: [{
                 type: Input
             }] } });
@@ -2996,7 +2996,7 @@ class PopoverComponent {
     }
 }
 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 });
-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-semantic-color-background-popover-default);box-shadow:var(--sapphire-semantic-shadow-popover);animation:fade-in var(--sapphire-semantic-time-fade-quick) ease-in-out;border-radius:var(--sapphire-semantic-size-radius-popover);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-popover--padded{padding:var(--sapphire-semantic-size-spacing-container-horizontal-sm)}.sapphire-popover--max-width{max-width:var(--sapphire-global-size-generic-1120)}.dialog{outline:none}\n"], dependencies: [{ kind: "directive", type: i2$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i2$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }] });
+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 class=\"sapphire-popover__content\" role=\"presentation\">\n  <!-- NOTE: the role-dialog wrapper is only needed for generic popovers.\n   In use cases like Select, role=listbox doesn't need to be wrapped in the role=dialog element,\n   and that's how it is in the React impl (role=dialog is rendered only when PopoverTrigger is used)\n   We can consider allowing for no dialog wrapper for use cases like Select, but it requires\n   some refactoring around the focus management directives.\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</div>\n", styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background-color:var(--sapphire-semantic-color-background-popover-default);box-shadow:var(--sapphire-semantic-shadow-popover);animation:fade-in var(--sapphire-semantic-time-fade-quick) ease-in-out;border-radius:var(--sapphire-semantic-size-radius-popover);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex}.sapphire-popover__content{flex-basis:100%}.sapphire-popover--padded{padding:var(--sapphire-semantic-size-spacing-container-horizontal-sm)}.sapphire-popover--max-width{max-width:var(--sapphire-global-size-generic-1120)}.dialog{outline:none;height:100%}\n"], dependencies: [{ kind: "directive", type: i2$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i2$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }] });
 __decorate([
     CoerceBoolean
 ], PopoverComponent.prototype, "noPadding", void 0);
@@ -3016,7 +3016,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                         '[class.sapphire-popover--padded]': '!noPadding',
                         '[class.sapphire-popover--max-width]': '!noMaxWidth',
                         role: 'presentation',
-                    }, hostDirectives: [ThemeCheckDirective, UseComponentStylesOnHost], 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-semantic-color-background-popover-default);box-shadow:var(--sapphire-semantic-shadow-popover);animation:fade-in var(--sapphire-semantic-time-fade-quick) ease-in-out;border-radius:var(--sapphire-semantic-size-radius-popover);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-popover--padded{padding:var(--sapphire-semantic-size-spacing-container-horizontal-sm)}.sapphire-popover--max-width{max-width:var(--sapphire-global-size-generic-1120)}.dialog{outline:none}\n"] }]
+                    }, hostDirectives: [ThemeCheckDirective, UseComponentStylesOnHost], 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 class=\"sapphire-popover__content\" role=\"presentation\">\n  <!-- NOTE: the role-dialog wrapper is only needed for generic popovers.\n   In use cases like Select, role=listbox doesn't need to be wrapped in the role=dialog element,\n   and that's how it is in the React impl (role=dialog is rendered only when PopoverTrigger is used)\n   We can consider allowing for no dialog wrapper for use cases like Select, but it requires\n   some refactoring around the focus management directives.\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</div>\n", styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background-color:var(--sapphire-semantic-color-background-popover-default);box-shadow:var(--sapphire-semantic-shadow-popover);animation:fade-in var(--sapphire-semantic-time-fade-quick) ease-in-out;border-radius:var(--sapphire-semantic-size-radius-popover);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex}.sapphire-popover__content{flex-basis:100%}.sapphire-popover--padded{padding:var(--sapphire-semantic-size-spacing-container-horizontal-sm)}.sapphire-popover--max-width{max-width:var(--sapphire-global-size-generic-1120)}.dialog{outline:none;height:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -4993,7 +4993,7 @@ SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
             provide: FieldControl,
             useExisting: forwardRef(() => SelectComponent),
         },
-    ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true }, { propertyName: "triggerElementRef", first: true, predicate: ["triggerElementRef"], descendants: true, read: ElementRef }, { propertyName: "listbox", first: true, predicate: ListboxComponent, descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef }], exportAs: ["spSelect"], usesInheritance: true, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<sp-hidden-select></sp-hidden-select>\n<div\n  role=\"button\"\n  aria-haspopup=\"listbox\"\n  class=\"sapphire-select__button\"\n  [spPopoverTriggerFor]=\"popover\"\n  [spPopoverTriggerDisabled]=\"disabled\"\n  spPopoverTriggerOpenOnPressStart\n  spPopoverTriggerCloseOnScroll\n  spPopoverPlacement=\"bottom start\"\n  #triggerElementRef\n  #triggerRef=\"spPopoverTrigger\"\n  (keydown)=\"handleKeyDown($event)\"\n  (spPopoverTriggerClosed)=\"_onClose()\"\n  (spPopoverTriggerOpened)=\"_onOpen()\"\n  (focus)=\"_onFocus()\"\n  cdkMonitorSubtreeFocus\n  (cdkFocusChange)=\"_onFocusChange($event)\"\n  [spPopoverNonModal]=\"searchable\"\n  spPopoverDisablePushInsideViewport=\"true\"\n  [id]=\"id\"\n  [tabindex]=\"-1\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"_getAriaLabelledBy()\"\n  [attr.aria-describedby]=\"_field?.error?.id || _field?.note?.id\"\n  [attr.aria-invalid]=\"_field?.hasError(this) ? true : null\"\n>\n  <div class=\"sapphire-select__value\" [id]=\"_valueContainerId\">\n    <input\n      *ngIf=\"searchable\"\n      #searchInput\n      tabindex=\"-1\"\n      role=\"combobox\"\n      class=\"sapphire-select__search-input\"\n      [spListboxInput]=\"listbox\"\n      [spVisuallyHidden]=\"!_isInputVisible()\"\n      [attr.data-hidden]=\"!_isInputVisible()\"\n      [placeholder]=\"placeholder || ''\"\n      (keydown)=\"_onInputKeydown($event)\"\n      (beforeinput)=\"open()\"\n      [value]=\"_searchableSelectDirective?.searchValue\"\n      (input)=\"_onSearchInput($event)\"\n    />\n    <ng-container *ngIf=\"!searchable || !_isInputVisible()\">\n      <div\n        *ngIf=\"selectedOptions.length === 0\"\n        class=\"sapphire-select__placeholder\"\n      >\n        {{ placeholder }}\n      </div>\n      <ng-container *ngIf=\"selectedOptions.length > 0\">\n        <ng-container *ngIf=\"!selectionText\">{{\n          getSelectionText()\n        }}</ng-container>\n        <ng-content select=\"sp-selection-text\"></ng-content>\n      </ng-container>\n    </ng-container>\n  </div>\n  <div class=\"sapphire-select__icon-container\">\n    <sp-icon name=\"chevronDown\"></sp-icon>\n  </div>\n</div>\n<ng-template #popover>\n  <sp-popover\n    [style.display]=\"\n      (filteredChildren$ | async)?.length === 0 ? 'none' : undefined\n    \"\n    noPadding\n    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:block;color:var(--sapphire-semantic-color-content-default-primary);font-family:var(--sapphire-semantic-font-name-default);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-semantic-size-height-input-lg);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);border:none;background-color:var(--sapphire-semantic-color-background-field-default);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 1px var(--sapphire-semantic-color-border-field-default);border-radius:var(--sapphire-semantic-size-radius-sm);gap:var(--sapphire-semantic-size-spacing-30)}.sapphire-select--md .sapphire-select__button{height:var(--sapphire-semantic-size-height-input-md);padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-md);gap:var(--sapphire-semantic-size-spacing-20)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-semantic-size-font-control-default);width:100%;font-weight:var(--sapphire-semantic-font-weight-default-regular);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--md .sapphire-select__value{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-semantic-size-icon-lg);height:var(--sapphire-semantic-size-icon-lg)}.sapphire-select--md .sapphire-select__icon-container{width:var(--sapphire-semantic-size-icon-md);height:var(--sapphire-semantic-size-icon-md)}.sapphire-select__prefix{display:inherit;font-size:var(--sapphire-semantic-size-font-control-default)}.sapphire-select--md .sapphire-select__prefix{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-select__native-select{position:absolute;inset:0;opacity:.01;width:100%;z-index:1}.sapphire-select--error:not(.is-disabled) .sapphire-select__button{box-shadow:inset 0 0 0 1px var(--sapphire-semantic-color-border-field-error)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-border-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", "spPopoverDisablePushInsideViewport"], outputs: ["spPopoverTriggerOpened", "spPopoverTriggerClosed"], exportAs: ["spPopoverTrigger"] }, { kind: "directive", type: i2$2.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" }] });
+    ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true }, { propertyName: "triggerElementRef", first: true, predicate: ["triggerElementRef"], descendants: true, read: ElementRef }, { propertyName: "listbox", first: true, predicate: ListboxComponent, descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef }], exportAs: ["spSelect"], usesInheritance: true, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<sp-hidden-select></sp-hidden-select>\n<div\n  role=\"button\"\n  aria-haspopup=\"listbox\"\n  class=\"sapphire-select__button\"\n  [spPopoverTriggerFor]=\"popover\"\n  [spPopoverTriggerDisabled]=\"disabled\"\n  spPopoverTriggerOpenOnPressStart\n  spPopoverTriggerCloseOnScroll\n  spPopoverPlacement=\"bottom start\"\n  #triggerElementRef\n  #triggerRef=\"spPopoverTrigger\"\n  (keydown)=\"handleKeyDown($event)\"\n  (spPopoverTriggerClosed)=\"_onClose()\"\n  (spPopoverTriggerOpened)=\"_onOpen()\"\n  (focus)=\"_onFocus()\"\n  cdkMonitorSubtreeFocus\n  (cdkFocusChange)=\"_onFocusChange($event)\"\n  [spPopoverNonModal]=\"searchable\"\n  spPopoverDisablePushInsideViewport=\"true\"\n  [id]=\"id\"\n  [tabindex]=\"-1\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"_getAriaLabelledBy()\"\n  [attr.aria-describedby]=\"_field?.error?.id || _field?.note?.id\"\n  [attr.aria-invalid]=\"_field?.hasError(this) ? true : null\"\n>\n  <div class=\"sapphire-select__value\" [id]=\"_valueContainerId\">\n    <input\n      *ngIf=\"searchable\"\n      #searchInput\n      tabindex=\"-1\"\n      role=\"combobox\"\n      class=\"sapphire-select__search-input\"\n      [spListboxInput]=\"listbox\"\n      [spVisuallyHidden]=\"!_isInputVisible()\"\n      [attr.data-hidden]=\"!_isInputVisible()\"\n      [placeholder]=\"placeholder || ''\"\n      (keydown)=\"_onInputKeydown($event)\"\n      (beforeinput)=\"open()\"\n      [value]=\"_searchableSelectDirective?.searchValue\"\n      (input)=\"_onSearchInput($event)\"\n    />\n    <ng-container *ngIf=\"!searchable || !_isInputVisible()\">\n      <div\n        *ngIf=\"selectedOptions.length === 0\"\n        class=\"sapphire-select__placeholder\"\n      >\n        {{ placeholder }}\n      </div>\n      <ng-container *ngIf=\"selectedOptions.length > 0\">\n        <ng-container *ngIf=\"!selectionText\">{{\n          getSelectionText()\n        }}</ng-container>\n        <ng-content select=\"sp-selection-text\"></ng-content>\n      </ng-container>\n    </ng-container>\n  </div>\n  <div class=\"sapphire-select__icon-container\">\n    <sp-icon name=\"chevronDown\"></sp-icon>\n  </div>\n</div>\n<ng-template #popover>\n  <sp-popover\n    [style.display]=\"\n      (filteredChildren$ | async)?.length === 0 ? 'none' : undefined\n    \"\n    noPadding\n    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:block;color:var(--sapphire-semantic-color-content-default-primary);font-family:var(--sapphire-semantic-font-name-default);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-semantic-size-height-input-lg);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);border:none;background-color:var(--sapphire-semantic-color-background-field-default);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 1px var(--sapphire-semantic-color-border-field-default);border-radius:var(--sapphire-semantic-size-radius-sm);gap:var(--sapphire-semantic-size-spacing-30)}.sapphire-select--md .sapphire-select__button{height:var(--sapphire-semantic-size-height-input-md);padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-md);gap:var(--sapphire-semantic-size-spacing-20)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-semantic-size-font-control-default);width:100%;font-weight:var(--sapphire-semantic-font-weight-default-regular);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--md .sapphire-select__value{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-semantic-color-content-default-secondary);pointer-events:none}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-semantic-size-icon-lg);height:var(--sapphire-semantic-size-icon-lg)}.sapphire-select--md .sapphire-select__icon-container{width:var(--sapphire-semantic-size-icon-md);height:var(--sapphire-semantic-size-icon-md)}.sapphire-select__prefix{display:inherit;font-size:var(--sapphire-semantic-size-font-control-default)}.sapphire-select--md .sapphire-select__prefix{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-select__native-select{position:absolute;inset:0;opacity:.01;width:100%;z-index:1}.sapphire-select--error:not(.is-disabled) .sapphire-select__button{box-shadow:inset 0 0 0 1px var(--sapphire-semantic-color-border-field-error)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-border-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", "spPopoverDisablePushInsideViewport"], outputs: ["spPopoverTriggerOpened", "spPopoverTriggerClosed"], exportAs: ["spPopoverTrigger"] }, { kind: "directive", type: i2$2.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" }] });
 __decorate([
     AutoId()
 ], SelectComponent.prototype, "_valueContainerId", void 0);
@@ -5023,7 +5023,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                         '[attr.aria-label]': 'null',
                         '[attr.aria-labelledby]': 'null',
                         '[attr.placeholder]': 'null',
-                    }, 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  spPopoverDisablePushInsideViewport=\"true\"\n  [id]=\"id\"\n  [tabindex]=\"-1\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"_getAriaLabelledBy()\"\n  [attr.aria-describedby]=\"_field?.error?.id || _field?.note?.id\"\n  [attr.aria-invalid]=\"_field?.hasError(this) ? true : null\"\n>\n  <div class=\"sapphire-select__value\" [id]=\"_valueContainerId\">\n    <input\n      *ngIf=\"searchable\"\n      #searchInput\n      tabindex=\"-1\"\n      role=\"combobox\"\n      class=\"sapphire-select__search-input\"\n      [spListboxInput]=\"listbox\"\n      [spVisuallyHidden]=\"!_isInputVisible()\"\n      [attr.data-hidden]=\"!_isInputVisible()\"\n      [placeholder]=\"placeholder || ''\"\n      (keydown)=\"_onInputKeydown($event)\"\n      (beforeinput)=\"open()\"\n      [value]=\"_searchableSelectDirective?.searchValue\"\n      (input)=\"_onSearchInput($event)\"\n    />\n    <ng-container *ngIf=\"!searchable || !_isInputVisible()\">\n      <div\n        *ngIf=\"selectedOptions.length === 0\"\n        class=\"sapphire-select__placeholder\"\n      >\n        {{ placeholder }}\n      </div>\n      <ng-container *ngIf=\"selectedOptions.length > 0\">\n        <ng-container *ngIf=\"!selectionText\">{{\n          getSelectionText()\n        }}</ng-container>\n        <ng-content select=\"sp-selection-text\"></ng-content>\n      </ng-container>\n    </ng-container>\n  </div>\n  <div class=\"sapphire-select__icon-container\">\n    <sp-icon name=\"chevronDown\"></sp-icon>\n  </div>\n</div>\n<ng-template #popover>\n  <sp-popover\n    [style.display]=\"\n      (filteredChildren$ | async)?.length === 0 ? 'none' : undefined\n    \"\n    noPadding\n    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:block;color:var(--sapphire-semantic-color-content-default-primary);font-family:var(--sapphire-semantic-font-name-default);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-semantic-size-height-input-lg);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);border:none;background-color:var(--sapphire-semantic-color-background-field-default);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 1px var(--sapphire-semantic-color-border-field-default);border-radius:var(--sapphire-semantic-size-radius-sm);gap:var(--sapphire-semantic-size-spacing-30)}.sapphire-select--md .sapphire-select__button{height:var(--sapphire-semantic-size-height-input-md);padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-md);gap:var(--sapphire-semantic-size-spacing-20)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-semantic-size-font-control-default);width:100%;font-weight:var(--sapphire-semantic-font-weight-default-regular);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--md .sapphire-select__value{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-semantic-size-icon-lg);height:var(--sapphire-semantic-size-icon-lg)}.sapphire-select--md .sapphire-select__icon-container{width:var(--sapphire-semantic-size-icon-md);height:var(--sapphire-semantic-size-icon-md)}.sapphire-select__prefix{display:inherit;font-size:var(--sapphire-semantic-size-font-control-default)}.sapphire-select--md .sapphire-select__prefix{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-select__native-select{position:absolute;inset:0;opacity:.01;width:100%;z-index:1}.sapphire-select--error:not(.is-disabled) .sapphire-select__button{box-shadow:inset 0 0 0 1px var(--sapphire-semantic-color-border-field-error)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-border-field-error)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed}\n"] }]
+                    }, 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  spPopoverDisablePushInsideViewport=\"true\"\n  [id]=\"id\"\n  [tabindex]=\"-1\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"_getAriaLabelledBy()\"\n  [attr.aria-describedby]=\"_field?.error?.id || _field?.note?.id\"\n  [attr.aria-invalid]=\"_field?.hasError(this) ? true : null\"\n>\n  <div class=\"sapphire-select__value\" [id]=\"_valueContainerId\">\n    <input\n      *ngIf=\"searchable\"\n      #searchInput\n      tabindex=\"-1\"\n      role=\"combobox\"\n      class=\"sapphire-select__search-input\"\n      [spListboxInput]=\"listbox\"\n      [spVisuallyHidden]=\"!_isInputVisible()\"\n      [attr.data-hidden]=\"!_isInputVisible()\"\n      [placeholder]=\"placeholder || ''\"\n      (keydown)=\"_onInputKeydown($event)\"\n      (beforeinput)=\"open()\"\n      [value]=\"_searchableSelectDirective?.searchValue\"\n      (input)=\"_onSearchInput($event)\"\n    />\n    <ng-container *ngIf=\"!searchable || !_isInputVisible()\">\n      <div\n        *ngIf=\"selectedOptions.length === 0\"\n        class=\"sapphire-select__placeholder\"\n      >\n        {{ placeholder }}\n      </div>\n      <ng-container *ngIf=\"selectedOptions.length > 0\">\n        <ng-container *ngIf=\"!selectionText\">{{\n          getSelectionText()\n        }}</ng-container>\n        <ng-content select=\"sp-selection-text\"></ng-content>\n      </ng-container>\n    </ng-container>\n  </div>\n  <div class=\"sapphire-select__icon-container\">\n    <sp-icon name=\"chevronDown\"></sp-icon>\n  </div>\n</div>\n<ng-template #popover>\n  <sp-popover\n    [style.display]=\"\n      (filteredChildren$ | async)?.length === 0 ? 'none' : undefined\n    \"\n    noPadding\n    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:block;color:var(--sapphire-semantic-color-content-default-primary);font-family:var(--sapphire-semantic-font-name-default);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-semantic-size-height-input-lg);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);border:none;background-color:var(--sapphire-semantic-color-background-field-default);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 1px var(--sapphire-semantic-color-border-field-default);border-radius:var(--sapphire-semantic-size-radius-sm);gap:var(--sapphire-semantic-size-spacing-30)}.sapphire-select--md .sapphire-select__button{height:var(--sapphire-semantic-size-height-input-md);padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-md);gap:var(--sapphire-semantic-size-spacing-20)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-semantic-size-font-control-default);width:100%;font-weight:var(--sapphire-semantic-font-weight-default-regular);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--md .sapphire-select__value{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-semantic-color-content-default-secondary);pointer-events:none}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-semantic-size-icon-lg);height:var(--sapphire-semantic-size-icon-lg)}.sapphire-select--md .sapphire-select__icon-container{width:var(--sapphire-semantic-size-icon-md);height:var(--sapphire-semantic-size-icon-md)}.sapphire-select__prefix{display:inherit;font-size:var(--sapphire-semantic-size-font-control-default)}.sapphire-select--md .sapphire-select__prefix{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-select__native-select{position:absolute;inset:0;opacity:.01;width:100%;z-index:1}.sapphire-select--error:not(.is-disabled) .sapphire-select__button{box-shadow:inset 0 0 0 1px var(--sapphire-semantic-color-border-field-error)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-border-field-error)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed}\n"] }]
         }], ctorParameters: function () { return [{ type: SelectValueHolder }, { type: i2$2.FocusMonitor }, { type: i2$2.InputModalityDetector }, { type: FieldComponent, decorators: [{
                     type: Optional
                 }] }, { type: SearchableSelectDirective, decorators: [{
@@ -5124,7 +5124,7 @@ BasicSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             useExisting: forwardRef(() => BasicSelectComponent),
         },
         ViewEncapsulationProvider,
-    ], 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]=\"variant\"\n    [size]=\"size\"\n    iconAlign=\"right\"\n    [spPopoverTriggerFor]=\"popover\"\n    spPopoverPlacement=\"bottom start\"\n    #triggerElementRef\n    #triggerRef=\"spPopoverTrigger\"\n    (keydown)=\"handleKeyDown($event)\"\n    (spPopoverTriggerOpened)=\"_onOpen()\"\n    (spPopoverTriggerClosed)=\"_onClose()\"\n    cdkMonitorElementFocus\n    (cdkFocusChange)=\"_onFocusChange($event)\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledby\"\n    [disabled]=\"disabled\"\n  >\n    <span *ngIf=\"selectedOptions.length === 0\">\n      {{ placeholder }}\n    </span>\n    <ng-container *ngIf=\"selectedOptions.length > 0\">\n      <ng-container *ngIf=\"!selectionText\">{{\n        getSelectionText()\n      }}</ng-container>\n      <ng-content select=\"sp-selection-text\"></ng-content>\n    </ng-container>\n    <sp-icon spButtonIcon name=\"chevronDown\"></sp-icon>\n  </button>\n  <ng-template #popover>\n    <sp-popover noPadding>\n      <sp-listbox\n        [spListboxItems]=\"listboxChildren\"\n        navigationWrapDisabled\n        [multiple]=\"multiple\"\n        [(selectedValues)]=\"listboxValue\"\n        (selected)=\"_handleSelected()\"\n        [size]=\"size\"\n      >\n      </sp-listbox>\n    </sp-popover>\n  </ng-template>\n</div>\n", styles: [".sapphire-select{position:relative;display:block;color:var(--sapphire-semantic-color-content-default-primary);font-family:var(--sapphire-semantic-font-name-default);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-semantic-size-height-input-lg);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);border:none;background-color:var(--sapphire-semantic-color-background-field-default);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 1px var(--sapphire-semantic-color-border-field-default);border-radius:var(--sapphire-semantic-size-radius-sm);gap:var(--sapphire-semantic-size-spacing-30)}.sapphire-select--md .sapphire-select__button{height:var(--sapphire-semantic-size-height-input-md);padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-md);gap:var(--sapphire-semantic-size-spacing-20)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-semantic-size-font-control-default);width:100%;font-weight:var(--sapphire-semantic-font-weight-default-regular);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--md .sapphire-select__value{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-semantic-size-icon-lg);height:var(--sapphire-semantic-size-icon-lg)}.sapphire-select--md .sapphire-select__icon-container{width:var(--sapphire-semantic-size-icon-md);height:var(--sapphire-semantic-size-icon-md)}.sapphire-select__prefix{display:inherit;font-size:var(--sapphire-semantic-size-font-control-default)}.sapphire-select--md .sapphire-select__prefix{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-select__native-select{position:absolute;inset:0;opacity:.01;width:100%;z-index:1}.sapphire-select--error:not(.is-disabled) .sapphire-select__button{box-shadow:inset 0 0 0 1px var(--sapphire-semantic-color-border-field-error)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-border-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", "spPopoverDisablePushInsideViewport"], outputs: ["spPopoverTriggerOpened", "spPopoverTriggerClosed"], exportAs: ["spPopoverTrigger"] }, { kind: "directive", type: i2$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "component", type: ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: ["variant", "size", "disabled", "iconAlign", "type"] }, { kind: "directive", type: ButtonIconDirective, selector: "[spButtonIcon]" }, { kind: "component", type: HiddenSelectComponent, selector: "sp-hidden-select" }] });
+    ], 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]=\"variant\"\n    [size]=\"size\"\n    iconAlign=\"right\"\n    [spPopoverTriggerFor]=\"popover\"\n    spPopoverPlacement=\"bottom start\"\n    #triggerElementRef\n    #triggerRef=\"spPopoverTrigger\"\n    (keydown)=\"handleKeyDown($event)\"\n    (spPopoverTriggerOpened)=\"_onOpen()\"\n    (spPopoverTriggerClosed)=\"_onClose()\"\n    cdkMonitorElementFocus\n    (cdkFocusChange)=\"_onFocusChange($event)\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledby\"\n    [disabled]=\"disabled\"\n  >\n    <span *ngIf=\"selectedOptions.length === 0\">\n      {{ placeholder }}\n    </span>\n    <ng-container *ngIf=\"selectedOptions.length > 0\">\n      <ng-container *ngIf=\"!selectionText\">{{\n        getSelectionText()\n      }}</ng-container>\n      <ng-content select=\"sp-selection-text\"></ng-content>\n    </ng-container>\n    <sp-icon spButtonIcon name=\"chevronDown\"></sp-icon>\n  </button>\n  <ng-template #popover>\n    <sp-popover noPadding>\n      <sp-listbox\n        [spListboxItems]=\"listboxChildren\"\n        navigationWrapDisabled\n        [multiple]=\"multiple\"\n        [(selectedValues)]=\"listboxValue\"\n        (selected)=\"_handleSelected()\"\n        [size]=\"size\"\n      >\n      </sp-listbox>\n    </sp-popover>\n  </ng-template>\n</div>\n", styles: [".sapphire-select{position:relative;display:block;color:var(--sapphire-semantic-color-content-default-primary);font-family:var(--sapphire-semantic-font-name-default);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-semantic-size-height-input-lg);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);border:none;background-color:var(--sapphire-semantic-color-background-field-default);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 1px var(--sapphire-semantic-color-border-field-default);border-radius:var(--sapphire-semantic-size-radius-sm);gap:var(--sapphire-semantic-size-spacing-30)}.sapphire-select--md .sapphire-select__button{height:var(--sapphire-semantic-size-height-input-md);padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-md);gap:var(--sapphire-semantic-size-spacing-20)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-semantic-size-font-control-default);width:100%;font-weight:var(--sapphire-semantic-font-weight-default-regular);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--md .sapphire-select__value{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-semantic-color-content-default-secondary);pointer-events:none}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-semantic-size-icon-lg);height:var(--sapphire-semantic-size-icon-lg)}.sapphire-select--md .sapphire-select__icon-container{width:var(--sapphire-semantic-size-icon-md);height:var(--sapphire-semantic-size-icon-md)}.sapphire-select__prefix{display:inherit;font-size:var(--sapphire-semantic-size-font-control-default)}.sapphire-select--md .sapphire-select__prefix{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-select__native-select{position:absolute;inset:0;opacity:.01;width:100%;z-index:1}.sapphire-select--error:not(.is-disabled) .sapphire-select__button{box-shadow:inset 0 0 0 1px var(--sapphire-semantic-color-border-field-error)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-border-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", "spPopoverDisablePushInsideViewport"], outputs: ["spPopoverTriggerOpened", "spPopoverTriggerClosed"], exportAs: ["spPopoverTrigger"] }, { kind: "directive", type: i2$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "component", type: ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: ["variant", "size", "disabled", "iconAlign", "type"] }, { kind: "directive", type: ButtonIconDirective, selector: "[spButtonIcon]" }, { kind: "component", type: HiddenSelectComponent, selector: "sp-hidden-select" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: BasicSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sp-basic-select', exportAs: 'spBasicSelect', providers: [
@@ -5141,7 +5141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                     ], host: {
                         '[attr.aria-label]': 'null',
                         '[attr.aria-labelledby]': 'null',
-                    }, template: "<div style=\"position: relative\">\n  <sp-hidden-select></sp-hidden-select>\n  <button\n    sp-button\n    [variant]=\"variant\"\n    [size]=\"size\"\n    iconAlign=\"right\"\n    [spPopoverTriggerFor]=\"popover\"\n    spPopoverPlacement=\"bottom start\"\n    #triggerElementRef\n    #triggerRef=\"spPopoverTrigger\"\n    (keydown)=\"handleKeyDown($event)\"\n    (spPopoverTriggerOpened)=\"_onOpen()\"\n    (spPopoverTriggerClosed)=\"_onClose()\"\n    cdkMonitorElementFocus\n    (cdkFocusChange)=\"_onFocusChange($event)\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledby\"\n    [disabled]=\"disabled\"\n  >\n    <span *ngIf=\"selectedOptions.length === 0\">\n      {{ placeholder }}\n    </span>\n    <ng-container *ngIf=\"selectedOptions.length > 0\">\n      <ng-container *ngIf=\"!selectionText\">{{\n        getSelectionText()\n      }}</ng-container>\n      <ng-content select=\"sp-selection-text\"></ng-content>\n    </ng-container>\n    <sp-icon spButtonIcon name=\"chevronDown\"></sp-icon>\n  </button>\n  <ng-template #popover>\n    <sp-popover noPadding>\n      <sp-listbox\n        [spListboxItems]=\"listboxChildren\"\n        navigationWrapDisabled\n        [multiple]=\"multiple\"\n        [(selectedValues)]=\"listboxValue\"\n        (selected)=\"_handleSelected()\"\n        [size]=\"size\"\n      >\n      </sp-listbox>\n    </sp-popover>\n  </ng-template>\n</div>\n", styles: [".sapphire-select{position:relative;display:block;color:var(--sapphire-semantic-color-content-default-primary);font-family:var(--sapphire-semantic-font-name-default);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-semantic-size-height-input-lg);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);border:none;background-color:var(--sapphire-semantic-color-background-field-default);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 1px var(--sapphire-semantic-color-border-field-default);border-radius:var(--sapphire-semantic-size-radius-sm);gap:var(--sapphire-semantic-size-spacing-30)}.sapphire-select--md .sapphire-select__button{height:var(--sapphire-semantic-size-height-input-md);padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-md);gap:var(--sapphire-semantic-size-spacing-20)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-semantic-size-font-control-default);width:100%;font-weight:var(--sapphire-semantic-font-weight-default-regular);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--md .sapphire-select__value{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-semantic-size-icon-lg);height:var(--sapphire-semantic-size-icon-lg)}.sapphire-select--md .sapphire-select__icon-container{width:var(--sapphire-semantic-size-icon-md);height:var(--sapphire-semantic-size-icon-md)}.sapphire-select__prefix{display:inherit;font-size:var(--sapphire-semantic-size-font-control-default)}.sapphire-select--md .sapphire-select__prefix{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-select__native-select{position:absolute;inset:0;opacity:.01;width:100%;z-index:1}.sapphire-select--error:not(.is-disabled) .sapphire-select__button{box-shadow:inset 0 0 0 1px var(--sapphire-semantic-color-border-field-error)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-border-field-error)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed}\n"] }]
+                    }, template: "<div style=\"position: relative\">\n  <sp-hidden-select></sp-hidden-select>\n  <button\n    sp-button\n    [variant]=\"variant\"\n    [size]=\"size\"\n    iconAlign=\"right\"\n    [spPopoverTriggerFor]=\"popover\"\n    spPopoverPlacement=\"bottom start\"\n    #triggerElementRef\n    #triggerRef=\"spPopoverTrigger\"\n    (keydown)=\"handleKeyDown($event)\"\n    (spPopoverTriggerOpened)=\"_onOpen()\"\n    (spPopoverTriggerClosed)=\"_onClose()\"\n    cdkMonitorElementFocus\n    (cdkFocusChange)=\"_onFocusChange($event)\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledby\"\n    [disabled]=\"disabled\"\n  >\n    <span *ngIf=\"selectedOptions.length === 0\">\n      {{ placeholder }}\n    </span>\n    <ng-container *ngIf=\"selectedOptions.length > 0\">\n      <ng-container *ngIf=\"!selectionText\">{{\n        getSelectionText()\n      }}</ng-container>\n      <ng-content select=\"sp-selection-text\"></ng-content>\n    </ng-container>\n    <sp-icon spButtonIcon name=\"chevronDown\"></sp-icon>\n  </button>\n  <ng-template #popover>\n    <sp-popover noPadding>\n      <sp-listbox\n        [spListboxItems]=\"listboxChildren\"\n        navigationWrapDisabled\n        [multiple]=\"multiple\"\n        [(selectedValues)]=\"listboxValue\"\n        (selected)=\"_handleSelected()\"\n        [size]=\"size\"\n      >\n      </sp-listbox>\n    </sp-popover>\n  </ng-template>\n</div>\n", styles: [".sapphire-select{position:relative;display:block;color:var(--sapphire-semantic-color-content-default-primary);font-family:var(--sapphire-semantic-font-name-default);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-semantic-size-height-input-lg);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);border:none;background-color:var(--sapphire-semantic-color-background-field-default);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 1px var(--sapphire-semantic-color-border-field-default);border-radius:var(--sapphire-semantic-size-radius-sm);gap:var(--sapphire-semantic-size-spacing-30)}.sapphire-select--md .sapphire-select__button{height:var(--sapphire-semantic-size-height-input-md);padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-md);gap:var(--sapphire-semantic-size-spacing-20)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-semantic-size-font-control-default);width:100%;font-weight:var(--sapphire-semantic-font-weight-default-regular);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--md .sapphire-select__value{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-semantic-color-content-default-secondary);pointer-events:none}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-semantic-size-icon-lg);height:var(--sapphire-semantic-size-icon-lg)}.sapphire-select--md .sapphire-select__icon-container{width:var(--sapphire-semantic-size-icon-md);height:var(--sapphire-semantic-size-icon-md)}.sapphire-select__prefix{display:inherit;font-size:var(--sapphire-semantic-size-font-control-default)}.sapphire-select--md .sapphire-select__prefix{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-select__native-select{position:absolute;inset:0;opacity:.01;width:100%;z-index:1}.sapphire-select--error:not(.is-disabled) .sapphire-select__button{box-shadow:inset 0 0 0 1px var(--sapphire-semantic-color-border-field-error)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-border-field-error)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed}\n"] }]
         }], ctorParameters: function () { return [{ type: SelectValueHolder }, { type: i2$2.FocusMonitor }]; }, propDecorators: { size: [{
                 type: Input
             }], variant: [{