igniteui-webcomponents 7.2.4 → 7.3.0-beta.1

package/components/carousel/carousel.js

@@ -4,48 +4,60 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { ContextProvider } from '@lit/context';
+var IgcCarouselComponent_1;
 import { CarouselResourceStringsEN, } from 'igniteui-i18n-core';
 import { html, LitElement, nothing } from 'lit';
 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';
+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 { registerComponent } from '#internals/definitions/register.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';
+import { asNumber, wrap } from '#internals/utils/math.js';
+import { createIdGenerator, formatString } from '#internals/utils/strings.js';
+import { addThemingController } from '#theming/theming-controller.js';
 import IgcButtonComponent from '../button/button.js';
-import { carouselContext } from '../common/context.js';
-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 { addI18nController } from '../common/i18n/i18n-controller.js';
-import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
-import { partMap } from '../common/part-map.js';
-import { addSafeEventListener, asNumber, first, formatString, getElementFromPath, 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';
+import IgcCarouselIndicatorComponent from './carousel-indicator.js';
 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 nextId = createIdGenerator('igc-carousel');
 const Slots = setSlots('indicator', 'previous-button', 'next-button');
-export default 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, IgcCarouselIndicatorComponent, IgcCarouselIndicatorContainerComponent, IgcCarouselSlideComponent, IgcIconComponent, IgcButtonComponent);
-    }
-    _setCarouselContext() {
-        this._context.setValue(this, true);
+        registerComponent(IgcCarouselComponent_1, IgcCarouselIndicatorComponent, IgcCarouselIndicatorContainerComponent, IgcCarouselSlideComponent, IgcIconComponent, IgcButtonComponent);
     }
     get _hasProjectedIndicators() {
         return !isEmpty(this._projectedIndicators);
     }
+    get _indicators() {
+        return this._hasProjectedIndicators
+            ? this._projectedIndicators
+            : Array.from(this._defaultIndicators);
+    }
     get _showIndicatorsLabel() {
         return this.total > this.maximumIndicatorsCount;
     }
@@ -68,18 +80,6 @@ export default class IgcCarouselComponent extends EventEmitterMixin(LitElement)
     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);
     }
@@ -87,7 +87,9 @@ export default class IgcCarouselComponent extends EventEmitterMixin(LitElement)
         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;
@@ -95,22 +97,15 @@ export default class IgcCarouselComponent extends EventEmitterMixin(LitElement)
     get isPaused() {
         return this._paused;
     }
-    _contextChanged() {
-        this._setCarouselContext();
-    }
-    _intervalChange() {
-        if (!this.isPlaying) {
-            this._playing = true;
-        }
-        this._restartInterval();
-    }
     constructor() {
         super();
-        this._carouselId = `igc-carousel-${nextId++}`;
+        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;
@@ -119,12 +114,10 @@ export default class IgcCarouselComponent extends EventEmitterMixin(LitElement)
             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();
@@ -180,11 +173,34 @@ export default class IgcCarouselComponent extends EventEmitterMixin(LitElement)
             },
         });
     }
+    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) ?? first(this._slides));
+        this._context.publish();
+        this._activateInitialSlide();
+    }
+    updated() {
+        if (this._hasProjectedIndicators) {
+            this._updateProjectedIndicators();
         }
     }
     _observerCallback({ changes: { added, attributes }, }) {
@@ -192,7 +208,10 @@ export default class IgcCarouselComponent extends EventEmitterMixin(LitElement)
         if (activeSlides.length <= 1) {
             return;
         }
-        const idx = this._slides.indexOf(added.length ? last(added).node : last(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;
@@ -202,9 +221,17 @@ export default class IgcCarouselComponent extends EventEmitterMixin(LitElement)
     }
     _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', {
@@ -214,9 +241,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin(LitElement)
     }
     _handlePointerInteraction(event) {
         this._hasPointerInteraction = event.type === 'pointerenter';
-        if (!this._hasInnerFocus) {
-            this._handlePauseOnInteraction();
-        }
+        this._handlePauseOnInteraction();
     }
     _handleFocusInteraction(event) {
         const node = event.relatedTarget;
@@ -224,32 +249,28 @@ export default class IgcCarouselComponent extends EventEmitterMixin(LitElement)
             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) ? first(this._slides) : last(this._slides)));
+        this._handleInteraction(() => this.select(isLTR(this) ? firstOf(this._slides) : lastOf(this._slides)));
     }
-    async _handleEndKey() {
+    _handleEndKey() {
         this._hasKeyboardInteractionOnIndicators = true;
-        this._handleInteraction(() => this.select(isLTR(this) ? last(this._slides) : first(this._slides)));
+        this._handleInteraction(() => this.select(isLTR(this) ? lastOf(this._slides) : firstOf(this._slides)));
     }
     _handleVerticalSwipe({ data: { direction } }) {
         if (this.vertical) {
@@ -280,6 +301,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin(LitElement)
         if (await callback.call(this)) {
             this.emitEvent('igcSlideChanged', { detail: this.current });
         }
+        this._hasKeyboardInteractionOnIndicators = false;
         if (this.interval) {
             this._restartInterval();
         }
@@ -287,11 +309,16 @@ export default class IgcCarouselComponent extends EventEmitterMixin(LitElement)
     _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');
         }
@@ -303,20 +330,45 @@ export default class IgcCarouselComponent extends EventEmitterMixin(LitElement)
         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() {
@@ -327,19 +379,20 @@ export default class IgcCarouselComponent extends EventEmitterMixin(LitElement)
     }
     _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') {
@@ -359,28 +412,23 @@ export default class IgcCarouselComponent extends EventEmitterMixin(LitElement)
     }
     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');
@@ -400,6 +448,10 @@ export default class IgcCarouselComponent extends EventEmitterMixin(LitElement)
             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;
     }
@@ -409,53 +461,38 @@ export default class IgcCarouselComponent extends EventEmitterMixin(LitElement)
         ${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>
     `;
     }
-    *_renderIndicators() {
-        for (const [i, slide] of this._slides.entries()) {
+    _renderIndicators() {
+        return this._slides.map((slide, i) => {
             const forward = slide.active ? 'visible' : 'hidden';
             const backward = slide.active ? 'hidden' : 'visible';
-            yield html `
+            return html `
         <igc-carousel-indicator
           exportparts="indicator, active, inactive"
           .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"
@@ -463,7 +500,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin(LitElement)
           ></div>
         </igc-carousel-indicator>
       `;
-        }
+        });
     }
     _renderIndicatorContainer() {
         const parts = {
@@ -478,9 +515,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin(LitElement)
           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>
@@ -504,8 +539,8 @@ export default class IgcCarouselComponent extends EventEmitterMixin(LitElement)
         const hasLabel = !this.hideIndicators && this._showIndicatorsLabel;
         return html `
       <section>
-        ${cache(this.hideNavigation ? nothing : this._renderNavigation())}
         ${hasNoIndicators ? nothing : this._renderIndicatorContainer()}
+        ${cache(this.hideNavigation ? nothing : this._renderNavigation())}
         ${hasLabel ? this._renderLabel() : nothing}
         <div
           ${ref(this._carouselSlidesContainerRef)}
@@ -517,7 +552,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin(LitElement)
       </section>
     `;
     }
-}
+};
 __decorate([
     state()
 ], IgcCarouselComponent.prototype, "_activeSlide", void 0);
@@ -564,18 +599,8 @@ __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);
+export default IgcCarouselComponent;
 //# sourceMappingURL=carousel.js.map