Release version 5.2

apps/cookbook/src/app/examples/card-example/card-example.module.ts

@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { KirbyModule } from '@kirbydesign/designsystem';
+
+import { CardExampleComponent } from './card-example.component';
+import { CardBackgroundImageExampleComponent } from './examples/card-background-image-example.component';
+import { CardClickableExampleComponent } from './examples/card-clickable-example/card-clickable-example.component';
+import { CardCssBackgroundImageExampleComponent } from './examples/card-css-background-image-example/card-css-background-image-example.component';
+import { CardElevationsExampleComponent } from './examples/card-elevations-example/card-elevations-example.component';
+import { CardThemecolorExampleComponent } from './examples/card-themecolor-example/card-themecolor-example.component';
+
+const COMPONENT_DECLARATIONS = [
+  CardExampleComponent,
+  CardClickableExampleComponent,
+  CardElevationsExampleComponent,
+  CardThemecolorExampleComponent,
+  CardBackgroundImageExampleComponent,
+  CardCssBackgroundImageExampleComponent,
+];
+
+@NgModule({
+  declarations: COMPONENT_DECLARATIONS,
+  imports: [CommonModule, KirbyModule],
+  exports: COMPONENT_DECLARATIONS,
+})
+export class CardExampleModule {}

apps/cookbook/src/app/examples/card-example/examples/card-background-image-example.component.ts

@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+
+const config = {
+  selector: 'cookbook-card-background-image-example',
+  template: `<kirby-card
+  [hasPadding]="true"
+  backgroundImageUrl="https://images.unsplash.com/photo-1560840067-ddcaeb7831d2"
+  themeColor="dark"
+>
+  <h3>
+    Example using input property to set background
+  </h3>
+  <p>
+    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia facere molestias recusandae
+    necessitatibus ab veniam repellendus doloremque culpa quam libero, est quo accusamus cumque, in
+    quia itaque cupiditate ratione repellat!
+  </p>
+</kirby-card>`,
+  style: `kirby-card {
+  min-height: 300px;
+}
+`,
+};
+
+@Component({
+  selector: config.selector,
+  template: config.template,
+  styles: [config.style],
+})
+export class CardBackgroundImageExampleComponent {
+  template: string = config.template;
+  style: string = config.style;
+}

apps/cookbook/src/app/examples/card-example/examples/card-css-background-image-example/card-css-background-image-example.component.scss

@@ -0,0 +1,25 @@
+/* 
+  In order to use sass functionality the styles for this example 
+  has to be stored in a seperate scss file. Otherwise the preprocessor
+  won't kick in.
+ */
+@use '~@kirbydesign/core/src/scss/utils';
+
+kirby-card {
+  --kirby-card-background-image: linear-gradient(
+      0deg,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(0, 0, 0, 0.6) 100%
+    ),
+    url('https://images.unsplash.com/photo-1512917774080-9991f1c4c750');
+
+  @include utils.media('>=medium') {
+    --kirby-card-background-image: linear-gradient(
+        0deg,
+        rgba(255, 255, 255, 0) 0%,
+        rgba(0, 0, 0, 0.4) 100%
+      ),
+      url('https://images.unsplash.com/photo-1560840067-ddcaeb7831d2');
+  }
+  min-height: 300px;
+}

apps/cookbook/src/app/examples/card-example/examples/card-css-background-image-example/card-css-background-image-example.component.ts

