diff --git a/BREAKING.md b/BREAKING.md index ba3edd34cd9..016cad3483e 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -15,6 +15,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver - [Components](#version-7x-components) - [Overlays](#version-7x-overlays) - [Virtual Scroll](#version-7x-virtual-scroll) + - [Slides](#version-7x-slides) - [Browser and Platform Support](#version-7x-browser-platform-support) - [Utilities](#version-7x-utilities) - [hidden attribute](#version-7x-hidden-attribute) @@ -37,6 +38,16 @@ Developers using the component will need to migrate to a virtual scroll solution Any references to the virtual scroll types from `@ionic/core` have been removed. Please remove or replace these types: `Cell`, `VirtualNode`, `CellType`, `NodeChange`, `HeaderFn`, `ItemHeightFn`, `FooterHeightFn`, `ItemRenderFn` and `DomRenderFn`. +

Slides

+ +`ion-slides`, `ion-slide`, and the `IonicSwiper` plugin have been removed from Ionic. + +Developers using these components will need to migrate to using Swiper.js directly, optionally using the `IonicSlides` plugin. Guides for migration and usage are linked below: + +- [Angular](https://ionicframework.com/docs/angular/slides) +- [React](https://ionicframework.com/docs/react/slides) +- [Vue](https://ionicframework.com/docs/vue/slides) +

Browser and Platform Support

This section details the desktop browser, JavaScript framework, and mobile platform versions that are supported by Ionic 7. diff --git a/angular/src/directives/proxies-list.ts b/angular/src/directives/proxies-list.ts index ec6f2b4b645..96aeedcdfb2 100644 --- a/angular/src/directives/proxies-list.ts +++ b/angular/src/directives/proxies-list.ts @@ -65,8 +65,6 @@ export const DIRECTIVES = [ d.IonSelect, d.IonSelectOption, d.IonSkeletonText, - d.IonSlide, - d.IonSlides, d.IonSpinner, d.IonSplitPane, d.IonTabBar, diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index f600ad7fdeb..bac38702bf8 100644 --- a/angular/src/directives/proxies.ts +++ b/angular/src/directives/proxies.ts @@ -1681,114 +1681,6 @@ export class IonSkeletonText { } -export declare interface IonSlide extends Components.IonSlide {} - -@ProxyCmp({ - defineCustomElementFn: undefined -}) -@Component({ - selector: 'ion-slide', - changeDetection: ChangeDetectionStrategy.OnPush, - template: '' -}) -export class IonSlide { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - - -export declare interface IonSlides extends Components.IonSlides { - /** - * Emitted after Swiper initialization - */ - ionSlidesDidLoad: EventEmitter>; - /** - * Emitted when the user taps/clicks on the slide's container. - */ - ionSlideTap: EventEmitter>; - /** - * Emitted when the user double taps on the slide's container. - */ - ionSlideDoubleTap: EventEmitter>; - /** - * Emitted before the active slide has changed. - */ - ionSlideWillChange: EventEmitter>; - /** - * Emitted after the active slide has changed. - */ - ionSlideDidChange: EventEmitter>; - /** - * Emitted when the next slide has started. - */ - ionSlideNextStart: EventEmitter>; - /** - * Emitted when the previous slide has started. - */ - ionSlidePrevStart: EventEmitter>; - /** - * Emitted when the next slide has ended. - */ - ionSlideNextEnd: EventEmitter>; - /** - * Emitted when the previous slide has ended. - */ - ionSlidePrevEnd: EventEmitter>; - /** - * Emitted when the slide transition has started. - */ - ionSlideTransitionStart: EventEmitter>; - /** - * Emitted when the slide transition has ended. - */ - ionSlideTransitionEnd: EventEmitter>; - /** - * Emitted when the slider is actively being moved. - */ - ionSlideDrag: EventEmitter>; - /** - * Emitted when the slider is at its initial position. - */ - ionSlideReachStart: EventEmitter>; - /** - * Emitted when the slider is at the last slide. - */ - ionSlideReachEnd: EventEmitter>; - /** - * Emitted when the user first touches the slider. - */ - ionSlideTouchStart: EventEmitter>; - /** - * Emitted when the user releases the touch. - */ - ionSlideTouchEnd: EventEmitter>; - -} - -@ProxyCmp({ - defineCustomElementFn: undefined, - inputs: ['mode', 'options', 'pager', 'scrollbar'], - methods: ['update', 'updateAutoHeight', 'slideTo', 'slideNext', 'slidePrev', 'getActiveIndex', 'getPreviousIndex', 'length', 'isEnd', 'isBeginning', 'startAutoplay', 'stopAutoplay', 'lockSwipeToNext', 'lockSwipeToPrev', 'lockSwipes', 'getSwiper'] -}) -@Component({ - selector: 'ion-slides', - changeDetection: ChangeDetectionStrategy.OnPush, - template: '', - inputs: ['mode', 'options', 'pager', 'scrollbar'] -}) -export class IonSlides { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - proxyOutputs(this, this.el, ['ionSlidesDidLoad', 'ionSlideTap', 'ionSlideDoubleTap', 'ionSlideWillChange', 'ionSlideDidChange', 'ionSlideNextStart', 'ionSlidePrevStart', 'ionSlideNextEnd', 'ionSlidePrevEnd', 'ionSlideTransitionStart', 'ionSlideTransitionEnd', 'ionSlideDrag', 'ionSlideReachStart', 'ionSlideReachEnd', 'ionSlideTouchStart', 'ionSlideTouchEnd']); - } -} - - export declare interface IonSpinner extends Components.IonSpinner {} @ProxyCmp({ diff --git a/angular/src/index.ts b/angular/src/index.ts index 11f09c79cb6..38ba6c1c726 100644 --- a/angular/src/index.ts +++ b/angular/src/index.ts @@ -50,7 +50,6 @@ export { createGesture, iosTransitionAnimation, mdTransitionAnimation, - IonicSwiper, IonicSlides, getPlatforms, isPlatform, diff --git a/angular/test/base/e2e/src/slides.spec.ts b/angular/test/base/e2e/src/slides.spec.ts deleted file mode 100644 index eca4b59e978..00000000000 --- a/angular/test/base/e2e/src/slides.spec.ts +++ /dev/null @@ -1,44 +0,0 @@ -describe('Slides', () => { - beforeEach(() => { - cy.visit('/slides'); - cy.wait(30); - }) - - it('should change index on slide change', () => { - cy.get('ion-slide').should('have.length', 0); - - cy.get('#add-slides').click(); - - cy.get('ion-slide').should('have.length', 3); - - // Should be on the first slide - checkIndex('0'); - - // Swipe to the second slide - nextSlide(); - checkIndex('1'); - - // Swipe to the third slide - nextSlide(); - checkIndex('2'); - - // Go back to the second slide - prevSlide(); - checkIndex('1'); - }); -}); - -function checkIndex(index) { - cy.get('#slide-index').should('have.text', index); - cy.get('#slide-index-2').should('have.text', index); -} - -function nextSlide() { - cy.get('#btn-next').click(); - cy.wait(800); -} - -function prevSlide() { - cy.get('#btn-prev').click(); - cy.wait(800); -} diff --git a/angular/test/base/src/app/app-routing.module.ts b/angular/test/base/src/app/app-routing.module.ts index 195bbdbf472..cef9059c703 100644 --- a/angular/test/base/src/app/app-routing.module.ts +++ b/angular/test/base/src/app/app-routing.module.ts @@ -12,7 +12,6 @@ import { NestedOutletPageComponent } from './nested-outlet-page/nested-outlet-pa import { NestedOutletPage2Component } from './nested-outlet-page2/nested-outlet-page2.component'; import { ViewChildComponent } from './view-child/view-child.component'; import { ProvidersComponent } from './providers/providers.component'; -import { SlidesComponent } from './slides/slides.component'; import { FormComponent } from './form/form.component'; import { NavigationPage1Component } from './navigation-page1/navigation-page1.component'; import { NavigationPage2Component } from './navigation-page2/navigation-page2.component'; @@ -37,7 +36,6 @@ const routes: Routes = [ { path: 'router-link-page', component: RouterLinkPageComponent }, { path: 'router-link-page2/:id', component: RouterLinkPage2Component }, { path: 'router-link-page3', component: RouterLinkPage3Component }, - { path: 'slides', component: SlidesComponent }, { path: 'tabs', redirectTo: '/tabs/account', pathMatch: 'full' }, { path: 'navigation', diff --git a/angular/test/base/src/app/app.module.ts b/angular/test/base/src/app/app.module.ts index acd14de9aa9..908acfa0d0a 100644 --- a/angular/test/base/src/app/app.module.ts +++ b/angular/test/base/src/app/app.module.ts @@ -21,7 +21,6 @@ import { NestedOutletPage2Component } from './nested-outlet-page2/nested-outlet- import { NavComponent } from './nav/nav.component'; import { ViewChildComponent } from './view-child/view-child.component'; import { ProvidersComponent } from './providers/providers.component'; -import { SlidesComponent } from './slides/slides.component'; import { FormComponent } from './form/form.component'; import { NavigationPage1Component } from './navigation-page1/navigation-page1.component'; import { NavigationPage2Component } from './navigation-page2/navigation-page2.component'; @@ -47,7 +46,6 @@ import { AccordionModalComponent } from './accordion/accordion-modal/accordion-m NavComponent, ViewChildComponent, ProvidersComponent, - SlidesComponent, FormComponent, NavigationPage1Component, NavigationPage2Component, diff --git a/angular/test/base/src/app/home-page/home-page.component.html b/angular/test/base/src/app/home-page/home-page.component.html index 9fa61f4b7ba..bb3221ed6ad 100644 --- a/angular/test/base/src/app/home-page/home-page.component.html +++ b/angular/test/base/src/app/home-page/home-page.component.html @@ -37,11 +37,6 @@ Tabs test - - - Slides test - - Nested ion-router-outlet diff --git a/angular/test/base/src/app/slides/slides.component.html b/angular/test/base/src/app/slides/slides.component.html deleted file mode 100644 index a14964085a5..00000000000 --- a/angular/test/base/src/app/slides/slides.component.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - Slides Test - - - - - - - -

{{text}}

- - - - -

- index: {{slideIndex}} - index2: {{slideIndex2}} -

- - - Add Slides - - - Prev Slide - - - Next Slide - - \ No newline at end of file diff --git a/angular/test/base/src/app/slides/slides.component.ts b/angular/test/base/src/app/slides/slides.component.ts deleted file mode 100644 index 90af28f0421..00000000000 --- a/angular/test/base/src/app/slides/slides.component.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { AfterViewInit, Component, ViewChild } from '@angular/core'; -import { IonSlides } from '@ionic/angular'; - -@Component({ - selector: 'app-slides', - templateUrl: './slides.component.html', -}) -export class SlidesComponent implements AfterViewInit { - @ViewChild(IonSlides, { static: true }) slides: IonSlides; - - slideIndex = 0; - slideIndex2 = 0; - slidesData = []; - - constructor() { } - - ngAfterViewInit() { - this.slides.ionSlideDidChange.subscribe(async () => { - this.slideIndex2 = await this.slides.getActiveIndex(); - }); - } - - addSlides() { - const start = this.slidesData.length + 1; - this.slidesData.push(`Slide ${start}`, `Slide ${start + 1}`, `Slide ${start + 2}`); - } - - prevSlide() { - this.slides.slidePrev(); - } - - nextSlide() { - this.slides.slideNext(); - } - - async checkIndex() { - this.slideIndex = await this.slides.getActiveIndex(); - } - -} diff --git a/angular/test/base/src/app/view-child/view-child.component.html b/angular/test/base/src/app/view-child/view-child.component.html index 1293c69e75b..601855048c9 100644 --- a/angular/test/base/src/app/view-child/view-child.component.html +++ b/angular/test/base/src/app/view-child/view-child.component.html @@ -6,15 +6,7 @@ - - - Hello! it's a button -
- - - - -

Second slide

- - + Hello! it's a button +
+ diff --git a/angular/test/base/src/app/view-child/view-child.component.ts b/angular/test/base/src/app/view-child/view-child.component.ts index 2454d36807f..01cb21df551 100644 --- a/angular/test/base/src/app/view-child/view-child.component.ts +++ b/angular/test/base/src/app/view-child/view-child.component.ts @@ -1,5 +1,5 @@ import { Component, ViewChild, AfterViewInit, ElementRef } from '@angular/core'; -import { IonTabs, IonButton, IonSlides, IonSlide } from '@ionic/angular'; +import { IonTabs, IonButton } from '@ionic/angular'; @Component({ selector: 'app-view-child', @@ -7,14 +7,12 @@ import { IonTabs, IonButton, IonSlides, IonSlide } from '@ionic/angular'; }) export class ViewChildComponent implements AfterViewInit { - @ViewChild(IonSlides, { static: true }) slides: IonSlides; @ViewChild(IonButton, { static: true }) button: IonButton; @ViewChild(IonTabs, { static: true }) tabs: IonTabs; @ViewChild('div', { static: true }) div: ElementRef; - @ViewChild('slide', { static: true }) slide: IonSlide; ngAfterViewInit() { - const loaded = !!(this.slides && this.button && this.tabs && this.div && this.slide); + const loaded = !!(this.button && this.tabs && this.div); this.button.color = 'danger'; if (loaded) { this.div.nativeElement.textContent = 'all found'; diff --git a/core/.stylelintrc.yml b/core/.stylelintrc.yml index 70a8b0c17b9..ce59b8ca208 100644 --- a/core/.stylelintrc.yml +++ b/core/.stylelintrc.yml @@ -8,7 +8,6 @@ ignoreFiles: - src/css/normalize.scss - src/css/text-alignment.scss - src/css/display.scss - - src/components/slides/slides-vendor.scss - src/themes/ionic.mixins.scss - src/themes/ionic.functions.color.scss - src/themes/ionic.functions.string.scss diff --git a/core/api.txt b/core/api.txt index bfa38850c4e..853dd159f1f 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1215,52 +1215,6 @@ ion-skeleton-text,css-prop,--background ion-skeleton-text,css-prop,--background-rgb ion-skeleton-text,css-prop,--border-radius -ion-slide,none - -ion-slides,none -ion-slides,prop,mode,"ios" | "md",undefined,false,false -ion-slides,prop,options,any,{},false,false -ion-slides,prop,pager,boolean,false,false,false -ion-slides,prop,scrollbar,boolean,false,false,false -ion-slides,method,getActiveIndex,getActiveIndex() => Promise -ion-slides,method,getPreviousIndex,getPreviousIndex() => Promise -ion-slides,method,getSwiper,getSwiper() => Promise -ion-slides,method,isBeginning,isBeginning() => Promise -ion-slides,method,isEnd,isEnd() => Promise -ion-slides,method,length,length() => Promise -ion-slides,method,lockSwipeToNext,lockSwipeToNext(lock: boolean) => Promise -ion-slides,method,lockSwipeToPrev,lockSwipeToPrev(lock: boolean) => Promise -ion-slides,method,lockSwipes,lockSwipes(lock: boolean) => Promise -ion-slides,method,slideNext,slideNext(speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise -ion-slides,method,slidePrev,slidePrev(speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise -ion-slides,method,slideTo,slideTo(index: number, speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise -ion-slides,method,startAutoplay,startAutoplay() => Promise -ion-slides,method,stopAutoplay,stopAutoplay() => Promise -ion-slides,method,update,update() => Promise -ion-slides,method,updateAutoHeight,updateAutoHeight(speed?: number | undefined) => Promise -ion-slides,event,ionSlideDidChange,void,true -ion-slides,event,ionSlideDoubleTap,void,true -ion-slides,event,ionSlideDrag,void,true -ion-slides,event,ionSlideNextEnd,void,true -ion-slides,event,ionSlideNextStart,void,true -ion-slides,event,ionSlidePrevEnd,void,true -ion-slides,event,ionSlidePrevStart,void,true -ion-slides,event,ionSlideReachEnd,void,true -ion-slides,event,ionSlideReachStart,void,true -ion-slides,event,ionSlidesDidLoad,void,true -ion-slides,event,ionSlideTap,void,true -ion-slides,event,ionSlideTouchEnd,void,true -ion-slides,event,ionSlideTouchStart,void,true -ion-slides,event,ionSlideTransitionEnd,void,true -ion-slides,event,ionSlideTransitionStart,void,true -ion-slides,event,ionSlideWillChange,void,true -ion-slides,css-prop,--bullet-background -ion-slides,css-prop,--bullet-background-active -ion-slides,css-prop,--progress-bar-background -ion-slides,css-prop,--progress-bar-background-active -ion-slides,css-prop,--scroll-bar-background -ion-slides,css-prop,--scroll-bar-background-active - ion-spinner,shadow ion-spinner,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record | undefined,undefined,false,true ion-spinner,prop,duration,number | undefined,undefined,false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index a76da2bcccd..ace6c430373 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -2569,101 +2569,6 @@ export namespace Components { */ "animated": boolean; } - interface IonSlide { - } - interface IonSlides { - /** - * Get the index of the active slide. - */ - "getActiveIndex": () => Promise; - /** - * Get the index of the previous slide. - */ - "getPreviousIndex": () => Promise; - /** - * Get the Swiper instance. Use this to access the full Swiper API. See https://swiperjs.com/swiper-api for all API options. - */ - "getSwiper": () => Promise; - /** - * Get whether or not the current slide is the first slide. - */ - "isBeginning": () => Promise; - /** - * Get whether or not the current slide is the last slide. - */ - "isEnd": () => Promise; - /** - * Get the total number of slides. - */ - "length": () => Promise; - /** - * Lock or unlock the ability to slide to the next slide. - * @param lock If `true`, disable swiping to the next slide. - */ - "lockSwipeToNext": (lock: boolean) => Promise; - /** - * Lock or unlock the ability to slide to the previous slide. - * @param lock If `true`, disable swiping to the previous slide. - */ - "lockSwipeToPrev": (lock: boolean) => Promise; - /** - * Lock or unlock the ability to slide to the next or previous slide. - * @param lock If `true`, disable swiping to the next and previous slide. - */ - "lockSwipes": (lock: boolean) => Promise; - /** - * The mode determines which platform styles to use. - */ - "mode"?: "ios" | "md"; - /** - * Options to pass to the swiper instance. See https://swiperjs.com/swiper-api for valid options - */ - "options": any; - /** - * If `true`, show the pagination. - */ - "pager": boolean; - /** - * If `true`, show the scrollbar. - */ - "scrollbar": boolean; - /** - * Transition to the next slide. - * @param speed The transition duration (in ms). - * @param runCallbacks If true, the transition will produce [Transition/SlideChange][Start/End] transition events. - */ - "slideNext": (speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise; - /** - * Transition to the previous slide. - * @param speed The transition duration (in ms). - * @param runCallbacks If true, the transition will produce the [Transition/SlideChange][Start/End] transition events. - */ - "slidePrev": (speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise; - /** - * Transition to the specified slide. - * @param index The index of the slide to transition to. - * @param speed The transition duration (in ms). - * @param runCallbacks If true, the transition will produce [Transition/SlideChange][Start/End] transition events. - */ - "slideTo": (index: number, speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise; - /** - * Start auto play. - */ - "startAutoplay": () => Promise; - /** - * Stop auto play. - */ - "stopAutoplay": () => Promise; - /** - * Update the underlying slider implementation. Call this if you've added or removed child slides. - */ - "update": () => Promise; - /** - * Force swiper to update its height (when autoHeight is enabled) for the duration equal to 'speed' parameter. - * @param speed The transition duration (in ms). - */ - "updateAutoHeight": (speed?: number | undefined) => Promise; - } interface IonSpinner { /** * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). @@ -3177,10 +3082,6 @@ export interface IonSelectCustomEvent extends CustomEvent { detail: T; target: HTMLIonSelectElement; } -export interface IonSlidesCustomEvent extends CustomEvent { - detail: T; - target: HTMLIonSlidesElement; -} export interface IonSplitPaneCustomEvent extends CustomEvent { detail: T; target: HTMLIonSplitPaneElement; @@ -3682,18 +3583,6 @@ declare global { prototype: HTMLIonSkeletonTextElement; new (): HTMLIonSkeletonTextElement; }; - interface HTMLIonSlideElement extends Components.IonSlide, HTMLStencilElement { - } - var HTMLIonSlideElement: { - prototype: HTMLIonSlideElement; - new (): HTMLIonSlideElement; - }; - interface HTMLIonSlidesElement extends Components.IonSlides, HTMLStencilElement { - } - var HTMLIonSlidesElement: { - prototype: HTMLIonSlidesElement; - new (): HTMLIonSlidesElement; - }; interface HTMLIonSpinnerElement extends Components.IonSpinner, HTMLStencilElement { } var HTMLIonSpinnerElement: { @@ -3851,8 +3740,6 @@ declare global { "ion-select-option": HTMLIonSelectOptionElement; "ion-select-popover": HTMLIonSelectPopoverElement; "ion-skeleton-text": HTMLIonSkeletonTextElement; - "ion-slide": HTMLIonSlideElement; - "ion-slides": HTMLIonSlidesElement; "ion-spinner": HTMLIonSpinnerElement; "ion-split-pane": HTMLIonSplitPaneElement; "ion-tab": HTMLIonTabElement; @@ -6476,90 +6363,6 @@ declare namespace LocalJSX { */ "animated"?: boolean; } - interface IonSlide { - } - interface IonSlides { - /** - * The mode determines which platform styles to use. - */ - "mode"?: "ios" | "md"; - /** - * Emitted after the active slide has changed. - */ - "onIonSlideDidChange"?: (event: IonSlidesCustomEvent) => void; - /** - * Emitted when the user double taps on the slide's container. - */ - "onIonSlideDoubleTap"?: (event: IonSlidesCustomEvent) => void; - /** - * Emitted when the slider is actively being moved. - */ - "onIonSlideDrag"?: (event: IonSlidesCustomEvent) => void; - /** - * Emitted when the next slide has ended. - */ - "onIonSlideNextEnd"?: (event: IonSlidesCustomEvent) => void; - /** - * Emitted when the next slide has started. - */ - "onIonSlideNextStart"?: (event: IonSlidesCustomEvent) => void; - /** - * Emitted when the previous slide has ended. - */ - "onIonSlidePrevEnd"?: (event: IonSlidesCustomEvent) => void; - /** - * Emitted when the previous slide has started. - */ - "onIonSlidePrevStart"?: (event: IonSlidesCustomEvent) => void; - /** - * Emitted when the slider is at the last slide. - */ - "onIonSlideReachEnd"?: (event: IonSlidesCustomEvent) => void; - /** - * Emitted when the slider is at its initial position. - */ - "onIonSlideReachStart"?: (event: IonSlidesCustomEvent) => void; - /** - * Emitted when the user taps/clicks on the slide's container. - */ - "onIonSlideTap"?: (event: IonSlidesCustomEvent) => void; - /** - * Emitted when the user releases the touch. - */ - "onIonSlideTouchEnd"?: (event: IonSlidesCustomEvent) => void; - /** - * Emitted when the user first touches the slider. - */ - "onIonSlideTouchStart"?: (event: IonSlidesCustomEvent) => void; - /** - * Emitted when the slide transition has ended. - */ - "onIonSlideTransitionEnd"?: (event: IonSlidesCustomEvent) => void; - /** - * Emitted when the slide transition has started. - */ - "onIonSlideTransitionStart"?: (event: IonSlidesCustomEvent) => void; - /** - * Emitted before the active slide has changed. - */ - "onIonSlideWillChange"?: (event: IonSlidesCustomEvent) => void; - /** - * Emitted after Swiper initialization - */ - "onIonSlidesDidLoad"?: (event: IonSlidesCustomEvent) => void; - /** - * Options to pass to the swiper instance. See https://swiperjs.com/swiper-api for valid options - */ - "options"?: any; - /** - * If `true`, show the pagination. - */ - "pager"?: boolean; - /** - * If `true`, show the scrollbar. - */ - "scrollbar"?: boolean; - } interface IonSpinner { /** * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). @@ -7030,8 +6833,6 @@ declare namespace LocalJSX { "ion-select-option": IonSelectOption; "ion-select-popover": IonSelectPopover; "ion-skeleton-text": IonSkeletonText; - "ion-slide": IonSlide; - "ion-slides": IonSlides; "ion-spinner": IonSpinner; "ion-split-pane": IonSplitPane; "ion-tab": IonTab; @@ -7129,8 +6930,6 @@ declare module "@stencil/core" { "ion-select-option": LocalJSX.IonSelectOption & JSXBase.HTMLAttributes; "ion-select-popover": LocalJSX.IonSelectPopover & JSXBase.HTMLAttributes; "ion-skeleton-text": LocalJSX.IonSkeletonText & JSXBase.HTMLAttributes; - "ion-slide": LocalJSX.IonSlide & JSXBase.HTMLAttributes; - "ion-slides": LocalJSX.IonSlides & JSXBase.HTMLAttributes; "ion-spinner": LocalJSX.IonSpinner & JSXBase.HTMLAttributes; "ion-split-pane": LocalJSX.IonSplitPane & JSXBase.HTMLAttributes; "ion-tab": LocalJSX.IonTab & JSXBase.HTMLAttributes; diff --git a/core/src/components/slide/slide.scss b/core/src/components/slide/slide.scss deleted file mode 100644 index 7777ce4df5f..00000000000 --- a/core/src/components/slide/slide.scss +++ /dev/null @@ -1,46 +0,0 @@ -@import "../../themes/ionic.globals"; - - -// Slide -// -------------------------------------------------- - -ion-slide { - display: block; - - width: 100%; - height: 100%; -} - -.slide-zoom { - display: block; - - width: 100%; - - text-align: center; -} - -.swiper-slide { - - // Center slide text vertically - display: flex; - position: relative; - - flex-shrink: 0; - align-items: center; - justify-content: center; - - width: 100%; - height: 100%; - - font-size: 18px; - - text-align: center; - box-sizing: border-box; -} - -.swiper-slide img { - width: auto; - max-width: 100%; - height: auto; - max-height: 100%; -} diff --git a/core/src/components/slide/slide.tsx b/core/src/components/slide/slide.tsx deleted file mode 100644 index 57c9f14ca14..00000000000 --- a/core/src/components/slide/slide.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import type { ComponentInterface } from '@stencil/core'; -import { Component, Host, h } from '@stencil/core'; - -import { getIonMode } from '../../global/ionic-global'; - -@Component({ - tag: 'ion-slide', - styleUrl: 'slide.scss', -}) -export class Slide implements ComponentInterface { - render() { - const mode = getIonMode(this); - return ( - - ); - } -} diff --git a/core/src/components/slides/IonicSwiper.ts b/core/src/components/slides/IonicSwiper.ts deleted file mode 100644 index 39cc1aefc2d..00000000000 --- a/core/src/components/slides/IonicSwiper.ts +++ /dev/null @@ -1,131 +0,0 @@ -import { addEventListener, raf, removeEventListener } from '../../utils/helpers'; - -/** - * This is a plugin for Swiper that allows it to work - * with Ionic Framework and the routing integrations. - * Without this plugin, Swiper would be incapable of correctly - * determining the dimensions of the slides component as - * each view is initially hidden before transitioning in. - */ -const setupSwiperInIonic = (swiper: any, watchForIonPageChanges = true) => { - if (typeof (window as any) === 'undefined') { - return; - } - - const swiperEl = swiper.el; - const ionPage = swiperEl.closest('.ion-page'); - - if (!ionPage) { - if (watchForIonPageChanges) { - /** - * If no ion page found, it is possible - * that we are in the overlay setup step - * where the inner component has been - * created but not attached to the DOM yet. - * If so, wait for the .ion-page class to - * appear on the root div and re-run setup. - */ - const rootNode = swiperEl.getRootNode(); - if (rootNode.tagName === 'DIV') { - const mo = new MutationObserver((m: MutationRecord[]) => { - const mutation = m[0]; - const wasEmpty = mutation.oldValue === null; - const hasIonPage = rootNode.classList.contains('ion-page'); - - /** - * Now that we have an .ion-page class - * we can safely attempt setup again. - */ - if (wasEmpty && hasIonPage) { - mo.disconnect(); - - /** - * Set false here so we do not - * get infinite loops - */ - setupSwiperInIonic(swiper, false); - } - }); - - mo.observe(rootNode, { - attributeFilter: ['class'], - attributeOldValue: true, - }); - } - } - return; - } - - /** - * If using slides in a modal or - * popover we need to wait for the - * overlay to be shown as these components - * are hidden when they are initially created. - */ - const modalOrPopover = swiperEl.closest('ion-modal, ion-popover'); - if (modalOrPopover) { - const eventName = modalOrPopover.tagName === 'ION-MODAL' ? 'ionModalWillPresent' : 'ionPopoverWillPresent'; - const overlayCallback = () => { - /** - * We need an raf here so the update - * is fired one tick after the overlay is shown. - */ - raf(() => { - swiperEl.swiper.update(); - removeEventListener(modalOrPopover, eventName, overlayCallback); - }); - }; - addEventListener(modalOrPopover, eventName, overlayCallback); - } else { - /** - * If using slides in a page - * we need to wait for the ion-page-invisible - * class to be removed so Swiper can correctly - * compute the dimensions of the slides. - */ - const mo = new MutationObserver((m: MutationRecord[]) => { - const mutation = m[0]; - const wasPageHidden = mutation.oldValue?.includes('ion-page-invisible'); - const isPageHidden = ionPage.classList.contains('ion-page-invisible'); - - /** - * Only update Swiper if the page was - * hidden but is no longer hidden. - */ - if (!isPageHidden && isPageHidden !== wasPageHidden) { - swiperEl.swiper.update(); - } - }); - - mo.observe(ionPage, { - attributeFilter: ['class'], - attributeOldValue: true, - }); - } - - /** - * We also need to listen for the appload event - * which is emitted by Stencil in the - * event that Swiper is being used on the - * view that is rendered initially. - */ - const onAppLoad = () => { - swiperEl.swiper.update(); - removeEventListener(window, 'appload', onAppLoad); - }; - - addEventListener(window, 'appload', onAppLoad); -}; - -export const IonicSwiper = { - name: 'ionic', - on: { - afterInit(swiper: any) { - console.warn( - '[Deprecation Warning]: The IonicSwiper module has been deprecated in favor of the IonSlides module. This change was made to better support the Swiper 7 release. The IonicSwiper module will be removed in Ionic 7.0. See https://ionicframework.com/docs/api/slides#migration for revised migration steps.' - ); - - setupSwiperInIonic(swiper); - }, - }, -}; diff --git a/core/src/components/slides/slides-vendor.scss b/core/src/components/slides/slides-vendor.scss deleted file mode 100644 index 549f361a951..00000000000 --- a/core/src/components/slides/slides-vendor.scss +++ /dev/null @@ -1,621 +0,0 @@ -/** - * Swiper 4.3.5 - * Most modern mobile touch slider and framework with hardware accelerated transitions - * http://www.idangero.us/swiper/ - * - * Copyright 2014-2018 Vladimir Kharlampidi - * - * Released under the MIT License - * - * Released on: July 31, 2018 - */ -.swiper-container { - margin: 0 auto; - position: relative; - overflow: hidden; - list-style: none; - padding: 0; - /* Fix of Webkit flickering */ - z-index: 1; -} -.swiper-container-no-flexbox .swiper-slide { - float: left; -} -.swiper-container-vertical { - height: 100%; -} -.swiper-container-vertical > .swiper-wrapper { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} -.swiper-wrapper { - position: relative; - width: 100%; - height: 100%; - z-index: 1; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-transition-property: -webkit-transform; - transition-property: -webkit-transform; - -o-transition-property: transform; - transition-property: transform; - transition-property: transform, -webkit-transform; - -webkit-box-sizing: content-box; - box-sizing: content-box; -} -.swiper-container-android .swiper-slide, -.swiper-wrapper { - -webkit-transform: translate3d(0px, 0, 0); - transform: translate3d(0px, 0, 0); -} -.swiper-container-multirow > .swiper-wrapper { - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; -} -.swiper-container-free-mode > .swiper-wrapper { - -webkit-transition-timing-function: ease-out; - -o-transition-timing-function: ease-out; - transition-timing-function: ease-out; - margin: 0 auto; -} -.swiper-slide { - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - width: 100%; - height: 100%; - position: relative; - -webkit-transition-property: -webkit-transform; - transition-property: -webkit-transform; - -o-transition-property: transform; - transition-property: transform; - transition-property: transform, -webkit-transform; -} -.swiper-invisible-blank-slide { - visibility: hidden; -} -/* Auto Height */ -.swiper-container-autoheight, -.swiper-container-autoheight .swiper-slide { - height: auto; -} -.swiper-container-autoheight .swiper-wrapper { - -webkit-box-align: start; - -webkit-align-items: flex-start; - -ms-flex-align: start; - align-items: flex-start; - -webkit-transition-property: height, -webkit-transform; - transition-property: height, -webkit-transform; - -o-transition-property: transform, height; - transition-property: transform, height; - transition-property: transform, height, -webkit-transform; -} -/* 3D Effects */ -.swiper-container-3d { - -webkit-perspective: 1200px; - perspective: 1200px; -} -.swiper-container-3d .swiper-wrapper, -.swiper-container-3d .swiper-slide, -.swiper-container-3d .swiper-slide-shadow-left, -.swiper-container-3d .swiper-slide-shadow-right, -.swiper-container-3d .swiper-slide-shadow-top, -.swiper-container-3d .swiper-slide-shadow-bottom, -.swiper-container-3d .swiper-cube-shadow { - -webkit-transform-style: preserve-3d; - transform-style: preserve-3d; -} -.swiper-container-3d .swiper-slide-shadow-left, -.swiper-container-3d .swiper-slide-shadow-right, -.swiper-container-3d .swiper-slide-shadow-top, -.swiper-container-3d .swiper-slide-shadow-bottom { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - pointer-events: none; - z-index: 10; -} -.swiper-container-3d .swiper-slide-shadow-left { - background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); - background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); - background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); - background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); -} -.swiper-container-3d .swiper-slide-shadow-right { - background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); - background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); - background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); - background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); -} -.swiper-container-3d .swiper-slide-shadow-top { - background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); - background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); - background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); - background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); -} -.swiper-container-3d .swiper-slide-shadow-bottom { - background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); - background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); - background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); -} -/* IE10 Windows Phone 8 Fixes */ -.swiper-container-wp8-horizontal, -.swiper-container-wp8-horizontal > .swiper-wrapper { - -ms-touch-action: pan-y; - touch-action: pan-y; -} -.swiper-container-wp8-vertical, -.swiper-container-wp8-vertical > .swiper-wrapper { - -ms-touch-action: pan-x; - touch-action: pan-x; -} -.swiper-button-prev, -.swiper-button-next { - position: absolute; - top: 50%; - width: 27px; - height: 44px; - margin-top: -22px; - z-index: 10; - cursor: pointer; - background-size: 27px 44px; - background-position: center; - background-repeat: no-repeat; -} -.swiper-button-prev.swiper-button-disabled, -.swiper-button-next.swiper-button-disabled { - opacity: 0.35; - cursor: auto; - pointer-events: none; -} -.swiper-button-prev, -.swiper-container-rtl .swiper-button-next { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); - left: 10px; - right: auto; -} -.swiper-button-next, -.swiper-container-rtl .swiper-button-prev { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); - right: 10px; - left: auto; -} -.swiper-button-prev.swiper-button-white, -.swiper-container-rtl .swiper-button-next.swiper-button-white { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); -} -.swiper-button-next.swiper-button-white, -.swiper-container-rtl .swiper-button-prev.swiper-button-white { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); -} -.swiper-button-prev.swiper-button-black, -.swiper-container-rtl .swiper-button-next.swiper-button-black { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); -} -.swiper-button-next.swiper-button-black, -.swiper-container-rtl .swiper-button-prev.swiper-button-black { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); -} -.swiper-button-lock { - display: none; -} -.swiper-pagination { - position: absolute; - text-align: center; - -webkit-transition: 300ms opacity; - -o-transition: 300ms opacity; - transition: 300ms opacity; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - z-index: 10; -} -.swiper-pagination.swiper-pagination-hidden { - opacity: 0; -} -/* Common Styles */ -.swiper-pagination-fraction, -.swiper-pagination-custom, -.swiper-container-horizontal > .swiper-pagination-bullets { - bottom: 10px; - left: 0; - width: 100%; -} -/* Bullets */ -.swiper-pagination-bullets-dynamic { - overflow: hidden; - font-size: 0; -} -.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { - -webkit-transform: scale(0.33); - -ms-transform: scale(0.33); - transform: scale(0.33); - position: relative; -} -.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); -} -.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); -} -.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { - -webkit-transform: scale(0.66); - -ms-transform: scale(0.66); - transform: scale(0.66); -} -.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { - -webkit-transform: scale(0.33); - -ms-transform: scale(0.33); - transform: scale(0.33); -} -.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { - -webkit-transform: scale(0.66); - -ms-transform: scale(0.66); - transform: scale(0.66); -} -.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { - -webkit-transform: scale(0.33); - -ms-transform: scale(0.33); - transform: scale(0.33); -} -.swiper-pagination-bullet { - width: 8px; - height: 8px; - display: inline-block; - border-radius: 100%; - background: #000; - opacity: 0.2; -} -button.swiper-pagination-bullet { - border: none; - margin: 0; - padding: 0; - -webkit-box-shadow: none; - box-shadow: none; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} -.swiper-pagination-clickable .swiper-pagination-bullet { - cursor: pointer; -} -.swiper-pagination-bullet-active { - opacity: 1; - background: #007aff; -} -.swiper-container-vertical > .swiper-pagination-bullets { - right: 10px; - top: 50%; - -webkit-transform: translate3d(0px, -50%, 0); - transform: translate3d(0px, -50%, 0); -} -.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { - margin: 6px 0; - display: block; -} -.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { - top: 50%; - -webkit-transform: translateY(-50%); - -ms-transform: translateY(-50%); - transform: translateY(-50%); - width: 8px; -} -.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { - display: inline-block; - -webkit-transition: 200ms top, 200ms -webkit-transform; - transition: 200ms top, 200ms -webkit-transform; - -o-transition: 200ms transform, 200ms top; - transition: 200ms transform, 200ms top; - transition: 200ms transform, 200ms top, 200ms -webkit-transform; -} -.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { - margin: 0 4px; -} -.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { - left: 50%; - -webkit-transform: translateX(-50%); - -ms-transform: translateX(-50%); - transform: translateX(-50%); - white-space: nowrap; -} -.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { - -webkit-transition: 200ms left, 200ms -webkit-transform; - transition: 200ms left, 200ms -webkit-transform; - -o-transition: 200ms transform, 200ms left; - transition: 200ms transform, 200ms left; - transition: 200ms transform, 200ms left, 200ms -webkit-transform; -} -.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { - -webkit-transition: 200ms right, 200ms -webkit-transform; - transition: 200ms right, 200ms -webkit-transform; - -o-transition: 200ms transform, 200ms right; - transition: 200ms transform, 200ms right; - transition: 200ms transform, 200ms right, 200ms -webkit-transform; -} -/* Progress */ -.swiper-pagination-progressbar { - background: rgba(0, 0, 0, 0.25); - position: absolute; -} -.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { - background: #007aff; - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - -webkit-transform: scale(0); - -ms-transform: scale(0); - transform: scale(0); - -webkit-transform-origin: left top; - -ms-transform-origin: left top; - transform-origin: left top; -} -.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { - -webkit-transform-origin: right top; - -ms-transform-origin: right top; - transform-origin: right top; -} -.swiper-container-horizontal > .swiper-pagination-progressbar, -.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { - width: 100%; - height: 4px; - left: 0; - top: 0; -} -.swiper-container-vertical > .swiper-pagination-progressbar, -.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { - width: 4px; - height: 100%; - left: 0; - top: 0; -} -.swiper-pagination-white .swiper-pagination-bullet-active { - background: #ffffff; -} -.swiper-pagination-progressbar.swiper-pagination-white { - background: rgba(255, 255, 255, 0.25); -} -.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill { - background: #ffffff; -} -.swiper-pagination-black .swiper-pagination-bullet-active { - background: #000000; -} -.swiper-pagination-progressbar.swiper-pagination-black { - background: rgba(0, 0, 0, 0.25); -} -.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill { - background: #000000; -} -.swiper-pagination-lock { - display: none; -} -/* Scrollbar */ -.swiper-scrollbar { - border-radius: 10px; - position: relative; - -ms-touch-action: none; - background: rgba(0, 0, 0, 0.1); -} -.swiper-container-horizontal > .swiper-scrollbar { - position: absolute; - left: 1%; - bottom: 3px; - z-index: 50; - height: 5px; - width: 98%; -} -.swiper-container-vertical > .swiper-scrollbar { - position: absolute; - right: 3px; - top: 1%; - z-index: 50; - width: 5px; - height: 98%; -} -.swiper-scrollbar-drag { - height: 100%; - width: 100%; - position: relative; - background: rgba(0, 0, 0, 0.5); - border-radius: 10px; - left: 0; - top: 0; -} -.swiper-scrollbar-cursor-drag { - cursor: move; -} -.swiper-scrollbar-lock { - display: none; -} -.swiper-zoom-container { - width: 100%; - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; - text-align: center; -} -.swiper-zoom-container > img, -.swiper-zoom-container > svg, -.swiper-zoom-container > canvas { - max-width: 100%; - max-height: 100%; - -o-object-fit: contain; - object-fit: contain; -} -.swiper-slide-zoomed { - cursor: move; -} -/* Preloader */ -.swiper-lazy-preloader { - width: 42px; - height: 42px; - position: absolute; - left: 50%; - top: 50%; - margin-left: -21px; - margin-top: -21px; - z-index: 10; - -webkit-transform-origin: 50%; - -ms-transform-origin: 50%; - transform-origin: 50%; - -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite; - animation: swiper-preloader-spin 1s steps(12, end) infinite; -} -.swiper-lazy-preloader:after { - display: block; - content: ''; - width: 100%; - height: 100%; - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); - background-position: 50%; - background-size: 100%; - background-repeat: no-repeat; -} -.swiper-lazy-preloader-white:after { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); -} -@-webkit-keyframes swiper-preloader-spin { - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} -@keyframes swiper-preloader-spin { - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} -/* a11y */ -.swiper-container .swiper-notification { - position: absolute; - left: 0; - top: 0; - pointer-events: none; - opacity: 0; - z-index: -1000; -} -.swiper-container-fade.swiper-container-free-mode .swiper-slide { - -webkit-transition-timing-function: ease-out; - -o-transition-timing-function: ease-out; - transition-timing-function: ease-out; -} -.swiper-container-fade .swiper-slide { - pointer-events: none; - -webkit-transition-property: opacity; - -o-transition-property: opacity; - transition-property: opacity; -} -.swiper-container-fade .swiper-slide .swiper-slide { - pointer-events: none; -} -.swiper-container-fade .swiper-slide-active, -.swiper-container-fade .swiper-slide-active .swiper-slide-active { - pointer-events: auto; -} -.swiper-container-cube { - overflow: visible; -} -.swiper-container-cube .swiper-slide { - pointer-events: none; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - z-index: 1; - visibility: hidden; - -webkit-transform-origin: 0 0; - -ms-transform-origin: 0 0; - transform-origin: 0 0; - width: 100%; - height: 100%; -} -.swiper-container-cube .swiper-slide .swiper-slide { - pointer-events: none; -} -.swiper-container-cube.swiper-container-rtl .swiper-slide { - -webkit-transform-origin: 100% 0; - -ms-transform-origin: 100% 0; - transform-origin: 100% 0; -} -.swiper-container-cube .swiper-slide-active, -.swiper-container-cube .swiper-slide-active .swiper-slide-active { - pointer-events: auto; -} -.swiper-container-cube .swiper-slide-active, -.swiper-container-cube .swiper-slide-next, -.swiper-container-cube .swiper-slide-prev, -.swiper-container-cube .swiper-slide-next + .swiper-slide { - pointer-events: auto; - visibility: visible; -} -.swiper-container-cube .swiper-slide-shadow-top, -.swiper-container-cube .swiper-slide-shadow-bottom, -.swiper-container-cube .swiper-slide-shadow-left, -.swiper-container-cube .swiper-slide-shadow-right { - z-index: 0; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; -} -.swiper-container-cube .swiper-cube-shadow { - position: absolute; - left: 0; - bottom: 0px; - width: 100%; - height: 100%; - background: #000; - opacity: 0.6; - -webkit-filter: blur(50px); - filter: blur(50px); - z-index: 0; -} -.swiper-container-flip { - overflow: visible; -} -.swiper-container-flip .swiper-slide { - pointer-events: none; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - z-index: 1; -} -.swiper-container-flip .swiper-slide .swiper-slide { - pointer-events: none; -} -.swiper-container-flip .swiper-slide-active, -.swiper-container-flip .swiper-slide-active .swiper-slide-active { - pointer-events: auto; -} -.swiper-container-flip .swiper-slide-shadow-top, -.swiper-container-flip .swiper-slide-shadow-bottom, -.swiper-container-flip .swiper-slide-shadow-left, -.swiper-container-flip .swiper-slide-shadow-right { - z-index: 0; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; -} -.swiper-container-coverflow .swiper-wrapper { - /* Windows 8 IE 10 fix */ - -ms-perspective: 1200px; -} diff --git a/core/src/components/slides/slides.ios.scss b/core/src/components/slides/slides.ios.scss deleted file mode 100644 index b820358bf6e..00000000000 --- a/core/src/components/slides/slides.ios.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import "./slides"; -@import "./slides.ios.vars"; - -// iOS Slides -// -------------------------------------------------- - -.slides-ios { - --bullet-background: #{$slides-ios-bullet-background}; - --bullet-background-active: #{$slides-ios-bullet-background-active}; - --progress-bar-background: #{$slides-ios-progress-bar-background}; - --progress-bar-background-active: #{$slides-ios-progress-bar-background-active}; - --scroll-bar-background: #{$slides-ios-scroll-bar-background}; - --scroll-bar-background-active: #{$slides-ios-scroll-bar-drag-background}; -} diff --git a/core/src/components/slides/slides.ios.vars.scss b/core/src/components/slides/slides.ios.vars.scss deleted file mode 100644 index 73aec90e3e3..00000000000 --- a/core/src/components/slides/slides.ios.vars.scss +++ /dev/null @@ -1,28 +0,0 @@ -@import "../../themes/ionic.globals.ios"; - -/// @prop - Background color of the bullet -$slides-ios-bullet-background: $text-color-step-800 !default; - -/// @prop - Background color of the active bullet -$slides-ios-bullet-background-active: ion-color(primary, base) !default; - -/// @prop - Alpha to use for the background color of the progress bar -$slides-ios-progress-bar-background-alpha: .25 !default; - -/// @prop - Background color of the progress bar -$slides-ios-progress-bar-background: rgba($text-color-rgb, $slides-ios-progress-bar-background-alpha) !default; - -/// @prop - Background color of the active progress bar -$slides-ios-progress-bar-background-active: ion-color(primary, shade) !default; - -/// @prop - Alpha to use for the background color of the scroll bar -$slides-ios-scroll-bar-background-alpha: .1 !default; - -/// @prop - Background color of the scroll bar -$slides-ios-scroll-bar-background: rgba($text-color-rgb, $slides-ios-scroll-bar-background-alpha) !default; - -/// @prop - Alpha to use for the background color of the scroll bar while dragging -$slides-ios-scroll-bar-drag-background-alpha: .5 !default; - -/// @prop - Background color of the scroll bar drag handle -$slides-ios-scroll-bar-drag-background: rgba($text-color-rgb, $slides-ios-scroll-bar-drag-background-alpha) !default; diff --git a/core/src/components/slides/slides.md.scss b/core/src/components/slides/slides.md.scss deleted file mode 100644 index ebdb6e84738..00000000000 --- a/core/src/components/slides/slides.md.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import "./slides"; -@import "./slides.md.vars"; - -// Material Design Slides -// -------------------------------------------------- - -.slides-md { - --bullet-background: #{$slides-md-bullet-background}; - --bullet-background-active: #{$slides-md-bullet-background-active}; - --progress-bar-background: #{$slides-md-progress-bar-background}; - --progress-bar-background-active: #{$slides-md-progress-bar-background-active}; - --scroll-bar-background: #{$slides-md-scroll-bar-background}; - --scroll-bar-background-active: #{$slides-md-scroll-bar-drag-background}; -} diff --git a/core/src/components/slides/slides.md.vars.scss b/core/src/components/slides/slides.md.vars.scss deleted file mode 100644 index 906f31ddeba..00000000000 --- a/core/src/components/slides/slides.md.vars.scss +++ /dev/null @@ -1,28 +0,0 @@ -@import "../../themes/ionic.globals.md"; - -/// @prop - Background color of the bullet -$slides-md-bullet-background: $text-color-step-800 !default; - -/// @prop - Background color of the active bullet -$slides-md-bullet-background-active: ion-color(primary, base) !default; - -/// @prop - Alpha to use for the background color of the progress bar -$slides-md-progress-bar-background-alpha: .25 !default; - -/// @prop - Background color of the progress -$slides-md-progress-bar-background: rgba($text-color-rgb, $slides-md-progress-bar-background-alpha) !default; - -/// @prop - Background color of the progress bar -$slides-md-progress-bar-background-active: ion-color(primary, shade) !default; - -/// @prop - Alpha to use for the background color of the scroll bar -$slides-md-scroll-bar-background-alpha: .1 !default; - -/// @prop - Background color of the scroll bar -$slides-md-scroll-bar-background: rgba($text-color-rgb, $slides-md-scroll-bar-background-alpha) !default; - -/// @prop - Alpha to use for the background color of the scroll bar while dragging -$slides-md-scroll-bar-drag-background-alpha: .5 !default; - -/// @prop - Background color of the scroll bar drag handle -$slides-md-scroll-bar-drag-background: rgba($text-color-rgb, $slides-md-scroll-bar-drag-background-alpha) !default; diff --git a/core/src/components/slides/slides.scss b/core/src/components/slides/slides.scss deleted file mode 100644 index 25fc008332c..00000000000 --- a/core/src/components/slides/slides.scss +++ /dev/null @@ -1,56 +0,0 @@ -@import "./slides.vars"; -@import "./slides-vendor"; - -// Slides -// -------------------------------------------------- - -ion-slides { - /** - * @prop --bullet-background: Background of the pagination bullets - * @prop --bullet-background-active: Background of the active pagination bullet - * - * @prop --progress-bar-background: Background of the pagination progress-bar - * @prop --progress-bar-background-active: Background of the active pagination progress-bar - * - * @prop --scroll-bar-background: Background of the pagination scroll-bar - * @prop --scroll-bar-background-active: Background of the active pagination scroll-bar - */ - display: block; - - user-select: none; -} - - -// Pagination Bullets -// -------------------------------------------------- - -.swiper-pagination-bullet { - background: var(--bullet-background); -} - -.swiper-pagination-bullet-active { - background: var(--bullet-background-active); -} - - -// Pagination Progress Bar -// -------------------------------------------------- - -.swiper-pagination-progressbar { - background: var(--progress-bar-background); -} - -.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { - background: var(--progress-bar-background-active); -} - -// Scrollbar -// -------------------------------------------------- - -.swiper-scrollbar { - background: var(--scroll-bar-background); -} - -.swiper-scrollbar-drag { - background: var(--scroll-bar-background-active); -} diff --git a/core/src/components/slides/slides.tsx b/core/src/components/slides/slides.tsx deleted file mode 100644 index 37a2789e53a..00000000000 --- a/core/src/components/slides/slides.tsx +++ /dev/null @@ -1,522 +0,0 @@ -import type { ComponentInterface, EventEmitter } from '@stencil/core'; -import { Build, Component, Element, Event, Host, Method, Prop, Watch, h } from '@stencil/core'; - -import { getIonMode } from '../../global/ionic-global'; -import { componentOnReady } from '../../utils/helpers'; - -import type { SwiperInterface, SwiperOptions } from './swiper/swiper-interface'; - -/** - * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use. - */ -@Component({ - tag: 'ion-slides', - styleUrls: { - ios: 'slides.ios.scss', - md: 'slides.md.scss', - }, - assetsDirs: ['swiper'], -}) -export class Slides implements ComponentInterface { - private scrollbarEl?: HTMLElement; - private paginationEl?: HTMLElement; - private swiperReady = false; - private mutationO?: MutationObserver; - private readySwiper!: (swiper: SwiperInterface) => void; - private swiper: Promise = new Promise((resolve) => { - this.readySwiper = resolve; - }); - - @Element() el!: HTMLIonSlidesElement; - - /** - * Options to pass to the swiper instance. - * See https://swiperjs.com/swiper-api for valid options - */ - @Prop() options: any = {}; // SwiperOptions; // TODO - - @Watch('options') - async optionsChanged() { - if (this.swiperReady) { - const swiper = await this.getSwiper(); - if (swiper?.params) { - Object.assign(swiper.params, this.options); - await this.update(); - } - } - } - - /** - * If `true`, show the pagination. - */ - @Prop() pager = false; - - /** - * If `true`, show the scrollbar. - */ - @Prop() scrollbar = false; - - /** - * Emitted after Swiper initialization - */ - @Event() ionSlidesDidLoad!: EventEmitter; - - /** - * Emitted when the user taps/clicks on the slide's container. - */ - @Event() ionSlideTap!: EventEmitter; - - /** - * Emitted when the user double taps on the slide's container. - */ - @Event() ionSlideDoubleTap!: EventEmitter; - - /** - * Emitted before the active slide has changed. - */ - @Event() ionSlideWillChange!: EventEmitter; - - /** - * Emitted after the active slide has changed. - */ - @Event() ionSlideDidChange!: EventEmitter; - - /** - * Emitted when the next slide has started. - */ - @Event() ionSlideNextStart!: EventEmitter; - - /** - * Emitted when the previous slide has started. - */ - @Event() ionSlidePrevStart!: EventEmitter; - - /** - * Emitted when the next slide has ended. - */ - @Event() ionSlideNextEnd!: EventEmitter; - - /** - * Emitted when the previous slide has ended. - */ - @Event() ionSlidePrevEnd!: EventEmitter; - - /** - * Emitted when the slide transition has started. - */ - @Event() ionSlideTransitionStart!: EventEmitter; - - /** - * Emitted when the slide transition has ended. - */ - @Event() ionSlideTransitionEnd!: EventEmitter; - - /** - * Emitted when the slider is actively being moved. - */ - @Event() ionSlideDrag!: EventEmitter; - - /** - * Emitted when the slider is at its initial position. - */ - @Event() ionSlideReachStart!: EventEmitter; - - /** - * Emitted when the slider is at the last slide. - */ - @Event() ionSlideReachEnd!: EventEmitter; - - /** - * Emitted when the user first touches the slider. - */ - @Event() ionSlideTouchStart!: EventEmitter; - - /** - * Emitted when the user releases the touch. - */ - @Event() ionSlideTouchEnd!: EventEmitter; - - componentWillLoad() { - console.warn( - `[Deprecation Warning]: ion-slides has been deprecated and will be removed in Ionic Framework v7.0. We recommend using the framework-specific integrations that Swiper.js provides, allowing for faster bug fixes and an improved developer experience. See https://ionicframework.com/docs/api/slides for more information including migration steps.` - ); - } - - connectedCallback() { - if (Build.isBrowser) { - const mut = (this.mutationO = new MutationObserver(() => { - if (this.swiperReady) { - this.update(); - } - })); - mut.observe(this.el, { - childList: true, - subtree: true, - }); - - componentOnReady(this.el, () => { - this.initSwiper(); - }); - } - } - - disconnectedCallback() { - if (this.mutationO) { - this.mutationO.disconnect(); - this.mutationO = undefined; - } - } - - /** - * Update the underlying slider implementation. Call this if you've added or removed - * child slides. - */ - @Method() - async update() { - const [swiper] = await Promise.all([this.getSwiper(), waitForSlides(this.el)]); - swiper.update(); - } - - /** - * Force swiper to update its height (when autoHeight is enabled) for the duration - * equal to 'speed' parameter. - * - * @param speed The transition duration (in ms). - */ - @Method() - async updateAutoHeight(speed?: number) { - const swiper = await this.getSwiper(); - swiper.updateAutoHeight(speed); - } - - /** - * Transition to the specified slide. - * - * @param index The index of the slide to transition to. - * @param speed The transition duration (in ms). - * @param runCallbacks If true, the transition will produce [Transition/SlideChange][Start/End] transition events. - */ - @Method() - async slideTo(index: number, speed?: number, runCallbacks?: boolean) { - const swiper = await this.getSwiper(); - swiper.slideTo(index, speed, runCallbacks); - } - - /** - * Transition to the next slide. - * - * @param speed The transition duration (in ms). - * @param runCallbacks If true, the transition will produce [Transition/SlideChange][Start/End] transition events. - */ - @Method() - async slideNext(speed?: number, runCallbacks?: boolean) { - const swiper = await this.getSwiper(); - swiper.slideNext(speed!, runCallbacks!); - } - - /** - * Transition to the previous slide. - * - * @param speed The transition duration (in ms). - * @param runCallbacks If true, the transition will produce the [Transition/SlideChange][Start/End] transition events. - */ - @Method() - async slidePrev(speed?: number, runCallbacks?: boolean) { - const swiper = await this.getSwiper(); - swiper.slidePrev(speed, runCallbacks); - } - - /** - * Get the index of the active slide. - */ - @Method() - async getActiveIndex(): Promise { - const swiper = await this.getSwiper(); - return swiper.activeIndex; - } - - /** - * Get the index of the previous slide. - */ - @Method() - async getPreviousIndex(): Promise { - const swiper = await this.getSwiper(); - return swiper.previousIndex; - } - - /** - * Get the total number of slides. - */ - @Method() - async length(): Promise { - const swiper = await this.getSwiper(); - return swiper.slides.length; - } - - /** - * Get whether or not the current slide is the last slide. - */ - @Method() - async isEnd(): Promise { - const swiper = await this.getSwiper(); - return swiper.isEnd; - } - - /** - * Get whether or not the current slide is the first slide. - */ - @Method() - async isBeginning(): Promise { - const swiper = await this.getSwiper(); - return swiper.isBeginning; - } - - /** - * Start auto play. - */ - @Method() - async startAutoplay() { - const swiper = await this.getSwiper(); - if (swiper.autoplay) { - swiper.autoplay.start(); - } - } - - /** - * Stop auto play. - */ - @Method() - async stopAutoplay() { - const swiper = await this.getSwiper(); - if (swiper.autoplay) { - swiper.autoplay.stop(); - } - } - - /** - * Lock or unlock the ability to slide to the next slide. - * - * @param lock If `true`, disable swiping to the next slide. - */ - @Method() - async lockSwipeToNext(lock: boolean) { - const swiper = await this.getSwiper(); - swiper.allowSlideNext = !lock; - } - - /** - * Lock or unlock the ability to slide to the previous slide. - * - * @param lock If `true`, disable swiping to the previous slide. - */ - @Method() - async lockSwipeToPrev(lock: boolean) { - const swiper = await this.getSwiper(); - swiper.allowSlidePrev = !lock; - } - - /** - * Lock or unlock the ability to slide to the next or previous slide. - * - * @param lock If `true`, disable swiping to the next and previous slide. - */ - @Method() - async lockSwipes(lock: boolean) { - const swiper = await this.getSwiper(); - swiper.allowSlideNext = !lock; - swiper.allowSlidePrev = !lock; - swiper.allowTouchMove = !lock; - } - - /** - * Get the Swiper instance. - * Use this to access the full Swiper API. - * See https://swiperjs.com/swiper-api for all API options. - */ - @Method() - async getSwiper(): Promise { - return this.swiper; - } - - private async initSwiper() { - const finalOptions = this.normalizeOptions(); - - // init swiper core - // eslint-disable-next-line - // @ts-ignore - const { Swiper } = await import('./swiper/swiper.bundle.js'); - await waitForSlides(this.el); - const swiper = new Swiper(this.el, finalOptions); - this.swiperReady = true; - this.readySwiper(swiper); - } - - private normalizeOptions(): SwiperOptions { - // Base options, can be changed - // TODO Add interface SwiperOptions - const swiperOptions: SwiperOptions = { - effect: undefined, - direction: 'horizontal', - initialSlide: 0, - loop: false, - parallax: false, - slidesPerView: 1, - spaceBetween: 0, - speed: 300, - slidesPerColumn: 1, - slidesPerColumnFill: 'column', - slidesPerGroup: 1, - centeredSlides: false, - slidesOffsetBefore: 0, - slidesOffsetAfter: 0, - touchEventsTarget: 'container', - autoplay: false, - freeMode: false, - freeModeMomentum: true, - freeModeMomentumRatio: 1, - freeModeMomentumBounce: true, - freeModeMomentumBounceRatio: 1, - freeModeMomentumVelocityRatio: 1, - freeModeSticky: false, - freeModeMinimumVelocity: 0.02, - autoHeight: false, - setWrapperSize: false, - zoom: { - maxRatio: 3, - minRatio: 1, - toggle: false, - }, - touchRatio: 1, - touchAngle: 45, - simulateTouch: true, - touchStartPreventDefault: false, - shortSwipes: true, - longSwipes: true, - longSwipesRatio: 0.5, - longSwipesMs: 300, - followFinger: true, - threshold: 0, - touchMoveStopPropagation: true, - touchReleaseOnEdges: false, - iOSEdgeSwipeDetection: false, - iOSEdgeSwipeThreshold: 20, - resistance: true, - resistanceRatio: 0.85, - watchSlidesProgress: false, - watchSlidesVisibility: false, - preventClicks: true, - preventClicksPropagation: true, - slideToClickedSlide: false, - loopAdditionalSlides: 0, - noSwiping: true, - runCallbacksOnInit: true, - coverflowEffect: { - rotate: 50, - stretch: 0, - depth: 100, - modifier: 1, - slideShadows: true, - }, - flipEffect: { - slideShadows: true, - limitRotation: true, - }, - cubeEffect: { - slideShadows: true, - shadow: true, - shadowOffset: 20, - shadowScale: 0.94, - }, - fadeEffect: { - crossFade: false, - }, - a11y: { - prevSlideMessage: 'Previous slide', - nextSlideMessage: 'Next slide', - firstSlideMessage: 'This is the first slide', - lastSlideMessage: 'This is the last slide', - }, - }; - - if (this.pager) { - swiperOptions.pagination = { - el: this.paginationEl!, - type: 'bullets', - clickable: false, - hideOnClick: false, - }; - } - - if (this.scrollbar) { - swiperOptions.scrollbar = { - el: this.scrollbarEl!, - hide: true, - }; - } - - // Keep the event options separate, we dont want users - // overwriting these - const eventOptions: SwiperOptions = { - on: { - init: () => { - setTimeout(() => { - this.ionSlidesDidLoad.emit(); - // Forces the swiper instance to update after initializing. - this.update(); - }, 20); - }, - slideChangeTransitionStart: this.ionSlideWillChange.emit, - slideChangeTransitionEnd: this.ionSlideDidChange.emit, - slideNextTransitionStart: this.ionSlideNextStart.emit, - slidePrevTransitionStart: this.ionSlidePrevStart.emit, - slideNextTransitionEnd: this.ionSlideNextEnd.emit, - slidePrevTransitionEnd: this.ionSlidePrevEnd.emit, - transitionStart: this.ionSlideTransitionStart.emit, - transitionEnd: this.ionSlideTransitionEnd.emit, - sliderMove: this.ionSlideDrag.emit, - reachBeginning: this.ionSlideReachStart.emit, - reachEnd: this.ionSlideReachEnd.emit, - touchStart: this.ionSlideTouchStart.emit, - touchEnd: this.ionSlideTouchEnd.emit, - tap: this.ionSlideTap.emit, - doubleTap: this.ionSlideDoubleTap.emit, - }, - }; - - const customEvents = !!this.options && !!this.options.on ? this.options.on : {}; - - // merge "on" event listeners, while giving our event listeners priority - const mergedEventOptions = { on: { ...customEvents, ...eventOptions.on } }; - - // Merge the base, user options, and events together then pas to swiper - return { ...swiperOptions, ...this.options, ...mergedEventOptions }; - } - - render() { - const mode = getIonMode(this); - return ( - -
- -
- {this.pager &&
(this.paginationEl = el)}>
} - {this.scrollbar &&
(this.scrollbarEl = el)}>
} - - ); - } -} - -const waitForSlides = (el: HTMLElement) => { - return Promise.all( - Array.from(el.querySelectorAll('ion-slide')).map((s) => new Promise((resolve) => componentOnReady(s, resolve))) - ); -}; diff --git a/core/src/components/slides/slides.vars.scss b/core/src/components/slides/slides.vars.scss deleted file mode 100644 index f0bed98927b..00000000000 --- a/core/src/components/slides/slides.vars.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import "../../themes/ionic.globals"; - -// Slides -// -------------------------------------------------- - - diff --git a/core/src/components/slides/test/app-intro/index.html b/core/src/components/slides/test/app-intro/index.html deleted file mode 100644 index 75b26ea9bd5..00000000000 --- a/core/src/components/slides/test/app-intro/index.html +++ /dev/null @@ -1,119 +0,0 @@ - - - - - Slides - App Intro - - - - - - - - - - - - - - - - Prev - - - Next - - - - - - - -
-

