Issue number: Resolves#28514
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
When using the `@ionic/angular` schematic in an Angular 17 project (`ng
add @ionic/angular`), developers will receive an error preventing the
schematic from running.
Additionally, the previous implementations of the schematic are out of
sync with the current state of the Ionic starters:
- `variables.css` is empty and missing Ionic's defaults
- `ionic.config.json` is not created
- Schematic does not have support for module vs. standalone projects.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- `ng add @ionic/angular` works with Angular 17 projects
- `ng add @ionic/angular` has fallback behavior for Angular 16 projects
using `AppModule`
- Schematics now includes the proper `variables.css` from Ionic starters
- Ionicons assets will no longer be copied when being added to a
standalone project
- Refactors a majority of the implementation to use the utilities that
come directly from `@angular-devkit/schematics` and
`@schematics/angular`.
- Sets the `@ionic/angular-toolkit` CLI configuration and schematics
configuration in the `angular.json`
- Creates missing `ionic.config.json`
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Dev-build: `7.5.5-dev.11700239837.1925bbdb`
To test this PR:
1. Install Angular CLI v17 - `npm install -g @angular/cli@17`
2. Create a new project - `ng new angular-17`
3. Use the dev-build: - `ng add
@ionic/angular@7.5.5-dev.11700239837.1925bbdb`
4. Confirm the prompts
5. Validate that `provideIonicAngular({})` is added to the
`app.config.ts`
6. Validate that `ionic.config.json` was created
7. Validate that `angular.json` was updated with the
`@ionic/angular-devkit` configurations
Now verify legacy behavior:
1. Install Angular CLI v16 - `npm install -g @angular/cli@16`
2. Create a new project - `ng new angular-16`
3. Use the dev-build - `ng add
@ionic/angular@7.5.5-dev.11700239837.1925bbdb`
4. Confirm the prompts
5. Validate that `IonicModule.forRoot({})` is added to the
`app.module.ts`
8. Validate the ionicons glob pattern is added to the `angular.json`
9. Validate the `ionic.config.json` was created
10. Validate the `angular.json` was updated with the
`@ionic/angular-devkit` configurations
Issue number: resolves#28548
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Datetime was not scrolling at all when the `value` prop was changed
programmatically. This was due to some logic we had in
`componentDidRender` to work around a WebKit bug which was causing the
scroll position to be moved back to where it was prior to setting the
`value` prop. This caused the scroll position to never move.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Datetime scrolls to the new value when `value` is updated
programmatically even if `min` is set.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Dev build: `7.5.6-dev.11700169088.140f3e6a`
Co-authored-by: amandaejohnston
<amandaejohnston@users.noreply.github.com>
Issue number: Internal
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
As a takeaway from our learning session about a menuController bug in
Ionic Angular, the team would like to update our other providers to use
the same architecture as the menuController to prevent this kind of
issue from happening again in the future.
We also noticed that the common provider does not provide much value and
it's easier to just have two separate implementations in `src` and
`standalone`. (There wasn't much code we could de-duplicate)
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Removed the common loading provider in favor of separate ones in
src/standalone
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Type checking inside of the Stencil unit tests have been disabled for a
long time. This has resulted in a difficult developer experience and
numerous issues (both types and implementation) within our unit tests.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Type checking is now enabled for all Stencil unit tests
- Tests have been updated to resolve type errors and implementation
errors
- Many `as any` casts were introduced, as many legacy tests test invalid
configurations of functions that require it (for example passing
`undefined` to an argument that cannot be `undefined`).
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
To test this PR you can checkout the branch locally. Install
dependencies in the `/core` directory to make sure you are on at least
`@stencil/core@4.7.2`.
Opening either a `.spec.ts` or `.spec.tsx` file, validate that your IDE
detects types and can provide auto completions for jest global types.
If you desire, you can provide an invalid type and try building the
project - you will observe the build will fail due to the invalid type.
Issue number: Internal
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
As a takeaway from our learning session about a menuController bug in
Ionic Angular, the team would like to update our other providers to use
the same architecture as the menuController to prevent this kind of
issue from happening again in the future.
We also noticed that the common provider does not provide much value and
it's easier to just have two separate implementations in `src` and
`standalone`. (There wasn't much code we could de-duplicate)
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Removed the common alert provider in favor of separate ones in
src/standalone
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Issue number: resolves#23977
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The MD Alert on tablet dimensions does not match the MD spec
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- MD Alert now follows the MD spec for tablet dimensions
- Added tablet and mobile viewport mixins for alert and the card modal.
(There should be no visual diffs for the card modal)
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
This supersedes https://github.com/ionic-team/ionic-framework/pull/27462
since I needed to add new screenshot tests. The author of that PR has
been given co-author credit here.
---------
Co-authored-by: GlenOttley <GlenOttley@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Issue number: resolves#16569
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Ionic Angular's routing integration disables page transitions when using
the browser back/forward buttons.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Transitions now play when using the back/forward buttons
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
We're not aware of any breaking changes here, though it's possible some
developers were relying on this behavior. As a result, we are targeting
Ionic 8 to minimize any potential negative impact this fix may have on
developers.
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Supersedes https://github.com/ionic-team/ionic-framework/pull/28188
Dev build: `7.5.6-dev.11700068172.15ce9b35`
Co-authored-by: hoi4 <hoi4@users.noreply.github.com>
Issue number: Internal
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
As a takeaway from our learning session about a menuController bug in
Ionic Angular, the team would like to update our other providers to use
the same architecture as the menuController to prevent this kind of
issue from happening again in the future.
We also noticed that the common provider does not provide much value and
it's easier to just have two separate implementations in `src` and
`standalone`. (There wasn't much code we could de-duplicate)
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Removed the common picker provider in favor of separate ones in
src/standalone
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Ionic Framework migrated to using `eslint` for linting all of our
projects awhile ago. However we left around an unused tslint config file
in the Angular project by accident.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Removes the unused tslint configuration file
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Type checking is disabled in the `standalone/` directory of the angular
project.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Enables type checking in the standalone directories.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Our Angular E2E tests are brittle because they rely on arbitrary
`cy.wait` calls to account for asynchronous routing. This leads to flaky
tests on CI and seemingly random test failures when we make adjustments
to the Ionic Anguar routing integration (see:
https://github.com/ionic-team/ionic-framework/pull/28188)
Additionally, our test execution for the navigation tests is quite slow
because transitions are enabled. As a result, we need to wait hundreds
of ms per test just for the transitions to finish.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updated the `testStack` command to use a new `getStack` [Cypress
query](https://docs.cypress.io/api/cypress-api/custom-queries). These
queries come with automatic retrying built-in. By leveraging this query
in the `testStack` command, we can avoid the arbitrary waits.
- Added `ionic:_testing=true` query strings to the navigation tests.
This causes Ionic to disable any transitions so the tests execute
faster.
- Removed most of the arbitrary `cy.wait` calls. I kept the swipe to go
back `cy.wait` -- I wasn't quite sure how to reduce flakiness on that
one.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Bumps
[@stencil/vue-output-target](https://github.com/ionic-team/stencil-ds-output-targets)
from 0.8.6 to 0.8.7.
<details>
<summary>Commits</summary>
<ul>
<li>See full diff in <a
href="https://github.com/ionic-team/stencil-ds-output-targets/commits">compare
view</a></li>
</ul>
</details>
<br />
[](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)
Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.
[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)
---
<details>
<summary>Dependabot commands and options</summary>
<br />
You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
</details>
---------
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Issue number: resolves#28506
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
ion-accordion-group would not set the value when using it as a Angular
standalone component and data binding:
``` html
<ion-accordion-group #accordionGroup [value]="fromValue">
<ion-accordion value="turtles">
<ion-item slot="header" color="light">
<ion-label>First Accordion</ion-label>
</ion-item>
<div class="ion-padding" slot="content">First Content</div>
</ion-accordion>
<ion-accordion value="second">
<ion-item slot="header" color="light">
<ion-label>Second Accordion</ion-label>
</ion-item>
<div class="ion-padding" slot="content">Second Content</div>
</ion-accordion>
</ion-accordion-group>
```
The problem here is Angular is setting the value of the accordion group
after the component has been initialized (but not loaded) and before the
component watchers are setup, so
[valueChanged](d69ad43482/core/src/components/accordion-group/accordion-group.tsx (L78))
does not fire automatically.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Run valueChanged() in componentDidLoad().
-
-
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
---------
Co-authored-by: Mohamed Ben Makhlouf <benmakhlouf@softcatalyst.com>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Issue number: Internal
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
There is no Angular v17 test app.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
There is an Angular v17 test app.
New overrides:
- angular.json: `browserTarget` was changed to `buildTarget` and to
replace `@nguniversal` with `@angular/ssr` and
`@angular-devkit/build-angular`
- server.ts: Replace uses of `@nguniversal` with `@angular/ssr`
New change to base:
- polyfills.ts: Import
[changed](https://github.com/angular/angular/blob/main/CHANGELOG.md#zonejs)
from `import 'zone.js/dist/zone';` (this change is supported for all
versions of Angular that we support, so should be changed in the base
file)
All other files were duplicated from their v16 counterparts.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Issue number: resolves#21769
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Toast does not support swipe gestures to dismiss.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Added a `swipeGesture` property that allows users to swipe toasts
closed.
Note: This is a combination of previous PRs
https://github.com/ionic-team/ionic-framework/pull/28380 and
https://github.com/ionic-team/ionic-framework/pull/28402⚠️ There is a visual glitch on iOS where dragging and having the toast
animate back to its opened position causes a flicker. This is an iOS 17
regression and is being tracked in
https://github.com/ionic-team/ionic-framework/issues/28467. This bug has
been reported to and confirmed by Apple.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
⚠️ Give co-author credit to author in
https://github.com/ionic-team/ionic-framework/pull/23124
---------
Co-authored-by: evgeniy-skakun <evgeniy-skakun@users.noreply.github.com>
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
While evaluating step colors for high contrast themes I discovered that
this code is not actually applied anywhere.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Remove unused code
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Issue number: resolves#28356
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
`ion-radio-group` would not set the radio value when using it as a
Angular standalone component and data binding:
```html
<ion-radio-group [value]="fromValue">
<ion-radio value="dogs">Dogs</ion-radio><br />
<ion-radio value="cats">Cats</ion-radio><br />
<ion-radio value="turtles">Turtles</ion-radio><br />
<ion-radio value="fish">Fish</ion-radio><br />
</ion-radio-group>
```
This is happening because the value is set before the [value
watcher](c5dd622bbe/core/src/components/radio-group/radio-group.tsx (L34))
has been configured. The event, `ionValueChange`, does not get
[dispatched](c5dd622bbe/core/src/components/radio-group/radio-group.tsx (L37)).
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Run `valueChanged()` in `componentDidLoad()`.
- `valueChanged()` function is tied to the [value
watcher](c5dd622bbe/core/src/components/radio-group/radio-group.tsx (L34))
so it will
[dispatch](c5dd622bbe/core/src/components/radio-group/radio-group.tsx (L37))
the `ionValueChange`.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
In our testing, we observed that the issue described below only occurs
when assigning a value to the radio group within the primary content,
such as rendering within the app component template.
When the template is isolated to a route, the value is assigned
correctly. To address this issue, we need to ensure that the watcher is
called after the component has finished loading, allowing the emit to be
dispatched correctly.
Dev build: 7.5.4-dev.11699404450.136700d7
Issue number: Internal
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The `GestureController` provider does not use the correct underlying
instance of the utilities from either the lazy or custom elements build,
depending on if the developer is using `@ionic/angular` or
`@ionic/angular/standalone`. It will always use the lazy instance.
This applied to the `createGesture` function.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- `GestureController` uses the instance of the utilities based on it's
implementation type, e.g. `@ionic/angular/standalone` uses the custom
elements build with the utilities from `@ionic/core/components`.
- `@ionic/angular` and `@ionic/angular/standalone` now export their own
specific implementation of `GestureController`
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Issue number: Internal
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The `AnimationController` does not use the correct underlying instance
of the utilities from either the lazy or custom elements build,
depending on if the developer is using `@ionic/angular` or
`@ionic/angular/standalone`. It will always use the lazy instance.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- `AnimationController` uses the instance of the utilities based on it's
implementation type, e.g. `@ionic/angular/standalone` uses the custom
elements build with the utilities from `@ionic/core/components`.
- `@ionic/angular` and `@ionic/angular/standalone` now export their own
specific implementation of `AnimationController`
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
Ionic was re-exporting the `AnimationController` from both
`@ionic/angular` and `@ionic/angular/standalone` entry points.
Developers will not need to update their implementations or change
import paths to take advantage of this change.
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Issue number: #
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Ionic Framework uses Jest 27. Previously, this was due to a limitation
of Stencil. As of Stencil v4.7.0, this limitation no longer exists & the
Framework can upgrade to the latest version of Jest.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
There was a top level dependency on `@jest/core` that I could not find
to be used anywhere. This dependency is included in `jest` by default,
and has been removed as a top level/`package.json` dependency.
Otherwise, all jest packages have been upgraded to jest v29. This is two
major version bumps and a switch to the jest-circus runtime (instead of
jest-jasmine2).
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
There is some inherent risk of _something_ breaking when someone like me
who doesn't work on this project day-to-day bumps packages. I did this
as a part of testing Jest 29 when implementing its support in Stencil
and thought "Well, why not?". Feel free to reject this PR if you feel
it's not worth the risk/effort at the moment.
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Issue number: N/A
---------
## What is the current behavior?
As a takeaway from our learning session about a menuController bug in
Ionic Angular, the team would like to update our other providers to use
the same architecture as the menuController to prevent this kind of
issue from happening again in the future.
We also noticed that the common provider does not provide much value and
it's easier to just have two separate implementations in `src` and
`standalone`. (There wasn't much code we could de-duplicate)
## What is the new behavior?
- Removed the common toast provider in favor of separate ones in
src/standalone
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
This is part of my work for hack day, but I wanted to tackle the
following problems:
1. There is no easy way to have angular, angular-server, vue,
vue-router, react, and react-router automatically recompile when you
make a change. Right now you have to manually run `npm run build` every
time you make a change.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Adds `npm run build.watch` to let developers easily watch for changes
in each project.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
As a takeaway from our learning session about a menuController bug in
Ionic Angular, the team would like to update our other providers to use
the same architecture as the menuController to prevent this kind of
issue from happening again in the future.
We also noticed that the common provider does not provide much value and
it's easier to just have two separate implementations in `src` and
`standalone`. (There wasn't much code we could de-duplicate)
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Removed the common modal provider in favor of separate ones in
src/standalone
We already have test coverage for the modalController, so I did not add
new ones
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Issue number: resolves#28466
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
In https://github.com/ionic-team/ionic-framework/issues/27060 I fixed an
issue where the main title would be visible briefly before the
collapsible large title a) was configured and b) hid the main title. I
accomplished this by using CSS to target
`ion-header[collapse="condense"]`. However, I failed to account for when
the property is not reflected on the host. Some JS frameworks allow the
property to remain on the element but some do not.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- I improved this fix by also targeting the class set on the host. This
class is set regardless of property reflection status.
| main | branch |
| - | - |
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/991523da-8549-451b-930f-5df45c2783de"></video>
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/149c9546-2d9b-42a2-89f1-a17fa146aee6"></video>
|
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Dev build: `7.5.4-dev.11699282935.1db450b0`
---------
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Issue number: internal
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
As a takeaway from our learning session about a menuController bug in
Ionic Angular, the team would like to update our other providers to use
the same architecture as the menuController to prevent this kind of
issue from happening again in the future.
We also noticed that the common provider does not provide much value and
it's easier to just have two separate implementations in src and
standalone. (There wasn't much code we could de-duplicate)
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Removed the common popover provider in favor of separate ones in
src/standalone
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
I didn't add tests because there's already existing ones for popover
controller.
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
As a takeaway from our learning session about a menuController bug in
Ionic Angular, the team would like to update our other providers to use
the same architecture as the menuController to prevent this kind of
issue from happening again in the future.
We also noticed that the common provider does not provide much value and
it's easier to just have two separate implementations in `src` and
`standalone`. (There wasn't much code we could de-duplicate)
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Removed the common action sheet provider in favor of separate ones in
src/standalone
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Issue number: resolves#28468
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The cancel button in the searchbar used to align with the back button,
but that behavior gradually regressed between Ionic v4 and Ionic v7.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Adjusted the padding on the searchbar back button
- Reduced the size of the searchbar back button. It was currently set to
25.6px whereas the `ion-back-button` icon was 24px. This caused the
icons to never align even with 9px. (This should cause a few additional
diffs)
- Added a screenshot test
| v4 | v5 | v6 | v7 | branch |
| - | - | - | - | - |
| 
|
|
|
|
|
Note that in v4 the alignment was slightly off. It was fixed in v5, but
then broke in v6 and remained unchanged in v7 (until now).
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Dev build: `7.5.4-dev.11699310489.151b2717`
---------
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>
Issue number: Internal
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The safe area for Item Divider would change sides when the direction
changed. e.g., if the safe area padding should be on the left, it would
be on the left when the direction was LTR but would be on the right when
the direction was RTL. It should always be on the left.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The left safe area padding is on the left side of an Item Divider
whether the direction is LTR or RTL.
- The right safe area padding is on the right side of an Item Divider
whether the direction is LTR or RTL.
- Updated LTR and RTL screenshots for item to include an item divider
Similar to #28403 but for Item Divider.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Bumps [@stencil/core](https://github.com/ionic-team/stencil) from 4.7.0
to 4.7.1.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/ionic-team/stencil/releases"><code>@stencil/core</code>'s
releases</a>.</em></p>
<blockquote>
<h2>🍿 v4.7.1 (2023-11-06)</h2>
<h3>Bug Fixes</h3>
<ul>
<li><strong>compiler:</strong> correctly generate CSS rules using
<code>::slotted</code> outside shadow DOM (<a
href="https://redirect.github.com/ionic-team/stencil/issues/4969">#4969</a>)
(<a
href="4fd0ecd17e">4fd0ecd</a>)</li>
<li><strong>compiler:</strong> ignore TS diagnostics on builds where
typedef file changes (<a
href="https://redirect.github.com/ionic-team/stencil/issues/5013">#5013</a>)
(<a
href="2a75b6501f">2a75b65</a>)</li>
</ul>
</blockquote>
</details>
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a
href="https://github.com/ionic-team/stencil/blob/main/CHANGELOG.md"><code>@stencil/core</code>'s
changelog</a>.</em></p>
<blockquote>
<h2>🍿 <a
href="https://github.com/ionic-team/stencil/compare/v4.7.0...v4.7.1">4.7.1</a>
(2023-11-06)</h2>
<h3>Bug Fixes</h3>
<ul>
<li><strong>compiler:</strong> correctly generate CSS rules using
<code>::slotted</code> outside shadow DOM (<a
href="https://redirect.github.com/ionic-team/stencil/issues/4969">#4969</a>)
(<a
href="4fd0ecd17e">4fd0ecd</a>)</li>
<li><strong>compiler:</strong> ignore TS diagnostics on builds where
typedef file changes (<a
href="https://redirect.github.com/ionic-team/stencil/issues/5013">#5013</a>)
(<a
href="2a75b6501f">2a75b65</a>)</li>
</ul>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="ac812d74bc"><code>ac812d7</code></a>
v4.7.1 (<a
href="https://redirect.github.com/ionic-team/stencil/issues/5025">#5025</a>)</li>
<li><a
href="b6387a36d2"><code>b6387a3</code></a>
chore(deps): update dependency terser to v5.24.0 (<a
href="https://redirect.github.com/ionic-team/stencil/issues/5024">#5024</a>)</li>
<li><a
href="2a75b6501f"><code>2a75b65</code></a>
fix(compiler): ignore TS diagnostics on builds where typedef file
changes (<a
href="https://redirect.github.com/ionic-team/stencil/issues/5">#5</a>...</li>
<li><a
href="9062e1a967"><code>9062e1a</code></a>
refactor(sys): move logger impl to <code>sys/node/logger</code> (<a
href="https://redirect.github.com/ionic-team/stencil/issues/5009">#5009</a>)</li>
<li><a
href="4fd0ecd17e"><code>4fd0ecd</code></a>
fix(compiler): correctly generate CSS rules using <code>::slotted</code>
outside shadow ...</li>
<li>See full diff in <a
href="https://github.com/ionic-team/stencil/compare/v4.7.0...v4.7.1">compare
view</a></li>
</ul>
</details>
<br />
[](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)
Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.
[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)
---
<details>
<summary>Dependabot commands and options</summary>
<br />
You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
</details>
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Issue number: N/A
---------
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
When using an `ion-label` as a `label` slot inside of an `ion-input`,
`ion-textarea` or `ion-select` it erroneously flags the input as a
legacy component and ignores the `label-placement`:
<table>
<tr>
<td>
Code
</td>
<td>
Result
</td>
</tr>
<tr>
<td>
<pre lang="html">
<ion-item>
<ion-input label-placement="floating">
<ion-label slot="label">
<ion-icon name="home"></ion-icon>
Slotted Label
</ion-label>
</ion-input>
</ion-item>
<ion-item>
<ion-input label-placement="floating" value="Value">
<ion-label slot="label">
<ion-icon name="person"></ion-icon>
Slotted Label
</ion-label>
</ion-input>
</ion-item>
</pre>
</td>
<td>
<img
src="https://github.com/ionic-team/ionic-framework/assets/6577830/91ef5470-aba4-4bb6-b277-09e2b1a4650c">
</td>
</tr>
</table>
<img width="1005" alt="Screenshot 2023-11-07 at 10 37 43 AM"
src="https://github.com/ionic-team/ionic-framework/assets/6577830/00208625-2bdb-4b60-b7ce-e487dd89c47e">
## What is the new behavior?
Adds `ion-input`, `ion-textarea`, and `ion-select` as components that
can contain a named label slot so it no longer assumes that they are
legacy components.
<table>
<tr>
<td>
Code
</td>
<td>
Result
</td>
</tr>
<tr>
<td>
<pre lang="html">
<ion-item>
<ion-input label-placement="floating">
<ion-label slot="label">
<ion-icon name="home"></ion-icon>
Slotted Label
</ion-label>
</ion-input>
</ion-item>
<ion-item>
<ion-input label-placement="floating" value="Value">
<ion-label slot="label">
<ion-icon name="person"></ion-icon>
Slotted Label
</ion-label>
</ion-input>
</ion-item>
</pre>
</td>
<td>
<img
src="https://github.com/ionic-team/ionic-framework/assets/6577830/75f06c5e-6887-4e8e-8022-264b716b3e62">
</td>
</tr>
</table>
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The vue, vue-router, react, and react-router packages are bundled with a
version of rollup that are 2 major versions out of date.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Update deps to rollup 4 and made any necessary changes as a result of
breaking changes
- Removed the react projects old treeshaking script. The rollup dep used
was incompatible with Rollup 4, and the script didn't work to begin
with.
- Removed the source maps and resolve plugins. These did not make any
difference in the final result, and source maps are still included in
the final build.
- Removed a PURE annotation from an import. Rollup 4 warns about this,
and this PURE annotation does not seem to be needed since every import
in this file uses "createReactComponent" to begin with.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Rollup has a plugin to handle TypeScript compilation that we are not
using. As a result, we are maintaining unnecessary infrastructure such
as compiling to `dist-transpiled`(TS to JS) and then compiling the
results to `dist` (JS files to bundled code).
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Vue, Vue Router, React, and React Router now make use of the Rollup
Typescript plugin to handle TypeScript compilation for us. This lets us
remove the `dist-transpiled` directory altogether and the manual `tsc`
invocation.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Developers should not see any changes in how they consume Ionic. This
just hands the TypeScript compilation step off to the Rollup plugin.
Dev build: `7.5.3-dev.11698859252.15ac163e`
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The "prerelease" script hasn't been used since we switched off our
custom release scripts.
The "test.spec.debug" script doesn't do anything special now because the
`--node-arg` argument has been removed:
```
liamdebeasi@MacBook-Pro core % npx --node-arg=\"--inspect-brk\" stencil test --spec
npx: the --node-arg argument has been removed.
See `npm help exec` for more information
```
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Removed the "prerelease" and "test.spec.debug" scripts from "core"
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Issue number: resolves#28435
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The item in the last item-sliding still has a border in an inset list.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Item in last item-sliding no longer has a border
I originally only added `ion-item-sliding:last-of-type ion-item` but I
discovered that the original `ion-item:last-child` causes items in
item-sliding where the item is the last element in the item-sliding
container to not have a border, so the original fix was incomplete.
I added comments as to what each line does and why we didn't just do
`ion-item:last-child`.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
--------
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
