@danske/sapphire-angular 1.24.1 → 1.25.0

package/esm2020/lib/menu/src/menu-item.component.mjs

@@ -9,7 +9,7 @@ import * as i2 from "../../common/sapphire-view-encapsulation";
 export class MenuItemComponent {
 }
 MenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: MenuItemComponent, selector: "sp-menu-item", inputs: { disabled: "disabled", danger: "danger" }, host: { properties: { "class.sapphire-listbox__item": "true", "class.is-disabled": "this.disabled", "class.sapphire-listbox__item--danger": "this.danger" } }, hostDirectives: [{ directive: i1.CdkMenuItem, inputs: ["cdkMenuItemDisabled", "disabled", "cdkMenuitemTypeaheadLabel", "typeaheadLabel"], outputs: ["cdkMenuItemTriggered", "triggered"] }, { directive: i2.UseComponentStyles }], ngImport: i0, template: "<div class=\"sapphire-listbox__content\" _spUseComponentStyles>\n  <ng-content select=\"sp-menu-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: i2.UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
+MenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: MenuItemComponent, selector: "sp-menu-item", inputs: { disabled: "disabled", danger: "danger" }, host: { properties: { "class.sapphire-listbox__item": "true", "class.is-disabled": "this.disabled", "class.sapphire-listbox__item--danger": "this.danger" } }, hostDirectives: [{ directive: i1.CdkMenuItem, inputs: ["cdkMenuItemDisabled", "disabled", "cdkMenuitemTypeaheadLabel", "typeaheadLabel"], outputs: ["cdkMenuItemTriggered", "triggered"] }, { directive: i2.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: i2.UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
 __decorate([
     CoerceBoolean
 ], MenuItemComponent.prototype, "disabled", void 0);
@@ -30,7 +30,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                         UseComponentStyles,
                     ], host: {
                         '[class.sapphire-listbox__item]': 'true',
-                    }, template: "<div class=\"sapphire-listbox__content\" _spUseComponentStyles>\n  <ng-content select=\"sp-menu-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" }]
+                    }, 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" }]
         }], propDecorators: { disabled: [{
                 type: HostBinding,
                 args: ['class.is-disabled']
@@ -42,4 +42,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
             }, {
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVudS1pdGVtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9saWIvbWVudS9zcmMvbWVudS1pdGVtLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3NyYy9saWIvbWVudS9zcmMvbWVudS1pdGVtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFOUQsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBRWhELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx1Q0FBdUMsQ0FBQztBQUN0RSxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSwwQ0FBMEMsQ0FBQzs7OztBQW9COUUsTUFBTSxPQUFPLGlCQUFpQjs7OEdBQWpCLGlCQUFpQjtrR0FBakIsaUJBQWlCLDBlQ3pCOUIsMGlCQVdBO0FEbUJFO0lBREMsYUFBYTttREFDUztBQU12QjtJQURDLGFBQWE7aURBQ087MkZBWFYsaUJBQWlCO2tCQWxCN0IsU0FBUzsrQkFDRSxjQUFjLGtCQUVSO3dCQUNkOzRCQUNFLFNBQVMsRUFBRSxXQUFXOzRCQUN0QixNQUFNLEVBQUU7Z0NBQ04sK0JBQStCO2dDQUMvQiwyQ0FBMkM7NkJBQzVDOzRCQUNELE9BQU8sRUFBRSxDQUFDLGlDQUFpQyxDQUFDO3lCQUM3Qzt3QkFDRCxrQkFBa0I7cUJBQ25CLFFBQ0s7d0JBQ0osZ0NBQWdDLEVBQUUsTUFBTTtxQkFDekM7OEJBT0QsUUFBUTtzQkFIUCxXQUFXO3VCQUFDLG1CQUFtQjs7c0JBQy9CLEtBQUs7Z0JBUU4sTUFBTTtzQkFITCxXQUFXO3VCQUFDLHNDQUFzQzs7c0JBQ2xELEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEhvc3RCaW5kaW5nLCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQm9vbGVhbklucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY2RrL2NvZXJjaW9uJztcbmltcG9ydCB7IENka01lbnVJdGVtIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL21lbnUnO1xuXG5pbXBvcnQgeyBDb2VyY2VCb29sZWFuIH0gZnJvbSAnLi4vLi4vY29tbW9uL2NvZXJjZS1ib29sZWFuLmRlY29yYXRvcic7XG5pbXBvcnQgeyBVc2VDb21wb25lbnRTdHlsZXMgfSBmcm9tICcuLi8uLi9jb21tb24vc2FwcGhpcmUtdmlldy1lbmNhcHN1bGF0aW9uJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3AtbWVudS1pdGVtJyxcbiAgdGVtcGxhdGVVcmw6ICcuL21lbnUtaXRlbS5jb21wb25lbnQuaHRtbCcsXG4gIGhvc3REaXJlY3RpdmVzOiBbXG4gICAge1xuICAgICAgZGlyZWN0aXZlOiBDZGtNZW51SXRlbSxcbiAgICAgIGlucHV0czogW1xuICAgICAgICAnY2RrTWVudUl0ZW1EaXNhYmxlZDogZGlzYWJsZWQnLFxuICAgICAgICAnY2RrTWVudWl0ZW1UeXBlYWhlYWRMYWJlbDogdHlwZWFoZWFkTGFiZWwnLFxuICAgICAgXSxcbiAgICAgIG91dHB1dHM6IFsnY2RrTWVudUl0ZW1UcmlnZ2VyZWQ6IHRyaWdnZXJlZCddLFxuICAgIH0sXG4gICAgVXNlQ29tcG9uZW50U3R5bGVzLFxuICBdLFxuICBob3N0OiB7XG4gICAgJ1tjbGFzcy5zYXBwaGlyZS1saXN0Ym94X19pdGVtXSc6ICd0cnVlJyxcbiAgfSxcbn0pXG5leHBvcnQgY2xhc3MgTWVudUl0ZW1Db21wb25lbnQge1xuICAvKiogV2hldGhlciB0aGUgaXRlbSBzaG91bGQgYmUgZGlzYWJsZWQgKi9cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5pcy1kaXNhYmxlZCcpXG4gIEBJbnB1dCgpXG4gIEBDb2VyY2VCb29sZWFuXG4gIGRpc2FibGVkOiBCb29sZWFuSW5wdXQ7XG5cbiAgLyoqIFdoZXRoZXIgdGhlIGl0ZW0gc2hvdWxkIGJlIHN0eWxlZCBhcyBkYW5nZXIgaXRlbSAqL1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzLnNhcHBoaXJlLWxpc3Rib3hfX2l0ZW0tLWRhbmdlcicpXG4gIEBJbnB1dCgpXG4gIEBDb2VyY2VCb29sZWFuXG4gIGRhbmdlcjogQm9vbGVhbklucHV0O1xufVxuIiwiPGRpdiBjbGFzcz1cInNhcHBoaXJlLWxpc3Rib3hfX2NvbnRlbnRcIiBfc3BVc2VDb21wb25lbnRTdHlsZXM+XG4gIDxuZy1jb250ZW50IHNlbGVjdD1cInNwLW1lbnUtaWNvblwiPjwvbmctY29udGVudD5cbiAgPGRpdiBjbGFzcz1cInNhcHBoaXJlLWxpc3Rib3hfX3RleHQtY29udGFpbmVyXCIgX3NwVXNlQ29tcG9uZW50U3R5bGVzPlxuICAgIDxkaXYgY2xhc3M9XCJzYXBwaGlyZS1saXN0Ym94X19wcmltYXJ5LXRleHRcIiBfc3BVc2VDb21wb25lbnRTdHlsZXM+XG4gICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJzcC1tZW51LXByaW1hcnktdGV4dFwiPjwvbmctY29udGVudD5cbiAgICAgIDwhLS0gSWYgbm90aGluZyBtYXRjaGVzIG90aGVyIG5nLWNvbnRlbnQgc2VsZWN0b3JzIHRoZW4gcmVuZGVyIGl0IGFzIHByaW1hcnkgdGV4dCAtLT5cbiAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgICA8L2Rpdj5cbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJzcC1tZW51LXNlY29uZGFyeS10ZXh0XCI+PC9uZy1jb250ZW50PlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVudS1pdGVtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9saWIvbWVudS9zcmMvbWVudS1pdGVtLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3NyYy9saWIvbWVudS9zcmMvbWVudS1pdGVtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFOUQsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBRWhELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx1Q0FBdUMsQ0FBQztBQUN0RSxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSwwQ0FBMEMsQ0FBQzs7OztBQW9COUUsTUFBTSxPQUFPLGlCQUFpQjs7OEdBQWpCLGlCQUFpQjtrR0FBakIsaUJBQWlCLDBlQ3pCOUIsK2lCQVdBO0FEbUJFO0lBREMsYUFBYTttREFDUztBQU12QjtJQURDLGFBQWE7aURBQ087MkZBWFYsaUJBQWlCO2tCQWxCN0IsU0FBUzsrQkFDRSxjQUFjLGtCQUVSO3dCQUNkOzRCQUNFLFNBQVMsRUFBRSxXQUFXOzRCQUN0QixNQUFNLEVBQUU7Z0NBQ04sK0JBQStCO2dDQUMvQiwyQ0FBMkM7NkJBQzVDOzRCQUNELE9BQU8sRUFBRSxDQUFDLGlDQUFpQyxDQUFDO3lCQUM3Qzt3QkFDRCxrQkFBa0I7cUJBQ25CLFFBQ0s7d0JBQ0osZ0NBQWdDLEVBQUUsTUFBTTtxQkFDekM7OEJBT0QsUUFBUTtzQkFIUCxXQUFXO3VCQUFDLG1CQUFtQjs7c0JBQy9CLEtBQUs7Z0JBUU4sTUFBTTtzQkFITCxXQUFXO3VCQUFDLHNDQUFzQzs7c0JBQ2xELEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEhvc3RCaW5kaW5nLCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQm9vbGVhbklucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY2RrL2NvZXJjaW9uJztcbmltcG9ydCB7IENka01lbnVJdGVtIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL21lbnUnO1xuXG5pbXBvcnQgeyBDb2VyY2VCb29sZWFuIH0gZnJvbSAnLi4vLi4vY29tbW9uL2NvZXJjZS1ib29sZWFuLmRlY29yYXRvcic7XG5pbXBvcnQgeyBVc2VDb21wb25lbnRTdHlsZXMgfSBmcm9tICcuLi8uLi9jb21tb24vc2FwcGhpcmUtdmlldy1lbmNhcHN1bGF0aW9uJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3AtbWVudS1pdGVtJyxcbiAgdGVtcGxhdGVVcmw6ICcuL21lbnUtaXRlbS5jb21wb25lbnQuaHRtbCcsXG4gIGhvc3REaXJlY3RpdmVzOiBbXG4gICAge1xuICAgICAgZGlyZWN0aXZlOiBDZGtNZW51SXRlbSxcbiAgICAgIGlucHV0czogW1xuICAgICAgICAnY2RrTWVudUl0ZW1EaXNhYmxlZDogZGlzYWJsZWQnLFxuICAgICAgICAnY2RrTWVudWl0ZW1UeXBlYWhlYWRMYWJlbDogdHlwZWFoZWFkTGFiZWwnLFxuICAgICAgXSxcbiAgICAgIG91dHB1dHM6IFsnY2RrTWVudUl0ZW1UcmlnZ2VyZWQ6IHRyaWdnZXJlZCddLFxuICAgIH0sXG4gICAgVXNlQ29tcG9uZW50U3R5bGVzLFxuICBdLFxuICBob3N0OiB7XG4gICAgJ1tjbGFzcy5zYXBwaGlyZS1saXN0Ym94X19pdGVtXSc6ICd0cnVlJyxcbiAgfSxcbn0pXG5leHBvcnQgY2xhc3MgTWVudUl0ZW1Db21wb25lbnQge1xuICAvKiogV2hldGhlciB0aGUgaXRlbSBzaG91bGQgYmUgZGlzYWJsZWQgKi9cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5pcy1kaXNhYmxlZCcpXG4gIEBJbnB1dCgpXG4gIEBDb2VyY2VCb29sZWFuXG4gIGRpc2FibGVkOiBCb29sZWFuSW5wdXQ7XG5cbiAgLyoqIFdoZXRoZXIgdGhlIGl0ZW0gc2hvdWxkIGJlIHN0eWxlZCBhcyBkYW5nZXIgaXRlbSAqL1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzLnNhcHBoaXJlLWxpc3Rib3hfX2l0ZW0tLWRhbmdlcicpXG4gIEBJbnB1dCgpXG4gIEBDb2VyY2VCb29sZWFuXG4gIGRhbmdlcjogQm9vbGVhbklucHV0O1xufVxuIiwiPGRpdiBjbGFzcz1cInNhcHBoaXJlLWxpc3Rib3hfX2NvbnRlbnRcIiBfc3BVc2VDb21wb25lbnRTdHlsZXM+XG4gIDxuZy1jb250ZW50IHNlbGVjdD1cInNwLW1lbnUtaXRlbS1pY29uXCI+PC9uZy1jb250ZW50PlxuICA8ZGl2IGNsYXNzPVwic2FwcGhpcmUtbGlzdGJveF9fdGV4dC1jb250YWluZXJcIiBfc3BVc2VDb21wb25lbnRTdHlsZXM+XG4gICAgPGRpdiBjbGFzcz1cInNhcHBoaXJlLWxpc3Rib3hfX3ByaW1hcnktdGV4dFwiIF9zcFVzZUNvbXBvbmVudFN0eWxlcz5cbiAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cInNwLW1lbnUtcHJpbWFyeS10ZXh0XCI+PC9uZy1jb250ZW50PlxuICAgICAgPCEtLSBJZiBub3RoaW5nIG1hdGNoZXMgb3RoZXIgbmctY29udGVudCBzZWxlY3RvcnMgdGhlbiByZW5kZXIgaXQgYXMgcHJpbWFyeSB0ZXh0IC0tPlxuICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgIDwvZGl2PlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cInNwLW1lbnUtc2Vjb25kYXJ5LXRleHRcIj48L25nLWNvbnRlbnQ+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=

package/esm2020/lib/pagination/src/pagination.component.mjs

@@ -64,10 +64,10 @@ export class PaginationComponent {
     }
 }
 PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-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  >\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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.OptionComponent, selector: "sp-option", inputs: ["value", "disabled"] }, { kind: "component", type: i3.BasicSelectComponent, selector: "sp-basic-select", inputs: ["size", "variant"], exportAs: ["spBasicSelect"] }, { kind: "directive", type: i3.BasicSingleSelectDirective, selector: "sp-basic-select:not([multiple])" }, { kind: "component", type: i4.IconButtonComponent, selector: "button[sp-icon-button], a[sp-icon-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "type"] }, { kind: "component", type: i5.IconComponent, selector: "sp-icon", inputs: ["name", "size"] }] });
+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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.OptionComponent, selector: "sp-option", inputs: ["value", "disabled"] }, { kind: "component", type: i3.BasicSelectComponent, selector: "sp-basic-select", inputs: ["size", "variant"], exportAs: ["spBasicSelect"] }, { kind: "directive", type: i3.BasicSingleSelectDirective, selector: "sp-basic-select:not([multiple])" }, { kind: "component", type: i4.IconButtonComponent, selector: "button[sp-icon-button], a[sp-icon-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "type"] }, { kind: "component", type: i5.IconComponent, selector: "sp-icon", inputs: ["name", "size"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
-            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  >\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"] }]
+            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"] }]
         }], propDecorators: { pageSize: [{
                 type: Input
             }], itemCount: [{
@@ -81,4 +81,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
             }], valueChange: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnaW5hdGlvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL3BhZ2luYXRpb24vc3JjL3BhZ2luYXRpb24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9wYWdpbmF0aW9uL3NyYy9wYWdpbmF0aW9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBZ0IscUJBQXFCLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUM1RSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7Ozs7O0FBRXZFLE1BQU0sT0FBTyx3QkFBd0I7SUFDbkM7SUFDRSx5QkFBeUI7SUFDVCxJQUFZO0lBQzVCLHdCQUF3QjtJQUNSLFFBQWdCO1FBRmhCLFNBQUksR0FBSixJQUFJLENBQVE7UUFFWixhQUFRLEdBQVIsUUFBUSxDQUFRO0lBQy9CLENBQUM7Q0FDTDtBQU9ELE1BQU0sT0FBTyxtQkFBbUI7SUFMaEM7UUFPRSxhQUFRLEdBQVcsRUFBRSxDQUFDO1FBR3RCLGNBQVMsR0FBVyxDQUFDLENBQUM7UUFHdEIsU0FBSSxHQUFXLENBQUMsQ0FBQztRQVlULGNBQVMsR0FBWSxLQUFLLENBQUM7UUFVaEIsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBNEIsQ0FBQztLQWlDL0U7SUFsREMsSUFDSSxRQUFRO1FBQ1YsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDO0lBQ3hCLENBQUM7SUFDRCxJQUFJLFFBQVEsQ0FBQyxLQUFtQjtRQUM5QixJQUFJLENBQUMsU0FBUyxHQUFHLHFCQUFxQixDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2hELENBQUM7SUFHRCxJQUFJLGNBQWM7UUFDaEIsT0FBTyxJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxRQUFRLEdBQUcsQ0FBQyxDQUFDO0lBQ3ZDLENBQUM7SUFFRCxJQUFJLFlBQVk7UUFDZCxPQUFPLElBQUksQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxRQUFRLEVBQUUsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQzdFLENBQUM7SUFJRCxpQkFBaUIsQ0FBQyxLQUFhO1FBQzdCLE1BQU0sV0FBVyxHQUFHLFFBQVEsQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUFDLENBQUM7UUFFeEM7OztXQUdHO1FBQ0gsTUFBTSxjQUFjLEdBQUcsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsSUFBSSxHQUFHLENBQUMsQ0FBQztRQUNyRCxNQUFNLE9BQU8sR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLGNBQWMsR0FBRyxXQUFXLENBQUMsR0FBRyxDQUFDLENBQUM7UUFFNUQsSUFBSSxDQUFDLElBQUksR0FBRyxPQUFPLENBQUM7UUFDcEIsSUFBSSxDQUFDLFFBQVEsR0FBRyxXQUFXLENBQUM7UUFDNUIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLFFBQVEsRUFBRSxXQUFXLEVBQUUsQ0FBQyxDQUFDO0lBQ2xFLENBQUM7SUFFRCxhQUFhLENBQUMsU0FBOEI7UUFDMUMsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLElBQUksR0FBRyxDQUFDLFNBQVMsS0FBSyxVQUFVLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUNoRSxJQUFJLENBQUMsSUFBSSxHQUFHLE9BQU8sQ0FBQztRQUNwQixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQztZQUNwQixJQUFJLEVBQUUsT0FBTztZQUNiLFFBQVEsRUFBRSxJQUFJLENBQUMsUUFBUTtTQUN4QixDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQseUJBQXlCO1FBQ3ZCLE9BQU8sSUFBSSxDQUFDLFNBQVMsSUFBSSxJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQztJQUNyRSxDQUFDO0lBRUQsNkJBQTZCO1FBQzNCLE9BQU8sSUFBSSxDQUFDLElBQUksS0FBSyxDQUFDLENBQUM7SUFDekIsQ0FBQzs7Z0hBOURVLG1CQUFtQjtvR0FBbkIsbUJBQW1CLGdPQ2pCaEMsZzRDQTZDQTsyRkQ1QmEsbUJBQW1CO2tCQUwvQixTQUFTOytCQUNFLGVBQWU7OEJBTXpCLFFBQVE7c0JBRFAsS0FBSztnQkFJTixTQUFTO3NCQURSLEtBQUs7Z0JBSU4sSUFBSTtzQkFESCxLQUFLO2dCQUlOLGVBQWU7c0JBRGQsS0FBSztnQkFJRixRQUFRO3NCQURYLEtBQUs7Z0JBaUJhLFdBQVc7c0JBQTdCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCb29sZWFuSW5wdXQsIGNvZXJjZUJvb2xlYW5Qcm9wZXJ0eSB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9jb2VyY2lvbic7XG5pbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5leHBvcnQgY2xhc3MgU2FwcGhpcmVQYWdpbmF0aW9uQ2hhbmdlIHtcbiAgY29uc3RydWN0b3IoXG4gICAgLyoqIFRoZSBuZXcgcGFnZSBpbmRleCAqL1xuICAgIHB1YmxpYyByZWFkb25seSBwYWdlOiBudW1iZXIsXG4gICAgLyoqIFRoZSBuZXcgcGFnZSBzaXplICovXG4gICAgcHVibGljIHJlYWRvbmx5IHBhZ2VTaXplOiBudW1iZXJcbiAgKSB7fVxufVxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzcC1wYWdpbmF0aW9uJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3BhZ2luYXRpb24uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9wYWdpbmF0aW9uLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIFBhZ2luYXRpb25Db21wb25lbnQge1xuICBASW5wdXQoKVxuICBwYWdlU2l6ZTogbnVtYmVyID0gMTA7XG5cbiAgQElucHV0KClcbiAgaXRlbUNvdW50OiBudW1iZXIgPSAwO1xuXG4gIEBJbnB1dCgpXG4gIHBhZ2U6IG51bWJlciA9IDA7XG5cbiAgQElucHV0KClcbiAgcGFnZVNpemVPcHRpb25zPzogbnVtYmVyW107XG5cbiAgQElucHV0KClcbiAgZ2V0IGRpc2FibGVkKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLl9kaXNhYmxlZDtcbiAgfVxuICBzZXQgZGlzYWJsZWQodmFsdWU6IEJvb2xlYW5JbnB1dCkge1xuICAgIHRoaXMuX2Rpc2FibGVkID0gY29lcmNlQm9vbGVhblByb3BlcnR5KHZhbHVlKTtcbiAgfVxuICBwcml2YXRlIF9kaXNhYmxlZDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIGdldCBzdGFydEl0ZW1JbmRleCgpOiBudW1iZXIge1xuICAgIHJldHVybiB0aGlzLnBhZ2UgKiB0aGlzLnBhZ2VTaXplICsgMTtcbiAgfVxuXG4gIGdldCBlbmRJdGVtSW5kZXgoKTogbnVtYmVyIHtcbiAgICByZXR1cm4gTWF0aC5taW4odGhpcy5wYWdlICogdGhpcy5wYWdlU2l6ZSArIHRoaXMucGFnZVNpemUsIHRoaXMuaXRlbUNvdW50KTtcbiAgfVxuXG4gIEBPdXRwdXQoKSByZWFkb25seSB2YWx1ZUNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8U2FwcGhpcmVQYWdpbmF0aW9uQ2hhbmdlPigpO1xuXG4gIF9vblBhZ2VTaXplQ2hhbmdlKHZhbHVlOiBzdHJpbmcpIHtcbiAgICBjb25zdCBuZXdQYWdlU2l6ZSA9IHBhcnNlSW50KHZhbHVlLCAxMCk7XG5cbiAgICAvKipcbiAgICAgKiBBdm9pZCBnb2luZyB0byBpbnZhbGlkIHBhZ2Ugd2hlbiBzd2l0Y2hpbmdcbiAgICAgKiB0byBhIGRpZmZlcmVudCBwYWdlIHNpemVcbiAgICAgKi9cbiAgICBjb25zdCBmaXJzdEl0ZW1JbmRleCA9IHRoaXMucGFnZVNpemUgKiB0aGlzLnBhZ2UgKyAxO1xuICAgIGNvbnN0IG5ld1BhZ2UgPSBNYXRoLmNlaWwoZmlyc3RJdGVtSW5kZXggLyBuZXdQYWdlU2l6ZSkgLSAxO1xuXG4gICAgdGhpcy5wYWdlID0gbmV3UGFnZTtcbiAgICB0aGlzLnBhZ2VTaXplID0gbmV3UGFnZVNpemU7XG4gICAgdGhpcy52YWx1ZUNoYW5nZS5lbWl0KHsgcGFnZTogbmV3UGFnZSwgcGFnZVNpemU6IG5ld1BhZ2VTaXplIH0pO1xuICB9XG5cbiAgX29uUGFnZUNoYW5nZShkaXJlY3Rpb246ICdwcmV2aW91cycgfCAnbmV4dCcpIHtcbiAgICBjb25zdCBuZXdQYWdlID0gdGhpcy5wYWdlICsgKGRpcmVjdGlvbiA9PT0gJ3ByZXZpb3VzJyA/IC0xIDogMSk7XG4gICAgdGhpcy5wYWdlID0gbmV3UGFnZTtcbiAgICB0aGlzLnZhbHVlQ2hhbmdlLmVtaXQoe1xuICAgICAgcGFnZTogbmV3UGFnZSxcbiAgICAgIHBhZ2VTaXplOiB0aGlzLnBhZ2VTaXplLFxuICAgIH0pO1xuICB9XG5cbiAgX2lzTmV4dFBhZ2VCdXR0b25EaXNhYmxlZCgpIHtcbiAgICByZXR1cm4gdGhpcy5pdGVtQ291bnQgPD0gdGhpcy5wYWdlICogdGhpcy5wYWdlU2l6ZSArIHRoaXMucGFnZVNpemU7XG4gIH1cblxuICBfaXNQcmV2aW91c1BhZ2VCdXR0b25EaXNhYmxlZCgpIHtcbiAgICByZXR1cm4gdGhpcy5wYWdlID09PSAwO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwic2FwcGhpcmUtcGFnaW5hdGlvblwiPlxuICA8c3AtYmFzaWMtc2VsZWN0XG4gICAgKm5nSWY9XCJwYWdlU2l6ZU9wdGlvbnNcIlxuICAgIHBsYWNlaG9sZGVyPVwiU2VsZWN0IGFuIG9wdGlvblwiXG4gICAgKHZhbHVlQ2hhbmdlKT1cIl9vblBhZ2VTaXplQ2hhbmdlKCRldmVudClcIlxuICAgIFt2YWx1ZV09XCInJyArIHBhZ2VTaXplXCJcbiAgICBbZGlzYWJsZWRdPVwiISFkaXNhYmxlZFwiXG4gICAgYXJpYS1sYWJlbD1cIk51bWJlciBvZiBpdGVtcyBwZXIgcGFnZVwiXG4gID5cbiAgICA8c3Atb3B0aW9uXG4gICAgICAqbmdGb3I9XCJsZXQgcGFnZVNpemVPcHRpb24gb2YgcGFnZVNpemVPcHRpb25zXCJcbiAgICAgIFt2YWx1ZV09XCInJyArIHBhZ2VTaXplT3B0aW9uXCJcbiAgICAgID57eyBwYWdlU2l6ZU9wdGlvbiArICcgaXRlbXMgcGVyIHBhZ2UnIH19PC9zcC1vcHRpb25cbiAgICA+XG4gIDwvc3AtYmFzaWMtc2VsZWN0PlxuICA8c3BhbiBjbGFzcz1cInNhcHBoaXJlLXBhZ2luYXRpb25fX2NvbnRyb2xzXCI+XG4gICAgPHNwYW4gY2xhc3M9XCJzYXBwaGlyZS1wYWdpbmF0aW9uX190ZXh0LS1lbXBoYXNpemVkXCI+XG4gICAgICB7eyBzdGFydEl0ZW1JbmRleCB9fSAtXG4gICAgICB7eyBlbmRJdGVtSW5kZXggfX1cbiAgICAgIDxzcGFuIGNsYXNzPVwic2FwcGhpcmUtcGFnaW5hdGlvbl9fdGV4dFwiPiBvZiA8L3NwYW4+XG4gICAgICB7eyBpdGVtQ291bnQgfX1cbiAgICA8L3NwYW4+XG4gICAgPGJ1dHRvblxuICAgICAgc3AtaWNvbi1idXR0b25cbiAgICAgIHZhcmlhbnQ9XCJ0ZXJ0aWFyeVwiXG4gICAgICBhcHBlYXJhbmNlPVwiZ2hvc3RcIlxuICAgICAgc2l6ZT1cInNtYWxsXCJcbiAgICAgIChjbGljayk9XCJfb25QYWdlQ2hhbmdlKCdwcmV2aW91cycpXCJcbiAgICAgIFtkaXNhYmxlZF09XCJfaXNQcmV2aW91c1BhZ2VCdXR0b25EaXNhYmxlZCgpIHx8ICEhZGlzYWJsZWRcIlxuICAgICAgYXJpYS1sYWJlbD1cIlByZXZpb3VzXCJcbiAgICA+XG4gICAgICA8c3AtaWNvbiBuYW1lPVwiY2hldnJvbkxlZnRcIj48L3NwLWljb24+PC9idXR0b25cbiAgICA+PGJ1dHRvblxuICAgICAgc3AtaWNvbi1idXR0b25cbiAgICAgIHZhcmlhbnQ9XCJ0ZXJ0aWFyeVwiXG4gICAgICBhcHBlYXJhbmNlPVwiZ2hvc3RcIlxuICAgICAgc2l6ZT1cInNtYWxsXCJcbiAgICAgIChjbGljayk9XCJfb25QYWdlQ2hhbmdlKCduZXh0JylcIlxuICAgICAgW2Rpc2FibGVkXT1cIl9pc05leHRQYWdlQnV0dG9uRGlzYWJsZWQoKSB8fCAhIWRpc2FibGVkXCJcbiAgICAgIGFyaWEtbGFiZWw9XCJOZXh0XCJcbiAgICA+XG4gICAgICA8c3AtaWNvbiBuYW1lPVwiY2hldnJvblJpZ2h0XCI+PC9zcC1pY29uPlxuICAgIDwvYnV0dG9uPlxuICA8L3NwYW4+XG48L2Rpdj5cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnaW5hdGlvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL3BhZ2luYXRpb24vc3JjL3BhZ2luYXRpb24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9wYWdpbmF0aW9uL3NyYy9wYWdpbmF0aW9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBZ0IscUJBQXFCLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUM1RSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7Ozs7O0FBRXZFLE1BQU0sT0FBTyx3QkFBd0I7SUFDbkM7SUFDRSx5QkFBeUI7SUFDVCxJQUFZO0lBQzVCLHdCQUF3QjtJQUNSLFFBQWdCO1FBRmhCLFNBQUksR0FBSixJQUFJLENBQVE7UUFFWixhQUFRLEdBQVIsUUFBUSxDQUFRO0lBQy9CLENBQUM7Q0FDTDtBQU9ELE1BQU0sT0FBTyxtQkFBbUI7SUFMaEM7UUFPRSxhQUFRLEdBQVcsRUFBRSxDQUFDO1FBR3RCLGNBQVMsR0FBVyxDQUFDLENBQUM7UUFHdEIsU0FBSSxHQUFXLENBQUMsQ0FBQztRQVlULGNBQVMsR0FBWSxLQUFLLENBQUM7UUFVaEIsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBNEIsQ0FBQztLQWlDL0U7SUFsREMsSUFDSSxRQUFRO1FBQ1YsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDO0lBQ3hCLENBQUM7SUFDRCxJQUFJLFFBQVEsQ0FBQyxLQUFtQjtRQUM5QixJQUFJLENBQUMsU0FBUyxHQUFHLHFCQUFxQixDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2hELENBQUM7SUFHRCxJQUFJLGNBQWM7UUFDaEIsT0FBTyxJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxRQUFRLEdBQUcsQ0FBQyxDQUFDO0lBQ3ZDLENBQUM7SUFFRCxJQUFJLFlBQVk7UUFDZCxPQUFPLElBQUksQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxRQUFRLEVBQUUsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQzdFLENBQUM7SUFJRCxpQkFBaUIsQ0FBQyxLQUFhO1FBQzdCLE1BQU0sV0FBVyxHQUFHLFFBQVEsQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUFDLENBQUM7UUFFeEM7OztXQUdHO1FBQ0gsTUFBTSxjQUFjLEdBQUcsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsSUFBSSxHQUFHLENBQUMsQ0FBQztRQUNyRCxNQUFNLE9BQU8sR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLGNBQWMsR0FBRyxXQUFXLENBQUMsR0FBRyxDQUFDLENBQUM7UUFFNUQsSUFBSSxDQUFDLElBQUksR0FBRyxPQUFPLENBQUM7UUFDcEIsSUFBSSxDQUFDLFFBQVEsR0FBRyxXQUFXLENBQUM7UUFDNUIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLFFBQVEsRUFBRSxXQUFXLEVBQUUsQ0FBQyxDQUFDO0lBQ2xFLENBQUM7SUFFRCxhQUFhLENBQUMsU0FBOEI7UUFDMUMsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLElBQUksR0FBRyxDQUFDLFNBQVMsS0FBSyxVQUFVLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUNoRSxJQUFJLENBQUMsSUFBSSxHQUFHLE9BQU8sQ0FBQztRQUNwQixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQztZQUNwQixJQUFJLEVBQUUsT0FBTztZQUNiLFFBQVEsRUFBRSxJQUFJLENBQUMsUUFBUTtTQUN4QixDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQseUJBQXlCO1FBQ3ZCLE9BQU8sSUFBSSxDQUFDLFNBQVMsSUFBSSxJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQztJQUNyRSxDQUFDO0lBRUQsNkJBQTZCO1FBQzNCLE9BQU8sSUFBSSxDQUFDLElBQUksS0FBSyxDQUFDLENBQUM7SUFDekIsQ0FBQzs7Z0hBOURVLG1CQUFtQjtvR0FBbkIsbUJBQW1CLGdPQ2pCaEMsZzZDQThDQTsyRkQ3QmEsbUJBQW1CO2tCQUwvQixTQUFTOytCQUNFLGVBQWU7OEJBTXpCLFFBQVE7c0JBRFAsS0FBSztnQkFJTixTQUFTO3NCQURSLEtBQUs7Z0JBSU4sSUFBSTtzQkFESCxLQUFLO2dCQUlOLGVBQWU7c0JBRGQsS0FBSztnQkFJRixRQUFRO3NCQURYLEtBQUs7Z0JBaUJhLFdBQVc7c0JBQTdCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCb29sZWFuSW5wdXQsIGNvZXJjZUJvb2xlYW5Qcm9wZXJ0eSB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9jb2VyY2lvbic7XG5pbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5leHBvcnQgY2xhc3MgU2FwcGhpcmVQYWdpbmF0aW9uQ2hhbmdlIHtcbiAgY29uc3RydWN0b3IoXG4gICAgLyoqIFRoZSBuZXcgcGFnZSBpbmRleCAqL1xuICAgIHB1YmxpYyByZWFkb25seSBwYWdlOiBudW1iZXIsXG4gICAgLyoqIFRoZSBuZXcgcGFnZSBzaXplICovXG4gICAgcHVibGljIHJlYWRvbmx5IHBhZ2VTaXplOiBudW1iZXJcbiAgKSB7fVxufVxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzcC1wYWdpbmF0aW9uJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3BhZ2luYXRpb24uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9wYWdpbmF0aW9uLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIFBhZ2luYXRpb25Db21wb25lbnQge1xuICBASW5wdXQoKVxuICBwYWdlU2l6ZTogbnVtYmVyID0gMTA7XG5cbiAgQElucHV0KClcbiAgaXRlbUNvdW50OiBudW1iZXIgPSAwO1xuXG4gIEBJbnB1dCgpXG4gIHBhZ2U6IG51bWJlciA9IDA7XG5cbiAgQElucHV0KClcbiAgcGFnZVNpemVPcHRpb25zPzogbnVtYmVyW107XG5cbiAgQElucHV0KClcbiAgZ2V0IGRpc2FibGVkKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLl9kaXNhYmxlZDtcbiAgfVxuICBzZXQgZGlzYWJsZWQodmFsdWU6IEJvb2xlYW5JbnB1dCkge1xuICAgIHRoaXMuX2Rpc2FibGVkID0gY29lcmNlQm9vbGVhblByb3BlcnR5KHZhbHVlKTtcbiAgfVxuICBwcml2YXRlIF9kaXNhYmxlZDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIGdldCBzdGFydEl0ZW1JbmRleCgpOiBudW1iZXIge1xuICAgIHJldHVybiB0aGlzLnBhZ2UgKiB0aGlzLnBhZ2VTaXplICsgMTtcbiAgfVxuXG4gIGdldCBlbmRJdGVtSW5kZXgoKTogbnVtYmVyIHtcbiAgICByZXR1cm4gTWF0aC5taW4odGhpcy5wYWdlICogdGhpcy5wYWdlU2l6ZSArIHRoaXMucGFnZVNpemUsIHRoaXMuaXRlbUNvdW50KTtcbiAgfVxuXG4gIEBPdXRwdXQoKSByZWFkb25seSB2YWx1ZUNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8U2FwcGhpcmVQYWdpbmF0aW9uQ2hhbmdlPigpO1xuXG4gIF9vblBhZ2VTaXplQ2hhbmdlKHZhbHVlOiBzdHJpbmcpIHtcbiAgICBjb25zdCBuZXdQYWdlU2l6ZSA9IHBhcnNlSW50KHZhbHVlLCAxMCk7XG5cbiAgICAvKipcbiAgICAgKiBBdm9pZCBnb2luZyB0byBpbnZhbGlkIHBhZ2Ugd2hlbiBzd2l0Y2hpbmdcbiAgICAgKiB0byBhIGRpZmZlcmVudCBwYWdlIHNpemVcbiAgICAgKi9cbiAgICBjb25zdCBmaXJzdEl0ZW1JbmRleCA9IHRoaXMucGFnZVNpemUgKiB0aGlzLnBhZ2UgKyAxO1xuICAgIGNvbnN0IG5ld1BhZ2UgPSBNYXRoLmNlaWwoZmlyc3RJdGVtSW5kZXggLyBuZXdQYWdlU2l6ZSkgLSAxO1xuXG4gICAgdGhpcy5wYWdlID0gbmV3UGFnZTtcbiAgICB0aGlzLnBhZ2VTaXplID0gbmV3UGFnZVNpemU7XG4gICAgdGhpcy52YWx1ZUNoYW5nZS5lbWl0KHsgcGFnZTogbmV3UGFnZSwgcGFnZVNpemU6IG5ld1BhZ2VTaXplIH0pO1xuICB9XG5cbiAgX29uUGFnZUNoYW5nZShkaXJlY3Rpb246ICdwcmV2aW91cycgfCAnbmV4dCcpIHtcbiAgICBjb25zdCBuZXdQYWdlID0gdGhpcy5wYWdlICsgKGRpcmVjdGlvbiA9PT0gJ3ByZXZpb3VzJyA/IC0xIDogMSk7XG4gICAgdGhpcy5wYWdlID0gbmV3UGFnZTtcbiAgICB0aGlzLnZhbHVlQ2hhbmdlLmVtaXQoe1xuICAgICAgcGFnZTogbmV3UGFnZSxcbiAgICAgIHBhZ2VTaXplOiB0aGlzLnBhZ2VTaXplLFxuICAgIH0pO1xuICB9XG5cbiAgX2lzTmV4dFBhZ2VCdXR0b25EaXNhYmxlZCgpIHtcbiAgICByZXR1cm4gdGhpcy5pdGVtQ291bnQgPD0gdGhpcy5wYWdlICogdGhpcy5wYWdlU2l6ZSArIHRoaXMucGFnZVNpemU7XG4gIH1cblxuICBfaXNQcmV2aW91c1BhZ2VCdXR0b25EaXNhYmxlZCgpIHtcbiAgICByZXR1cm4gdGhpcy5wYWdlID09PSAwO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwic2FwcGhpcmUtcGFnaW5hdGlvblwiPlxuICA8c3AtYmFzaWMtc2VsZWN0XG4gICAgKm5nSWY9XCJwYWdlU2l6ZU9wdGlvbnNcIlxuICAgIHBsYWNlaG9sZGVyPVwiU2VsZWN0IGFuIG9wdGlvblwiXG4gICAgKHZhbHVlQ2hhbmdlKT1cIl9vblBhZ2VTaXplQ2hhbmdlKCRldmVudClcIlxuICAgIFt2YWx1ZV09XCInJyArIHBhZ2VTaXplXCJcbiAgICBbZGlzYWJsZWRdPVwiISFkaXNhYmxlZFwiXG4gICAgYXJpYS1sYWJlbD1cIk51bWJlciBvZiBpdGVtcyBwZXIgcGFnZVwiXG4gICAgdmFyaWFudD1cInRlcnRpYXJ5LWdob3N0XCJcbiAgPlxuICAgIDxzcC1vcHRpb25cbiAgICAgICpuZ0Zvcj1cImxldCBwYWdlU2l6ZU9wdGlvbiBvZiBwYWdlU2l6ZU9wdGlvbnNcIlxuICAgICAgW3ZhbHVlXT1cIicnICsgcGFnZVNpemVPcHRpb25cIlxuICAgICAgPnt7IHBhZ2VTaXplT3B0aW9uICsgJyBpdGVtcyBwZXIgcGFnZScgfX08L3NwLW9wdGlvblxuICAgID5cbiAgPC9zcC1iYXNpYy1zZWxlY3Q+XG4gIDxzcGFuIGNsYXNzPVwic2FwcGhpcmUtcGFnaW5hdGlvbl9fY29udHJvbHNcIj5cbiAgICA8c3BhbiBjbGFzcz1cInNhcHBoaXJlLXBhZ2luYXRpb25fX3RleHQtLWVtcGhhc2l6ZWRcIj5cbiAgICAgIHt7IHN0YXJ0SXRlbUluZGV4IH19IC1cbiAgICAgIHt7IGVuZEl0ZW1JbmRleCB9fVxuICAgICAgPHNwYW4gY2xhc3M9XCJzYXBwaGlyZS1wYWdpbmF0aW9uX190ZXh0XCI+IG9mIDwvc3Bhbj5cbiAgICAgIHt7IGl0ZW1Db3VudCB9fVxuICAgIDwvc3Bhbj5cbiAgICA8YnV0dG9uXG4gICAgICBzcC1pY29uLWJ1dHRvblxuICAgICAgdmFyaWFudD1cInRlcnRpYXJ5XCJcbiAgICAgIGFwcGVhcmFuY2U9XCJnaG9zdFwiXG4gICAgICBzaXplPVwic21hbGxcIlxuICAgICAgKGNsaWNrKT1cIl9vblBhZ2VDaGFuZ2UoJ3ByZXZpb3VzJylcIlxuICAgICAgW2Rpc2FibGVkXT1cIl9pc1ByZXZpb3VzUGFnZUJ1dHRvbkRpc2FibGVkKCkgfHwgISFkaXNhYmxlZFwiXG4gICAgICBhcmlhLWxhYmVsPVwiUHJldmlvdXNcIlxuICAgID5cbiAgICAgIDxzcC1pY29uIG5hbWU9XCJjaGV2cm9uTGVmdFwiPjwvc3AtaWNvbj48L2J1dHRvblxuICAgID48YnV0dG9uXG4gICAgICBzcC1pY29uLWJ1dHRvblxuICAgICAgdmFyaWFudD1cInRlcnRpYXJ5XCJcbiAgICAgIGFwcGVhcmFuY2U9XCJnaG9zdFwiXG4gICAgICBzaXplPVwic21hbGxcIlxuICAgICAgKGNsaWNrKT1cIl9vblBhZ2VDaGFuZ2UoJ25leHQnKVwiXG4gICAgICBbZGlzYWJsZWRdPVwiX2lzTmV4dFBhZ2VCdXR0b25EaXNhYmxlZCgpIHx8ICEhZGlzYWJsZWRcIlxuICAgICAgYXJpYS1sYWJlbD1cIk5leHRcIlxuICAgID5cbiAgICAgIDxzcC1pY29uIG5hbWU9XCJjaGV2cm9uUmlnaHRcIj48L3NwLWljb24+XG4gICAgPC9idXR0b24+XG4gIDwvc3Bhbj5cbjwvZGl2PlxuIl19

package/esm2020/lib/select/src/basic-select/basic-select.component.mjs

@@ -65,7 +65,12 @@ export class BasicSelectComponent extends SelectComponentBase {
          * Size of the button
          */
         this.size = 'medium';
-        this.variant = 'uncontained';
+        /**
+         * Visual variations
+         * TODO(v4): remove 'contained' and 'uncontained'
+         * @default 'secondary-ghost'
+         */
+        this.variant = 'secondary-ghost';
         this.focused = false;
     }
     focus(focusOrigin = 'program') {
@@ -79,6 +84,26 @@ export class BasicSelectComponent extends SelectComponentBase {
     _onFocusChange(focusOrigin) {
         this.focused = Boolean(focusOrigin);
     }
+    getButtonVariant() {
+        switch (this.variant) {
+            case 'primary':
+                return 'primary';
+            case 'tertiary-ghost':
+                return 'tertiary';
+            default:
+                return 'secondary';
+        }
+    }
+    getButtonAppearance() {
+        switch (this.variant) {
+            case 'uncontained':
+            case 'secondary-ghost':
+            case 'tertiary-ghost':
+                return 'ghost';
+            default:
+                return 'fill';
+        }
+    }
 }
 BasicSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: BasicSelectComponent, deps: [{ token: i1.SelectValueHolder }, { token: i2.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component });
 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: [
@@ -92,7 +117,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 === 'primary' ? 'primary' : 'secondary'\"\n    [appearance]=\"variant === 'uncontained' ? 'ghost' : 'fill'\"\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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "component", type: i5.ListboxComponent, selector: "sp-listbox", inputs: ["selectedValues", "spListboxItems", "disabled", "multiple", "navigationWrapDisabled", "aria-label", "aria-labelledby", "size", "id"], outputs: ["selectedValuesChange", "selected"], exportAs: ["spListbox"] }, { kind: "component", type: i6.PopoverComponent, selector: "sp-popover", inputs: ["noPadding", "noMaxWidth", "noAutoFocus", "trapFocus"] }, { kind: "directive", type: i7.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: i8.ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "iconAlign", "type"] }, { kind: "directive", type: i9.ButtonIconDirective, selector: "[spButtonIcon]" }, { kind: "component", type: i10.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]=\"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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "component", type: i5.ListboxComponent, selector: "sp-listbox", inputs: ["selectedValues", "spListboxItems", "disabled", "multiple", "navigationWrapDisabled", "aria-label", "aria-labelledby", "size", "id"], outputs: ["selectedValuesChange", "selected"], exportAs: ["spListbox"] }, { kind: "component", type: i6.PopoverComponent, selector: "sp-popover", inputs: ["noPadding", "noMaxWidth", "noAutoFocus", "trapFocus"] }, { kind: "directive", type: i7.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: i8.ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "iconAlign", "type"] }, { kind: "directive", type: i9.ButtonIconDirective, selector: "[spButtonIcon]" }, { kind: "component", type: i10.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: [
@@ -109,7 +134,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 === 'primary' ? 'primary' : 'secondary'\"\n    [appearance]=\"variant === 'uncontained' ? 'ghost' : 'fill'\"\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"] }]
+                    }, 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"] }]
         }], ctorParameters: function () { return [{ type: i1.SelectValueHolder }, { type: i2.FocusMonitor }]; }, propDecorators: { size: [{
                 type: Input
             }], variant: [{
@@ -124,4 +149,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                 type: ViewChild,
                 args: [ListboxComponent]
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFzaWMtc2VsZWN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvc2VsZWN0L3NyYy9iYXNpYy1zZWxlY3QvYmFzaWMtc2VsZWN0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvc2VsZWN0L3NyYy9iYXNpYy1zZWxlY3QvYmFzaWMtc2VsZWN0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsU0FBUyxFQUNULFVBQVUsRUFDVixVQUFVLEVBQ1YsS0FBSyxFQUNMLFNBQVMsR0FDVixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUVuRCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSx3Q0FBd0MsQ0FBQztBQUUxRSxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUN0RSxPQUFPLEVBQ0wsaUJBQWlCLEVBQ2pCLHlCQUF5QixHQUMxQixNQUFNLCtCQUErQixDQUFDO0FBQ3ZDLE9BQU8sRUFBRSx5QkFBeUIsRUFBRSxNQUFNLDZDQUE2QyxDQUFDOzs7Ozs7Ozs7Ozs7QUFFeEY7OztHQUdHO0FBVUgsTUFBTSxPQUFPLDBCQUEyQixTQUFRLHlCQUF5Qjs7dUhBQTVELDBCQUEwQjsyR0FBMUIsMEJBQTBCLDBEQVAxQjtRQUNUO1lBQ0UsT0FBTyxFQUFFLGlCQUFpQjtZQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLDBCQUEwQixDQUFDO1NBQzFEO0tBQ0Y7MkZBRVUsMEJBQTBCO2tCQVR0QyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxpQ0FBaUM7b0JBQzNDLFNBQVMsRUFBRTt3QkFDVDs0QkFDRSxPQUFPLEVBQUUsaUJBQWlCOzRCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSwyQkFBMkIsQ0FBQzt5QkFDMUQ7cUJBQ0Y7aUJBQ0Y7O0FBR0Q7Ozs7Ozs7Ozs7Ozs7Ozs7R0FnQkc7QUF1QkgsTUFBTSxPQUFPLG9CQUFxQixTQUFRLG1CQUFtQjtJQXFCM0QsWUFDRSxXQUE4QixFQUN0QixZQUEwQjtRQUVsQyxLQUFLLENBQUMsV0FBVyxDQUFDLENBQUM7UUFGWCxpQkFBWSxHQUFaLFlBQVksQ0FBYztRQXRCcEM7O1dBRUc7UUFFSCxTQUFJLEdBQWlDLFFBQVEsQ0FBQztRQUc5QyxZQUFPLEdBQTRDLGFBQWEsQ0FBQztRQVd6RCxZQUFPLEdBQUcsS0FBSyxDQUFDO0lBT3hCLENBQUM7SUFFRCxLQUFLLENBQUMsY0FBMkIsU0FBUztRQUN4QyxJQUFJLElBQUksQ0FBQyxpQkFBaUIsRUFBRTtZQUMxQixJQUFJLENBQUMsWUFBWSxDQUFDLFFBQVEsQ0FDeEIsSUFBSSxDQUFDLGlCQUFpQixDQUFDLGFBQWEsRUFDcEMsV0FBVyxDQUNaLENBQUM7U0FDSDtJQUNILENBQUM7SUFFRCxTQUFTO1FBQ1AsT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDO0lBQ3RCLENBQUM7SUFFRCxjQUFjLENBQUMsV0FBd0I7UUFDckMsSUFBSSxDQUFDLE9BQU8sR0FBRyxPQUFPLENBQUMsV0FBVyxDQUFDLENBQUM7SUFDdEMsQ0FBQzs7aUhBM0NVLG9CQUFvQjtxR0FBcEIsb0JBQW9CLDZLQWpCcEI7UUFDVDtZQUNFLE9BQU8sRUFBRSxpQkFBaUI7WUFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxvQkFBb0IsQ0FBQztZQUNuRCxLQUFLLEVBQUUsSUFBSTtTQUNaO1FBQ0Q7WUFDRSxPQUFPLEVBQUUsbUJBQW1CO1lBQzVCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsb0JBQW9CLENBQUM7U0FDcEQ7UUFDRCx5QkFBeUI7S0FDMUIsd05BbUJ1QyxVQUFVLHVEQUd2QyxnQkFBZ0Isb0dDekY3QixxaERBK0NBOzJGRDBCYSxvQkFBb0I7a0JBdEJoQyxTQUFTOytCQUNFLGlCQUFpQixZQUdqQixlQUFlLGFBQ2Q7d0JBQ1Q7NEJBQ0UsT0FBTyxFQUFFLGlCQUFpQjs0QkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUscUJBQXFCLENBQUM7NEJBQ25ELEtBQUssRUFBRSxJQUFJO3lCQUNaO3dCQUNEOzRCQUNFLE9BQU8sRUFBRSxtQkFBbUI7NEJBQzVCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLHFCQUFxQixDQUFDO3lCQUNwRDt3QkFDRCx5QkFBeUI7cUJBQzFCLFFBQ0s7d0JBQ0osbUJBQW1CLEVBQUUsTUFBTTt3QkFDM0Isd0JBQXdCLEVBQUUsTUFBTTtxQkFDakM7bUlBT0QsSUFBSTtzQkFESCxLQUFLO2dCQUlOLE9BQU87c0JBRE4sS0FBSztnQkFJSSxVQUFVO3NCQURuQixTQUFTO3VCQUFDLFlBQVk7Z0JBSWIsaUJBQWlCO3NCQUQxQixTQUFTO3VCQUFDLG1CQUFtQixFQUFFLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRTtnQkFJMUMsT0FBTztzQkFEaEIsU0FBUzt1QkFBQyxnQkFBZ0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIERpcmVjdGl2ZSxcbiAgRWxlbWVudFJlZixcbiAgZm9yd2FyZFJlZixcbiAgSW5wdXQsXG4gIFZpZXdDaGlsZCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IFBvcG92ZXJUcmlnZ2VyRGlyZWN0aXZlIH0gZnJvbSAnLi4vLi4vLi4vcG9wb3Zlci9zcmMvcG9wb3Zlci10cmlnZ2VyLmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBMaXN0Ym94Q29tcG9uZW50IH0gZnJvbSAnLi4vLi4vLi4vbGlzdGJveC9zcmMvbGlzdGJveC5jb21wb25lbnQnO1xuaW1wb3J0IHsgRm9jdXNNb25pdG9yLCBGb2N1c09yaWdpbiB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9hMTF5JztcbmltcG9ydCB7IFNlbGVjdENvbXBvbmVudEJhc2UgfSBmcm9tICcuLi9jb21tb24vc2VsZWN0LWNvbXBvbmVudC1iYXNlJztcbmltcG9ydCB7XG4gIFNlbGVjdFZhbHVlSG9sZGVyLFxuICBTaW5nbGVTZWxlY3REaXJlY3RpdmVCYXNlLFxufSBmcm9tICcuLi9jb21tb24vc2VsZWN0LXZhbHVlLWhvbGRlcic7XG5pbXBvcnQgeyBWaWV3RW5jYXBzdWxhdGlvblByb3ZpZGVyIH0gZnJvbSAnLi4vLi4vLi4vY29tbW9uL3NhcHBoaXJlLXZpZXctZW5jYXBzdWxhdGlvbic7XG5cbi8qKlxuICogTk9URTogU3VwcG9ydCBmb3IgbXVsdGlwbGUgc2VsZWN0aW9uIGluIGJhc2ljIHNlbGVjdCBpcyByZW1vdmVkLCBiYXNlZCBvblxuICogYSBVWCBkZWNpc2lvbi4gU2VlIGNvbW1pdCBtZXNzYWdlIGZvciBtb3JlIGRldGFpbHMuXG4gKi9cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ3NwLWJhc2ljLXNlbGVjdDpub3QoW211bHRpcGxlXSknLFxuICBwcm92aWRlcnM6IFtcbiAgICB7XG4gICAgICBwcm92aWRlOiBTZWxlY3RWYWx1ZUhvbGRlcixcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IEJhc2ljU2luZ2xlU2VsZWN0RGlyZWN0aXZlKSxcbiAgICB9LFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBCYXNpY1NpbmdsZVNlbGVjdERpcmVjdGl2ZSBleHRlbmRzIFNpbmdsZVNlbGVjdERpcmVjdGl2ZUJhc2Uge31cblxuLyoqXG4gKiBBbGxvd3MgdXNlciB0byBzZWxlY3QgYSBzaW5nbGUgb3B0aW9uIGZyb20gYSBsaXN0LCBzaW1pbGFyIHRvIG5hdGl2ZSBzZWxlY3RcbiAqIGNvbXBvbmVudC5cbiAqXG4gKiBFeGFtcGxlOlxuICogYGBgdHN4XG4gKiA8c3AtYmFzaWMtc2VsZWN0XG4gKiAgICBwbGFjZWhvbGRlcj1cIlNlbGVjdCBhbiBvcHRpb25cIlxuICogICAgc2l6ZT1cInNtYWxsXCJcbiAqICAgIHZhcmlhbnQ9XCJjb250YWluZWRcIlxuICogPlxuICogICA8c3Atb3B0aW9uIHZhbHVlPVwib3B0aW9uMVwiPkZpcnN0IE9wdGlvbjwvc3Atb3B0aW9uPlxuICogICA8c3Atb3B0aW9uIHZhbHVlPVwib3B0aW9uMlwiPlNlY29uZCBPcHRpb248L3NwLW9wdGlvbj5cbiAqICAgPHNwLW9wdGlvbiB2YWx1ZT1cIm9wdGlvbjNcIj5UaGlyZCBPcHRpb248L3NwLW9wdGlvbj5cbiAqIDwvc3AtYmFzaWMtc2VsZWN0PlxuICogYGBgXG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3NwLWJhc2ljLXNlbGVjdCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9iYXNpYy1zZWxlY3QuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9iYXNpYy1zZWxlY3QuY29tcG9uZW50LnNjc3MnXSxcbiAgZXhwb3J0QXM6ICdzcEJhc2ljU2VsZWN0JyxcbiAgcHJvdmlkZXJzOiBbXG4gICAge1xuICAgICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBCYXNpY1NlbGVjdENvbXBvbmVudCksXG4gICAgICBtdWx0aTogdHJ1ZSxcbiAgICB9LFxuICAgIHtcbiAgICAgIHByb3ZpZGU6IFNlbGVjdENvbXBvbmVudEJhc2UsXG4gICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBCYXNpY1NlbGVjdENvbXBvbmVudCksXG4gICAgfSxcbiAgICBWaWV3RW5jYXBzdWxhdGlvblByb3ZpZGVyLFxuICBdLFxuICBob3N0OiB7XG4gICAgJ1thdHRyLmFyaWEtbGFiZWxdJzogJ251bGwnLFxuICAgICdbYXR0ci5hcmlhLWxhYmVsbGVkYnldJzogJ251bGwnLFxuICB9LFxufSlcbmV4cG9ydCBjbGFzcyBCYXNpY1NlbGVjdENvbXBvbmVudCBleHRlbmRzIFNlbGVjdENvbXBvbmVudEJhc2Uge1xuICAvKipcbiAgICogU2l6ZSBvZiB0aGUgYnV0dG9uXG4gICAqL1xuICBASW5wdXQoKVxuICBzaXplOiAnc21hbGwnIHwgJ21lZGl1bScgfCAnbGFyZ2UnID0gJ21lZGl1bSc7XG5cbiAgQElucHV0KClcbiAgdmFyaWFudDogJ3ByaW1hcnknIHwgJ2NvbnRhaW5lZCcgfCAndW5jb250YWluZWQnID0gJ3VuY29udGFpbmVkJztcblxuICBAVmlld0NoaWxkKCd0cmlnZ2VyUmVmJylcbiAgcHJvdGVjdGVkIHRyaWdnZXJSZWY6IFBvcG92ZXJUcmlnZ2VyRGlyZWN0aXZlIHwgdW5kZWZpbmVkO1xuXG4gIEBWaWV3Q2hpbGQoJ3RyaWdnZXJFbGVtZW50UmVmJywgeyByZWFkOiBFbGVtZW50UmVmIH0pXG4gIHByb3RlY3RlZCB0cmlnZ2VyRWxlbWVudFJlZjogRWxlbWVudFJlZiB8IHVuZGVmaW5lZDtcblxuICBAVmlld0NoaWxkKExpc3Rib3hDb21wb25lbnQpXG4gIHByb3RlY3RlZCBsaXN0Ym94OiBMaXN0Ym94Q29tcG9uZW50IHwgdW5kZWZpbmVkO1xuXG4gIHByaXZhdGUgZm9jdXNlZCA9IGZhbHNlO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHZhbHVlSG9sZGVyOiBTZWxlY3RWYWx1ZUhvbGRlcixcbiAgICBwcml2YXRlIGZvY3VzTW9uaXRvcjogRm9jdXNNb25pdG9yXG4gICkge1xuICAgIHN1cGVyKHZhbHVlSG9sZGVyKTtcbiAgfVxuXG4gIGZvY3VzKGZvY3VzT3JpZ2luOiBGb2N1c09yaWdpbiA9ICdwcm9ncmFtJykge1xuICAgIGlmICh0aGlzLnRyaWdnZXJFbGVtZW50UmVmKSB7XG4gICAgICB0aGlzLmZvY3VzTW9uaXRvci5mb2N1c1ZpYShcbiAgICAgICAgdGhpcy50cmlnZ2VyRWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LFxuICAgICAgICBmb2N1c09yaWdpblxuICAgICAgKTtcbiAgICB9XG4gIH1cblxuICBpc0ZvY3VzZWQoKSB7XG4gICAgcmV0dXJuIHRoaXMuZm9jdXNlZDtcbiAgfVxuXG4gIF9vbkZvY3VzQ2hhbmdlKGZvY3VzT3JpZ2luOiBGb2N1c09yaWdpbikge1xuICAgIHRoaXMuZm9jdXNlZCA9IEJvb2xlYW4oZm9jdXNPcmlnaW4pO1xuICB9XG59XG4iLCI8ZGl2IHN0eWxlPVwicG9zaXRpb246IHJlbGF0aXZlXCI+XG4gIDxzcC1oaWRkZW4tc2VsZWN0Pjwvc3AtaGlkZGVuLXNlbGVjdD5cbiAgPGJ1dHRvblxuICAgIHNwLWJ1dHRvblxuICAgIFt2YXJpYW50XT1cInZhcmlhbnQgPT09ICdwcmltYXJ5JyA/ICdwcmltYXJ5JyA6ICdzZWNvbmRhcnknXCJcbiAgICBbYXBwZWFyYW5jZV09XCJ2YXJpYW50ID09PSAndW5jb250YWluZWQnID8gJ2dob3N0JyA6ICdmaWxsJ1wiXG4gICAgW3NpemVdPVwic2l6ZVwiXG4gICAgaWNvbkFsaWduPVwicmlnaHRcIlxuICAgIFtzcFBvcG92ZXJUcmlnZ2VyRm9yXT1cInBvcG92ZXJcIlxuICAgIHNwUG9wb3ZlclBsYWNlbWVudD1cImJvdHRvbSBzdGFydFwiXG4gICAgI3RyaWdnZXJFbGVtZW50UmVmXG4gICAgI3RyaWdnZXJSZWY9XCJzcFBvcG92ZXJUcmlnZ2VyXCJcbiAgICAoa2V5ZG93bik9XCJoYW5kbGVLZXlEb3duKCRldmVudClcIlxuICAgIChzcFBvcG92ZXJUcmlnZ2VyT3BlbmVkKT1cIl9vbk9wZW4oKVwiXG4gICAgKHNwUG9wb3ZlclRyaWdnZXJDbG9zZWQpPVwiX29uQ2xvc2UoKVwiXG4gICAgY2RrTW9uaXRvckVsZW1lbnRGb2N1c1xuICAgIChjZGtGb2N1c0NoYW5nZSk9XCJfb25Gb2N1c0NoYW5nZSgkZXZlbnQpXCJcbiAgICBhcmlhLWhhc3BvcHVwPVwibGlzdGJveFwiXG4gICAgW2F0dHIuYXJpYS1sYWJlbF09XCJhcmlhTGFiZWxcIlxuICAgIFthdHRyLmFyaWEtbGFiZWxsZWRieV09XCJhcmlhTGFiZWxsZWRieVwiXG4gICAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgPlxuICAgIDxzcGFuICpuZ0lmPVwic2VsZWN0ZWRPcHRpb25zLmxlbmd0aCA9PT0gMFwiPlxuICAgICAge3sgcGxhY2Vob2xkZXIgfX1cbiAgICA8L3NwYW4+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cInNlbGVjdGVkT3B0aW9ucy5sZW5ndGggPiAwXCI+XG4gICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiIXNlbGVjdGlvblRleHRcIj57e1xuICAgICAgICBnZXRTZWxlY3Rpb25UZXh0KClcbiAgICAgIH19PC9uZy1jb250YWluZXI+XG4gICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJzcC1zZWxlY3Rpb24tdGV4dFwiPjwvbmctY29udGVudD5cbiAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8c3AtaWNvbiBzcEJ1dHRvbkljb24gbmFtZT1cImNoZXZyb25Eb3duXCI+PC9zcC1pY29uPlxuICA8L2J1dHRvbj5cbiAgPG5nLXRlbXBsYXRlICNwb3BvdmVyPlxuICAgIDxzcC1wb3BvdmVyIG5vUGFkZGluZz5cbiAgICAgIDxzcC1saXN0Ym94XG4gICAgICAgIFtzcExpc3Rib3hJdGVtc109XCJsaXN0Ym94Q2hpbGRyZW5cIlxuICAgICAgICBuYXZpZ2F0aW9uV3JhcERpc2FibGVkXG4gICAgICAgIFttdWx0aXBsZV09XCJtdWx0aXBsZVwiXG4gICAgICAgIFsoc2VsZWN0ZWRWYWx1ZXMpXT1cImxpc3Rib3hWYWx1ZVwiXG4gICAgICAgIChzZWxlY3RlZCk9XCJfaGFuZGxlU2VsZWN0ZWQoKVwiXG4gICAgICAgIFtzaXplXT1cInNpemVcIlxuICAgICAgPlxuICAgICAgPC9zcC1saXN0Ym94PlxuICAgIDwvc3AtcG9wb3Zlcj5cbiAgPC9uZy10ZW1wbGF0ZT5cbjwvZGl2PlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFzaWMtc2VsZWN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvc2VsZWN0L3NyYy9iYXNpYy1zZWxlY3QvYmFzaWMtc2VsZWN0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvc2VsZWN0L3NyYy9iYXNpYy1zZWxlY3QvYmFzaWMtc2VsZWN0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsU0FBUyxFQUNULFVBQVUsRUFDVixVQUFVLEVBQ1YsS0FBSyxFQUNMLFNBQVMsR0FDVixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUVuRCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSx3Q0FBd0MsQ0FBQztBQUUxRSxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUN0RSxPQUFPLEVBQ0wsaUJBQWlCLEVBQ2pCLHlCQUF5QixHQUMxQixNQUFNLCtCQUErQixDQUFDO0FBQ3ZDLE9BQU8sRUFBRSx5QkFBeUIsRUFBRSxNQUFNLDZDQUE2QyxDQUFDOzs7Ozs7Ozs7Ozs7QUFFeEY7OztHQUdHO0FBVUgsTUFBTSxPQUFPLDBCQUEyQixTQUFRLHlCQUF5Qjs7dUhBQTVELDBCQUEwQjsyR0FBMUIsMEJBQTBCLDBEQVAxQjtRQUNUO1lBQ0UsT0FBTyxFQUFFLGlCQUFpQjtZQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLDBCQUEwQixDQUFDO1NBQzFEO0tBQ0Y7MkZBRVUsMEJBQTBCO2tCQVR0QyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxpQ0FBaUM7b0JBQzNDLFNBQVMsRUFBRTt3QkFDVDs0QkFDRSxPQUFPLEVBQUUsaUJBQWlCOzRCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSwyQkFBMkIsQ0FBQzt5QkFDMUQ7cUJBQ0Y7aUJBQ0Y7O0FBR0Q7Ozs7Ozs7Ozs7Ozs7Ozs7R0FnQkc7QUF1QkgsTUFBTSxPQUFPLG9CQUFxQixTQUFRLG1CQUFtQjtJQWdDM0QsWUFDRSxXQUE4QixFQUN0QixZQUEwQjtRQUVsQyxLQUFLLENBQUMsV0FBVyxDQUFDLENBQUM7UUFGWCxpQkFBWSxHQUFaLFlBQVksQ0FBYztRQWpDcEM7O1dBRUc7UUFFSCxTQUFJLEdBQWlDLFFBQVEsQ0FBQztRQUU5Qzs7OztXQUlHO1FBRUgsWUFBTyxHQU1hLGlCQUFpQixDQUFDO1FBVzlCLFlBQU8sR0FBRyxLQUFLLENBQUM7SUFPeEIsQ0FBQztJQUVELEtBQUssQ0FBQyxjQUEyQixTQUFTO1FBQ3hDLElBQUksSUFBSSxDQUFDLGlCQUFpQixFQUFFO1lBQzFCLElBQUksQ0FBQyxZQUFZLENBQUMsUUFBUSxDQUN4QixJQUFJLENBQUMsaUJBQWlCLENBQUMsYUFBYSxFQUNwQyxXQUFXLENBQ1osQ0FBQztTQUNIO0lBQ0gsQ0FBQztJQUVELFNBQVM7UUFDUCxPQUFPLElBQUksQ0FBQyxPQUFPLENBQUM7SUFDdEIsQ0FBQztJQUVELGNBQWMsQ0FBQyxXQUF3QjtRQUNyQyxJQUFJLENBQUMsT0FBTyxHQUFHLE9BQU8sQ0FBQyxXQUFXLENBQUMsQ0FBQztJQUN0QyxDQUFDO0lBRUQsZ0JBQWdCO1FBQ2QsUUFBUSxJQUFJLENBQUMsT0FBTyxFQUFFO1lBQ3BCLEtBQUssU0FBUztnQkFDWixPQUFPLFNBQVMsQ0FBQztZQUNuQixLQUFLLGdCQUFnQjtnQkFDbkIsT0FBTyxVQUFVLENBQUM7WUFDcEI7Z0JBQ0UsT0FBTyxXQUFXLENBQUM7U0FDdEI7SUFDSCxDQUFDO0lBRUQsbUJBQW1CO1FBQ2pCLFFBQVEsSUFBSSxDQUFDLE9BQU8sRUFBRTtZQUNwQixLQUFLLGFBQWEsQ0FBQztZQUNuQixLQUFLLGlCQUFpQixDQUFDO1lBQ3ZCLEtBQUssZ0JBQWdCO2dCQUNuQixPQUFPLE9BQU8sQ0FBQztZQUNqQjtnQkFDRSxPQUFPLE1BQU0sQ0FBQztTQUNqQjtJQUNILENBQUM7O2lIQTVFVSxvQkFBb0I7cUdBQXBCLG9CQUFvQiw2S0FqQnBCO1FBQ1Q7WUFDRSxPQUFPLEVBQUUsaUJBQWlCO1lBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsb0JBQW9CLENBQUM7WUFDbkQsS0FBSyxFQUFFLElBQUk7U0FDWjtRQUNEO1lBQ0UsT0FBTyxFQUFFLG1CQUFtQjtZQUM1QixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLG9CQUFvQixDQUFDO1NBQ3BEO1FBQ0QseUJBQXlCO0tBQzFCLHdOQThCdUMsVUFBVSx1REFHdkMsZ0JBQWdCLG9HQ3BHN0IsaStDQStDQTsyRkQwQmEsb0JBQW9CO2tCQXRCaEMsU0FBUzsrQkFDRSxpQkFBaUIsWUFHakIsZUFBZSxhQUNkO3dCQUNUOzRCQUNFLE9BQU8sRUFBRSxpQkFBaUI7NEJBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLHFCQUFxQixDQUFDOzRCQUNuRCxLQUFLLEVBQUUsSUFBSTt5QkFDWjt3QkFDRDs0QkFDRSxPQUFPLEVBQUUsbUJBQW1COzRCQUM1QixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxxQkFBcUIsQ0FBQzt5QkFDcEQ7d0JBQ0QseUJBQXlCO3FCQUMxQixRQUNLO3dCQUNKLG1CQUFtQixFQUFFLE1BQU07d0JBQzNCLHdCQUF3QixFQUFFLE1BQU07cUJBQ2pDO21JQU9ELElBQUk7c0JBREgsS0FBSztnQkFTTixPQUFPO3NCQUROLEtBQUs7Z0JBVUksVUFBVTtzQkFEbkIsU0FBUzt1QkFBQyxZQUFZO2dCQUliLGlCQUFpQjtzQkFEMUIsU0FBUzt1QkFBQyxtQkFBbUIsRUFBRSxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUU7Z0JBSTFDLE9BQU87c0JBRGhCLFNBQVM7dUJBQUMsZ0JBQWdCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBEaXJlY3RpdmUsXG4gIEVsZW1lbnRSZWYsXG4gIGZvcndhcmRSZWYsXG4gIElucHV0LFxuICBWaWV3Q2hpbGQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBQb3BvdmVyVHJpZ2dlckRpcmVjdGl2ZSB9IGZyb20gJy4uLy4uLy4uL3BvcG92ZXIvc3JjL3BvcG92ZXItdHJpZ2dlci5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgTGlzdGJveENvbXBvbmVudCB9IGZyb20gJy4uLy4uLy4uL2xpc3Rib3gvc3JjL2xpc3Rib3guY29tcG9uZW50JztcbmltcG9ydCB7IEZvY3VzTW9uaXRvciwgRm9jdXNPcmlnaW4gfSBmcm9tICdAYW5ndWxhci9jZGsvYTExeSc7XG5pbXBvcnQgeyBTZWxlY3RDb21wb25lbnRCYXNlIH0gZnJvbSAnLi4vY29tbW9uL3NlbGVjdC1jb21wb25lbnQtYmFzZSc7XG5pbXBvcnQge1xuICBTZWxlY3RWYWx1ZUhvbGRlcixcbiAgU2luZ2xlU2VsZWN0RGlyZWN0aXZlQmFzZSxcbn0gZnJvbSAnLi4vY29tbW9uL3NlbGVjdC12YWx1ZS1ob2xkZXInO1xuaW1wb3J0IHsgVmlld0VuY2Fwc3VsYXRpb25Qcm92aWRlciB9IGZyb20gJy4uLy4uLy4uL2NvbW1vbi9zYXBwaGlyZS12aWV3LWVuY2Fwc3VsYXRpb24nO1xuXG4vKipcbiAqIE5PVEU6IFN1cHBvcnQgZm9yIG11bHRpcGxlIHNlbGVjdGlvbiBpbiBiYXNpYyBzZWxlY3QgaXMgcmVtb3ZlZCwgYmFzZWQgb25cbiAqIGEgVVggZGVjaXNpb24uIFNlZSBjb21taXQgbWVzc2FnZSBmb3IgbW9yZSBkZXRhaWxzLlxuICovXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdzcC1iYXNpYy1zZWxlY3Q6bm90KFttdWx0aXBsZV0pJyxcbiAgcHJvdmlkZXJzOiBbXG4gICAge1xuICAgICAgcHJvdmlkZTogU2VsZWN0VmFsdWVIb2xkZXIsXG4gICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBCYXNpY1NpbmdsZVNlbGVjdERpcmVjdGl2ZSksXG4gICAgfSxcbiAgXSxcbn0pXG5leHBvcnQgY2xhc3MgQmFzaWNTaW5nbGVTZWxlY3REaXJlY3RpdmUgZXh0ZW5kcyBTaW5nbGVTZWxlY3REaXJlY3RpdmVCYXNlIHt9XG5cbi8qKlxuICogQWxsb3dzIHVzZXIgdG8gc2VsZWN0IGEgc2luZ2xlIG9wdGlvbiBmcm9tIGEgbGlzdCwgc2ltaWxhciB0byBuYXRpdmUgc2VsZWN0XG4gKiBjb21wb25lbnQuXG4gKlxuICogRXhhbXBsZTpcbiAqIGBgYHRzeFxuICogPHNwLWJhc2ljLXNlbGVjdFxuICogICAgcGxhY2Vob2xkZXI9XCJTZWxlY3QgYW4gb3B0aW9uXCJcbiAqICAgIHNpemU9XCJzbWFsbFwiXG4gKiAgICB2YXJpYW50PVwiY29udGFpbmVkXCJcbiAqID5cbiAqICAgPHNwLW9wdGlvbiB2YWx1ZT1cIm9wdGlvbjFcIj5GaXJzdCBPcHRpb248L3NwLW9wdGlvbj5cbiAqICAgPHNwLW9wdGlvbiB2YWx1ZT1cIm9wdGlvbjJcIj5TZWNvbmQgT3B0aW9uPC9zcC1vcHRpb24+XG4gKiAgIDxzcC1vcHRpb24gdmFsdWU9XCJvcHRpb24zXCI+VGhpcmQgT3B0aW9uPC9zcC1vcHRpb24+XG4gKiA8L3NwLWJhc2ljLXNlbGVjdD5cbiAqIGBgYFxuICovXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzcC1iYXNpYy1zZWxlY3QnLFxuICB0ZW1wbGF0ZVVybDogJy4vYmFzaWMtc2VsZWN0LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vYmFzaWMtc2VsZWN0LmNvbXBvbmVudC5zY3NzJ10sXG4gIGV4cG9ydEFzOiAnc3BCYXNpY1NlbGVjdCcsXG4gIHByb3ZpZGVyczogW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gQmFzaWNTZWxlY3RDb21wb25lbnQpLFxuICAgICAgbXVsdGk6IHRydWUsXG4gICAgfSxcbiAgICB7XG4gICAgICBwcm92aWRlOiBTZWxlY3RDb21wb25lbnRCYXNlLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gQmFzaWNTZWxlY3RDb21wb25lbnQpLFxuICAgIH0sXG4gICAgVmlld0VuY2Fwc3VsYXRpb25Qcm92aWRlcixcbiAgXSxcbiAgaG9zdDoge1xuICAgICdbYXR0ci5hcmlhLWxhYmVsXSc6ICdudWxsJyxcbiAgICAnW2F0dHIuYXJpYS1sYWJlbGxlZGJ5XSc6ICdudWxsJyxcbiAgfSxcbn0pXG5leHBvcnQgY2xhc3MgQmFzaWNTZWxlY3RDb21wb25lbnQgZXh0ZW5kcyBTZWxlY3RDb21wb25lbnRCYXNlIHtcbiAgLyoqXG4gICAqIFNpemUgb2YgdGhlIGJ1dHRvblxuICAgKi9cbiAgQElucHV0KClcbiAgc2l6ZTogJ3NtYWxsJyB8ICdtZWRpdW0nIHwgJ2xhcmdlJyA9ICdtZWRpdW0nO1xuXG4gIC8qKlxuICAgKiBWaXN1YWwgdmFyaWF0aW9uc1xuICAgKiBUT0RPKHY0KTogcmVtb3ZlICdjb250YWluZWQnIGFuZCAndW5jb250YWluZWQnXG4gICAqIEBkZWZhdWx0ICdzZWNvbmRhcnktZ2hvc3QnXG4gICAqL1xuICBASW5wdXQoKVxuICB2YXJpYW50OlxuICAgIHwgJ3ByaW1hcnknXG4gICAgfCAnc2Vjb25kYXJ5LWZpbGwnXG4gICAgfCAnc2Vjb25kYXJ5LWdob3N0J1xuICAgIHwgJ3RlcnRpYXJ5LWdob3N0J1xuICAgIHwgJ2NvbnRhaW5lZCdcbiAgICB8ICd1bmNvbnRhaW5lZCcgPSAnc2Vjb25kYXJ5LWdob3N0JztcblxuICBAVmlld0NoaWxkKCd0cmlnZ2VyUmVmJylcbiAgcHJvdGVjdGVkIHRyaWdnZXJSZWY6IFBvcG92ZXJUcmlnZ2VyRGlyZWN0aXZlIHwgdW5kZWZpbmVkO1xuXG4gIEBWaWV3Q2hpbGQoJ3RyaWdnZXJFbGVtZW50UmVmJywgeyByZWFkOiBFbGVtZW50UmVmIH0pXG4gIHByb3RlY3RlZCB0cmlnZ2VyRWxlbWVudFJlZjogRWxlbWVudFJlZiB8IHVuZGVmaW5lZDtcblxuICBAVmlld0NoaWxkKExpc3Rib3hDb21wb25lbnQpXG4gIHByb3RlY3RlZCBsaXN0Ym94OiBMaXN0Ym94Q29tcG9uZW50IHwgdW5kZWZpbmVkO1xuXG4gIHByaXZhdGUgZm9jdXNlZCA9IGZhbHNlO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHZhbHVlSG9sZGVyOiBTZWxlY3RWYWx1ZUhvbGRlcixcbiAgICBwcml2YXRlIGZvY3VzTW9uaXRvcjogRm9jdXNNb25pdG9yXG4gICkge1xuICAgIHN1cGVyKHZhbHVlSG9sZGVyKTtcbiAgfVxuXG4gIGZvY3VzKGZvY3VzT3JpZ2luOiBGb2N1c09yaWdpbiA9ICdwcm9ncmFtJykge1xuICAgIGlmICh0aGlzLnRyaWdnZXJFbGVtZW50UmVmKSB7XG4gICAgICB0aGlzLmZvY3VzTW9uaXRvci5mb2N1c1ZpYShcbiAgICAgICAgdGhpcy50cmlnZ2VyRWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LFxuICAgICAgICBmb2N1c09yaWdpblxuICAgICAgKTtcbiAgICB9XG4gIH1cblxuICBpc0ZvY3VzZWQoKSB7XG4gICAgcmV0dXJuIHRoaXMuZm9jdXNlZDtcbiAgfVxuXG4gIF9vbkZvY3VzQ2hhbmdlKGZvY3VzT3JpZ2luOiBGb2N1c09yaWdpbikge1xuICAgIHRoaXMuZm9jdXNlZCA9IEJvb2xlYW4oZm9jdXNPcmlnaW4pO1xuICB9XG5cbiAgZ2V0QnV0dG9uVmFyaWFudCgpIHtcbiAgICBzd2l0Y2ggKHRoaXMudmFyaWFudCkge1xuICAgICAgY2FzZSAncHJpbWFyeSc6XG4gICAgICAgIHJldHVybiAncHJpbWFyeSc7XG4gICAgICBjYXNlICd0ZXJ0aWFyeS1naG9zdCc6XG4gICAgICAgIHJldHVybiAndGVydGlhcnknO1xuICAgICAgZGVmYXVsdDpcbiAgICAgICAgcmV0dXJuICdzZWNvbmRhcnknO1xuICAgIH1cbiAgfVxuXG4gIGdldEJ1dHRvbkFwcGVhcmFuY2UoKSB7XG4gICAgc3dpdGNoICh0aGlzLnZhcmlhbnQpIHtcbiAgICAgIGNhc2UgJ3VuY29udGFpbmVkJzpcbiAgICAgIGNhc2UgJ3NlY29uZGFyeS1naG9zdCc6XG4gICAgICBjYXNlICd0ZXJ0aWFyeS1naG9zdCc6XG4gICAgICAgIHJldHVybiAnZ2hvc3QnO1xuICAgICAgZGVmYXVsdDpcbiAgICAgICAgcmV0dXJuICdmaWxsJztcbiAgICB9XG4gIH1cbn1cbiIsIjxkaXYgc3R5bGU9XCJwb3NpdGlvbjogcmVsYXRpdmVcIj5cbiAgPHNwLWhpZGRlbi1zZWxlY3Q+PC9zcC1oaWRkZW4tc2VsZWN0PlxuICA8YnV0dG9uXG4gICAgc3AtYnV0dG9uXG4gICAgW3ZhcmlhbnRdPVwiZ2V0QnV0dG9uVmFyaWFudCgpXCJcbiAgICBbYXBwZWFyYW5jZV09XCJnZXRCdXR0b25BcHBlYXJhbmNlKClcIlxuICAgIFtzaXplXT1cInNpemVcIlxuICAgIGljb25BbGlnbj1cInJpZ2h0XCJcbiAgICBbc3BQb3BvdmVyVHJpZ2dlckZvcl09XCJwb3BvdmVyXCJcbiAgICBzcFBvcG92ZXJQbGFjZW1lbnQ9XCJib3R0b20gc3RhcnRcIlxuICAgICN0cmlnZ2VyRWxlbWVudFJlZlxuICAgICN0cmlnZ2VyUmVmPVwic3BQb3BvdmVyVHJpZ2dlclwiXG4gICAgKGtleWRvd24pPVwiaGFuZGxlS2V5RG93bigkZXZlbnQpXCJcbiAgICAoc3BQb3BvdmVyVHJpZ2dlck9wZW5lZCk9XCJfb25PcGVuKClcIlxuICAgIChzcFBvcG92ZXJUcmlnZ2VyQ2xvc2VkKT1cIl9vbkNsb3NlKClcIlxuICAgIGNka01vbml0b3JFbGVtZW50Rm9jdXNcbiAgICAoY2RrRm9jdXNDaGFuZ2UpPVwiX29uRm9jdXNDaGFuZ2UoJGV2ZW50KVwiXG4gICAgYXJpYS1oYXNwb3B1cD1cImxpc3Rib3hcIlxuICAgIFthdHRyLmFyaWEtbGFiZWxdPVwiYXJpYUxhYmVsXCJcbiAgICBbYXR0ci5hcmlhLWxhYmVsbGVkYnldPVwiYXJpYUxhYmVsbGVkYnlcIlxuICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiXG4gID5cbiAgICA8c3BhbiAqbmdJZj1cInNlbGVjdGVkT3B0aW9ucy5sZW5ndGggPT09IDBcIj5cbiAgICAgIHt7IHBsYWNlaG9sZGVyIH19XG4gICAgPC9zcGFuPlxuICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJzZWxlY3RlZE9wdGlvbnMubGVuZ3RoID4gMFwiPlxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIiFzZWxlY3Rpb25UZXh0XCI+e3tcbiAgICAgICAgZ2V0U2VsZWN0aW9uVGV4dCgpXG4gICAgICB9fTwvbmctY29udGFpbmVyPlxuICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwic3Atc2VsZWN0aW9uLXRleHRcIj48L25nLWNvbnRlbnQ+XG4gICAgPC9uZy1jb250YWluZXI+XG4gICAgPHNwLWljb24gc3BCdXR0b25JY29uIG5hbWU9XCJjaGV2cm9uRG93blwiPjwvc3AtaWNvbj5cbiAgPC9idXR0b24+XG4gIDxuZy10ZW1wbGF0ZSAjcG9wb3Zlcj5cbiAgICA8c3AtcG9wb3ZlciBub1BhZGRpbmc+XG4gICAgICA8c3AtbGlzdGJveFxuICAgICAgICBbc3BMaXN0Ym94SXRlbXNdPVwibGlzdGJveENoaWxkcmVuXCJcbiAgICAgICAgbmF2aWdhdGlvbldyYXBEaXNhYmxlZFxuICAgICAgICBbbXVsdGlwbGVdPVwibXVsdGlwbGVcIlxuICAgICAgICBbKHNlbGVjdGVkVmFsdWVzKV09XCJsaXN0Ym94VmFsdWVcIlxuICAgICAgICAoc2VsZWN0ZWQpPVwiX2hhbmRsZVNlbGVjdGVkKClcIlxuICAgICAgICBbc2l6ZV09XCJzaXplXCJcbiAgICAgID5cbiAgICAgIDwvc3AtbGlzdGJveD5cbiAgICA8L3NwLXBvcG92ZXI+XG4gIDwvbmctdGVtcGxhdGU+XG48L2Rpdj5cbiJdfQ==

package/fesm2015/danske-sapphire-angular.mjs

@@ -1303,7 +1303,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
 class MenuItemComponent {
 }
 MenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-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-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]" }] });
+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]" }] });
 __decorate([
     CoerceBoolean
 ], MenuItemComponent.prototype, "disabled", void 0);
@@ -1324,7 +1324,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                         UseComponentStyles,
                     ], host: {
                         '[class.sapphire-listbox__item]': 'true',
-                    }, template: "<div class=\"sapphire-listbox__content\" _spUseComponentStyles>\n  <ng-content select=\"sp-menu-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" }]
+                    }, 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" }]
         }], propDecorators: { disabled: [{
                 type: HostBinding,
                 args: ['class.is-disabled']
@@ -4930,7 +4930,12 @@ class BasicSelectComponent extends SelectComponentBase {
          * Size of the button
          */
         this.size = 'medium';
-        this.variant = 'uncontained';
+        /**
+         * Visual variations
+         * TODO(v4): remove 'contained' and 'uncontained'
+         * @default 'secondary-ghost'
+         */
+        this.variant = 'secondary-ghost';
         this.focused = false;
     }
     focus(focusOrigin = 'program') {
@@ -4944,6 +4949,26 @@ class BasicSelectComponent extends SelectComponentBase {
     _onFocusChange(focusOrigin) {
         this.focused = Boolean(focusOrigin);
     }
+    getButtonVariant() {
+        switch (this.variant) {
+            case 'primary':
+                return 'primary';
+            case 'tertiary-ghost':
+                return 'tertiary';
+            default:
+                return 'secondary';
+        }
+    }
+    getButtonAppearance() {
+        switch (this.variant) {
+            case 'uncontained':
+            case 'secondary-ghost':
+            case 'tertiary-ghost':
+                return 'ghost';
+            default:
+                return 'fill';
+        }
+    }
 }
 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 });
 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: [
@@ -4957,7 +4982,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 === 'primary' ? 'primary' : 'secondary'\"\n    [appearance]=\"variant === 'uncontained' ? 'ghost' : 'fill'\"\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" }] });
+    ], 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" }] });
 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: [
@@ -4974,7 +4999,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 === 'primary' ? 'primary' : 'secondary'\"\n    [appearance]=\"variant === 'uncontained' ? 'ghost' : 'fill'\"\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"] }]
+                    }, 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"] }]
         }], ctorParameters: function () { return [{ type: SelectValueHolder }, { type: i2.FocusMonitor }]; }, propDecorators: { size: [{
                 type: Input
             }], variant: [{
@@ -7880,10 +7905,10 @@ class PaginationComponent {
     }
 }
 PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-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  >\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"] }] });
+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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
-            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  >\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"] }]
+            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"] }]
         }], propDecorators: { pageSize: [{
                 type: Input
             }], itemCount: [{