- Welcome to - ICA -

-

- The - ionic conference app is a practical preview of the ionic framework in action, and a demonstration - of proper code use. -

-
- - - - -
-

What is Ionic?

-

- Ionic Framework is an open source SDK that enables developers to build high quality mobile apps - with web technologies like HTML, CSS, and JavaScript. -

-
- - - - -
-

What is Ionic Pro?

-

- Ionic Pro is a powerful set of services and features built on top of Ionic Framework that brings - a totally new level of app development agility to mobile dev teams. -

-
- - - - - Back to the start - - - - - - - diff --git a/core/src/components/slides/test/basic/e2e.ts b/core/src/components/slides/test/basic/e2e.ts deleted file mode 100644 index 01279aefc87..00000000000 --- a/core/src/components/slides/test/basic/e2e.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('slides: basic', async () => { - const page = await newE2EPage({ - url: '/src/components/slides/test/basic?ionic:_testing=true', - }); - - const compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); -}); diff --git a/core/src/components/slides/test/basic/index.html b/core/src/components/slides/test/basic/index.html deleted file mode 100644 index 197154b9563..00000000000 --- a/core/src/components/slides/test/basic/index.html +++ /dev/null @@ -1,179 +0,0 @@ - - - - - Slides - Basic - - - - - - - - - - - - - - - -

