diff --git a/src/components/carousel/carousel-slide.ts b/src/components/carousel/carousel-slide.ts index 3ed39f941..bee2938c7 100644 --- a/src/components/carousel/carousel-slide.ts +++ b/src/components/carousel/carousel-slide.ts @@ -1,9 +1,9 @@ -import { consume } from '@lit/context'; import { html, LitElement } from 'lit'; import { property } from 'lit/decorators.js'; import { EaseInOut } from '../../animations/easings.js'; import { addAnimationController } from '../../animations/player.js'; import { carouselContext } from '../common/context.js'; +import { createAsyncContext } from '../common/controllers/async-consumer.js'; import { addInternalsController } from '../common/controllers/internals.js'; import { registerComponent } from '../common/definitions/register.js'; import { formatString } from '../common/util.js'; @@ -38,8 +38,7 @@ export default class IgcCarouselSlideComponent extends LitElement { private readonly _player = addAnimationController(this); - @consume({ context: carouselContext, subscribe: true }) - private readonly _carousel?: IgcCarouselComponent; + private _carousel?: IgcCarouselComponent; protected get _index(): number { return this._carousel ? this._carousel.slides.indexOf(this) : 0; @@ -74,6 +73,15 @@ export default class IgcCarouselSlideComponent extends LitElement { @property({ type: Boolean, reflect: true }) public previous = false; + constructor() { + super(); + + // Set carousel reference once provider is ready (addresses Blazor timing issue) + createAsyncContext(this, carouselContext, (carousel) => { + this._carousel = carousel; + }); + } + /** * @hidden @internal * @deprecated since 5.4.0. Use Carousel's `select` method instead. diff --git a/src/components/carousel/carousel.ts b/src/components/carousel/carousel.ts index 97af63bf0..2adb5b55e 100644 --- a/src/components/carousel/carousel.ts +++ b/src/components/carousel/carousel.ts @@ -145,6 +145,10 @@ export default class IgcCarouselComponent extends EventEmitterMixin< initialValue: this, }); + private _setCarouselContext(): void { + this._context.setValue(this, true); + } + @queryAll(IgcCarouselIndicatorComponent.tagName) private readonly _defaultIndicators!: NodeListOf; @@ -350,7 +354,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin< @watch('slidesLabelFormat') @watch('indicatorsLabelFormat') protected _contextChanged(): void { - this._context.setValue(this, true); + this._setCarouselContext(); } @watch('interval') @@ -421,6 +425,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin< protected override async firstUpdated(): Promise { await this.updateComplete; + this._setCarouselContext(); if (!isEmpty(this._slides)) { this._activateSlide(