diff --git a/package-lock.json b/package-lock.json index 15809ceae..f5f9c34ce 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,8 +14,7 @@ ], "dependencies": { "@ionic/core": "^7.8.2", - "@stencil/core": "^4.17.2", - "swiper": "^11.1.1" + "@stencil/core": "^4.17.2" }, "devDependencies": { "@babel/core": "^7.24.7", @@ -28420,24 +28419,6 @@ "webpack": ">=2" } }, - "node_modules/swiper": { - "version": "11.1.1", - "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.1.tgz", - "integrity": "sha512-jGmEA/fNz1lACIcY4/40ggm1Gcyv+EUivmgV/Jd2WFPsEJhbWXnRAwzZR8OPjkBLtDxmzcoYG/iiAMWfRs0YKQ==", - "funding": [ - { - "type": "patreon", - "url": "https://www.patreon.com/swiperjs" - }, - { - "type": "open_collective", - "url": "http://opencollective.com/swiper" - } - ], - "engines": { - "node": ">= 4.7.0" - } - }, "node_modules/symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", @@ -30922,7 +30903,7 @@ }, "packages/core": { "name": "@juntossomosmais/atomium", - "version": "2.1.0" + "version": "2.2.0" }, "packages/icons": { "name": "@juntossomosmais/atomium-icons" diff --git a/package.json b/package.json index 1eb1c8a97..6dcc40246 100644 --- a/package.json +++ b/package.json @@ -31,8 +31,7 @@ }, "dependencies": { "@ionic/core": "^7.8.2", - "@stencil/core": "^4.17.2", - "swiper": "^11.1.1" + "@stencil/core": "^4.17.2" }, "devDependencies": { "@babel/core": "^7.24.7", diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index bcebafe16..bb19f840a 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -7,11 +7,9 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; import { IconProps } from "./icons"; import { Color, Mode, TextFieldTypes } from "@ionic/core"; -import { AutoplayOptions, PaginationOptions } from "swiper/types"; import { IonTypes } from "@ionic/core/dist/types/components"; export { IconProps } from "./icons"; export { Color, Mode, TextFieldTypes } from "@ionic/core"; -export { AutoplayOptions, PaginationOptions } from "swiper/types"; export { IonTypes } from "@ionic/core/dist/types/components"; export namespace Components { interface AtomAlert { @@ -79,28 +77,6 @@ export namespace Components { "sizeMd"?: string; "sizeSm"?: string; } - interface AtomDeprecatedCarousel { - "autoplay"?: boolean; - "autoplayDelay"?: AutoplayOptions['delay']; - "centerInsufficientSlides"?: boolean; - "centeredSlides"?: boolean; - "freeMode"?: boolean; - "loop"?: boolean; - "navigation"?: boolean; - "navigationButtonSize"?: 'medium' | 'xxlarge'; - "pagination"?: boolean; - "paginationClickable"?: boolean; - "paginationType"?: PaginationOptions['type'] | 'thumbnails'; - "slidesPerGroup"?: number | string; - "slidesPerView"?: number | string; - "spaceBetween"?: number; - "speed"?: number; - "thumbnailImages"?: string; - "videoIcons"?: boolean; - "watchSlidesProgress"?: boolean; - } - interface AtomDeprecatedCarouselItem { - } interface AtomGrid { "fixed"?: boolean; } @@ -264,10 +240,6 @@ export interface AtomChipCustomEvent extends CustomEvent { detail: T; target: HTMLAtomChipElement; } -export interface AtomDeprecatedCarouselCustomEvent extends CustomEvent { - detail: T; - target: HTMLAtomDeprecatedCarouselElement; -} export interface AtomInputCustomEvent extends CustomEvent { detail: T; target: HTMLAtomInputElement; @@ -367,31 +339,6 @@ declare global { prototype: HTMLAtomColElement; new (): HTMLAtomColElement; }; - interface HTMLAtomDeprecatedCarouselElementEventMap { - "atomClickPrev": string; - "atomClickNext": string; - "atomChange": string; - } - interface HTMLAtomDeprecatedCarouselElement extends Components.AtomDeprecatedCarousel, HTMLStencilElement { - addEventListener(type: K, listener: (this: HTMLAtomDeprecatedCarouselElement, ev: AtomDeprecatedCarouselCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; - removeEventListener(type: K, listener: (this: HTMLAtomDeprecatedCarouselElement, ev: AtomDeprecatedCarouselCustomEvent) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; - } - var HTMLAtomDeprecatedCarouselElement: { - prototype: HTMLAtomDeprecatedCarouselElement; - new (): HTMLAtomDeprecatedCarouselElement; - }; - interface HTMLAtomDeprecatedCarouselItemElement extends Components.AtomDeprecatedCarouselItem, HTMLStencilElement { - } - var HTMLAtomDeprecatedCarouselItemElement: { - prototype: HTMLAtomDeprecatedCarouselItemElement; - new (): HTMLAtomDeprecatedCarouselItemElement; - }; interface HTMLAtomGridElement extends Components.AtomGrid, HTMLStencilElement { } var HTMLAtomGridElement: { @@ -504,8 +451,6 @@ declare global { "atom-carousel-item": HTMLAtomCarouselItemElement; "atom-chip": HTMLAtomChipElement; "atom-col": HTMLAtomColElement; - "atom-deprecated-carousel": HTMLAtomDeprecatedCarouselElement; - "atom-deprecated-carousel-item": HTMLAtomDeprecatedCarouselItemElement; "atom-grid": HTMLAtomGridElement; "atom-icon": HTMLAtomIconElement; "atom-input": HTMLAtomInputElement; @@ -586,31 +531,6 @@ declare namespace LocalJSX { "sizeMd"?: string; "sizeSm"?: string; } - interface AtomDeprecatedCarousel { - "autoplay"?: boolean; - "autoplayDelay"?: AutoplayOptions['delay']; - "centerInsufficientSlides"?: boolean; - "centeredSlides"?: boolean; - "freeMode"?: boolean; - "loop"?: boolean; - "navigation"?: boolean; - "navigationButtonSize"?: 'medium' | 'xxlarge'; - "onAtomChange"?: (event: AtomDeprecatedCarouselCustomEvent) => void; - "onAtomClickNext"?: (event: AtomDeprecatedCarouselCustomEvent) => void; - "onAtomClickPrev"?: (event: AtomDeprecatedCarouselCustomEvent) => void; - "pagination"?: boolean; - "paginationClickable"?: boolean; - "paginationType"?: PaginationOptions['type'] | 'thumbnails'; - "slidesPerGroup"?: number | string; - "slidesPerView"?: number | string; - "spaceBetween"?: number; - "speed"?: number; - "thumbnailImages"?: string; - "videoIcons"?: boolean; - "watchSlidesProgress"?: boolean; - } - interface AtomDeprecatedCarouselItem { - } interface AtomGrid { "fixed"?: boolean; } @@ -779,8 +699,6 @@ declare namespace LocalJSX { "atom-carousel-item": AtomCarouselItem; "atom-chip": AtomChip; "atom-col": AtomCol; - "atom-deprecated-carousel": AtomDeprecatedCarousel; - "atom-deprecated-carousel-item": AtomDeprecatedCarouselItem; "atom-grid": AtomGrid; "atom-icon": AtomIcon; "atom-input": AtomInput; @@ -803,8 +721,6 @@ declare module "@stencil/core" { "atom-carousel-item": LocalJSX.AtomCarouselItem & JSXBase.HTMLAttributes; "atom-chip": LocalJSX.AtomChip & JSXBase.HTMLAttributes; "atom-col": LocalJSX.AtomCol & JSXBase.HTMLAttributes; - "atom-deprecated-carousel": LocalJSX.AtomDeprecatedCarousel & JSXBase.HTMLAttributes; - "atom-deprecated-carousel-item": LocalJSX.AtomDeprecatedCarouselItem & JSXBase.HTMLAttributes; "atom-grid": LocalJSX.AtomGrid & JSXBase.HTMLAttributes; "atom-icon": LocalJSX.AtomIcon & JSXBase.HTMLAttributes; "atom-input": LocalJSX.AtomInput & JSXBase.HTMLAttributes; diff --git a/packages/core/src/components/_deprecated-carousel/README.md b/packages/core/src/components/_deprecated-carousel/README.md deleted file mode 100644 index 5f458a387..000000000 --- a/packages/core/src/components/_deprecated-carousel/README.md +++ /dev/null @@ -1,3 +0,0 @@ -**[DEPRECATED]** Carousel - -This is a **deprecated** component. Use the `carousel` component to showcase a list of items in a carousel. We will remove this component soon. diff --git a/packages/core/src/components/_deprecated-carousel/carousel-item/carousel-item.scss b/packages/core/src/components/_deprecated-carousel/carousel-item/carousel-item.scss deleted file mode 100644 index 0414161c1..000000000 --- a/packages/core/src/components/_deprecated-carousel/carousel-item/carousel-item.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import '~@atomium/scss-utils/index'; - -.atom-carousel-item { - width: fit-content; -} diff --git a/packages/core/src/components/_deprecated-carousel/carousel-item/carousel-item.spec.ts b/packages/core/src/components/_deprecated-carousel/carousel-item/carousel-item.spec.ts deleted file mode 100644 index 686c0ad25..000000000 --- a/packages/core/src/components/_deprecated-carousel/carousel-item/carousel-item.spec.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { newSpecPage } from '@stencil/core/testing' - -import { AtomDeprecatedCarousel } from '../carousel' - -import { AtomDeprecatedCarouselItem } from './carousel-item' - -describe('AtomDeprecatedCarouselItem', () => { - it('should component replace atom-carousel-item with swiper-slide', async () => { - const page = await newSpecPage({ - components: [AtomDeprecatedCarousel, AtomDeprecatedCarouselItem], - html: ` - Slide 1 - Slide 2 - `, - }) - - await page.waitForChanges() - expect(page.root?.innerHTML).not.toContain(' - - - - - ) - } -} diff --git a/packages/core/src/components/_deprecated-carousel/carousel.scss b/packages/core/src/components/_deprecated-carousel/carousel.scss deleted file mode 100644 index b43ca04e7..000000000 --- a/packages/core/src/components/_deprecated-carousel/carousel.scss +++ /dev/null @@ -1,65 +0,0 @@ -@import '~@atomium/scss-utils/index'; -@import '~swiper/swiper-bundle.css'; -@import '~swiper/swiper.css'; - -::part(button-prev), -::part(button-next) { - background: var(--color-brand-secondary-regular); - border-radius: var(--border-radius-full); - box-shadow: var(--elevation-3); - color: var(--color-neutral-white); - padding: var(--spacing-small); - transition: - border var(--transition-duration), - box-shadow var(--transition-duration), - opacity var(--transition-duration); - will-change: border, box-shadow; - - &:hover { - background: var(--color-brand-secondary-light-1); - } -} - -::part(pagination) { - margin-top: var(--spacing-large); - position: unset; -} - -::part(thumb) { - align-items: center; - background: var(--color-neutral-white); - border: 1px solid var(--color-neutral-light-4); - border-radius: var(--border-radius-medium); - cursor: pointer; - display: inline-flex; - height: var(--spacing-giant); - justify-content: center; - opacity: 1; - padding: var(--spacing-xxsmall); - position: relative; - width: var(--spacing-giant); -} - -::part(thumb-youtube-icon) { - color: var(--color-contextual-error-regular); - font-size: var(--spacing-xxlarge); - left: 50%; - position: absolute; - top: 50%; - transform: translate(-50%, -50%); -} - -::part(thumb-active) { - border: 1px solid var(--color-neutral-light-2); -} - -::part(thumb-img) { - max-width: 100%; -} - -.atom-carousel__thumbnails { - border-radius: var(--border-radius-medium); - height: var(--spacing-giant); - object-fit: contain; - width: var(--spacing-giant); -} diff --git a/packages/core/src/components/_deprecated-carousel/carousel.spec.ts b/packages/core/src/components/_deprecated-carousel/carousel.spec.ts deleted file mode 100644 index 21dee151e..000000000 --- a/packages/core/src/components/_deprecated-carousel/carousel.spec.ts +++ /dev/null @@ -1,67 +0,0 @@ -import { newSpecPage } from '@stencil/core/testing' - -import { AtomDeprecatedCarousel } from './carousel' - -describe('AtomDeprecatedCarousel', () => { - it('should component use swiper-container', async () => { - const page = await newSpecPage({ - components: [AtomDeprecatedCarousel], - html: ` - Slide 1 - Slide 2 - `, - }) - - await page.waitForChanges() - expect(page.root?.innerHTML).toContain('swiper-container') - const swiperContainer = page.root?.querySelector('swiper-container') - - expect(swiperContainer?.outerHTML).toContain( - 'touch-start-prevent-default="false"' - ) - expect(swiperContainer?.outerHTML).toContain('class="atom-carousel"') - }) - - it('should render component with passed props', async () => { - const page = await newSpecPage({ - components: [AtomDeprecatedCarousel], - html: ` - Slide 1 - Slide 2 - `, - }) - - await page.waitForChanges() - - const swiperContainer = page.root?.querySelector('swiper-container') - - expect(swiperContainer?.outerHTML).not.toContain('pagination=') - expect(swiperContainer?.outerHTML).not.toContain( - 'pagination-type="bullets"' - ) - expect(swiperContainer?.outerHTML).not.toContain('navigation') - expect(swiperContainer?.outerHTML).toContain('slides-per-view="2"') - expect(swiperContainer?.outerHTML).toContain('slides-per-group="4"') - expect(swiperContainer?.outerHTML).toContain('center-insufficient-slides') - expect(swiperContainer?.outerHTML).toContain('watch-slides-progress') - }) - - it('should render component with default props', async () => { - const page = await newSpecPage({ - components: [AtomDeprecatedCarousel], - html: ` - Slide 1 - Slide 2 - `, - }) - - await page.waitForChanges() - - const swiperContainer = page.root?.querySelector('swiper-container') - - expect(swiperContainer?.outerHTML).toContain('navigation=') - expect(swiperContainer?.outerHTML).toContain('slides-per-view="1"') - expect(swiperContainer?.outerHTML).toContain('slides-per-group="1"') - }) -}) diff --git a/packages/core/src/components/_deprecated-carousel/carousel.tsx b/packages/core/src/components/_deprecated-carousel/carousel.tsx deleted file mode 100644 index 852e3be58..000000000 --- a/packages/core/src/components/_deprecated-carousel/carousel.tsx +++ /dev/null @@ -1,143 +0,0 @@ -import { - Component, - Element, - Event, - EventEmitter, - Host, - Prop, - h, -} from '@stencil/core' -import 'swiper/swiper-element-bundle.js' -import { AutoplayOptions, PaginationOptions, Swiper } from 'swiper/types' - -import { renderThumbs } from './utils/render-thumbs' - -interface SwiperElement extends HTMLElement { - swiper: Swiper -} -@Component({ - tag: 'atom-deprecated-carousel', - styleUrl: 'carousel.scss', - shadow: false, -}) -export class AtomDeprecatedCarousel { - @Element() host!: HTMLElement - private swiperEl: SwiperElement - @Event() atomClickPrev!: EventEmitter - @Event() atomClickNext!: EventEmitter - @Event() atomChange!: EventEmitter - - @Prop({ mutable: true }) - autoplay?: boolean - @Prop({ mutable: true }) - autoplayDelay?: AutoplayOptions['delay'] - @Prop({ mutable: true }) - centeredSlides?: boolean = false - @Prop({ mutable: true }) - centerInsufficientSlides?: boolean = false - @Prop({ mutable: true }) - freeMode?: boolean - @Prop({ mutable: true }) - loop?: boolean - @Prop({ mutable: true }) - navigation?: boolean = true - @Prop({ mutable: true }) - pagination?: boolean = true - @Prop({ mutable: true }) - paginationClickable?: boolean - @Prop({ mutable: true }) - paginationType?: PaginationOptions['type'] | 'thumbnails' = 'bullets' - @Prop({ mutable: true }) - slidesPerGroup?: number | string = 1 - @Prop({ mutable: true }) - slidesPerView?: number | string = 1 - @Prop({ mutable: true }) - spaceBetween?: number = 0 - @Prop({ mutable: true }) - speed?: number - @Prop({ mutable: true }) - thumbnailImages?: string = '' - @Prop({ mutable: true }) - videoIcons?: boolean = false - @Prop({ mutable: true }) - navigationButtonSize?: 'medium' | 'xxlarge' = 'medium' - @Prop({ mutable: true }) - watchSlidesProgress?: boolean = false - - componentDidLoad() { - this.swiperEl = this.host.querySelector('swiper-container') - - const children = this.host.querySelectorAll('atom-deprecated-carousel-item') - - children.forEach((child) => { - const slide = child.querySelector('swiper-slide') - - if (slide) { - this.swiperEl.appendChild(slide) - this.host.removeChild(child) - } - }) - - this.swiperEl.swiper?.on('slideChange', () => { - this.atomChange.emit() - }) - this.swiperEl.swiper?.on('navigationPrev', () => { - this.atomClickPrev.emit() - }) - this.swiperEl.swiper?.on('navigationNext', () => { - this.atomClickNext.emit() - }) - - let params: { pagination: PaginationOptions } = this.pagination && { - pagination: { - type: - this.paginationType === 'thumbnails' ? 'custom' : this.paginationType, - clickable: this.paginationClickable, - }, - } - - if (this.paginationType === 'thumbnails') { - const urls = this.thumbnailImages ? this.thumbnailImages.split(',') : [] - - params = { - pagination: { - ...params.pagination, - renderCustom: (_swiper, current, total) => - renderThumbs(current, total, urls, this.videoIcons), - }, - } - } - - Object.assign(this.swiperEl, params) - } - render() { - const injectStyles = [ - '.swiper-button-disabled { opacity: 0 !important}', - '.swiper-pagination-custom { display: flex; justify-content: center; column-gap: var(--spacing-base); } ', - `.swiper-button-next { width: var(--spacing-${this.navigationButtonSize}); height: var(--spacing-${this.navigationButtonSize}); }`, - `.swiper-button-prev { width: var(--spacing-${this.navigationButtonSize}); height: var(--spacing-${this.navigationButtonSize}); }`, - ] - - return ( - - - - ) - } -} diff --git a/packages/core/src/components/_deprecated-carousel/utils/render-thumbs.spec.ts b/packages/core/src/components/_deprecated-carousel/utils/render-thumbs.spec.ts deleted file mode 100644 index ec6241895..000000000 --- a/packages/core/src/components/_deprecated-carousel/utils/render-thumbs.spec.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { renderThumbs } from './render-thumbs' - -describe('renderThumbs', () => { - it('should return an array of thumbnail URLs', () => { - const current = 1 - const total = 1 - const urls = ['example/image1.jpg'] - const expected = `\"Slide` - const result = renderThumbs(current, total, urls, false) - - expect(result).toEqual(expected) - }) - - it('should return an empty array if no URLs are provided', () => { - const current = 1 - const total = 0 - const urls: string[] = [] - const expected: string = '' - const result = renderThumbs(current, total, urls, false) - - expect(result).toEqual(expected) - }) - - it('should return an array of the correct length', () => { - const current = 1 - const total = 1 - const urls = ['example/image1.jpg'] - const expected = `\"Slide` - const result = renderThumbs(current, total, urls, false) - - expect(result.length).toEqual(expected.length) - }) -}) diff --git a/packages/core/src/components/_deprecated-carousel/utils/render-thumbs.ts b/packages/core/src/components/_deprecated-carousel/utils/render-thumbs.ts deleted file mode 100644 index 8de1a4fc3..000000000 --- a/packages/core/src/components/_deprecated-carousel/utils/render-thumbs.ts +++ /dev/null @@ -1,45 +0,0 @@ -export function renderThumbs( - current: number, - total: number, - urls: Array, - videoIcons: boolean -): string { - const thumbs = [] - - if (!urls?.length) return '' - - for (let i = 0; i < total; i++) { - const span = document.createElement('span') - const img = document.createElement('img') - - img.src = urls[i] - img.setAttribute('alt', `Slide ${i + 1}`) - img.setAttribute('part', 'thumb-img') - - if (urls[i].includes('ytimg') && videoIcons) { - const youtubeIcon = document.createElement('atom-icon') - - youtubeIcon.classList.add('youtube-icon') - youtubeIcon.setAttribute('icon', 'youtube') - youtubeIcon.setAttribute('part', 'thumb-youtube-icon') - - span.appendChild(youtubeIcon) - } - - span.appendChild(img) - - span.classList.add('swiper-pagination-thumb', 'swiper-pagination-bullet') - span.setAttribute('part', 'thumb') - thumbs.push(span) - } - - const activeThumb = thumbs[current - 1] - - activeThumb.classList.add( - 'swiper-pagination-thumb-active', - 'swiper-pagination-bullet-active' - ) - activeThumb.setAttribute('part', 'thumb thumb-active') - - return thumbs.map((thumb) => thumb.outerHTML).join('') -}