diff --git a/apps/code-examples/src/assets/stack-blitz/package-lock.json b/apps/code-examples/src/assets/stack-blitz/package-lock.json index 26307d0917..cf97126c62 100644 --- a/apps/code-examples/src/assets/stack-blitz/package-lock.json +++ b/apps/code-examples/src/assets/stack-blitz/package-lock.json @@ -2526,9 +2526,9 @@ } }, "node_modules/@blackbaud/skyux-design-tokens": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/@blackbaud/skyux-design-tokens/-/skyux-design-tokens-4.0.2.tgz", - "integrity": "sha512-G6T+iNbPArcGEVYZyv89+noI/NnQjY27kP1gwTDfvnpLmQ5cN4NvzcIKd3JU+RvZ+1nkfZHU7sFI44hpZTQ2eA==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/@blackbaud/skyux-design-tokens/-/skyux-design-tokens-4.1.0.tgz", + "integrity": "sha512-S5FxAx25OaOORgCC4Lz9cmQHQ8XNC/a/lnO0jUbrBAbJSJV2iSh13OxvevcT90oWaPNhdkEsruUAR3nv/MmAYA==", "license": "MIT", "engines": { "node": ">= 4.2.1", diff --git a/libs/components/toast/src/lib/modules/toast/toast.component.scss b/libs/components/toast/src/lib/modules/toast/toast.component.scss index 46e9733f67..f4c2cd26d4 100644 --- a/libs/components/toast/src/lib/modules/toast/toast.component.scss +++ b/libs/components/toast/src/lib/modules/toast/toast.component.scss @@ -256,6 +256,14 @@ sky-toast { } .sky-theme-modern { + .sky-toaster-newest-on-top { + sky-toast:last-child { + .sky-toast { + margin-bottom: var(--sky-comp-omnibar-toaster-space-inset-bottom); + } + } + } + sky-toast { .sky-toast-btn-close { transition: diff --git a/libs/components/toast/src/lib/modules/toast/toaster.component.spec.ts b/libs/components/toast/src/lib/modules/toast/toaster.component.spec.ts index 8f19f7e407..8331299e38 100644 --- a/libs/components/toast/src/lib/modules/toast/toaster.component.spec.ts +++ b/libs/components/toast/src/lib/modules/toast/toaster.component.spec.ts @@ -327,4 +327,22 @@ describe('Toaster component', () => { validateToastMessage(toasts[0], 'Message 1'); validateToastMessage(toasts[1], 'Message 2'); })); + + it('should add sky-toaster-newest-on-top class to host when displayDirection is NewestOnTop', fakeAsync(() => { + options.displayDirection = SkyToastDisplayDirection.NewestOnTop; + + openMessage(); + + const toaster = document.querySelector('sky-toaster'); + expect(toaster).toHaveCssClass('sky-toaster-newest-on-top'); + })); + + it('should not add sky-toaster-newest-on-top class to host when displayDirection is OldestOnTop', fakeAsync(() => { + options.displayDirection = SkyToastDisplayDirection.OldestOnTop; + + openMessage(); + + const toaster = document.querySelector('sky-toaster'); + expect(toaster).not.toHaveCssClass('sky-toaster-newest-on-top'); + })); }); diff --git a/libs/components/toast/src/lib/modules/toast/toaster.component.ts b/libs/components/toast/src/lib/modules/toast/toaster.component.ts index 6e2cd1d9b3..6b5cdc7d7b 100644 --- a/libs/components/toast/src/lib/modules/toast/toaster.component.ts +++ b/libs/components/toast/src/lib/modules/toast/toaster.component.ts @@ -14,6 +14,7 @@ import { ViewContainerRef, ViewEncapsulation, inject, + signal, } from '@angular/core'; import { SKY_STACKING_CONTEXT, SkyDynamicComponentService } from '@skyux/core'; @@ -41,6 +42,9 @@ import { SkyToastDisplayDirection } from './types/toast-display-direction'; changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CommonModule, SkyToastComponent, SkyToastResourcesModule], + host: { + '[class.sky-toaster-newest-on-top]': 'isNewestOnTop()', + }, }) export class SkyToasterComponent implements AfterViewInit, OnDestroy { public toastsForDisplay: SkyToast[] | undefined; @@ -62,6 +66,12 @@ export class SkyToasterComponent implements AfterViewInit, OnDestroy { readonly #containerOptions = inject(SkyToastContainerOptions, { optional: true, }); + + protected isNewestOnTop = signal( + this.#containerOptions?.displayDirection === + SkyToastDisplayDirection.NewestOnTop, + ); + readonly #dynamicComponentSvc = inject(SkyDynamicComponentService); readonly #domAdapter = inject(SkyToastAdapterService); readonly #environmentInjector = inject(EnvironmentInjector);