mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
Compare commits
3 Commits
shane-patc
...
cb/module-
| Author | SHA1 | Date | |
|---|---|---|---|
|
47b4a0c1a7 | ||
|
|
7f31ece67e | ||
|
|
b8ca441cf7 |
@@ -5,7 +5,7 @@ runs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20.x
|
||||
node-version: 18.x
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
name: ionic-core
|
||||
|
||||
@@ -5,7 +5,7 @@ runs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20.x
|
||||
node-version: 18.x
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
name: ionic-core
|
||||
|
||||
@@ -11,7 +11,7 @@ runs:
|
||||
- uses: actions/checkout@v4
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20.x
|
||||
node-version: 18.x
|
||||
|
||||
- name: Install Dependencies
|
||||
run: npm ci
|
||||
|
||||
@@ -11,7 +11,7 @@ runs:
|
||||
- uses: actions/checkout@v4
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20.x
|
||||
node-version: 18.x
|
||||
- name: Install Dependencies
|
||||
run: npm install
|
||||
working-directory: ./core
|
||||
|
||||
@@ -5,7 +5,7 @@ runs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20.x
|
||||
node-version: 18.x
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
name: ionic-core
|
||||
|
||||
@@ -5,7 +5,7 @@ runs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20.x
|
||||
node-version: 18.x
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
name: ionic-core
|
||||
|
||||
@@ -5,7 +5,7 @@ runs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20.x
|
||||
node-version: 18.x
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
name: ionic-core
|
||||
|
||||
@@ -5,7 +5,7 @@ runs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20.x
|
||||
node-version: 18.x
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
name: ionic-core
|
||||
|
||||
@@ -21,7 +21,7 @@ runs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20.x
|
||||
node-version: 18.x
|
||||
# Provenance requires npm 9.5.0+
|
||||
- name: Install latest npm
|
||||
run: npm install -g npm@latest
|
||||
|
||||
@@ -5,7 +5,7 @@ runs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20.x
|
||||
node-version: 18.x
|
||||
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
|
||||
@@ -5,7 +5,7 @@ runs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20.x
|
||||
node-version: 18.x
|
||||
- name: Install Dependencies
|
||||
run: npm ci
|
||||
working-directory: ./core
|
||||
|
||||
@@ -15,7 +15,7 @@ runs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20.x
|
||||
node-version: 18.x
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
name: ionic-core
|
||||
|
||||
@@ -8,7 +8,7 @@ runs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20.x
|
||||
node-version: 18.x
|
||||
- name: Install Dependencies
|
||||
run: npm ci
|
||||
working-directory: ./core
|
||||
|
||||
@@ -8,7 +8,7 @@ runs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20.x
|
||||
node-version: 18.x
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
name: ionic-core
|
||||
|
||||
@@ -8,7 +8,7 @@ runs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20.x
|
||||
node-version: 18.x
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
name: ionic-core
|
||||
|
||||
@@ -8,7 +8,7 @@ runs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20.x
|
||||
node-version: 18.x
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
name: ionic-core
|
||||
|
||||
@@ -9,7 +9,7 @@ runs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20.x
|
||||
node-version: 18.x
|
||||
- uses: actions/download-artifact@v4
|
||||
with:
|
||||
path: ./artifacts
|
||||
|
||||
4
.github/workflows/assign-issues.yml
vendored
4
.github/workflows/assign-issues.yml
vendored
@@ -11,8 +11,8 @@ jobs:
|
||||
issues: write
|
||||
steps:
|
||||
- name: 'Auto-assign issue'
|
||||
uses: pozil/auto-assign-issue@c015a6a3f410f12f58255c3d085fd774312f7a2f # v2.1.2
|
||||
uses: pozil/auto-assign-issue@c5bca5027e680b9e8411b826d16947afd8c76b32 # v2.0.0
|
||||
with:
|
||||
assignees: brandyscarney, thetaPC, joselrio, rugoncalves, BenOsodrac, JoaoFerreira-FrontEnd, OS-giulianasilva, tanner-reits
|
||||
assignees: brandyscarney, thetaPC, joselrio, rugoncalves, BenOsodrac, JoaoFerreira-FrontEnd, OS-giulianasilva
|
||||
numOfAssignee: 1
|
||||
allowSelfAssign: false
|
||||
|
||||
2
.github/workflows/build.yml
vendored
2
.github/workflows/build.yml
vendored
@@ -140,7 +140,7 @@ jobs:
|
||||
strategy:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
apps: [ng16, ng17, ng18, ng19]
|
||||
apps: [ng16, ng17, ng18]
|
||||
needs: [build-angular, build-angular-server]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
|
||||
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: [ng16, ng17, ng18, ng19]
|
||||
apps: [ng16, ng17, ng18]
|
||||
needs: [build-angular, build-angular-server]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
|
||||
167
CHANGELOG.md
167
CHANGELOG.md
@@ -3,173 +3,6 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [8.4.3](https://github.com/ionic-team/ionic-framework/compare/v8.4.2...v8.4.3) (2025-01-29)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **vue:** update Stencil Vue output target ([#30159](https://github.com/ionic-team/ionic-framework/issues/30159)) ([eb725fc](https://github.com/ionic-team/ionic-framework/commit/eb725fce6eb15facd8a1c21be11a1b2d46336479))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.4.2](https://github.com/ionic-team/ionic-framework/compare/v8.4.1...v8.4.2) (2025-01-22)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **segment:** add logic to connect to segment-view in `componentDidLoad()` callback ([#30060](https://github.com/ionic-team/ionic-framework/issues/30060)) ([000f553](https://github.com/ionic-team/ionic-framework/commit/000f55303e459c583e642337fb1894f419f37d48)), closes [#30000](https://github.com/ionic-team/ionic-framework/issues/30000)
|
||||
* **select-modal:** match radio styles to iOS native ([#30119](https://github.com/ionic-team/ionic-framework/issues/30119)) ([3f8346e](https://github.com/ionic-team/ionic-framework/commit/3f8346e718ae3a6eb5008d739f10b6898b84ca9b))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.4.1](https://github.com/ionic-team/ionic-framework/compare/v8.4.0...v8.4.1) (2024-11-27)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **header:** use aria attributes to hide small title when collapsed ([#30027](https://github.com/ionic-team/ionic-framework/issues/30027)) ([23763ab](https://github.com/ionic-team/ionic-framework/commit/23763abf797f9a4ba8262225760f718e9dcc4782)), closes [#29347](https://github.com/ionic-team/ionic-framework/issues/29347)
|
||||
* **menu:** hide from screen readers while animating ([#30036](https://github.com/ionic-team/ionic-framework/issues/30036)) ([845071c](https://github.com/ionic-team/ionic-framework/commit/845071c97a856d45eb5e0bb81d9c270bc38bb604))
|
||||
* **overlays:** announce info after opening based on platform ([#30025](https://github.com/ionic-team/ionic-framework/issues/30025)) ([f6188c4](https://github.com/ionic-team/ionic-framework/commit/f6188c47e9278fe69fd9d250c65156edbe5ef32e))
|
||||
* **overlays:** focus management with checkbox/radio ([#30026](https://github.com/ionic-team/ionic-framework/issues/30026)) ([8ee42bb](https://github.com/ionic-team/ionic-framework/commit/8ee42bbc1e0bf4731d20040c7853756722f1a4b2))
|
||||
* **toast:** swipe gesture works with custom container layout ([#29999](https://github.com/ionic-team/ionic-framework/issues/29999)) ([470decc](https://github.com/ionic-team/ionic-framework/commit/470decca7b6b89ef74095ef0bb7909b93640cd78)), closes [#29998](https://github.com/ionic-team/ionic-framework/issues/29998)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [8.4.0](https://github.com/ionic-team/ionic-framework/compare/v8.3.4...v8.4.0) (2024-11-04)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **alert:** use correct heading structure for subHeader when header exists ([#29964](https://github.com/ionic-team/ionic-framework/issues/29964)) ([0fdcb32](https://github.com/ionic-team/ionic-framework/commit/0fdcb32ce0f99b284b314f79f7d0b071bc37faec))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **menu:** pass role to ionWillClose and ionDidClose events ([#29954](https://github.com/ionic-team/ionic-framework/issues/29954)) ([ee2fa19](https://github.com/ionic-team/ionic-framework/commit/ee2fa19a1e9f09d492c7c08340d95ba6a56ebb2b))
|
||||
* **segment-view:** adds support for new `ion-segment-view` component ([#29969](https://github.com/ionic-team/ionic-framework/issues/29969)) ([89508fb](https://github.com/ionic-team/ionic-framework/commit/89508fb89172900b1d11cc3fc18883f57a7fbab6))
|
||||
* **select:** add `modal` as interface ([#29972](https://github.com/ionic-team/ionic-framework/issues/29972)) ([3628ea8](https://github.com/ionic-team/ionic-framework/commit/3628ea875a66a717783de5e0a4df440872339040))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.3.4](https://github.com/ionic-team/ionic-framework/compare/v8.3.3...v8.3.4) (2024-10-30)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **angular:** add missing 'compareWith' input to standalone ion-radio-group ([#29870](https://github.com/ionic-team/ionic-framework/issues/29870)) ([47ba703](https://github.com/ionic-team/ionic-framework/commit/47ba703a57d1ca506f943f6b790d0bf7583d79cb)), closes [#29826](https://github.com/ionic-team/ionic-framework/issues/29826)
|
||||
* **backdrop:** remove tabindex for improved accessibility ([#29956](https://github.com/ionic-team/ionic-framework/issues/29956)) ([7294e96](https://github.com/ionic-team/ionic-framework/commit/7294e969bb913692eaf28e54860614f445132713)), closes [#29773](https://github.com/ionic-team/ionic-framework/issues/29773)
|
||||
* **input, textarea:** ensure screen readers announce helper and error text when focused ([#29958](https://github.com/ionic-team/ionic-framework/issues/29958)) ([5a73145](https://github.com/ionic-team/ionic-framework/commit/5a7314553a8def87bd19275640c92dd72a6ef1a4))
|
||||
* **overlay:** hide from screen readers while animating ([#29951](https://github.com/ionic-team/ionic-framework/issues/29951)) ([cb60073](https://github.com/ionic-team/ionic-framework/commit/cb6007363a8d42b5f126945427c2bfc3d7209c21)), closes [#29857](https://github.com/ionic-team/ionic-framework/issues/29857)
|
||||
* **overlays:** do not hide root when toast appears ([#29962](https://github.com/ionic-team/ionic-framework/issues/29962)) ([322d7c9](https://github.com/ionic-team/ionic-framework/commit/322d7c98cf6613df0b0db3f119e3f892e6a17e7b)), closes [#29773](https://github.com/ionic-team/ionic-framework/issues/29773)
|
||||
* **overlays:** hide the focus trap div from screen readers ([#29970](https://github.com/ionic-team/ionic-framework/issues/29970)) ([c3b58f1](https://github.com/ionic-team/ionic-framework/commit/c3b58f1620bcb74db43e3983ef570b7b982abd83)), closes [#29858](https://github.com/ionic-team/ionic-framework/issues/29858)
|
||||
* **vue:** incorrect view rendered when using router.go(-n) ([#29877](https://github.com/ionic-team/ionic-framework/issues/29877)) ([e32fbe0](https://github.com/ionic-team/ionic-framework/commit/e32fbe02102fe80db29f73c26496a40852032354)), closes [#28201](https://github.com/ionic-team/ionic-framework/issues/28201) [#28201](https://github.com/ionic-team/ionic-framework/issues/28201) [#29847](https://github.com/ionic-team/ionic-framework/issues/29847)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.3.3](https://github.com/ionic-team/ionic-framework/compare/v8.3.2...v8.3.3) (2024-10-16)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **tabs, tab-bar:** use standalone tab bar in Vue, React ([#29940](https://github.com/ionic-team/ionic-framework/issues/29940)) ([b7b383b](https://github.com/ionic-team/ionic-framework/commit/b7b383bee080b72de2e6307ff9a9a051314c69ed)), closes [#29885](https://github.com/ionic-team/ionic-framework/issues/29885) [#29924](https://github.com/ionic-team/ionic-framework/issues/29924)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.3.2](https://github.com/ionic-team/ionic-framework/compare/v8.3.1...v8.3.2) (2024-10-02)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **segment:** prevent flickering for scrollable on iOS ([#29884](https://github.com/ionic-team/ionic-framework/issues/29884)) ([078ed0b](https://github.com/ionic-team/ionic-framework/commit/078ed0b86a0d8e9f8457481cb739ea214195adce)), closes [#29523](https://github.com/ionic-team/ionic-framework/issues/29523)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.3.1](https://github.com/ionic-team/ionic-framework/compare/v8.3.0...v8.3.1) (2024-09-17)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **checkbox:** align checkbox properly in item using start alignment ([#29850](https://github.com/ionic-team/ionic-framework/issues/29850)) ([88b7013](https://github.com/ionic-team/ionic-framework/commit/88b701363c1865e81d7d136acab4b9fef3b1ab7a)), closes [#29837](https://github.com/ionic-team/ionic-framework/issues/29837)
|
||||
* **datetime:** display today's date and time when value is an empty string ([#29839](https://github.com/ionic-team/ionic-framework/issues/29839)) ([f1d50c0](https://github.com/ionic-team/ionic-framework/commit/f1d50c0f645b3adf51426c24a1da0bbd1223f1d5)), closes [#29669](https://github.com/ionic-team/ionic-framework/issues/29669)
|
||||
* **range:** disable scroll when range is being dragged ([#29241](https://github.com/ionic-team/ionic-framework/issues/29241)) ([35b1a45](https://github.com/ionic-team/ionic-framework/commit/35b1a459294657b609f683457e71babd4673a3a8))
|
||||
* **react, vue:** add default value for navManager on tabs ([#29865](https://github.com/ionic-team/ionic-framework/issues/29865)) ([df39cea](https://github.com/ionic-team/ionic-framework/commit/df39ceac6db6511518aed4766e6a59aa24fb53ec))
|
||||
* **react:** revert react output target version ([#29869](https://github.com/ionic-team/ionic-framework/issues/29869)) ([f64458d](https://github.com/ionic-team/ionic-framework/commit/f64458dc63a05acb955aa1f2ec3755c738466cf4)), closes [ionic-team/stencil-ds-output-targets#476](https://github.com/ionic-team/stencil-ds-output-targets/issues/476) [ionic-team/stencil-ds-output-targets#475](https://github.com/ionic-team/stencil-ds-output-targets/issues/475) [#29848](https://github.com/ionic-team/ionic-framework/issues/29848)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [8.3.0](https://github.com/ionic-team/ionic-framework/compare/v8.2.8...v8.3.0) (2024-09-05)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **checkbox:** display as block when justify or alignment properties are defined ([#29783](https://github.com/ionic-team/ionic-framework/issues/29783)) ([4ccd15e](https://github.com/ionic-team/ionic-framework/commit/4ccd15e47ad4ec7cb59d2694c5738eab1bb265ff))
|
||||
* **radio:** display as block when justify or alignment properties are defined ([#29801](https://github.com/ionic-team/ionic-framework/issues/29801)) ([18b02b3](https://github.com/ionic-team/ionic-framework/commit/18b02b3574f54a2f377f5bfe4e074bf015418dd3))
|
||||
* **react, vue, angular:** use tabs without router ([#29794](https://github.com/ionic-team/ionic-framework/issues/29794)) ([867066b](https://github.com/ionic-team/ionic-framework/commit/867066b4eba369de025f3c7c8ef33e7089cdf3bc)), closes [#25184](https://github.com/ionic-team/ionic-framework/issues/25184)
|
||||
* **toggle:** display as block when justify or alignment properties are defined ([#29802](https://github.com/ionic-team/ionic-framework/issues/29802)) ([0332c8c](https://github.com/ionic-team/ionic-framework/commit/0332c8c6ceb612840e73f789d5c5b66f05cb53d4))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.2.8](https://github.com/ionic-team/ionic-framework/compare/v8.2.7...v8.2.8) (2024-09-05)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **range:** emit correct value when knob is at start of bar ([#29820](https://github.com/ionic-team/ionic-framework/issues/29820)) ([6a3d7c7](https://github.com/ionic-team/ionic-framework/commit/6a3d7c7247f74e21a8377676daf228822f879b26)), closes [#29792](https://github.com/ionic-team/ionic-framework/issues/29792)
|
||||
* **react:** intellisense works with IntelliJ ([#29782](https://github.com/ionic-team/ionic-framework/issues/29782)) ([bacded5](https://github.com/ionic-team/ionic-framework/commit/bacded500b826df98d3ca5322c87f50f643c4692)), closes [#29755](https://github.com/ionic-team/ionic-framework/issues/29755)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.2.7](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.7) (2024-08-13)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **alert:** do not overwrite id set in htmlAttributes ([#29708](https://github.com/ionic-team/ionic-framework/issues/29708)) ([1295ced](https://github.com/ionic-team/ionic-framework/commit/1295cedae9ffbcc40389c19499e58e7e21fb424e)), closes [#29704](https://github.com/ionic-team/ionic-framework/issues/29704)
|
||||
* **angular:** add focusTrap prop to modal and popover ([#29729](https://github.com/ionic-team/ionic-framework/issues/29729)) ([05913c3](https://github.com/ionic-team/ionic-framework/commit/05913c3cc3f2e8cb91f9a0944cd55e78392b0ba3)), closes [#29728](https://github.com/ionic-team/ionic-framework/issues/29728)
|
||||
* **angular:** remove the tabindex set by routerLink from Ionic components ([#29744](https://github.com/ionic-team/ionic-framework/issues/29744)) ([20073e1](https://github.com/ionic-team/ionic-framework/commit/20073e10c934d3704734195c72f4281c9b9658e3)), closes [#20632](https://github.com/ionic-team/ionic-framework/issues/20632)
|
||||
* **content:** allow custom roles and aria attributes to be set on content ([#29753](https://github.com/ionic-team/ionic-framework/issues/29753)) ([7b16397](https://github.com/ionic-team/ionic-framework/commit/7b16397714be773fda28658ab4009755f545b735))
|
||||
* **item:** router-link remains clickable with item cover ([#29743](https://github.com/ionic-team/ionic-framework/issues/29743)) ([a9f278a](https://github.com/ionic-team/ionic-framework/commit/a9f278ad67758a19e0e12ce7ed6d13eb573b0765))
|
||||
* **overlays:** do not overwrite id set in htmlAttributes ([#29722](https://github.com/ionic-team/ionic-framework/issues/29722)) ([92ce563](https://github.com/ionic-team/ionic-framework/commit/92ce563c402e557b08a622bd20f78459782312e2)), closes [#29712](https://github.com/ionic-team/ionic-framework/issues/29712)
|
||||
* **react:** add onPointerDown, onTouchEnd, add onTouchMove ([#29736](https://github.com/ionic-team/ionic-framework/issues/29736)) ([bfee3cd](https://github.com/ionic-team/ionic-framework/commit/bfee3cd064a9b495489c2679ccfb762e622dbf09)), closes [#29174](https://github.com/ionic-team/ionic-framework/issues/29174)
|
||||
* **vue:** pass router-link value to href to properly render clickable elements ([#29745](https://github.com/ionic-team/ionic-framework/issues/29745)) ([ab4f279](https://github.com/ionic-team/ionic-framework/commit/ab4f2791c1968adbb1d858c5f009fa251bb9101b))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.2.6](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.6) (2024-07-24)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **alert:** do not overwrite id set in htmlAttributes ([#29708](https://github.com/ionic-team/ionic-framework/issues/29708)) ([1295ced](https://github.com/ionic-team/ionic-framework/commit/1295cedae9ffbcc40389c19499e58e7e21fb424e)), closes [#29704](https://github.com/ionic-team/ionic-framework/issues/29704)
|
||||
* **angular:** add focusTrap prop to modal and popover ([#29729](https://github.com/ionic-team/ionic-framework/issues/29729)) ([05913c3](https://github.com/ionic-team/ionic-framework/commit/05913c3cc3f2e8cb91f9a0944cd55e78392b0ba3)), closes [#29728](https://github.com/ionic-team/ionic-framework/issues/29728)
|
||||
* **overlays:** do not overwrite id set in htmlAttributes ([#29722](https://github.com/ionic-team/ionic-framework/issues/29722)) ([92ce563](https://github.com/ionic-team/ionic-framework/commit/92ce563c402e557b08a622bd20f78459782312e2)), closes [#29712](https://github.com/ionic-team/ionic-framework/issues/29712)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.2.5](https://github.com/ionic-team/ionic-framework/compare/v8.2.4...v8.2.5) (2024-07-03)
|
||||
|
||||
|
||||
|
||||
@@ -3,160 +3,6 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [8.4.3](https://github.com/ionic-team/ionic-framework/compare/v8.4.2...v8.4.3) (2025-01-29)
|
||||
|
||||
**Note:** Version bump only for package @ionic/core
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.4.2](https://github.com/ionic-team/ionic-framework/compare/v8.4.1...v8.4.2) (2025-01-22)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **segment:** add logic to connect to segment-view in `componentDidLoad()` callback ([#30060](https://github.com/ionic-team/ionic-framework/issues/30060)) ([000f553](https://github.com/ionic-team/ionic-framework/commit/000f55303e459c583e642337fb1894f419f37d48)), closes [#30000](https://github.com/ionic-team/ionic-framework/issues/30000)
|
||||
* **select-modal:** match radio styles to iOS native ([#30119](https://github.com/ionic-team/ionic-framework/issues/30119)) ([3f8346e](https://github.com/ionic-team/ionic-framework/commit/3f8346e718ae3a6eb5008d739f10b6898b84ca9b))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.4.1](https://github.com/ionic-team/ionic-framework/compare/v8.4.0...v8.4.1) (2024-11-27)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **header:** use aria attributes to hide small title when collapsed ([#30027](https://github.com/ionic-team/ionic-framework/issues/30027)) ([23763ab](https://github.com/ionic-team/ionic-framework/commit/23763abf797f9a4ba8262225760f718e9dcc4782)), closes [#29347](https://github.com/ionic-team/ionic-framework/issues/29347)
|
||||
* **menu:** hide from screen readers while animating ([#30036](https://github.com/ionic-team/ionic-framework/issues/30036)) ([845071c](https://github.com/ionic-team/ionic-framework/commit/845071c97a856d45eb5e0bb81d9c270bc38bb604))
|
||||
* **overlays:** announce info after opening based on platform ([#30025](https://github.com/ionic-team/ionic-framework/issues/30025)) ([f6188c4](https://github.com/ionic-team/ionic-framework/commit/f6188c47e9278fe69fd9d250c65156edbe5ef32e))
|
||||
* **overlays:** focus management with checkbox/radio ([#30026](https://github.com/ionic-team/ionic-framework/issues/30026)) ([8ee42bb](https://github.com/ionic-team/ionic-framework/commit/8ee42bbc1e0bf4731d20040c7853756722f1a4b2))
|
||||
* **toast:** swipe gesture works with custom container layout ([#29999](https://github.com/ionic-team/ionic-framework/issues/29999)) ([470decc](https://github.com/ionic-team/ionic-framework/commit/470decca7b6b89ef74095ef0bb7909b93640cd78)), closes [#29998](https://github.com/ionic-team/ionic-framework/issues/29998)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [8.4.0](https://github.com/ionic-team/ionic-framework/compare/v8.3.4...v8.4.0) (2024-11-04)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **alert:** use correct heading structure for subHeader when header exists ([#29964](https://github.com/ionic-team/ionic-framework/issues/29964)) ([0fdcb32](https://github.com/ionic-team/ionic-framework/commit/0fdcb32ce0f99b284b314f79f7d0b071bc37faec))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **menu:** pass role to ionWillClose and ionDidClose events ([#29954](https://github.com/ionic-team/ionic-framework/issues/29954)) ([ee2fa19](https://github.com/ionic-team/ionic-framework/commit/ee2fa19a1e9f09d492c7c08340d95ba6a56ebb2b))
|
||||
* **segment-view:** adds support for new `ion-segment-view` component ([#29969](https://github.com/ionic-team/ionic-framework/issues/29969)) ([89508fb](https://github.com/ionic-team/ionic-framework/commit/89508fb89172900b1d11cc3fc18883f57a7fbab6))
|
||||
* **select:** add `modal` as interface ([#29972](https://github.com/ionic-team/ionic-framework/issues/29972)) ([3628ea8](https://github.com/ionic-team/ionic-framework/commit/3628ea875a66a717783de5e0a4df440872339040))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.3.4](https://github.com/ionic-team/ionic-framework/compare/v8.3.3...v8.3.4) (2024-10-30)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **backdrop:** remove tabindex for improved accessibility ([#29956](https://github.com/ionic-team/ionic-framework/issues/29956)) ([7294e96](https://github.com/ionic-team/ionic-framework/commit/7294e969bb913692eaf28e54860614f445132713)), closes [#29773](https://github.com/ionic-team/ionic-framework/issues/29773)
|
||||
* **input, textarea:** ensure screen readers announce helper and error text when focused ([#29958](https://github.com/ionic-team/ionic-framework/issues/29958)) ([5a73145](https://github.com/ionic-team/ionic-framework/commit/5a7314553a8def87bd19275640c92dd72a6ef1a4))
|
||||
* **overlay:** hide from screen readers while animating ([#29951](https://github.com/ionic-team/ionic-framework/issues/29951)) ([cb60073](https://github.com/ionic-team/ionic-framework/commit/cb6007363a8d42b5f126945427c2bfc3d7209c21)), closes [#29857](https://github.com/ionic-team/ionic-framework/issues/29857)
|
||||
* **overlays:** do not hide root when toast appears ([#29962](https://github.com/ionic-team/ionic-framework/issues/29962)) ([322d7c9](https://github.com/ionic-team/ionic-framework/commit/322d7c98cf6613df0b0db3f119e3f892e6a17e7b)), closes [#29773](https://github.com/ionic-team/ionic-framework/issues/29773)
|
||||
* **overlays:** hide the focus trap div from screen readers ([#29970](https://github.com/ionic-team/ionic-framework/issues/29970)) ([c3b58f1](https://github.com/ionic-team/ionic-framework/commit/c3b58f1620bcb74db43e3983ef570b7b982abd83)), closes [#29858](https://github.com/ionic-team/ionic-framework/issues/29858)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.3.3](https://github.com/ionic-team/ionic-framework/compare/v8.3.2...v8.3.3) (2024-10-16)
|
||||
|
||||
**Note:** Version bump only for package @ionic/core
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.3.2](https://github.com/ionic-team/ionic-framework/compare/v8.3.1...v8.3.2) (2024-10-02)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **segment:** prevent flickering for scrollable on iOS ([#29884](https://github.com/ionic-team/ionic-framework/issues/29884)) ([078ed0b](https://github.com/ionic-team/ionic-framework/commit/078ed0b86a0d8e9f8457481cb739ea214195adce)), closes [#29523](https://github.com/ionic-team/ionic-framework/issues/29523)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.3.1](https://github.com/ionic-team/ionic-framework/compare/v8.3.0...v8.3.1) (2024-09-17)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **checkbox:** align checkbox properly in item using start alignment ([#29850](https://github.com/ionic-team/ionic-framework/issues/29850)) ([88b7013](https://github.com/ionic-team/ionic-framework/commit/88b701363c1865e81d7d136acab4b9fef3b1ab7a)), closes [#29837](https://github.com/ionic-team/ionic-framework/issues/29837)
|
||||
* **datetime:** display today's date and time when value is an empty string ([#29839](https://github.com/ionic-team/ionic-framework/issues/29839)) ([f1d50c0](https://github.com/ionic-team/ionic-framework/commit/f1d50c0f645b3adf51426c24a1da0bbd1223f1d5)), closes [#29669](https://github.com/ionic-team/ionic-framework/issues/29669)
|
||||
* **range:** disable scroll when range is being dragged ([#29241](https://github.com/ionic-team/ionic-framework/issues/29241)) ([35b1a45](https://github.com/ionic-team/ionic-framework/commit/35b1a459294657b609f683457e71babd4673a3a8))
|
||||
* **react:** revert react output target version ([#29869](https://github.com/ionic-team/ionic-framework/issues/29869)) ([f64458d](https://github.com/ionic-team/ionic-framework/commit/f64458dc63a05acb955aa1f2ec3755c738466cf4)), closes [ionic-team/stencil-ds-output-targets#476](https://github.com/ionic-team/stencil-ds-output-targets/issues/476) [ionic-team/stencil-ds-output-targets#475](https://github.com/ionic-team/stencil-ds-output-targets/issues/475) [#29848](https://github.com/ionic-team/ionic-framework/issues/29848)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [8.3.0](https://github.com/ionic-team/ionic-framework/compare/v8.2.8...v8.3.0) (2024-09-05)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **checkbox:** display as block when justify or alignment properties are defined ([#29783](https://github.com/ionic-team/ionic-framework/issues/29783)) ([4ccd15e](https://github.com/ionic-team/ionic-framework/commit/4ccd15e47ad4ec7cb59d2694c5738eab1bb265ff))
|
||||
* **radio:** display as block when justify or alignment properties are defined ([#29801](https://github.com/ionic-team/ionic-framework/issues/29801)) ([18b02b3](https://github.com/ionic-team/ionic-framework/commit/18b02b3574f54a2f377f5bfe4e074bf015418dd3))
|
||||
* **react, vue, angular:** use tabs without router ([#29794](https://github.com/ionic-team/ionic-framework/issues/29794)) ([867066b](https://github.com/ionic-team/ionic-framework/commit/867066b4eba369de025f3c7c8ef33e7089cdf3bc)), closes [#25184](https://github.com/ionic-team/ionic-framework/issues/25184)
|
||||
* **toggle:** display as block when justify or alignment properties are defined ([#29802](https://github.com/ionic-team/ionic-framework/issues/29802)) ([0332c8c](https://github.com/ionic-team/ionic-framework/commit/0332c8c6ceb612840e73f789d5c5b66f05cb53d4))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.2.8](https://github.com/ionic-team/ionic-framework/compare/v8.2.7...v8.2.8) (2024-09-05)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **range:** emit correct value when knob is at start of bar ([#29820](https://github.com/ionic-team/ionic-framework/issues/29820)) ([6a3d7c7](https://github.com/ionic-team/ionic-framework/commit/6a3d7c7247f74e21a8377676daf228822f879b26)), closes [#29792](https://github.com/ionic-team/ionic-framework/issues/29792)
|
||||
* **react:** intellisense works with IntelliJ ([#29782](https://github.com/ionic-team/ionic-framework/issues/29782)) ([bacded5](https://github.com/ionic-team/ionic-framework/commit/bacded500b826df98d3ca5322c87f50f643c4692)), closes [#29755](https://github.com/ionic-team/ionic-framework/issues/29755)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.2.7](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.7) (2024-08-13)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **alert:** do not overwrite id set in htmlAttributes ([#29708](https://github.com/ionic-team/ionic-framework/issues/29708)) ([1295ced](https://github.com/ionic-team/ionic-framework/commit/1295cedae9ffbcc40389c19499e58e7e21fb424e)), closes [#29704](https://github.com/ionic-team/ionic-framework/issues/29704)
|
||||
* **content:** allow custom roles and aria attributes to be set on content ([#29753](https://github.com/ionic-team/ionic-framework/issues/29753)) ([7b16397](https://github.com/ionic-team/ionic-framework/commit/7b16397714be773fda28658ab4009755f545b735))
|
||||
* **item:** router-link remains clickable with item cover ([#29743](https://github.com/ionic-team/ionic-framework/issues/29743)) ([a9f278a](https://github.com/ionic-team/ionic-framework/commit/a9f278ad67758a19e0e12ce7ed6d13eb573b0765))
|
||||
* **overlays:** do not overwrite id set in htmlAttributes ([#29722](https://github.com/ionic-team/ionic-framework/issues/29722)) ([92ce563](https://github.com/ionic-team/ionic-framework/commit/92ce563c402e557b08a622bd20f78459782312e2)), closes [#29712](https://github.com/ionic-team/ionic-framework/issues/29712)
|
||||
* **vue:** pass router-link value to href to properly render clickable elements ([#29745](https://github.com/ionic-team/ionic-framework/issues/29745)) ([ab4f279](https://github.com/ionic-team/ionic-framework/commit/ab4f2791c1968adbb1d858c5f009fa251bb9101b))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.2.6](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.6) (2024-07-24)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **alert:** do not overwrite id set in htmlAttributes ([#29708](https://github.com/ionic-team/ionic-framework/issues/29708)) ([1295ced](https://github.com/ionic-team/ionic-framework/commit/1295cedae9ffbcc40389c19499e58e7e21fb424e)), closes [#29704](https://github.com/ionic-team/ionic-framework/issues/29704)
|
||||
* **overlays:** do not overwrite id set in htmlAttributes ([#29722](https://github.com/ionic-team/ionic-framework/issues/29722)) ([92ce563](https://github.com/ionic-team/ionic-framework/commit/92ce563c402e557b08a622bd20f78459782312e2)), closes [#29712](https://github.com/ionic-team/ionic-framework/issues/29712)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.2.5](https://github.com/ionic-team/ionic-framework/compare/v8.2.4...v8.2.5) (2024-07-03)
|
||||
|
||||
**Note:** Version bump only for package @ionic/core
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
# Get Playwright
|
||||
FROM mcr.microsoft.com/playwright:v1.46.1
|
||||
FROM mcr.microsoft.com/playwright:v1.45.0
|
||||
|
||||
# Set the working directory
|
||||
WORKDIR /ionic
|
||||
|
||||
37
core/api.txt
37
core/api.txt
@@ -143,7 +143,6 @@ ion-alert,css-prop,--width,ios
|
||||
ion-alert,css-prop,--width,md
|
||||
|
||||
ion-app,none
|
||||
ion-app,method,setFocus,setFocus(elements: HTMLElement[]) => Promise<void>
|
||||
|
||||
ion-avatar,shadow
|
||||
ion-avatar,css-prop,--border-radius,ios
|
||||
@@ -394,12 +393,12 @@ ion-card-title,css-prop,--color,ios
|
||||
ion-card-title,css-prop,--color,md
|
||||
|
||||
ion-checkbox,shadow
|
||||
ion-checkbox,prop,alignment,"center" | "start" | undefined,undefined,false,false
|
||||
ion-checkbox,prop,alignment,"center" | "start",'center',false,false
|
||||
ion-checkbox,prop,checked,boolean,false,false,false
|
||||
ion-checkbox,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
|
||||
ion-checkbox,prop,disabled,boolean,false,false,false
|
||||
ion-checkbox,prop,indeterminate,boolean,false,false,false
|
||||
ion-checkbox,prop,justify,"end" | "space-between" | "start" | undefined,undefined,false,false
|
||||
ion-checkbox,prop,justify,"end" | "space-between" | "start",'space-between',false,false
|
||||
ion-checkbox,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
|
||||
ion-checkbox,prop,mode,"ios" | "md",undefined,false,false
|
||||
ion-checkbox,prop,name,string,this.inputId,false,false
|
||||
@@ -1000,15 +999,15 @@ ion-menu,prop,menuId,string | undefined,undefined,false,true
|
||||
ion-menu,prop,side,"end" | "start",'start',false,true
|
||||
ion-menu,prop,swipeGesture,boolean,true,false,false
|
||||
ion-menu,prop,type,"overlay" | "push" | "reveal" | undefined,undefined,false,false
|
||||
ion-menu,method,close,close(animated?: boolean, role?: string) => Promise<boolean>
|
||||
ion-menu,method,close,close(animated?: boolean) => Promise<boolean>
|
||||
ion-menu,method,isActive,isActive() => Promise<boolean>
|
||||
ion-menu,method,isOpen,isOpen() => Promise<boolean>
|
||||
ion-menu,method,open,open(animated?: boolean) => Promise<boolean>
|
||||
ion-menu,method,setOpen,setOpen(shouldOpen: boolean, animated?: boolean, role?: string) => Promise<boolean>
|
||||
ion-menu,method,setOpen,setOpen(shouldOpen: boolean, animated?: boolean) => Promise<boolean>
|
||||
ion-menu,method,toggle,toggle(animated?: boolean) => Promise<boolean>
|
||||
ion-menu,event,ionDidClose,MenuCloseEventDetail,true
|
||||
ion-menu,event,ionDidClose,void,true
|
||||
ion-menu,event,ionDidOpen,void,true
|
||||
ion-menu,event,ionWillClose,MenuCloseEventDetail,true
|
||||
ion-menu,event,ionWillClose,void,true
|
||||
ion-menu,event,ionWillOpen,void,true
|
||||
ion-menu,css-prop,--background,ios
|
||||
ion-menu,css-prop,--background,md
|
||||
@@ -1320,10 +1319,10 @@ ion-progress-bar,part,stream
|
||||
ion-progress-bar,part,track
|
||||
|
||||
ion-radio,shadow
|
||||
ion-radio,prop,alignment,"center" | "start" | undefined,undefined,false,false
|
||||
ion-radio,prop,alignment,"center" | "start",'center',false,false
|
||||
ion-radio,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
|
||||
ion-radio,prop,disabled,boolean,false,false,false
|
||||
ion-radio,prop,justify,"end" | "space-between" | "start" | undefined,undefined,false,false
|
||||
ion-radio,prop,justify,"end" | "space-between" | "start",'space-between',false,false
|
||||
ion-radio,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
|
||||
ion-radio,prop,mode,"ios" | "md",undefined,false,false
|
||||
ion-radio,prop,name,string,this.inputId,false,false
|
||||
@@ -1542,7 +1541,6 @@ ion-segment,css-prop,--background,ios
|
||||
ion-segment,css-prop,--background,md
|
||||
|
||||
ion-segment-button,shadow
|
||||
ion-segment-button,prop,contentId,string | undefined,undefined,false,true
|
||||
ion-segment-button,prop,disabled,boolean,false,false,false
|
||||
ion-segment-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined,'icon-top',false,false
|
||||
ion-segment-button,prop,mode,"ios" | "md",undefined,false,false
|
||||
@@ -1608,12 +1606,6 @@ ion-segment-button,part,indicator
|
||||
ion-segment-button,part,indicator-background
|
||||
ion-segment-button,part,native
|
||||
|
||||
ion-segment-content,shadow
|
||||
|
||||
ion-segment-view,shadow
|
||||
ion-segment-view,prop,disabled,boolean,false,false,false
|
||||
ion-segment-view,event,ionSegmentViewScroll,SegmentViewScrollEvent,true
|
||||
|
||||
ion-select,shadow
|
||||
ion-select,prop,cancelText,string,'Cancel',false,false
|
||||
ion-select,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
|
||||
@@ -1621,9 +1613,9 @@ ion-select,prop,compareWith,((currentValue: any, compareValue: any) => boolean)
|
||||
ion-select,prop,disabled,boolean,false,false,false
|
||||
ion-select,prop,expandedIcon,string | undefined,undefined,false,false
|
||||
ion-select,prop,fill,"outline" | "solid" | undefined,undefined,false,false
|
||||
ion-select,prop,interface,"action-sheet" | "alert" | "modal" | "popover",'alert',false,false
|
||||
ion-select,prop,interface,"action-sheet" | "alert" | "popover",'alert',false,false
|
||||
ion-select,prop,interfaceOptions,any,{},false,false
|
||||
ion-select,prop,justify,"end" | "space-between" | "start" | undefined,undefined,false,false
|
||||
ion-select,prop,justify,"end" | "space-between" | "start",'space-between',false,false
|
||||
ion-select,prop,label,string | undefined,undefined,false,false
|
||||
ion-select,prop,labelPlacement,"end" | "fixed" | "floating" | "stacked" | "start" | undefined,'start',false,false
|
||||
ion-select,prop,mode,"ios" | "md",undefined,false,false
|
||||
@@ -1679,11 +1671,6 @@ ion-select,part,label
|
||||
ion-select,part,placeholder
|
||||
ion-select,part,text
|
||||
|
||||
ion-select-modal,scoped
|
||||
ion-select-modal,prop,header,string | undefined,undefined,false,false
|
||||
ion-select-modal,prop,multiple,boolean | undefined,undefined,false,false
|
||||
ion-select-modal,prop,options,SelectModalOption[],[],false,false
|
||||
|
||||
ion-select-option,shadow
|
||||
ion-select-option,prop,disabled,boolean,false,false,false
|
||||
ion-select-option,prop,value,any,undefined,false,false
|
||||
@@ -1935,12 +1922,12 @@ ion-toast,part,icon
|
||||
ion-toast,part,message
|
||||
|
||||
ion-toggle,shadow
|
||||
ion-toggle,prop,alignment,"center" | "start" | undefined,undefined,false,false
|
||||
ion-toggle,prop,alignment,"center" | "start",'center',false,false
|
||||
ion-toggle,prop,checked,boolean,false,false,false
|
||||
ion-toggle,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
|
||||
ion-toggle,prop,disabled,boolean,false,false,false
|
||||
ion-toggle,prop,enableOnOffLabels,boolean | undefined,config.get('toggleOnOffLabels'),false,false
|
||||
ion-toggle,prop,justify,"end" | "space-between" | "start" | undefined,undefined,false,false
|
||||
ion-toggle,prop,justify,"end" | "space-between" | "start",'space-between',false,false
|
||||
ion-toggle,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
|
||||
ion-toggle,prop,mode,"ios" | "md",undefined,false,false
|
||||
ion-toggle,prop,name,string,this.inputId,false,false
|
||||
|
||||
@@ -67,5 +67,4 @@ const ASYNC_PLAYWRIGHT_ASSERTS = [
|
||||
'toHaveTitle',
|
||||
'toHaveURL',
|
||||
'toBeOK',
|
||||
'click'
|
||||
];
|
||||
|
||||
807
core/package-lock.json
generated
807
core/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@ionic/core",
|
||||
"version": "8.4.3",
|
||||
"version": "8.2.5",
|
||||
"description": "Base components for Ionic",
|
||||
"keywords": [
|
||||
"ionic",
|
||||
@@ -23,6 +23,302 @@
|
||||
"collection:main": "dist/collection/index.js",
|
||||
"collection": "dist/collection/collection-manifest.json",
|
||||
"types": "dist/types/interface.d.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./dist/index.js",
|
||||
"require": "./dist/index.cjs.js",
|
||||
"types": "./dist/types/interface.d.ts"
|
||||
},
|
||||
"./components": {
|
||||
"import": "./components/index.js",
|
||||
"types": "./components/index.d.ts"
|
||||
},
|
||||
"./loader": {
|
||||
"import": "./loader/index.js",
|
||||
"require": "./loader/index.cjs.js",
|
||||
"types": "./loader/index.d.ts"
|
||||
},
|
||||
"./components/*": {
|
||||
"import": "./components/*",
|
||||
"types": "./components/*"
|
||||
},
|
||||
"./docs.json": {
|
||||
"import": "./dist/docs.json",
|
||||
"require": "./dist/docs.json"
|
||||
},
|
||||
"./ion-accordion-group": {
|
||||
"import": "./components/ion-accordion-group.js",
|
||||
"types": "./components/ion-accordion-group.d.ts"
|
||||
},
|
||||
"./ion-accordion": {
|
||||
"import": "./components/ion-accordion.js",
|
||||
"types": "./components/ion-accordion.d.ts"
|
||||
},
|
||||
"./ion-avatar": {
|
||||
"import": "./components/ion-avatar.js",
|
||||
"types": "./components/ion-avatar.d.ts"
|
||||
},
|
||||
"./ion-backdrop": {
|
||||
"import": "./components/ion-backdrop.js",
|
||||
"types": "./components/ion-backdrop.d.ts"
|
||||
},
|
||||
"./ion-badge": {
|
||||
"import": "./components/ion-badge.js",
|
||||
"types": "./components/ion-badge.d.ts"
|
||||
},
|
||||
"./ion-breadcrumbs": {
|
||||
"import": "./components/ion-breadcrumbs.js",
|
||||
"types": "./components/ion-breadcrumbs.d.ts"
|
||||
},
|
||||
"./ion-buttons": {
|
||||
"import": "./components/ion-buttons.js",
|
||||
"types": "./components/ion-buttons.d.ts"
|
||||
},
|
||||
"./ion-card-content": {
|
||||
"import": "./components/ion-card-content.js",
|
||||
"types": "./components/ion-card-content.d.ts"
|
||||
},
|
||||
"./ion-card-header": {
|
||||
"import": "./components/ion-card-header.js",
|
||||
"types": "./components/ion-card-header.d.ts"
|
||||
},
|
||||
"./ion-card-subtitle": {
|
||||
"import": "./components/ion-card-subtitle.js",
|
||||
"types": "./components/ion-card-subtitle.d.ts"
|
||||
},
|
||||
"./ion-card-title": {
|
||||
"import": "./components/ion-card-title.js",
|
||||
"types": "./components/ion-card-title.d.ts"
|
||||
},
|
||||
"./ion-checkbox": {
|
||||
"import": "./components/ion-checkbox.js",
|
||||
"types": "./components/ion-checkbox.d.ts"
|
||||
},
|
||||
"./ion-chip": {
|
||||
"import": "./components/ion-chip.js",
|
||||
"types": "./components/ion-chip.d.ts"
|
||||
},
|
||||
"./ion-col": {
|
||||
"import": "./components/ion-col.js",
|
||||
"types": "./components/ion-col.d.ts"
|
||||
},
|
||||
"./ion-content": {
|
||||
"import": "./components/ion-content.js",
|
||||
"types": "./components/ion-content.d.ts"
|
||||
},
|
||||
"./ion-datetime-button": {
|
||||
"import": "./components/ion-datetime-button.js",
|
||||
"types": "./components/ion-datetime-button.d.ts"
|
||||
},
|
||||
"./ion-datetime": {
|
||||
"import": "./components/ion-datetime.js",
|
||||
"types": "./components/ion-datetime.d.ts"
|
||||
},
|
||||
"./ion-fab-list": {
|
||||
"import": "./components/ion-fab-list.js",
|
||||
"types": "./components/ion-fab-list.d.ts"
|
||||
},
|
||||
"./ion-fab": {
|
||||
"import": "./components/ion-fab.js",
|
||||
"types": "./components/ion-fab.d.ts"
|
||||
},
|
||||
"./ion-footer": {
|
||||
"import": "./components/ion-footer.js",
|
||||
"types": "./components/ion-footer.d.ts"
|
||||
},
|
||||
"./ion-grid": {
|
||||
"import": "./components/ion-grid.js",
|
||||
"types": "./components/ion-grid.d.ts"
|
||||
},
|
||||
"./ion-header": {
|
||||
"import": "./components/ion-header.js",
|
||||
"types": "./components/ion-header.d.ts"
|
||||
},
|
||||
"./ion-img": {
|
||||
"import": "./components/ion-img.js",
|
||||
"types": "./components/ion-img.d.ts"
|
||||
},
|
||||
"./ion-infinite-scroll-content": {
|
||||
"import": "./components/ion-infinite-scroll-content.js",
|
||||
"types": "./components/ion-infinite-scroll-content.d.ts"
|
||||
},
|
||||
"./ion-infinite-scroll": {
|
||||
"import": "./components/ion-infinite-scroll.js",
|
||||
"types": "./components/ion-infinite-scroll.d.ts"
|
||||
},
|
||||
"./ion-input-password-toggle": {
|
||||
"import": "./components/ion-input-password-toggle.js",
|
||||
"types": "./components/ion-input-password-toggle.d.ts"
|
||||
},
|
||||
"./ion-input": {
|
||||
"import": "./components/ion-input.js",
|
||||
"types": "./components/ion-input.d.ts"
|
||||
},
|
||||
"./ion-item-divider": {
|
||||
"import": "./components/ion-item-divider.js",
|
||||
"types": "./components/ion-item-divider.d.ts"
|
||||
},
|
||||
"./ion-item-group": {
|
||||
"import": "./components/ion-item-group.js",
|
||||
"types": "./components/ion-item-group.d.ts"
|
||||
},
|
||||
"./ion-item-options": {
|
||||
"import": "./components/ion-item-options.js",
|
||||
"types": "./components/ion-item-options.d.ts"
|
||||
},
|
||||
"./ion-item-sliding": {
|
||||
"import": "./components/ion-item-sliding.js",
|
||||
"types": "./components/ion-item-sliding.d.ts"
|
||||
},
|
||||
"./ion-label": {
|
||||
"import": "./components/ion-label.js",
|
||||
"types": "./components/ion-label.d.ts"
|
||||
},
|
||||
"./ion-list-header": {
|
||||
"import": "./components/ion-list-header.js",
|
||||
"types": "./components/ion-list-header.d.ts"
|
||||
},
|
||||
"./ion-list": {
|
||||
"import": "./components/ion-list.js",
|
||||
"types": "./components/ion-list.d.ts"
|
||||
},
|
||||
"./ion-menu-button": {
|
||||
"import": "./components/ion-menu-button.js",
|
||||
"types": "./components/ion-menu-button.d.ts"
|
||||
},
|
||||
"./ion-menu-toggle": {
|
||||
"import": "./components/ion-menu-toggle.js",
|
||||
"types": "./components/ion-menu-toggle.d.ts"
|
||||
},
|
||||
"./ion-menu": {
|
||||
"import": "./components/ion-menu.js",
|
||||
"types": "./components/ion-menu.d.ts"
|
||||
},
|
||||
"./ion-nav-link": {
|
||||
"import": "./components/ion-nav-link.js",
|
||||
"types": "./components/ion-nav-link.d.ts"
|
||||
},
|
||||
"./ion-nav": {
|
||||
"import": "./components/ion-nav.js",
|
||||
"types": "./components/ion-nav.d.ts"
|
||||
},
|
||||
"./ion-note": {
|
||||
"import": "./components/ion-note.js",
|
||||
"types": "./components/ion-note.d.ts"
|
||||
},
|
||||
"./ion-picker-column-option": {
|
||||
"import": "./components/ion-picker-column-option.js",
|
||||
"types": "./components/ion-picker-column-option.d.ts"
|
||||
},
|
||||
"./ion-picker-column": {
|
||||
"import": "./components/ion-picker-column.js",
|
||||
"types": "./components/ion-picker-column.d.ts"
|
||||
},
|
||||
"./ion-picker": {
|
||||
"import": "./components/ion-picker.js",
|
||||
"types": "./components/ion-picker.d.ts"
|
||||
},
|
||||
"./ion-progress-bar": {
|
||||
"import": "./components/ion-progress-bar.js",
|
||||
"types": "./components/ion-progress-bar.d.ts"
|
||||
},
|
||||
"./ion-radio-group": {
|
||||
"import": "./components/ion-radio-group.js",
|
||||
"types": "./components/ion-radio-group.d.ts"
|
||||
},
|
||||
"./ion-radio": {
|
||||
"import": "./components/ion-radio.js",
|
||||
"types": "./components/ion-radio.d.ts"
|
||||
},
|
||||
"./ion-range": {
|
||||
"import": "./components/ion-range.js",
|
||||
"types": "./components/ion-range.d.ts"
|
||||
},
|
||||
"./ion-refresher-content": {
|
||||
"import": "./components/ion-refresher-content.js",
|
||||
"types": "./components/ion-refresher-content.d.ts"
|
||||
},
|
||||
"./ion-refresher": {
|
||||
"import": "./components/ion-refresher.js",
|
||||
"types": "./components/ion-refresher.d.ts"
|
||||
},
|
||||
"./ion-reorder-group": {
|
||||
"import": "./components/ion-reorder-group.js",
|
||||
"types": "./components/ion-reorder-group.d.ts"
|
||||
},
|
||||
"./ion-reorder": {
|
||||
"import": "./components/ion-reorder.js",
|
||||
"types": "./components/ion-reorder.d.ts"
|
||||
},
|
||||
"./ion-ripple-effect": {
|
||||
"import": "./components/ion-ripple-effect.js",
|
||||
"types": "./components/ion-ripple-effect.d.ts"
|
||||
},
|
||||
"./ion-row": {
|
||||
"import": "./components/ion-row.js",
|
||||
"types": "./components/ion-row.d.ts"
|
||||
},
|
||||
"./ion-searchbar": {
|
||||
"import": "./components/ion-searchbar.js",
|
||||
"types": "./components/ion-searchbar.d.ts"
|
||||
},
|
||||
"./ion-segment-button": {
|
||||
"import": "./components/ion-segment-button.js",
|
||||
"types": "./components/ion-segment-button.d.ts"
|
||||
},
|
||||
"./ion-segment": {
|
||||
"import": "./components/ion-segment.js",
|
||||
"types": "./components/ion-segment.d.ts"
|
||||
},
|
||||
"./ion-select-option": {
|
||||
"import": "./components/ion-select-option.js",
|
||||
"types": "./components/ion-select-option.d.ts"
|
||||
},
|
||||
"./ion-select": {
|
||||
"import": "./components/ion-select.js",
|
||||
"types": "./components/ion-select.d.ts"
|
||||
},
|
||||
"./ion-skeleton-text": {
|
||||
"import": "./components/ion-skeleton-text.js",
|
||||
"types": "./components/ion-skeleton-text.d.ts"
|
||||
},
|
||||
"./ion-spinner": {
|
||||
"import": "./components/ion-spinner.js",
|
||||
"types": "./components/ion-spinner.d.ts"
|
||||
},
|
||||
"./ion-split-pane": {
|
||||
"import": "./components/ion-split-pane.js",
|
||||
"types": "./components/ion-split-pane.d.ts"
|
||||
},
|
||||
"./ion-tab": {
|
||||
"import": "./components/ion-tab.js",
|
||||
"types": "./components/ion-tab.d.ts"
|
||||
},
|
||||
"./ion-text": {
|
||||
"import": "./components/ion-text.js",
|
||||
"types": "./components/ion-text.d.ts"
|
||||
},
|
||||
"./ion-textarea": {
|
||||
"import": "./components/ion-textarea.js",
|
||||
"types": "./components/ion-textarea.d.ts"
|
||||
},
|
||||
"./ion-thumbnail": {
|
||||
"import": "./components/ion-thumbnail.js",
|
||||
"types": "./components/ion-thumbnail.d.ts"
|
||||
},
|
||||
"./ion-title": {
|
||||
"import": "./components/ion-title.js",
|
||||
"types": "./components/ion-title.d.ts"
|
||||
},
|
||||
"./ion-toggle": {
|
||||
"import": "./components/ion-toggle.js",
|
||||
"types": "./components/ion-toggle.d.ts"
|
||||
},
|
||||
"./ion-toolbar": {
|
||||
"import": "./components/ion-toolbar.js",
|
||||
"types": "./components/ion-toolbar.d.ts"
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"components/",
|
||||
"css/",
|
||||
@@ -31,26 +327,26 @@
|
||||
"loader/"
|
||||
],
|
||||
"dependencies": {
|
||||
"@stencil/core": "4.20.0",
|
||||
"@stencil/core": "^4.19.2",
|
||||
"ionicons": "^7.2.2",
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@axe-core/playwright": "^4.10.0",
|
||||
"@axe-core/playwright": "^4.9.1",
|
||||
"@capacitor/core": "^6.0.0",
|
||||
"@capacitor/haptics": "^6.0.0",
|
||||
"@capacitor/keyboard": "^6.0.0",
|
||||
"@capacitor/status-bar": "^6.0.0",
|
||||
"@clack/prompts": "^0.9.0",
|
||||
"@clack/prompts": "^0.7.0",
|
||||
"@ionic/eslint-config": "^0.3.0",
|
||||
"@ionic/prettier-config": "^2.0.0",
|
||||
"@playwright/test": "^1.46.1",
|
||||
"@playwright/test": "^1.45.0",
|
||||
"@rollup/plugin-node-resolve": "^8.4.0",
|
||||
"@rollup/plugin-virtual": "^2.0.3",
|
||||
"@stencil/angular-output-target": "^0.10.0",
|
||||
"@stencil/react-output-target": "0.5.3",
|
||||
"@stencil/angular-output-target": "^0.8.4",
|
||||
"@stencil/react-output-target": "^0.5.3",
|
||||
"@stencil/sass": "^3.0.9",
|
||||
"@stencil/vue-output-target": "^0.9.0",
|
||||
"@stencil/vue-output-target": "^0.8.7",
|
||||
"@types/jest": "^29.5.6",
|
||||
"@types/node": "^14.6.0",
|
||||
"@typescript-eslint/eslint-plugin": "^6.7.2",
|
||||
|
||||
@@ -49,19 +49,8 @@ html.ios.ios {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "iosTestingFont", sans-serif;
|
||||
}
|
||||
|
||||
/**
|
||||
* Button styles should only be applied
|
||||
* to native buttons that are not part of the
|
||||
* Ionic framework.
|
||||
* Otherwise, the styles may not appear correctly
|
||||
* when comparing between testing and production.
|
||||
* This issue occurs only with `scoped` components,
|
||||
* which is why `sc-ion-` is used as a filter,
|
||||
* since this class is specifically added to `scoped`
|
||||
* components.
|
||||
*/
|
||||
ion-content button:not([class*="sc-ion-"]),
|
||||
main button:not([class*="sc-ion-"]) {
|
||||
ion-content button,
|
||||
main button {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
clear: both;
|
||||
@@ -74,19 +63,8 @@ main button:not([class*="sc-ion-"]) {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Button styles should only be applied
|
||||
* to native buttons that are not part of the
|
||||
* Ionic framework.
|
||||
* Otherwise, the styles may not appear correctly
|
||||
* when comparing between testing and production.
|
||||
* This issue occurs only with `scoped` components,
|
||||
* which is why `sc-ion-` is used as a filter,
|
||||
* since this class is specifically added to `scoped`
|
||||
* components.
|
||||
*/
|
||||
ion-content button.expand:not([class*="sc-ion-"]),
|
||||
main button.expand:not([class*="sc-ion-"]) {
|
||||
ion-content button.expand,
|
||||
main button.expand {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
158
core/src/components.d.ts
vendored
158
core/src/components.d.ts
vendored
@@ -18,7 +18,7 @@ import { ScrollBaseDetail, ScrollDetail } from "./components/content/content-int
|
||||
import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
|
||||
import { SpinnerTypes } from "./components/spinner/spinner-configs";
|
||||
import { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
|
||||
import { MenuChangeEventDetail, MenuCloseEventDetail, MenuType, Side } from "./components/menu/menu-interface";
|
||||
import { MenuChangeEventDetail, MenuType, Side } from "./components/menu/menu-interface";
|
||||
import { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
|
||||
import { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface";
|
||||
import { ViewController } from "./components/nav/view-controller";
|
||||
@@ -34,9 +34,7 @@ import { NavigationHookCallback } from "./components/route/route-interface";
|
||||
import { SearchbarChangeEventDetail, SearchbarInputEventDetail } from "./components/searchbar/searchbar-interface";
|
||||
import { SegmentChangeEventDetail, SegmentValue } from "./components/segment/segment-interface";
|
||||
import { SegmentButtonLayout } from "./components/segment-button/segment-button-interface";
|
||||
import { SegmentViewScrollEvent } from "./components/segment-view/segment-view-interface";
|
||||
import { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
|
||||
import { SelectModalOption } from "./components/select-modal/select-modal-interface";
|
||||
import { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
|
||||
import { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
|
||||
import { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
|
||||
@@ -55,7 +53,7 @@ export { ScrollBaseDetail, ScrollDetail } from "./components/content/content-int
|
||||
export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
|
||||
export { SpinnerTypes } from "./components/spinner/spinner-configs";
|
||||
export { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
|
||||
export { MenuChangeEventDetail, MenuCloseEventDetail, MenuType, Side } from "./components/menu/menu-interface";
|
||||
export { MenuChangeEventDetail, MenuType, Side } from "./components/menu/menu-interface";
|
||||
export { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
|
||||
export { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface";
|
||||
export { ViewController } from "./components/nav/view-controller";
|
||||
@@ -71,9 +69,7 @@ export { NavigationHookCallback } from "./components/route/route-interface";
|
||||
export { SearchbarChangeEventDetail, SearchbarInputEventDetail } from "./components/searchbar/searchbar-interface";
|
||||
export { SegmentChangeEventDetail, SegmentValue } from "./components/segment/segment-interface";
|
||||
export { SegmentButtonLayout } from "./components/segment-button/segment-button-interface";
|
||||
export { SegmentViewScrollEvent } from "./components/segment-view/segment-view-interface";
|
||||
export { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
|
||||
export { SelectModalOption } from "./components/select-modal/select-modal-interface";
|
||||
export { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
|
||||
export { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
|
||||
export { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
|
||||
@@ -308,9 +304,6 @@ export namespace Components {
|
||||
"trigger": string | undefined;
|
||||
}
|
||||
interface IonApp {
|
||||
/**
|
||||
* Used to set focus on an element that uses `ion-focusable`. Do not use this if focusing the element as a result of a keyboard event as the focus utility should handle this for us. This method should be used when we want to programmatically focus an element as a result of another user action. (Ex: We focus the first element inside of a popover when the user presents it, but the popover is not always presented as a result of keyboard action.)
|
||||
*/
|
||||
"setFocus": (elements: HTMLElement[]) => Promise<void>;
|
||||
}
|
||||
interface IonAvatar {
|
||||
@@ -608,9 +601,9 @@ export namespace Components {
|
||||
}
|
||||
interface IonCheckbox {
|
||||
/**
|
||||
* How to control the alignment of the checkbox and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the checkbox `display` to `block`.
|
||||
* How to control the alignment of the checkbox and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
|
||||
*/
|
||||
"alignment"?: 'start' | 'center';
|
||||
"alignment": 'start' | 'center';
|
||||
/**
|
||||
* If `true`, the checkbox is selected.
|
||||
*/
|
||||
@@ -628,9 +621,9 @@ export namespace Components {
|
||||
*/
|
||||
"indeterminate": boolean;
|
||||
/**
|
||||
* How to pack the label and checkbox within a line. `"start"`: The label and checkbox will appear on the left in LTR and on the right in RTL. `"end"`: The label and checkbox will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and checkbox will appear on opposite ends of the line with space between the two elements. Setting this property will change the checkbox `display` to `block`.
|
||||
* How to pack the label and checkbox within a line. `"start"`: The label and checkbox will appear on the left in LTR and on the right in RTL. `"end"`: The label and checkbox will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and checkbox will appear on opposite ends of the line with space between the two elements.
|
||||
*/
|
||||
"justify"?: 'start' | 'end' | 'space-between';
|
||||
"justify": 'start' | 'end' | 'space-between';
|
||||
/**
|
||||
* Where to place the label relative to the checkbox. `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
|
||||
*/
|
||||
@@ -643,7 +636,6 @@ export namespace Components {
|
||||
* The name of the control, which is submitted with the form data.
|
||||
*/
|
||||
"name": string;
|
||||
"setFocus": () => Promise<void>;
|
||||
/**
|
||||
* The value of the checkbox does not mean if it's checked or not, use the `checked` property for that. The value of a checkbox is analogous to the value of an `<input type="checkbox">`, it's only used when the checkbox participates in a native `<form>`.
|
||||
*/
|
||||
@@ -1601,7 +1593,7 @@ export namespace Components {
|
||||
/**
|
||||
* Closes the menu. If the menu is already closed or it can't be closed, it returns `false`.
|
||||
*/
|
||||
"close": (animated?: boolean, role?: string) => Promise<boolean>;
|
||||
"close": (animated?: boolean) => Promise<boolean>;
|
||||
/**
|
||||
* The `id` of the main content. When using a router this is typically `ion-router-outlet`. When not using a router, this is typically your main view's `ion-content`. This is not the id of the `ion-content` inside of your `ion-menu`.
|
||||
*/
|
||||
@@ -1633,7 +1625,7 @@ export namespace Components {
|
||||
/**
|
||||
* Opens or closes the button. If the operation can't be completed successfully, it returns `false`.
|
||||
*/
|
||||
"setOpen": (shouldOpen: boolean, animated?: boolean, role?: string) => Promise<boolean>;
|
||||
"setOpen": (shouldOpen: boolean, animated?: boolean) => Promise<boolean>;
|
||||
/**
|
||||
* Which side of the view the menu should be placed.
|
||||
*/
|
||||
@@ -2256,9 +2248,9 @@ export namespace Components {
|
||||
}
|
||||
interface IonRadio {
|
||||
/**
|
||||
* How to control the alignment of the radio and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the radio `display` to `block`.
|
||||
* How to control the alignment of the radio and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
|
||||
*/
|
||||
"alignment"?: 'start' | 'center';
|
||||
"alignment": 'start' | 'center';
|
||||
/**
|
||||
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
|
||||
*/
|
||||
@@ -2268,9 +2260,9 @@ export namespace Components {
|
||||
*/
|
||||
"disabled": boolean;
|
||||
/**
|
||||
* How to pack the label and radio within a line. `"start"`: The label and radio will appear on the left in LTR and on the right in RTL. `"end"`: The label and radio will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and radio will appear on opposite ends of the line with space between the two elements. Setting this property will change the radio `display` to `block`.
|
||||
* How to pack the label and radio within a line. `"start"`: The label and radio will appear on the left in LTR and on the right in RTL. `"end"`: The label and radio will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and radio will appear on opposite ends of the line with space between the two elements.
|
||||
*/
|
||||
"justify"?: 'start' | 'end' | 'space-between';
|
||||
"justify": 'start' | 'end' | 'space-between';
|
||||
/**
|
||||
* Where to place the label relative to the radio. `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL. `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
|
||||
*/
|
||||
@@ -2284,7 +2276,7 @@ export namespace Components {
|
||||
*/
|
||||
"name": string;
|
||||
"setButtonTabindex": (value: number) => Promise<void>;
|
||||
"setFocus": (ev?: globalThis.Event) => Promise<void>;
|
||||
"setFocus": (ev: globalThis.Event) => Promise<void>;
|
||||
/**
|
||||
* the value of the radio.
|
||||
*/
|
||||
@@ -2303,7 +2295,6 @@ export namespace Components {
|
||||
* The name of the control, which is submitted with the form data.
|
||||
*/
|
||||
"name": string;
|
||||
"setFocus": () => Promise<void>;
|
||||
/**
|
||||
* the value of the radio group.
|
||||
*/
|
||||
@@ -2699,10 +2690,6 @@ export namespace Components {
|
||||
"value"?: SegmentValue;
|
||||
}
|
||||
interface IonSegmentButton {
|
||||
/**
|
||||
* The `id` of the segment content.
|
||||
*/
|
||||
"contentId"?: string;
|
||||
/**
|
||||
* If `true`, the user cannot interact with the segment button.
|
||||
*/
|
||||
@@ -2725,19 +2712,6 @@ export namespace Components {
|
||||
*/
|
||||
"value": SegmentValue;
|
||||
}
|
||||
interface IonSegmentContent {
|
||||
}
|
||||
interface IonSegmentView {
|
||||
/**
|
||||
* If `true`, the segment view cannot be interacted with.
|
||||
*/
|
||||
"disabled": boolean;
|
||||
/**
|
||||
* @param id : The id of the segment content to display.
|
||||
* @param smoothScroll : Whether to animate the scroll transition.
|
||||
*/
|
||||
"setContent": (id: string, smoothScroll?: boolean) => Promise<void>;
|
||||
}
|
||||
interface IonSelect {
|
||||
/**
|
||||
* The text to display on the cancel button.
|
||||
@@ -2764,17 +2738,17 @@ export namespace Components {
|
||||
*/
|
||||
"fill"?: 'outline' | 'solid';
|
||||
/**
|
||||
* The interface the select should use: `action-sheet`, `popover`, `alert`, or `modal`.
|
||||
* The interface the select should use: `action-sheet`, `popover` or `alert`.
|
||||
*/
|
||||
"interface": SelectInterface;
|
||||
/**
|
||||
* Any additional options that the `alert`, `action-sheet` or `popover` interface can take. See the [ion-alert docs](./alert), the [ion-action-sheet docs](./action-sheet), the [ion-popover docs](./popover), and the [ion-modal docs](./modal) for the create options for each interface. Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.
|
||||
* Any additional options that the `alert`, `action-sheet` or `popover` interface can take. See the [ion-alert docs](./alert), the [ion-action-sheet docs](./action-sheet) and the [ion-popover docs](./popover) for the create options for each interface. Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.
|
||||
*/
|
||||
"interfaceOptions": any;
|
||||
/**
|
||||
* How to pack the label and select within a line. `justify` does not apply when the label and select are on different lines when `labelPlacement` is set to `"floating"` or `"stacked"`. `"start"`: The label and select will appear on the left in LTR and on the right in RTL. `"end"`: The label and select will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and select will appear on opposite ends of the line with space between the two elements.
|
||||
*/
|
||||
"justify"?: 'start' | 'end' | 'space-between';
|
||||
"justify": 'start' | 'end' | 'space-between';
|
||||
/**
|
||||
* The visible label associated with the select. Use this if you need to render a plaintext label. The `label` property will take priority over the `label` slot if both are used.
|
||||
*/
|
||||
@@ -2825,11 +2799,6 @@ export namespace Components {
|
||||
*/
|
||||
"value"?: any | null;
|
||||
}
|
||||
interface IonSelectModal {
|
||||
"header"?: string;
|
||||
"multiple"?: boolean;
|
||||
"options": SelectModalOption[];
|
||||
}
|
||||
interface IonSelectOption {
|
||||
/**
|
||||
* If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons.
|
||||
@@ -3245,9 +3214,9 @@ export namespace Components {
|
||||
}
|
||||
interface IonToggle {
|
||||
/**
|
||||
* How to control the alignment of the toggle and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the toggle `display` to `block`.
|
||||
* How to control the alignment of the toggle and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
|
||||
*/
|
||||
"alignment"?: 'start' | 'center';
|
||||
"alignment": 'start' | 'center';
|
||||
/**
|
||||
* If `true`, the toggle is selected.
|
||||
*/
|
||||
@@ -3265,9 +3234,9 @@ export namespace Components {
|
||||
*/
|
||||
"enableOnOffLabels": boolean | undefined;
|
||||
/**
|
||||
* How to pack the label and toggle within a line. `"start"`: The label and toggle will appear on the left in LTR and on the right in RTL. `"end"`: The label and toggle will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and toggle will appear on opposite ends of the line with space between the two elements. Setting this property will change the toggle `display` to `block`.
|
||||
* How to pack the label and toggle within a line. `"start"`: The label and toggle will appear on the left in LTR and on the right in RTL. `"end"`: The label and toggle will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and toggle will appear on opposite ends of the line with space between the two elements.
|
||||
*/
|
||||
"justify"?: 'start' | 'end' | 'space-between';
|
||||
"justify": 'start' | 'end' | 'space-between';
|
||||
/**
|
||||
* Where to place the label relative to the input. `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
|
||||
*/
|
||||
@@ -3444,10 +3413,6 @@ export interface IonSegmentCustomEvent<T> extends CustomEvent<T> {
|
||||
detail: T;
|
||||
target: HTMLIonSegmentElement;
|
||||
}
|
||||
export interface IonSegmentViewCustomEvent<T> extends CustomEvent<T> {
|
||||
detail: T;
|
||||
target: HTMLIonSegmentViewElement;
|
||||
}
|
||||
export interface IonSelectCustomEvent<T> extends CustomEvent<T> {
|
||||
detail: T;
|
||||
target: HTMLIonSelectElement;
|
||||
@@ -4001,9 +3966,9 @@ declare global {
|
||||
};
|
||||
interface HTMLIonMenuElementEventMap {
|
||||
"ionWillOpen": void;
|
||||
"ionWillClose": MenuCloseEventDetail;
|
||||
"ionWillClose": void;
|
||||
"ionDidOpen": void;
|
||||
"ionDidClose": MenuCloseEventDetail;
|
||||
"ionDidClose": void;
|
||||
"ionMenuChange": MenuChangeEventDetail;
|
||||
}
|
||||
interface HTMLIonMenuElement extends Components.IonMenu, HTMLStencilElement {
|
||||
@@ -4444,29 +4409,6 @@ declare global {
|
||||
prototype: HTMLIonSegmentButtonElement;
|
||||
new (): HTMLIonSegmentButtonElement;
|
||||
};
|
||||
interface HTMLIonSegmentContentElement extends Components.IonSegmentContent, HTMLStencilElement {
|
||||
}
|
||||
var HTMLIonSegmentContentElement: {
|
||||
prototype: HTMLIonSegmentContentElement;
|
||||
new (): HTMLIonSegmentContentElement;
|
||||
};
|
||||
interface HTMLIonSegmentViewElementEventMap {
|
||||
"ionSegmentViewScroll": SegmentViewScrollEvent;
|
||||
}
|
||||
interface HTMLIonSegmentViewElement extends Components.IonSegmentView, HTMLStencilElement {
|
||||
addEventListener<K extends keyof HTMLIonSegmentViewElementEventMap>(type: K, listener: (this: HTMLIonSegmentViewElement, ev: IonSegmentViewCustomEvent<HTMLIonSegmentViewElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLIonSegmentViewElementEventMap>(type: K, listener: (this: HTMLIonSegmentViewElement, ev: IonSegmentViewCustomEvent<HTMLIonSegmentViewElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
||||
}
|
||||
var HTMLIonSegmentViewElement: {
|
||||
prototype: HTMLIonSegmentViewElement;
|
||||
new (): HTMLIonSegmentViewElement;
|
||||
};
|
||||
interface HTMLIonSelectElementEventMap {
|
||||
"ionChange": SelectChangeEventDetail;
|
||||
"ionCancel": void;
|
||||
@@ -4489,12 +4431,6 @@ declare global {
|
||||
prototype: HTMLIonSelectElement;
|
||||
new (): HTMLIonSelectElement;
|
||||
};
|
||||
interface HTMLIonSelectModalElement extends Components.IonSelectModal, HTMLStencilElement {
|
||||
}
|
||||
var HTMLIonSelectModalElement: {
|
||||
prototype: HTMLIonSelectModalElement;
|
||||
new (): HTMLIonSelectModalElement;
|
||||
};
|
||||
interface HTMLIonSelectOptionElement extends Components.IonSelectOption, HTMLStencilElement {
|
||||
}
|
||||
var HTMLIonSelectOptionElement: {
|
||||
@@ -4782,10 +4718,7 @@ declare global {
|
||||
"ion-searchbar": HTMLIonSearchbarElement;
|
||||
"ion-segment": HTMLIonSegmentElement;
|
||||
"ion-segment-button": HTMLIonSegmentButtonElement;
|
||||
"ion-segment-content": HTMLIonSegmentContentElement;
|
||||
"ion-segment-view": HTMLIonSegmentViewElement;
|
||||
"ion-select": HTMLIonSelectElement;
|
||||
"ion-select-modal": HTMLIonSelectModalElement;
|
||||
"ion-select-option": HTMLIonSelectOptionElement;
|
||||
"ion-select-popover": HTMLIonSelectPopoverElement;
|
||||
"ion-skeleton-text": HTMLIonSkeletonTextElement;
|
||||
@@ -5388,7 +5321,7 @@ declare namespace LocalJSX {
|
||||
}
|
||||
interface IonCheckbox {
|
||||
/**
|
||||
* How to control the alignment of the checkbox and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the checkbox `display` to `block`.
|
||||
* How to control the alignment of the checkbox and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
|
||||
*/
|
||||
"alignment"?: 'start' | 'center';
|
||||
/**
|
||||
@@ -5408,7 +5341,7 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
"indeterminate"?: boolean;
|
||||
/**
|
||||
* How to pack the label and checkbox within a line. `"start"`: The label and checkbox will appear on the left in LTR and on the right in RTL. `"end"`: The label and checkbox will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and checkbox will appear on opposite ends of the line with space between the two elements. Setting this property will change the checkbox `display` to `block`.
|
||||
* How to pack the label and checkbox within a line. `"start"`: The label and checkbox will appear on the left in LTR and on the right in RTL. `"end"`: The label and checkbox will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and checkbox will appear on opposite ends of the line with space between the two elements.
|
||||
*/
|
||||
"justify"?: 'start' | 'end' | 'space-between';
|
||||
/**
|
||||
@@ -6428,7 +6361,7 @@ declare namespace LocalJSX {
|
||||
/**
|
||||
* Emitted when the menu is closed.
|
||||
*/
|
||||
"onIonDidClose"?: (event: IonMenuCustomEvent<MenuCloseEventDetail>) => void;
|
||||
"onIonDidClose"?: (event: IonMenuCustomEvent<void>) => void;
|
||||
/**
|
||||
* Emitted when the menu is open.
|
||||
*/
|
||||
@@ -6440,7 +6373,7 @@ declare namespace LocalJSX {
|
||||
/**
|
||||
* Emitted when the menu is about to be closed.
|
||||
*/
|
||||
"onIonWillClose"?: (event: IonMenuCustomEvent<MenuCloseEventDetail>) => void;
|
||||
"onIonWillClose"?: (event: IonMenuCustomEvent<void>) => void;
|
||||
/**
|
||||
* Emitted when the menu is about to be opened.
|
||||
*/
|
||||
@@ -7006,7 +6939,7 @@ declare namespace LocalJSX {
|
||||
}
|
||||
interface IonRadio {
|
||||
/**
|
||||
* How to control the alignment of the radio and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the radio `display` to `block`.
|
||||
* How to control the alignment of the radio and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
|
||||
*/
|
||||
"alignment"?: 'start' | 'center';
|
||||
/**
|
||||
@@ -7018,7 +6951,7 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
"disabled"?: boolean;
|
||||
/**
|
||||
* How to pack the label and radio within a line. `"start"`: The label and radio will appear on the left in LTR and on the right in RTL. `"end"`: The label and radio will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and radio will appear on opposite ends of the line with space between the two elements. Setting this property will change the radio `display` to `block`.
|
||||
* How to pack the label and radio within a line. `"start"`: The label and radio will appear on the left in LTR and on the right in RTL. `"end"`: The label and radio will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and radio will appear on opposite ends of the line with space between the two elements.
|
||||
*/
|
||||
"justify"?: 'start' | 'end' | 'space-between';
|
||||
/**
|
||||
@@ -7514,10 +7447,6 @@ declare namespace LocalJSX {
|
||||
"value"?: SegmentValue;
|
||||
}
|
||||
interface IonSegmentButton {
|
||||
/**
|
||||
* The `id` of the segment content.
|
||||
*/
|
||||
"contentId"?: string;
|
||||
/**
|
||||
* If `true`, the user cannot interact with the segment button.
|
||||
*/
|
||||
@@ -7539,18 +7468,6 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
"value"?: SegmentValue;
|
||||
}
|
||||
interface IonSegmentContent {
|
||||
}
|
||||
interface IonSegmentView {
|
||||
/**
|
||||
* If `true`, the segment view cannot be interacted with.
|
||||
*/
|
||||
"disabled"?: boolean;
|
||||
/**
|
||||
* Emitted when the segment view is scrolled.
|
||||
*/
|
||||
"onIonSegmentViewScroll"?: (event: IonSegmentViewCustomEvent<SegmentViewScrollEvent>) => void;
|
||||
}
|
||||
interface IonSelect {
|
||||
/**
|
||||
* The text to display on the cancel button.
|
||||
@@ -7577,11 +7494,11 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
"fill"?: 'outline' | 'solid';
|
||||
/**
|
||||
* The interface the select should use: `action-sheet`, `popover`, `alert`, or `modal`.
|
||||
* The interface the select should use: `action-sheet`, `popover` or `alert`.
|
||||
*/
|
||||
"interface"?: SelectInterface;
|
||||
/**
|
||||
* Any additional options that the `alert`, `action-sheet` or `popover` interface can take. See the [ion-alert docs](./alert), the [ion-action-sheet docs](./action-sheet), the [ion-popover docs](./popover), and the [ion-modal docs](./modal) for the create options for each interface. Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.
|
||||
* Any additional options that the `alert`, `action-sheet` or `popover` interface can take. See the [ion-alert docs](./alert), the [ion-action-sheet docs](./action-sheet) and the [ion-popover docs](./popover) for the create options for each interface. Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.
|
||||
*/
|
||||
"interfaceOptions"?: any;
|
||||
/**
|
||||
@@ -7657,11 +7574,6 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
"value"?: any | null;
|
||||
}
|
||||
interface IonSelectModal {
|
||||
"header"?: string;
|
||||
"multiple"?: boolean;
|
||||
"options"?: SelectModalOption[];
|
||||
}
|
||||
interface IonSelectOption {
|
||||
/**
|
||||
* If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons.
|
||||
@@ -8108,7 +8020,7 @@ declare namespace LocalJSX {
|
||||
}
|
||||
interface IonToggle {
|
||||
/**
|
||||
* How to control the alignment of the toggle and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the toggle `display` to `block`.
|
||||
* How to control the alignment of the toggle and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
|
||||
*/
|
||||
"alignment"?: 'start' | 'center';
|
||||
/**
|
||||
@@ -8128,7 +8040,7 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
"enableOnOffLabels"?: boolean | undefined;
|
||||
/**
|
||||
* How to pack the label and toggle within a line. `"start"`: The label and toggle will appear on the left in LTR and on the right in RTL. `"end"`: The label and toggle will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and toggle will appear on opposite ends of the line with space between the two elements. Setting this property will change the toggle `display` to `block`.
|
||||
* How to pack the label and toggle within a line. `"start"`: The label and toggle will appear on the left in LTR and on the right in RTL. `"end"`: The label and toggle will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and toggle will appear on opposite ends of the line with space between the two elements.
|
||||
*/
|
||||
"justify"?: 'start' | 'end' | 'space-between';
|
||||
/**
|
||||
@@ -8247,10 +8159,7 @@ declare namespace LocalJSX {
|
||||
"ion-searchbar": IonSearchbar;
|
||||
"ion-segment": IonSegment;
|
||||
"ion-segment-button": IonSegmentButton;
|
||||
"ion-segment-content": IonSegmentContent;
|
||||
"ion-segment-view": IonSegmentView;
|
||||
"ion-select": IonSelect;
|
||||
"ion-select-modal": IonSelectModal;
|
||||
"ion-select-option": IonSelectOption;
|
||||
"ion-select-popover": IonSelectPopover;
|
||||
"ion-skeleton-text": IonSkeletonText;
|
||||
@@ -8349,10 +8258,7 @@ declare module "@stencil/core" {
|
||||
"ion-searchbar": LocalJSX.IonSearchbar & JSXBase.HTMLAttributes<HTMLIonSearchbarElement>;
|
||||
"ion-segment": LocalJSX.IonSegment & JSXBase.HTMLAttributes<HTMLIonSegmentElement>;
|
||||
"ion-segment-button": LocalJSX.IonSegmentButton & JSXBase.HTMLAttributes<HTMLIonSegmentButtonElement>;
|
||||
"ion-segment-content": LocalJSX.IonSegmentContent & JSXBase.HTMLAttributes<HTMLIonSegmentContentElement>;
|
||||
"ion-segment-view": LocalJSX.IonSegmentView & JSXBase.HTMLAttributes<HTMLIonSegmentViewElement>;
|
||||
"ion-select": LocalJSX.IonSelect & JSXBase.HTMLAttributes<HTMLIonSelectElement>;
|
||||
"ion-select-modal": LocalJSX.IonSelectModal & JSXBase.HTMLAttributes<HTMLIonSelectModalElement>;
|
||||
"ion-select-option": LocalJSX.IonSelectOption & JSXBase.HTMLAttributes<HTMLIonSelectOptionElement>;
|
||||
"ion-select-popover": LocalJSX.IonSelectPopover & JSXBase.HTMLAttributes<HTMLIonSelectPopoverElement>;
|
||||
"ion-skeleton-text": LocalJSX.IonSkeletonText & JSXBase.HTMLAttributes<HTMLIonSkeletonTextElement>;
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 85 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 85 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 89 KiB After Width: | Height: | Size: 87 KiB |
@@ -48,7 +48,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
|
||||
|
||||
await expect(accordion).toHaveClass(/accordion-collapsed/);
|
||||
|
||||
await accordion.click();
|
||||
accordion.click();
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(accordion).toHaveClass(/accordion-collapsed/);
|
||||
@@ -71,7 +71,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
|
||||
|
||||
await expect(accordion).toHaveClass(/accordion-collapsed/);
|
||||
|
||||
await accordion.click();
|
||||
accordion.click();
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(accordion).toHaveClass(/accordion-collapsed/);
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
@@ -48,7 +48,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
|
||||
|
||||
await expect(accordion).toHaveClass(/accordion-collapsed/);
|
||||
|
||||
await accordion.click();
|
||||
accordion.click();
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(accordion).toHaveClass(/accordion-collapsed/);
|
||||
@@ -71,7 +71,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
|
||||
|
||||
await expect(accordion).toHaveClass(/accordion-collapsed/);
|
||||
|
||||
await accordion.click();
|
||||
accordion.click();
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(accordion).toHaveClass(/accordion-collapsed/);
|
||||
|
||||
@@ -310,9 +310,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
|
||||
}
|
||||
|
||||
componentWillLoad() {
|
||||
if (!this.htmlAttributes?.id) {
|
||||
setOverlayId(this.el);
|
||||
}
|
||||
setOverlayId(this.el);
|
||||
}
|
||||
|
||||
componentDidLoad() {
|
||||
@@ -385,7 +383,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
|
||||
>
|
||||
<ion-backdrop tappable={this.backdropDismiss} />
|
||||
|
||||
<div tabindex="0" aria-hidden="true"></div>
|
||||
<div tabindex="0"></div>
|
||||
|
||||
<div class="action-sheet-wrapper ion-overlay-wrapper" ref={(el) => (this.wrapperEl = el)}>
|
||||
<div class="action-sheet-container">
|
||||
@@ -446,7 +444,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div tabindex="0" aria-hidden="true"></div>
|
||||
<div tabindex="0"></div>
|
||||
</Host>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
import { newSpecPage } from '@stencil/core/testing';
|
||||
|
||||
import { ActionSheet } from '../action-sheet';
|
||||
|
||||
it('action sheet should be assigned an incrementing id', async () => {
|
||||
const page = await newSpecPage({
|
||||
components: [ActionSheet],
|
||||
html: `<ion-action-sheet is-open="true"></ion-action-sheet>`,
|
||||
});
|
||||
let actionSheet: HTMLIonActionSheetElement;
|
||||
|
||||
actionSheet = page.body.querySelector('ion-action-sheet')!;
|
||||
|
||||
expect(actionSheet).not.toBe(null);
|
||||
expect(actionSheet.getAttribute('id')).toBe('ion-overlay-1');
|
||||
|
||||
// Remove the action sheet from the DOM
|
||||
actionSheet.remove();
|
||||
await page.waitForChanges();
|
||||
|
||||
// Create a new action sheet to verify the id is incremented
|
||||
actionSheet = document.createElement('ion-action-sheet');
|
||||
actionSheet.isOpen = true;
|
||||
page.body.appendChild(actionSheet);
|
||||
await page.waitForChanges();
|
||||
|
||||
actionSheet = page.body.querySelector('ion-action-sheet')!;
|
||||
|
||||
expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2');
|
||||
|
||||
// Presenting the same action sheet again should reuse the existing id
|
||||
|
||||
actionSheet.isOpen = false;
|
||||
await page.waitForChanges();
|
||||
actionSheet.isOpen = true;
|
||||
await page.waitForChanges();
|
||||
|
||||
actionSheet = page.body.querySelector('ion-action-sheet')!;
|
||||
|
||||
expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2');
|
||||
});
|
||||
@@ -1,55 +0,0 @@
|
||||
import { newSpecPage } from '@stencil/core/testing';
|
||||
|
||||
import { ActionSheet } from '../action-sheet';
|
||||
import { h } from '@stencil/core';
|
||||
|
||||
describe('action-sheet: id', () => {
|
||||
it('action sheet should be assigned an incrementing id', async () => {
|
||||
const page = await newSpecPage({
|
||||
components: [ActionSheet],
|
||||
html: `<ion-action-sheet is-open="true"></ion-action-sheet>`,
|
||||
});
|
||||
let actionSheet: HTMLIonActionSheetElement;
|
||||
|
||||
actionSheet = page.body.querySelector('ion-action-sheet')!;
|
||||
|
||||
expect(actionSheet).not.toBe(null);
|
||||
expect(actionSheet.getAttribute('id')).toBe('ion-overlay-1');
|
||||
|
||||
// Remove the action sheet from the DOM
|
||||
actionSheet.remove();
|
||||
await page.waitForChanges();
|
||||
|
||||
// Create a new action sheet to verify the id is incremented
|
||||
actionSheet = document.createElement('ion-action-sheet');
|
||||
actionSheet.isOpen = true;
|
||||
page.body.appendChild(actionSheet);
|
||||
await page.waitForChanges();
|
||||
|
||||
actionSheet = page.body.querySelector('ion-action-sheet')!;
|
||||
|
||||
expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2');
|
||||
|
||||
// Presenting the same action sheet again should reuse the existing id
|
||||
|
||||
actionSheet.isOpen = false;
|
||||
await page.waitForChanges();
|
||||
actionSheet.isOpen = true;
|
||||
await page.waitForChanges();
|
||||
|
||||
actionSheet = page.body.querySelector('ion-action-sheet')!;
|
||||
|
||||
expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2');
|
||||
});
|
||||
|
||||
it('should not overwrite the id set in htmlAttributes', async () => {
|
||||
const id = 'custom-id';
|
||||
const page = await newSpecPage({
|
||||
components: [ActionSheet],
|
||||
template: () => <ion-action-sheet htmlAttributes={{ id }} overlayIndex={-1}></ion-action-sheet>,
|
||||
});
|
||||
|
||||
const alert = page.body.querySelector('ion-action-sheet')!;
|
||||
expect(alert.id).toBe(id);
|
||||
});
|
||||
});
|
||||
@@ -730,12 +730,10 @@ export class Alert implements ComponentInterface, OverlayInterface {
|
||||
const role = this.inputs.length > 0 || this.buttons.length > 0 ? 'alertdialog' : 'alert';
|
||||
|
||||
/**
|
||||
* Use both the header and subHeader ids if they are defined.
|
||||
* If only the header is defined, use the header id.
|
||||
* If only the subHeader is defined, use the subHeader id.
|
||||
* If neither are defined, do not set aria-labelledby.
|
||||
* If the header is defined, use that. Otherwise, fall back to the subHeader.
|
||||
* If neither is defined, don't set aria-labelledby.
|
||||
*/
|
||||
const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
|
||||
const ariaLabelledBy = header ? hdrId : subHeader ? subHdrId : null;
|
||||
|
||||
return (
|
||||
<Host
|
||||
@@ -759,7 +757,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
|
||||
>
|
||||
<ion-backdrop tappable={this.backdropDismiss} />
|
||||
|
||||
<div tabindex="0" aria-hidden="true"></div>
|
||||
<div tabindex="0"></div>
|
||||
|
||||
<div class="alert-wrapper ion-overlay-wrapper" ref={(el) => (this.wrapperEl = el)}>
|
||||
<div class="alert-head">
|
||||
@@ -768,18 +766,11 @@ export class Alert implements ComponentInterface, OverlayInterface {
|
||||
{header}
|
||||
</h2>
|
||||
)}
|
||||
{/* If no header exists, subHeader should be the highest heading level, h2 */}
|
||||
{subHeader && !header && (
|
||||
{subHeader && (
|
||||
<h2 id={subHdrId} class="alert-sub-title">
|
||||
{subHeader}
|
||||
</h2>
|
||||
)}
|
||||
{/* If a header exists, subHeader should be one level below it, h3 */}
|
||||
{subHeader && header && (
|
||||
<h3 id={subHdrId} class="alert-sub-title">
|
||||
{subHeader}
|
||||
</h3>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{this.renderAlertMessage(msgId)}
|
||||
@@ -788,7 +779,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
|
||||
{this.renderAlertButtons()}
|
||||
</div>
|
||||
|
||||
<div tabindex="0" aria-hidden="true"></div>
|
||||
<div tabindex="0"></div>
|
||||
</Host>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -17,27 +17,6 @@ const testAria = async (
|
||||
|
||||
const alert = page.locator('ion-alert');
|
||||
|
||||
const header = alert.locator('.alert-title');
|
||||
const subHeader = alert.locator('.alert-sub-title');
|
||||
|
||||
// If a header exists, it should be an h2 element
|
||||
if ((await header.count()) > 0) {
|
||||
const headerTagName = await header.evaluate((el) => el.tagName);
|
||||
expect(headerTagName).toBe('H2');
|
||||
}
|
||||
|
||||
// If a header and subHeader exist, the subHeader should be an h3 element
|
||||
if ((await header.count()) > 0 && (await subHeader.count()) > 0) {
|
||||
const subHeaderTagName = await subHeader.evaluate((el) => el.tagName);
|
||||
expect(subHeaderTagName).toBe('H3');
|
||||
}
|
||||
|
||||
// If a subHeader exists without a header, the subHeader should be an h2 element
|
||||
if ((await header.count()) === 0 && (await subHeader.count()) > 0) {
|
||||
const subHeaderTagName = await subHeader.evaluate((el) => el.tagName);
|
||||
expect(subHeaderTagName).toBe('H2');
|
||||
}
|
||||
|
||||
/**
|
||||
* expect().toHaveAttribute() can't check for a null value, so grab and check
|
||||
* the values manually instead.
|
||||
@@ -145,24 +124,16 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
|
||||
await page.goto(`/src/components/alert/test/a11y`, config);
|
||||
});
|
||||
|
||||
test('should have aria-labelledby set to both when header and subHeader are set', async ({ page }) => {
|
||||
await testAria(page, 'bothHeadersOnly', 'alert-1-hdr alert-1-sub-hdr', null);
|
||||
});
|
||||
|
||||
test('should have aria-labelledby set when only header is set', async ({ page }) => {
|
||||
await testAria(page, 'headerOnly', 'alert-1-hdr', null);
|
||||
});
|
||||
|
||||
test('should fall back to subHeader for aria-labelledby if header is not defined', async ({ page }) => {
|
||||
await testAria(page, 'subHeaderOnly', 'alert-1-sub-hdr', null);
|
||||
test('should have aria-labelledby when header is set', async ({ page }) => {
|
||||
await testAria(page, 'noMessage', 'alert-1-hdr', null);
|
||||
});
|
||||
|
||||
test('should have aria-describedby when message is set', async ({ page }) => {
|
||||
await testAria(page, 'noHeaders', null, 'alert-1-msg');
|
||||
});
|
||||
|
||||
test('should have aria-labelledby and aria-describedby when headers and message are set', async ({ page }) => {
|
||||
await testAria(page, 'headersAndMessage', 'alert-1-hdr alert-1-sub-hdr', 'alert-1-msg');
|
||||
test('should fall back to subHeader for aria-labelledby if header is not defined', async ({ page }) => {
|
||||
await testAria(page, 'subHeaderOnly', 'alert-1-sub-hdr', 'alert-1-msg');
|
||||
});
|
||||
|
||||
test('should allow for manually specifying aria attributes', async ({ page }) => {
|
||||
@@ -308,10 +279,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
|
||||
await expect(page).toHaveScreenshot(screenshot(`alert-radio-scale`));
|
||||
});
|
||||
test('should scale text on larger font sizes with text fields', async ({ page, skip }) => {
|
||||
// TODO(ROU-8158): unskip this test when a solution is found
|
||||
skip.browser('chromium', 'Rendering is flaky in Chrome.');
|
||||
|
||||
test('should scale text on larger font sizes with text fields', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<style>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 36 KiB |
@@ -19,11 +19,10 @@
|
||||
<main class="ion-padding">
|
||||
<h1>Alert - A11y</h1>
|
||||
|
||||
<button class="expand" id="bothHeadersOnly" onclick="presentBothHeadersOnly()">Both Headers Only</button>
|
||||
<button class="expand" id="headerOnly" onclick="presentHeaderOnly()">Header Only</button>
|
||||
<button class="expand" id="bothHeaders" onclick="presentBothHeaders()">Both Headers</button>
|
||||
<button class="expand" id="subHeaderOnly" onclick="presentSubHeaderOnly()">Subheader Only</button>
|
||||
<button class="expand" id="noHeaders" onclick="presentNoHeaders()">No Headers</button>
|
||||
<button class="expand" id="headersAndMessage" onclick="presentHeadersAndMessage()">Headers and Message</button>
|
||||
<button class="expand" id="noMessage" onclick="presentNoMessage()">No Message</button>
|
||||
<button class="expand" id="customAria" onclick="presentCustomAria()">Custom Aria</button>
|
||||
<button class="expand" id="ariaLabelButton" onclick="presentAriaLabelButton()">Aria Label Button</button>
|
||||
<button class="expand" id="checkbox" onclick="presentAlertCheckbox()">Checkbox</button>
|
||||
@@ -35,17 +34,11 @@
|
||||
await alert.present();
|
||||
}
|
||||
|
||||
function presentBothHeadersOnly() {
|
||||
function presentBothHeaders() {
|
||||
openAlert({
|
||||
header: 'Header',
|
||||
subHeader: 'Subtitle',
|
||||
buttons: ['OK'],
|
||||
});
|
||||
}
|
||||
|
||||
function presentHeaderOnly() {
|
||||
openAlert({
|
||||
header: 'Header',
|
||||
message: 'This is an alert message.',
|
||||
buttons: ['OK'],
|
||||
});
|
||||
}
|
||||
@@ -53,6 +46,7 @@
|
||||
function presentSubHeaderOnly() {
|
||||
openAlert({
|
||||
subHeader: 'Subtitle',
|
||||
message: 'This is an alert message.',
|
||||
buttons: ['OK'],
|
||||
});
|
||||
}
|
||||
@@ -64,11 +58,10 @@
|
||||
});
|
||||
}
|
||||
|
||||
function presentHeadersAndMessage() {
|
||||
function presentNoMessage() {
|
||||
openAlert({
|
||||
header: 'Header',
|
||||
subHeader: 'Subtitle',
|
||||
message: 'This is an alert message.',
|
||||
buttons: ['OK'],
|
||||
});
|
||||
}
|
||||
|
||||
41
core/src/components/alert/test/alert-id.spec.ts
Normal file
41
core/src/components/alert/test/alert-id.spec.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
import { newSpecPage } from '@stencil/core/testing';
|
||||
|
||||
import { Alert } from '../alert';
|
||||
|
||||
it('alert should be assigned an incrementing id', async () => {
|
||||
const page = await newSpecPage({
|
||||
components: [Alert],
|
||||
html: `<ion-alert is-open="true"></ion-alert>`,
|
||||
});
|
||||
let alert: HTMLIonAlertElement;
|
||||
|
||||
alert = page.body.querySelector('ion-alert')!;
|
||||
|
||||
expect(alert).not.toBe(null);
|
||||
expect(alert.getAttribute('id')).toBe('ion-overlay-1');
|
||||
|
||||
// Remove the alert from the DOM
|
||||
alert.remove();
|
||||
await page.waitForChanges();
|
||||
|
||||
// Create a new alert to verify the id is incremented
|
||||
alert = document.createElement('ion-alert');
|
||||
alert.isOpen = true;
|
||||
page.body.appendChild(alert);
|
||||
await page.waitForChanges();
|
||||
|
||||
alert = page.body.querySelector('ion-alert')!;
|
||||
|
||||
expect(alert.getAttribute('id')).toBe('ion-overlay-2');
|
||||
|
||||
// Presenting the same alert again should reuse the existing id
|
||||
|
||||
alert.isOpen = false;
|
||||
await page.waitForChanges();
|
||||
alert.isOpen = true;
|
||||
await page.waitForChanges();
|
||||
|
||||
alert = page.body.querySelector('ion-alert')!;
|
||||
|
||||
expect(alert.getAttribute('id')).toBe('ion-overlay-2');
|
||||
});
|
||||
@@ -1,55 +0,0 @@
|
||||
import { newSpecPage } from '@stencil/core/testing';
|
||||
|
||||
import { Alert } from '../alert';
|
||||
import { h } from '@stencil/core';
|
||||
|
||||
describe('alert: id', () => {
|
||||
it('alert should be assigned an incrementing id', async () => {
|
||||
const page = await newSpecPage({
|
||||
components: [Alert],
|
||||
html: `<ion-alert is-open="true"></ion-alert>`,
|
||||
});
|
||||
let alert: HTMLIonAlertElement;
|
||||
|
||||
alert = page.body.querySelector('ion-alert')!;
|
||||
|
||||
expect(alert).not.toBe(null);
|
||||
expect(alert.getAttribute('id')).toBe('ion-overlay-1');
|
||||
|
||||
// Remove the alert from the DOM
|
||||
alert.remove();
|
||||
await page.waitForChanges();
|
||||
|
||||
// Create a new alert to verify the id is incremented
|
||||
alert = document.createElement('ion-alert');
|
||||
alert.isOpen = true;
|
||||
page.body.appendChild(alert);
|
||||
await page.waitForChanges();
|
||||
|
||||
alert = page.body.querySelector('ion-alert')!;
|
||||
|
||||
expect(alert.getAttribute('id')).toBe('ion-overlay-2');
|
||||
|
||||
// Presenting the same alert again should reuse the existing id
|
||||
|
||||
alert.isOpen = false;
|
||||
await page.waitForChanges();
|
||||
alert.isOpen = true;
|
||||
await page.waitForChanges();
|
||||
|
||||
alert = page.body.querySelector('ion-alert')!;
|
||||
|
||||
expect(alert.getAttribute('id')).toBe('ion-overlay-2');
|
||||
});
|
||||
|
||||
it('should not overwrite the id set in htmlAttributes', async () => {
|
||||
const id = 'custom-id';
|
||||
const page = await newSpecPage({
|
||||
components: [Alert],
|
||||
template: () => <ion-alert htmlAttributes={{ id }} overlayIndex={-1}></ion-alert>,
|
||||
});
|
||||
|
||||
const alert = page.body.querySelector('ion-alert')!;
|
||||
expect(alert.id).toBe(id);
|
||||
});
|
||||
});
|
||||
@@ -2,6 +2,7 @@ import { newSpecPage } from '@stencil/core/testing';
|
||||
|
||||
import { config } from '../../../global/config';
|
||||
import { Alert } from '../alert';
|
||||
import { h } from '@stencil/core';
|
||||
|
||||
describe('alert: custom html', () => {
|
||||
it('should not allow for custom html by default', async () => {
|
||||
@@ -38,4 +39,15 @@ describe('alert: custom html', () => {
|
||||
expect(content.textContent).toContain('Custom Text');
|
||||
expect(content.querySelector('button.custom-html')).toBe(null);
|
||||
});
|
||||
|
||||
it('should not overwrite the id set in htmlAttributes', async () => {
|
||||
const id = 'custom-id';
|
||||
const page = await newSpecPage({
|
||||
components: [Alert],
|
||||
template: () => <ion-alert htmlAttributes={{ id }} overlayIndex={-1}></ion-alert>,
|
||||
});
|
||||
|
||||
const alert = page.body.querySelector('ion-alert')!;
|
||||
expect(alert.id).toBe(id);
|
||||
});
|
||||
});
|
||||
@@ -61,6 +61,7 @@ export class App implements ComponentInterface {
|
||||
}
|
||||
|
||||
/**
|
||||
* @internal
|
||||
* Used to set focus on an element that uses `ion-focusable`.
|
||||
* Do not use this if focusing the element as a result of a keyboard
|
||||
* event as the focus utility should handle this for us. This method
|
||||
|
||||
@@ -51,6 +51,7 @@ export class Backdrop implements ComponentInterface {
|
||||
const mode = getIonMode(this);
|
||||
return (
|
||||
<Host
|
||||
tabindex="-1"
|
||||
aria-hidden="true"
|
||||
class={{
|
||||
[mode]: true,
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 186 KiB After Width: | Height: | Size: 186 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 188 KiB After Width: | Height: | Size: 188 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 47 KiB After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 158 KiB After Width: | Height: | Size: 152 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 157 KiB After Width: | Height: | Size: 152 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.6 KiB After Width: | Height: | Size: 9.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 9.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
@@ -72,7 +72,6 @@
|
||||
flex-grow: 1;
|
||||
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
height: inherit;
|
||||
|
||||
@@ -87,10 +86,7 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Checkboxes that are not slotted inside an item and are not used with a
|
||||
// stacked label should have margins equal to those of the label.
|
||||
:host(.in-item) .label-text-wrapper,
|
||||
:host(.in-item:not(.checkbox-label-placement-stacked):not([slot])) .native-wrapper {
|
||||
:host(.in-item) .label-text-wrapper {
|
||||
@include margin($checkbox-item-label-margin-top, null, $checkbox-item-label-margin-bottom, null);
|
||||
}
|
||||
|
||||
@@ -174,20 +170,6 @@ input {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Justify Content & Align Items
|
||||
// ---------------------------------------------
|
||||
|
||||
// The checkbox should be displayed as block when either justify
|
||||
// or alignment is set; otherwise, these properties will have no
|
||||
// visible effect.
|
||||
:host(.checkbox-justify-space-between),
|
||||
:host(.checkbox-justify-start),
|
||||
:host(.checkbox-justify-end),
|
||||
:host(.checkbox-alignment-start),
|
||||
:host(.checkbox-alignment-center) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Label Placement - Start
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import type { ComponentInterface, EventEmitter } from '@stencil/core';
|
||||
import { Component, Element, Event, Host, Method, Prop, h } from '@stencil/core';
|
||||
import { Component, Element, Event, Host, Prop, h } from '@stencil/core';
|
||||
import type { Attributes } from '@utils/helpers';
|
||||
import { inheritAriaAttributes, renderHiddenInput } from '@utils/helpers';
|
||||
import { createColorClasses, hostContext } from '@utils/theme';
|
||||
@@ -86,17 +86,15 @@ export class Checkbox implements ComponentInterface {
|
||||
* on the left in RTL.
|
||||
* `"space-between"`: The label and checkbox will appear on opposite
|
||||
* ends of the line with space between the two elements.
|
||||
* Setting this property will change the checkbox `display` to `block`.
|
||||
*/
|
||||
@Prop() justify?: 'start' | 'end' | 'space-between';
|
||||
@Prop() justify: 'start' | 'end' | 'space-between' = 'space-between';
|
||||
|
||||
/**
|
||||
* How to control the alignment of the checkbox and label on the cross axis.
|
||||
* `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.
|
||||
* `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
|
||||
* Setting this property will change the checkbox `display` to `block`.
|
||||
*/
|
||||
@Prop() alignment?: 'start' | 'center';
|
||||
@Prop() alignment: 'start' | 'center' = 'center';
|
||||
|
||||
/**
|
||||
* Emitted when the checked property has changed as a result of a user action such as a click.
|
||||
@@ -121,9 +119,7 @@ export class Checkbox implements ComponentInterface {
|
||||
};
|
||||
}
|
||||
|
||||
/** @internal */
|
||||
@Method()
|
||||
async setFocus() {
|
||||
private setFocus() {
|
||||
if (this.focusEl) {
|
||||
this.focusEl.focus();
|
||||
}
|
||||
@@ -198,8 +194,8 @@ export class Checkbox implements ComponentInterface {
|
||||
'checkbox-disabled': disabled,
|
||||
'checkbox-indeterminate': indeterminate,
|
||||
interactive: true,
|
||||
[`checkbox-justify-${justify}`]: justify !== undefined,
|
||||
[`checkbox-alignment-${alignment}`]: alignment !== undefined,
|
||||
[`checkbox-justify-${justify}`]: true,
|
||||
[`checkbox-alignment-${alignment}`]: true,
|
||||
[`checkbox-label-placement-${labelPlacement}`]: true,
|
||||
})}
|
||||
onClick={this.onClick}
|
||||
|
||||
@@ -36,7 +36,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
|
||||
font-size: 310%;
|
||||
}
|
||||
</style>
|
||||
<ion-checkbox checked>Checked</ion-checkbox>
|
||||
<ion-checkbox justify="start" checked>Checked</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
@@ -15,6 +15,7 @@
|
||||
</head>
|
||||
<style>
|
||||
ion-checkbox {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@@ -22,10 +23,6 @@
|
||||
transform: scale(0.5);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
hr {
|
||||
background: #ddd;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<ion-app>
|
||||
@@ -36,19 +33,15 @@
|
||||
</ion-header>
|
||||
|
||||
<ion-content class="ion-padding">
|
||||
<ion-checkbox>Unchecked</ion-checkbox><br />
|
||||
<ion-checkbox checked>Checked</ion-checkbox><br />
|
||||
<ion-checkbox disabled>Disabled</ion-checkbox><br />
|
||||
<ion-checkbox disabled checked>Disabled, Checked</ion-checkbox><br />
|
||||
<ion-checkbox checked style="--checkmark-width: 7">Checkmark Width</ion-checkbox><br />
|
||||
<ion-checkbox checked class="checkbox-part">Checkmark Shadow Part</ion-checkbox><br />
|
||||
<ion-checkbox checked style="--size: 100px">--size</ion-checkbox><br />
|
||||
|
||||
<hr />
|
||||
|
||||
<ion-checkbox checked>Default width</ion-checkbox><br />
|
||||
<ion-checkbox checked style="width: 200px">Specified width</ion-checkbox><br />
|
||||
<ion-checkbox checked style="width: 100%">Full-width</ion-checkbox><br />
|
||||
<div id="checkboxes">
|
||||
<ion-checkbox justify="start">Unchecked</ion-checkbox>
|
||||
<ion-checkbox justify="start" checked>Checked</ion-checkbox>
|
||||
<ion-checkbox justify="start" disabled>Disabled</ion-checkbox>
|
||||
<ion-checkbox justify="start" disabled checked>Disabled, Checked</ion-checkbox>
|
||||
<ion-checkbox justify="start" checked style="--checkmark-width: 7">Checkmark Width</ion-checkbox>
|
||||
<ion-checkbox justify="start" checked class="checkbox-part">Checkmark Shadow Part</ion-checkbox>
|
||||
<ion-checkbox justify="start" checked style="--size: 100px">--size</ion-checkbox>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
</body>
|
||||
|
||||
@@ -51,7 +51,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
});
|
||||
});
|
||||
|
||||
configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, config }) => {
|
||||
test.describe(title('checkbox: long label in item'), () => {
|
||||
test('should render margins correctly when using long label in item', async ({ page }) => {
|
||||
await page.setContent(
|
||||
@@ -69,28 +69,6 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
const list = page.locator('ion-list');
|
||||
await expect(list).toHaveScreenshot(screenshot(`checkbox-long-label-in-item`));
|
||||
});
|
||||
test('should render margins correctly when using long label in item with start alignment', async ({
|
||||
page,
|
||||
}, testInfo) => {
|
||||
testInfo.annotations.push({
|
||||
type: 'issue',
|
||||
description: 'https://github.com/ionic-team/ionic-framework/issues/29837',
|
||||
});
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<ion-checkbox justify="start" alignment="start">
|
||||
<ion-label class="ion-text-wrap">Enable Notifications Enable Notifications Enable Notifications</ion-label>
|
||||
</ion-checkbox>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
`,
|
||||
config
|
||||
);
|
||||
const list = page.locator('ion-list');
|
||||
await expect(list).toHaveScreenshot(screenshot(`checkbox-long-label-in-item-align-start`));
|
||||
});
|
||||
});
|
||||
|
||||
test.describe(title('checkbox: stacked label in item'), () => {
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
@@ -181,15 +181,6 @@
|
||||
</ion-checkbox>
|
||||
</ion-item>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<ion-item>
|
||||
<ion-checkbox justify="start" alignment="start">
|
||||
<ion-label class="ion-text-wrap">
|
||||
Enable Notifications Enable Notifications Enable Notifications
|
||||
</ion-label>
|
||||
</ion-checkbox>
|
||||
</ion-item>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
|
||||
@@ -2,50 +2,20 @@ import { expect } from '@playwright/test';
|
||||
import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
/**
|
||||
* By default ion-checkbox only takes up as much space
|
||||
* as it needs. Justification is used for when the
|
||||
* checkbox should take up the full line (such as in an
|
||||
* ion-item or when it has 100% width).
|
||||
* By default ion-checkbox only takes up
|
||||
* as much space as it needs. Justification is
|
||||
* used for when the checkbox takes up the full
|
||||
* line (such as in an ion-item). As a result,
|
||||
* we set the width of the checkbox so we can
|
||||
* see the justification results.
|
||||
*/
|
||||
configs().forEach(({ title, screenshot, config }) => {
|
||||
test.describe(title('checkbox: label'), () => {
|
||||
test.describe('checkbox: default placement', () => {
|
||||
test('should render a space between justification with a full width checkbox', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox style="width: 100%">
|
||||
Label
|
||||
</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const checkbox = page.locator('ion-checkbox');
|
||||
await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-full-width`));
|
||||
});
|
||||
|
||||
test('should truncate long labels with ellipses', async ({ page }) => {
|
||||
// Checkbox needs to be full width to truncate properly
|
||||
// because it is not inside of an `ion-app` in tests
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox style="width: 100%">
|
||||
Long Label Long Label Long Label Long Label Long Label Long Label
|
||||
</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const checkbox = page.locator('ion-checkbox');
|
||||
await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-long-label`));
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('checkbox: start placement', () => {
|
||||
test('should render a start justification with label in the start position', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="start" justify="start">Label</ion-checkbox>
|
||||
<ion-checkbox label-placement="start" justify="start" style="width: 200px">Label</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
@@ -57,7 +27,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should render an end justification with label in the start position', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="start" justify="end">Label</ion-checkbox>
|
||||
<ion-checkbox label-placement="start" justify="end" style="width: 200px">Label</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
@@ -69,7 +39,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should render a space between justification with label in the start position', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="start" justify="space-between">Label</ion-checkbox>
|
||||
<ion-checkbox label-placement="start" justify="space-between" style="width: 200px">Label</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
@@ -81,7 +51,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should truncate long labels with ellipses', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="start" justify="start">
|
||||
<ion-checkbox label-placement="start" justify="start" style="width: 200px">
|
||||
Long Label Long Label Long Label Long Label Long Label Long Label
|
||||
</ion-checkbox>
|
||||
`,
|
||||
@@ -89,7 +59,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
);
|
||||
|
||||
const checkbox = page.locator('ion-checkbox');
|
||||
await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-start-justify-start-long-label`));
|
||||
await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-long-label`));
|
||||
});
|
||||
});
|
||||
|
||||
@@ -97,7 +67,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should render a start justification with label in the end position', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="end" justify="start">Label</ion-checkbox>
|
||||
<ion-checkbox label-placement="end" justify="start" style="width: 200px">Label</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
@@ -109,7 +79,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should render an end justification with label in the end position', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="end" justify="end">Label</ion-checkbox>
|
||||
<ion-checkbox label-placement="end" justify="end" style="width: 200px">Label</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
@@ -121,7 +91,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should render a space between justification with label in the end position', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="end" justify="space-between">Label</ion-checkbox>
|
||||
<ion-checkbox label-placement="end" justify="space-between" style="width: 200px">Label</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
@@ -135,7 +105,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should render a start justification with label in the fixed position', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="fixed" justify="start">This is a long label</ion-checkbox>
|
||||
<ion-checkbox label-placement="fixed" justify="start" style="width: 200px">This is a long label</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
@@ -147,7 +117,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should render an end justification with label in the fixed position', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="fixed" justify="end">This is a long label</ion-checkbox>
|
||||
<ion-checkbox label-placement="fixed" justify="end" style="width: 200px">This is a long label</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
@@ -159,7 +129,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should render a space between justification with label in the fixed position', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="fixed" justify="space-between">This is a long label</ion-checkbox>
|
||||
<ion-checkbox label-placement="fixed" justify="space-between" style="width: 200px">This is a long label</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
@@ -173,7 +143,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should align the label to the start of the container in the stacked position', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="stacked" alignment="start">This is a long label</ion-checkbox>
|
||||
<ion-checkbox label-placement="stacked" alignment="start" style="width: 200px">This is a long label</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
@@ -185,7 +155,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should align the label to the center of the container in the stacked position', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="stacked" alignment="center">This is a long label</ion-checkbox>
|
||||
<ion-checkbox label-placement="stacked" alignment="center" style="width: 200px">This is a long label</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
@@ -202,7 +172,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config, screen
|
||||
test('long label should truncate', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="stacked" alignment="start">Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications</ion-checkbox>
|
||||
<ion-checkbox label-placement="stacked" alignment="start" style="width: 200px">Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 992 B After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 986 B After Width: | Height: | Size: 956 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1012 B After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 998 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1000 B After Width: | Height: | Size: 977 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.4 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user