feat: Configurable media component

[rmch91]

Closes: https://jira.tools.sap/browse/CXSPA-7700
QA steps for new application
QA steps for migrated app:
It's worth to perform similar QA steps for migrated app. The following is how to prepare migrated app:

checkout 6.8.0 in Spartacus repo
build and deploy Spartacus packages locally:

• npx ts-node ./tools/schematics/testing.ts in the SPA root folder`

• create new app npx @angular/cli@15 new my-app --style=scss --routing=false

• go to the project's directory and install Spartacus from local packages:

• npx @angular/cli@15 add @spartacus/schematics@latest --baseUrl="https://40.76.109.9:9002"

• checkout feat/CXSPA-7700 in Spartacus repom build and deploy packages with changes

• follow steps from 2211-migration.md to migrate app

perform QA

The idea behind this PR is to provide flexibility for customers, so they can decide whether they want to use the element or the element, and to provide a separate config for the element that will allow them to add specific media queries.

Crucial parts:

1. New input in media component, @Input() elementType: 'img' | 'picture' = 'img';
2. New input in media component, width @Input() width: number;
3. New input in media component, height @Input() height: number;
4. New input in media component, sizes @Input() sizes: string;
5. pictureElementFormats in media config
6. pictureFormatsOrder in media config
7. getMediaForPictureElement() in MediaService
8. resolveSources() in MediaService
9. useExtendedMediaComponentConfiguration?: boolean; feature toggle
10. deprecation of useLegacyMediaComponent config property and USE_LEGACY_MEDIA_COMPONENT injection token

### Important:
After activation useExtendedMediaComponentConfiguration toggle default HTML element in MediaComponent will be <img>
Only BannerComponent has passed 'picture' value. If you need to use <picture> HTML element
you need to pass [elementType]="'picture'" to <cx-media>

The idea is to move away from the concept that <img> is legacy, because from my research, I understand that both elements make sense in different situations. The <picture> element is the only way to go in situations when we what to handle different art directions or more complex logic, more complex media queries. That's why I want to provide flexibility, so users can decide where they need <picture> element.
In our application I think we could enable it for banner component, since it has different formats, and I see a possibility here to add in future additional formats to handle retina screens and to improve the visibility of this banners on retina mobile/desktop devices.

Current default-media.config is more for representation of the approach, and should be reduced to only formats that we have and queries that we use before merge.

[cypress]

spartacus    Run #45383

Run Properties:   Passed #45383  •  09eaa5db29 ℹ️: Merge 1af972d8dd49e08e59d5832b7d3582eaa5158053 into 6d20b3be1923cc0b44332e18c3c3...

Project	spartacus
Run status	Passed #45383
Run duration	03m 55s
Commit	09eaa5db29 ℹ️: Merge 1af972d8dd49e08e59d5832b7d3582eaa5158053 into 6d20b3be1923cc0b44332e18c3c3...
Committer	Roman
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	4
Pending	2
Skipped	0
Passing	125

[pawelfras]

Suggested change

	/**
	* When enabled, allows to provide extended formats and media queries for <picture> element if used in MediaComponent.
	*
	* For proper work requires `pictureElementFormats` provided in media config:
	* ```ts
	* provideConfig({
	* pictureElementFormats: {
	* mediaQueries: {
	* 'max-width': '767px',
	* ...
	* },
	* width: 50,
	* height: 50,
	* },
	* })
	* ```
	*
	* After activating this toggle, new inputs in `MediaComponent` — specifically
	* `width`, `height`, and `sizes` — will be passed to the template as HTML attributes.
	*
	* Toggle activates `@Input() elementType: 'img' | 'picture' = 'picture';` in `MediaComponent`
	*/
	/**
	* When enabled, allows to provide extended formats and media queries for <picture> element if used in MediaComponent.
	*
	* For proper work requires `pictureElementFormats` provided in media config:
	* ```ts
	* provideConfig({
	* pictureElementFormats: {
	* mediaQueries: {
	* 'max-width': '767px',
	* ...
	* },
	* width: 50,
	* height: 50,
	* },
	* })
	* ```
	*
	* After activating this toggle, new inputs in `MediaComponent` — specifically
	* `width`, `height`, and `sizes` — will be passed to the template as HTML attributes.
	*
	* Toggle activates `@Input() elementType: 'img' | 'picture' = 'picture';` in `MediaComponent`
	*
	* Toggle sets `elemetType` to `img` for all `MediaComponent` usages, where one of the following format is set: `cartIcon`, `thumbnail`, `product`, `zoom`
	*/

[pawelfras]

LGTM