[Enhancement] Allow for Image Banner to be used in Slider with slideStretchHeight enabled

[troelslenda]

• I have written a good issue

Describe the enhancement

Using slideStretchHeight with kirby-x-image-banner makes the host element the correct height, however the kirby-card inside will not grow vertically to fill the kirby-x-image-banner element.

Describe the solution you'd like

Simply adding the css property height:100% to the selector kirby-card could solve this problem.

Have you considered any alternatives?

I haven't thought of any. I was trying to solve it with the css variable min-height that was recently introduced, but that property targets an element way in there. Maybe that could be refactored to work on the kirby-card instead.

Are there any additional context?

As is

Wanted

This is achieved as of right now with the following (but unwanted due to deprecation of ng-deep)

::ng-deep kirby-x-image-banner kirby-card {
  height: 100%;
}

---

Checklist:

The following tasks should be carried out in sequence in order to follow the process of contributing correctly.

Refinement

• Request that the issue is UX refined
• Request that the issue is tech refined; do not proceed until this is done.

Implementation

When were settled on a solution I would gladly do the PR.

The contributor who wants to implement this issue should:

• Make sure you have read: "Before you get coding".
• Signal to others you are working on the issue by assigning yourself.
• Create a branch from the develop branch following our branch naming convention.
• Publish a WIP implementation to Github as a draft PR and ask for feedback.
• Make sure you have implemented tests following the guidelines in: "The good: Test".
• Update the cookbook with examples and showcases.

Review

Once the issue has been implemented and is ready for review:

• Do a self-review.
• Create a pull-request. If you created a draft PR during implementation you can just mark that as "ready for review".