igniteui-webcomponents 6.1.1 → 6.2.0

package/components/carousel/carousel.js

@@ -6,7 +6,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { ContextProvider } from '@lit/context';
 import { html, LitElement, nothing } from 'lit';
-import { property, queryAll, queryAssignedElements, state, } from 'lit/decorators.js';
+import { property, queryAll, state } from 'lit/decorators.js';
+import { cache } from 'lit/directives/cache.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { addThemingController } from '../../theming/theming-controller.js';
@@ -16,11 +17,12 @@ import { addGesturesController, } from '../common/controllers/gestures.js';
 import { addInternalsController } from '../common/controllers/internals.js';
 import { addKeybindings, arrowLeft, arrowRight, endKey, homeKey, } from '../common/controllers/key-bindings.js';
 import { createMutationController, } from '../common/controllers/mutation-observer.js';
+import { addSlotController, setSlots, } from '../common/controllers/slot.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { partMap } from '../common/part-map.js';
-import { addSafeEventListener, asNumber, createCounter, findElementFromEventPath, first, formatString, isLTR, last, wrap, } from '../common/util.js';
+import { addSafeEventListener, asNumber, findElementFromEventPath, first, formatString, isEmpty, isLTR, last, wrap, } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
 import IgcCarouselIndicatorComponent from './carousel-indicator.js';
 import IgcCarouselIndicatorContainerComponent from './carousel-indicator-container.js';
@@ -28,40 +30,32 @@ import IgcCarouselSlideComponent from './carousel-slide.js';
 import { styles } from './themes/carousel.base.css.js';
 import { all } from './themes/container.js';
 import { styles as shared } from './themes/shared/carousel.common.css.js';
