igniteui-webcomponents 7.3.0-beta.0 → 7.3.0-beta.1

package/components/carousel/carousel.d.ts

@@ -1,5 +1,5 @@
 import { type ICarouselResourceStrings } from 'igniteui-i18n-core';
-import { LitElement } from 'lit';
+import { LitElement, type PropertyValues } from 'lit';
 import type { Constructor } from '#internals/mixins/constructor.js';
 import type { CarouselIndicatorsOrientation, HorizontalTransitionAnimation } from '../types.js';
 import IgcCarouselSlideComponent from './carousel-slide.js';
@@ -8,13 +8,14 @@ export interface IgcCarouselComponentEventMap {
     igcPlaying: CustomEvent<void>;
     igcPaused: CustomEvent<void>;
 }
-declare const IgcCarouselComponent_base: Constructor<import("#internals/mixins/event-emitter.js").EventEmitterInterface<IgcCarouselComponentEventMap>> & Constructor<LitElement>;
+declare const IgcCarouselComponent_base: import("#internals/mixins/constructor.js").AbstractConstructor<import("#internals/mixins/i18n.js").I18nInterface<ICarouselResourceStrings, Required<ICarouselResourceStrings>>> & Constructor<import("#internals/mixins/event-emitter.js").EventEmitterInterface<IgcCarouselComponentEventMap>> & Constructor<LitElement>;
 /**
  * The carousel presents a set of slides by sequentially displaying a subset of one or more.
  *
  * @element igc-carousel
  *
  * @slot Default slot for the carousel. Any carousel slides should be projected here.
+ * @slot indicator - Renders the custom indicators of the carousel. An indicator element sets this slot itself.
  * @slot previous-button - Renders content inside the previous button.
  * @slot next-button - Renders content inside the next button.
  *
@@ -40,51 +41,68 @@ export default class IgcCarouselComponent extends IgcCarouselComponent_base {
     private _hasKeyboardInteractionOnIndicators;
     private _hasPointerInteraction;
     private _hasInnerFocus;
+    /**
+     * Whether an interaction - a pointer over the carousel, or focus inside it -
+     * caused the current paused state. An explicit `pause()` call does not set it.
+     */
+    private _pausedByInteraction;
     private _slides;
     private _projectedIndicators;
-    private _activeSlide;
+    private _activeSlide?;
     private _playing;
     private readonly _slots;
-    private readonly _i18nController;
     private readonly _context;
-    private _setCarouselContext;
     private readonly _defaultIndicators;
     private readonly _carouselSlidesContainerRef;
     private readonly _indicatorsContainerRef;
     private readonly _prevButtonRef;
     private readonly _nextButtonRef;
     private get _hasProjectedIndicators();
+    /** The indicators that the carousel shows. */
+    private get _indicators();
     private get _showIndicatorsLabel();
     private get _nextIndex();
     private get _previousIndex();
     /**
      * Whether the carousel should skip rotating to the first slide after it reaches the last.
+     *
      * @attr disable-loop
+     * @default false
      */
     disableLoop: boolean;
     /**
      * Whether the carousel should ignore use interactions and not pause on them.
+     *
      * @attr disable-pause-on-interaction
+     * @default false
      */
     disablePauseOnInteraction: boolean;
     /**
      * Whether the carousel should skip rendering of the default navigation buttons.
+     *
      * @attr hide-navigation
+     * @default false
      */
     hideNavigation: boolean;
     /**
      * Whether the carousel should render the indicator controls (dots).
+     *
      * @attr hide-indicators
+     * @default false
      */
     hideIndicators: boolean;
     /**
      * Whether the carousel has vertical alignment.
+     *
      * @attr vertical
+     * @default false
      */
     vertical: boolean;
     /**
-     * Sets the orientation of the indicator controls (dots).
+     * The orientation of the indicator controls (dots).
+     *
      * @attr indicators-orientation
+     * @default end
      */
     indicatorsOrientation: CarouselIndicatorsOrientation;
     /**
@@ -114,50 +132,36 @@ export default class IgcCarouselComponent extends IgcCarouselComponent_base {
     interval: number | undefined;
     /**
      * The maximum number of indicator controls (dots) that can be shown. Default value is `10`.
+     *
      * @attr maximum-indicators-count
+     * @default 10
      */
     maximumIndicatorsCount: number;
     /**
      * The animation type.
+     *
      * @attr animation-type
+     * @default 'slide'
      */
     animationType: HorizontalTransitionAnimation;