Slide 1

- - -

Slide 2

- - -

Slide 3

- - - Add slide - Remove slide - - Slide Prev - Slide Next - Get Active Index - Get Previous Index - - Is the End? - Is the beginning? - - Slide to slide index 2 - Get slide length - Start auto play - Stop auto play - Set options - - - - - diff --git a/core/src/components/slides/test/image/cat.jpeg b/core/src/components/slides/test/image/cat.jpeg deleted file mode 100644 index 36bd32d143c..00000000000 Binary files a/core/src/components/slides/test/image/cat.jpeg and /dev/null differ diff --git a/core/src/components/slides/test/image/e2e.ts b/core/src/components/slides/test/image/e2e.ts deleted file mode 100644 index 5a12745e697..00000000000 --- a/core/src/components/slides/test/image/e2e.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('slides: image', async () => { - const page = await newE2EPage({ - url: '/src/components/slides/test/image?ionic:_testing=true', - }); - - const compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); -}); diff --git a/core/src/components/slides/test/image/index.html b/core/src/components/slides/test/image/index.html deleted file mode 100644 index 5a82431e60e..00000000000 --- a/core/src/components/slides/test/image/index.html +++ /dev/null @@ -1,158 +0,0 @@ - - - - - Slides - Image - - - - - - - - - - - - - - - - - - - - - - - - - Slide Prev - Slide Next - Get Active Index - Get Previous Index - - Is the End? - Is the beginning? - - Slide to slide index 2 - Get slide length - Start auto play - Stop auto play - Set options - - - - - diff --git a/core/src/components/slides/test/pagination/index.html b/core/src/components/slides/test/pagination/index.html deleted file mode 100644 index c54c4e108f6..00000000000 --- a/core/src/components/slides/test/pagination/index.html +++ /dev/null @@ -1,140 +0,0 @@ - - - - - Slides - Pagination - - - - - - - - - - - - - - -