+let nextId = 1;
+const Slots = setSlots('indicator', 'previous-button', 'next-button');
 class IgcCarouselComponent extends EventEmitterMixin(LitElement) {
     static register() {
         registerComponent(IgcCarouselComponent, IgcCarouselIndicatorComponent, IgcCarouselIndicatorContainerComponent, IgcCarouselSlideComponent, IgcIconComponent, IgcButtonComponent);
     }
-    get hasProjectedIndicators() {
-        return this._projectedIndicators.length > 0;
+    get _hasProjectedIndicators() {
+        return !isEmpty(this._projectedIndicators);
     }
-    get showIndicatorsLabel() {
+    get _showIndicatorsLabel() {
         return this.total > this.maximumIndicatorsCount;
     }
-    get nextIndex() {
+    get _nextIndex() {
         return wrap(0, this.total - 1, this.current + 1);
     }
-    get prevIndex() {
+    get _previousIndex() {
         return wrap(0, this.total - 1, this.current - 1);
     }
-    _observerCallback({ changes: { added, attributes }, }) {
-        const activeSlides = this.slides.filter((slide) => slide.active);
-        if (activeSlides.length <= 1) {
-            return;
-        }
-        const idx = this.slides.indexOf(added.length ? last(added).node : last(attributes).node);
-        for (const [i, slide] of this.slides.entries()) {
-            if (slide.active && i !== idx) {
-                slide.active = false;
-            }
-        }
-        this.activateSlide(this.slides[idx]);
+    get slides() {
+        return Array.from(this._slides);
     }
     get total() {
-        return this.slides.length;
+        return this._slides.length;
     }
     get current() {
-        return Math.max(0, this.slides.indexOf(this._activeSlide));
+        return Math.max(0, this._slides.indexOf(this._activeSlide));
     }
     get isPlaying() {
         return this._playing;
@@ -69,21 +63,30 @@ class IgcCarouselComponent extends EventEmitterMixin(LitElement) {
     get isPaused() {
         return this._paused;
     }
-    contextChanged() {
+    _contextChanged() {
         this._context.setValue(this, true);
     }
-    intervalChange() {
+    _intervalChange() {
         if (!this.isPlaying) {
             this._playing = true;
         }
-        this.restartInterval();
+        this._restartInterval();
     }
     constructor() {
         super();
-        this._carouselId = `igc-carousel-${IgcCarouselComponent.increment()}`;
+        this._carouselId = `igc-carousel-${nextId++}`;
+        this._paused = false;
         this._hasKeyboardInteractionOnIndicators = false;
-        this._hasMouseStop = false;
+        this._hasPointerInteraction = false;
         this._hasInnerFocus = false;
+        this._slides = [];
+        this._projectedIndicators = [];
+        this._playing = false;
+        this._slots = addSlotController(this, {
+            slots: Slots,
+            onChange: this._handleSlotChange,
+            initial: true,
+        });
         this._context = new ContextProvider(this, {
             context: carouselContext,
             initialValue: this,
@@ -92,8 +95,6 @@ class IgcCarouselComponent extends EventEmitterMixin(LitElement) {
         this._indicatorsContainerRef = createRef();
         this._prevButtonRef = createRef();
         this._nextButtonRef = createRef();
-        this._playing = false;
-        this._paused = false;
         this.disableLoop = false;
         this.disablePauseOnInteraction = false;
         this.hideNavigation = false;
@@ -111,38 +112,34 @@ class IgcCarouselComponent extends EventEmitterMixin(LitElement) {
             },
         });
         addThemingController(this, all);
-        addSafeEventListener(this, 'pointerenter', this.handlePointerEnter);
-        addSafeEventListener(this, 'pointerleave', this.handlePointerLeave);
-        addSafeEventListener(this, 'pointerdown', () => {
-            this._hasInnerFocus = false;
-        });
-        addSafeEventListener(this, 'keyup', () => {
-            this._hasInnerFocus = true;
-        });
+        addSafeEventListener(this, 'pointerenter', this._handlePointerInteraction);
+        addSafeEventListener(this, 'pointerleave', this._handlePointerInteraction);
+        addSafeEventListener(this, 'focusin', this._handleFocusInteraction);
+        addSafeEventListener(this, 'focusout', this._handleFocusInteraction);
         addGesturesController(this, {
             ref: this._carouselSlidesContainerRef,
             touchOnly: true,
         })
-            .set('swipe-left', this.handleHorizontalSwipe)
-            .set('swipe-right', this.handleHorizontalSwipe)
-            .set('swipe-up', this.handleVerticalSwipe)
-            .set('swipe-down', this.handleVerticalSwipe);
+            .set('swipe-left', this._handleHorizontalSwipe)
+            .set('swipe-right', this._handleHorizontalSwipe)
+            .set('swipe-up', this._handleVerticalSwipe)
+            .set('swipe-down', this._handleVerticalSwipe);
         addKeybindings(this, {
             ref: this._indicatorsContainerRef,
             bindingDefaults: { preventDefault: true },
         })
-            .set(arrowLeft, this.handleArrowLeft)
-            .set(arrowRight, this.handleArrowRight)
-            .set(homeKey, this.handleHomeKey)
-            .set(endKey, this.handleEndKey);
+            .set(arrowLeft, this._handleArrowLeft)
+            .set(arrowRight, this._handleArrowRight)
+            .set(homeKey, this._handleHomeKey)
+            .set(endKey, this._handleEndKey);
         addKeybindings(this, {
             ref: this._prevButtonRef,
             bindingDefaults: { preventDefault: true },
-        }).setActivateHandler(this.handleNavigationInteractionPrevious);
+        }).setActivateHandler(this._handleNavigationInteractionPrevious);
         addKeybindings(this, {
             ref: this._nextButtonRef,
             bindingDefaults: { preventDefault: true },
-        }).setActivateHandler(this.handleNavigationInteractionNext);
+        }).setActivateHandler(this._handleNavigationInteractionNext);
         createMutationController(this, {
             callback: this._observerCallback,
             filter: [IgcCarouselSlideComponent.tagName],
@@ -153,147 +150,158 @@ class IgcCarouselComponent extends EventEmitterMixin(LitElement) {
             },
         });
     }
-    handleSlotChange() {
-        if (this.total) {
-            this.activateSlide(this.slides.findLast((slide) => slide.active) ?? first(this.slides));
+    async firstUpdated() {
+        await this.updateComplete;
+        if (!isEmpty(this._slides)) {
+            this._activateSlide(this._slides.findLast((slide) => slide.active) ?? first(this._slides));
         }
     }
-    handleIndicatorSlotChange() {
-        this.requestUpdate();
-    }
-    handlePointerEnter() {
-        this._hasMouseStop = true;
-        if (this._hasInnerFocus) {
+    _observerCallback({ changes: { added, attributes }, }) {
+        const activeSlides = this._slides.filter((slide) => slide.active);
+        if (activeSlides.length <= 1) {
             return;
         }
-        this.handlePauseOnInteraction();
+        const idx = this._slides.indexOf(added.length ? last(added).node : last(attributes).node);
+        for (const [i, slide] of this._slides.entries()) {
+            if (slide.active && i !== idx) {
+                slide.active = false;
+            }
+        }
+        this._activateSlide(this._slides[idx]);
     }
-    handlePointerLeave() {
-        this._hasMouseStop = false;
-        if (this._hasInnerFocus) {
-            return;
+    _handleSlotChange(params) {
+        if (params.isDefault || params.isInitial) {
+            this._slides = this._slots.getAssignedElements('[default]', {
+                selector: IgcCarouselSlideComponent.tagName,
+            });
+        }
+        if (params.slot === 'indicator') {
+            this._projectedIndicators = this._slots.getAssignedElements('indicator', {
+                selector: IgcCarouselIndicatorComponent.tagName,
+            });
         }
-        this.handlePauseOnInteraction();
     }
-    handleFocusIn() {
-        if (this._hasInnerFocus || this._hasMouseStop) {
-            return;
+    _handlePointerInteraction(event) {
+        this._hasPointerInteraction = event.type === 'pointerenter';
+        if (!this._hasInnerFocus) {
+            this._handlePauseOnInteraction();
         }
-        this.handlePauseOnInteraction();
     }
-    handleFocusOut(event) {
+    _handleFocusInteraction(event) {
         const node = event.relatedTarget;
-        if (this.contains(node) || this.renderRoot.contains(node)) {
+        if (this.contains(node)) {
             return;
         }
-        if (this._hasInnerFocus) {
-            this._hasInnerFocus = false;
-            if (!this._hasMouseStop) {
-                this.handlePauseOnInteraction();
-            }
+        this._hasInnerFocus = event.type === 'focusin';
+        if (!this._hasPointerInteraction) {
+            this._handlePauseOnInteraction();
         }
     }
-    handlePauseOnInteraction() {
-        if (!this.interval || this.disablePauseOnInteraction)
-            return;
-        if (this.isPlaying) {
-            this.pause();
-            this.emitEvent('igcPaused');
-        }
-        else {
-            this.play();
-            this.emitEvent('igcPlaying');
-        }
+    async _handleIndicatorClick(event) {
+        const indicator = findElementFromEventPath(IgcCarouselIndicatorComponent.tagName, event);
+        const index = this._hasProjectedIndicators
+            ? this._projectedIndicators.indexOf(indicator)
+            : Array.from(this._defaultIndicators).indexOf(indicator);
+        this._handleInteraction(() => this.select(this._slides[index], index > this.current ? 'next' : 'prev'));
     }
-    async handleArrowLeft() {
+    async _handleArrowLeft() {
         this._hasKeyboardInteractionOnIndicators = true;
-        this.handleInteraction(isLTR(this) ? this.prev : this.next);
+        this._handleInteraction(isLTR(this) ? this.prev : this.next);
     }
-    async handleArrowRight() {
+    async _handleArrowRight() {
         this._hasKeyboardInteractionOnIndicators = true;
-        this.handleInteraction(isLTR(this) ? this.next : this.prev);
+        this._handleInteraction(isLTR(this) ? this.next : this.prev);
     }
-    async handleHomeKey() {
+    async _handleHomeKey() {
         this._hasKeyboardInteractionOnIndicators = true;
-        this.handleInteraction(() => this.select(isLTR(this) ? first(this.slides) : last(this.slides)));
+        this._handleInteraction(() => this.select(isLTR(this) ? first(this._slides) : last(this._slides)));
     }
-    async handleEndKey() {
+    async _handleEndKey() {
         this._hasKeyboardInteractionOnIndicators = true;
-        this.handleInteraction(() => this.select(isLTR(this) ? last(this.slides) : first(this.slides)));
+        this._handleInteraction(() => this.select(isLTR(this) ? last(this._slides) : first(this._slides)));
     }
-    handleVerticalSwipe({ data: { direction } }) {
+    _handleVerticalSwipe({ data: { direction } }) {
         if (this.vertical) {
-            this.handleInteraction(direction === 'up' ? this.next : this.prev);
+            this._handleInteraction(direction === 'up' ? this.next : this.prev);
         }
     }
-    handleHorizontalSwipe({ data: { direction } }) {
+    _handleHorizontalSwipe({ data: { direction } }) {
         if (!this.vertical) {
-            this.handleInteraction(async () => {
+            const callback = () => {
                 if (isLTR(this)) {
-                    direction === 'left' ? await this.next() : await this.prev();
+                    return direction === 'left' ? this.next : this.prev;
                 }
-                else {
-                    direction === 'left' ? await this.prev() : await this.next();
-                }
-            });
+                return direction === 'left' ? this.prev : this.next;
+            };
+            this._handleInteraction(callback());
         }
     }
-    async handleIndicatorClick(event) {
-        const indicator = findElementFromEventPath(IgcCarouselIndicatorComponent.tagName, event);
-        const index = this.hasProjectedIndicators
-            ? this._projectedIndicators.indexOf(indicator)
-            : Array.from(this._defaultIndicators).indexOf(indicator);
-        this.handleInteraction(() => this.select(this.slides[index], index > this.current ? 'next' : 'prev'));
-    }
-    handleNavigationInteractionNext() {
-        this.handleInteraction(this.next);
+    _handleNavigationInteractionNext() {
+        this._handleInteraction(this.next);
     }
-    handleNavigationInteractionPrevious() {
-        this.handleInteraction(this.prev);
+    _handleNavigationInteractionPrevious() {
+        this._handleInteraction(this.prev);
     }
-    async handleInteraction(callback) {
+    async _handleInteraction(callback) {
         if (this.interval) {
-            this.resetInterval();
+            this._resetInterval();
+        }
+        if (await callback.call(this)) {
+            this.emitEvent('igcSlideChanged', { detail: this.current });
         }
-        await callback.call(this);
-        this.emitEvent('igcSlideChanged', { detail: this.current });
         if (this.interval) {
-            this.restartInterval();
+            this._restartInterval();
+        }
+    }
+    _handlePauseOnInteraction() {
+        if (!this.interval || this.disablePauseOnInteraction)
+            return;
+        if (this.isPlaying) {
+            this.pause();
+            this.emitEvent('igcPaused');
+        }
+        else {
+            this.play();
+            this.emitEvent('igcPlaying');
         }
     }
-    activateSlide(slide) {
+    _activateSlide(slide) {
         if (this._activeSlide) {
             this._activeSlide.active = false;
         }
         this._activeSlide = slide;
         this._activeSlide.active = true;
         if (this._hasKeyboardInteractionOnIndicators) {
-            this.hasProjectedIndicators
+            this._hasProjectedIndicators
                 ? this._projectedIndicators[this.current].focus()
                 : this._defaultIndicators[this.current].focus();
             this._hasKeyboardInteractionOnIndicators = false;
         }
     }
-    updateProjectedIndicators() {
-        for (const [idx, slide] of this.slides.entries()) {
+    _updateProjectedIndicators() {
+        for (const [idx, slide] of this._slides.entries()) {
             const indicator = this._projectedIndicators[idx];
             indicator.active = slide.active;
             indicator.index = idx;
-            this.setAttribute('aria-controls', slide.id);
+        }
+        if (this._activeSlide) {
+            this.setAttribute('aria-controls', this._activeSlide.id);
         }
     }
-    resetInterval() {
+    _resetInterval() {
         if (this._lastInterval) {
             clearInterval(this._lastInterval);
             this._lastInterval = null;
         }
     }
-    restartInterval() {
-        this.resetInterval();
+    _restartInterval() {
+        this._resetInterval();
         if (asNumber(this.interval) > 0) {
             this._lastInterval = setInterval(() => {
-                if (this.isPlaying && this.total) {
-                    this.next();
+                if (this.isPlaying &&
+                    this.total &&
+                    !(this.disableLoop && this._nextIndex === 0)) {
+                    this.select(this.slides[this._nextIndex], 'next');
                     this.emitEvent('igcSlideChanged', { detail: this.current });
                 }
                 else {
@@ -302,18 +310,18 @@ class IgcCarouselComponent extends EventEmitterMixin(LitElement) {
             }, this.interval);
         }
     }
-    async animateSlides(nextSlide, currentSlide, dir) {
+    async _animateSlides(nextSlide, currentSlide, dir) {
         if (dir === 'next') {
             currentSlide.previous = true;
             currentSlide.toggleAnimation('out');
-            this.activateSlide(nextSlide);
+            this._activateSlide(nextSlide);
             await nextSlide.toggleAnimation('in');
             currentSlide.previous = false;
         }
         else {
             currentSlide.previous = true;
             currentSlide.toggleAnimation('in', 'reverse');
-            this.activateSlide(nextSlide);
+            this._activateSlide(nextSlide);
             await nextSlide.toggleAnimation('out', 'reverse');
             currentSlide.previous = false;
         }
@@ -322,49 +330,49 @@ class IgcCarouselComponent extends EventEmitterMixin(LitElement) {
         if (!this.isPlaying) {
             this._paused = false;
             this._playing = true;
-            this.restartInterval();
+            this._restartInterval();
         }
     }
     pause() {
         if (this.isPlaying) {
             this._playing = false;
             this._paused = true;
-            this.resetInterval();
+            this._resetInterval();
         }
     }
     async next() {
-        if (this.disableLoop && this.nextIndex === 0) {
+        if (this.disableLoop && this._nextIndex === 0) {
             this.pause();
             return false;
         }
-        return await this.select(this.slides[this.nextIndex], 'next');
+        return await this.select(this._slides[this._nextIndex], 'next');
     }
     async prev() {
-        if (this.disableLoop && this.prevIndex === this.total - 1) {
+        if (this.disableLoop && this._previousIndex === this.total - 1) {
             this.pause();
             return false;
         }
-        return await this.select(this.slides[this.prevIndex], 'prev');
+        return await this.select(this._slides[this._previousIndex], 'prev');
     }
     async select(slideOrIndex, animationDirection) {
         let index;
         let slide;
         if (typeof slideOrIndex === 'number') {
             index = slideOrIndex;
-            slide = this.slides.at(index);
+            slide = this._slides.at(index);
         }
         else {
             slide = slideOrIndex;
-            index = this.slides.indexOf(slide);
+            index = this._slides.indexOf(slide);
         }
         if (index === this.current || index === -1 || !slide) {
             return false;
         }
         const dir = animationDirection ?? (index > this.current ? 'next' : 'prev');
-        await this.animateSlides(slide, this._activeSlide, dir);
+        await this._animateSlides(slide, this._activeSlide, dir);
         return true;
     }
-    navigationTemplate() {
+    _renderNavigation() {
         return html `
       <igc-button
         ${ref(this._prevButtonRef)}
@@ -373,7 +381,7 @@ class IgcCarouselComponent extends EventEmitterMixin(LitElement) {
         aria-label="Previous slide"
         aria-controls=${this._carouselId}
         ?disabled=${this.disableLoop && this.current === 0}
-        @click=${this.handleNavigationInteractionPrevious}
+        @click=${this._handleNavigationInteractionPrevious}
       >
         <slot name="previous-button">
           <igc-icon
@@ -383,6 +391,7 @@ class IgcCarouselComponent extends EventEmitterMixin(LitElement) {
           ></igc-icon>
         </slot>
       </igc-button>
+
       <igc-button
         ${ref(this._nextButtonRef)}
         type="button"
@@ -390,7 +399,7 @@ class IgcCarouselComponent extends EventEmitterMixin(LitElement) {
         aria-label="Next slide"
         aria-controls=${this._carouselId}
         ?disabled=${this.disableLoop && this.current === this.total - 1}
-        @click=${this.handleNavigationInteractionNext}
+        @click=${this._handleNavigationInteractionNext}
       >
         <slot name="next-button">
           <igc-icon
@@ -402,8 +411,8 @@ class IgcCarouselComponent extends EventEmitterMixin(LitElement) {
       </igc-button>
     `;
     }
-    *renderIndicators() {
-        for (const [i, slide] of this.slides.entries()) {
+    *_renderIndicators() {
+        for (const [i, slide] of this._slides.entries()) {
             const forward = slide.active ? 'visible' : 'hidden';
             const backward = slide.active ? 'hidden' : 'visible';
             yield html `
@@ -425,7 +434,7 @@ class IgcCarouselComponent extends EventEmitterMixin(LitElement) {
       `;
         }
     }
-    indicatorTemplate() {
+    _renderIndicatorContainer() {
         const parts = {
             indicators: true,
             start: this.indicatorsOrientation === 'start',
@@ -437,20 +446,16 @@ class IgcCarouselComponent extends EventEmitterMixin(LitElement) {
           role="tablist"
           part=${partMap(parts)}
         >
-          <slot
-            name="indicator"
-            @slotchange=${this.handleIndicatorSlotChange}
-            @click=${this.handleIndicatorClick}
-          >
-            ${this.hasProjectedIndicators
-            ? this.updateProjectedIndicators()
-            : this.renderIndicators()}
+          <slot name="indicator" @click=${this._handleIndicatorClick}>
+            ${cache(this._hasProjectedIndicators
+            ? this._updateProjectedIndicators()
+            : this._renderIndicators())}
           </slot>
         </div>
       </igc-carousel-indicator-container>
     `;
     }
-    labelTemplate() {
+    _renderLabel() {
         const parts = {
             label: true,
             indicators: true,
@@ -464,21 +469,19 @@ class IgcCarouselComponent extends EventEmitterMixin(LitElement) {
     `;
     }
     render() {
+        const hasNoIndicators = this.hideIndicators || this._showIndicatorsLabel;
+        const hasLabel = !this.hideIndicators && this._showIndicatorsLabel;
         return html `
-      <section @focusin=${this.handleFocusIn} @focusout=${this.handleFocusOut}>
-        ${this.hideNavigation ? nothing : this.navigationTemplate()}
-        ${this.hideIndicators || this.showIndicatorsLabel
-            ? nothing
-            : this.indicatorTemplate()}
-        ${!this.hideIndicators && this.showIndicatorsLabel
-            ? this.labelTemplate()
-            : nothing}
+      <section>
+        ${cache(this.hideNavigation ? nothing : this._renderNavigation())}
+        ${hasNoIndicators ? nothing : this._renderIndicatorContainer()}
+        ${hasLabel ? this._renderLabel() : nothing}
         <div
           ${ref(this._carouselSlidesContainerRef)}
           id=${this._carouselId}
-          aria-live=${this.interval && this.isPlaying ? 'off' : 'polite'}
+          aria-live=${this.interval && this._playing ? 'off' : 'polite'}
         >
-          <slot @slotchange=${this.handleSlotChange}></slot>
+          <slot></slot>
         </div>
       </section>
     `;
@@ -486,17 +489,7 @@ class IgcCarouselComponent extends EventEmitterMixin(LitElement) {
 }
 IgcCarouselComponent.styles = [styles, shared];
 IgcCarouselComponent.tagName = 'igc-carousel';
-IgcCarouselComponent.increment = createCounter();
 export default IgcCarouselComponent;
-__decorate([
-    queryAll(IgcCarouselIndicatorComponent.tagName)
-], IgcCarouselComponent.prototype, "_defaultIndicators", void 0);
-__decorate([
-    queryAssignedElements({
-        selector: IgcCarouselIndicatorComponent.tagName,
-        slot: 'indicator',
-    })
-], IgcCarouselComponent.prototype, "_projectedIndicators", void 0);
 __decorate([
     state()
 ], IgcCarouselComponent.prototype, "_activeSlide", void 0);
@@ -504,8 +497,8 @@ __decorate([
     state()
 ], IgcCarouselComponent.prototype, "_playing", void 0);
 __decorate([
-    state()
-], IgcCarouselComponent.prototype, "_paused", void 0);
+    queryAll(IgcCarouselIndicatorComponent.tagName)
+], IgcCarouselComponent.prototype, "_defaultIndicators", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'disable-loop' })
 ], IgcCarouselComponent.prototype, "disableLoop", void 0);
@@ -526,7 +519,7 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], IgcCarouselComponent.prototype, "vertical", void 0);
 __decorate([
-    property({ reflect: false, attribute: 'indicators-orientation' })
+    property({ attribute: 'indicators-orientation' })
 ], IgcCarouselComponent.prototype, "indicatorsOrientation", void 0);
 __decorate([
     property({ attribute: 'indicators-label-format' })
@@ -535,27 +528,20 @@ __decorate([
     property({ attribute: 'slides-label-format' })
 ], IgcCarouselComponent.prototype, "slidesLabelFormat", void 0);
 __decorate([
-    property({ type: Number, reflect: false })
+    property({ type: Number })
 ], IgcCarouselComponent.prototype, "interval", void 0);
 __decorate([
-    property({
-        type: Number,
-        reflect: false,
-        attribute: 'maximum-indicators-count',
-    })
+    property({ type: Number, attribute: 'maximum-indicators-count' })
 ], IgcCarouselComponent.prototype, "maximumIndicatorsCount", void 0);
 __decorate([
     property({ attribute: 'animation-type' })
 ], IgcCarouselComponent.prototype, "animationType", void 0);
-__decorate([
-    queryAssignedElements({ selector: IgcCarouselSlideComponent.tagName })
-], IgcCarouselComponent.prototype, "slides", void 0);
 __decorate([
     watch('animationType'),
     watch('slidesLabelFormat'),
     watch('indicatorsLabelFormat')
-], IgcCarouselComponent.prototype, "contextChanged", null);
+], IgcCarouselComponent.prototype, "_contextChanged", null);
 __decorate([
     watch('interval')
-], IgcCarouselComponent.prototype, "intervalChange", null);
+], IgcCarouselComponent.prototype, "_intervalChange", null);
 //# sourceMappingURL=carousel.js.map