@ionic/core 8.0.0-dev.11712932867.11504809 → 8.0.0-dev.11713893672.15a2b23e

package/dist/collection/components/button/test/states/button.e2e.js

@@ -1,51 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { expect } from "@playwright/test";
-import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'], modes: ['ionic-md', 'md', 'ios'] }).forEach(({ title, screenshot, config }) => {
-    test.describe(title('button: activated'), () => {
-        test('should render solid button', async ({ page }) => {
-            await page.setContent(`
-        <ion-button class="ion-activated">Button</ion-button>
-      `, config);
-            const button = page.locator('ion-button');
-            await expect(button).toHaveScreenshot(screenshot(`button-activated-solid`));
-        });
-        test('should render solid button with color', async ({ page }) => {
-            await page.setContent(`
-        <ion-button color="tertiary" class="ion-activated">Button</ion-button>
-      `, config);
-            const button = page.locator('ion-button');
-            await expect(button).toHaveScreenshot(screenshot(`button-activated-solid-color`));
-        });
-        test('should render outline button', async ({ page }) => {
-            await page.setContent(`
-        <ion-button fill="outline" class="ion-activated">Button</ion-button>
-      `, config);
-            const button = page.locator('ion-button');
-            await expect(button).toHaveScreenshot(screenshot(`button-activated-outline`));
-        });
-        test('should render outline button with color', async ({ page }) => {
-            await page.setContent(`
-        <ion-button color="tertiary" fill="outline" class="ion-activated">Button</ion-button>
-      `, config);
-            const button = page.locator('ion-button');
-            await expect(button).toHaveScreenshot(screenshot(`button-activated-outline-color`));
-        });
-        test('should render clear button', async ({ page }) => {
-            await page.setContent(`
-        <ion-button fill="clear" class="ion-activated">Button</ion-button>
-      `, config);
-            const button = page.locator('ion-button');
-            await expect(button).toHaveScreenshot(screenshot(`button-activated-clear`));
-        });
-        test('should render clear button with color', async ({ page }) => {
-            await page.setContent(`
-        <ion-button color="tertiary" fill="clear" class="ion-activated">Button</ion-button>
-      `, config);
-            const button = page.locator('ion-button');
-            await expect(button).toHaveScreenshot(screenshot(`button-activated-clear-color`));
-        });
-    });
-});

package/dist/collection/components/card/card.ionic.css

@@ -1,49 +0,0 @@
-/**
- * This is an auto-generated file, please do not change it directly.
- * Ionic Design System
- */
-/**
- * A heuristic that applies CSS to tablet
- * viewports.
- *
- * Usage:
- * @include tablet-viewport() {
- *   :host {
- *     background-color: green;
- *   }
- * }
- */
-/**
- * A heuristic that applies CSS to mobile
- * viewports (i.e. phones, not tablets).
- *
- * Usage:
- * @include mobile-viewport() {
- *   :host {
- *     background-color: blue;
- *   }
- * }
- */
-:host {
-  --background: var(--ionic-color-neutral-0, #ffffff);
-  --border-radius: var(--ionic-border-radius-rounded-small, 4px);
-  -webkit-padding-start: var(--ionic-space-base, 16px);
-  padding-inline-start: var(--ionic-space-base, 16px);
-  -webkit-padding-end: var(--ionic-space-base, 16px);
-  padding-inline-end: var(--ionic-space-base, 16px);
-  padding-top: var(--ionic-space-base, 16px);
-  padding-bottom: var(--ionic-space-base, 16px);
-  border-radius: var(--border-radius);
-  display: block;
-  border: var(--ionic-border-size-small, 1px) solid var(--ionic-color-neutral-50, #e7e7e7);
-  background: var(--background);
-  color: var(--color);
-}
-
-:host(.card-round) {
-  --border-radius: var(--ionic-border-radius-rounded-large, 16px);
-}
-
-:host(.card-rectangular) {
-  --border-radius: var(--ionic-border-radius-square, 0);
-}

package/dist/collection/components/card/test/shape/card.e2e.js

@@ -1,34 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { expect } from "@playwright/test";
-import { configs, test } from "../../../../utils/test/playwright/index";
-/**
- * Shape is only available in the Ionic theme.
- * TODO(FW-6119): add the `ios` and `md` modes when shape support is added.
- */
-configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-    test.describe(title('card: shape'), () => {
-        test.describe('default', () => {
-            test('should not have visual regressions', async ({ page }) => {
-                await page.goto(`/src/components/card/test/shape`, config);
-                const container = page.locator('#default');
-                await expect(container).toHaveScreenshot(screenshot(`card-default`));
-            });
-        });
-        test.describe('round', () => {
-            test('should not have visual regressions', async ({ page }) => {
-                await page.goto(`/src/components/card/test/shape`, config);
-                const container = page.locator('#round');
-                await expect(container).toHaveScreenshot(screenshot(`card-round`));
-            });
-        });
-        test.describe('rectangular', () => {
-            test('should not have visual regressions', async ({ page }) => {
-                await page.goto(`/src/components/card/test/shape`, config);
-                const container = page.locator('#rectangular');
-                await expect(container).toHaveScreenshot(screenshot(`card-rectangular`));
-            });
-        });
-    });
-});