Default Slides

- - -

Slide 2

- - -

Slide 3

- - - - - -

Bullet Pagination

- - -

Slide 2

- - -

Slide 3

- - - - - -

Custom Bullet Pagination

- - -

Slide 2

- - -

Slide 3

- - - - - -

Progress Pagination

- - -

Slide 2

- - -

Slide 3

- - - - - -

Custom Progress Pagination

- - -

Slide 2

- - -

Slide 3

- - - - - -

Fraction Pagination

- - -

Slide 2

- - -

Slide 3

- - - - - - - - - - diff --git a/core/src/components/slides/test/prevent-default/e2e.ts b/core/src/components/slides/test/prevent-default/e2e.ts deleted file mode 100644 index e92c108342d..00000000000 --- a/core/src/components/slides/test/prevent-default/e2e.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('slides: prevent-default', async () => { - // For this specific test, _testing=false to import tap-click in app.tsx - const page = await newE2EPage({ - url: '/src/components/slides/test/prevent-default?ionic:_testing=false', - }); - - const screenshotCompares = []; - - screenshotCompares.push(await page.compareScreenshot()); - - const scroller = await page.find('#scrollDownButton'); - const button = await page.find('#changeBackgroundButton'); - const contentWithBackground = await page.find('#contentWithBackground'); - - await page.waitForTimeout(500); - - await scroller.click(); - await page.waitForTimeout(500); - - screenshotCompares.push(await page.compareScreenshot('scroll down button')); - - await button.click(); - - screenshotCompares.push(await page.compareScreenshot('change background')); - - expect(contentWithBackground).toHaveClasses(['blueBackground']); - - for (const screenshotCompare of screenshotCompares) { - expect(screenshotCompare).toMatchScreenshot(); - } -}); diff --git a/core/src/components/slides/test/prevent-default/index.html b/core/src/components/slides/test/prevent-default/index.html deleted file mode 100644 index 8c95e4ac88d..00000000000 --- a/core/src/components/slides/test/prevent-default/index.html +++ /dev/null @@ -1,53 +0,0 @@ - - - - - Slides - Prevent Default - - - - - - - - - - - - - - -
- Scroll down -
-
- Change Background -
- - - - - - - - diff --git a/core/src/components/slides/test/scrollbar/index.html b/core/src/components/slides/test/scrollbar/index.html deleted file mode 100644 index 92b74476213..00000000000 --- a/core/src/components/slides/test/scrollbar/index.html +++ /dev/null @@ -1,100 +0,0 @@ - - - - - Slides - Scrollbar - - - - - - - - - - - - - - -

Default Slides

- - -

Slide 2

- - -

Slide 3

- - - - - -

Scrollbar

- - -

Slide 2

- - -

Slide 3

- - - - - -

Visible Scrollbar

- - -

Slide 2

- - -

Slide 3

- - - - - -

Custom Visible Scrollbar

- - -

Slide 2

- - -

Slide 3

- - - - - - - - - - diff --git a/core/src/components/slides/test/standalone/e2e.ts b/core/src/components/slides/test/standalone/e2e.ts deleted file mode 100644 index e7f1bccff69..00000000000 --- a/core/src/components/slides/test/standalone/e2e.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('slides: standalone', async () => { - const page = await newE2EPage({ - url: '/src/components/slides/test/standalone?ionic:_testing=true', - }); - - const compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); -}); diff --git a/core/src/components/slides/test/standalone/index.html b/core/src/components/slides/test/standalone/index.html deleted file mode 100644 index 671d1f683b9..00000000000 --- a/core/src/components/slides/test/standalone/index.html +++ /dev/null @@ -1,38 +0,0 @@ - - - - - Slides - Standalone - - - - - - - - - - - -

Slide 1

- - - -

Slide 2

- - - -

Slide 3

- - - - - diff --git a/core/src/components/slides/test/vertical/e2e.ts b/core/src/components/slides/test/vertical/e2e.ts deleted file mode 100644 index d3c57a304a8..00000000000 --- a/core/src/components/slides/test/vertical/e2e.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('slides: vertical', async () => { - const page = await newE2EPage({ - url: '/src/components/slides/test/vertical?ionic:_testing=true', - }); - - const compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); -}); diff --git a/core/src/components/slides/test/vertical/index.html b/core/src/components/slides/test/vertical/index.html deleted file mode 100644 index 6aeb0ec36b4..00000000000 --- a/core/src/components/slides/test/vertical/index.html +++ /dev/null @@ -1,50 +0,0 @@ - - - - - Slides - Vertical - - - - - - - - - - - - - - -

