[Snyk] Security upgrade swiper from 11.2.1 to 12.1.2

[snyk-io]

Snyk has created this PR to fix 1 vulnerabilities in the npm dependencies of this project.

Snyk changed the following file(s):

• Angular/package.json
• Angular/package-lock.json

Vulnerabilities that will be fixed with an upgrade:

	Issue	Score
	Prototype Pollution SNYK-JS-SWIPER-15322690	317

Breaking Change Risk

Notice: This assessment is enhanced by AI.

---

Important

• Check the changes in this PR to ensure they won't cause issues with your project.
• Max score is 1000. Note that the real score may have changed since the PR was raised.
• This PR was automatically created by Snyk using the credentials of a real user.

---

Note: You are seeing this because you or someone else with access to this repository has authorized Snyk to open fix PRs.

For more information:
🧐 View latest project report
📜 Customise PR templates
🛠 Adjust project settings
📚 Read about Snyk's upgrade logic

---

Learn how to fix vulnerabilities with free interactive lessons:

🦉 Prototype Pollution

[snyk-io]

The upgrade from Swiper v11 to v12 is a major version with significant breaking changes requiring code and style modifications.

Key Breaking Changes:

• Event Handler Signature: All event callbacks now receive the swiper instance as the first argument. Existing event listeners must be updated to accommodate this new signature. [1]
• CSS and Styling: The package no longer ships with SCSS or LESS files. All style imports must be updated to use the new plain CSS files, for example swiper/css. Theming has also moved to CSS custom properties instead of preprocessor variables. [6]
• Navigation Icons: The icon font for navigation arrows has been removed and replaced with embedded SVGs. This change simplifies styling and improves Content Security Policy (CSP) compatibility but requires removing any custom font-loading logic. [6]
• React/Vue Components: The framework-specific components for React and Vue have been rewritten. If you are using swiper/react or swiper/vue, you will need to review the new component structure and update your implementation. [1]

Recommendation:
This is a high-impact upgrade. Before merging, developers must:

1. Update all event handler function signatures.
2. Change stylesheet imports from .scss/.less to the new .css files.
3. Migrate any custom theme overrides to use CSS custom properties.
4. Verify that navigation arrows render correctly and remove old icon font dependencies.

Source: Swiper v12 Blog Post, Swiper Changelog [1, 6]

Notice 🤖: This content was augmented using artificial intelligence. AI-generated content may contain errors and should be reviewed for accuracy before use.