package/dist/collection/components/chip/chip.ionic.css

@@ -1,94 +0,0 @@
-/**
- * A heuristic that applies CSS to tablet
- * viewports.
- *
- * Usage:
- * @include tablet-viewport() {
- *   :host {
- *     background-color: green;
- *   }
- * }
- */
-/**
- * A heuristic that applies CSS to mobile
- * viewports (i.e. phones, not tablets).
- *
- * Usage:
- * @include mobile-viewport() {
- *   :host {
- *     background-color: blue;
- *   }
- * }
- */
-/**
- * This is an auto-generated file, please do not change it directly.
- * Ionic Design System
- */
-:host {
-  --background: var(--ionic-color-neutral-10, #f5f5f5);
-  --border-color: transparent;
-  --border-radius: var(--ionic-border-radius-rounded-small, 4px);
-  --color: var(--ionic-color-neutral-900, #05080f);
-  --focus-ring-color: #9ec4fd;
-  --focus-ring-width: var(--ionic-border-size-medium, 2px);
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  -webkit-padding-start: var(--ionic-space-xxs, 6px);
-  padding-inline-start: var(--ionic-space-xxs, 6px);
-  -webkit-padding-end: var(--ionic-space-xxs, 6px);
-  padding-inline-end: var(--ionic-space-xxs, 6px);
-  padding-top: var(--ionic-space-xs, 8px);
-  padding-bottom: var(--ionic-space-xs, 8px);
-  border-radius: var(--border-radius);
-  display: inline-flex;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  gap: var(--ionic-space-xxxs, 4px);
-  min-height: 32px;
-  border-width: var(--ionic-border-size-small, 1px);
-  border-style: solid;
-  border-color: var(--border-color);
-  background: var(--background);
-  color: var(--color);
-  font-family: var(--ionic-font-family, "Inter", sans-serif);
-  font-size: var(--ionic-font-size-m, 14px);
-  font-weight: var(--ionic-font-weight-medium, 500);
-  line-height: var(--ionic-font-line-height-full, 100%);
-  cursor: pointer;
-  overflow: hidden;
-  box-sizing: border-box;
-  vertical-align: middle;
-}
-
-:host(.chip-outline) {
-  --background: transparent;
-  border-color: var(--ionic-color-neutral-100, #dadada);
-}
-
-:host(.ion-focused) {
-  outline: var(--focus-ring-width) solid var(--focus-ring-color);
-  outline-offset: var(--focus-ring-width);
-}
-
-@media (any-hover: hover) {
-  :host(:hover) {
-    --background: rgba(5, 8, 15, 0.16);
-  }
-}
-:host(.chip-disabled) {
-  opacity: 0.6;
-  pointer-events: none;
-}
-
-:host(.chip-round) {
-  --border-radius: var(--ionic-border-radius-rounded-large, 16px);
-}
-
-:host(.chip-rectangular) {
-  --border-radius: var(--ionic-border-radius-square, 0);
-}
-
-::slotted(ion-icon) {
-  font-size: var(--ionic-font-size-l, 16px);
-}

package/dist/collection/components/chip/test/shape/chip.e2e.js

@@ -1,34 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { expect } from "@playwright/test";
-import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-    /**
-     * This behavior only applies to Ionic Theme.
-     * TODO(FW-6120): add the `ios` and `md` modes when shape support is added.
-     */
-    test.describe(title('chip: shape'), () => {
-        test.beforeEach(async ({ page }) => {
-            await page.goto(`/src/components/chip/test/shape`, config);
-        });
-        test.describe('default', () => {
-            test('should not have visual regressions', async ({ page }) => {
-                const container = page.locator('#default');
-                await expect(container).toHaveScreenshot(screenshot(`chip-default`));
-            });
-        });
-        test.describe('round', () => {
-            test('should not have visual regressions', async ({ page }) => {
-                const container = page.locator('#round');
-                await expect(container).toHaveScreenshot(screenshot(`chip-round`));
-            });
-        });
-        test.describe('rectangular', () => {
-            test('should not have visual regressions', async ({ page }) => {
-                const container = page.locator('#rectangular');
-                await expect(container).toHaveScreenshot(screenshot(`chip-rectangular`));
-            });
-        });
-    });
-});

package/dist/collection/components/content/test/content.spec.js

@@ -1,27 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { newSpecPage } from "@stencil/core/testing";
-import { Content } from "../content";
-describe('content: fixed slot placement', () => {
-    it('should should fixed slot after content', async () => {
-        const page = await newSpecPage({
-            components: [Content],
-            html: '<ion-content></ion-content>',
-        });
-        const content = page.body.querySelector('ion-content');
-        const fixedSlot = content.shadowRoot.querySelector('slot[name="fixed"]');
-        const scrollEl = content.shadowRoot.querySelector('[part="scroll"]');
-        expect(fixedSlot.nextElementSibling).not.toBe(scrollEl);
-    });
-    it('should should fixed slot before content', async () => {
-        const page = await newSpecPage({
-            components: [Content],
-            html: `<ion-content fixed-slot-placement="before"></ion-content>`,
-        });
-        const content = page.body.querySelector('ion-content');
-        const fixedSlot = content.shadowRoot.querySelector('slot[name="fixed"]');
-        const scrollEl = content.shadowRoot.querySelector('[part="scroll"]');
-        expect(fixedSlot.nextElementSibling).toBe(scrollEl);
-    });
-});

package/dist/collection/components/datetime/test/overlay-roles/datetime.e2e.js

@@ -1,34 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { expect } from "@playwright/test";
-import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) => {
-    test.describe(title('datetime: overlay roles'), () => {
-        test.beforeEach(async ({ page }) => {
-            await page.setContent(`
-          <ion-modal>
-            <ion-datetime></ion-datetime>
-          </ion-modal>  
-        `, config);
-        });
-        test('should pass role to overlay when calling confirm method', async ({ page }) => {
-            const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
-            const modal = page.locator('ion-modal');
-            const datetime = page.locator('ion-datetime');
-            await modal.evaluate((el) => el.present());
-            await datetime.evaluate((el) => el.confirm(true));
-            await ionModalDidDismiss.next();
-            expect(ionModalDidDismiss).toHaveReceivedEventDetail({ data: undefined, role: 'datetime-confirm' });
-        });
-        test('should pass role to overlay when calling cancel method', async ({ page }) => {
-            const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
-            const modal = page.locator('ion-modal');
-            const datetime = page.locator('ion-datetime');
-            await modal.evaluate((el) => el.present());
-            await datetime.evaluate((el) => el.cancel(true));
-            await ionModalDidDismiss.next();
-            expect(ionModalDidDismiss).toHaveReceivedEventDetail({ data: undefined, role: 'datetime-cancel' });
-        });
-    });
-});