@@ -0,0 +1,46 @@
+import { Component } from '@angular/core';
+
+const config = {
+  selector: 'cookbook-card-css-background-image-example',
+  template: `
+<kirby-card [hasPadding]="true" themeColor="dark">
+  <h3>
+    Example using custom css property to set background
+  </h3>
+  <p> 
+    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia facere molestias recusandae necessitatibus ab veniam repellendus doloremque culpa quam libero, est quo accusamus cumque, in quia itaque cupiditate ratione repellat!
+  </p>
+</kirby-card>
+  `,
+  style: `@use '~@kirbydesign/core/src/scss/utils';
+
+kirby-card {
+  min-height: 300px;
+
+  --kirby-card-background-image: linear-gradient(
+      0deg,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(0, 0, 0, 0.6) 100%
+    ),
+    url('https://images.unsplash.com/photo-1512917774080-9991f1c4c750');
+
+  @include utils.media('>=medium') {
+    --kirby-card-background-image: linear-gradient(
+        0deg,
+        rgba(255, 255, 255, 0) 0%,
+        rgba(0, 0, 0, 0.4) 100%
+      ),
+      url('https://images.unsplash.com/photo-1560840067-ddcaeb7831d2');
+  }
+}`,
+};
+
+@Component({
+  selector: config.selector,
+  template: config.template,
+  styleUrls: ['./card-css-background-image-example.component.scss'],
+})
+export class CardCssBackgroundImageExampleComponent {
+  template: string = config.template;
+  style: string = config.style;
+}

apps/cookbook/src/app/examples/examples.common.ts

@@ -10,10 +10,6 @@ import { AvatarExampleComponent } from './avatar-example/avatar-example.componen
 import { ButtonExampleComponent } from './button-example/button-example.component';
 import { CalendarCardExampleComponent } from './calendar-example/calendar-card-example.component';
 import { CalendarExampleComponent } from './calendar-example/calendar-example.component';
-import { CardExampleComponent } from './card-example/card-example.component';
-import { CardClickableExampleComponent } from './card/card-clickable-example/card-clickable-example.component';
-import { CardElevationsExampleComponent } from './card/card-elevations-example/card-elevations-example.component';
-import { CardThemecolorExampleComponent } from './card/card-themecolor-example/card-themecolor-example.component';
 import { CheckboxExampleComponent } from './checkbox-example/checkbox-example.component';
 import { ChipExampleComponent } from './chip-example/chip-example.component';
 import { DividerExampleComponent } from './divider-example/divider-example.component';
