lint(): fix lint issues with feature-6.1

core/src/components/datetime/datetime.tsx

@@ -1,6 +1,6 @@
-import { printIonError } from '@utils/logging';
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h, writeTask } from '@stencil/core';
+import { printIonError } from '@utils/logging';
 import { caretDownSharp, caretUpSharp, chevronBack, chevronDown, chevronForward } from 'ionicons/icons';
 
 import { getIonMode } from '../../global/ionic-global';

core/src/components/footer/test/scroll-target/e2e.ts

@@ -1,6 +1,5 @@
 import type { E2EPage } from '@stencil/core/testing';
 import { newE2EPage } from '@stencil/core/testing';
-
 import { scrollToBottom } from '@utils/test';
 
 /**

core/src/components/header/header.tsx

@@ -1,8 +1,8 @@
 
-import { findIonContent, getScrollElement, printIonContentErrorMsg } from '@utils/content';
 
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, h, writeTask } from '@stencil/core';
+import { findIonContent, getScrollElement, printIonContentErrorMsg } from '@utils/content';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Attributes } from '../../utils/helpers';

core/src/components/header/test/scroll-target/e2e.ts

@@ -1,6 +1,5 @@
 import { newE2EPage } from '@stencil/core/testing';
 import type { E2EPage } from '@stencil/core/testing';
-
 import { scrollToBottom } from '@utils/test';
 
 describe('ion-header: custom scroll target', () => {

core/src/components/infinite-scroll/test/scroll-target/e2e.ts

@@ -1,6 +1,5 @@
 import { newE2EPage } from '@stencil/core/testing';
 import type { E2EPage } from '@stencil/core/testing';
-
 import { scrollToBottom } from '@utils/test';
 
 /**

core/src/components/item/item.tsx

@@ -2,7 +2,6 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Listen, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
 import { printIonError } from '@utils/logging';
-
 import { chevronForward } from 'ionicons/icons';
 
 import { getIonMode } from '../../global/ionic-global';
@@ -12,7 +11,7 @@ import { raf } from '../../utils/helpers';
 import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 import type { InputChangeEventDetail } from '../input/input-interface';
 
-import { CounterFormatter } from './item-interface';
+import type { CounterFormatter } from './item-interface';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.

core/src/components/item/test/counter/e2e.ts

@@ -1,4 +1,5 @@
-import { E2EPage, newE2EPage } from '@stencil/core/testing';
+import type { E2EPage} from '@stencil/core/testing';
+import { newE2EPage } from '@stencil/core/testing';
 
 describe('item: counter', () => {
 
@@ -75,7 +76,7 @@ describe('item: counter', () => {
           }
         });
 
-        let itemCounter = await page.find('ion-item >>> .item-counter');
+        const itemCounter = await page.find('ion-item >>> .item-counter');
 
         expect(itemCounter.textContent).toBe('0 / 20');
 
@@ -105,13 +106,5 @@ describe('item: counter', () => {
       });
 
     });
-
-<<<<<<< HEAD
-=======
-test('item: counter-rtl', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/item/test/counter?ionic:_testing=true&rtl=true',
->>>>>>> origin/main
   });
-
 })

core/src/components/modal/gestures/sheet.ts

@@ -1,5 +1,6 @@
-import { Animation } from '../../../interface';
-import { GestureDetail, createGesture } from '../../../utils/gesture';
+import type { Animation } from '../../../interface';
+import type { GestureDetail} from '../../../utils/gesture';
+import { createGesture } from '../../../utils/gesture';
 import { clamp, raf } from '../../../utils/helpers';
 import { getBackdropValueForSheet } from '../utils';
 

core/src/components/modal/gestures/swipe-to-close.ts

@@ -1,6 +1,7 @@
-import { Animation } from '../../../interface';
+import type { Animation } from '../../../interface';
 import { getTimeGivenProgression } from '../../../utils/animation/cubic-bezier';
-import { GestureDetail, createGesture } from '../../../utils/gesture';
+import type { GestureDetail} from '../../../utils/gesture';
+import { createGesture } from '../../../utils/gesture';
 import { clamp } from '../../../utils/helpers';
 
 import { calculateSpringStep, handleCanDismiss } from './utils';

core/src/components/modal/gestures/utils.ts

@@ -1,4 +1,4 @@
-import { Animation } from '../../../interface';
+import type { Animation } from '../../../interface';
 
 export const handleCanDismiss = async (
   el: HTMLIonModalElement,

core/src/components/modal/modal-interface.ts

@@ -1,6 +1,6 @@
-import { JSXBase } from '@stencil/core/internal';
+import type { JSXBase } from '@stencil/core/internal';
 
-import { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate, Mode } from '../../interface';
+import type { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate, Mode } from '../../interface';
 
 export interface ModalOptions<T extends ComponentRef = ComponentRef> {
   component: T;
@@ -33,7 +33,7 @@ export interface ModalAnimationOptions {
   backdropBreakpoint?: number;
 }
 
-export interface ModalAttributes extends JSXBase.HTMLAttributes<HTMLElement> { }
+export type ModalAttributes = JSXBase.HTMLAttributes<HTMLElement>
 
 export interface ModalBreakpointChangeEventDetail {
   breakpoint: number;

core/src/components/modal/modal.tsx

@@ -1,9 +1,10 @@
-import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, State, Watch, h, writeTask } from '@stencil/core';
+import type { ComponentInterface, EventEmitter} from '@stencil/core';
+import { Component, Element, Event, Host, Method, Prop, State, Watch, h, writeTask } from '@stencil/core';
 import { printIonWarning } from '@utils/logging';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
-import { Animation, AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate, Gesture, ModalAttributes, ModalBreakpointChangeEventDetail, OverlayEventDetail, OverlayInterface } from '../../interface';
+import type { Animation, AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate, Gesture, ModalAttributes, ModalBreakpointChangeEventDetail, OverlayEventDetail, OverlayInterface } from '../../interface';
 import { CoreDelegate, attachComponent, detachComponent } from '../../utils/framework-delegate';
 import { raf } from '../../utils/helpers';
 import { KEYBOARD_DID_OPEN } from '../../utils/keyboard/keyboard';
@@ -15,7 +16,8 @@ import { iosEnterAnimation } from './animations/ios.enter';
 import { iosLeaveAnimation } from './animations/ios.leave';
 import { mdEnterAnimation } from './animations/md.enter';
 import { mdLeaveAnimation } from './animations/md.leave';
-import { MoveSheetToBreakpointOptions, createSheetGesture } from './gestures/sheet';
+import type { MoveSheetToBreakpointOptions} from './gestures/sheet';
+import { createSheetGesture } from './gestures/sheet';
 import { createSwipeToCloseGesture } from './gestures/swipe-to-close';
 
 /**

core/src/components/modal/test/basic/e2e.ts

@@ -1,10 +1,11 @@
-import { openModal, testModal } from '../test.utils';
 import { newE2EPage } from '@stencil/core/testing';
 
+import { openModal, testModal } from '../test.utils';
+
 const DIRECTORY = 'basic';
 const getActiveElementText = async (page) => {
   const activeElement = await page.evaluateHandle(() => document.activeElement);
-  return await page.evaluate(el => el && el.textContent, activeElement);
+  return await page.evaluate(el => el?.textContent, activeElement);
 }
 
 test('modal: focus trap', async () => {
@@ -14,7 +15,7 @@ test('modal: focus trap', async () => {
   await page.click('#basic-modal');
   await page.waitForSelector('#basic-modal');
 
-  let modal = await page.find('ion-modal');
+  const modal = await page.find('ion-modal');
   expect(modal).not.toBe(null);
 
   await ionModalDidPresent.next();
@@ -45,7 +46,7 @@ test('modal: return focus', async () => {
   await page.click('#basic-modal');
   await page.waitForSelector('#basic-modal');
 
-  let modal = await page.find('ion-modal');
+  const modal = await page.find('ion-modal');
   expect(modal).not.toBe(null);
 
   await ionModalDidPresent.next()
@@ -75,12 +76,12 @@ test('modal: htmlAttributes', async () => {
   await page.click('#basic-modal');
   await page.waitForSelector('#basic-modal');
 
-  let alert = await page.find('ion-modal');
+  const alert = await page.find('ion-modal');
 
   expect(alert).not.toBe(null);
   await alert.waitForVisible();
 
-  const attribute = await page.evaluate((el) => document.querySelector('ion-modal').getAttribute('data-testid'));
+  const attribute = await page.evaluate(() => document.querySelector('ion-modal').getAttribute('data-testid'));
 
   expect(attribute).toEqual('basic-modal');
 });

core/src/components/modal/test/canDismiss/e2e.ts

@@ -332,7 +332,6 @@ describe('modal - canDismiss handler', () => {
 
     it('should not dismiss on swipe when not attempting to close', async () => {
       const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-      const ionHandlerDone = await page.spyOnEvent('ionHandlerDone');
       const screenshotCompares = [];
 
       await page.click('#radio-promise-true');

core/src/components/modal/test/sheet/e2e.ts

@@ -1,8 +1,9 @@
-import { E2EElement, E2EPage, newE2EPage } from '@stencil/core/testing';
-import { openModal, testModal } from '../test.utils';
+import type { E2EElement, E2EPage} from '@stencil/core/testing';
+import { newE2EPage } from '@stencil/core/testing';
 import { getActiveElement, getActiveElementParent, dragElementBy } from '@utils/test';
 
-import { testModal } from '../test.utils';
+import { openModal, testModal , testModal } from '../test.utils';
+
 
 const DIRECTORY = 'sheet';
 

core/src/components/modal/test/test.utils.ts

@@ -1,5 +1,5 @@
-import { E2EPage, newE2EPage } from '@stencil/core/testing';
-
+import type { E2EPage} from '@stencil/core/testing';
+import { newE2EPage } from '@stencil/core/testing';
 import { generateE2EUrl } from '@utils/test';
 
 export const openModal = async (

core/src/components/reorder-group/reorder-group.tsx

@@ -1,8 +1,8 @@
 
-import { findClosestIonContent, getScrollElement } from '@utils/content';
 
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
+import { findClosestIonContent, getScrollElement } from '@utils/content';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Gesture, GestureDetail, ItemReorderEventDetail } from '../../interface';

core/src/components/reorder-group/test/scroll-target/e2e.ts

@@ -1,7 +1,7 @@
 import type { E2EPage } from '@stencil/core/testing';
 import { newE2EPage } from '@stencil/core/testing';
 
-import { getElementProperty, queryDeep } from '../../../../utils/test/utils';
+import { getElementProperty } from '../../../../utils/test/utils';
 import { moveReorderItem } from '../test.utils';
 
 it('reorder: custom scroll target', async () => {

core/src/utils/content/content.utils.spec.ts

@@ -5,12 +5,12 @@ describe('Content Utils', () => {
   describe('getScrollElement', () => {
 
     it('should return the scroll element for ion-content', async () => {
-      const res = await getScrollElement(<any>{
+      const res = await getScrollElement({
         tagName: 'ION-CONTENT',
         getScrollElement: () => Promise.resolve({
           tagName: 'my-scroll-element'
         })
-      });
+      } as any);
 
       expect(res).toStrictEqual({
         tagName: 'my-scroll-element'
@@ -24,9 +24,9 @@ describe('Content Utils', () => {
     it('should query the ion-content element', () => {
       const querySelectorMock = jest.fn();
 
-      findIonContent(<any>{
+      findIonContent({
         querySelector: querySelectorMock
-      });
+      } as any);
 
       expect(querySelectorMock).toHaveBeenCalledWith('ion-content, .ion-content-scroll-host');
     });
@@ -38,9 +38,9 @@ describe('Content Utils', () => {
     it('should query the closest ion-content', () => {
       const closestMock = jest.fn();
 
-      findClosestIonContent(<any>{
+      findClosestIonContent({
         closest: closestMock
-      });
+      } as any);
 
       expect(closestMock).toHaveBeenCalledWith('ion-content, .ion-content-scroll-host');
     });
@@ -53,10 +53,10 @@ describe('Content Utils', () => {
       it('should call scrollToTop when the tag name is ion-content', () => {
         const scrollToTopMock = jest.fn();
 
-        scrollToTop(<any>{
+        scrollToTop({
           tagName: 'ION-CONTENT',
           scrollToTop: scrollToTopMock
-        }, 0);
+        } as any, 0);
 
         expect(scrollToTopMock).toHaveBeenCalledWith(0);
       });
@@ -64,10 +64,10 @@ describe('Content Utils', () => {
       it('should call the element scrollTo when the tag name is not ion-content', async () => {
         const scrollToMock = jest.fn();
 
-        await scrollToTop(<any>{
+        await scrollToTop({
           tagName: 'DIV',
           scrollTo: scrollToMock
-        }, 0);
+        } as any, 0);
 
         expect(scrollToMock).toHaveBeenCalledWith({
           top: 0,
@@ -83,10 +83,10 @@ describe('Content Utils', () => {
       it('should smooth scroll ion-content', () => {
         const scrollToTopMock = jest.fn();
 
-        scrollToTop(<any>{
+        scrollToTop({
           tagName: 'ION-CONTENT',
           scrollToTop: scrollToTopMock
-        }, 300);
+        } as any, 300);
 
         expect(scrollToTopMock).toHaveBeenCalledWith(300);
       });
@@ -94,10 +94,10 @@ describe('Content Utils', () => {
       it('should smooth scroll the element', async () => {
         const scrollToMock = jest.fn();
 
-        await scrollToTop(<any>{
+        await scrollToTop({
           tagName: 'DIV',
           scrollTo: scrollToMock
-        }, 300);
+        } as any, 300);
 
         expect(scrollToMock).toHaveBeenCalledWith({
           top: 0,
@@ -117,10 +117,10 @@ describe('Content Utils', () => {
       it('should call scrollByPoint when the tag name is ion-content', async () => {
         const scrollByPointMock = jest.fn();
 
-        await scrollByPoint(<any>{
+        await scrollByPoint({
           tagName: 'ION-CONTENT',
           scrollByPoint: scrollByPointMock
-        }, 10, 15, 0);
+        } as any, 10, 15, 0);
 
         expect(scrollByPointMock).toHaveBeenCalledWith(10, 15, 0);
       });
@@ -128,10 +128,10 @@ describe('Content Utils', () => {
       it('should call the element scrollBy when the tag name is not ion-content', async () => {
         const scrollByMock = jest.fn();
 
-        await scrollByPoint(<any>{
+        await scrollByPoint({
           tagName: 'DIV',
           scrollBy: scrollByMock
-        }, 10, 15, 0);
+        } as any, 10, 15, 0);
 
         expect(scrollByMock).toHaveBeenCalledWith({
           top: 15,
@@ -147,10 +147,10 @@ describe('Content Utils', () => {
       it('should smooth scroll ion-content', async () => {
         const scrollByPointMock = jest.fn();
 
-        await scrollByPoint(<any>{
+        await scrollByPoint({
           tagName: 'ION-CONTENT',
           scrollByPoint: scrollByPointMock
-        }, 10, 15, 300);
+        } as any, 10, 15, 300);
 
         expect(scrollByPointMock).toHaveBeenCalledWith(10, 15, 300);
       });
@@ -158,10 +158,10 @@ describe('Content Utils', () => {
       it('should smooth scroll the element', async () => {
         const scrollByMock = jest.fn();
 
-        await scrollByPoint(<any>{
+        await scrollByPoint({
           tagName: 'DIV',
           scrollBy: scrollByMock
-        }, 10, 15, 300);
+        } as any, 10, 15, 300);
 
         expect(scrollByMock).toHaveBeenCalledWith({
           top: 15,
@@ -177,9 +177,9 @@ describe('Content Utils', () => {
   it('printIonContentErrorMsg should display "<my-el> must be used inside ion-content."', () => {
     const consoleErrorMock = jest.spyOn(console, 'error').mockImplementation();
 
-    printIonContentErrorMsg(<any>{
+    printIonContentErrorMsg({
       tagName: 'MY-EL'
-    });
+    } as any);
 
     expect(consoleErrorMock).toHaveBeenCalledWith('<my-el> must be used inside ion-content.');