-    /**
-     * Gets/Sets the locale used for getting language, affecting resource strings.
-     * @attr locale
-     */
-    set locale(value: string);
-    get locale(): string;
-    /**
-     * The resource strings for localization.
-     * Currently only aria-label attributes are localized for the carousel.
-     */
-    set resourceStrings(value: ICarouselResourceStrings);
-    get resourceStrings(): ICarouselResourceStrings;
-    /**
-     * The slides of the carousel.
-     */
+    /** The slides of the carousel. */
     get slides(): IgcCarouselSlideComponent[];
-    /**
-     * The total number of slides.
-     */
+    /** Total number of slides. */
     get total(): number;
-    /**
-     * The index of the current active slide.
-     */
+    /** The index of the current active slide. */
     get current(): number;
-    /**
-     * Whether the carousel is in playing state.
-     */
+    /** Whether the carousel is in playing state. */
     get isPlaying(): boolean;
-    /**
-     * Whether the carousel in in paused state.
-     */
+    /** Whether the carousel is in paused state. */
     get isPaused(): boolean;
-    protected _contextChanged(): void;
-    protected _intervalChange(): void;
     constructor();
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    /** @internal */
+    connectedCallback(): void;
+    /** @internal */
+    disconnectedCallback(): void;
     protected firstUpdated(): Promise<void>;
+    protected updated(): void;
     private _observerCallback;
     private _handleSlotChange;
     private _handlePointerInteraction;
