mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
Compare commits
50 Commits
v7.6.6
...
strength-i
| Author | SHA1 | Date | |
|---|---|---|---|
|
243cf92600 | ||
|
|
1ca9aa5246 | ||
|
|
e833ad4649 | ||
|
|
f885a5526a | ||
|
|
0a8964d30c | ||
|
|
b03dac0870 | ||
|
|
a0afeeb50e | ||
|
|
66fcb70151 | ||
|
|
7449fb4fed | ||
|
|
5777ce2581 | ||
|
|
35ab6b4816 | ||
|
|
51c729eafc | ||
|
|
7f3273f0b2 | ||
|
|
e62ec509a3 | ||
|
|
2150188d27 | ||
|
|
59543af4e9 | ||
|
|
7bb08f9ce4 | ||
|
|
e672805406 | ||
|
|
950fa40c55 | ||
|
|
551065fd9e | ||
|
|
d5dc901bb9 | ||
|
|
775841a397 | ||
|
|
c998f022ff | ||
|
|
fae7b24d2a | ||
|
|
1de5ff9302 | ||
|
|
eedafc394b | ||
|
|
7825eab925 | ||
|
|
219e630ed5 | ||
|
|
bf34e0e247 | ||
|
|
f6fc22bba6 | ||
|
|
e021eadb81 | ||
|
|
a1e7694490 | ||
|
|
07b987d034 | ||
|
|
58639c7a1e | ||
|
|
b1c4c72474 | ||
|
|
9448783bb1 | ||
|
|
720a3cea99 | ||
|
|
b81d85a401 | ||
|
|
aecbc92e30 | ||
|
|
bf7922c8b3 | ||
|
|
2a3c26e44d | ||
|
|
ddd8b92235 | ||
|
|
9a092c03cc | ||
|
|
a3ebca0f26 | ||
|
|
e10f49c43d | ||
|
|
e41a1a127b | ||
|
|
67bee73513 | ||
|
|
bb822b3ed0 | ||
|
|
e22c78d682 | ||
|
|
658d1caccd |
@@ -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
|
||||
2
.github/workflows/stencil-nightly.yml
vendored
2
.github/workflows/stencil-nightly.yml
vendored
@@ -150,7 +150,7 @@ jobs:
|
||||
strategy:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
apps: [ng12, ng13, ng14, ng15]
|
||||
apps: [ng16, ng17]
|
||||
needs: [build-angular, build-angular-server]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
|
||||
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
|
||||
|
||||
39
CHANGELOG.md
39
CHANGELOG.md
@@ -3,6 +3,45 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [7.7.1](https://github.com/ionic-team/ionic-framework/compare/v7.7.0...v7.7.1) (2024-02-07)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **action-sheet:** iOS dismiss animation respects safe area ([#28915](https://github.com/ionic-team/ionic-framework/issues/28915)) ([7449fb4](https://github.com/ionic-team/ionic-framework/commit/7449fb4fed4048f5d01ba068dc6f8e2d7727e95d)), closes [#28541](https://github.com/ionic-team/ionic-framework/issues/28541)
|
||||
* **overlays:** tear down animations after dismiss ([#28907](https://github.com/ionic-team/ionic-framework/issues/28907)) ([950fa40](https://github.com/ionic-team/ionic-framework/commit/950fa40c5597c81d5cbaeb9276b09adfea5e79fb)), closes [#28352](https://github.com/ionic-team/ionic-framework/issues/28352)
|
||||
* **react:** route with redirect will mount page ([#28961](https://github.com/ionic-team/ionic-framework/issues/28961)) ([5777ce2](https://github.com/ionic-team/ionic-framework/commit/5777ce258119d2715b1326cdc103bd4ad7612bd1)), closes [#28838](https://github.com/ionic-team/ionic-framework/issues/28838)
|
||||
* **select:** popover can be scrolled ([#28965](https://github.com/ionic-team/ionic-framework/issues/28965)) ([35ab6b4](https://github.com/ionic-team/ionic-framework/commit/35ab6b4816bd627239de8d8b25ce0c86db8c74b4)), closes [#28963](https://github.com/ionic-team/ionic-framework/issues/28963)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [7.7.0](https://github.com/ionic-team/ionic-framework/compare/v7.6.7...v7.7.0) (2024-01-31)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add experimental hardware back button support in browsers ([#28705](https://github.com/ionic-team/ionic-framework/issues/28705)) ([658d1ca](https://github.com/ionic-team/ionic-framework/commit/658d1caccd530350843b85c0e24544ec27dd9eb4)), closes [#28703](https://github.com/ionic-team/ionic-framework/issues/28703)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.6.7](https://github.com/ionic-team/ionic-framework/compare/v7.6.6...v7.6.7) (2024-01-31)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **accordion:** prevent opening of readonly accordion using keyboard ([#28865](https://github.com/ionic-team/ionic-framework/issues/28865)) ([e10f49c](https://github.com/ionic-team/ionic-framework/commit/e10f49c43daa11fe7deb5a9b9bfd34897542b6b1)), closes [#28344](https://github.com/ionic-team/ionic-framework/issues/28344)
|
||||
* **action-sheet, alert, toast:** button roles autocomplete with available options ([#27940](https://github.com/ionic-team/ionic-framework/issues/27940)) ([f6fc22b](https://github.com/ionic-team/ionic-framework/commit/f6fc22bba60388701b80a9421510e3d843d39e9e)), closes [#27965](https://github.com/ionic-team/ionic-framework/issues/27965)
|
||||
* **item:** ensure button focus state on property change ([#28892](https://github.com/ionic-team/ionic-framework/issues/28892)) ([bf7922c](https://github.com/ionic-team/ionic-framework/commit/bf7922c8b37b32dbf90650cb74a2e77bedf0c118)), closes [#28525](https://github.com/ionic-team/ionic-framework/issues/28525)
|
||||
* **item:** only default slot content wraps ([#28773](https://github.com/ionic-team/ionic-framework/issues/28773)) ([9448783](https://github.com/ionic-team/ionic-framework/commit/9448783bb19b187f867054c86d215e3dc97952c1)), closes [#28769](https://github.com/ionic-team/ionic-framework/issues/28769)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24)
|
||||
|
||||
|
||||
|
||||
@@ -3,6 +3,44 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [7.7.1](https://github.com/ionic-team/ionic-framework/compare/v7.7.0...v7.7.1) (2024-02-07)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **action-sheet:** iOS dismiss animation respects safe area ([#28915](https://github.com/ionic-team/ionic-framework/issues/28915)) ([7449fb4](https://github.com/ionic-team/ionic-framework/commit/7449fb4fed4048f5d01ba068dc6f8e2d7727e95d)), closes [#28541](https://github.com/ionic-team/ionic-framework/issues/28541)
|
||||
* **overlays:** tear down animations after dismiss ([#28907](https://github.com/ionic-team/ionic-framework/issues/28907)) ([950fa40](https://github.com/ionic-team/ionic-framework/commit/950fa40c5597c81d5cbaeb9276b09adfea5e79fb)), closes [#28352](https://github.com/ionic-team/ionic-framework/issues/28352)
|
||||
* **select:** popover can be scrolled ([#28965](https://github.com/ionic-team/ionic-framework/issues/28965)) ([35ab6b4](https://github.com/ionic-team/ionic-framework/commit/35ab6b4816bd627239de8d8b25ce0c86db8c74b4)), closes [#28963](https://github.com/ionic-team/ionic-framework/issues/28963)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [7.7.0](https://github.com/ionic-team/ionic-framework/compare/v7.6.7...v7.7.0) (2024-01-31)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add experimental hardware back button support in browsers ([#28705](https://github.com/ionic-team/ionic-framework/issues/28705)) ([658d1ca](https://github.com/ionic-team/ionic-framework/commit/658d1caccd530350843b85c0e24544ec27dd9eb4)), closes [#28703](https://github.com/ionic-team/ionic-framework/issues/28703)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.6.7](https://github.com/ionic-team/ionic-framework/compare/v7.6.6...v7.6.7) (2024-01-31)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **accordion:** prevent opening of readonly accordion using keyboard ([#28865](https://github.com/ionic-team/ionic-framework/issues/28865)) ([e10f49c](https://github.com/ionic-team/ionic-framework/commit/e10f49c43daa11fe7deb5a9b9bfd34897542b6b1)), closes [#28344](https://github.com/ionic-team/ionic-framework/issues/28344)
|
||||
* **action-sheet, alert, toast:** button roles autocomplete with available options ([#27940](https://github.com/ionic-team/ionic-framework/issues/27940)) ([f6fc22b](https://github.com/ionic-team/ionic-framework/commit/f6fc22bba60388701b80a9421510e3d843d39e9e)), closes [#27965](https://github.com/ionic-team/ionic-framework/issues/27965)
|
||||
* **item:** ensure button focus state on property change ([#28892](https://github.com/ionic-team/ionic-framework/issues/28892)) ([bf7922c](https://github.com/ionic-team/ionic-framework/commit/bf7922c8b37b32dbf90650cb74a2e77bedf0c118)), closes [#28525](https://github.com/ionic-team/ionic-framework/issues/28525)
|
||||
* **item:** only default slot content wraps ([#28773](https://github.com/ionic-team/ionic-framework/issues/28773)) ([9448783](https://github.com/ionic-team/ionic-framework/commit/9448783bb19b187f867054c86d215e3dc97952c1)), closes [#28769](https://github.com/ionic-team/ionic-framework/issues/28769)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24)
|
||||
|
||||
|
||||
|
||||
102
core/package-lock.json
generated
102
core/package-lock.json
generated
@@ -1,32 +1,32 @@
|
||||
{
|
||||
"name": "@ionic/core",
|
||||
"version": "7.6.6",
|
||||
"version": "7.7.1",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@ionic/core",
|
||||
"version": "7.6.6",
|
||||
"version": "7.7.1",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@stencil/core": "^4.10.0",
|
||||
"@stencil/core": "^4.12.1",
|
||||
"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/status-bar": "^5.0.6",
|
||||
"@capacitor/haptics": "^5.0.7",
|
||||
"@capacitor/keyboard": "^5.0.8",
|
||||
"@capacitor/status-bar": "^5.0.7",
|
||||
"@ionic/eslint-config": "^0.3.0",
|
||||
"@ionic/prettier-config": "^2.0.0",
|
||||
"@playwright/test": "^1.39.0",
|
||||
"@rollup/plugin-node-resolve": "^8.4.0",
|
||||
"@rollup/plugin-virtual": "^2.0.3",
|
||||
"@stencil/angular-output-target": "^0.8.3",
|
||||
"@stencil/angular-output-target": "^0.8.4",
|
||||
"@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"
|
||||
@@ -643,27 +643,27 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@capacitor/haptics": {
|
||||
"version": "5.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-5.0.6.tgz",
|
||||
"integrity": "sha512-UrMcR7p2X10ql4VLlowUuH/VckTeu0lj+RQpekxox14uxDmu5AGIFDK/iDTi8W6QZkxTJRZK6sbCjgwYgNJ7Pw==",
|
||||
"version": "5.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-5.0.7.tgz",
|
||||
"integrity": "sha512-/j+7Qa4BxQA5aOU43cwXuiudfSXfoHFsAVfcehH5DkSjxLykZKWHEuE4uFJXqdkSIbAHjS37D0Sde6ENP6G/MA==",
|
||||
"dev": true,
|
||||
"peerDependencies": {
|
||||
"@capacitor/core": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"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"
|
||||
}
|
||||
},
|
||||
"node_modules/@capacitor/status-bar": {
|
||||
"version": "5.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-5.0.6.tgz",
|
||||
"integrity": "sha512-7od8CxsBnot1XMK3IeOkproFL4hgoKoWAc3pwUvmDOkQsXoxwQm4SR9mLwQavv1XfxtHbFV9Ukd7FwMxOPSViw==",
|
||||
"version": "5.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-5.0.7.tgz",
|
||||
"integrity": "sha512-KblB3gV2LDMEjx3fQoNBAzxb+Tr+2mv68SfFLLDCMiMUD3Eile2TAWRWd1yxy496pDFTOs2BJtup8++iuuuJ/w==",
|
||||
"dev": true,
|
||||
"peerDependencies": {
|
||||
"@capacitor/core": "^5.0.0"
|
||||
@@ -1816,18 +1816,18 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@stencil/angular-output-target": {
|
||||
"version": "0.8.3",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.8.3.tgz",
|
||||
"integrity": "sha512-I/QO1sEx09WWUaNlA30EBhlXYftOSfSBTwYBwC65qlpHDIlD5WU3EAtKhU5IphfwhxnD63kvOoU1YvTUXFHNng==",
|
||||
"version": "0.8.4",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.8.4.tgz",
|
||||
"integrity": "sha512-QvmHTueXXs5vB9W2L12uEzFmAuR8sqATJV2b+SCFmYsjJSaymiSqR3dKo2wnr0tZiTgU1t16BWaUKiSh3wPXpw==",
|
||||
"dev": true,
|
||||
"peerDependencies": {
|
||||
"@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
|
||||
}
|
||||
},
|
||||
"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.1",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.1.tgz",
|
||||
"integrity": "sha512-l7UUCEV+4Yr1i6BL2DGSQPAzM3x/V4Fx9n9Z0/gdAgX11I25xY0MnH5jbQ69ug6ms/8KUV6SouS1R7MjjM/JnQ==",
|
||||
"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"
|
||||
@@ -11333,23 +11333,23 @@
|
||||
}
|
||||
},
|
||||
"@capacitor/haptics": {
|
||||
"version": "5.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-5.0.6.tgz",
|
||||
"integrity": "sha512-UrMcR7p2X10ql4VLlowUuH/VckTeu0lj+RQpekxox14uxDmu5AGIFDK/iDTi8W6QZkxTJRZK6sbCjgwYgNJ7Pw==",
|
||||
"version": "5.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-5.0.7.tgz",
|
||||
"integrity": "sha512-/j+7Qa4BxQA5aOU43cwXuiudfSXfoHFsAVfcehH5DkSjxLykZKWHEuE4uFJXqdkSIbAHjS37D0Sde6ENP6G/MA==",
|
||||
"dev": true,
|
||||
"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": {}
|
||||
},
|
||||
"@capacitor/status-bar": {
|
||||
"version": "5.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-5.0.6.tgz",
|
||||
"integrity": "sha512-7od8CxsBnot1XMK3IeOkproFL4hgoKoWAc3pwUvmDOkQsXoxwQm4SR9mLwQavv1XfxtHbFV9Ukd7FwMxOPSViw==",
|
||||
"version": "5.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-5.0.7.tgz",
|
||||
"integrity": "sha512-KblB3gV2LDMEjx3fQoNBAzxb+Tr+2mv68SfFLLDCMiMUD3Eile2TAWRWd1yxy496pDFTOs2BJtup8++iuuuJ/w==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
@@ -12177,16 +12177,16 @@
|
||||
}
|
||||
},
|
||||
"@stencil/angular-output-target": {
|
||||
"version": "0.8.3",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.8.3.tgz",
|
||||
"integrity": "sha512-I/QO1sEx09WWUaNlA30EBhlXYftOSfSBTwYBwC65qlpHDIlD5WU3EAtKhU5IphfwhxnD63kvOoU1YvTUXFHNng==",
|
||||
"version": "0.8.4",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.8.4.tgz",
|
||||
"integrity": "sha512-QvmHTueXXs5vB9W2L12uEzFmAuR8sqATJV2b+SCFmYsjJSaymiSqR3dKo2wnr0tZiTgU1t16BWaUKiSh3wPXpw==",
|
||||
"dev": true,
|
||||
"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.1",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.1.tgz",
|
||||
"integrity": "sha512-l7UUCEV+4Yr1i6BL2DGSQPAzM3x/V4Fx9n9Z0/gdAgX11I25xY0MnH5jbQ69ug6ms/8KUV6SouS1R7MjjM/JnQ=="
|
||||
},
|
||||
"@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": {}
|
||||
},
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@ionic/core",
|
||||
"version": "7.6.6",
|
||||
"version": "7.7.1",
|
||||
"description": "Base components for Ionic",
|
||||
"keywords": [
|
||||
"ionic",
|
||||
@@ -31,24 +31,24 @@
|
||||
"loader/"
|
||||
],
|
||||
"dependencies": {
|
||||
"@stencil/core": "^4.10.0",
|
||||
"@stencil/core": "^4.12.1",
|
||||
"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/status-bar": "^5.0.6",
|
||||
"@capacitor/haptics": "^5.0.7",
|
||||
"@capacitor/keyboard": "^5.0.8",
|
||||
"@capacitor/status-bar": "^5.0.7",
|
||||
"@ionic/eslint-config": "^0.3.0",
|
||||
"@ionic/prettier-config": "^2.0.0",
|
||||
"@playwright/test": "^1.39.0",
|
||||
"@rollup/plugin-node-resolve": "^8.4.0",
|
||||
"@rollup/plugin-virtual": "^2.0.3",
|
||||
"@stencil/angular-output-target": "^0.8.3",
|
||||
"@stencil/angular-output-target": "^0.8.4",
|
||||
"@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",
|
||||
|
||||
29
core/src/components.d.ts
vendored
29
core/src/components.d.ts
vendored
@@ -160,7 +160,7 @@ export namespace Components {
|
||||
/**
|
||||
* Dismiss the action sheet overlay after it has been presented.
|
||||
* @param data Any data to emit in the dismiss events.
|
||||
* @param role The role of the element that is dismissing the action sheet. This can be useful in a button handler for determining which button was clicked to dismiss the action sheet. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
|
||||
* @param role The role of the element that is dismissing the action sheet. This can be useful in a button handler for determining which button was clicked to dismiss the action sheet. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
||||
*/
|
||||
"dismiss": (data?: any, role?: string) => Promise<boolean>;
|
||||
/**
|
||||
@@ -239,7 +239,7 @@ export namespace Components {
|
||||
/**
|
||||
* Dismiss the alert overlay after it has been presented.
|
||||
* @param data Any data to emit in the dismiss events.
|
||||
* @param role The role of the element that is dismissing the alert. This can be useful in a button handler for determining which button was clicked to dismiss the alert. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
|
||||
* @param role The role of the element that is dismissing the alert. This can be useful in a button handler for determining which button was clicked to dismiss the alert. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
||||
*/
|
||||
"dismiss": (data?: any, role?: string) => Promise<boolean>;
|
||||
/**
|
||||
@@ -1527,7 +1527,7 @@ export namespace Components {
|
||||
/**
|
||||
* Dismiss the loading overlay after it has been presented.
|
||||
* @param data Any data to emit in the dismiss events.
|
||||
* @param role The role of the element that is dismissing the loading. This can be useful in a button handler for determining which button was clicked to dismiss the loading. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
|
||||
* @param role The role of the element that is dismissing the loading. This can be useful in a button handler for determining which button was clicked to dismiss the loading. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
||||
*/
|
||||
"dismiss": (data?: any, role?: string) => Promise<boolean>;
|
||||
/**
|
||||
@@ -1720,7 +1720,7 @@ export namespace Components {
|
||||
/**
|
||||
* Dismiss the modal overlay after it has been presented.
|
||||
* @param data Any data to emit in the dismiss events.
|
||||
* @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.
|
||||
* @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
||||
*/
|
||||
"dismiss": (data?: any, role?: string) => Promise<boolean>;
|
||||
/**
|
||||
@@ -1948,6 +1948,9 @@ export namespace Components {
|
||||
*/
|
||||
"mode"?: "ios" | "md";
|
||||
}
|
||||
interface IonPasswordStrength {
|
||||
"strength"?: 'weak' | 'medium' | 'strong';
|
||||
}
|
||||
interface IonPicker {
|
||||
/**
|
||||
* If `true`, the picker will animate.
|
||||
@@ -1973,7 +1976,7 @@ export namespace Components {
|
||||
/**
|
||||
* Dismiss the picker overlay after it has been presented.
|
||||
* @param data Any data to emit in the dismiss events.
|
||||
* @param role The role of the element that is dismissing the picker. This can be useful in a button handler for determining which button was clicked to dismiss the picker. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
|
||||
* @param role The role of the element that is dismissing the picker. This can be useful in a button handler for determining which button was clicked to dismiss the picker. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
||||
*/
|
||||
"dismiss": (data?: any, role?: string) => Promise<boolean>;
|
||||
/**
|
||||
@@ -2110,7 +2113,7 @@ export namespace Components {
|
||||
* Dismiss the popover overlay after it has been presented.
|
||||
* @param data Any data to emit in the dismiss events.
|
||||
* @param role The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'.
|
||||
* @param dismissParentPopover If `true`, dismissing this popover will also dismiss a parent popover if this popover is nested. Defaults to `true`.
|
||||
* @param dismissParentPopover If `true`, dismissing this popover will also dismiss a parent popover if this popover is nested. Defaults to `true`. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
||||
*/
|
||||
"dismiss": (data?: any, role?: string, dismissParentPopover?: boolean) => Promise<boolean>;
|
||||
/**
|
||||
@@ -3111,7 +3114,7 @@ export namespace Components {
|
||||
/**
|
||||
* Dismiss the toast overlay after it has been presented.
|
||||
* @param data Any data to emit in the dismiss events.
|
||||
* @param role The role of the element that is dismissing the toast. This can be useful in a button handler for determining which button was clicked to dismiss the toast. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
|
||||
* @param role The role of the element that is dismissing the toast. This can be useful in a button handler for determining which button was clicked to dismiss the toast. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
||||
*/
|
||||
"dismiss": (data?: any, role?: string) => Promise<boolean>;
|
||||
/**
|
||||
@@ -4035,6 +4038,12 @@ declare global {
|
||||
prototype: HTMLIonNoteElement;
|
||||
new (): HTMLIonNoteElement;
|
||||
};
|
||||
interface HTMLIonPasswordStrengthElement extends Components.IonPasswordStrength, HTMLStencilElement {
|
||||
}
|
||||
var HTMLIonPasswordStrengthElement: {
|
||||
prototype: HTMLIonPasswordStrengthElement;
|
||||
new (): HTMLIonPasswordStrengthElement;
|
||||
};
|
||||
interface HTMLIonPickerElementEventMap {
|
||||
"ionPickerDidPresent": void;
|
||||
"ionPickerWillPresent": void;
|
||||
@@ -4672,6 +4681,7 @@ declare global {
|
||||
"ion-nav": HTMLIonNavElement;
|
||||
"ion-nav-link": HTMLIonNavLinkElement;
|
||||
"ion-note": HTMLIonNoteElement;
|
||||
"ion-password-strength": HTMLIonPasswordStrengthElement;
|
||||
"ion-picker": HTMLIonPickerElement;
|
||||
"ion-picker-column": HTMLIonPickerColumnElement;
|
||||
"ion-picker-column-internal": HTMLIonPickerColumnInternalElement;
|
||||
@@ -6606,6 +6616,9 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
"mode"?: "ios" | "md";
|
||||
}
|
||||
interface IonPasswordStrength {
|
||||
"strength"?: 'weak' | 'medium' | 'strong';
|
||||
}
|
||||
interface IonPicker {
|
||||
/**
|
||||
* If `true`, the picker will animate.
|
||||
@@ -8127,6 +8140,7 @@ declare namespace LocalJSX {
|
||||
"ion-nav": IonNav;
|
||||
"ion-nav-link": IonNavLink;
|
||||
"ion-note": IonNote;
|
||||
"ion-password-strength": IonPasswordStrength;
|
||||
"ion-picker": IonPicker;
|
||||
"ion-picker-column": IonPickerColumn;
|
||||
"ion-picker-column-internal": IonPickerColumnInternal;
|
||||
@@ -8224,6 +8238,7 @@ declare module "@stencil/core" {
|
||||
"ion-nav": LocalJSX.IonNav & JSXBase.HTMLAttributes<HTMLIonNavElement>;
|
||||
"ion-nav-link": LocalJSX.IonNavLink & JSXBase.HTMLAttributes<HTMLIonNavLinkElement>;
|
||||
"ion-note": LocalJSX.IonNote & JSXBase.HTMLAttributes<HTMLIonNoteElement>;
|
||||
"ion-password-strength": LocalJSX.IonPasswordStrength & JSXBase.HTMLAttributes<HTMLIonPasswordStrengthElement>;
|
||||
"ion-picker": LocalJSX.IonPicker & JSXBase.HTMLAttributes<HTMLIonPickerElement>;
|
||||
"ion-picker-column": LocalJSX.IonPickerColumn & JSXBase.HTMLAttributes<HTMLIonPickerColumnElement>;
|
||||
"ion-picker-column-internal": LocalJSX.IonPickerColumnInternal & JSXBase.HTMLAttributes<HTMLIonPickerColumnInternalElement>;
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -23,28 +23,22 @@
|
||||
|
||||
<ion-list slot="content">
|
||||
<ion-item>
|
||||
<ion-label>Name</ion-label>
|
||||
<ion-input type="text"></ion-input>
|
||||
<ion-input label="Name" type="text"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Email</ion-label>
|
||||
<ion-input type="email"></ion-input>
|
||||
<ion-input label="Email" type="email"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Phone</ion-label>
|
||||
<ion-input type="tel"></ion-input>
|
||||
<ion-input label="Phone" type="tel"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Extension</ion-label>
|
||||
<ion-input type="text"></ion-input>
|
||||
<ion-input label="Extension" type="text"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Country</ion-label>
|
||||
<ion-input type="text"></ion-input>
|
||||
<ion-input label="Country" type="text"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>City/Province</ion-label>
|
||||
<ion-input type="text"></ion-input>
|
||||
<ion-input label="City/Province" type="text"></ion-input>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-accordion>
|
||||
@@ -56,24 +50,19 @@
|
||||
|
||||
<ion-list slot="content">
|
||||
<ion-item>
|
||||
<ion-label>Address 1</ion-label>
|
||||
<ion-input type="text"></ion-input>
|
||||
<ion-input label="Address 1" type="text"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Address 2</ion-label>
|
||||
<ion-input type="email"></ion-input>
|
||||
<ion-input label="Address 2" type="email"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>City</ion-label>
|
||||
<ion-input type="tel"></ion-input>
|
||||
<ion-input label="City" type="tel"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>State</ion-label>
|
||||
<ion-input type="text"></ion-input>
|
||||
<ion-input label="State" type="text"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Zip Code</ion-label>
|
||||
<ion-input type="text"></ion-input>
|
||||
<ion-input label="Zip Code" type="text"></ion-input>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-accordion>
|
||||
@@ -85,24 +74,19 @@
|
||||
|
||||
<ion-list slot="content">
|
||||
<ion-item>
|
||||
<ion-label>Address 1</ion-label>
|
||||
<ion-input id="address1" type="text"></ion-input>
|
||||
<ion-input label="Address 1" id="address1" type="text"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Address 2</ion-label>
|
||||
<ion-input type="email"></ion-input>
|
||||
<ion-input label="Address 2" type="email"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>City</ion-label>
|
||||
<ion-input type="tel"></ion-input>
|
||||
<ion-input label="City" type="tel"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>State</ion-label>
|
||||
<ion-input type="text"></ion-input>
|
||||
<ion-input lable="State" type="text"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Zip Code</ion-label>
|
||||
<ion-input type="text"></ion-input>
|
||||
<ion-input label="Zip Code" type="text"></ion-input>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-accordion>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -26,7 +26,24 @@
|
||||
// ---------------------------------------------------
|
||||
|
||||
.action-sheet-wrapper {
|
||||
@include margin(var(--ion-safe-area-top, 0), auto, var(--ion-safe-area-bottom, 0), auto);
|
||||
@include margin(var(--ion-safe-area-top, 0), auto, null, auto);
|
||||
/**
|
||||
* Bottom safe area is applied as padding so that it impacts the bounding box.
|
||||
* When the action sheet is shown/hidden, this element is transformed by translating
|
||||
* 100% of its height. This translation needs to include the bottom safe area
|
||||
* otherwise part of the action sheet will still be visible at the end of
|
||||
* the show transition.
|
||||
*
|
||||
* If this code is changed, reviewers should verify that the action
|
||||
* sheet still translates out of the viewport completely when the bottom
|
||||
* safe area is a positive value.
|
||||
*/
|
||||
@include padding(null, null, var(--ion-safe-area-bottom, 0), null);
|
||||
|
||||
// Using content-box to increase the height of the action sheet
|
||||
// wrapper by the bottom padding (safe area) to animate the
|
||||
// action sheet completely off the screen when safe area is set.
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
// iOS Action Sheet Container
|
||||
|
||||
@@ -216,6 +216,10 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
|
||||
* This can be useful in a button handler for determining which button was
|
||||
* clicked to dismiss the action sheet.
|
||||
* Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
|
||||
*
|
||||
* This is a no-op if the overlay has not been presented yet. If you want
|
||||
* to remove an overlay from the DOM that was never presented, use the
|
||||
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
||||
*/
|
||||
@Method()
|
||||
async dismiss(data?: any, role?: string): Promise<boolean> {
|
||||
|
||||
@@ -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 };
|
||||
|
||||
@@ -411,6 +411,10 @@ export class Alert implements ComponentInterface, OverlayInterface {
|
||||
* This can be useful in a button handler for determining which button was
|
||||
* clicked to dismiss the alert.
|
||||
* Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
|
||||
*
|
||||
* This is a no-op if the overlay has not been presented yet. If you want
|
||||
* to remove an overlay from the DOM that was never presented, use the
|
||||
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
||||
*/
|
||||
@Method()
|
||||
async dismiss(data?: any, role?: string): Promise<boolean> {
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import type { ComponentInterface } from '@stencil/core';
|
||||
import { Build, Component, Element, Host, Method, h } from '@stencil/core';
|
||||
import type { FocusVisibleUtility } from '@utils/focus-visible';
|
||||
import { shoudUseCloseWatcher } from '@utils/hardware-back-button';
|
||||
import { printIonWarning } from '@utils/logging';
|
||||
import { isPlatform } from '@utils/platform';
|
||||
|
||||
import { config } from '../../global/config';
|
||||
@@ -34,9 +36,20 @@ export class App implements ComponentInterface {
|
||||
import('../../utils/input-shims/input-shims').then((module) => module.startInputShims(config, platform));
|
||||
}
|
||||
const hardwareBackButtonModule = await import('../../utils/hardware-back-button');
|
||||
if (config.getBoolean('hardwareBackButton', isHybrid)) {
|
||||
const supportsHardwareBackButtonEvents = isHybrid || shoudUseCloseWatcher();
|
||||
if (config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
|
||||
hardwareBackButtonModule.startHardwareBackButton();
|
||||
} else {
|
||||
/**
|
||||
* If an app sets hardwareBackButton: false and experimentalCloseWatcher: true
|
||||
* then the close watcher will not be used.
|
||||
*/
|
||||
if (shoudUseCloseWatcher()) {
|
||||
printIonWarning(
|
||||
'experimentalCloseWatcher was set to `true`, but hardwareBackButton was set to `false`. Both config options must be `true` for the Close Watcher API to be used.'
|
||||
);
|
||||
}
|
||||
|
||||
hardwareBackButtonModule.blockHardwareBackButton();
|
||||
}
|
||||
if (typeof (window as any) !== 'undefined') {
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-item>
|
||||
<ion-input value="March 15, 2022 at 12:43 AM"></ion-input>
|
||||
<ion-input aria-label="input" value="March 15, 2022 at 12:43 AM"></ion-input>
|
||||
<ion-datetime-button slot="end" id="default-button" datetime="default-datetime">
|
||||
<ion-icon color="primary" id="custom-date-button" slot="date-target" name="calendar"></ion-icon>
|
||||
<ion-icon color="primary" id="custom-time-button" slot="time-target" name="time"></ion-icon>
|
||||
|
||||
@@ -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');
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
@@ -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');
|
||||
|
||||
|
||||
@@ -214,8 +214,7 @@
|
||||
<ion-popover class="options-popover" trigger="popover-trigger">
|
||||
<ion-list lines="none">
|
||||
<ion-item>
|
||||
<ion-label>Dark Mode</ion-label>
|
||||
<ion-checkbox slot="end"></ion-checkbox>
|
||||
<ion-checkbox>Dark Mode</ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item detail="true" href="?ionic:mode=ios">
|
||||
<ion-label>iOS Mode</ion-label>
|
||||
@@ -225,23 +224,19 @@
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Show Default Title</ion-label>
|
||||
<ion-toggle id="titleToggle"></ion-toggle>
|
||||
<ion-toggle id="titleToggle">Show Default Title</ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Show Default Buttons</ion-label>
|
||||
<ion-toggle id="buttonsToggle"></ion-toggle>
|
||||
<ion-toggle id="buttonsToggle">Show Default Buttons</ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Locale</ion-label>
|
||||
<ion-input placeholder="default" id="locale"></ion-input>
|
||||
<ion-input label="Locale" placeholder="default" id="locale"></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Color</ion-label>
|
||||
<ion-select id="color" value="primary">
|
||||
<ion-select label="Color" id="color" value="primary">
|
||||
<ion-select-option value="primary">Primary</ion-select-option>
|
||||
<ion-select-option value="secondary">Secondary</ion-select-option>
|
||||
<ion-select-option value="tertiary">Tertiary</ion-select-option>
|
||||
|
||||
@@ -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());
|
||||
|
||||
@@ -16,23 +16,19 @@
|
||||
<h1>Item</h1>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Item with Input</ion-label>
|
||||
<ion-input placeholder="Placeholder"></ion-input>
|
||||
<ion-input label="Item with Input" placeholder="Placeholder"></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item disabled>
|
||||
<ion-label>Item disabled with Input</ion-label>
|
||||
<ion-input placeholder="Placeholder"></ion-input>
|
||||
<ion-input label="Item disabled with Input" placeholder="Placeholder"></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Item with Input disabled</ion-label>
|
||||
<ion-input placeholder="Placeholder" disabled></ion-input>
|
||||
<ion-input label="Item with Input disabled" placeholder="Placeholder" disabled></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label position="floating">Item with Select</ion-label>
|
||||
<ion-select>
|
||||
<ion-select label="Item with Select" label-placement="floating">
|
||||
<ion-select-option value="">No Game Console</ion-select-option>
|
||||
<ion-select-option value="nes">NES</ion-select-option>
|
||||
<ion-select-option value="n64" selected>Nintendo64</ion-select-option>
|
||||
@@ -44,8 +40,7 @@
|
||||
</ion-item>
|
||||
|
||||
<ion-item disabled>
|
||||
<ion-label position="floating">Item disabled with Select</ion-label>
|
||||
<ion-select>
|
||||
<ion-select label="Item disabled with Select" label-placement="floating">
|
||||
<ion-select-option value="">No Game Console</ion-select-option>
|
||||
<ion-select-option value="nes">NES</ion-select-option>
|
||||
<ion-select-option value="n64" selected>Nintendo64</ion-select-option>
|
||||
@@ -57,8 +52,7 @@
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label position="floating">Item with Select disabled</ion-label>
|
||||
<ion-select disabled>
|
||||
<ion-select label="Item with Select disabled" label-placement="floating" disabled>
|
||||
<ion-select-option value="">No Game Console</ion-select-option>
|
||||
<ion-select-option value="nes">NES</ion-select-option>
|
||||
<ion-select-option value="n64" selected>Nintendo64</ion-select-option>
|
||||
@@ -70,33 +64,27 @@
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Item with Toggle</ion-label>
|
||||
<ion-toggle slot="end"></ion-toggle>
|
||||
<ion-toggle>Item with Toggle</ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item disabled>
|
||||
<ion-label>Item disabled with Toggle</ion-label>
|
||||
<ion-toggle slot="end"></ion-toggle>
|
||||
<ion-toggle>Item disabled with Toggle</ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Item with Toggle disabled</ion-label>
|
||||
<ion-toggle slot="end" disabled></ion-toggle>
|
||||
<ion-toggle disabled>Item with Toggle disabled</ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Item with Radio</ion-label>
|
||||
<ion-radio slot="start" value="biff"></ion-radio>
|
||||
<ion-radio value="biff">Item with Radio</ion-radio>
|
||||
</ion-item>
|
||||
|
||||
<ion-item disabled>
|
||||
<ion-label>Item disabled with Radio</ion-label>
|
||||
<ion-radio slot="start" value="biff"></ion-radio>
|
||||
<ion-radio value="biff">Item disabled with Radio</ion-radio>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Item with Radio disabled</ion-label>
|
||||
<ion-radio slot="start" value="biff" disabled></ion-radio>
|
||||
<ion-radio value="biff" disabled>Item with Radio disabled</ion-radio>
|
||||
</ion-item>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
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 |
@@ -98,8 +98,9 @@
|
||||
</ion-item>
|
||||
|
||||
<ion-item class="overflow-visible">
|
||||
<ion-label position="fixed">PIN:</ion-label>
|
||||
<ion-input
|
||||
label="PIN:"
|
||||
label-placement="fixed"
|
||||
type="number"
|
||||
pattern="[0-9]*"
|
||||
inputmode="numeric"
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 48 KiB |
@@ -31,32 +31,27 @@
|
||||
<ion-content class="ion-padding-vertical">
|
||||
<ion-list class="basic">
|
||||
<ion-item>
|
||||
<ion-label>No Helper/Error</ion-label>
|
||||
<ion-input name="input" id="text"></ion-input>
|
||||
<ion-input label="No Helper/Error" name="input" id="text"></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Helper and Error</ion-label>
|
||||
<ion-input></ion-input>
|
||||
<ion-input label="Helper and Error"></ion-input>
|
||||
<ion-note slot="helper">Helper Text</ion-note>
|
||||
<ion-note slot="error">Error Text</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Helper Only</ion-label>
|
||||
<ion-input></ion-input>
|
||||
<ion-input label="Helper Only"></ion-input>
|
||||
<ion-note slot="helper">Helper Text</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Error Only</ion-label>
|
||||
<ion-input></ion-input>
|
||||
<ion-input label="Error Only"></ion-input>
|
||||
<ion-note slot="error">Error Text</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item class="custom">
|
||||
<ion-label>Both w/ Custom CSS</ion-label>
|
||||
<ion-input></ion-input>
|
||||
<ion-input label="Both w/ Custom CSS"></ion-input>
|
||||
<ion-note slot="helper">Helper Text</ion-note>
|
||||
<ion-note slot="error">Error Text</ion-note>
|
||||
</ion-item>
|
||||
@@ -66,16 +61,14 @@
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<ion-item fill="solid">
|
||||
<ion-label>Helper and Error (Fill Solid)</ion-label>
|
||||
<ion-input></ion-input>
|
||||
<ion-input label="Helper and Error (Fill Solid)"></ion-input>
|
||||
<ion-note slot="helper">Helper Text</ion-note>
|
||||
<ion-note slot="error">Error Text</ion-note>
|
||||
</ion-item>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-item fill="outline">
|
||||
<ion-label>Helper and Error (Fill Outline)</ion-label>
|
||||
<ion-input></ion-input>
|
||||
<ion-input label="Helper and Error (Fill Outline)"></ion-input>
|
||||
<ion-note slot="helper">Helper Text</ion-note>
|
||||
<ion-note slot="error">Error Text</ion-note>
|
||||
</ion-item>
|
||||
@@ -84,8 +77,7 @@
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<ion-item>
|
||||
<ion-label>Toggle Error</ion-label>
|
||||
<ion-toggle slot="start" id="error-toggle" color="danger"></ion-toggle>
|
||||
<ion-toggle id="error-toggle" color="danger">Toggle Error</ion-toggle>
|
||||
</ion-item>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 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 |
@@ -39,18 +39,6 @@
|
||||
<ion-item id="btnUndefinedValue" button="true" onclick="setUndefinedValue()">
|
||||
<ion-label>Set "undefined" values</ion-label>
|
||||
</ion-item>
|
||||
<ion-item id="btnLabelsDefault" button="true" onclick="setLabelDefault()">
|
||||
<ion-label>Labels: Default</ion-label>
|
||||
</ion-item>
|
||||
<ion-item id="btnLabelsFloating" button="true" onclick="setLabelFloating()">
|
||||
<ion-label>Labels: Floating</ion-label>
|
||||
</ion-item>
|
||||
<ion-item id="btnLabelsStacked" button="true" onclick="setLabelStacked()">
|
||||
<ion-label>Labels: Stacked</ion-label>
|
||||
</ion-item>
|
||||
<ion-item id="btnLabelsFixed" button="true" onclick="setLabelFixed()">
|
||||
<ion-label>Labels: Fixed</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-popover>
|
||||
</ion-toolbar>
|
||||
@@ -60,28 +48,23 @@
|
||||
<form onsubmit="return onSubmit(event)">
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<ion-label>Input</ion-label>
|
||||
<ion-input name="input" id="input" placeholder="Input"></ion-input>
|
||||
<ion-input label="Input" name="input" id="input" placeholder="Input"></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Textarea</ion-label>
|
||||
<ion-textarea name="textarea" id="textarea" placeholder="Textarea"></ion-textarea>
|
||||
<ion-textarea label="Textarea" name="textarea" id="textarea" placeholder="Textarea"></ion-textarea>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Toggle</ion-label>
|
||||
<ion-toggle name="toggle" id="toggle" slot="end"></ion-toggle>
|
||||
<ion-toggle name="toggle" id="toggle">Toggle</ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Checkbox</ion-label>
|
||||
<ion-checkbox name="checkbox" id="checkbox" slot="end"></ion-checkbox>
|
||||
<ion-checkbox name="checkbox" id="checkbox">Checkbox</ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Select</ion-label>
|
||||
<ion-select name="select" id="select" placeholder="Select">
|
||||
<ion-select label="Select" name="select" id="select" placeholder="Select">
|
||||
<ion-select-option value="1">1</ion-select-option>
|
||||
<ion-select-option value="2">2</ion-select-option>
|
||||
<ion-select-option value="3">3</ion-select-option>
|
||||
@@ -93,8 +76,7 @@
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Range</ion-label>
|
||||
<ion-range name="range" id="range" value="10"></ion-range>
|
||||
<ion-range label="Range" name="range" id="range" value="10"></ion-range>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
@@ -147,28 +129,6 @@
|
||||
toggle.checked = checkbox.checked = false;
|
||||
}
|
||||
|
||||
function setLabelDefault() {
|
||||
setLabelPosition(undefined);
|
||||
}
|
||||
|
||||
function setLabelFixed() {
|
||||
setLabelPosition('fixed');
|
||||
}
|
||||
|
||||
function setLabelFloating() {
|
||||
setLabelPosition('floating');
|
||||
}
|
||||
|
||||
function setLabelStacked() {
|
||||
setLabelPosition('stacked');
|
||||
}
|
||||
|
||||
function setLabelPosition(position) {
|
||||
Array.from(document.querySelectorAll('form ion-list ion-label')).forEach(
|
||||
(label) => (label.position = position)
|
||||
);
|
||||
}
|
||||
|
||||
function getFormControls() {
|
||||
return formControlIds.reduce((acc, id) => {
|
||||
acc[id] = document.querySelector(`#${id}`);
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 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');
|
||||
});
|
||||
});
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user