package/dist/collection/css/test/link/basic/link.e2e.js

@@ -1,35 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { expect } from "@playwright/test";
-import { configs, test } from "../../../../utils/test/playwright/index";
-/**
- * Link global classes are only available in the Ionic theme.
- */
-configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-    test.describe(title('link global classes'), () => {
-        test.beforeEach(async ({ page }) => {
-            await page.goto('/src/css/test/link/basic/index.html', config);
-        });
-        test.describe('.ion-link class', () => {
-            test('should apply to anchor elements', async ({ page }) => {
-                const standalone = page.locator('#standalone');
-                await expect(standalone).toHaveScreenshot(screenshot('link-standalone'));
-            });
-            test('should apply to child anchor elements', async ({ page }) => {
-                const standalone = page.locator('#standalone-nested');
-                await expect(standalone).toHaveScreenshot(screenshot('link-standalone-nested'));
-            });
-        });
-        test.describe('.ion-link-underline class', () => {
-            test('should apply to anchor elements', async ({ page }) => {
-                const standalone = page.locator('#underline');
-                await expect(standalone).toHaveScreenshot(screenshot('link-underline'));
-            });
-            test('should apply to child anchor elements', async ({ page }) => {
-                const standalone = page.locator('#underline-nested');
-                await expect(standalone).toHaveScreenshot(screenshot('link-underline-nested'));
-            });
-        });
-    });
-});

package/dist/collection/css/test/typography/basic/typography.e2e.js