@@ -174,7 +178,20 @@ export default class IgcCarouselComponent extends IgcCarouselComponent_base {
     private _handleInteraction;
     private _handlePauseOnInteraction;
     private _activateSlide;
+    /** Activates the authored active slide, or the first slide. */
+    private _activateInitialSlide;
+    /**
+     * Moves the active state from a slide that left the carousel to the slide
+     * that takes its position.
+     */
+    private _reactivateSlide;
     private _updateProjectedIndicators;
+    /**
+     * Sets the rotation state of the carousel, and starts or clears its timer.
+     */
+    private _setRotation;
+    /** Stops the rotation, and keeps the interaction state as it is. */
+    private _pause;
     private _resetInterval;
     private _restartInterval;
     private _animateSlides;

package/components/carousel/carousel.js

@@ -5,7 +5,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var IgcCarouselComponent_1;
-import { ContextProvider } from '@lit/context';
 import { CarouselResourceStringsEN, } from 'igniteui-i18n-core';
 import { html, LitElement, nothing } from 'lit';
 import { property, queryAll, state } from 'lit/decorators.js';
@@ -13,17 +12,18 @@ import { cache } from 'lit/directives/cache.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { carouselContext } from '#internals/context.js';
+import { addContextProvider } from '#internals/controllers/context-provider.js';
 import { addGesturesController, } from '#internals/controllers/gestures.js';
 import { addInternalsController } from '#internals/controllers/internals.js';
 import { addKeybindings, arrowLeft, arrowRight, endKey, homeKey, } from '#internals/controllers/key-bindings.js';
 import { createMutationController, } from '#internals/controllers/mutation-observer.js';
 import { addSlotController, setSlots, } from '#internals/controllers/slot.js';
 import { shadowOptions } from '#internals/decorators/shadow-options.js';
-import { watch } from '#internals/decorators/watch.js';
 import { registerComponent } from '#internals/definitions/register.js';
-import { addI18nController } from '#internals/i18n/i18n-controller.js';
 import { EventEmitterMixin } from '#internals/mixins/event-emitter.js';
+import { I18nMixin } from '#internals/mixins/i18n.js';
 import { partMap } from '#internals/part-map.js';
+import { renderSlottedIcon } from '#internals/templates/slotted-icon.js';
 import { firstOf, isEmpty, lastOf } from '#internals/utils/arrays.js';
 import { isLTR } from '#internals/utils/dom.js';
 import { addSafeEventListener, getElementFromPath, } from '#internals/utils/events.js';
@@ -40,19 +40,24 @@ import { all } from './themes/container.js';
 import { styles as shared } from './themes/shared/carousel.common.css.js';
 const nextId = createIdGenerator('igc-carousel');
 const Slots = setSlots('indicator', 'previous-button', 'next-button');
-let IgcCarouselComponent = class IgcCarouselComponent extends EventEmitterMixin(LitElement) {
+const i18n = {
+    defaultEN: CarouselResourceStringsEN,
+};
+let IgcCarouselComponent = class IgcCarouselComponent extends I18nMixin(EventEmitterMixin(LitElement), i18n) {
     static { IgcCarouselComponent_1 = this; }
     static { this.styles = [styles, shared]; }
     static { this.tagName = 'igc-carousel'; }
     static register() {
         registerComponent(IgcCarouselComponent_1, IgcCarouselIndicatorComponent, IgcCarouselIndicatorContainerComponent, IgcCarouselSlideComponent, IgcIconComponent, IgcButtonComponent);
     }
-    _setCarouselContext() {
-        this._context.setValue(this, true);
-    }
     get _hasProjectedIndicators() {
         return !isEmpty(this._projectedIndicators);
     }
+    get _indicators() {
+        return this._hasProjectedIndicators
+            ? this._projectedIndicators
+            : Array.from(this._defaultIndicators);
+    }
     get _showIndicatorsLabel() {
         return this.total > this.maximumIndicatorsCount;
     }
@@ -75,18 +80,6 @@ let IgcCarouselComponent = class IgcCarouselComponent extends EventEmitterMixin(
     get slidesLabelFormat() {
         return (this._slidesLabelFormat ?? `{0} ${this.resourceStrings.carousel_of} {1}`);
     }
-    set locale(value) {
-        this._i18nController.locale = value;
-    }
-    get locale() {
-        return this._i18nController.locale;
-    }
-    set resourceStrings(value) {
-        this._i18nController.resourceStrings = value;
-    }
-    get resourceStrings() {
-        return this._i18nController.resourceStrings;
-    }
     get slides() {
         return Array.from(this._slides);
     }
@@ -94,7 +87,9 @@ let IgcCarouselComponent = class IgcCarouselComponent extends EventEmitterMixin(
         return this._slides.length;
     }
     get current() {
-        return Math.max(0, this._slides.indexOf(this._activeSlide));
+        return this._activeSlide
+            ? Math.max(0, this._slides.indexOf(this._activeSlide))
+            : 0;
     }
     get isPlaying() {
         return this._playing;
@@ -102,22 +97,15 @@ let IgcCarouselComponent = class IgcCarouselComponent extends EventEmitterMixin(
     get isPaused() {
         return this._paused;
     }
-    _contextChanged() {
-        this._setCarouselContext();
-    }
-    _intervalChange() {
-        if (!this.isPlaying) {
-            this._playing = true;
-        }
-        this._restartInterval();
-    }
     constructor() {
         super();
         this._carouselId = nextId();
         this._paused = false;
+        this._lastInterval = null;
         this._hasKeyboardInteractionOnIndicators = false;
         this._hasPointerInteraction = false;
         this._hasInnerFocus = false;
+        this._pausedByInteraction = false;
         this._slides = [];
         this._projectedIndicators = [];
         this._playing = false;
@@ -126,12 +114,10 @@ let IgcCarouselComponent = class IgcCarouselComponent extends EventEmitterMixin(
             onChange: this._handleSlotChange,
             initial: true,
         });
-        this._i18nController = addI18nController(this, {
-            defaultEN: CarouselResourceStringsEN,
-        });
-        this._context = new ContextProvider(this, {
+        this._context = addContextProvider(this, {
             context: carouselContext,
-            initialValue: this,
+            watch: ['animationType', 'slidesLabelFormat', 'indicatorsLabelFormat'],
+            value: () => this,
         });
         this._carouselSlidesContainerRef = createRef();
         this._indicatorsContainerRef = createRef();
@@ -187,11 +173,34 @@ let IgcCarouselComponent = class IgcCarouselComponent extends EventEmitterMixin(
             },
         });
     }
+    willUpdate(changedProperties) {
+        if (changedProperties.has('interval')) {
+            const play = asNumber(this.interval) > 0;
+            const interacting = play &&
+                !this.disablePauseOnInteraction &&
+                (this._hasPointerInteraction || this._hasInnerFocus);
+            this._setRotation(play && !interacting, interacting);
+            this._pausedByInteraction = interacting;
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.hasUpdated) {
+            this._restartInterval();
+        }
+    }
+    disconnectedCallback() {
+        this._resetInterval();
+        super.disconnectedCallback();
+    }
     async firstUpdated() {
         await this.updateComplete;
-        this._setCarouselContext();
-        if (!isEmpty(this._slides)) {
-            this._activateSlide(this._slides.findLast((slide) => slide.active) ?? firstOf(this._slides));
+        this._context.publish();
+        this._activateInitialSlide();
+    }
+    updated() {
+        if (this._hasProjectedIndicators) {
+            this._updateProjectedIndicators();
         }
     }
     _observerCallback({ changes: { added, attributes }, }) {
@@ -199,7 +208,10 @@ let IgcCarouselComponent = class IgcCarouselComponent extends EventEmitterMixin(
         if (activeSlides.length <= 1) {
             return;
         }
-        const idx = this._slides.indexOf(added.length ? lastOf(added).node : lastOf(attributes).node);
+        const node = isEmpty(added)
+            ? (lastOf(attributes)?.node ?? lastOf(activeSlides))
+            : lastOf(added).node;
+        const idx = this._slides.indexOf(node);
         for (const [i, slide] of this._slides.entries()) {
             if (slide.active && i !== idx) {
                 slide.active = false;
@@ -209,9 +221,17 @@ let IgcCarouselComponent = class IgcCarouselComponent extends EventEmitterMixin(
     }
     _handleSlotChange(params) {
         if (params.isDefault || params.isInitial) {
+            const previousSlide = this._activeSlide;
+            const previousIndex = this.current;
             this._slides = this._slots.getAssignedElements('[default]', {
                 selector: IgcCarouselSlideComponent.tagName,
             });
+            if (previousSlide && !this._slides.includes(previousSlide)) {
+                this._reactivateSlide(previousSlide, previousIndex);
+            }
+            else if (this.hasUpdated && !this._activeSlide) {
+                this._activateInitialSlide();
+            }
         }
         if (params.slot === 'indicator') {
             this._projectedIndicators = this._slots.getAssignedElements('indicator', {
@@ -221,9 +241,7 @@ let IgcCarouselComponent = class IgcCarouselComponent extends EventEmitterMixin(
     }
     _handlePointerInteraction(event) {
         this._hasPointerInteraction = event.type === 'pointerenter';
-        if (!this._hasInnerFocus) {
-            this._handlePauseOnInteraction();
-        }
+        this._handlePauseOnInteraction();
     }
     _handleFocusInteraction(event) {
         const node = event.relatedTarget;
@@ -231,30 +249,26 @@ let IgcCarouselComponent = class IgcCarouselComponent extends EventEmitterMixin(
             return;
         }
         this._hasInnerFocus = event.type === 'focusin';
-        if (!this._hasPointerInteraction) {
-            this._handlePauseOnInteraction();
-        }
+        this._handlePauseOnInteraction();
     }
-    async _handleIndicatorClick(event) {
+    _handleIndicatorClick(event) {
         const indicator = getElementFromPath(IgcCarouselIndicatorComponent.tagName, event);
-        const index = this._hasProjectedIndicators
-            ? this._projectedIndicators.indexOf(indicator)
-            : Array.from(this._defaultIndicators).indexOf(indicator);
+        const index = this._indicators.indexOf(indicator);
         this._handleInteraction(() => this.select(this._slides[index], index > this.current ? 'next' : 'prev'));
     }
-    async _handleArrowLeft() {
+    _handleArrowLeft() {
         this._hasKeyboardInteractionOnIndicators = true;
         this._handleInteraction(isLTR(this) ? this.prev : this.next);
     }
-    async _handleArrowRight() {
+    _handleArrowRight() {
         this._hasKeyboardInteractionOnIndicators = true;
         this._handleInteraction(isLTR(this) ? this.next : this.prev);
     }
-    async _handleHomeKey() {
+    _handleHomeKey() {
         this._hasKeyboardInteractionOnIndicators = true;
         this._handleInteraction(() => this.select(isLTR(this) ? firstOf(this._slides) : lastOf(this._slides)));
     }
-    async _handleEndKey() {
+    _handleEndKey() {
         this._hasKeyboardInteractionOnIndicators = true;
         this._handleInteraction(() => this.select(isLTR(this) ? lastOf(this._slides) : firstOf(this._slides)));
     }
@@ -287,6 +301,7 @@ let IgcCarouselComponent = class IgcCarouselComponent extends EventEmitterMixin(
         if (await callback.call(this)) {
             this.emitEvent('igcSlideChanged', { detail: this.current });
         }
+        this._hasKeyboardInteractionOnIndicators = false;
         if (this.interval) {
             this._restartInterval();
         }
@@ -294,11 +309,16 @@ let IgcCarouselComponent = class IgcCarouselComponent extends EventEmitterMixin(
     _handlePauseOnInteraction() {
         if (!this.interval || this.disablePauseOnInteraction)
             return;
-        if (this.isPlaying) {
-            this.pause();
+        const interacting = this._hasPointerInteraction || this._hasInnerFocus;
+        if (interacting) {
+            if (!this.isPlaying)
+                return;
+            this._pause();
+            this._pausedByInteraction = true;
             this.emitEvent('igcPaused');
+            return;
         }
-        else {
+        if (this._pausedByInteraction) {
             this.play();
             this.emitEvent('igcPlaying');
         }
@@ -310,20 +330,45 @@ let IgcCarouselComponent = class IgcCarouselComponent extends EventEmitterMixin(
         this._activeSlide = slide;
         this._activeSlide.active = true;
         if (this._hasKeyboardInteractionOnIndicators) {
-            this._hasProjectedIndicators
-                ? this._projectedIndicators[this.current].focus()
-                : this._defaultIndicators[this.current].focus();
+            this._indicators[this.current]?.focus();
             this._hasKeyboardInteractionOnIndicators = false;
         }
     }
+    _activateInitialSlide() {
+        if (!isEmpty(this._slides)) {
+            this._activateSlide(this._slides.findLast((slide) => slide.active) ?? firstOf(this._slides));
+        }
+    }
+    _reactivateSlide(removed, index) {
+        removed.active = false;
+        this._activeSlide = undefined;
+        if (!isEmpty(this._slides)) {
+            this._activateSlide(this._slides[Math.min(index, this.total - 1)]);
+        }
+    }
     _updateProjectedIndicators() {
-        for (const [idx, slide] of this._slides.entries()) {
-            const indicator = this._projectedIndicators[idx];
-            indicator.active = slide.active;
+        const current = this.current;
+        for (const [idx, indicator] of this._projectedIndicators.entries()) {
+            const slide = this._slides.at(idx);
+            indicator.active = Boolean(slide) && idx === current;
             indicator.index = idx;
+            if (slide) {
+                indicator.setAttribute('aria-controls', slide.id);
+            }
+            else {
+                indicator.removeAttribute('aria-controls');
+            }
         }
-        if (this._activeSlide) {
-            this.setAttribute('aria-controls', this._activeSlide.id);
+    }
+    _setRotation(playing, paused = false) {
+        this._playing = playing;
+        this._paused = paused;
+        this._pausedByInteraction = false;
+        this._restartInterval();
+    }
+    _pause() {
+        if (this.isPlaying) {
+            this._setRotation(false, true);
         }
     }
     _resetInterval() {
@@ -334,19 +379,20 @@ let IgcCarouselComponent = class IgcCarouselComponent extends EventEmitterMixin(
     }
     _restartInterval() {
         this._resetInterval();
-        if (asNumber(this.interval) > 0) {
-            this._lastInterval = setInterval(() => {
-                if (this.isPlaying &&
-                    this.total &&
-                    !(this.disableLoop && this._nextIndex === 0)) {
-                    this.select(this.slides[this._nextIndex], 'next');
-                    this.emitEvent('igcSlideChanged', { detail: this.current });
-                }
-                else {
-                    this.pause();
-                }
-            }, this.interval);
+        if (!this.isConnected || !this.isPlaying || asNumber(this.interval) <= 0) {
+            return;
         }
+        this._lastInterval = setInterval(() => {
+            if (this.isPlaying &&
+                this.total &&
+                !(this.disableLoop && this._nextIndex === 0)) {
+                this.select(this._slides[this._nextIndex], 'next');
+                this.emitEvent('igcSlideChanged', { detail: this.current });
+            }
+            else {
+                this._pause();
+            }
+        }, this.interval);
     }
     async _animateSlides(nextSlide, currentSlide, dir) {
         if (dir === 'next') {
@@ -366,28 +412,23 @@ let IgcCarouselComponent = class IgcCarouselComponent extends EventEmitterMixin(
     }
     play() {
         if (!this.isPlaying) {
-            this._paused = false;
-            this._playing = true;
-            this._restartInterval();
+            this._setRotation(true);
         }
     }
     pause() {
-        if (this.isPlaying) {
-            this._playing = false;
-            this._paused = true;
-            this._resetInterval();
-        }
+        this._pause();
+        this._pausedByInteraction = false;
     }
     async next() {
         if (this.disableLoop && this._nextIndex === 0) {
-            this.pause();
+            this._pause();
             return false;
         }
         return await this.select(this._slides[this._nextIndex], 'next');
     }
     async prev() {
         if (this.disableLoop && this._previousIndex === this.total - 1) {
-            this.pause();
+            this._pause();
             return false;
         }
         return await this.select(this._slides[this._previousIndex], 'prev');
@@ -407,6 +448,10 @@ let IgcCarouselComponent = class IgcCarouselComponent extends EventEmitterMixin(
             return false;
         }
         const dir = animationDirection ?? (index > this.current ? 'next' : 'prev');
+        if (!this._activeSlide) {
+            this._activateSlide(slide);
+            return true;
+        }
         await this._animateSlides(slide, this._activeSlide, dir);
         return true;
     }
@@ -416,36 +461,24 @@ let IgcCarouselComponent = class IgcCarouselComponent extends EventEmitterMixin(
         ${ref(this._prevButtonRef)}
         type="button"
         part="navigation previous"
-        aria-label=${this.resourceStrings.carousel_previous_slide ?? 'previous slide'}
+        aria-label=${this.resourceStrings.carousel_previous_slide}
         aria-controls=${this._carouselId}
         ?disabled=${this.disableLoop && this.current === 0}
         @click=${this._handleNavigationInteractionPrevious}
       >
-        <slot name="previous-button">
-          <igc-icon
-            name="carousel_prev"
-            collection="default"
-            aria-hidden="true"
-          ></igc-icon>
-        </slot>
+        ${renderSlottedIcon({ slot: 'previous-button', icon: 'carousel_prev' })}
       </igc-button>
 
       <igc-button
         ${ref(this._nextButtonRef)}
         type="button"
         part="navigation next"
-        aria-label=${this.resourceStrings.carousel_next_slide ?? 'next slide'}
+        aria-label=${this.resourceStrings.carousel_next_slide}
         aria-controls=${this._carouselId}
         ?disabled=${this.disableLoop && this.current === this.total - 1}
         @click=${this._handleNavigationInteractionNext}
       >
-        <slot name="next-button">
-          <igc-icon
-            name="carousel_next"
-            collection="default"
-            aria-hidden="true"
-          ></igc-icon>
-        </slot>
+        ${renderSlottedIcon({ slot: 'next-button', icon: 'carousel_next' })}
       </igc-button>
     `;
     }
@@ -459,10 +492,7 @@ let IgcCarouselComponent = class IgcCarouselComponent extends EventEmitterMixin(
           .active=${slide.active}
           .index=${i}
         >
-          <div
-            part="dot"
-            style=${styleMap({ visibility: backward, zIndex: 1 })}
-          ></div>
+          <div part="dot" style=${styleMap({ visibility: backward })}></div>
           <div
             part="dot active"
             slot="active"
@@ -485,9 +515,7 @@ let IgcCarouselComponent = class IgcCarouselComponent extends EventEmitterMixin(
           part=${partMap(parts)}
         >
           <slot name="indicator" @click=${this._handleIndicatorClick}>
-            ${cache(this._hasProjectedIndicators
-            ? this._updateProjectedIndicators()
-            : this._renderIndicators())}
+            ${cache(this._hasProjectedIndicators ? nothing : this._renderIndicators())}
           </slot>
         </div>
       </igc-carousel-indicator-container>
@@ -571,20 +599,6 @@ __decorate([
 __decorate([
     property({ attribute: 'animation-type' })
 ], IgcCarouselComponent.prototype, "animationType", void 0);
-__decorate([
-    property()
-], IgcCarouselComponent.prototype, "locale", null);
-__decorate([
-    property({ attribute: false })
-], IgcCarouselComponent.prototype, "resourceStrings", null);
-__decorate([
-    watch('animationType'),
-    watch('slidesLabelFormat'),
-    watch('indicatorsLabelFormat')
-], IgcCarouselComponent.prototype, "_contextChanged", null);
-__decorate([
-    watch('interval')
-], IgcCarouselComponent.prototype, "_intervalChange", null);
 IgcCarouselComponent = IgcCarouselComponent_1 = __decorate([
     shadowOptions({ delegatesFocus: true })
 ], IgcCarouselComponent);