Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
bcbc36be38 |
2
.github/workflows/stencil-nightly.yml
vendored
@@ -150,7 +150,7 @@ jobs:
|
||||
strategy:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
apps: [ng16, ng17]
|
||||
apps: [ng12, ng13, ng14, ng15]
|
||||
needs: [build-angular, build-angular-server]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
|
||||
39
CHANGELOG.md
@@ -3,45 +3,6 @@
|
||||
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,44 +3,6 @@
|
||||
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)
|
||||
|
||||
|
||||
|
||||
@@ -1362,8 +1362,8 @@ ion-tabs,shadow
|
||||
ion-tabs,method,getSelected,getSelected() => Promise<string | undefined>
|
||||
ion-tabs,method,getTab,getTab(tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>
|
||||
ion-tabs,method,select,select(tab: string | HTMLIonTabElement) => Promise<boolean>
|
||||
ion-tabs,event,ionTabsDidChange,{ tab: string; },false
|
||||
ion-tabs,event,ionTabsWillChange,{ tab: string; },false
|
||||
ion-tabs,event,ionTabsDidChange,TabsEventDetail,false
|
||||
ion-tabs,event,ionTabsWillChange,TabsEventDetail,false
|
||||
|
||||
ion-text,shadow
|
||||
ion-text,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
|
||||
|
||||
88
core/package-lock.json
generated
@@ -1,32 +1,32 @@
|
||||
{
|
||||
"name": "@ionic/core",
|
||||
"version": "7.7.1",
|
||||
"version": "7.6.6",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@ionic/core",
|
||||
"version": "7.7.1",
|
||||
"version": "7.6.6",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@stencil/core": "^4.12.0",
|
||||
"@stencil/core": "^4.10.0",
|
||||
"ionicons": "^7.2.2",
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@axe-core/playwright": "^4.8.4",
|
||||
"@capacitor/core": "^5.6.0",
|
||||
"@capacitor/haptics": "^5.0.7",
|
||||
"@capacitor/keyboard": "^5.0.8",
|
||||
"@capacitor/status-bar": "^5.0.7",
|
||||
"@capacitor/haptics": "^5.0.6",
|
||||
"@capacitor/keyboard": "^5.0.7",
|
||||
"@capacitor/status-bar": "^5.0.6",
|
||||
"@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.4",
|
||||
"@stencil/angular-output-target": "^0.8.3",
|
||||
"@stencil/react-output-target": "^0.5.3",
|
||||
"@stencil/sass": "^3.0.9",
|
||||
"@stencil/sass": "^3.0.8",
|
||||
"@stencil/vue-output-target": "^0.8.7",
|
||||
"@types/jest": "^29.5.6",
|
||||
"@types/node": "^14.6.0",
|
||||
@@ -643,27 +643,27 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@capacitor/haptics": {
|
||||
"version": "5.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-5.0.7.tgz",
|
||||
"integrity": "sha512-/j+7Qa4BxQA5aOU43cwXuiudfSXfoHFsAVfcehH5DkSjxLykZKWHEuE4uFJXqdkSIbAHjS37D0Sde6ENP6G/MA==",
|
||||
"version": "5.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-5.0.6.tgz",
|
||||
"integrity": "sha512-UrMcR7p2X10ql4VLlowUuH/VckTeu0lj+RQpekxox14uxDmu5AGIFDK/iDTi8W6QZkxTJRZK6sbCjgwYgNJ7Pw==",
|
||||
"dev": true,
|
||||
"peerDependencies": {
|
||||
"@capacitor/core": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@capacitor/keyboard": {
|
||||
"version": "5.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.8.tgz",
|
||||
"integrity": "sha512-XYyBzGlzjgLPqyPVdu5McGLYV6+G2efVR4I3l5cF1B27M6U/oFqv9CQU74WNG08nee28bfccboNpv6eWCLYn1A==",
|
||||
"version": "5.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.7.tgz",
|
||||
"integrity": "sha512-+6lW8z2nXTM2NOG7D7pOasCfIGicz26+EeDRXIj5AtJibbjwtE1Q5GIY+qGHgzpmwOF0qmcrGJBz4zagDwUapg==",
|
||||
"dev": true,
|
||||
"peerDependencies": {
|
||||
"@capacitor/core": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@capacitor/status-bar": {
|
||||
"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==",
|
||||
"version": "5.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-5.0.6.tgz",
|
||||
"integrity": "sha512-7od8CxsBnot1XMK3IeOkproFL4hgoKoWAc3pwUvmDOkQsXoxwQm4SR9mLwQavv1XfxtHbFV9Ukd7FwMxOPSViw==",
|
||||
"dev": true,
|
||||
"peerDependencies": {
|
||||
"@capacitor/core": "^5.0.0"
|
||||
@@ -1816,18 +1816,18 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@stencil/angular-output-target": {
|
||||
"version": "0.8.4",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.8.4.tgz",
|
||||
"integrity": "sha512-QvmHTueXXs5vB9W2L12uEzFmAuR8sqATJV2b+SCFmYsjJSaymiSqR3dKo2wnr0tZiTgU1t16BWaUKiSh3wPXpw==",
|
||||
"version": "0.8.3",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.8.3.tgz",
|
||||
"integrity": "sha512-I/QO1sEx09WWUaNlA30EBhlXYftOSfSBTwYBwC65qlpHDIlD5WU3EAtKhU5IphfwhxnD63kvOoU1YvTUXFHNng==",
|
||||
"dev": true,
|
||||
"peerDependencies": {
|
||||
"@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@stencil/core": {
|
||||
"version": "4.12.0",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.0.tgz",
|
||||
"integrity": "sha512-qAQcfNmp2sdxAh1DlyUhHfDmIUS7mhI+5LAhPphg74zK9sKgFL5vpLzgjs0wohpjlmI4msgJFYiRB8lxVPqjPg==",
|
||||
"version": "4.10.0",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz",
|
||||
"integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w==",
|
||||
"bin": {
|
||||
"stencil": "bin/stencil"
|
||||
},
|
||||
@@ -1846,9 +1846,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@stencil/sass": {
|
||||
"version": "3.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.9.tgz",
|
||||
"integrity": "sha512-GtPMjf5r4/BVBCO3LvcoMSIfOa6T+0wq+SrTGEilC4NCZpuZdAlZffWxXi80caZ1jDclwdzJ2qGwEgCAfvGoNA==",
|
||||
"version": "3.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.8.tgz",
|
||||
"integrity": "sha512-QJUG4Dr/b3wSizViwQXorrk1PJzxOsKkq5hSqtUHc3NNG3iomC4DQFYGeu15yNfoCDBtt4qkyHSCynsekQ8F6A==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=12.0.0",
|
||||
@@ -11333,23 +11333,23 @@
|
||||
}
|
||||
},
|
||||
"@capacitor/haptics": {
|
||||
"version": "5.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-5.0.7.tgz",
|
||||
"integrity": "sha512-/j+7Qa4BxQA5aOU43cwXuiudfSXfoHFsAVfcehH5DkSjxLykZKWHEuE4uFJXqdkSIbAHjS37D0Sde6ENP6G/MA==",
|
||||
"version": "5.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-5.0.6.tgz",
|
||||
"integrity": "sha512-UrMcR7p2X10ql4VLlowUuH/VckTeu0lj+RQpekxox14uxDmu5AGIFDK/iDTi8W6QZkxTJRZK6sbCjgwYgNJ7Pw==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"@capacitor/keyboard": {
|
||||
"version": "5.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.8.tgz",
|
||||
"integrity": "sha512-XYyBzGlzjgLPqyPVdu5McGLYV6+G2efVR4I3l5cF1B27M6U/oFqv9CQU74WNG08nee28bfccboNpv6eWCLYn1A==",
|
||||
"version": "5.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.7.tgz",
|
||||
"integrity": "sha512-+6lW8z2nXTM2NOG7D7pOasCfIGicz26+EeDRXIj5AtJibbjwtE1Q5GIY+qGHgzpmwOF0qmcrGJBz4zagDwUapg==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"@capacitor/status-bar": {
|
||||
"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==",
|
||||
"version": "5.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-5.0.6.tgz",
|
||||
"integrity": "sha512-7od8CxsBnot1XMK3IeOkproFL4hgoKoWAc3pwUvmDOkQsXoxwQm4SR9mLwQavv1XfxtHbFV9Ukd7FwMxOPSViw==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
@@ -12177,16 +12177,16 @@
|
||||
}
|
||||
},
|
||||
"@stencil/angular-output-target": {
|
||||
"version": "0.8.4",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.8.4.tgz",
|
||||
"integrity": "sha512-QvmHTueXXs5vB9W2L12uEzFmAuR8sqATJV2b+SCFmYsjJSaymiSqR3dKo2wnr0tZiTgU1t16BWaUKiSh3wPXpw==",
|
||||
"version": "0.8.3",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.8.3.tgz",
|
||||
"integrity": "sha512-I/QO1sEx09WWUaNlA30EBhlXYftOSfSBTwYBwC65qlpHDIlD5WU3EAtKhU5IphfwhxnD63kvOoU1YvTUXFHNng==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"@stencil/core": {
|
||||
"version": "4.12.0",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.0.tgz",
|
||||
"integrity": "sha512-qAQcfNmp2sdxAh1DlyUhHfDmIUS7mhI+5LAhPphg74zK9sKgFL5vpLzgjs0wohpjlmI4msgJFYiRB8lxVPqjPg=="
|
||||
"version": "4.10.0",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz",
|
||||
"integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w=="
|
||||
},
|
||||
"@stencil/react-output-target": {
|
||||
"version": "0.5.3",
|
||||
@@ -12196,9 +12196,9 @@
|
||||
"requires": {}
|
||||
},
|
||||
"@stencil/sass": {
|
||||
"version": "3.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.9.tgz",
|
||||
"integrity": "sha512-GtPMjf5r4/BVBCO3LvcoMSIfOa6T+0wq+SrTGEilC4NCZpuZdAlZffWxXi80caZ1jDclwdzJ2qGwEgCAfvGoNA==",
|
||||
"version": "3.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.8.tgz",
|
||||
"integrity": "sha512-QJUG4Dr/b3wSizViwQXorrk1PJzxOsKkq5hSqtUHc3NNG3iomC4DQFYGeu15yNfoCDBtt4qkyHSCynsekQ8F6A==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@ionic/core",
|
||||
"version": "7.7.1",
|
||||
"version": "7.6.6",
|
||||
"description": "Base components for Ionic",
|
||||
"keywords": [
|
||||
"ionic",
|
||||
@@ -31,24 +31,24 @@
|
||||
"loader/"
|
||||
],
|
||||
"dependencies": {
|
||||
"@stencil/core": "^4.12.0",
|
||||
"@stencil/core": "^4.10.0",
|
||||
"ionicons": "^7.2.2",
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@axe-core/playwright": "^4.8.4",
|
||||
"@capacitor/core": "^5.6.0",
|
||||
"@capacitor/haptics": "^5.0.7",
|
||||
"@capacitor/keyboard": "^5.0.8",
|
||||
"@capacitor/status-bar": "^5.0.7",
|
||||
"@capacitor/haptics": "^5.0.6",
|
||||
"@capacitor/keyboard": "^5.0.7",
|
||||
"@capacitor/status-bar": "^5.0.6",
|
||||
"@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.4",
|
||||
"@stencil/angular-output-target": "^0.8.3",
|
||||
"@stencil/react-output-target": "^0.5.3",
|
||||
"@stencil/sass": "^3.0.9",
|
||||
"@stencil/sass": "^3.0.8",
|
||||
"@stencil/vue-output-target": "^0.8.7",
|
||||
"@types/jest": "^29.5.6",
|
||||
"@types/node": "^14.6.0",
|
||||
|
||||
10
core/src/components.d.ts
vendored
@@ -38,6 +38,7 @@ import { SegmentButtonLayout } from "./components/segment-button/segment-button-
|
||||
import { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
|
||||
import { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
|
||||
import { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
|
||||
import { TabsEventDetail } from "./components/tabs/tabs-interface";
|
||||
import { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
|
||||
import { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions, ToastSwipeGestureDirection } from "./components/toast/toast-interface";
|
||||
import { ToggleChangeEventDetail } from "./components/toggle/toggle-interface";
|
||||
@@ -74,6 +75,7 @@ export { SegmentButtonLayout } from "./components/segment-button/segment-button-
|
||||
export { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
|
||||
export { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
|
||||
export { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
|
||||
export { TabsEventDetail } from "./components/tabs/tabs-interface";
|
||||
export { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
|
||||
export { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions, ToastSwipeGestureDirection } from "./components/toast/toast-interface";
|
||||
export { ToggleChangeEventDetail } from "./components/toggle/toggle-interface";
|
||||
@@ -4503,8 +4505,8 @@ declare global {
|
||||
};
|
||||
interface HTMLIonTabsElementEventMap {
|
||||
"ionNavWillLoad": void;
|
||||
"ionTabsWillChange": { tab: string };
|
||||
"ionTabsDidChange": { tab: string };
|
||||
"ionTabsWillChange": TabsEventDetail;
|
||||
"ionTabsDidChange": TabsEventDetail;
|
||||
}
|
||||
interface HTMLIonTabsElement extends Components.IonTabs, HTMLStencilElement {
|
||||
addEventListener<K extends keyof HTMLIonTabsElementEventMap>(type: K, listener: (this: HTMLIonTabsElement, ev: IonTabsCustomEvent<HTMLIonTabsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
@@ -7711,11 +7713,11 @@ declare namespace LocalJSX {
|
||||
/**
|
||||
* Emitted when the navigation has finished transitioning to a new component.
|
||||
*/
|
||||
"onIonTabsDidChange"?: (event: IonTabsCustomEvent<{ tab: string }>) => void;
|
||||
"onIonTabsDidChange"?: (event: IonTabsCustomEvent<TabsEventDetail>) => void;
|
||||
/**
|
||||
* Emitted when the navigation is about to transition to a new component.
|
||||
*/
|
||||
"onIonTabsWillChange"?: (event: IonTabsCustomEvent<{ tab: string }>) => void;
|
||||
"onIonTabsWillChange"?: (event: IonTabsCustomEvent<TabsEventDetail>) => void;
|
||||
"useRouter"?: boolean;
|
||||
}
|
||||
interface IonText {
|
||||
|
||||
@@ -23,22 +23,28 @@
|
||||
|
||||
<ion-list slot="content">
|
||||
<ion-item>
|
||||
<ion-input label="Name" type="text"></ion-input>
|
||||
<ion-label>Name</ion-label>
|
||||
<ion-input type="text"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-input label="Email" type="email"></ion-input>
|
||||
<ion-label>Email</ion-label>
|
||||
<ion-input type="email"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-input label="Phone" type="tel"></ion-input>
|
||||
<ion-label>Phone</ion-label>
|
||||
<ion-input type="tel"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-input label="Extension" type="text"></ion-input>
|
||||
<ion-label>Extension</ion-label>
|
||||
<ion-input type="text"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-input label="Country" type="text"></ion-input>
|
||||
<ion-label>Country</ion-label>
|
||||
<ion-input type="text"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-input label="City/Province" type="text"></ion-input>
|
||||
<ion-label>City/Province</ion-label>
|
||||
<ion-input type="text"></ion-input>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-accordion>
|
||||
@@ -50,19 +56,24 @@
|
||||
|
||||
<ion-list slot="content">
|
||||
<ion-item>
|
||||
<ion-input label="Address 1" type="text"></ion-input>
|
||||
<ion-label>Address 1</ion-label>
|
||||
<ion-input type="text"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-input label="Address 2" type="email"></ion-input>
|
||||
<ion-label>Address 2</ion-label>
|
||||
<ion-input type="email"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-input label="City" type="tel"></ion-input>
|
||||
<ion-label>City</ion-label>
|
||||
<ion-input type="tel"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-input label="State" type="text"></ion-input>
|
||||
<ion-label>State</ion-label>
|
||||
<ion-input type="text"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-input label="Zip Code" type="text"></ion-input>
|
||||
<ion-label>Zip Code</ion-label>
|
||||
<ion-input type="text"></ion-input>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-accordion>
|
||||
@@ -74,19 +85,24 @@
|
||||
|
||||
<ion-list slot="content">
|
||||
<ion-item>
|
||||
<ion-input label="Address 1" id="address1" type="text"></ion-input>
|
||||
<ion-label>Address 1</ion-label>
|
||||
<ion-input id="address1" type="text"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-input label="Address 2" type="email"></ion-input>
|
||||
<ion-label>Address 2</ion-label>
|
||||
<ion-input type="email"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-input label="City" type="tel"></ion-input>
|
||||
<ion-label>City</ion-label>
|
||||
<ion-input type="tel"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-input lable="State" type="text"></ion-input>
|
||||
<ion-label>State</ion-label>
|
||||
<ion-input type="text"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-input label="Zip Code" type="text"></ion-input>
|
||||
<ion-label>Zip Code</ion-label>
|
||||
<ion-input type="text"></ion-input>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-accordion>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import type { AnimationBuilder, LiteralUnion, Mode } from '../../interface';
|
||||
import type { AnimationBuilder, Mode } from '../../interface';
|
||||
|
||||
export interface ActionSheetOptions {
|
||||
header?: string;
|
||||
@@ -19,7 +19,7 @@ export interface ActionSheetOptions {
|
||||
|
||||
export interface ActionSheetButton<T = any> {
|
||||
text?: string;
|
||||
role?: LiteralUnion<'cancel' | 'destructive' | 'selected', string>;
|
||||
role?: 'cancel' | 'destructive' | 'selected' | string;
|
||||
icon?: string;
|
||||
cssClass?: string | string[];
|
||||
id?: string;
|
||||
|
||||
@@ -26,24 +26,7 @@
|
||||
// ---------------------------------------------------
|
||||
|
||||
.action-sheet-wrapper {
|
||||
@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;
|
||||
@include margin(var(--ion-safe-area-top, 0), auto, var(--ion-safe-area-bottom, 0), auto);
|
||||
}
|
||||
|
||||
// iOS Action Sheet Container
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import type { AnimationBuilder, LiteralUnion, Mode, TextFieldTypes } from '../../interface';
|
||||
import type { AnimationBuilder, 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?: LiteralUnion<'cancel' | 'destructive', string>;
|
||||
role?: 'cancel' | 'destructive' | string;
|
||||
cssClass?: string | string[];
|
||||
id?: string;
|
||||
htmlAttributes?: { [key: string]: any };
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
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';
|
||||
@@ -36,20 +34,9 @@ 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');
|
||||
const supportsHardwareBackButtonEvents = isHybrid || shoudUseCloseWatcher();
|
||||
if (config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
|
||||
if (config.getBoolean('hardwareBackButton', isHybrid)) {
|
||||
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') {
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-item>
|
||||
<ion-input aria-label="input" value="March 15, 2022 at 12:43 AM"></ion-input>
|
||||
<ion-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>
|
||||
|
||||
@@ -214,7 +214,8 @@
|
||||
<ion-popover class="options-popover" trigger="popover-trigger">
|
||||
<ion-list lines="none">
|
||||
<ion-item>
|
||||
<ion-checkbox>Dark Mode</ion-checkbox>
|
||||
<ion-label>Dark Mode</ion-label>
|
||||
<ion-checkbox slot="end"></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item detail="true" href="?ionic:mode=ios">
|
||||
<ion-label>iOS Mode</ion-label>
|
||||
@@ -224,19 +225,23 @@
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-toggle id="titleToggle">Show Default Title</ion-toggle>
|
||||
<ion-label>Show Default Title</ion-label>
|
||||
<ion-toggle id="titleToggle"></ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-toggle id="buttonsToggle">Show Default Buttons</ion-toggle>
|
||||
<ion-label>Show Default Buttons</ion-label>
|
||||
<ion-toggle id="buttonsToggle"></ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-input label="Locale" placeholder="default" id="locale"></ion-input>
|
||||
<ion-label>Locale</ion-label>
|
||||
<ion-input placeholder="default" id="locale"></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-select label="Color" id="color" value="primary">
|
||||
<ion-label>Color</ion-label>
|
||||
<ion-select 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>
|
||||
|
||||
@@ -16,19 +16,23 @@
|
||||
<h1>Item</h1>
|
||||
|
||||
<ion-item>
|
||||
<ion-input label="Item with Input" placeholder="Placeholder"></ion-input>
|
||||
<ion-label>Item with Input</ion-label>
|
||||
<ion-input placeholder="Placeholder"></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item disabled>
|
||||
<ion-input label="Item disabled with Input" placeholder="Placeholder"></ion-input>
|
||||
<ion-label>Item disabled with Input</ion-label>
|
||||
<ion-input placeholder="Placeholder"></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-input label="Item with Input disabled" placeholder="Placeholder" disabled></ion-input>
|
||||
<ion-label>Item with Input disabled</ion-label>
|
||||
<ion-input placeholder="Placeholder" disabled></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-select label="Item with Select" label-placement="floating">
|
||||
<ion-label position="floating">Item with Select</ion-label>
|
||||
<ion-select>
|
||||
<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>
|
||||
@@ -40,7 +44,8 @@
|
||||
</ion-item>
|
||||
|
||||
<ion-item disabled>
|
||||
<ion-select label="Item disabled with Select" label-placement="floating">
|
||||
<ion-label position="floating">Item disabled with Select</ion-label>
|
||||
<ion-select>
|
||||
<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>
|
||||
@@ -52,7 +57,8 @@
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-select label="Item with Select disabled" label-placement="floating" disabled>
|
||||
<ion-label position="floating">Item with Select disabled</ion-label>
|
||||
<ion-select 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>
|
||||
@@ -64,27 +70,33 @@
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-toggle>Item with Toggle</ion-toggle>
|
||||
<ion-label>Item with Toggle</ion-label>
|
||||
<ion-toggle slot="end"></ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item disabled>
|
||||
<ion-toggle>Item disabled with Toggle</ion-toggle>
|
||||
<ion-label>Item disabled with Toggle</ion-label>
|
||||
<ion-toggle slot="end"></ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-toggle disabled>Item with Toggle disabled</ion-toggle>
|
||||
<ion-label>Item with Toggle disabled</ion-label>
|
||||
<ion-toggle slot="end" disabled></ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-radio value="biff">Item with Radio</ion-radio>
|
||||
<ion-label>Item with Radio</ion-label>
|
||||
<ion-radio slot="start" value="biff"></ion-radio>
|
||||
</ion-item>
|
||||
|
||||
<ion-item disabled>
|
||||
<ion-radio value="biff">Item disabled with Radio</ion-radio>
|
||||
<ion-label>Item disabled with Radio</ion-label>
|
||||
<ion-radio slot="start" value="biff"></ion-radio>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-radio value="biff" disabled>Item with Radio disabled</ion-radio>
|
||||
<ion-label>Item with Radio disabled</ion-label>
|
||||
<ion-radio slot="start" value="biff" disabled></ion-radio>
|
||||
</ion-item>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
@@ -98,9 +98,8 @@
|
||||
</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"
|
||||
|
||||
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 62 KiB |
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 79 KiB |
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 62 KiB |
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 79 KiB |
|
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 53 KiB |
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 66 KiB |
|
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 48 KiB |
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 66 KiB |
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 48 KiB |
@@ -31,27 +31,32 @@
|
||||
<ion-content class="ion-padding-vertical">
|
||||
<ion-list class="basic">
|
||||
<ion-item>
|
||||
<ion-input label="No Helper/Error" name="input" id="text"></ion-input>
|
||||
<ion-label>No Helper/Error</ion-label>
|
||||
<ion-input name="input" id="text"></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-input label="Helper and Error"></ion-input>
|
||||
<ion-label>Helper and Error</ion-label>
|
||||
<ion-input></ion-input>
|
||||
<ion-note slot="helper">Helper Text</ion-note>
|
||||
<ion-note slot="error">Error Text</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-input label="Helper Only"></ion-input>
|
||||
<ion-label>Helper Only</ion-label>
|
||||
<ion-input></ion-input>
|
||||
<ion-note slot="helper">Helper Text</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-input label="Error Only"></ion-input>
|
||||
<ion-label>Error Only</ion-label>
|
||||
<ion-input></ion-input>
|
||||
<ion-note slot="error">Error Text</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item class="custom">
|
||||
<ion-input label="Both w/ Custom CSS"></ion-input>
|
||||
<ion-label>Both w/ Custom CSS</ion-label>
|
||||
<ion-input></ion-input>
|
||||
<ion-note slot="helper">Helper Text</ion-note>
|
||||
<ion-note slot="error">Error Text</ion-note>
|
||||
</ion-item>
|
||||
@@ -61,14 +66,16 @@
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<ion-item fill="solid">
|
||||
<ion-input label="Helper and Error (Fill Solid)"></ion-input>
|
||||
<ion-label>Helper and Error (Fill Solid)</ion-label>
|
||||
<ion-input></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-input label="Helper and Error (Fill Outline)"></ion-input>
|
||||
<ion-label>Helper and Error (Fill Outline)</ion-label>
|
||||
<ion-input></ion-input>
|
||||
<ion-note slot="helper">Helper Text</ion-note>
|
||||
<ion-note slot="error">Error Text</ion-note>
|
||||
</ion-item>
|
||||
@@ -77,7 +84,8 @@
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<ion-item>
|
||||
<ion-toggle id="error-toggle" color="danger">Toggle Error</ion-toggle>
|
||||
<ion-label>Toggle Error</ion-label>
|
||||
<ion-toggle slot="start" id="error-toggle" color="danger"></ion-toggle>
|
||||
</ion-item>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
@@ -39,6 +39,18 @@
|
||||
<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>
|
||||
@@ -48,23 +60,28 @@
|
||||
<form onsubmit="return onSubmit(event)">
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<ion-input label="Input" name="input" id="input" placeholder="Input"></ion-input>
|
||||
<ion-label>Input</ion-label>
|
||||
<ion-input name="input" id="input" placeholder="Input"></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-textarea label="Textarea" name="textarea" id="textarea" placeholder="Textarea"></ion-textarea>
|
||||
<ion-label>Textarea</ion-label>
|
||||
<ion-textarea name="textarea" id="textarea" placeholder="Textarea"></ion-textarea>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-toggle name="toggle" id="toggle">Toggle</ion-toggle>
|
||||
<ion-label>Toggle</ion-label>
|
||||
<ion-toggle name="toggle" id="toggle" slot="end"></ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-checkbox name="checkbox" id="checkbox">Checkbox</ion-checkbox>
|
||||
<ion-label>Checkbox</ion-label>
|
||||
<ion-checkbox name="checkbox" id="checkbox" slot="end"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-select label="Select" name="select" id="select" placeholder="Select">
|
||||
<ion-label>Select</ion-label>
|
||||
<ion-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>
|
||||
@@ -76,7 +93,8 @@
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-range label="Range" name="range" id="range" value="10"></ion-range>
|
||||
<ion-label>Range</ion-label>
|
||||
<ion-range name="range" id="range" value="10"></ion-range>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
@@ -129,6 +147,28 @@
|
||||
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}`);
|
||||
|
||||
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 39 KiB |
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 39 KiB |
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 45 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
@@ -41,45 +41,58 @@
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<ion-label>Default</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label color="tertiary">Tertiary</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label class="custom">Custom</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label class="ion-text-wrap">Wrap label this label just goes on and on and on</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label position="fixed">Fixed</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label position="floating">Floating</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item class="floating-color">
|
||||
<ion-label position="floating" color="success">Floating: Success</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label position="stacked">Stacked</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item class="stacked-color">
|
||||
<ion-label position="stacked" color="danger">Stacked: Danger</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
<ion-list>
|
||||
<ion-item color="tertiary">
|
||||
<ion-label position="floating">(Item: Tertiary) Floating</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item color="primary">
|
||||
<ion-label position="stacked">(Item: Primary) Stacked</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item class="floating-color" color="tertiary">
|
||||
<ion-label position="floating" color="success">(Item: Tertiary) Floating: Success</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item class="stacked-color" color="primary">
|
||||
<ion-label position="stacked" color="danger">(Item: Primary) Stacked: Danger</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
|
||||
@@ -34,7 +34,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
`
|
||||
<ion-item>
|
||||
<ion-label position="stacked">My Label</ion-label>
|
||||
<ion-input aria-label="My Label"></ion-input>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
`,
|
||||
config
|
||||
@@ -49,7 +49,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
`
|
||||
<ion-item>
|
||||
<ion-label position="floating">My Label</ion-label>
|
||||
<ion-input aria-label="My Label"></ion-input>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
`,
|
||||
config
|
||||
|
||||
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
@@ -2,7 +2,6 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
|
||||
import { Build, Component, Element, Event, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';
|
||||
import { getTimeGivenProgression } from '@utils/animation/cubic-bezier';
|
||||
import { GESTURE_CONTROLLER } from '@utils/gesture';
|
||||
import { shoudUseCloseWatcher } from '@utils/hardware-back-button';
|
||||
import type { Attributes } from '@utils/helpers';
|
||||
import { inheritAriaAttributes, assert, clamp, isEndSide as isEnd } from '@utils/helpers';
|
||||
import { menuController } from '@utils/menu-controller';
|
||||
@@ -322,6 +321,7 @@ export class Menu implements ComponentInterface, MenuI {
|
||||
}
|
||||
}
|
||||
|
||||
@Listen('keydown')
|
||||
onKeydown(ev: KeyboardEvent) {
|
||||
if (ev.key === 'Escape') {
|
||||
this.close();
|
||||
@@ -781,14 +781,8 @@ export class Menu implements ComponentInterface, MenuI {
|
||||
const { type, disabled, isPaneVisible, inheritedAttributes, side } = this;
|
||||
const mode = getIonMode(this);
|
||||
|
||||
/**
|
||||
* If the Close Watcher is enabled then
|
||||
* the ionBackButton listener in the menu controller
|
||||
* will handle closing the menu when Escape is pressed.
|
||||
*/
|
||||
return (
|
||||
<Host
|
||||
onKeyDown={shoudUseCloseWatcher() ? null : this.onKeydown}
|
||||
role="navigation"
|
||||
aria-label={inheritedAttributes['aria-label'] || 'menu'}
|
||||
class={{
|
||||
|
||||
@@ -10,6 +10,7 @@ import { Style as StatusBarStyle, StatusBar } from '@utils/native/status-bar';
|
||||
import {
|
||||
GESTURE,
|
||||
BACKDROP,
|
||||
activeAnimations,
|
||||
dismiss,
|
||||
eventMethod,
|
||||
prepareOverlay,
|
||||
@@ -704,6 +705,8 @@ export class Modal implements ComponentInterface, OverlayInterface {
|
||||
this.keyboardOpenCallback = undefined;
|
||||
}
|
||||
|
||||
const enteringAnimation = activeAnimations.get(this) || [];
|
||||
|
||||
const dismissed = await dismiss<ModalDismissOptions>(
|
||||
this,
|
||||
data,
|
||||
@@ -730,6 +733,8 @@ export class Modal implements ComponentInterface, OverlayInterface {
|
||||
if (this.gesture) {
|
||||
this.gesture.destroy();
|
||||
}
|
||||
|
||||
enteringAnimation.forEach((ani) => ani.destroy());
|
||||
}
|
||||
this.currentBreakpoint = undefined;
|
||||
this.animation = undefined;
|
||||
|
||||
@@ -1,45 +0,0 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) => {
|
||||
test.describe(title('modal: animations'), () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-modal is-open="true" trigger="open-modal"></ion-modal>
|
||||
`,
|
||||
config
|
||||
);
|
||||
});
|
||||
test('card modal should clean up animations on dismiss', async ({ page }, testInfo) => {
|
||||
testInfo.annotations.push({
|
||||
type: 'issue',
|
||||
description: 'https://github.com/ionic-team/ionic-framework/issues/28352',
|
||||
});
|
||||
|
||||
const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
|
||||
|
||||
const modal = page.locator('ion-modal');
|
||||
|
||||
const initialAnimations = await modal.evaluate((el: HTMLIonModalElement) => {
|
||||
return el.shadowRoot!.getAnimations();
|
||||
});
|
||||
|
||||
// While the modal is open, it should have animations
|
||||
expect(initialAnimations.length).toBeGreaterThan(0);
|
||||
|
||||
await modal.evaluate((el: HTMLIonModalElement) => {
|
||||
el.dismiss();
|
||||
});
|
||||
|
||||
await ionModalDidDismiss.next();
|
||||
|
||||
const currentAnimations = await modal.evaluate((el: HTMLIonModalElement) => {
|
||||
return el.shadowRoot!.getAnimations();
|
||||
});
|
||||
|
||||
// Once the modal has finished closing, there should be no animations
|
||||
expect(currentAnimations.length).toBe(0);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -85,7 +85,10 @@
|
||||
</ion-header>
|
||||
|
||||
<ion-content class="ion-padding">
|
||||
<input id="root-input" />
|
||||
<ion-item>
|
||||
<ion-label>Input outside modal</ion-label>
|
||||
<ion-input id="root-input" legacy="true"></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-button id="sheet-modal" onclick="presentModal()">Present Sheet Modal</ion-button>
|
||||
<ion-button
|
||||
|
||||
@@ -52,7 +52,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
|
||||
await ionModalDidPresent.next();
|
||||
|
||||
const input = page.locator('#root-input').first();
|
||||
const input = page.locator('#root-input input').first();
|
||||
await input.click();
|
||||
await expect(input).toBeFocused();
|
||||
});
|
||||
|
||||
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 45 KiB |
|
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 62 KiB |
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 38 KiB |
@@ -60,7 +60,8 @@
|
||||
|
||||
<ion-content>
|
||||
<ion-item>
|
||||
<ion-toggle>Use Custom Animation</ion-toggle>
|
||||
<ion-label>Use Custom Animation</ion-label>
|
||||
<ion-toggle></ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-list id="list"></ion-list>
|
||||
|
||||
@@ -212,7 +212,7 @@
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-content>
|
||||
<ion-textarea aria-label="textarea" rows="4" style="max-height: 44px; overflow-y: auto;" value="the cursor in this <ion-textarea>\nmust be able to be moved\nwith the arrow keys and\nhome and end keys"></ion-textarea>
|
||||
<ion-textarea rows="4" style="max-height: 44px; overflow-y: auto;" value="the cursor in this <ion-textarea>\nmust be able to be moved\nwith the arrow keys and\nhome and end keys"></ion-textarea>
|
||||
<textarea rows="4" style="display:block;width: 100%;border: 0;padding: 8px; max-height: 44px; overflow-y: auto">the cursor in this <textarea>\nmust be able to be moved\nwith the arrow keys and\nhome and end keys</textarea>
|
||||
</ion-content>
|
||||
`;
|
||||
|
||||
@@ -60,7 +60,7 @@
|
||||
<ion-progress-bar class="progressBarBuffer" value="0.20" buffer="0.4" reversed="true"></ion-progress-bar>
|
||||
|
||||
<ion-item>
|
||||
<ion-range aria-label="Buffer" pin="true" value="0" id="progressValueBuffer">
|
||||
<ion-range legacy="true" pin="true" value="0" id="progressValueBuffer">
|
||||
<ion-label slot="start">0</ion-label>
|
||||
<ion-label slot="end">100</ion-label>
|
||||
</ion-range>
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
<ion-progress-bar id="progressBar"></ion-progress-bar>
|
||||
|
||||
<ion-item>
|
||||
<ion-range aria-label="Buffer" pin="true" value="0" id="progressValue">
|
||||
<ion-range legacy="true" pin="true" value="0" id="progressValue">
|
||||
<ion-label slot="start">0</ion-label>
|
||||
<ion-label slot="end">100</ion-label>
|
||||
</ion-range>
|
||||
|
||||
@@ -7,9 +7,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-radio-group value="1">
|
||||
<ion-radio value="1" aria-label="1"></ion-radio>
|
||||
<ion-radio value="2" aria-label="2"></ion-radio>
|
||||
<ion-radio value="3" aria-label="3"></ion-radio>
|
||||
<ion-radio value="1"></ion-radio>
|
||||
<ion-radio value="2"></ion-radio>
|
||||
<ion-radio value="3"></ion-radio>
|
||||
</ion-radio-group>
|
||||
`,
|
||||
config
|
||||
@@ -29,9 +29,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-radio-group>
|
||||
<ion-radio value="1" aria-label="1"></ion-radio>
|
||||
<ion-radio value="2" aria-label="2"></ion-radio>
|
||||
<ion-radio value="3" aria-label="3"></ion-radio>
|
||||
<ion-radio value="1"></ion-radio>
|
||||
<ion-radio value="2"></ion-radio>
|
||||
<ion-radio value="3"></ion-radio>
|
||||
</ion-radio-group>
|
||||
`,
|
||||
config
|
||||
@@ -51,9 +51,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-radio-group value="1">
|
||||
<ion-radio value="1" aria-label="1"></ion-radio>
|
||||
<ion-radio value="2" aria-label="2"></ion-radio>
|
||||
<ion-radio value="3" aria-label="3"></ion-radio>
|
||||
<ion-radio value="1"></ion-radio>
|
||||
<ion-radio value="2"></ion-radio>
|
||||
<ion-radio value="3"></ion-radio>
|
||||
</ion-radio-group>
|
||||
`,
|
||||
config
|
||||
@@ -72,9 +72,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-radio-group value="1">
|
||||
<ion-radio value="1" aria-label="1"></ion-radio>
|
||||
<ion-radio value="2" aria-label="2"></ion-radio>
|
||||
<ion-radio value="3" aria-label="3"></ion-radio>
|
||||
<ion-radio value="1"></ion-radio>
|
||||
<ion-radio value="2"></ion-radio>
|
||||
<ion-radio value="3"></ion-radio>
|
||||
</ion-radio-group>
|
||||
`,
|
||||
config
|
||||
@@ -94,9 +94,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-radio-group allow-empty-selection="true" value="1">
|
||||
<ion-radio value="1" aria-label="1"></ion-radio>
|
||||
<ion-radio value="2" aria-label="2"></ion-radio>
|
||||
<ion-radio value="3" aria-label="3"></ion-radio>
|
||||
<ion-radio value="1"></ion-radio>
|
||||
<ion-radio value="2"></ion-radio>
|
||||
<ion-radio value="3"></ion-radio>
|
||||
</ion-radio-group>
|
||||
`,
|
||||
config
|
||||
|
||||
@@ -7,7 +7,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should render a range with no visible label', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-range style="padding-inline-start: 20px;" aria-label="Range"></ion-range>
|
||||
<ion-range legacy="true"></ion-range>
|
||||
`,
|
||||
config
|
||||
);
|
||||
@@ -80,7 +80,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should render a range with no visible label', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-range aria-label="Range">
|
||||
<ion-range legacy="true">
|
||||
<ion-icon name="volume-off" slot="start"></ion-icon>
|
||||
<ion-icon name="volume-high" slot="end"></ion-icon>
|
||||
</ion-range>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.5 KiB |