mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
Compare commits
18 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
b3c1ab2f76 | ||
|
|
e021eadb81 | ||
|
|
a1e7694490 | ||
|
|
07b987d034 | ||
|
|
58639c7a1e | ||
|
|
b1c4c72474 | ||
|
|
9448783bb1 | ||
|
|
720a3cea99 | ||
|
|
b81d85a401 | ||
|
|
aecbc92e30 | ||
|
|
bf7922c8b3 | ||
|
|
2a3c26e44d | ||
|
|
ddd8b92235 | ||
|
|
9a092c03cc | ||
|
|
a3ebca0f26 | ||
|
|
e10f49c43d | ||
|
|
e41a1a127b | ||
|
|
67bee73513 |
@@ -7,6 +7,8 @@ inputs:
|
||||
description: 'Playwright total number of test shards (ex: 4)'
|
||||
update:
|
||||
description: 'Whether or not to update the reference snapshots'
|
||||
component:
|
||||
description: 'The component to update the reference snapshots'
|
||||
|
||||
runs:
|
||||
using: 'composite'
|
||||
@@ -23,9 +25,29 @@ runs:
|
||||
run: npm install && npx playwright install && npx playwright install-deps
|
||||
shell: bash
|
||||
working-directory: ./core
|
||||
- id: clean-component-name
|
||||
name: Clean Component Name
|
||||
# Remove `ion-` prefix from the `component` variable if it exists.
|
||||
run: |
|
||||
echo "component=$(echo ${{ inputs.component }} | sed 's/ion-//g')" >> $GITHUB_OUTPUT
|
||||
shell: bash
|
||||
- id: set-test-file
|
||||
name: Set Test File
|
||||
# Screenshots can be updated for all components or specified component(s).
|
||||
# If the `component` variable is set, then the test has the option to
|
||||
# - run all the file paths that are in a component folder.
|
||||
# -- For example: if the `component` value is "item", then the test will run all the file paths that are in the "src/components/item" folder.
|
||||
# -- For example: if the `component` value is "item chip", then the test will run all the file paths that are in the "src/components/item" and "src/components/chip" folders.
|
||||
run: |
|
||||
if [ -n "${{ steps.clean-component-name.outputs.component }}" ]; then
|
||||
echo "testFile=\$(echo '${{ steps.clean-component-name.outputs.component }}' | awk '{for(i=1;i<=NF;i++) \$i=\"src/components/\"\$i}1')" >> $GITHUB_OUTPUT
|
||||
else
|
||||
echo "testFile=$(echo '')" >> $GITHUB_OUTPUT
|
||||
fi
|
||||
shell: bash
|
||||
- name: Test
|
||||
if: inputs.update != 'true'
|
||||
run: npm run test.e2e -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }}
|
||||
run: npm run test.e2e ${{ steps.set-test-file.outputs.testFile }} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }}
|
||||
shell: bash
|
||||
working-directory: ./core
|
||||
- name: Test and Update
|
||||
@@ -47,7 +69,7 @@ runs:
|
||||
# which is why we not using the upload-archive
|
||||
# composite step here.
|
||||
run: |
|
||||
npm run test.e2e -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }} --update-snapshots
|
||||
npm run test.e2e ${{ steps.set-test-file.outputs.testFile }} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }} --update-snapshots
|
||||
git add src/\*.png --force
|
||||
mkdir updated-screenshots
|
||||
cd ../ && rsync -R --progress $(git diff --name-only --cached) core/updated-screenshots
|
||||
|
||||
18
.github/workflows/assign-issues.yml
vendored
Normal file
18
.github/workflows/assign-issues.yml
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
name: Assign issues to triage
|
||||
|
||||
on:
|
||||
issues:
|
||||
types: [opened]
|
||||
|
||||
jobs:
|
||||
auto-assign:
|
||||
runs-on: ubuntu-latest
|
||||
permissions:
|
||||
issues: write
|
||||
steps:
|
||||
- name: 'Auto-assign issue'
|
||||
uses: pozil/auto-assign-issue@edee9537367a8fbc625d27f9e10aa8bad47b8723 # v1.13.0
|
||||
with:
|
||||
assignees: liamdebeasi, sean-perkins, brandyscarney, amandaejohnston, mapsandapps, thetaPC
|
||||
numOfAssignee: 1
|
||||
allowSelfAssign: false
|
||||
6
.github/workflows/update-screenshots.yml
vendored
6
.github/workflows/update-screenshots.yml
vendored
@@ -2,6 +2,11 @@ name: 'Update Reference Screenshots'
|
||||
|
||||
on:
|
||||
workflow_dispatch:
|
||||
inputs:
|
||||
component:
|
||||
description: 'What component(s) should be updated? (leave blank to update all or use a space-separated list for multiple components)'
|
||||
required: false
|
||||
default: ''
|
||||
|
||||
jobs:
|
||||
build-core:
|
||||
@@ -34,6 +39,7 @@ jobs:
|
||||
shard: ${{ matrix.shard }}
|
||||
totalShards: ${{ matrix.totalShards }}
|
||||
update: true
|
||||
component: ${{ inputs.component }}
|
||||
|
||||
update-reference-screenshots:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
56
core/package-lock.json
generated
56
core/package-lock.json
generated
@@ -9,15 +9,15 @@
|
||||
"version": "7.6.6",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@stencil/core": "^4.10.0",
|
||||
"@stencil/core": "^4.12.0",
|
||||
"ionicons": "^7.2.2",
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@axe-core/playwright": "^4.8.3",
|
||||
"@axe-core/playwright": "^4.8.4",
|
||||
"@capacitor/core": "^5.6.0",
|
||||
"@capacitor/haptics": "^5.0.6",
|
||||
"@capacitor/keyboard": "^5.0.7",
|
||||
"@capacitor/keyboard": "^5.0.8",
|
||||
"@capacitor/status-bar": "^5.0.6",
|
||||
"@ionic/eslint-config": "^0.3.0",
|
||||
"@ionic/prettier-config": "^2.0.0",
|
||||
@@ -26,7 +26,7 @@
|
||||
"@rollup/plugin-virtual": "^2.0.3",
|
||||
"@stencil/angular-output-target": "^0.8.3",
|
||||
"@stencil/react-output-target": "^0.5.3",
|
||||
"@stencil/sass": "^3.0.8",
|
||||
"@stencil/sass": "^3.0.9",
|
||||
"@stencil/vue-output-target": "^0.8.7",
|
||||
"@types/jest": "^29.5.6",
|
||||
"@types/node": "^14.6.0",
|
||||
@@ -56,9 +56,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@axe-core/playwright": {
|
||||
"version": "4.8.3",
|
||||
"resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.8.3.tgz",
|
||||
"integrity": "sha512-YtbkAWeOp5oQeI8vS6KYqJDa5yTl5O1wJP8KOZAAVjhxeiK/Y1ssxnZuGRobARyVh3eS6O3jdxTv/iCK1RfgaA==",
|
||||
"version": "4.8.4",
|
||||
"resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.8.4.tgz",
|
||||
"integrity": "sha512-xpwd+T0BODt19hnXW0eX9xf+H/Ns1rdWwZNmuCV9UoTqjZ9mGm1F80pvh/A1r317ooltq8nwqcoVO9jbHWKSdA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"axe-core": "~4.8.3"
|
||||
@@ -652,9 +652,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@capacitor/keyboard": {
|
||||
"version": "5.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.7.tgz",
|
||||
"integrity": "sha512-+6lW8z2nXTM2NOG7D7pOasCfIGicz26+EeDRXIj5AtJibbjwtE1Q5GIY+qGHgzpmwOF0qmcrGJBz4zagDwUapg==",
|
||||
"version": "5.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.8.tgz",
|
||||
"integrity": "sha512-XYyBzGlzjgLPqyPVdu5McGLYV6+G2efVR4I3l5cF1B27M6U/oFqv9CQU74WNG08nee28bfccboNpv6eWCLYn1A==",
|
||||
"dev": true,
|
||||
"peerDependencies": {
|
||||
"@capacitor/core": "^5.0.0"
|
||||
@@ -1825,9 +1825,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@stencil/core": {
|
||||
"version": "4.10.0",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz",
|
||||
"integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w==",
|
||||
"version": "4.12.0",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.0.tgz",
|
||||
"integrity": "sha512-qAQcfNmp2sdxAh1DlyUhHfDmIUS7mhI+5LAhPphg74zK9sKgFL5vpLzgjs0wohpjlmI4msgJFYiRB8lxVPqjPg==",
|
||||
"bin": {
|
||||
"stencil": "bin/stencil"
|
||||
},
|
||||
@@ -1846,9 +1846,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@stencil/sass": {
|
||||
"version": "3.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.8.tgz",
|
||||
"integrity": "sha512-QJUG4Dr/b3wSizViwQXorrk1PJzxOsKkq5hSqtUHc3NNG3iomC4DQFYGeu15yNfoCDBtt4qkyHSCynsekQ8F6A==",
|
||||
"version": "3.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.9.tgz",
|
||||
"integrity": "sha512-GtPMjf5r4/BVBCO3LvcoMSIfOa6T+0wq+SrTGEilC4NCZpuZdAlZffWxXi80caZ1jDclwdzJ2qGwEgCAfvGoNA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=12.0.0",
|
||||
@@ -10899,9 +10899,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@axe-core/playwright": {
|
||||
"version": "4.8.3",
|
||||
"resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.8.3.tgz",
|
||||
"integrity": "sha512-YtbkAWeOp5oQeI8vS6KYqJDa5yTl5O1wJP8KOZAAVjhxeiK/Y1ssxnZuGRobARyVh3eS6O3jdxTv/iCK1RfgaA==",
|
||||
"version": "4.8.4",
|
||||
"resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.8.4.tgz",
|
||||
"integrity": "sha512-xpwd+T0BODt19hnXW0eX9xf+H/Ns1rdWwZNmuCV9UoTqjZ9mGm1F80pvh/A1r317ooltq8nwqcoVO9jbHWKSdA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"axe-core": "~4.8.3"
|
||||
@@ -11340,9 +11340,9 @@
|
||||
"requires": {}
|
||||
},
|
||||
"@capacitor/keyboard": {
|
||||
"version": "5.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.7.tgz",
|
||||
"integrity": "sha512-+6lW8z2nXTM2NOG7D7pOasCfIGicz26+EeDRXIj5AtJibbjwtE1Q5GIY+qGHgzpmwOF0qmcrGJBz4zagDwUapg==",
|
||||
"version": "5.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.8.tgz",
|
||||
"integrity": "sha512-XYyBzGlzjgLPqyPVdu5McGLYV6+G2efVR4I3l5cF1B27M6U/oFqv9CQU74WNG08nee28bfccboNpv6eWCLYn1A==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
@@ -12184,9 +12184,9 @@
|
||||
"requires": {}
|
||||
},
|
||||
"@stencil/core": {
|
||||
"version": "4.10.0",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz",
|
||||
"integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w=="
|
||||
"version": "4.12.0",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.0.tgz",
|
||||
"integrity": "sha512-qAQcfNmp2sdxAh1DlyUhHfDmIUS7mhI+5LAhPphg74zK9sKgFL5vpLzgjs0wohpjlmI4msgJFYiRB8lxVPqjPg=="
|
||||
},
|
||||
"@stencil/react-output-target": {
|
||||
"version": "0.5.3",
|
||||
@@ -12196,9 +12196,9 @@
|
||||
"requires": {}
|
||||
},
|
||||
"@stencil/sass": {
|
||||
"version": "3.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.8.tgz",
|
||||
"integrity": "sha512-QJUG4Dr/b3wSizViwQXorrk1PJzxOsKkq5hSqtUHc3NNG3iomC4DQFYGeu15yNfoCDBtt4qkyHSCynsekQ8F6A==",
|
||||
"version": "3.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.9.tgz",
|
||||
"integrity": "sha512-GtPMjf5r4/BVBCO3LvcoMSIfOa6T+0wq+SrTGEilC4NCZpuZdAlZffWxXi80caZ1jDclwdzJ2qGwEgCAfvGoNA==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
|
||||
@@ -31,15 +31,15 @@
|
||||
"loader/"
|
||||
],
|
||||
"dependencies": {
|
||||
"@stencil/core": "^4.10.0",
|
||||
"@stencil/core": "^4.12.0",
|
||||
"ionicons": "^7.2.2",
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@axe-core/playwright": "^4.8.3",
|
||||
"@axe-core/playwright": "^4.8.4",
|
||||
"@capacitor/core": "^5.6.0",
|
||||
"@capacitor/haptics": "^5.0.6",
|
||||
"@capacitor/keyboard": "^5.0.7",
|
||||
"@capacitor/keyboard": "^5.0.8",
|
||||
"@capacitor/status-bar": "^5.0.6",
|
||||
"@ionic/eslint-config": "^0.3.0",
|
||||
"@ionic/prettier-config": "^2.0.0",
|
||||
@@ -48,7 +48,7 @@
|
||||
"@rollup/plugin-virtual": "^2.0.3",
|
||||
"@stencil/angular-output-target": "^0.8.3",
|
||||
"@stencil/react-output-target": "^0.5.3",
|
||||
"@stencil/sass": "^3.0.8",
|
||||
"@stencil/sass": "^3.0.9",
|
||||
"@stencil/vue-output-target": "^0.8.7",
|
||||
"@types/jest": "^29.5.6",
|
||||
"@types/node": "^14.6.0",
|
||||
|
||||
@@ -382,7 +382,10 @@ export class Accordion implements ComponentInterface {
|
||||
};
|
||||
|
||||
private toggleExpanded() {
|
||||
const { accordionGroupEl, value, state } = this;
|
||||
const { accordionGroupEl, disabled, readonly, value, state } = this;
|
||||
|
||||
if (disabled || readonly) return;
|
||||
|
||||
if (accordionGroupEl) {
|
||||
/**
|
||||
* Because the accordion group may or may
|
||||
|
||||
@@ -1,49 +0,0 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
|
||||
test.describe(title('accordion: states'), () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-accordion-group animated="false">
|
||||
<ion-accordion>
|
||||
<ion-item slot="header">Label</ion-item>
|
||||
<div slot="content">Content</div>
|
||||
</ion-accordion>
|
||||
</ion-accordion-group>
|
||||
`,
|
||||
config
|
||||
);
|
||||
});
|
||||
test('should properly set readonly on child accordions', async ({ page }) => {
|
||||
const accordionGroup = page.locator('ion-accordion-group');
|
||||
const accordion = page.locator('ion-accordion');
|
||||
|
||||
await expect(accordion).toHaveJSProperty('readonly', false);
|
||||
|
||||
await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => {
|
||||
el.readonly = true;
|
||||
});
|
||||
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(accordion).toHaveJSProperty('readonly', true);
|
||||
});
|
||||
|
||||
test('should properly set disabled on child accordions', async ({ page }) => {
|
||||
const accordionGroup = page.locator('ion-accordion-group');
|
||||
const accordion = page.locator('ion-accordion');
|
||||
|
||||
await expect(accordion).toHaveJSProperty('disabled', false);
|
||||
|
||||
await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => {
|
||||
el.disabled = true;
|
||||
});
|
||||
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(accordion).toHaveJSProperty('disabled', true);
|
||||
});
|
||||
});
|
||||
});
|
||||
137
core/src/components/accordion/test/disabled/accordion.e2e.ts
Normal file
137
core/src/components/accordion/test/disabled/accordion.e2e.ts
Normal file
@@ -0,0 +1,137 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
// NOTE: these tests cannot be re-written as spec tests because the `getAccordions` method in accordion-group.tsx uses a `:scope` selector
|
||||
configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
|
||||
test.describe(title('accordion: disabled'), () => {
|
||||
test('should properly set disabled on child accordions', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-accordion-group animated="false">
|
||||
<ion-accordion>
|
||||
<ion-item slot="header">Label</ion-item>
|
||||
<div slot="content">Content</div>
|
||||
</ion-accordion>
|
||||
</ion-accordion-group>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const accordionGroup = page.locator('ion-accordion-group');
|
||||
const accordion = page.locator('ion-accordion');
|
||||
|
||||
await expect(accordion).toHaveJSProperty('disabled', false);
|
||||
|
||||
await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => {
|
||||
el.disabled = true;
|
||||
});
|
||||
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(accordion).toHaveJSProperty('disabled', true);
|
||||
});
|
||||
|
||||
test('should not open accordion on click when group is disabled', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-accordion-group animated="false" disabled>
|
||||
<ion-accordion>
|
||||
<ion-item slot="header">Label</ion-item>
|
||||
<div slot="content">Content</div>
|
||||
</ion-accordion>
|
||||
</ion-accordion-group>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const accordion = page.locator('ion-accordion');
|
||||
|
||||
await expect(accordion).toHaveClass(/accordion-collapsed/);
|
||||
|
||||
accordion.click();
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(accordion).toHaveClass(/accordion-collapsed/);
|
||||
});
|
||||
|
||||
test('should not open accordion on click when accordion is disabled', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-accordion-group animated="false">
|
||||
<ion-accordion disabled>
|
||||
<ion-item slot="header">Label</ion-item>
|
||||
<div slot="content">Content</div>
|
||||
</ion-accordion>
|
||||
</ion-accordion-group>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const accordion = page.locator('ion-accordion');
|
||||
|
||||
await expect(accordion).toHaveClass(/accordion-collapsed/);
|
||||
|
||||
accordion.click();
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(accordion).toHaveClass(/accordion-collapsed/);
|
||||
});
|
||||
|
||||
test('should not open accordion via keyboard navigation when group is disabled', async ({ page, browserName }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-accordion-group animated="false" disabled>
|
||||
<ion-accordion>
|
||||
<ion-item slot="header">Label</ion-item>
|
||||
<div slot="content">Content</div>
|
||||
</ion-accordion>
|
||||
</ion-accordion-group>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const accordion = page.locator('ion-accordion');
|
||||
const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
|
||||
|
||||
await expect(accordion).toHaveClass(/accordion-collapsed/);
|
||||
|
||||
await page.keyboard.press(tabKey);
|
||||
await page.waitForChanges();
|
||||
|
||||
await page.keyboard.press('Enter');
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(accordion).toHaveClass(/accordion-collapsed/);
|
||||
});
|
||||
|
||||
test('should not open accordion via keyboard navigation when accordion is disabled', async ({
|
||||
page,
|
||||
browserName,
|
||||
}) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-accordion-group animated="false">
|
||||
<ion-accordion disabled>
|
||||
<ion-item slot="header">Label</ion-item>
|
||||
<div slot="content">Content</div>
|
||||
</ion-accordion>
|
||||
</ion-accordion-group>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const accordion = page.locator('ion-accordion');
|
||||
const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
|
||||
|
||||
await expect(accordion).toHaveClass(/accordion-collapsed/);
|
||||
|
||||
await page.keyboard.press(tabKey);
|
||||
await page.waitForChanges();
|
||||
|
||||
await page.keyboard.press('Enter');
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(accordion).toHaveClass(/accordion-collapsed/);
|
||||
});
|
||||
});
|
||||
});
|
||||
91
core/src/components/accordion/test/disabled/index.html
Normal file
91
core/src/components/accordion/test/disabled/index.html
Normal file
@@ -0,0 +1,91 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Accordion - Disabled</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
grid-row-gap: 20px;
|
||||
grid-column-gap: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-header translucent="true">
|
||||
<ion-toolbar>
|
||||
<ion-title>Accordion - Disabled</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content fullscreen="true" color="light">
|
||||
<ion-header collapse="condense">
|
||||
<ion-toolbar color="light">
|
||||
<ion-title size="large">Accordion - Disabled</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<div class="grid ion-padding">
|
||||
<div class="grid-item">
|
||||
<ion-accordion-group>
|
||||
<ion-accordion value="first">
|
||||
<ion-item slot="header" color="light">
|
||||
<ion-label>First Accordion</ion-label>
|
||||
</ion-item>
|
||||
<div class="ion-padding" slot="content">First Content</div>
|
||||
</ion-accordion>
|
||||
<ion-accordion value="second" disabled="true">
|
||||
<ion-item slot="header" color="light">
|
||||
<ion-label>Second Accordion (Disabled)</ion-label>
|
||||
</ion-item>
|
||||
<div class="ion-padding" slot="content">Second Content</div>
|
||||
</ion-accordion>
|
||||
<ion-accordion value="third">
|
||||
<ion-item slot="header" color="light">
|
||||
<ion-label>Third Accordion</ion-label>
|
||||
</ion-item>
|
||||
<div class="ion-padding" slot="content">Third Content</div>
|
||||
</ion-accordion>
|
||||
</ion-accordion-group>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<ion-accordion-group disabled="true">
|
||||
<ion-accordion value="first">
|
||||
<ion-item slot="header" color="light">
|
||||
<ion-label>First Accordion in Disabled Group</ion-label>
|
||||
</ion-item>
|
||||
<div class="ion-padding" slot="content">First Content</div>
|
||||
</ion-accordion>
|
||||
<ion-accordion value="second">
|
||||
<ion-item slot="header" color="light">
|
||||
<ion-label>Second Accordion in Disabled Group</ion-label>
|
||||
</ion-item>
|
||||
<div class="ion-padding" slot="content">Second Content</div>
|
||||
</ion-accordion>
|
||||
<ion-accordion value="third">
|
||||
<ion-item slot="header" color="light">
|
||||
<ion-label>Third Accordion in Disabled Group</ion-label>
|
||||
</ion-item>
|
||||
<div class="ion-padding" slot="content">Third Content</div>
|
||||
</ion-accordion>
|
||||
</ion-accordion-group>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<ion-accordion value="second" disabled="true">
|
||||
<ion-item slot="header" color="light">
|
||||
<ion-label>Accordion Without Group (Disabled)</ion-label>
|
||||
</ion-item>
|
||||
<div class="ion-padding" slot="content">Second Content</div>
|
||||
</ion-accordion>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
</body>
|
||||
</html>
|
||||
137
core/src/components/accordion/test/readonly/accordion.e2e.ts
Normal file
137
core/src/components/accordion/test/readonly/accordion.e2e.ts
Normal file
@@ -0,0 +1,137 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
// NOTE: these tests cannot be re-written as spec tests because the `getAccordions` method in accordion-group.tsx uses a `:scope` selector
|
||||
configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
|
||||
test.describe(title('accordion: readonly'), () => {
|
||||
test('should properly set readonly on child accordions', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-accordion-group animated="false">
|
||||
<ion-accordion>
|
||||
<ion-item slot="header">Label</ion-item>
|
||||
<div slot="content">Content</div>
|
||||
</ion-accordion>
|
||||
</ion-accordion-group>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const accordionGroup = page.locator('ion-accordion-group');
|
||||
const accordion = page.locator('ion-accordion');
|
||||
|
||||
await expect(accordion).toHaveJSProperty('readonly', false);
|
||||
|
||||
await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => {
|
||||
el.readonly = true;
|
||||
});
|
||||
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(accordion).toHaveJSProperty('readonly', true);
|
||||
});
|
||||
|
||||
test('should not open accordion on click when group is readonly', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-accordion-group animated="false" readonly>
|
||||
<ion-accordion>
|
||||
<ion-item slot="header">Label</ion-item>
|
||||
<div slot="content">Content</div>
|
||||
</ion-accordion>
|
||||
</ion-accordion-group>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const accordion = page.locator('ion-accordion');
|
||||
|
||||
await expect(accordion).toHaveClass(/accordion-collapsed/);
|
||||
|
||||
accordion.click();
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(accordion).toHaveClass(/accordion-collapsed/);
|
||||
});
|
||||
|
||||
test('should not open accordion on click when accordion is readonly', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-accordion-group animated="false">
|
||||
<ion-accordion readonly>
|
||||
<ion-item slot="header">Label</ion-item>
|
||||
<div slot="content">Content</div>
|
||||
</ion-accordion>
|
||||
</ion-accordion-group>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const accordion = page.locator('ion-accordion');
|
||||
|
||||
await expect(accordion).toHaveClass(/accordion-collapsed/);
|
||||
|
||||
accordion.click();
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(accordion).toHaveClass(/accordion-collapsed/);
|
||||
});
|
||||
|
||||
test('should not open accordion via keyboard navigation when group is readonly', async ({ page, browserName }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-accordion-group animated="false" readonly>
|
||||
<ion-accordion>
|
||||
<ion-item slot="header">Label</ion-item>
|
||||
<div slot="content">Content</div>
|
||||
</ion-accordion>
|
||||
</ion-accordion-group>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const accordion = page.locator('ion-accordion');
|
||||
const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
|
||||
|
||||
await expect(accordion).toHaveClass(/accordion-collapsed/);
|
||||
|
||||
await page.keyboard.press(tabKey);
|
||||
await page.waitForChanges();
|
||||
|
||||
await page.keyboard.press('Enter');
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(accordion).toHaveClass(/accordion-collapsed/);
|
||||
});
|
||||
|
||||
test('should not open accordion via keyboard navigation when accordion is readonly', async ({
|
||||
page,
|
||||
browserName,
|
||||
}) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-accordion-group animated="false">
|
||||
<ion-accordion readonly>
|
||||
<ion-item slot="header">Label</ion-item>
|
||||
<div slot="content">Content</div>
|
||||
</ion-accordion>
|
||||
</ion-accordion-group>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const accordion = page.locator('ion-accordion');
|
||||
const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
|
||||
|
||||
await expect(accordion).toHaveClass(/accordion-collapsed/);
|
||||
|
||||
await page.keyboard.press(tabKey);
|
||||
await page.waitForChanges();
|
||||
|
||||
await page.keyboard.press('Enter');
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(accordion).toHaveClass(/accordion-collapsed/);
|
||||
});
|
||||
});
|
||||
});
|
||||
91
core/src/components/accordion/test/readonly/index.html
Normal file
91
core/src/components/accordion/test/readonly/index.html
Normal file
@@ -0,0 +1,91 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Accordion - Readonly</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
grid-row-gap: 20px;
|
||||
grid-column-gap: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-header translucent="true">
|
||||
<ion-toolbar>
|
||||
<ion-title>Accordion - Readonly</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content fullscreen="true" color="light">
|
||||
<ion-header collapse="condense">
|
||||
<ion-toolbar color="light">
|
||||
<ion-title size="large">Accordion - Readonly</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<div class="grid ion-padding">
|
||||
<div class="grid-item">
|
||||
<ion-accordion-group>
|
||||
<ion-accordion value="first">
|
||||
<ion-item slot="header" color="light">
|
||||
<ion-label>First Accordion</ion-label>
|
||||
</ion-item>
|
||||
<div class="ion-padding" slot="content">First Content</div>
|
||||
</ion-accordion>
|
||||
<ion-accordion value="second" readonly="true">
|
||||
<ion-item slot="header" color="light">
|
||||
<ion-label>Second Accordion (Readonly)</ion-label>
|
||||
</ion-item>
|
||||
<div class="ion-padding" slot="content">Second Content</div>
|
||||
</ion-accordion>
|
||||
<ion-accordion value="third">
|
||||
<ion-item slot="header" color="light">
|
||||
<ion-label>Third Accordion</ion-label>
|
||||
</ion-item>
|
||||
<div class="ion-padding" slot="content">Third Content</div>
|
||||
</ion-accordion>
|
||||
</ion-accordion-group>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<ion-accordion-group readonly="true">
|
||||
<ion-accordion value="first">
|
||||
<ion-item slot="header" color="light">
|
||||
<ion-label>First Accordion in Readonly Group</ion-label>
|
||||
</ion-item>
|
||||
<div class="ion-padding" slot="content">First Content</div>
|
||||
</ion-accordion>
|
||||
<ion-accordion value="second">
|
||||
<ion-item slot="header" color="light">
|
||||
<ion-label>Second Accordion in Readonly Group</ion-label>
|
||||
</ion-item>
|
||||
<div class="ion-padding" slot="content">Second Content</div>
|
||||
</ion-accordion>
|
||||
<ion-accordion value="third">
|
||||
<ion-item slot="header" color="light">
|
||||
<ion-label>Third Accordion in Readonly Group</ion-label>
|
||||
</ion-item>
|
||||
<div class="ion-padding" slot="content">Third Content</div>
|
||||
</ion-accordion>
|
||||
</ion-accordion-group>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<ion-accordion value="second" readonly="true">
|
||||
<ion-item slot="header" color="light">
|
||||
<ion-label>Accordion Without Group (Readonly)</ion-label>
|
||||
</ion-item>
|
||||
<div class="ion-padding" slot="content">Second Content</div>
|
||||
</ion-accordion>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,4 +1,4 @@
|
||||
import type { AnimationBuilder, Mode } from '../../interface';
|
||||
import type { AnimationBuilder, LiteralUnion, Mode } from '../../interface';
|
||||
|
||||
export interface ActionSheetOptions {
|
||||
header?: string;
|
||||
@@ -19,7 +19,7 @@ export interface ActionSheetOptions {
|
||||
|
||||
export interface ActionSheetButton<T = any> {
|
||||
text?: string;
|
||||
role?: 'cancel' | 'destructive' | 'selected' | string;
|
||||
role?: LiteralUnion<'cancel' | 'destructive' | 'selected', string>;
|
||||
icon?: string;
|
||||
cssClass?: string | string[];
|
||||
id?: string;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import type { AnimationBuilder, Mode, TextFieldTypes } from '../../interface';
|
||||
import type { AnimationBuilder, LiteralUnion, Mode, TextFieldTypes } from '../../interface';
|
||||
import type { IonicSafeString } from '../../utils/sanitization';
|
||||
|
||||
export interface AlertOptions {
|
||||
@@ -45,7 +45,7 @@ type AlertButtonOverlayHandler = boolean | void | { [key: string]: any };
|
||||
|
||||
export interface AlertButton {
|
||||
text: string;
|
||||
role?: 'cancel' | 'destructive' | string;
|
||||
role?: LiteralUnion<'cancel' | 'destructive', string>;
|
||||
cssClass?: string | string[];
|
||||
id?: string;
|
||||
htmlAttributes?: { [key: string]: any };
|
||||
|
||||
@@ -57,7 +57,7 @@ configs({ modes: ['md'] }).forEach(({ config, screenshot, title }) => {
|
||||
await page.mouse.down();
|
||||
}
|
||||
|
||||
await page.waitForSelector('#default.ion-activated');
|
||||
await page.locator('#default.ion-activated').waitFor();
|
||||
|
||||
await expect(button).toHaveScreenshot(screenshot(`button-ripple-effect`));
|
||||
});
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 5.7 KiB |
@@ -15,7 +15,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
});
|
||||
test('should switch to a date-only view when the date button is clicked', async ({ page }) => {
|
||||
const datetime = page.locator('ion-datetime');
|
||||
@@ -45,7 +45,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('#date-button')).toContainText('Jan 1, 2022');
|
||||
await expect(page.locator('#time-button')).toContainText('6:30 AM');
|
||||
@@ -58,7 +58,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('#date-button')).toContainText('January 2022');
|
||||
await expect(page.locator('#time-button')).toBeHidden();
|
||||
@@ -71,7 +71,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('#date-button')).toContainText('2022');
|
||||
await expect(page.locator('#time-button')).toBeHidden();
|
||||
@@ -84,7 +84,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('#date-button')).toContainText('January');
|
||||
await expect(page.locator('#time-button')).toBeHidden();
|
||||
@@ -97,7 +97,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('#time-button')).toContainText('6:30 AM');
|
||||
await expect(page.locator('#date-button')).toBeHidden();
|
||||
@@ -110,7 +110,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
const dateTarget = page.locator('#date-button');
|
||||
@@ -135,7 +135,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('#date-button')).toContainText('January 2022');
|
||||
await expect(page.locator('#time-button')).toBeHidden();
|
||||
@@ -153,7 +153,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('#date-button')).toContainText('2022');
|
||||
await expect(page.locator('#time-button')).toBeHidden();
|
||||
@@ -169,7 +169,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
/**
|
||||
* The entire text reads 1 ene 2022, but some browsers will add
|
||||
@@ -187,7 +187,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('#time-button')).toContainText('16:30');
|
||||
});
|
||||
@@ -199,7 +199,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const timeTarget = page.locator('#time-button');
|
||||
await expect(timeTarget).toContainText('6:30');
|
||||
@@ -223,7 +223,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('#date-button')).toContainText('Jan 1, 2022 6:30 AM');
|
||||
await expect(page.locator('#time-button')).not.toBeVisible();
|
||||
@@ -238,7 +238,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('#date-button')).toContainText('Jan 1, 2022 6:30 AM');
|
||||
await expect(page.locator('#time-button')).not.toBeVisible();
|
||||
|
||||
@@ -11,7 +11,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('#date-button')).toBeDisabled();
|
||||
await expect(page.locator('#time-button')).toBeDisabled();
|
||||
@@ -24,7 +24,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const datetimeButton = page.locator('ion-datetime-button');
|
||||
await expect(datetimeButton).toHaveScreenshot(screenshot(`datetime-button-disabled`));
|
||||
|
||||
@@ -20,7 +20,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('#date-button')).toContainText('3 days');
|
||||
});
|
||||
@@ -32,7 +32,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('#date-button')).toHaveText('0 days');
|
||||
});
|
||||
@@ -49,7 +49,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('#date-button')).toHaveText('Jun 1, 2022');
|
||||
});
|
||||
@@ -69,7 +69,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('#date-button')).toHaveText('Selected: 3');
|
||||
});
|
||||
@@ -86,7 +86,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
const ionValueChange = await page.spyOnEvent('ionValueChange');
|
||||
@@ -111,7 +111,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('#date-button')).toHaveText('Jun 1, 2022');
|
||||
await expect(page.locator('#time-button')).toHaveText('4:30 PM');
|
||||
|
||||
@@ -24,7 +24,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
|
||||
const container = page.locator('#container');
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(container).toHaveScreenshot(screenshot(`datetime-scale`));
|
||||
});
|
||||
@@ -87,7 +87,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const clearButton = page.locator('#clear-button button');
|
||||
const selectedDay = page.locator('.calendar-day-active');
|
||||
@@ -114,7 +114,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
|
||||
const calendarBody = page.locator('.calendar-body');
|
||||
await expect(calendarMonthYear).toHaveText('February 2022');
|
||||
|
||||
@@ -110,7 +110,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
const datetime = page.locator('ion-datetime');
|
||||
const ionChange = await page.spyOnEvent('ionChange');
|
||||
|
||||
@@ -255,7 +255,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const calendarBody = page.locator('ion-datetime .calendar-body');
|
||||
const calendarHeader = page.locator('ion-datetime .calendar-month-year');
|
||||
@@ -275,7 +275,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const calendarBody = page.locator('ion-datetime .calendar-body');
|
||||
const calendarHeader = page.locator('ion-datetime .calendar-month-year');
|
||||
@@ -297,7 +297,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const calendarBody = page.locator('ion-datetime .calendar-body');
|
||||
const calendarHeader = page.locator('ion-datetime .calendar-month-year');
|
||||
@@ -331,7 +331,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const monthYearButton = page.locator('ion-datetime .calendar-month-year');
|
||||
const monthYearInterface = page.locator('ion-datetime .datetime-year');
|
||||
@@ -349,7 +349,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
await datetime.evaluate((el: HTMLIonDatetimeElement) => el.style.removeProperty('display'));
|
||||
await expect(datetime).toBeVisible();
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
// month/year interface should be reset
|
||||
await expect(monthYearInterface).toBeHidden();
|
||||
@@ -399,7 +399,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const selectedDay = page.locator('ion-datetime .calendar-day-active');
|
||||
|
||||
@@ -428,7 +428,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const ionChange = await page.spyOnEvent('ionChange');
|
||||
const calendarButtons = page.locator('.calendar-day:not([disabled])');
|
||||
@@ -447,7 +447,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const ionChange = await page.spyOnEvent('ionChange');
|
||||
const datetime = page.locator('ion-datetime');
|
||||
@@ -487,7 +487,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(datetime.locator('.calendar-day-today')).toHaveScreenshot(
|
||||
screenshot(`datetime-today-calendar-button`)
|
||||
@@ -517,7 +517,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(datetime).toHaveScreenshot(screenshot(`date-highlight-start-of-month`));
|
||||
|
||||
@@ -543,7 +543,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
});
|
||||
|
||||
test('should switch the calendar header when moving to a month with a different number of days', async ({
|
||||
|
||||
@@ -113,7 +113,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
|
||||
test.describe('check example usages', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/src/components/datetime/test/disable-dates', config);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').first().waitFor();
|
||||
});
|
||||
|
||||
test('should disable a specific date', async ({ page }) => {
|
||||
|
||||
@@ -27,7 +27,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const febFirstButton = page.locator(`.calendar-day[data-day='1'][data-month='2']`);
|
||||
|
||||
@@ -42,7 +42,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
|
||||
await expect(calendarMonthYear.locator('button')).toBeDisabled();
|
||||
});
|
||||
@@ -71,7 +71,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const clearButton = page.locator('#clear-button button');
|
||||
|
||||
@@ -86,7 +86,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
|
||||
const calendarBody = page.locator('.calendar-body');
|
||||
await expect(calendarMonthYear).toHaveText('February 2022');
|
||||
|
||||
@@ -15,7 +15,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
const datetime = page.locator('ion-datetime');
|
||||
await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-date-time`));
|
||||
});
|
||||
@@ -26,7 +26,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
const datetime = page.locator('ion-datetime');
|
||||
await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-time-date`));
|
||||
});
|
||||
@@ -37,7 +37,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
const datetime = page.locator('ion-datetime');
|
||||
await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-time`));
|
||||
});
|
||||
@@ -48,7 +48,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
const datetime = page.locator('ion-datetime');
|
||||
await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-date`));
|
||||
});
|
||||
@@ -69,7 +69,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
const datetime = page.locator('ion-datetime');
|
||||
await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-cover-date-time`));
|
||||
});
|
||||
@@ -80,7 +80,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
const datetime = page.locator('ion-datetime');
|
||||
await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-cover-time-date`));
|
||||
});
|
||||
@@ -91,7 +91,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
const datetime = page.locator('ion-datetime');
|
||||
await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-cover-time`));
|
||||
});
|
||||
@@ -102,7 +102,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
const datetime = page.locator('ion-datetime');
|
||||
await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-cover-date`));
|
||||
});
|
||||
@@ -119,7 +119,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
test('month selection should work after changing presentation', async ({ page }) => {
|
||||
await page.goto('/src/components/datetime/test/display', config);
|
||||
const ionWorkingPartsDidChange = await page.spyOnEvent('ionWorkingPartsDidChange');
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const select = page.locator('select#presentation');
|
||||
|
||||
|
||||
@@ -95,7 +95,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const datetimeButtons = page.locator('ion-datetime .calendar-day:not([disabled])');
|
||||
|
||||
@@ -111,7 +111,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const datetimeYear = page.locator('ion-datetime .year-column .picker-item[data-value="2022"]');
|
||||
|
||||
@@ -147,7 +147,7 @@ class DatetimeLocaleFixture {
|
||||
|
||||
this.datetime = this.page.locator('ion-datetime');
|
||||
|
||||
await this.page.waitForSelector('.datetime-ready');
|
||||
await this.page.locator('.datetime-ready').waitFor();
|
||||
}
|
||||
|
||||
async expectLocalizedDatePicker(screenshot: ScreenshotFn) {
|
||||
|
||||
@@ -36,7 +36,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const prevButton = page.locator('ion-datetime .calendar-next-prev ion-button:nth-child(1)');
|
||||
const nextButton = page.locator('ion-datetime .calendar-next-prev ion-button:nth-child(2)');
|
||||
@@ -61,7 +61,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
|
||||
await page.goto('/src/components/datetime/test/minmax', config);
|
||||
const calendarMonths = page.locator('ion-datetime#inside .calendar-month');
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').first().waitFor();
|
||||
|
||||
await expect(calendarMonths.nth(0)).not.toHaveClass(/calendar-month-disabled/);
|
||||
await expect(calendarMonths.nth(1)).not.toHaveClass(/calendar-month-disabled/);
|
||||
@@ -70,7 +70,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
|
||||
|
||||
test('datetime: minmax navigation disabled', async ({ page }) => {
|
||||
await page.goto('/src/components/datetime/test/minmax', config);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').first().waitFor();
|
||||
|
||||
const navButtons = page.locator('ion-datetime#outside .calendar-next-prev ion-button');
|
||||
|
||||
@@ -80,7 +80,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
|
||||
|
||||
test('datetime: min including day should not disable month', async ({ page }) => {
|
||||
await page.goto('/src/components/datetime/test/minmax', config);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').first().waitFor();
|
||||
|
||||
const calendarMonths = page.locator('ion-datetime#min-with-day .calendar-month');
|
||||
|
||||
@@ -102,7 +102,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
|
||||
|
||||
@@ -124,7 +124,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
|
||||
test.describe('setting value outside bounds should show in-bounds month', () => {
|
||||
const testDisplayedMonth = async (page: E2EPage, content: string, expectedString = /June 2021/) => {
|
||||
await page.setContent(content, config);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
|
||||
await expect(calendarMonthYear).toHaveText(expectedString);
|
||||
@@ -174,7 +174,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const datetimeMonthDidChange = await page.spyOnEvent('datetimeMonthDidChange');
|
||||
const eventButton = page.locator('button#bind');
|
||||
@@ -260,7 +260,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
const ionChange = await page.spyOnEvent('ionChange');
|
||||
@@ -283,7 +283,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
const ionChange = await page.spyOnEvent('ionChange');
|
||||
@@ -311,7 +311,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
|
||||
const monthColumnItems = page.locator('ion-datetime .month-column .picker-item:not(.picker-item-empty)');
|
||||
const ionChange = await page.spyOnEvent('ionChange');
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await monthColumnItems.nth(0).click(); // switch to January
|
||||
await ionChange.next();
|
||||
@@ -346,7 +346,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
// Select Jan 10, 2022
|
||||
const maxDate = page.locator('ion-datetime .calendar-day[data-day="10"][data-month="1"][data-year="2022"]');
|
||||
|
||||
@@ -8,7 +8,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
test.describe(title('datetime: month-year picker'), () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/src/components/datetime/test/month-year-picker', config);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').first().waitFor();
|
||||
});
|
||||
|
||||
test('should hide the footer when picker is open', async ({ page }) => {
|
||||
|
||||
@@ -62,7 +62,7 @@ class DatetimeMultipleFixture {
|
||||
);
|
||||
|
||||
this.datetime = this.page.locator('ion-datetime');
|
||||
await this.page.waitForSelector('.datetime-ready');
|
||||
await this.page.locator('.datetime-ready').waitFor();
|
||||
|
||||
return this.datetime;
|
||||
}
|
||||
@@ -304,7 +304,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector(`.datetime-ready`);
|
||||
await page.locator(`.datetime-ready`).waitFor();
|
||||
const datetime = page.locator('ion-datetime');
|
||||
const header = datetime.locator('.datetime-selected-date');
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
await openDateTimeBtn.click();
|
||||
|
||||
await ionPopoverDidPresent.next();
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page).toHaveScreenshot(screenshot(`datetime-position-base`));
|
||||
|
||||
|
||||
@@ -23,7 +23,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page).toHaveScreenshot(screenshot(`datetime-wheel-date-diff`));
|
||||
});
|
||||
@@ -34,7 +34,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page).toHaveScreenshot(screenshot(`datetime-wheel-date-time-diff`));
|
||||
});
|
||||
@@ -45,7 +45,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page).toHaveScreenshot(screenshot(`datetime-wheel-time-date-diff`));
|
||||
});
|
||||
@@ -56,7 +56,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
|
||||
@@ -80,7 +80,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const dayValues = page.locator('ion-datetime .day-column .picker-item[data-value]');
|
||||
expect(await dayValues.count()).toEqual(27);
|
||||
@@ -93,7 +93,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const dayValues = page.locator('ion-datetime .day-column .picker-item[data-value]');
|
||||
expect(await dayValues.count()).toEqual(1);
|
||||
@@ -116,7 +116,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const disabledMonths = page.locator('.month-column .picker-item[disabled]');
|
||||
const disabledYears = page.locator('.year-column .picker-item[disabled]');
|
||||
@@ -141,7 +141,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const monthValues = page.locator('.month-column .picker-item:not(.picker-item-empty)');
|
||||
const yearValues = page.locator('.year-column .picker-item:not(.picker-item-empty)');
|
||||
@@ -175,7 +175,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const ionChange = await page.spyOnEvent('ionChange');
|
||||
const monthValues = page.locator('.month-column .picker-item:not(.picker-item-empty)');
|
||||
@@ -209,7 +209,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const ionChange = await page.spyOnEvent('ionChange');
|
||||
const dayValues = page.locator('.day-column .picker-item:not(.picker-item-empty)');
|
||||
@@ -230,7 +230,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const ionChange = await page.spyOnEvent('ionChange');
|
||||
const yearValues = page.locator('.year-column .picker-item:not(.picker-item-empty)');
|
||||
@@ -253,7 +253,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
const datetime = page.locator('ion-datetime');
|
||||
|
||||
await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.value = '2021-05-25T12:40:00.000Z'));
|
||||
@@ -285,7 +285,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const monthValues = page.locator('.month-column .picker-item:not(.picker-item-empty)');
|
||||
const dayValues = page.locator('.day-column .picker-item:not(.picker-item-empty)');
|
||||
@@ -306,7 +306,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const columns = page.locator('ion-picker-column-internal');
|
||||
|
||||
@@ -327,7 +327,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const columns = page.locator('ion-picker-column-internal');
|
||||
|
||||
@@ -346,7 +346,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
|
||||
expect(await dayValues.count()).toEqual(57);
|
||||
@@ -359,7 +359,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
|
||||
expect(await dayValues.count()).toEqual(41);
|
||||
@@ -382,7 +382,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const disabledDates = page.locator('.date-column .picker-item[disabled]');
|
||||
|
||||
@@ -403,7 +403,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
|
||||
|
||||
@@ -424,7 +424,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
|
||||
|
||||
@@ -444,7 +444,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const dateColumn = page.locator('.date-column');
|
||||
const dateValues = dateColumn.locator('.picker-item:not(.picker-item-empty)');
|
||||
@@ -474,7 +474,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
|
||||
|
||||
@@ -494,7 +494,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
|
||||
|
||||
@@ -511,7 +511,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const ionChange = await page.spyOnEvent('ionChange');
|
||||
const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
|
||||
@@ -531,7 +531,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
|
||||
expect(await dayValues.count()).toEqual(57);
|
||||
@@ -544,7 +544,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
|
||||
expect(await dayValues.count()).toEqual(41);
|
||||
@@ -567,7 +567,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const disabledDates = page.locator('.date-column .picker-item[disabled]');
|
||||
|
||||
@@ -588,7 +588,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
|
||||
|
||||
@@ -609,7 +609,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
|
||||
|
||||
@@ -629,7 +629,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const dateColumn = page.locator('.date-column');
|
||||
const dateValues = dateColumn.locator('.picker-item:not(.picker-item-empty)');
|
||||
@@ -659,7 +659,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
|
||||
|
||||
@@ -679,7 +679,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
|
||||
|
||||
|
||||
@@ -117,7 +117,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
const monthYearButton = page.locator('ion-datetime .calendar-month-year');
|
||||
@@ -189,7 +189,7 @@ class DatetimePresentationFixture {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await this.page.waitForSelector('.datetime-ready');
|
||||
await this.page.locator('.datetime-ready').waitFor();
|
||||
this.datetime = this.page.locator('ion-datetime');
|
||||
}
|
||||
|
||||
@@ -214,7 +214,7 @@ class TimePickerFixture {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await this.page.waitForSelector('.datetime-ready');
|
||||
await this.page.locator('.datetime-ready').waitFor();
|
||||
this.timePicker = this.page.locator('ion-datetime');
|
||||
}
|
||||
|
||||
|
||||
@@ -27,7 +27,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const febFirstButton = page.locator(`.calendar-day[data-day='1'][data-month='2']`);
|
||||
|
||||
@@ -43,7 +43,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
|
||||
);
|
||||
|
||||
const ionChange = await page.spyOnEvent('ionChange');
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
|
||||
await expect(calendarMonthYear).toHaveText('February 2022');
|
||||
|
||||
@@ -66,7 +66,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
|
||||
|
||||
const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
|
||||
const monthYearButton = page.locator('.calendar-month-year ion-item');
|
||||
await expect(calendarMonthYear).toHaveText('February 2022');
|
||||
@@ -157,7 +157,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const clearButton = page.locator('#clear-button button');
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
test.describe(title('datetime: set-value'), () => {
|
||||
test('should update the active date when value is initially set', async ({ page }) => {
|
||||
await page.goto('/src/components/datetime/test/set-value', config);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.value = '2021-11-25T12:40:00.000Z'));
|
||||
@@ -18,7 +18,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
|
||||
test('should update the active time when value is initially set', async ({ page }) => {
|
||||
await page.goto('/src/components/datetime/test/set-value', config);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.value = '2021-11-25T12:40:00.000Z'));
|
||||
@@ -37,7 +37,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
const activeDayButton = page.locator('.calendar-day-active');
|
||||
@@ -53,7 +53,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
|
||||
test('should scroll to new month when value is initially set and then updated', async ({ page }) => {
|
||||
await page.goto('/src/components/datetime/test/set-value', config);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.value = '2021-05-25T12:40:00.000Z'));
|
||||
|
||||
@@ -10,7 +10,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const timeLabel = page.locator('ion-datetime .time-header');
|
||||
await expect(timeLabel).toHaveText('Time');
|
||||
@@ -22,7 +22,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const timeLabel = page.locator('ion-datetime .time-header');
|
||||
await expect(timeLabel).toHaveText('');
|
||||
|
||||
@@ -10,7 +10,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const items = page.locator('.calendar-day:not([disabled])');
|
||||
|
||||
@@ -91,7 +91,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const minuteItems = page.locator(
|
||||
'ion-picker-column-internal:nth-of-type(2) .picker-item:not(.picker-item-empty)'
|
||||
@@ -137,7 +137,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const monthItems = page.locator('.month-column .picker-item:not(.picker-item-empty)');
|
||||
await expect(monthItems).toHaveText(['January']);
|
||||
@@ -169,7 +169,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const todayButton = page.locator('.calendar-day[data-day="10"][data-month="10"][data-year="2022"]');
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
|
||||
await content.evaluate(async (el: HTMLIonContentElement) => {
|
||||
await el.scrollToBottom();
|
||||
});
|
||||
await page.waitForSelector('#largeTitleHeader.header-collapse-condense-inactive');
|
||||
await page.locator('#largeTitleHeader.header-collapse-condense-inactive').waitFor();
|
||||
|
||||
await expect(smallTitleHeader).toHaveScreenshot(screenshot(`header-condense-large-title-collapsed-diff`));
|
||||
|
||||
@@ -30,7 +30,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
|
||||
await content.evaluate(async (el: HTMLIonContentElement) => {
|
||||
await el.scrollToTop();
|
||||
});
|
||||
await page.waitForSelector('#smallTitleHeader.header-collapse-condense-inactive');
|
||||
await page.locator('#smallTitleHeader.header-collapse-condense-inactive').waitFor();
|
||||
|
||||
await expect(smallTitleHeader).toHaveAttribute('aria-hidden', 'true');
|
||||
});
|
||||
|
||||
@@ -51,15 +51,6 @@
|
||||
* @prop --highlight-color-valid: The color of the highlight on the item when valid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax.
|
||||
* @prop --highlight-color-invalid: The color of the highlight on the item when invalid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax.
|
||||
*/
|
||||
|
||||
/**
|
||||
* We change the minimum width as the
|
||||
* font size changes. Using a fixed minimum
|
||||
* width means that fewer and fewer characters
|
||||
* can be displayed in the same space as the
|
||||
* text grows.
|
||||
*/
|
||||
--inner-min-width: 4rem;
|
||||
--border-radius: 0px;
|
||||
--border-width: 0px;
|
||||
--border-style: solid;
|
||||
@@ -230,11 +221,6 @@
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
// Flex wrap is required here in order to wrap
|
||||
// the start slot + .item-inner content that
|
||||
// doesn't fit on the same line
|
||||
flex-wrap: wrap;
|
||||
|
||||
align-items: inherit;
|
||||
justify-content: inherit;
|
||||
|
||||
@@ -258,11 +244,6 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// TODO(FW-5289): remove
|
||||
:host(.item-legacy) .item-native {
|
||||
flex-wrap: unset;
|
||||
}
|
||||
|
||||
.item-native::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
@@ -307,34 +288,13 @@ button, a {
|
||||
// This is required to work with an inset highlight
|
||||
position: relative;
|
||||
|
||||
// This flex property is required in order to make
|
||||
// the elements wrap when there is a slotted start
|
||||
// element and a label
|
||||
flex: 1 0 0;
|
||||
flex: 1;
|
||||
|
||||
flex-direction: inherit;
|
||||
|
||||
// Flex wrap is required here in order to wrap
|
||||
// .input-wrapper content + the end slot that
|
||||
// doesn't fit on the same line
|
||||
flex-wrap: wrap;
|
||||
|
||||
align-items: inherit;
|
||||
align-self: stretch;
|
||||
|
||||
/**
|
||||
* The min-width defines when the
|
||||
* content in the default slot should
|
||||
* stop wrapping/truncating within its own
|
||||
* container. At this point the entire
|
||||
* container will wrap to the next line.
|
||||
*/
|
||||
min-width: var(--inner-min-width);
|
||||
|
||||
// Max width must be set to 100%, otherwise the
|
||||
// elements will overflow this container instead
|
||||
// of wrapping
|
||||
max-width: 100%;
|
||||
min-height: inherit;
|
||||
|
||||
border-width: var(--inner-border-width);
|
||||
@@ -346,15 +306,6 @@ button, a {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// TODO(FW-5289): remove
|
||||
:host(.item-legacy) .item-inner {
|
||||
flex: 1;
|
||||
|
||||
flex-wrap: unset;
|
||||
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
// Item Bottom
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -448,38 +399,19 @@ button, a {
|
||||
// This flex property is required in order to keep
|
||||
// the label from shrinking when there are wide
|
||||
// elements next to it
|
||||
flex: 1 0 auto;
|
||||
flex: 1;
|
||||
|
||||
flex-direction: inherit;
|
||||
|
||||
// Flex wrap is required here in order to wrap
|
||||
// content in the default slot (such as a label
|
||||
// and a button) that doesn't fit on the same line
|
||||
flex-wrap: wrap;
|
||||
|
||||
align-items: inherit;
|
||||
align-self: stretch;
|
||||
|
||||
// Max width must be set to 100%, otherwise the
|
||||
// elements will overflow this container instead
|
||||
// of wrapping
|
||||
max-width: 100%;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
|
||||
overflow: inherit;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// TODO(FW-5289): remove
|
||||
:host(.item-legacy) .input-wrapper {
|
||||
flex: 1;
|
||||
|
||||
flex-wrap: unset;
|
||||
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
:host(.item-label-stacked),
|
||||
:host(.item-label-floating) {
|
||||
align-items: start;
|
||||
|
||||
@@ -150,6 +150,12 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
|
||||
|
||||
@State() counterString: string | null | undefined;
|
||||
|
||||
@Watch('button')
|
||||
buttonChanged() {
|
||||
// Update the focusable option when the button option is changed
|
||||
this.focusable = this.isFocusable();
|
||||
}
|
||||
|
||||
@Watch('counterFormatter')
|
||||
counterFormatterChanged() {
|
||||
this.updateCounterOutput(this.getFirstInput());
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 39 KiB |
22
core/src/components/item/test/item.spec.tsx
Normal file
22
core/src/components/item/test/item.spec.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import { h } from '@stencil/core';
|
||||
import { newSpecPage } from '@stencil/core/testing';
|
||||
|
||||
import { Item } from '../item';
|
||||
|
||||
describe('item', () => {
|
||||
it('should change focusable option after switching button option status', async () => {
|
||||
const page = await newSpecPage({
|
||||
components: [Item],
|
||||
template: () => <ion-item button={false}></ion-item>,
|
||||
});
|
||||
|
||||
const item = page.body.querySelector('ion-item')!;
|
||||
// Change button attribute to true
|
||||
item.setAttribute('button', 'true');
|
||||
|
||||
await page.waitForChanges();
|
||||
|
||||
// Check if it has the expected class that gives the highlight style to .item-highlight element
|
||||
expect(item).toHaveClass('ion-focusable');
|
||||
});
|
||||
});
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 193 KiB After Width: | Height: | Size: 196 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 230 KiB After Width: | Height: | Size: 238 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 167 KiB After Width: | Height: | Size: 170 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 194 KiB After Width: | Height: | Size: 198 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 234 KiB After Width: | Height: | Size: 239 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 168 KiB After Width: | Height: | Size: 171 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 20 KiB |
@@ -15,7 +15,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
|
||||
await ionModalDidDismiss.next();
|
||||
|
||||
await page.waitForSelector('ion-modal', { state: 'detached' });
|
||||
await page.locator('ion-modal').waitFor({ state: 'detached' });
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -72,33 +72,33 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<ion-note slot="start">Really really long note</ion-note>
|
||||
<ion-note slot="start">123</ion-note>
|
||||
<ion-label>Label</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Label</ion-label>
|
||||
<ion-note slot="end">Really really long note</ion-note>
|
||||
<ion-note slot="end">123</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-note slot="start">Note</ion-note>
|
||||
<ion-note slot="start">123</ion-note>
|
||||
<ion-label>Really really long label</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Really really long label</ion-label>
|
||||
<ion-note slot="end">Note</ion-note>
|
||||
<ion-note slot="end">123</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-note slot="start">Really really long note</ion-note>
|
||||
<ion-note slot="start">123</ion-note>
|
||||
<ion-label>Really really long label</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Really really long label</ion-label>
|
||||
<ion-note slot="end">Really really long note</ion-note>
|
||||
<ion-note slot="end">123</ion-note>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
`,
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 78 KiB After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 42 KiB |
@@ -14,7 +14,7 @@ import { dragElementByYAxis } from '@utils/test/playwright';
|
||||
const pullToRefresh = async (page: E2EPage, selector = 'body') => {
|
||||
const target = page.locator(selector);
|
||||
|
||||
await page.waitForSelector('ion-refresher.hydrated', { state: 'attached' });
|
||||
await page.locator('ion-refresher.hydrated').waitFor({ state: 'attached' });
|
||||
|
||||
const ev = await page.spyOnEvent('ionRefreshComplete');
|
||||
|
||||
|
||||
@@ -29,7 +29,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
}
|
||||
|
||||
// Waits for the ripple effect to be added
|
||||
await page.waitForSelector('.ion-activated');
|
||||
await page.locator('.ion-activated').waitFor();
|
||||
|
||||
await expect(el).toHaveClass(/ion-activated/);
|
||||
});
|
||||
@@ -56,7 +56,7 @@ const verifyRippleEffect = async (page: E2EPage, config: E2EPageOptions, selecto
|
||||
await page.mouse.down();
|
||||
}
|
||||
|
||||
await page.waitForSelector('.ion-activated');
|
||||
await page.locator('.ion-activated').waitFor();
|
||||
|
||||
await expect(el).toHaveClass(/ion-activated/);
|
||||
};
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import type { AnimationBuilder, Color, Mode } from '../../interface';
|
||||
import type { AnimationBuilder, Color, LiteralUnion, Mode } from '../../interface';
|
||||
import type { IonicSafeString } from '../../utils/sanitization';
|
||||
|
||||
export interface ToastOptions {
|
||||
@@ -33,8 +33,7 @@ export interface ToastButton {
|
||||
text?: string;
|
||||
icon?: string;
|
||||
side?: 'start' | 'end';
|
||||
role?: 'cancel' | string;
|
||||
|
||||
role?: LiteralUnion<'cancel', string>;
|
||||
/**
|
||||
* @deprecated Use the toast button's CSS Shadow Parts instead.
|
||||
*/
|
||||
|
||||
2
core/src/interface.d.ts
vendored
2
core/src/interface.d.ts
vendored
@@ -131,7 +131,7 @@ export type PredefinedColors =
|
||||
| 'medium'
|
||||
| 'dark';
|
||||
|
||||
type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
|
||||
export type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
|
||||
|
||||
export type Color = LiteralUnion<PredefinedColors, string>;
|
||||
export type Mode = 'ios' | 'md';
|
||||
|
||||
12
packages/angular-server/package-lock.json
generated
12
packages/angular-server/package-lock.json
generated
@@ -1060,9 +1060,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@ionic/core": {
|
||||
"version": "7.6.5",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.5.tgz",
|
||||
"integrity": "sha512-koyPrPMTZ8ZbB9O0VN4KaX9yIMCXQTi2bGTGYUvOoboyx/TaXshi4wX1POII5E80TW2I1HH5YIGq8ZaFAOot/Q==",
|
||||
"version": "7.6.6",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz",
|
||||
"integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==",
|
||||
"dependencies": {
|
||||
"@stencil/core": "^4.10.0",
|
||||
"ionicons": "^7.2.2",
|
||||
@@ -7330,9 +7330,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"@ionic/core": {
|
||||
"version": "7.6.5",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.5.tgz",
|
||||
"integrity": "sha512-koyPrPMTZ8ZbB9O0VN4KaX9yIMCXQTi2bGTGYUvOoboyx/TaXshi4wX1POII5E80TW2I1HH5YIGq8ZaFAOot/Q==",
|
||||
"version": "7.6.6",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz",
|
||||
"integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==",
|
||||
"requires": {
|
||||
"@stencil/core": "^4.10.0",
|
||||
"ionicons": "^7.2.2",
|
||||
|
||||
12
packages/angular/package-lock.json
generated
12
packages/angular/package-lock.json
generated
@@ -1407,9 +1407,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@ionic/core": {
|
||||
"version": "7.6.5",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.5.tgz",
|
||||
"integrity": "sha512-koyPrPMTZ8ZbB9O0VN4KaX9yIMCXQTi2bGTGYUvOoboyx/TaXshi4wX1POII5E80TW2I1HH5YIGq8ZaFAOot/Q==",
|
||||
"version": "7.6.6",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz",
|
||||
"integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==",
|
||||
"dependencies": {
|
||||
"@stencil/core": "^4.10.0",
|
||||
"ionicons": "^7.2.2",
|
||||
@@ -9697,9 +9697,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"@ionic/core": {
|
||||
"version": "7.6.5",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.5.tgz",
|
||||
"integrity": "sha512-koyPrPMTZ8ZbB9O0VN4KaX9yIMCXQTi2bGTGYUvOoboyx/TaXshi4wX1POII5E80TW2I1HH5YIGq8ZaFAOot/Q==",
|
||||
"version": "7.6.6",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz",
|
||||
"integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==",
|
||||
"requires": {
|
||||
"@stencil/core": "^4.10.0",
|
||||
"ionicons": "^7.2.2",
|
||||
|
||||
@@ -26,7 +26,6 @@
|
||||
"scripts": {
|
||||
"build": "npm run clean && npm run build.ng && npm run build.core && npm run clean-generated",
|
||||
"build.core": "node scripts/build-core.js",
|
||||
"build.link": "npm run build && node scripts/link-copy.js",
|
||||
"build.ng": "ng-packagr -p ng-package.json -c tsconfig.json",
|
||||
"build.watch": "npm run build.ng -- --watch",
|
||||
"clean": "node scripts/clean.js",
|
||||
|
||||
@@ -1,21 +0,0 @@
|
||||
# Local @ionic/angular test/testapp development
|
||||
|
||||
1. `npm install` at the root of `angular`
|
||||
2. `npm run build.dev` to build local `@ionic/angular` and `@ionic/core`
|
||||
3. `cd test/testapp` to the test app
|
||||
4. `npm install` in the test app directory
|
||||
5. `npm run serve` copies packages and serve the app (see package.json for more options)
|
||||
6. [http://localhost:4200/](http://localhost:4200/)
|
||||
|
||||
|
||||
# npm link local development
|
||||
|
||||
`npm link` doesn't work as expected due to the `devDependency` on `@angular/core`. This is the work around...
|
||||
|
||||
npm run build.link ../ionic-conference-app
|
||||
|
||||
When the command above is ran from the `angular` directory, it will build `@ionic/angular` and copy the `dist` directory to the correct location of another local project. In the example above, the end result is that it copies the `dist` directory to `../ionic-conference-app/node_modules/@ionic/angular/dist`. The path given should be relative to the root of this mono repo.
|
||||
|
||||
## package.json note
|
||||
|
||||
The `package.json` file in this directory references __Ionic 3__ and is in here to get GitHub to properly show the Used By counts on the repo. __Do not remove it!__
|
||||
40
packages/angular/scripts/link-copy.js
vendored
40
packages/angular/scripts/link-copy.js
vendored
@@ -1,40 +0,0 @@
|
||||
const fs = require('fs-extra');
|
||||
const path = require('path');
|
||||
|
||||
|
||||
let prjDir = process.argv[2];
|
||||
if (!prjDir) {
|
||||
throw new Error('local path required as last argument to "npm run build.link" command');
|
||||
}
|
||||
prjDir = path.join(__dirname, '../../../', prjDir);
|
||||
|
||||
copyPackage(prjDir, 'angular');
|
||||
copyPackage(prjDir, 'core');
|
||||
|
||||
|
||||
function copyPackage(prjDir, pkgName) {
|
||||
const prjDest = path.join(prjDir, 'node_modules', '@ionic', pkgName);
|
||||
|
||||
const pkgSrcDir = path.join(__dirname, '..', '..', pkgName);
|
||||
const pkgSrcDist = path.join(pkgSrcDir, 'dist');
|
||||
const pkgJsonPath = path.join(pkgSrcDir, 'package.json');
|
||||
const pkgJson = require(pkgJsonPath);
|
||||
|
||||
// make sure this local project exists
|
||||
fs.emptyDirSync(prjDest);
|
||||
|
||||
pkgJson.files.push('package.json');
|
||||
|
||||
pkgJson.files.forEach(f => {
|
||||
const src = path.join(pkgSrcDir, f);
|
||||
const dest = path.join(prjDest, f);
|
||||
|
||||
console.log('copying:', src, 'to', dest);
|
||||
fs.copySync(src, dest);
|
||||
});
|
||||
|
||||
const prjReadme = path.join(prjDest, 'README.md');
|
||||
console.log('readme:', prjReadme);
|
||||
|
||||
fs.writeFileSync(prjReadme, '@ionic/' + pkgName + ' copied from ' + pkgSrcDir + ', ' + new Date());
|
||||
}
|
||||
40
packages/react-router/package-lock.json
generated
40
packages/react-router/package-lock.json
generated
@@ -238,9 +238,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@ionic/core": {
|
||||
"version": "7.6.5",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.5.tgz",
|
||||
"integrity": "sha512-koyPrPMTZ8ZbB9O0VN4KaX9yIMCXQTi2bGTGYUvOoboyx/TaXshi4wX1POII5E80TW2I1HH5YIGq8ZaFAOot/Q==",
|
||||
"version": "7.6.6",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz",
|
||||
"integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==",
|
||||
"dependencies": {
|
||||
"@stencil/core": "^4.10.0",
|
||||
"ionicons": "^7.2.2",
|
||||
@@ -414,11 +414,11 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@ionic/react": {
|
||||
"version": "7.6.5",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.6.5.tgz",
|
||||
"integrity": "sha512-2CEkEfv0M7kICLZ5bb4HE9bhuM/OSXx7tToDqci1LViP2vkwhooejiHM3oon3UBuv0wXU9zdNoLNnIDsdKXxHw==",
|
||||
"version": "7.6.6",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.6.6.tgz",
|
||||
"integrity": "sha512-3J18wUMMGBS2jkTwBRWYpkXvhFYpBcLqKF9nq/9aJL55GtFbu3uAnvM8Km3LkQUYqk4ddpGQr5bvzTvhYcxMMQ==",
|
||||
"dependencies": {
|
||||
"@ionic/core": "7.6.5",
|
||||
"@ionic/core": "7.6.6",
|
||||
"ionicons": "^7.0.0",
|
||||
"tslib": "*"
|
||||
},
|
||||
@@ -667,9 +667,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@stencil/core": {
|
||||
"version": "4.10.0",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz",
|
||||
"integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w==",
|
||||
"version": "4.11.0",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.11.0.tgz",
|
||||
"integrity": "sha512-zsKhgIkTGo+s7IthitxR/MKiMS3Ck1yIypOdXr0aE6ofboKqe9NdffTcxZ0vel0wD2bZYOb6WfPMzuhRKk6+FA==",
|
||||
"bin": {
|
||||
"stencil": "bin/stencil"
|
||||
},
|
||||
@@ -4050,9 +4050,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"@ionic/core": {
|
||||
"version": "7.6.5",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.5.tgz",
|
||||
"integrity": "sha512-koyPrPMTZ8ZbB9O0VN4KaX9yIMCXQTi2bGTGYUvOoboyx/TaXshi4wX1POII5E80TW2I1HH5YIGq8ZaFAOot/Q==",
|
||||
"version": "7.6.6",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz",
|
||||
"integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==",
|
||||
"requires": {
|
||||
"@stencil/core": "^4.10.0",
|
||||
"ionicons": "^7.2.2",
|
||||
@@ -4156,11 +4156,11 @@
|
||||
"requires": {}
|
||||
},
|
||||
"@ionic/react": {
|
||||
"version": "7.6.5",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.6.5.tgz",
|
||||
"integrity": "sha512-2CEkEfv0M7kICLZ5bb4HE9bhuM/OSXx7tToDqci1LViP2vkwhooejiHM3oon3UBuv0wXU9zdNoLNnIDsdKXxHw==",
|
||||
"version": "7.6.6",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.6.6.tgz",
|
||||
"integrity": "sha512-3J18wUMMGBS2jkTwBRWYpkXvhFYpBcLqKF9nq/9aJL55GtFbu3uAnvM8Km3LkQUYqk4ddpGQr5bvzTvhYcxMMQ==",
|
||||
"requires": {
|
||||
"@ionic/core": "7.6.5",
|
||||
"@ionic/core": "7.6.6",
|
||||
"ionicons": "^7.0.0",
|
||||
"tslib": "*"
|
||||
}
|
||||
@@ -4297,9 +4297,9 @@
|
||||
"optional": true
|
||||
},
|
||||
"@stencil/core": {
|
||||
"version": "4.10.0",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz",
|
||||
"integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w=="
|
||||
"version": "4.11.0",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.11.0.tgz",
|
||||
"integrity": "sha512-zsKhgIkTGo+s7IthitxR/MKiMS3Ck1yIypOdXr0aE6ofboKqe9NdffTcxZ0vel0wD2bZYOb6WfPMzuhRKk6+FA=="
|
||||
},
|
||||
"@types/estree": {
|
||||
"version": "1.0.4",
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import typescript from '@rollup/plugin-typescript';
|
||||
const external = ['react', 'react-dom', 'react-router', 'react-router-dom', 'history', 'tslib'];
|
||||
|
||||
export default {
|
||||
input: 'src/index.ts',
|
||||
@@ -9,8 +10,8 @@ export default {
|
||||
sourcemap: true,
|
||||
}
|
||||
],
|
||||
external: (id) => !/^(\.|\/)/.test(id),
|
||||
plugins: [
|
||||
typescript(),
|
||||
],
|
||||
external: id => external.includes(id) || id.startsWith('@ionic/core') || id.startsWith('ionicons') || id.startsWith('@ionic/react'),
|
||||
};
|
||||
|
||||
12
packages/react/package-lock.json
generated
12
packages/react/package-lock.json
generated
@@ -811,9 +811,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@ionic/core": {
|
||||
"version": "7.6.5",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.5.tgz",
|
||||
"integrity": "sha512-koyPrPMTZ8ZbB9O0VN4KaX9yIMCXQTi2bGTGYUvOoboyx/TaXshi4wX1POII5E80TW2I1HH5YIGq8ZaFAOot/Q==",
|
||||
"version": "7.6.6",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz",
|
||||
"integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==",
|
||||
"dependencies": {
|
||||
"@stencil/core": "^4.10.0",
|
||||
"ionicons": "^7.2.2",
|
||||
@@ -12857,9 +12857,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"@ionic/core": {
|
||||
"version": "7.6.5",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.5.tgz",
|
||||
"integrity": "sha512-koyPrPMTZ8ZbB9O0VN4KaX9yIMCXQTi2bGTGYUvOoboyx/TaXshi4wX1POII5E80TW2I1HH5YIGq8ZaFAOot/Q==",
|
||||
"version": "7.6.6",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz",
|
||||
"integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==",
|
||||
"requires": {
|
||||
"@stencil/core": "^4.10.0",
|
||||
"ionicons": "^7.2.2",
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import typescript from '@rollup/plugin-typescript';
|
||||
const external = ['react', 'react-dom', 'react-router', 'react-router-dom', 'history', 'tslib'];
|
||||
|
||||
export default {
|
||||
input: 'src/index.ts',
|
||||
@@ -11,8 +12,8 @@ export default {
|
||||
sourcemap: true,
|
||||
}
|
||||
],
|
||||
external: (id) => !/^(\.|\/)/.test(id),
|
||||
plugins: [
|
||||
typescript(),
|
||||
],
|
||||
external: id => external.includes(id) || id.startsWith('@ionic/core') || id.startsWith('ionicons'),
|
||||
};
|
||||
|
||||
@@ -1,9 +1,4 @@
|
||||
/**
|
||||
* TODO: Skipping for now to avoid the CE build issue
|
||||
* where child components do not get registered.
|
||||
* Re-enable after this is resolved in Stencil 2.9.
|
||||
*/
|
||||
describe.skip('IonPicker', () => {
|
||||
describe('IonPicker', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/overlay-components/picker');
|
||||
});
|
||||
|
||||
@@ -1,10 +1,4 @@
|
||||
/**
|
||||
* TODO: Skipping for now to avoid the CE build issue
|
||||
* where child components do not get registered.
|
||||
* Re-enable after this is resolved in Stencil 2.9.
|
||||
*/
|
||||
|
||||
describe.skip('useIonPicker', () => {
|
||||
describe('useIonPicker', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/overlay-hooks/picker');
|
||||
});
|
||||
|
||||
40
packages/vue-router/package-lock.json
generated
40
packages/vue-router/package-lock.json
generated
@@ -661,9 +661,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@ionic/core": {
|
||||
"version": "7.6.5",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.5.tgz",
|
||||
"integrity": "sha512-koyPrPMTZ8ZbB9O0VN4KaX9yIMCXQTi2bGTGYUvOoboyx/TaXshi4wX1POII5E80TW2I1HH5YIGq8ZaFAOot/Q==",
|
||||
"version": "7.6.6",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz",
|
||||
"integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==",
|
||||
"dependencies": {
|
||||
"@stencil/core": "^4.10.0",
|
||||
"ionicons": "^7.2.2",
|
||||
@@ -852,11 +852,11 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@ionic/vue": {
|
||||
"version": "7.6.5",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.6.5.tgz",
|
||||
"integrity": "sha512-JZw9IwPvnyZYF8SvT3dZrh1YpGqyHL6Q674XjBTKk+LSWQ9nc0FDmJn3SNt4r+WFH6fY9EaMCPOEN/NEz/ZXHQ==",
|
||||
"version": "7.6.6",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.6.6.tgz",
|
||||
"integrity": "sha512-Ct992mndUmyTKq2vBFX/3gFcyNW/QKScYydAvG0Jtl9fPHrMZ7fYj+Hk1OEuLQDbsBMH3gUXjUV0OV5pYABsEA==",
|
||||
"dependencies": {
|
||||
"@ionic/core": "7.6.5",
|
||||
"@ionic/core": "7.6.6",
|
||||
"ionicons": "^7.0.0"
|
||||
}
|
||||
},
|
||||
@@ -1508,9 +1508,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@stencil/core": {
|
||||
"version": "4.10.0",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz",
|
||||
"integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w==",
|
||||
"version": "4.11.0",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.11.0.tgz",
|
||||
"integrity": "sha512-zsKhgIkTGo+s7IthitxR/MKiMS3Ck1yIypOdXr0aE6ofboKqe9NdffTcxZ0vel0wD2bZYOb6WfPMzuhRKk6+FA==",
|
||||
"bin": {
|
||||
"stencil": "bin/stencil"
|
||||
},
|
||||
@@ -7878,9 +7878,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"@ionic/core": {
|
||||
"version": "7.6.5",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.5.tgz",
|
||||
"integrity": "sha512-koyPrPMTZ8ZbB9O0VN4KaX9yIMCXQTi2bGTGYUvOoboyx/TaXshi4wX1POII5E80TW2I1HH5YIGq8ZaFAOot/Q==",
|
||||
"version": "7.6.6",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz",
|
||||
"integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==",
|
||||
"requires": {
|
||||
"@stencil/core": "^4.10.0",
|
||||
"ionicons": "^7.2.2",
|
||||
@@ -7993,11 +7993,11 @@
|
||||
"requires": {}
|
||||
},
|
||||
"@ionic/vue": {
|
||||
"version": "7.6.5",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.6.5.tgz",
|
||||
"integrity": "sha512-JZw9IwPvnyZYF8SvT3dZrh1YpGqyHL6Q674XjBTKk+LSWQ9nc0FDmJn3SNt4r+WFH6fY9EaMCPOEN/NEz/ZXHQ==",
|
||||
"version": "7.6.6",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.6.6.tgz",
|
||||
"integrity": "sha512-Ct992mndUmyTKq2vBFX/3gFcyNW/QKScYydAvG0Jtl9fPHrMZ7fYj+Hk1OEuLQDbsBMH3gUXjUV0OV5pYABsEA==",
|
||||
"requires": {
|
||||
"@ionic/core": "7.6.5",
|
||||
"@ionic/core": "7.6.6",
|
||||
"ionicons": "^7.0.0"
|
||||
}
|
||||
},
|
||||
@@ -8461,9 +8461,9 @@
|
||||
}
|
||||
},
|
||||
"@stencil/core": {
|
||||
"version": "4.10.0",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz",
|
||||
"integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w=="
|
||||
"version": "4.11.0",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.11.0.tgz",
|
||||
"integrity": "sha512-zsKhgIkTGo+s7IthitxR/MKiMS3Ck1yIypOdXr0aE6ofboKqe9NdffTcxZ0vel0wD2bZYOb6WfPMzuhRKk6+FA=="
|
||||
},
|
||||
"@tootallnate/once": {
|
||||
"version": "2.0.0",
|
||||
|
||||
12
packages/vue/package-lock.json
generated
12
packages/vue/package-lock.json
generated
@@ -208,9 +208,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@ionic/core": {
|
||||
"version": "7.6.5",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.5.tgz",
|
||||
"integrity": "sha512-koyPrPMTZ8ZbB9O0VN4KaX9yIMCXQTi2bGTGYUvOoboyx/TaXshi4wX1POII5E80TW2I1HH5YIGq8ZaFAOot/Q==",
|
||||
"version": "7.6.6",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz",
|
||||
"integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==",
|
||||
"dependencies": {
|
||||
"@stencil/core": "^4.10.0",
|
||||
"ionicons": "^7.2.2",
|
||||
@@ -3959,9 +3959,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"@ionic/core": {
|
||||
"version": "7.6.5",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.5.tgz",
|
||||
"integrity": "sha512-koyPrPMTZ8ZbB9O0VN4KaX9yIMCXQTi2bGTGYUvOoboyx/TaXshi4wX1POII5E80TW2I1HH5YIGq8ZaFAOot/Q==",
|
||||
"version": "7.6.6",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz",
|
||||
"integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==",
|
||||
"requires": {
|
||||
"@stencil/core": "^4.10.0",
|
||||
"ionicons": "^7.2.2",
|
||||
|
||||
Reference in New Issue
Block a user