@@ -1,85 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { expect } from "@playwright/test";
-import { configs, test } from "../../../../utils/test/playwright/index";
-/**
- * Typography styles are only available in the Ionic theme
- */
-configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-    test.describe(title('typography: global styles'), () => {
-        test('should apply the globals styles for each semantic tag', async ({ page }) => {
-            await page.setContent(`
-        <link href="/css/typography.ionic.css" rel="stylesheet" />
-        <div>
-          <h1>H1: The quick brown fox jumps over the lazy dog</h1>
-          <h2>H2: The quick brown fox jumps over the lazy dog</h2>
-          <h3>H3: The quick brown fox jumps over the lazy dog</h3>
-          <h4>H4: The quick brown fox jumps over the lazy dog</h4>
-          <h5>H5: The quick brown fox jumps over the lazy dog</h5>
-          <h6>H6: The quick brown fox jumps over the lazy dog</h6>
-          <p><ion-text class="ionic-font-size-l"><p>Tag_P FontLarge: The quick brown fox jumps over the lazy dog</p></ion-text><p>
-          <p><ion-text class="ionic-font-size-m">Tag_None FontMedium: The quick brown fox jumps over the lazydog</ion-text></p>
-          <p><ion-text class="ionic-font-size-s"><span>Tag_Span FontSmall: The quick brown fox jumps over the lazy dog</span></ion-text></p>
-        </div>
-      `, config);
-            const div = page.locator('div');
-            await expect(div).toHaveScreenshot(screenshot(`ionic-semantic-global-styles`));
-        });
-        test('should apply the utility classes for each heading', async ({ page }) => {
-            await page.setContent(`
-        <link href="/css/typography.ionic.css" rel="stylesheet" />
-        <div>
-          <h1 class="ionic-heading2 ionic-font-weight-light">Tag H1 - Style Heading 2 - Font Light</h1>
-          <h2 class="ionic-heading3 ionic-font-weight-light">Tag H2 - Style Heading 3 - Font Light</h2>
-          <h3 class="ionic-heading4">Tag H3 - Style Heading 4 - Font Regular</h3>
-          <h4 class="ionic-heading5 ionic-font-weight-medium">Tag H4 - Style Heading 5 - Font Medium</h4>
-          <h5 class="ionic-heading6">Tag H5 - Style Heading 6 - Font Semibold</h5>
-          <h6 class="ionic-heading1 ionic-font-weight-bold">Tag H6 - Style Heading 1 - Font Bold</h6>
-        </div>
-      `, config);
-            const div = page.locator('div');
-            await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-semantic-tags`));
-        });
-        test('should apply the heading classes on ion-text element', async ({ page }) => {
-            await page.setContent(`
-        <link href="/css/typography.ionic.css" rel="stylesheet" />
-        <div>
-          <p><ion-text class="ionic-heading1">Utility class 'ionic-heading1'</ion-text></p>
-          <p><ion-text class="ionic-heading2">Utility class 'ionic-heading2'</ion-text></p>
-          <p><ion-text class="ionic-heading3">Utility class 'ionic-heading3'</ion-text></p>
-          <p><ion-text class="ionic-heading4">Utility class 'ionic-heading4'</ion-text></p>
-          <p><ion-text class="ionic-heading5">Utility class 'ionic-heading5'</ion-text></p>
-          <p><ion-text class="ionic-heading6">Utility class 'ionic-heading6'</ion-text></p>
-        </div>
-      `, config);
-            const div = page.locator('div');
-            await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-headings`));
-        });
-        test('should apply the utility classes for font weights', async ({ page }) => {
-            await page.setContent(`
-        <link href="/css/typography.ionic.css" rel="stylesheet" />
-        <div>
-          <p><ion-text class="ionic-font-weight-light">Utility class 'ionic-font-light'</ion-text></p>
-          <p><ion-text class="ionic-font-weight-regular">Utility class 'ionic-font-regular'</ion-text></p>
-          <p><ion-text class="ionic-font-weight-medium">Utility class 'ionic-font-medium'</ion-text></p>
-          <p><ion-text class="ionic-font-weight-semi-bold">Utility class 'ionic-font-semibold'</ion-text></p>
-          <p><ion-text class="ionic-font-weight-bold">Utility class 'ionic-font-bold'</ion-text></p>
-        </div>
-      `, config);
-            const div = page.locator('div');
-            await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-font-weights`));
-        });
-        test('should apply the utility classes for font display', async ({ page }) => {
-            await page.setContent(`
-        <link href="/css/typography.ionic.css" rel="stylesheet" />
-        <div>
-          <p><ion-text class="ionic-display-s">Utility class 'ionic-display-s'</ion-text></p>
-          <p><ion-text class="ionic-display-m">Utility class 'ionic-display-m'</ion-text></p>
-        </div>
-      `, config);
-            const div = page.locator('div');
-            await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-font-displays`));
-        });
-    });
-});