Slide 1

- - -

Slide 2

- - -

Slide 3

- - - - - - - - - - diff --git a/core/src/css/ionic-swiper.scss b/core/src/css/ionic-swiper.scss index 24e5eaaf4e9..3161c5ca964 100644 --- a/core/src/css/ionic-swiper.scss +++ b/core/src/css/ionic-swiper.scss @@ -1,5 +1,5 @@ @import "../themes/ionic.skip-warns.scss"; -@import "../components/slides/slides.ios.vars.scss"; +@import "../themes/ionic.globals.ios.scss"; // Slides // -------------------------------------------------- @@ -9,12 +9,12 @@ // These values are the same for iOS and MD // We just do not add a .md or .ios class beforehand // so the styles are easier to override by the user. - --bullet-background: #{$slides-ios-bullet-background}; - --bullet-background-active: #{$slides-ios-bullet-background-active}; - --progress-bar-background: #{$slides-ios-progress-bar-background}; - --progress-bar-background-active: #{$slides-ios-progress-bar-background-active}; - --scroll-bar-background: #{$slides-ios-scroll-bar-background}; - --scroll-bar-background-active: #{$slides-ios-scroll-bar-drag-background}; + --bullet-background: $text-color-step-800; + --bullet-background-active: ion-color(primary, base); + --progress-bar-background: rgba($text-color-rgb, .25); + --progress-bar-background-active: ion-color(primary, shade); + --scroll-bar-background: rgba($text-color-rgb, .1); + --scroll-bar-background-active: rgba($text-color-rgb, .5); /** * @prop --bullet-background: Background of the pagination bullets * @prop --bullet-background-active: Background of the active pagination bullet diff --git a/core/src/index.ts b/core/src/index.ts index 7d0c7131cff..69443064338 100644 --- a/core/src/index.ts +++ b/core/src/index.ts @@ -27,5 +27,4 @@ export { popoverController, toastController, } from './utils/overlays'; -export { IonicSwiper } from './components/slides/IonicSwiper'; export { IonicSlides } from './components/slides/IonicSlides'; diff --git a/core/src/utils/test/modes/e2e.ts b/core/src/utils/test/modes/e2e.ts index d814245e524..e62af3e366e 100644 --- a/core/src/utils/test/modes/e2e.ts +++ b/core/src/utils/test/modes/e2e.ts @@ -48,7 +48,6 @@ test('component: modes', async () => { 'ion-list', 'ion-picker', 'ion-refresher', - 'ion-slides', 'ion-split-pane', ]; @@ -130,8 +129,6 @@ test('component: modes', async () => { 'ion-select-option', 'ion-select-popover', 'ion-skeleton-text', - 'ion-slide', - 'ion-slides', 'ion-spinner', 'ion-split-pane', 'ion-tab-bar', diff --git a/core/src/utils/test/modes/index.html b/core/src/utils/test/modes/index.html index 6139084cf03..27b9fc24f9e 100644 --- a/core/src/utils/test/modes/index.html +++ b/core/src/utils/test/modes/index.html @@ -93,8 +93,6 @@ - - diff --git a/core/stencil.config.ts b/core/stencil.config.ts index 0c4fd477d65..00bc7a9219c 100644 --- a/core/stencil.config.ts +++ b/core/stencil.config.ts @@ -45,7 +45,6 @@ export const config: Config = { { components: ['ion-searchbar'] }, { components: ['ion-segment', 'ion-segment-button'] }, { components: ['ion-select', 'ion-select-option', 'ion-select-popover'] }, - { components: ['ion-slides', 'ion-slide'] }, { components: ['ion-spinner'] }, { components: ['ion-split-pane'] }, { components: ['ion-tabs', 'ion-tab'] }, diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index 99c47be63ce..3f0e1156ec9 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -6,7 +6,6 @@ export { createGesture, iosTransitionAnimation, mdTransitionAnimation, - IonicSwiper, IonicSlides, getTimeGivenProgression, diff --git a/packages/react/src/components/proxies.ts b/packages/react/src/components/proxies.ts index aa2b07fb80e..99897431763 100644 --- a/packages/react/src/components/proxies.ts +++ b/packages/react/src/components/proxies.ts @@ -60,8 +60,6 @@ import { defineCustomElement as defineIonSegmentButton } from '@ionic/core/compo import { defineCustomElement as defineIonSelect } from '@ionic/core/components/ion-select.js'; import { defineCustomElement as defineIonSelectOption } from '@ionic/core/components/ion-select-option.js'; import { defineCustomElement as defineIonSkeletonText } from '@ionic/core/components/ion-skeleton-text.js'; -import { defineCustomElement as defineIonSlide } from '@ionic/core/components/ion-slide.js'; -import { defineCustomElement as defineIonSlides } from '@ionic/core/components/ion-slides.js'; import { defineCustomElement as defineIonSpinner } from '@ionic/core/components/ion-spinner.js'; import { defineCustomElement as defineIonSplitPane } from '@ionic/core/components/ion-split-pane.js'; import { defineCustomElement as defineIonTab } from '@ionic/core/components/ion-tab.js'; @@ -127,8 +125,6 @@ export const IonSegmentButton = /*@__PURE__*/createReactComponent('ion-select', undefined, undefined, defineIonSelect); export const IonSelectOption = /*@__PURE__*/createReactComponent('ion-select-option', undefined, undefined, defineIonSelectOption); export const IonSkeletonText = /*@__PURE__*/createReactComponent('ion-skeleton-text', undefined, undefined, defineIonSkeletonText); -export const IonSlide = /*@__PURE__*/createReactComponent('ion-slide', undefined, undefined, defineIonSlide); -export const IonSlides = /*@__PURE__*/createReactComponent('ion-slides', undefined, undefined, defineIonSlides); export const IonSpinner = /*@__PURE__*/createReactComponent('ion-spinner', undefined, undefined, defineIonSpinner); export const IonSplitPane = /*@__PURE__*/createReactComponent('ion-split-pane', undefined, undefined, defineIonSplitPane); export const IonTab = /*@__PURE__*/createReactComponent('ion-tab', undefined, undefined, defineIonTab); diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts index 0c1426cb9c9..a7682b017cb 100644 --- a/packages/vue/src/index.ts +++ b/packages/vue/src/index.ts @@ -37,7 +37,6 @@ export { createGesture, iosTransitionAnimation, mdTransitionAnimation, - IonicSwiper, IonicSlides, getPlatforms, isPlatform, diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index 39b0807b199..59ffa8f2282 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -66,8 +66,6 @@ import { defineCustomElement as defineIonSegmentButton } from '@ionic/core/compo import { defineCustomElement as defineIonSelect } from '@ionic/core/components/ion-select.js'; import { defineCustomElement as defineIonSelectOption } from '@ionic/core/components/ion-select-option.js'; import { defineCustomElement as defineIonSkeletonText } from '@ionic/core/components/ion-skeleton-text.js'; -import { defineCustomElement as defineIonSlide } from '@ionic/core/components/ion-slide.js'; -import { defineCustomElement as defineIonSlides } from '@ionic/core/components/ion-slides.js'; import { defineCustomElement as defineIonSpinner } from '@ionic/core/components/ion-spinner.js'; import { defineCustomElement as defineIonSplitPane } from '@ionic/core/components/ion-split-pane.js'; import { defineCustomElement as defineIonText } from '@ionic/core/components/ion-text.js'; @@ -732,32 +730,6 @@ export const IonSkeletonText = /*@__PURE__*/ defineContainer('ion-slide', defineIonSlide); - - -export const IonSlides = /*@__PURE__*/ defineContainer('ion-slides', defineIonSlides, [ - 'options', - 'pager', - 'scrollbar', - 'ionSlidesDidLoad', - 'ionSlideTap', - 'ionSlideDoubleTap', - 'ionSlideWillChange', - 'ionSlideDidChange', - 'ionSlideNextStart', - 'ionSlidePrevStart', - 'ionSlideNextEnd', - 'ionSlidePrevEnd', - 'ionSlideTransitionStart', - 'ionSlideTransitionEnd', - 'ionSlideDrag', - 'ionSlideReachStart', - 'ionSlideReachEnd', - 'ionSlideTouchStart', - 'ionSlideTouchEnd' -]); - - export const IonSpinner = /*@__PURE__*/ defineContainer('ion-spinner', defineIonSpinner, [ 'color', 'duration', diff --git a/packages/vue/test-app/src/router/index.ts b/packages/vue/test-app/src/router/index.ts index 7f6f9422d95..3cc2de01fec 100644 --- a/packages/vue/test-app/src/router/index.ts +++ b/packages/vue/test-app/src/router/index.ts @@ -33,10 +33,6 @@ const routes: Array = [ path: '/inputs', component: () => import('@/views/Inputs.vue') }, - { - path: '/slides', - component: () => import('@/views/Slides.vue') - }, { path: '/default-href', component: () => import('@/views/DefaultHref.vue') diff --git a/packages/vue/test-app/src/views/Home.vue b/packages/vue/test-app/src/views/Home.vue index cbd4155feab..6e4ded880f2 100644 --- a/packages/vue/test-app/src/views/Home.vue +++ b/packages/vue/test-app/src/views/Home.vue @@ -23,9 +23,6 @@ Inputs - - Slides - Navigation diff --git a/packages/vue/test-app/src/views/Slides.vue b/packages/vue/test-app/src/views/Slides.vue deleted file mode 100644 index 1114a909e6f..00000000000 --- a/packages/vue/test-app/src/views/Slides.vue +++ /dev/null @@ -1,118 +0,0 @@ - - - - - diff --git a/packages/vue/types/proxies.d.ts b/packages/vue/types/proxies.d.ts index 6c199f708e6..7a302ea122a 100644 --- a/packages/vue/types/proxies.d.ts +++ b/packages/vue/types/proxies.d.ts @@ -69,8 +69,6 @@ export declare const IonSegmentButton: import("vue").FunctionalComponent; export declare const IonSelectOption: import("vue").FunctionalComponent; export declare const IonSkeletonText: import("vue").FunctionalComponent; -export declare const IonSlide: import("vue").FunctionalComponent; -export declare const IonSlides: import("vue").FunctionalComponent; export declare const IonSpinner: import("vue").FunctionalComponent; export declare const IonSplitPane: import("vue").FunctionalComponent; export declare const IonTab: import("vue").FunctionalComponent;