@@ -75,10 +71,6 @@ export const COMPONENT_DECLARATIONS: any[] = [
   ExamplesComponent,
   ButtonExampleComponent,
   SlideButtonExampleComponent,
-  CardExampleComponent,
-  CardClickableExampleComponent,
-  CardThemecolorExampleComponent,
-  CardElevationsExampleComponent,
   ListExampleComponent,
   ListLoadOnDemandExampleComponent,
   ListSwipeExampleComponent,

apps/cookbook/src/app/examples/examples.module.ts

@@ -8,6 +8,7 @@ import { AccordionExampleModule } from './accordion-example/accordion-example.mo
 import { AvatarExampleModule } from './avatar-example/avatar-example.module';
 import { BadgeExampleModule } from './badge-example/badge-example.module';
 import { CardExampleComponent } from './card-example/card-example.component';
+import { CardExampleModule } from './card-example/card-example.module';
 import { ChartDeprecatedExampleModule } from './chart-deprecated-example/chart-deprecated-example.module';
 import { ChartExampleModule } from './chart-example/chart-example.module';
 import { CheckboxExampleModule } from './checkbox-example/checkbox-example.module';
@@ -41,6 +42,7 @@ const IMPORTS = [
   SegmentedControlExampleModule,
   ChartDeprecatedExampleModule,
   ChartExampleModule,
+  CardExampleModule,
   ItemSlidingExampleModule,
   BadgeExampleModule,
   ProgressCircleExampleModule,

apps/cookbook/src/app/showcase/card-showcase/card-showcase.component.html

@@ -59,14 +59,83 @@
     ></cookbook-card-example>
   </div>
   <cookbook-code-viewer [html]="exampleHtml"></cookbook-code-viewer>
-  <h4>Properties:</h4>
+  <h2>Colors</h2>
+  <p>
+    <cookbook-card-themecolor-example></cookbook-card-themecolor-example>
+  </p>
+
+  <h2>Elevation</h2>
+  <p>
+    <cookbook-card-elevations-example></cookbook-card-elevations-example>
+  </p>
+
+  <h2>Clickable</h2>
+  <p>
+    <cookbook-card-clickable-example></cookbook-card-clickable-example>
+  </p>
+
+  <h2>Background image</h2>
+  <p>
+    The card can use an image as a background by either using the
+    <code>backgroundImageUrl</code> input property or the
+    <code>--kirby-card-background-image</code> custom css property.
+  </p>
+  <h3>Setting background image from Javascript</h3>
+  <p>
+    In this example the <code>backgroundImageUrl</code> input property is used for setting the
+    background image. Notice the poor readability as the contrast between the text and background
+    image is too low. This could be improved by applying a linear gradient; using the
+    <code>backgroundImageUrl</code> this would have to be done by editing the image itself.
+  </p>
+  <p>
+    Furthermore using <code>backgroundImageUrl</code> requires a Javascript mechanism in order to
+    change based on viewport width. In contrast the
+    <code>--kirby-card-background-image</code> custom css property allows for media queries to be
+    used.
+  </p>
+  <p>
+    <cookbook-example-viewer
+      [html]="backgroundImageExample.template"
+      [css]="backgroundImageExample.style"
+    >
+      <cookbook-card-background-image-example #backgroundImageExample>
+      </cookbook-card-background-image-example>
+    </cookbook-example-viewer>
+  </p>
+  <h3>Setting background image from CSS with media queries & linear gradient</h3>
+  <p>
+    This example uses the <code>--kirby-card-background-image</code> custom css property to set the
+    background image. Furthermore a linear gradient is applied to improve the readability of the
+    text and a media query is used to change the image based on viewport width.
+  </p>
+  <p>
+    <em>Note:</em> this example uses
+    <a target="_blank" href="https://www.npmjs.com/package/include-media">include-media</a> for
+    media queries. This is re-exported from the <code>'@kirbydesign/core/src/scss/utils'</code> Sass
+    module.
+  </p>
+  <p>
+    <cookbook-example-viewer
+      [html]="cssBackgroundImageExample.template"
+      [css]="cssBackgroundImageExample.style"
+    >
+      <cookbook-card-css-background-image-example
+        #cssBackgroundImageExample
+      ></cookbook-card-css-background-image-example>
+    </cookbook-example-viewer>
+  </p>
+
+  <kirby-divider [hasMargin]="true"></kirby-divider>
+
+  <h2>API Description</h2>
+  <h3>Properties:</h3>
   <cookbook-api-description-properties
     [properties]="properties"
   ></cookbook-api-description-properties>
-  <h4>Colors:</h4>
-  <cookbook-card-themecolor-example></cookbook-card-themecolor-example>
-  <h4>Elevation:</h4>
-  <cookbook-card-elevations-example></cookbook-card-elevations-example>
-  <h4>Clickable:</h4>
-  <cookbook-card-clickable-example></cookbook-card-clickable-example>
+  <h3>CSS Custom Properties</h3>
+  <cookbook-api-description-properties
+    [properties]="customCssProperties"
+    [columns]="customCssPropertiesColumns"
+  >
+  </cookbook-api-description-properties>
 </div>

apps/cookbook/src/app/showcase/card-showcase/card-showcase.component.ts

@@ -1,5 +1,8 @@
 import { Component } from '@angular/core';
-import { ApiDescriptionProperty } from '~/app/shared/api-description/api-description-properties/api-description-properties.component';
+import {
+  ApiDescriptionProperty,
+  ApiDescriptionPropertyColumns,
+} from '~/app/shared/api-description/api-description-properties/api-description-properties.component';
 
 @Component({
   selector: 'cookbook-card-showcase',
@@ -22,6 +25,12 @@ export class CardShowcaseComponent {
       defaultValue: 'null',
       type: ['string'],
     },
+    {
+      name: 'backgroundImageUrl',
+      description: '(Optional) Provided a valid URL will set the background image of the card.',
+      defaultValue: '',
+      type: ['string'],
+    },
     {
       name: 'mode',
       description:
@@ -52,4 +61,32 @@ export class CardShowcaseComponent {
       ],
     },
   ];
+
+  customCssPropertiesColumns: ApiDescriptionPropertyColumns = {
+    name: 'Attribute',
+    description: 'Description',
+    default: 'Default',
+  };
+
+  customCssProperties: ApiDescriptionProperty[] = [
+    {
+      name: '--kirby-card-background-image',
+      description: "Sets the 'background-image' property of the card.",
+    },
+    {
+      name: '--kirby-card-background-repeat',
+      description: "Sets the 'background-repeat' property of the card",
+      defaultValue: 'no-repeat',
+    },
+    {
+      name: '--kirby-card-background-position',
+      description: "Sets the 'background-position' property of the card",
+      defaultValue: 'center',
+    },
+    {
+      name: '--kirby-card-background-size',
+      description: "Sets the 'background-size' property of the card",
+      defaultValue: 'cover',
+    },
+  ];
 }

apps/cookbook/src/app/showcase/chart-showcase/chart-showcase.component.html

@@ -79,15 +79,15 @@ <h3>Stock Chart</h3>
   <b>Please note</b> that this chart only accepts data where each datapoint consists of a value for
   both x and y.
 </p>
-<small
-  ><pre>
+<small>
+  <pre>
   {{ '{' }}
     x: 1231831920, // Time as epoch timestamp
     y: 10 // Value at time 'x'
   {{ '}' }}
 </pre
-  ></small
->
+  >
+</small>
 
 <p>
   <kirby-card [mode]="_cardMode" [hasPadding]="_cardHasPadding">
@@ -230,7 +230,7 @@ <h2>Annotations</h2>
 <p>
   Lines, boxes, ellipses can be drawn to annotate the charts using the
   <code>annotations</code> input property. Annotations are drawn using the
-  <a target="_blank" href="https://www.chartjs.org/chartjs-plugin-annotation/"
+  <a target="_blank" href="https://www.chartjs.org/chartjs-plugin-annotation/1.0.2/"
     >chartjs-plugin-annotation</a
   >
   plugin for Chart.js
@@ -244,21 +244,23 @@ <h2>Annotations</h2>
 <p>More documentation of the individual annotation types can be found here:</p>
 <ul>
   <li>
-    <a target="_blank" href="https://www.chartjs.org/chartjs-plugin-annotation/guide/types/box.html"
+    <a
+      target="_blank"
+      href="https://www.chartjs.org/chartjs-plugin-annotation/1.0.2/guide/types/box.html"
       >Box annotation documentation</a
     >
   </li>
   <li>
     <a
       target="_blank"
-      href="https://www.chartjs.org/chartjs-plugin-annotation/guide/types/ellipse.html"
+      href="https://www.chartjs.org/chartjs-plugin-annotation/1.0.2/guide/types/ellipse.html"
       >Ellipse annotation documentation</a
     >
   </li>
   <li>
     <a
       target="_blank"
-      href="https://www.chartjs.org/chartjs-plugin-annotation/guide/types/line.html"
+      href="https://www.chartjs.org/chartjs-plugin-annotation/1.0.2/guide/types/line.html"
       >Line annotation documentation</a
     >
   </li>

libs/designsystem/src/lib/components/calendar/calendar.component.html

@@ -15,6 +15,7 @@
   </div>
   <kirby-dropdown
     *ngIf="_hasYearNavigator"
+    [usePopover]="usePopover"
     [selectedIndex]="navigatedYear"
     [items]="navigableYears"
     popout="left"

libs/designsystem/src/lib/components/calendar/calendar.component.ts

@@ -79,6 +79,11 @@ export class CalendarComponent implements OnInit, AfterViewInit, OnChanges {
   @Input() disableFutureDates = false;
   @Input() alwaysEnableToday = false;
   @Input() customLocales: { [key: string]: Locale } = {};
+  /* 
+    Experimental: Input property not documented on purpose. 
+    For context see: https://github.com/kirbydesign/designsystem/issues/2087
+  */
+  @Input() usePopover = false;
   /**
    * Configuration for the year navigator.
    *