package/dist/collection/global/test/ionic-global.spec.js

@@ -1,109 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-const getMode = jest.fn();
-const getElement = jest.fn();
-jest.mock('@stencil/core', () => {
-    const original = jest.requireActual('@stencil/core');
-    return Object.assign(Object.assign({}, original), { getMode,
-        getElement });
-});
-/**
- * The implementation needs to be mocked before the implementation is imported.
- */
-// eslint-disable-next-line import/first
-import { getIonTheme, isModeValidForTheme, getIonMode } from "../ionic-global";
-describe('Ionic Global', () => {
-    describe('isModeValidForTheme', () => {
-        it('should return true for md mode with md theme', () => {
-            expect(isModeValidForTheme('md', 'md')).toBe(true);
-        });
-        it('should return true for md mode with ionic theme', () => {
-            expect(isModeValidForTheme('md', 'ionic')).toBe(true);
-        });
-        it('should return true for ios mode with ios theme', () => {
-            expect(isModeValidForTheme('ios', 'ios')).toBe(true);
-        });
-        it('should return true for ios mode with ionic theme', () => {
-            expect(isModeValidForTheme('ios', 'ionic')).toBe(true);
-        });
-        it('should return false for md mode with ios theme', () => {
-            expect(isModeValidForTheme('md', 'ios')).toBe(false);
-        });
-        it('should return false for ios mode with md theme', () => {
-            expect(isModeValidForTheme('ios', 'md')).toBe(false);
-        });
-    });
-    describe('getIonMode', () => {
-        const parentRef = { mode: 'md' };
-        const ref = { parentElement: parentRef };
-        beforeEach(() => {
-            getMode.mockImplementation((ref) => { var _a; return (_a = ref.mode) !== null && _a !== void 0 ? _a : parentRef.mode; });
-            getElement.mockImplementation(() => ({
-                closest: () => ({
-                    getAttribute: () => parentRef.mode,
-                }),
-            }));
-        });
-        afterEach(() => {
-            getMode.mockReset();
-            getElement.mockReset();
-        });
-        it('should return the mode value of the element reference', () => {
-            const ref = { mode: 'ios' };
-            getMode.mockImplementation((ref) => ref.mode);
-            getElement.mockImplementation(() => ({
-                closest: () => ({
-                    getAttribute: () => ref.mode,
-                }),
-            }));
-            expect(getIonMode(ref, 'ios')).toBe('ios');
-        });
-        it('should return the mode value of the closest parent with a valid mode', () => {
-            expect(getIonMode(ref)).toBe('md');
-        });
-        it('should return the default mode if the mode cannot be determined', () => {
-            expect(getIonMode()).toBe('md');
-        });
-        it('should return the theme value if provided and no mode is found', () => {
-            const ref = { mode: undefined };
-            const theme = 'ios';
-            expect(getIonMode(ref, theme)).toBe('ios');
-        });
-    });
-    describe('getIonTheme', () => {
-        const parentRef = { mode: 'md' };
-        beforeEach(() => {
-            getMode.mockImplementation((ref) => { var _a; return (_a = ref === null || ref === void 0 ? void 0 : ref.mode) !== null && _a !== void 0 ? _a : parentRef.mode; });
-            getElement.mockImplementation(() => ({
-                closest: () => ({
-                    getAttribute: () => parentRef.mode,
-                }),
-            }));
-        });
-        afterEach(() => {
-            getMode.mockReset();
-            getElement.mockReset();
-        });
-        it('should return the theme value of the element reference', () => {
-            const ref = { mode: 'ios' };
-            expect(getIonTheme(ref)).toBe('ios');
-        });
-        it('should return the theme value of the closest parent with a valid theme', () => {
-            getElement.mockImplementation(() => ({
-                closest: () => ({
-                    getAttribute: () => 'ios',
-                }),
-            }));
-            expect(getIonTheme()).toBe('ios');
-        });
-        it('should return the default theme if it cannot be determined', () => {
-            getElement.mockImplementation(() => ({
-                closest: () => ({
-                    getAttribute: () => null,
-                }),
-            }));
-            expect(getIonTheme()).toBe('md');
-        });
-    });
-});