fix(slides): Methods wait for execution until swiper is initialized (#…

…15576)

* fix(slides): Methods wait to for execution until swiper is initialized

* fix(slides): Method is private and renamed to waitUntilReady

core/src/components/slides/slides.tsx

@@ -18,6 +18,9 @@ export class Slides {
   private container!: HTMLElement;
   private swiper: any;
 
+  private readyResolve: any;
+  private readyPromise: Promise<boolean> = new Promise(resolve => { this.readyResolve = resolve; });
+
   mode!: Mode;
 
   @Element() el!: HTMLStencilElement;
@@ -138,62 +141,70 @@ export class Slides {
     const finalOptions = this.normalizeOptions();
     // init swiper core
     this.swiper = new Swiper(this.container, finalOptions);
+    this.readyResolve(true);
   }
 
   /**
    * Update the underlying slider implementation. Call this if you've added or removed
    * child slides.
    */
   @Method()
-  update() {
+  async update() {
+    await this.waitUntilReady();
     this.swiper.update();
   }
 
   /**
    * Transition to the specified slide.
    */
   @Method()
-  slideTo(index: number, speed?: number, runCallbacks?: boolean) {
+  async slideTo(index: number, speed?: number, runCallbacks?: boolean) {
+    await this.waitUntilReady();
     this.swiper.slideTo(index, speed, runCallbacks);
   }
 
   /**
    * Transition to the next slide.
    */
   @Method()
-  slideNext(speed?: number, runCallbacks?: boolean) {
+  async slideNext(speed?: number, runCallbacks?: boolean) {
+    await this.waitUntilReady();
     this.swiper.slideNext(speed, runCallbacks);
   }
 
   /**
    * Transition to the previous slide.
    */
   @Method()
-  slidePrev(speed?: number, runCallbacks?: boolean) {
+  async slidePrev(speed?: number, runCallbacks?: boolean) {
+    await this.waitUntilReady();
     this.swiper.slidePrev(speed, runCallbacks);
   }
 
   /**
    * Get the index of the active slide.
    */
   @Method()
-  getActiveIndex(): Promise<number> {
+  async getActiveIndex(): Promise<number> {
+    await this.waitUntilReady();
     return Promise.resolve(this.swiper.activeIndex);
   }
 
   /**
    * Get the index of the previous slide.
    */
   @Method()
-  getPreviousIndex(): Promise<number> {
+  async getPreviousIndex(): Promise<number> {
+    await this.waitUntilReady();
     return Promise.resolve(this.swiper.previousIndex);
   }
 
   /**
    * Get the total number of slides.
    */
   @Method()
-  length(): Promise<number> {
+  async length(): Promise<number> {
+    await this.waitUntilReady();
     return Promise.resolve(this.swiper.slides.length);
   }
 
@@ -202,58 +213,73 @@ export class Slides {
    *
    */
   @Method()
-  isEnd(): Promise<boolean> {
+  async isEnd(): Promise<boolean> {
+    await this.waitUntilReady();
     return Promise.resolve(this.swiper.isEnd);
   }
 
   /**
    * Get whether or not the current slide is the first slide.
    */
   @Method()
-  isBeginning(): Promise<boolean> {
+  async isBeginning(): Promise<boolean> {
+    await this.waitUntilReady();
     return Promise.resolve(this.swiper.isBeginning);
   }
 
   /**
    * Start auto play.
    */
   @Method()
-  startAutoplay() {
+  async startAutoplay() {
+    await this.waitUntilReady();
     this.swiper.autoplay.start();
   }
 
   /**
    * Stop auto play.
    */
   @Method()
-  stopAutoplay() {
+  async stopAutoplay() {
+    await this.waitUntilReady();
     this.swiper.autoplay.stop();
   }
 
   /**
    * Lock or unlock the ability to slide to the next slides.
    */
   @Method()
-  lockSwipeToNext(shouldLockSwipeToNext: boolean) {
+  async lockSwipeToNext(shouldLockSwipeToNext: boolean) {
+    await this.waitUntilReady();
     this.swiper.allowSlideNext = !shouldLockSwipeToNext;
   }
 
   /**
    * Lock or unlock the ability to slide to the previous slides.
    */
   @Method()
-  lockSwipeToPrev(shouldLockSwipeToPrev: boolean) {
+  async lockSwipeToPrev(shouldLockSwipeToPrev: boolean) {
+    await this.waitUntilReady();
     this.swiper.allowSlidePrev = !shouldLockSwipeToPrev;
   }
 
   /**
    * Lock or unlock the ability to slide to change slides.
    */
   @Method()
-  lockSwipes(shouldLockSwipes: boolean) {
+  async lockSwipes(shouldLockSwipes: boolean) {
+    await this.waitUntilReady();
     this.swiper.allowSlideNext = !shouldLockSwipes;
     this.swiper.allowSlidePrev = !shouldLockSwipes;
     this.swiper.allowTouchMove = !shouldLockSwipes;
+
+  }
+
+  /**
+   * Calls true if the swiper core is initialized
+   */
+  private waitUntilReady(): Promise<boolean> {
+    return this.readyPromise;
   }
 
   private normalizeOptions() {