From 008a77187ec23ea79af7ca42ca3a4949f5f101a8 Mon Sep 17 00:00:00 2001 From: Mads Buchmann Frederiksen Date: Mon, 21 Feb 2022 10:45:53 +0100 Subject: [PATCH 01/59] Add "backgroundImageUrl" and custom css properties for controlling background of the card component (#2047) * :sparkles: Make it possible to set & control card bg image * :sparkles: Add 'backgroundImageUrl' input property to card * :memo: Document background-image related API * :memo: Reword table text & remove type column * :memo: Add card with background image examples * :truck: Move all card examples to a shared module * :white_check_mark: Add tests for backgroundImageUrl * :pen: Uppercase CSS in documentation Co-authored-by: Jesper Kaltoft Vind * :memo: Expand documentation on card background image I've attempted expanding the documentation such that it explains the pros and cons of each method. * :memo: Modify css background example to use media queries Co-authored-by: Jesper Kaltoft Vind --- .../card-example/card-example.module.ts | 27 ++++++ ...card-background-image-example.component.ts | 33 ++++++++ .../card-clickable-example.component.html | 0 .../card-clickable-example.component.scss | 0 .../card-clickable-example.component.ts | 0 ...ss-background-image-example.component.scss | 25 ++++++ ...-css-background-image-example.component.ts | 46 ++++++++++ .../card-elevations-example.component.html | 0 .../card-elevations-example.component.scss | 0 .../card-elevations-example.component.ts | 0 .../card-themecolor-example.component.html | 0 .../card-themecolor-example.component.scss | 0 .../card-themecolor-example.component.ts | 0 .../src/app/examples/examples.common.ts | 8 -- .../src/app/examples/examples.module.ts | 2 + .../card-showcase.component.html | 83 +++++++++++++++++-- .../card-showcase/card-showcase.component.ts | 39 ++++++++- .../lib/components/card/card.component.scss | 4 + .../components/card/card.component.spec.ts | 24 ++++++ .../src/lib/components/card/card.component.ts | 8 ++ 20 files changed, 283 insertions(+), 16 deletions(-) create mode 100644 apps/cookbook/src/app/examples/card-example/card-example.module.ts create mode 100644 apps/cookbook/src/app/examples/card-example/examples/card-background-image-example.component.ts rename apps/cookbook/src/app/examples/{card => card-example/examples}/card-clickable-example/card-clickable-example.component.html (100%) rename apps/cookbook/src/app/examples/{card => card-example/examples}/card-clickable-example/card-clickable-example.component.scss (100%) rename apps/cookbook/src/app/examples/{card => card-example/examples}/card-clickable-example/card-clickable-example.component.ts (100%) create mode 100644 apps/cookbook/src/app/examples/card-example/examples/card-css-background-image-example/card-css-background-image-example.component.scss create mode 100644 apps/cookbook/src/app/examples/card-example/examples/card-css-background-image-example/card-css-background-image-example.component.ts rename apps/cookbook/src/app/examples/{card => card-example/examples}/card-elevations-example/card-elevations-example.component.html (100%) rename apps/cookbook/src/app/examples/{card => card-example/examples}/card-elevations-example/card-elevations-example.component.scss (100%) rename apps/cookbook/src/app/examples/{card => card-example/examples}/card-elevations-example/card-elevations-example.component.ts (100%) rename apps/cookbook/src/app/examples/{card => card-example/examples}/card-themecolor-example/card-themecolor-example.component.html (100%) rename apps/cookbook/src/app/examples/{card => card-example/examples}/card-themecolor-example/card-themecolor-example.component.scss (100%) rename apps/cookbook/src/app/examples/{card => card-example/examples}/card-themecolor-example/card-themecolor-example.component.ts (100%) diff --git a/apps/cookbook/src/app/examples/card-example/card-example.module.ts b/apps/cookbook/src/app/examples/card-example/card-example.module.ts new file mode 100644 index 0000000000..ae918eea7d --- /dev/null +++ b/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 {} diff --git a/apps/cookbook/src/app/examples/card-example/examples/card-background-image-example.component.ts b/apps/cookbook/src/app/examples/card-example/examples/card-background-image-example.component.ts new file mode 100644 index 0000000000..50e0dd51c6 --- /dev/null +++ b/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: ` +

+ Example using input property to set background +

+

+ 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! +

+`, + 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; +} diff --git a/apps/cookbook/src/app/examples/card/card-clickable-example/card-clickable-example.component.html b/apps/cookbook/src/app/examples/card-example/examples/card-clickable-example/card-clickable-example.component.html similarity index 100% rename from apps/cookbook/src/app/examples/card/card-clickable-example/card-clickable-example.component.html rename to apps/cookbook/src/app/examples/card-example/examples/card-clickable-example/card-clickable-example.component.html diff --git a/apps/cookbook/src/app/examples/card/card-clickable-example/card-clickable-example.component.scss b/apps/cookbook/src/app/examples/card-example/examples/card-clickable-example/card-clickable-example.component.scss similarity index 100% rename from apps/cookbook/src/app/examples/card/card-clickable-example/card-clickable-example.component.scss rename to apps/cookbook/src/app/examples/card-example/examples/card-clickable-example/card-clickable-example.component.scss diff --git a/apps/cookbook/src/app/examples/card/card-clickable-example/card-clickable-example.component.ts b/apps/cookbook/src/app/examples/card-example/examples/card-clickable-example/card-clickable-example.component.ts similarity index 100% rename from apps/cookbook/src/app/examples/card/card-clickable-example/card-clickable-example.component.ts rename to apps/cookbook/src/app/examples/card-example/examples/card-clickable-example/card-clickable-example.component.ts diff --git a/apps/cookbook/src/app/examples/card-example/examples/card-css-background-image-example/card-css-background-image-example.component.scss b/apps/cookbook/src/app/examples/card-example/examples/card-css-background-image-example/card-css-background-image-example.component.scss new file mode 100644 index 0000000000..a0b1d5b7c3 --- /dev/null +++ b/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; +} diff --git a/apps/cookbook/src/app/examples/card-example/examples/card-css-background-image-example/card-css-background-image-example.component.ts b/apps/cookbook/src/app/examples/card-example/examples/card-css-background-image-example/card-css-background-image-example.component.ts new file mode 100644 index 0000000000..d971566ffd --- /dev/null +++ b/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: ` + +

+ Example using custom css property to set background +

+

+ 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! +

+ + `, + 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; +} diff --git a/apps/cookbook/src/app/examples/card/card-elevations-example/card-elevations-example.component.html b/apps/cookbook/src/app/examples/card-example/examples/card-elevations-example/card-elevations-example.component.html similarity index 100% rename from apps/cookbook/src/app/examples/card/card-elevations-example/card-elevations-example.component.html rename to apps/cookbook/src/app/examples/card-example/examples/card-elevations-example/card-elevations-example.component.html diff --git a/apps/cookbook/src/app/examples/card/card-elevations-example/card-elevations-example.component.scss b/apps/cookbook/src/app/examples/card-example/examples/card-elevations-example/card-elevations-example.component.scss similarity index 100% rename from apps/cookbook/src/app/examples/card/card-elevations-example/card-elevations-example.component.scss rename to apps/cookbook/src/app/examples/card-example/examples/card-elevations-example/card-elevations-example.component.scss diff --git a/apps/cookbook/src/app/examples/card/card-elevations-example/card-elevations-example.component.ts b/apps/cookbook/src/app/examples/card-example/examples/card-elevations-example/card-elevations-example.component.ts similarity index 100% rename from apps/cookbook/src/app/examples/card/card-elevations-example/card-elevations-example.component.ts rename to apps/cookbook/src/app/examples/card-example/examples/card-elevations-example/card-elevations-example.component.ts diff --git a/apps/cookbook/src/app/examples/card/card-themecolor-example/card-themecolor-example.component.html b/apps/cookbook/src/app/examples/card-example/examples/card-themecolor-example/card-themecolor-example.component.html similarity index 100% rename from apps/cookbook/src/app/examples/card/card-themecolor-example/card-themecolor-example.component.html rename to apps/cookbook/src/app/examples/card-example/examples/card-themecolor-example/card-themecolor-example.component.html diff --git a/apps/cookbook/src/app/examples/card/card-themecolor-example/card-themecolor-example.component.scss b/apps/cookbook/src/app/examples/card-example/examples/card-themecolor-example/card-themecolor-example.component.scss similarity index 100% rename from apps/cookbook/src/app/examples/card/card-themecolor-example/card-themecolor-example.component.scss rename to apps/cookbook/src/app/examples/card-example/examples/card-themecolor-example/card-themecolor-example.component.scss diff --git a/apps/cookbook/src/app/examples/card/card-themecolor-example/card-themecolor-example.component.ts b/apps/cookbook/src/app/examples/card-example/examples/card-themecolor-example/card-themecolor-example.component.ts similarity index 100% rename from apps/cookbook/src/app/examples/card/card-themecolor-example/card-themecolor-example.component.ts rename to apps/cookbook/src/app/examples/card-example/examples/card-themecolor-example/card-themecolor-example.component.ts diff --git a/apps/cookbook/src/app/examples/examples.common.ts b/apps/cookbook/src/app/examples/examples.common.ts index f3fb93e58d..41ee083016 100644 --- a/apps/cookbook/src/app/examples/examples.common.ts +++ b/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, diff --git a/apps/cookbook/src/app/examples/examples.module.ts b/apps/cookbook/src/app/examples/examples.module.ts index 5a8d7d75a6..ff994c9c53 100644 --- a/apps/cookbook/src/app/examples/examples.module.ts +++ b/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, diff --git a/apps/cookbook/src/app/showcase/card-showcase/card-showcase.component.html b/apps/cookbook/src/app/showcase/card-showcase/card-showcase.component.html index 6a36b9ff7c..55ddd43a83 100644 --- a/apps/cookbook/src/app/showcase/card-showcase/card-showcase.component.html +++ b/apps/cookbook/src/app/showcase/card-showcase/card-showcase.component.html @@ -59,14 +59,83 @@ > -

Properties:

+

Colors

+

+ +

+ +

Elevation

+

+ +

+ +

Clickable

+

+ +

+ +

Background image

+

+ The card can use an image as a background by either using the + backgroundImageUrl input property or the + --kirby-card-background-image custom css property. +

+

Setting background image from Javascript

+

+ In this example the backgroundImageUrl 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 + backgroundImageUrl this would have to be done by editing the image itself. +

+

+ Furthermore using backgroundImageUrl requires a Javascript mechanism in order to + change based on viewport width. In contrast the + --kirby-card-background-image custom css property allows for media queries to be + used. +

+

+ + + + +

+

Setting background image from CSS with media queries & linear gradient

+

+ This example uses the --kirby-card-background-image 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. +

+

+ Note: this example uses + include-media for + media queries. This is re-exported from the '@kirbydesign/core/src/scss/utils' Sass + module. +

+

+ + + +

+ + + +

API Description

+

Properties:

-

Colors:

- -

Elevation:

- -

Clickable:

- +

CSS Custom Properties

+ + diff --git a/apps/cookbook/src/app/showcase/card-showcase/card-showcase.component.ts b/apps/cookbook/src/app/showcase/card-showcase/card-showcase.component.ts index ce3c7c5451..1bbbee9293 100644 --- a/apps/cookbook/src/app/showcase/card-showcase/card-showcase.component.ts +++ b/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', + }, + ]; } diff --git a/libs/designsystem/src/lib/components/card/card.component.scss b/libs/designsystem/src/lib/components/card/card.component.scss index 3732509761..69ad699a92 100644 --- a/libs/designsystem/src/lib/components/card/card.component.scss +++ b/libs/designsystem/src/lib/components/card/card.component.scss @@ -10,6 +10,10 @@ box-shadow: utils.get-elevation(2); color: var(--kirby-card-main-color); background-color: var(--kirby-card-main-background-color); + background-image: var(--kirby-card-background-image); + background-repeat: var(--kirby-card-background-repeat, no-repeat); + background-position: var(--kirby-card-background-position, center); + background-size: var(--kirby-card-background-size, cover); display: flex; flex-direction: column; justify-content: space-between; diff --git a/libs/designsystem/src/lib/components/card/card.component.spec.ts b/libs/designsystem/src/lib/components/card/card.component.spec.ts index c93482c1e7..35530538cf 100644 --- a/libs/designsystem/src/lib/components/card/card.component.spec.ts +++ b/libs/designsystem/src/lib/components/card/card.component.spec.ts @@ -22,6 +22,30 @@ describe('CardComponent', () => { }); }); + describe("with 'backgroundImageUrl' set", () => { + const testUrl = 'https://notarealurl/'; + let cardElement: HTMLElement; + + beforeEach(() => { + spectator = createHost(``); + cardElement = spectator.queryHost('kirby-card'); + }); + + it("should use the url for the 'background-image' property", () => { + expect(cardElement).toHaveComputedStyle({ + 'background-image': `url("${testUrl}")`, + }); + }); + + it('should have correct defaults for properties related to background', () => { + expect(cardElement).toHaveComputedStyle({ + 'background-repeat': 'no-repeat', + 'background-position': '50% 50%', + 'background-size': 'cover', + }); + }); + }); + describe('with mode attribute', () => { beforeEach(() => { spectator = createHost(''); diff --git a/libs/designsystem/src/lib/components/card/card.component.ts b/libs/designsystem/src/lib/components/card/card.component.ts index 962de9500d..7c296a4a0c 100644 --- a/libs/designsystem/src/lib/components/card/card.component.ts +++ b/libs/designsystem/src/lib/components/card/card.component.ts @@ -20,6 +20,14 @@ export class CardComponent implements OnInit, OnDestroy { @Input() title: string; @Input() subtitle: string; + @HostBinding('style.--kirby-card-background-image') + _backgroundImage: string; + + @Input() + set backgroundImageUrl(value: string) { + this._backgroundImage = `url('${value}')`; + } + @Input() hasPadding: boolean; From 7fb3319d17a81fd0fc0cb3f6eb94ac5fab69ff63 Mon Sep 17 00:00:00 2001 From: Mads Buchmann Frederiksen Date: Thu, 3 Mar 2022 13:48:36 +0100 Subject: [PATCH 02/59] :clown_face: Add missing input properties to mocks (#2084) --- .../testing-base/src/lib/components/mock.card.component.ts | 1 + .../src/lib/components/mock.modal-footer.component.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/libs/designsystem/testing-base/src/lib/components/mock.card.component.ts b/libs/designsystem/testing-base/src/lib/components/mock.card.component.ts index 1d5c97a93e..de5c2c9f9a 100644 --- a/libs/designsystem/testing-base/src/lib/components/mock.card.component.ts +++ b/libs/designsystem/testing-base/src/lib/components/mock.card.component.ts @@ -16,6 +16,7 @@ import { CardComponent } from '@kirbydesign/designsystem'; export class MockCardComponent { @Input() title: string; @Input() subtitle: string; + @Input() backgroundImageUrl: string; @Input() hasPadding: boolean; @Input() sizes: { [size: string]: number }; @Input() mode: 'flat' | 'highlighted'; diff --git a/libs/designsystem/testing-base/src/lib/components/mock.modal-footer.component.ts b/libs/designsystem/testing-base/src/lib/components/mock.modal-footer.component.ts index 41855cafaa..e5a6416d49 100644 --- a/libs/designsystem/testing-base/src/lib/components/mock.modal-footer.component.ts +++ b/libs/designsystem/testing-base/src/lib/components/mock.modal-footer.component.ts @@ -15,6 +15,7 @@ import { ModalFooterComponent } from '@kirbydesign/designsystem'; }) export class MockModalFooterComponent { @Input() snapToKeyboard: boolean; + @Input() type: 'inline' | 'fixed'; } // #endregion From 67472ff0c775cb1816a2e6485164c031bb57b3ba Mon Sep 17 00:00:00 2001 From: Troels Strand Date: Fri, 4 Mar 2022 13:55:14 +0100 Subject: [PATCH 03/59] Make it possible to use time scale as a custom option for chart (#2082) * Reintroduce TimeScale for ChartJS With stock charts we need Time Cartesian Axis for comparison of securities. When using time as X scale type we need a way providing zero labels (an empty array), since these are autogenerated by TimeScale. In chart-js.service the method labelsToApply needs a way of returning [] * :sparkles: Allow an empty array to disable labels * :fire: Remove log statements * :sparkles: Make it possible to bypass default labels for stock Co-authored-by: Mads Buchmann Frederiksen --- .../chart/chart-js/chart-js.service.spec.ts | 4 ++-- .../chart/chart-js/chart-js.service.ts | 22 ++++++++++++++++--- .../chart/chart-js/configured-chart-js.ts | 4 +++- 3 files changed, 24 insertions(+), 6 deletions(-) diff --git a/libs/designsystem/src/lib/components/chart/chart-js/chart-js.service.spec.ts b/libs/designsystem/src/lib/components/chart/chart-js/chart-js.service.spec.ts index 7637fdd72f..29c497a259 100644 --- a/libs/designsystem/src/lib/components/chart/chart-js/chart-js.service.spec.ts +++ b/libs/designsystem/src/lib/components/chart/chart-js/chart-js.service.spec.ts @@ -20,7 +20,7 @@ describe('ChartJSService', () => { const mockChartConfigService = MockProvider(ChartConfigService, { getTypeConfig: (chartType: ChartType) => deepCopy(TEST_CHART_TYPES_CONFIG[chartType]), - getInteractionFunctionsExtensions: () => ({ onHover: () => console.log('testing') }), + getInteractionFunctionsExtensions: () => ({ onHover: () => null }), getAnnotationDefaults: (type: string) => TEST_CHART_ANNOTATIONS_CONFIG[type], chartTypeToChartJSType: (type: ChartType) => TEST_CHART_TYPES_CONFIG[type].type as ChartJSType, }); @@ -201,7 +201,7 @@ describe('ChartJSService', () => { ], }; chartJSService.renderChart(stockChartConfig); - console.log(chartJSService['chart'].options.locale); + expect(chartJSService['chart'].data.labels.length).toEqual(3); chartJSService['chart'].data.labels.forEach((label) => { expect(label).not.toBe(''); diff --git a/libs/designsystem/src/lib/components/chart/chart-js/chart-js.service.ts b/libs/designsystem/src/lib/components/chart/chart-js/chart-js.service.ts index 670fd9a2f0..3d23bca6fc 100644 --- a/libs/designsystem/src/lib/components/chart/chart-js/chart-js.service.ts +++ b/libs/designsystem/src/lib/components/chart/chart-js/chart-js.service.ts @@ -280,9 +280,25 @@ export class ChartJSService { const typeConfig = this.chartConfigService.getTypeConfig(type); const labelsToApply = (() => { - if (labels?.length > 0) return labels; - else if (type === 'stock') return this.getDefaultStockLabels(datasets, this.locale); - else return this.createBlankLabels(datasets); // ChartJS requires labels + if (type === 'stock') { + /* + The time scale will auto generate labels based on data. + It should be possible to pass an empty array to get the default + behaviour of chart.js when using stock chart. + + TODO: Simplify to always pass labels, if given, to chart.js. + Would be a breaking change. See issue: + https://github.com/kirbydesign/designsystem/issues/2085 + */ + const shouldUseTimescaleLabels = + labels?.length === 0 && options?.scales?.x?.type === 'time'; + if (shouldUseTimescaleLabels) return labels; + return this.getDefaultStockLabels(datasets, this.locale); + } else if (labels?.length > 0) { + return labels; + } else { + return this.createBlankLabels(datasets); + } })(); return mergeDeepAll(typeConfig, { diff --git a/libs/designsystem/src/lib/components/chart/chart-js/configured-chart-js.ts b/libs/designsystem/src/lib/components/chart/chart-js/configured-chart-js.ts index d5bd373164..c5b15769ec 100644 --- a/libs/designsystem/src/lib/components/chart/chart-js/configured-chart-js.ts +++ b/libs/designsystem/src/lib/components/chart/chart-js/configured-chart-js.ts @@ -9,8 +9,10 @@ import { LineController, LineElement, PointElement, + TimeScale, Tooltip, } from 'chart.js'; +import 'chartjs-adapter-date-fns'; import annotationPlugin from 'chartjs-plugin-annotation'; import ChartDataLabels from 'chartjs-plugin-datalabels'; @@ -18,7 +20,7 @@ import { mergeDeepAll } from '../../../helpers/merge-deep'; import MarkerPlugin from '../chart-js/chartjs-plugin-marker/chartjs-plugin-marker'; import { CHART_GLOBAL_DEFAULTS } from '../configs/global-defaults.config'; -const CHART_SCALES = [CategoryScale, LinearScale]; +const CHART_SCALES = [CategoryScale, LinearScale, TimeScale]; const CHART_ELEMENTS = [BarElement, LineElement, PointElement]; const CHART_CONTROLLERS = [BarController, LineController]; const CHART_PLUGINS = [annotationPlugin, Filler, ChartDataLabels, Tooltip, MarkerPlugin]; From 5c9ca91d0422f264447b77a56803d15bb622545a Mon Sep 17 00:00:00 2001 From: Mads Buchmann Frederiksen Date: Fri, 4 Mar 2022 14:58:55 +0100 Subject: [PATCH 04/59] :memo: Remove big Kirby v1 notice (#2086) --- readme.md | 6 ------ 1 file changed, 6 deletions(-) diff --git a/readme.md b/readme.md index b9c0e9c792..ebad1d1f64 100644 --- a/readme.md +++ b/readme.md @@ -19,12 +19,6 @@ Kirby Components are built on top of [Angular][angular] and can be used in Angul The Kirby Cookbook, containing samples, status of components etc. can be accessed from [https://cookbook.kirby.design][kirby.cookbook]. ---- - -## 💥 Kirby v. `1.0.0` has landed! Please see the [Migration Guide](#migration-guide) if you're upgrading from `<= 0.8.x` - ---- - ## Table of Contents - [Installation](#installation) From 022d7e4aa2a8a6cc36aa3b737aae6dda97028b34 Mon Sep 17 00:00:00 2001 From: Mads Buchmann Frederiksen Date: Mon, 14 Mar 2022 12:42:47 +0100 Subject: [PATCH 05/59] :sparkles: Allow usePopover to be turned on in calendar (#2102) --- .../src/lib/components/calendar/calendar.component.html | 1 + .../src/lib/components/calendar/calendar.component.ts | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/libs/designsystem/src/lib/components/calendar/calendar.component.html b/libs/designsystem/src/lib/components/calendar/calendar.component.html index 9659c62e98..6ad9492380 100644 --- a/libs/designsystem/src/lib/components/calendar/calendar.component.html +++ b/libs/designsystem/src/lib/components/calendar/calendar.component.html @@ -15,6 +15,7 @@ Date: Thu, 17 Mar 2022 07:29:01 +0100 Subject: [PATCH 06/59] :memo: Fix dead links to annotation plugin docs (#2110) --- .../chart-showcase.component.html | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/apps/cookbook/src/app/showcase/chart-showcase/chart-showcase.component.html b/apps/cookbook/src/app/showcase/chart-showcase/chart-showcase.component.html index 1bb2f08ca0..cbee070a44 100644 --- a/apps/cookbook/src/app/showcase/chart-showcase/chart-showcase.component.html +++ b/apps/cookbook/src/app/showcase/chart-showcase/chart-showcase.component.html @@ -79,15 +79,15 @@

Stock Chart

Please note that this chart only accepts data where each datapoint consists of a value for both x and y.

-
+
+  
   {{ '{' }}
     x: 1231831920, // Time as epoch timestamp
     y: 10 // Value at time 'x'
   {{ '}' }}
 

+  >
+
 
 

   
@@ -230,7 +230,7 @@ 
Annotations

 

   Lines, boxes, ellipses can be drawn to annotate the charts using the
   annotations input property. Annotations are drawn using the
-  chartjs-plugin-annotation
   plugin for Chart.js
@@ -244,21 +244,23 @@ 
Annotations

 
More documentation of the individual annotation types can be found here:

 
    
   
  • 
-    Box annotation documentation
   
    • 
   
  • 
     Ellipse annotation documentation
   
    • 
   
  • 
     Line annotation documentation
   
    • 

From 886c2a45b73b3e182c1bbee015833dcb237c11a2 Mon Sep 17 00:00:00 2001
From: RasmusKjeldgaard 
Date: Thu, 17 Mar 2022 10:58:46 +0100
Subject: [PATCH 07/59] =?UTF-8?q?=F0=9F=90=9B=20=20Push=20scaling=20of=20h?=
 =?UTF-8?q?eader=20to=20next=20cycle=20(#2111)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

With setTimeout we can avoid ResizeObserver loop exceeded
warnings. These are hidden by browsers, but can be picked up
by frontend error logging services.

It most likely happens because the ResizeObserver observes repeated
size changes before the original scaleHeader callback has finished.
---
 .../directives/fit-heading/fit-heading.directive.ts    | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/libs/designsystem/src/lib/directives/fit-heading/fit-heading.directive.ts b/libs/designsystem/src/lib/directives/fit-heading/fit-heading.directive.ts
index 4fd419310d..c3e048b38a 100644
--- a/libs/designsystem/src/lib/directives/fit-heading/fit-heading.directive.ts
+++ b/libs/designsystem/src/lib/directives/fit-heading/fit-heading.directive.ts
@@ -74,7 +74,15 @@ export class FitHeadingDirective implements OnInit, OnDestroy {
 
   private observeResize(): void {
     this.resizeObserverService.observe(this.elementRef, () => {
-      this.scaleHeader();
+      /**
+       * setTimeout is used here to avoid repeated size changes
+       * while the first size change is still ongoing.
+       * This would result in the ResizeObserver being called again,
+       * giving 'ResizeObserver loop limit exceeded' types of errors.
+       */
+      setTimeout(() => {
+        this.scaleHeader();
+      }, 0);
     });
   }
 

From 1bff54936488287d0a621eb08e70ff26a9aff24c Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 17 Mar 2022 11:21:53 +0000
Subject: [PATCH 08/59] :arrow_up: Bump follow-redirects from 1.14.7 to 1.14.8
 (#2049)

Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.14.7 to 1.14.8.
- [Release notes](https://github.com/follow-redirects/follow-redirects/releases)
- [Commits](https://github.com/follow-redirects/follow-redirects/compare/v1.14.7...v1.14.8)

---
updated-dependencies:
- dependency-name: follow-redirects
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] 

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package-lock.json | 31 +++----------------------------
 1 file changed, 3 insertions(+), 28 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c941f6fdbb..b807fa9192 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8089,12 +8089,6 @@
       "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.1.4.tgz",
       "integrity": "sha512-lQ+FF7xUxxRuRqIY7H/lagnT3PhhSnnvtGHzjE5WZKwRyLU7glJfLys05SZ7zHlEr6RXWiqkmgWq4nCkcElR+g=="
     },
-    "date-format": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/date-format/-/date-format-3.0.0.tgz",
-      "integrity": "sha512-eyTcpKOcamdhWJXj56DpQMo1ylSQpcGtGKXcU0Tb97+K56/CF5amAqqqNj0+KvA0iw2ynxtHWFsPDSClCxe48w==",
-      "dev": true
-    },
     "debug": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
@@ -9796,9 +9790,9 @@
       }
     },
     "follow-redirects": {
-      "version": "1.14.7",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.7.tgz",
-      "integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ=="
+      "version": "1.14.8",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.8.tgz",
+      "integrity": "sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA=="
     },
     "for-in": {
       "version": "1.0.2",
@@ -21797,25 +21791,6 @@
       "integrity": "sha1-Rb8dny19wJvtgfHDB8Qw5ouEz/4=",
       "dev": true
     },
-    "streamroller": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/streamroller/-/streamroller-2.2.4.tgz",
-      "integrity": "sha512-OG79qm3AujAM9ImoqgWEY1xG4HX+Lw+yY6qZj9R1K2mhF5bEmQ849wvrb+4vt4jLMLzwXttJlQbOdPOQVRv7DQ==",
-      "dev": true,
-      "requires": {
-        "date-format": "^2.1.0",
-        "debug": "^4.1.1",
-        "fs-extra": "^8.1.0"
-      },
-      "dependencies": {
-        "date-format": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/date-format/-/date-format-2.1.0.tgz",
-          "integrity": "sha512-bYQuGLeFxhkxNOF3rcMtiZxvCBAquGzZm6oWA1oZ0g2THUzivaRhv8uOhdr19LmoobSOLoIAxeUK2RdbM8IFTA==",
-          "dev": true
-        }
-      }
-    },
     "string-argv": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz",

From 8f6a993ef012bac8e2fdf2d82bd999f71946a3d3 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 17 Mar 2022 11:34:59 +0000
Subject: [PATCH 09/59] :arrow_up: Bump prismjs from 1.25.0 to 1.27.0 (#2070)

Bumps [prismjs](https://github.com/PrismJS/prism) from 1.25.0 to 1.27.0.
- [Release notes](https://github.com/PrismJS/prism/releases)
- [Changelog](https://github.com/PrismJS/prism/blob/master/CHANGELOG.md)
- [Commits](https://github.com/PrismJS/prism/compare/v1.25.0...v1.27.0)

---
updated-dependencies:
- dependency-name: prismjs
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] 

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package-lock.json | 6 +++---
 package.json      | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b807fa9192..fe4fbd287d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19546,9 +19546,9 @@
       }
     },
     "prismjs": {
-      "version": "1.25.0",
-      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.25.0.tgz",
-      "integrity": "sha512-WCjJHl1KEWbnkQom1+SzftbtXMKQoezOCYs5rECqMN+jP+apI7ftoflyqigqzopSO3hMhTEb0mFClA8lkolgEg=="
+      "version": "1.27.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz",
+      "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA=="
     },
     "process": {
       "version": "0.11.10",
diff --git a/package.json b/package.json
index a5e414c4fe..f8d46de29c 100644
--- a/package.json
+++ b/package.json
@@ -110,7 +110,7 @@
     "highcharts": "8.0.4",
     "include-media": "^1.4.10",
     "inputmask": "^5.0.5",
-    "prismjs": "1.25.0",
+    "prismjs": "1.27.0",
     "reflect-metadata": "0.1.8",
     "rxjs": "6.5.5",
     "ts-deepcopy": "^0.1.4",

From 443a3ae50742a13121be5bbb08e2e520cc533aad Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 17 Mar 2022 12:02:08 +0000
Subject: [PATCH 10/59] :arrow_up: Bump url-parse from 1.5.3 to 1.5.10 (#2071)

Bumps [url-parse](https://github.com/unshiftio/url-parse) from 1.5.3 to 1.5.10.
- [Release notes](https://github.com/unshiftio/url-parse/releases)
- [Commits](https://github.com/unshiftio/url-parse/compare/1.5.3...1.5.10)

---
updated-dependencies:
- dependency-name: url-parse
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] 

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package-lock.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fe4fbd287d..7e8946ac11 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24162,9 +24162,9 @@
       }
     },
     "url-parse": {
-      "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.3.tgz",
-      "integrity": "sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ==",
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
       "dev": true,
       "requires": {
         "querystringify": "^2.1.1",

From 334a6452c25dfc732036467b55fce88ba6074602 Mon Sep 17 00:00:00 2001
From: RasmusKjeldgaard 
Date: Thu, 17 Mar 2022 13:03:25 +0100
Subject: [PATCH 11/59] =?UTF-8?q?=F0=9F=94=96Bumping=20version=20to=205.2.?=
 =?UTF-8?q?0=20(designsystem)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7e8946ac11..8a26caec4a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "designsystem",
-  "version": "5.1.1",
+  "version": "5.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index f8d46de29c..47569f68d6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "designsystem",
-  "version": "5.1.1",
+  "version": "5.2.0",
   "description": "Kirby Design Angular Components. This library provides Angular wrappers for the @kirbydesign/core package, for smoother integration into Angular projects.",
   "engines": {
     "node": "^14.16"

From 114726097612df3a2983f151085eb3df96388d3c Mon Sep 17 00:00:00 2001
From: Mads Buchmann Frederiksen 
Date: Mon, 28 Feb 2022 11:36:58 +0100
Subject: [PATCH 12/59] Remove deprecated chart components & highcharts
 dependencies (#2069)

* :fire: Remove chart-deprecated components folder

* :fire: Remove ChartDeprecated mocks

* :fire: Remove deprecated chart examples

* :fire: Remove deprecated chart showcase

* :fire: Remove deprecated stock chart component

* :fire: Remove deprecated stock chart examples

* :fire: Remove deprecated stock chart showcase

* :heavy_minus_sign: Remove dependency to highcharts

* :pushpin: Generate new lock file

* :memo: Remove highcharts license notice
---
 .../chart-deprecated-example.component.html   |   7 -
 .../chart-deprecated-example.component.scss   |  18 --
 .../chart-deprecated-example.component.ts     |   8 -
 .../chart-deprecated-example.module.ts        |  31 --
 ...ecated-example-activity-gauge.component.ts |  45 ---
 ...deprecated-example-areaspline.component.ts |  58 ----
 .../chart-deprecated-example-bar.component.ts | 158 ---------
 ...art-deprecated-example-column.component.ts | 129 --------
 ...hart-deprecated-example-donut.component.ts |  44 ---
 .../chart-deprecated-example-pie.component.ts |  43 ---
 ...deprecated-example-timeseries.component.ts | 301 -----------------
 .../src/app/examples/examples.common.ts       |   2 -
 .../src/app/examples/examples.module.ts       |   3 -
 .../src/app/examples/examples.routes.ts       |  10 -
 ...ck-chart-deprecated-example.component.html |  10 -
 ...ck-chart-deprecated-example.component.scss |   0
 ...tock-chart-deprecated-example.component.ts | 305 ------------------
 .../chart-deprecated-showcase.component.html  |  30 --
 .../chart-deprecated-showcase.component.scss  |   5 -
 .../chart-deprecated-showcase.component.ts    |  44 ---
 .../src/app/showcase/showcase.common.ts       |   4 -
 .../src/app/showcase/showcase.routes.ts       |  10 -
 ...k-chart-deprecated-showcase.component.html |   7 -
 ...k-chart-deprecated-showcase.component.scss |   0
 ...ock-chart-deprecated-showcase.component.ts |  32 --
 libs/designsystem/ng-package.json             |   4 -
 libs/designsystem/ngcc.config.js              |   2 +-
 libs/designsystem/package.json                |   1 -
 .../chart-deprecated-helper.ts                |  25 --
 .../chart-deprecated/chart-deprecated-type.ts |  10 -
 .../chart-deprecated.component.scss           |   3 -
 .../chart-deprecated.component.spec.ts        | 273 ----------------
 .../chart-deprecated.component.ts             | 233 -------------
 .../lib/components/chart-deprecated/index.ts  |   2 -
 .../chart-deprecated/options/activitygauge.ts |  87 -----
 .../chart-deprecated/options/areaspline.ts    |  95 ------
 .../chart-deprecated/options/bar.ts           |  93 ------
 .../chart-deprecated/options/column.ts        | 101 ------
 .../chart-deprecated/options/donut.ts         | 118 -------
 .../chart-deprecated/options/timeseries.ts    |  96 ------
 libs/designsystem/src/lib/components/index.ts |   2 -
 .../stock-chart-deprecated/index.ts           |   2 -
 .../options/stock-chart-deprecated-options.ts | 220 -------------
 .../stock-chart-deprecated.component.scss     |   3 -
 .../stock-chart-deprecated.component.spec.ts  |  34 --
 .../stock-chart-deprecated.component.ts       |  92 ------
 libs/designsystem/src/lib/kirby.module.ts     |   4 -
 .../mock.chart-deprecated.component.ts        |  28 --
 .../testing-base/src/lib/mock-components.ts   |   2 -
 package-lock.json                             |   5 -
 package.json                                  |   1 -
 readme.md                                     |   4 -
 52 files changed, 1 insertion(+), 2843 deletions(-)
 delete mode 100644 apps/cookbook/src/app/examples/chart-deprecated-example/chart-deprecated-example.component.html
 delete mode 100644 apps/cookbook/src/app/examples/chart-deprecated-example/chart-deprecated-example.component.scss
 delete mode 100644 apps/cookbook/src/app/examples/chart-deprecated-example/chart-deprecated-example.component.ts
 delete mode 100644 apps/cookbook/src/app/examples/chart-deprecated-example/chart-deprecated-example.module.ts
 delete mode 100644 apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-activity-gauge.component.ts
 delete mode 100644 apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-areaspline.component.ts
 delete mode 100644 apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-bar.component.ts
 delete mode 100644 apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-column.component.ts
 delete mode 100644 apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-donut.component.ts
 delete mode 100644 apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-pie.component.ts
 delete mode 100644 apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-timeseries.component.ts
 delete mode 100644 apps/cookbook/src/app/examples/stock-chart-deprecated-example/stock-chart-deprecated-example.component.html
 delete mode 100644 apps/cookbook/src/app/examples/stock-chart-deprecated-example/stock-chart-deprecated-example.component.scss
 delete mode 100644 apps/cookbook/src/app/examples/stock-chart-deprecated-example/stock-chart-deprecated-example.component.ts
 delete mode 100644 apps/cookbook/src/app/showcase/chart-deprecated-showcase/chart-deprecated-showcase.component.html
 delete mode 100644 apps/cookbook/src/app/showcase/chart-deprecated-showcase/chart-deprecated-showcase.component.scss
 delete mode 100644 apps/cookbook/src/app/showcase/chart-deprecated-showcase/chart-deprecated-showcase.component.ts
 delete mode 100644 apps/cookbook/src/app/showcase/stock-chart-deprecated-showcase/stock-chart-deprecated-showcase.component.html
 delete mode 100644 apps/cookbook/src/app/showcase/stock-chart-deprecated-showcase/stock-chart-deprecated-showcase.component.scss
 delete mode 100644 apps/cookbook/src/app/showcase/stock-chart-deprecated-showcase/stock-chart-deprecated-showcase.component.ts
 delete mode 100644 libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated-helper.ts
 delete mode 100644 libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated-type.ts
 delete mode 100644 libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated.component.scss
 delete mode 100644 libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated.component.spec.ts
 delete mode 100644 libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated.component.ts
 delete mode 100644 libs/designsystem/src/lib/components/chart-deprecated/index.ts
 delete mode 100644 libs/designsystem/src/lib/components/chart-deprecated/options/activitygauge.ts
 delete mode 100644 libs/designsystem/src/lib/components/chart-deprecated/options/areaspline.ts
 delete mode 100644 libs/designsystem/src/lib/components/chart-deprecated/options/bar.ts
 delete mode 100644 libs/designsystem/src/lib/components/chart-deprecated/options/column.ts
 delete mode 100644 libs/designsystem/src/lib/components/chart-deprecated/options/donut.ts
 delete mode 100644 libs/designsystem/src/lib/components/chart-deprecated/options/timeseries.ts
 delete mode 100644 libs/designsystem/src/lib/components/stock-chart-deprecated/index.ts
 delete mode 100644 libs/designsystem/src/lib/components/stock-chart-deprecated/options/stock-chart-deprecated-options.ts
 delete mode 100644 libs/designsystem/src/lib/components/stock-chart-deprecated/stock-chart-deprecated.component.scss
 delete mode 100644 libs/designsystem/src/lib/components/stock-chart-deprecated/stock-chart-deprecated.component.spec.ts
 delete mode 100644 libs/designsystem/src/lib/components/stock-chart-deprecated/stock-chart-deprecated.component.ts
 delete mode 100644 libs/designsystem/testing-base/src/lib/components/mock.chart-deprecated.component.ts

diff --git a/apps/cookbook/src/app/examples/chart-deprecated-example/chart-deprecated-example.component.html b/apps/cookbook/src/app/examples/chart-deprecated-example/chart-deprecated-example.component.html
deleted file mode 100644
index 0a96ef69bf..0000000000
--- a/apps/cookbook/src/app/examples/chart-deprecated-example/chart-deprecated-example.component.html
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-
-
-
-
-
diff --git a/apps/cookbook/src/app/examples/chart-deprecated-example/chart-deprecated-example.component.scss b/apps/cookbook/src/app/examples/chart-deprecated-example/chart-deprecated-example.component.scss
deleted file mode 100644
index 30155e0d2d..0000000000
--- a/apps/cookbook/src/app/examples/chart-deprecated-example/chart-deprecated-example.component.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@use '~@kirbydesign/core/src/scss/utils';
-
-:host {
-  display: block;
-  height: 100%;
-  overflow-x: hidden;
-  background: utils.get-color('background-color');
-  padding: utils.size('s');
-
-  @include utils.media('>=medium') {
-    padding: utils.size('l');
-  }
-
-  > * {
-    display: block;
-    margin: utils.size('s') 0;
-  }
-}
diff --git a/apps/cookbook/src/app/examples/chart-deprecated-example/chart-deprecated-example.component.ts b/apps/cookbook/src/app/examples/chart-deprecated-example/chart-deprecated-example.component.ts
deleted file mode 100644
index 22aec2f5b9..0000000000
--- a/apps/cookbook/src/app/examples/chart-deprecated-example/chart-deprecated-example.component.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'cookbook-chart-deprecated-example',
-  templateUrl: './chart-deprecated-example.component.html',
-  styleUrls: ['./chart-deprecated-example.component.scss'],
-})
-export class ChartDeprecatedExampleComponent {}
diff --git a/apps/cookbook/src/app/examples/chart-deprecated-example/chart-deprecated-example.module.ts b/apps/cookbook/src/app/examples/chart-deprecated-example/chart-deprecated-example.module.ts
deleted file mode 100644
index d9cd26b4ae..0000000000
--- a/apps/cookbook/src/app/examples/chart-deprecated-example/chart-deprecated-example.module.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-
-import { KirbyModule } from '@kirbydesign/designsystem';
-
-import { ChartDeprecatedExampleComponent } from './chart-deprecated-example.component';
-import { ChartDeprecatedExampleActivityGaugeComponent } from './examples/chart-deprecated-example-activity-gauge.component';
-import { ChartDeprecatedExampleAreasplineComponent } from './examples/chart-deprecated-example-areaspline.component';
-import { ChartDeprecatedExampleBarComponent } from './examples/chart-deprecated-example-bar.component';
-import { ChartDeprecatedExampleColumnComponent } from './examples/chart-deprecated-example-column.component';
-import { ChartDeprecatedExampleDonutComponent } from './examples/chart-deprecated-example-donut.component';
-import { ChartDeprecatedExamplePieComponent } from './examples/chart-deprecated-example-pie.component';
-import { ChartDeprecatedExampleTimeseriesComponent } from './examples/chart-deprecated-example-timeseries.component';
-
-const COMPONENT_DECLARATIONS = [
-  ChartDeprecatedExampleComponent,
-  ChartDeprecatedExampleActivityGaugeComponent,
-  ChartDeprecatedExampleAreasplineComponent,
-  ChartDeprecatedExampleDonutComponent,
-  ChartDeprecatedExampleColumnComponent,
-  ChartDeprecatedExamplePieComponent,
-  ChartDeprecatedExampleTimeseriesComponent,
-  ChartDeprecatedExampleBarComponent,
-];
-
-@NgModule({
-  declarations: COMPONENT_DECLARATIONS,
-  imports: [CommonModule, KirbyModule],
-  exports: COMPONENT_DECLARATIONS,
-})
-export class ChartDeprecatedExampleModule {}
diff --git a/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-activity-gauge.component.ts b/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-activity-gauge.component.ts
deleted file mode 100644
index c50afd724c..0000000000
--- a/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-activity-gauge.component.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Component } from '@angular/core';
-
-const config = {
-  selector: 'cookbook-chart-deprecated-example-activity-gauge',
-  template: `
-   
-  
    
-  
-  
    
-    `,
-};
-@Component({
-  selector: config.selector,
-  template: config.template,
-})
-export class ChartDeprecatedExampleActivityGaugeComponent {
-  template = config.template;
-}
diff --git a/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-areaspline.component.ts b/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-areaspline.component.ts
deleted file mode 100644
index ee5af389ff..0000000000
--- a/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-areaspline.component.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Component } from '@angular/core';
-
-const config = {
-  selector: 'cookbook-chart-deprecated-example-areaspline',
-  template: `
-  
-    
-    
-    
-    
-      
-      
    
-      Jan 
-      Feb 
-      Mar 
-    
    
-      
-    `,
-};
-@Component({
-  selector: config.selector,
-  template: config.template,
-})
-export class ChartDeprecatedExampleAreasplineComponent {
-  template = config.template;
-
-  data = [
-    1600.9,
-    1710.5,
-    1060.4,
-    1290.2,
-    1440.0,
-    1460.0,
-    1350.6,
-    1480.5,
-    1800.4,
-    1940.1,
-    1950.6,
-    1700.4,
-    1600.9,
-    1710.5,
-    1060.4,
-    1290.2,
-    1440.0,
-    1460.0,
-    1350.6,
-    1480.5,
-    1800.4,
-    1940.1,
-    1950.6,
-    1700.4,
-  ];
-}
diff --git a/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-bar.component.ts b/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-bar.component.ts
deleted file mode 100644
index be5492e9d0..0000000000
--- a/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-bar.component.ts
+++ /dev/null
@@ -1,158 +0,0 @@
-import { Component } from '@angular/core';
-import { Options, SeriesClickCallbackFunction, SeriesClickEventObject } from 'highcharts';
-
-import { DesignTokenHelper, ModalController } from '@kirbydesign/designsystem';
-
-const getColor = DesignTokenHelper.getColor;
-
-function colorPoints(selectedYear: string) {
-  return function() {
-    var series = this.series;
-    for (var i = 0, ie = series.length; i < ie; ++i) {
-      var points = series[i].data;
-      for (var j = 0, je = points.length; j < je; ++j) {
-        if (points[j].graphic) {
-          if (points[j].category === selectedYear) {
-            points[j].graphic.element.style.fill = getColor('primary').value;
-          }
-
-          points[j].graphic.element.style.stroke = getColor('background-color').value;
-        }
-      }
-    }
-  };
-}
-
-const config = {
-  selector: 'cookbook-chart-deprecated-example-bar',
-  template: `
-  
-  
-  
-`,
-  codeSnippet: `private yearlyOverviewClick: SeriesClickCallbackFunction = (ev: SeriesClickEventObject) => {
-  this.modalController.showAlert({
-    title: 'Clicked chart',
-    message: 'You clicked on year: ' + ev.point.category,
-    okBtnText: 'Ok',
-  });
-
-  this.selectedYear = ev.point.category;
-  this.yearlyOverviewOptions.plotOptions.series.animation = false;
-  this.yearlyOverviewOptions.chart.events.load = colorPoints(this.selectedYear);
-  this.yearlyOverviewOptions.chart.events.redraw = colorPoints(this.selectedYear);
-  this.yearlyOverviewOptions = { ...this.yearlyOverviewOptions };
-};
-
-yearlyOverviewOptions: Options = {
-  chart: {
-    events: {
-      load: colorPoints(this.selectedYear),
-      redraw: colorPoints(this.selectedYear),
-    },
-  },
-  plotOptions: {
-    series: {},
-    bar: {
-      events: {
-        click: this.yearlyOverviewClick.bind(this),
-      },
-    },
-  },
-  series: [
-    {
-      name: 'InvisibleClickReceiver',
-      data: this.adjustedYearExpensesData.map(
-        (wholeYearData, idx) => this.maxValue - (wholeYearData + this.currentTimeData[idx])
-      ),
-      edgeColor: 'rgb(255, 255, 255, 0)',
-      opacity: 0,
-    },
-    {
-      name: 'WholeYearExpenses',
-      data: this.adjustedYearExpensesData,
-    },
-    {
-      name: 'CurrentTimeExpsenses',
-      data: this.currentTimeData,
-    },
-  ] as any,
-};`,
-};
-
-@Component({
-  selector: config.selector,
-  template: config.template,
-})
-export class ChartDeprecatedExampleBarComponent {
-  template: string = config.template;
-  codeSnippet: string = config.codeSnippet;
-  height = 150;
-
-  private yearExpensesData = [0, 8761, 7760];
-  private currentTimeData = [0, 1000, 800];
-  private maxValue = Math.max(...this.yearExpensesData) + Math.max(...this.currentTimeData);
-  private years = [2018, 2019, 2020].reverse();
-  categories = this.years.map((year) => year.toString());
-  private selectedYear = this.categories[0];
-  private lowerLimit = Math.max(...this.yearExpensesData) * 0.01;
-  // lower limit is shown as 2% of max value for UX reasons
-  private adjustedYearExpensesData = this.yearExpensesData.map((data) =>
-    this.lowerLimit >= data ? this.lowerLimit : data
-  );
-
-  private yearlyOverviewClick: SeriesClickCallbackFunction = (ev: SeriesClickEventObject) => {
-    this.modalController.showAlert({
-      title: 'Clicked chart',
-      message: 'You clicked on year: ' + ev.point.category,
-      okBtnText: 'Ok',
-    });
-
-    this.selectedYear = ev.point.category;
-    this.yearlyOverviewOptions.plotOptions.series.animation = false;
-    this.yearlyOverviewOptions.chart.events.load = colorPoints(this.selectedYear);
-    this.yearlyOverviewOptions.chart.events.redraw = colorPoints(this.selectedYear);
-    this.yearlyOverviewOptions = { ...this.yearlyOverviewOptions };
-  };
-
-  yearlyOverviewOptions: Options = {
-    chart: {
-      events: {
-        load: colorPoints(this.selectedYear),
-        redraw: colorPoints(this.selectedYear),
-      },
-    },
-    plotOptions: {
-      series: {},
-      bar: {
-        events: {
-          click: this.yearlyOverviewClick.bind(this),
-        },
-      },
-    },
-    series: [
-      {
-        name: 'InvisibleClickReceiver',
-        data: this.adjustedYearExpensesData.map(
-          (wholeYearData, idx) => this.maxValue - (wholeYearData + this.currentTimeData[idx])
-        ),
-        edgeColor: 'rgb(255, 255, 255, 0)',
-        opacity: 0,
-      },
-      {
-        name: 'WholeYearExpenses',
-        data: this.adjustedYearExpensesData,
-      },
-      {
-        name: 'CurrentTimeExpsenses',
-        data: this.currentTimeData,
-      },
-    ] as any,
-  };
-
-  constructor(private modalController: ModalController) {}
-}
diff --git a/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-column.component.ts b/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-column.component.ts
deleted file mode 100644
index 13ca9c8d2f..0000000000
--- a/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-column.component.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-import { Component } from '@angular/core';
-import { Options, SeriesClickCallbackFunction, SeriesClickEventObject } from 'highcharts';
-
-import { DesignTokenHelper, ModalController } from '@kirbydesign/designsystem';
-
-const getColor = DesignTokenHelper.getColor;
-function colorPoints(selectedIdx) {
-  return function() {
-    var series = this.series;
-    for (var i = 0, ie = series.length; i < ie; ++i) {
-      var points = series[i].data;
-      for (var j = 0, je = points.length; j < je; ++j) {
-        if (points[j].graphic) {
-          if (j === selectedIdx) {
-            points[j].graphic.element.style.fill = getColor('primary').value;
-            points[j].graphic.element.style.stroke = getColor('primary').value;
-          } else {
-            points[j].graphic.element.style.stroke = getColor('secondary').value;
-          }
-        }
-      }
-    }
-  };
-}
-
-const config = {
-  selector: 'cookbook-chart-deprecated-example-column',
-  template: `
-  
-  
-  
-`,
-  codeSnippet: `private monthlyOverviewClick: SeriesClickCallbackFunction = (ev: SeriesClickEventObject) => {
-      this.modalController.showAlert({
-    title: 'Clicked chart',
-    message: 'You clicked on column: ' + ev.point.category,
-    okBtnText: 'Ok',
-  });
-
-  this.selectedIdx = this.categories.indexOf(ev.point.category);
-  this.monthlyOverviewOptions.plotOptions.series.animation = false;
-  this.monthlyOverviewOptions.chart.events.load = colorPoints(this.selectedIdx);
-  this.monthlyOverviewOptions.chart.events.redraw = colorPoints(this.selectedIdx);
-  this.monthlyOverviewOptions = { ...this.monthlyOverviewOptions };
-};
-monthlyOverviewOptions: Options = {
-  chart: { events: {} },
-  plotOptions: {
-    series: {},
-    column: {
-      events: {
-        click: this.monthlyOverviewClick.bind(this),
-      },
-    },
-  },
-  yAxis: {
-    plotLines: [
-      {
-        width: 1,
-        color: getColor('semi-dark').value,
-        dashStyle: 'Dash',
-        value: 872,
-      },
-    ],
-  },
-};`,
-};
-
-@Component({
-  selector: config.selector,
-  template: config.template,
-})
-export class ChartDeprecatedExampleColumnComponent {
-  template: string = config.template;
-  codeSnippet: string = config.codeSnippet;
-  height = 150;
-
-  categories = ['mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec', 'jan', 'feb'];
-  private monthlyExpenseData = [0, 1400, 300, 500, 100, 1000, 1100, 450, 1350, 1200, 1250, 600];
-  private selectedIdx = 0;
-
-  // lower limit is shown as 2% of max value for UX reasons
-  private lowerLimit = Math.max(...this.monthlyExpenseData) * 0.02;
-  adjustedMonthlyExpenseData = this.monthlyExpenseData.map((data) =>
-    this.lowerLimit >= data ? this.lowerLimit : data
-  );
-
-  private monthlyOverviewClick: SeriesClickCallbackFunction = (ev: SeriesClickEventObject) => {
-    this.modalController.showAlert({
-      title: 'Clicked chart',
-      message: 'You clicked on column: ' + ev.point.category,
-      okBtnText: 'Ok',
-    });
-
-    this.selectedIdx = this.categories.indexOf(ev.point.category);
-    this.monthlyOverviewOptions.plotOptions.series.animation = false;
-    this.monthlyOverviewOptions.chart.events.load = colorPoints(this.selectedIdx);
-    this.monthlyOverviewOptions.chart.events.redraw = colorPoints(this.selectedIdx);
-    this.monthlyOverviewOptions = { ...this.monthlyOverviewOptions };
-  };
-  monthlyOverviewOptions: Options = {
-    chart: { events: {} },
-    plotOptions: {
-      series: {},
-      column: {
-        events: {
-          click: this.monthlyOverviewClick.bind(this),
-        },
-      },
-    },
-    yAxis: {
-      plotLines: [
-        {
-          width: 1,
-          color: getColor('semi-dark').value,
-          dashStyle: 'Dash',
-          value: 872,
-        },
-      ],
-    },
-  };
-
-  constructor(private modalController: ModalController) {}
-}
diff --git a/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-donut.component.ts b/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-donut.component.ts
deleted file mode 100644
index 42813ecf6e..0000000000
--- a/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-donut.component.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Component } from '@angular/core';
-
-const config = {
-  selector: 'cookbook-chart-deprecated-example-donut',
-  template: `
-  
-    
-    
-`,
-};
-@Component({
-  selector: config.selector,
-  template: config.template,
-})
-export class ChartDeprecatedExampleDonutComponent {
-  template = config.template;
-}
diff --git a/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-pie.component.ts b/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-pie.component.ts
deleted file mode 100644
index e6dc17183f..0000000000
--- a/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-pie.component.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Component } from '@angular/core';
-
-const config = {
-  selector: 'cookbook-chart-deprecated-example-pie',
-  template: `
-  
-  
-`,
-};
-@Component({
-  selector: config.selector,
-  template: config.template,
-})
-export class ChartDeprecatedExamplePieComponent {
-  template = config.template;
-}
diff --git a/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-timeseries.component.ts b/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-timeseries.component.ts
deleted file mode 100644
index 83142e9e54..0000000000
--- a/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-timeseries.component.ts
+++ /dev/null
@@ -1,301 +0,0 @@
-import { Component } from '@angular/core';
-
-const config = {
-  selector: 'cookbook-chart-deprecated-example-timeseries',
-  template: `
-  
-  
-  
-`,
-};
-@Component({
-  selector: config.selector,
-  template: config.template,
-})
-export class ChartDeprecatedExampleTimeseriesComponent {
-  template = config.template;
-  breaks = [
-    {
-      from: 1198914890000,
-      to: 1199232000000,
-      breakSize: 0,
-    },
-  ];
-
-  rates = [
-    [1198914890000, 0.6809],
-    [1199232000000, 0.6809],
-    [1199318400000, 0.6779],
-    [1199404800000, 0.6791],
-    [1199664000000, 0.6793],
-    [1199750400000, 0.6801],
-    [1199836800000, 0.6813],
-    [1199923200000, 0.6821],
-    [1200009600000, 0.6761],
-    [1200268800000, 0.6715],
-    [1200355200000, 0.6719],
-    [1200441600000, 0.6761],
-    [1200528000000, 0.6808],
-    [1200614400000, 0.6816],
-    [1200873600000, 0.6906],
-    [1200960000000, 0.69],
-    [1201046400000, 0.6863],
-    [1201132800000, 0.6821],
-    [1201219200000, 0.6801],
-    [1201478400000, 0.6778],
-    [1201564800000, 0.677],
-    [1201651200000, 0.6753],
-    [1201737600000, 0.6726],
-    [1201824000000, 0.6717],
-    [1202083200000, 0.6745],
-    [1202169600000, 0.6809],
-    [1202256000000, 0.684],
-    [1202342400000, 0.6865],
-    [1202428800000, 0.6891],
-    [1202688000000, 0.6878],
-    [1202774400000, 0.688],
-    [1202860800000, 0.6857],
-    [1202947200000, 0.6838],
-    [1203033600000, 0.6816],
-    [1203292800000, 0.6833],
-    [1203379200000, 0.6784],
-    [1203465600000, 0.6824],
-    [1203552000000, 0.6787],
-    [1203638400000, 0.6736],
-    [1203897600000, 0.675],
-    [1203984000000, 0.6724],
-    [1204070400000, 0.6648],
-    [1204156800000, 0.6614],
-    [1204243200000, 0.6594],
-    [1204502400000, 0.6579],
-    [1204588800000, 0.6577],
-    [1204675200000, 0.6582],
-    [1204761600000, 0.6529],
-    [1204848000000, 0.6487],
-    [1205107200000, 0.652],
-    [1205193600000, 0.6503],
-    [1205280000000, 0.6462],
-    [1205366400000, 0.6421],
-    [1205452800000, 0.6427],
-    [1205712000000, 0.6342],
-    [1205798400000, 0.6342],
-    [1205884800000, 0.6374],
-    [1205971200000, 0.6485],
-    [1206057600000, 0.6485],
-    [1206316800000, 0.6485],
-    [1206403200000, 0.6424],
-    [1206489600000, 0.6366],
-    [1206576000000, 0.6336],
-    [1206662400000, 0.6332],
-    [1206921600000, 0.6325],
-    [1207008000000, 0.6387],
-    [1207094400000, 0.6398],
-    [1207180800000, 0.6442],
-    [1207267200000, 0.6362],
-    [1207526400000, 0.6373],
-    [1207612800000, 0.6373],
-    [1207699200000, 0.636],
-    [1207785600000, 0.63],
-    [1207872000000, 0.6317],
-    [1208131200000, 0.6303],
-    [1208217600000, 0.6319],
-    [1208304000000, 0.6279],
-    [1208390400000, 0.6301],
-    [1208476800000, 0.6338],
-    [1208736000000, 0.6291],
-    [1208822400000, 0.6278],
-    [1208908800000, 0.6275],
-    [1208995200000, 0.6343],
-    [1209081600000, 0.6413],
-    [1209340800000, 0.64],
-    [1209427200000, 0.6423],
-    [1209513600000, 0.6436],
-    [1209600000000, 0.6436],
-    [1209686400000, 0.647],
-    [1209945600000, 0.6469],
-    [1210032000000, 0.6441],
-    [1210118400000, 0.6482],
-    [1210204800000, 0.6517],
-    [1210291200000, 0.647],
-    [1210550400000, 0.6482],
-    [1210636800000, 0.6464],
-    [1210723200000, 0.6478],
-    [1210809600000, 0.6463],
-    [1210896000000, 0.6453],
-    [1211155200000, 0.6421],
-    [1211241600000, 0.6395],
-    [1211328000000, 0.6349],
-    [1211414400000, 0.6348],
-    [1211500800000, 0.6353],
-    [1211760000000, 0.6346],
-    [1211846400000, 0.6346],
-    [1211932800000, 0.6388],
-    [1212019200000, 0.6431],
-    [1212105600000, 0.6449],
-    [1212364800000, 0.6444],
-    [1212451200000, 0.6414],
-    [1212537600000, 0.6467],
-    [1212624000000, 0.6494],
-    [1212710400000, 0.6412],
-    [1212969600000, 0.6337],
-    [1213056000000, 0.6442],
-    [1213142400000, 0.6446],
-    [1213228800000, 0.6487],
-    [1213315200000, 0.6522],
-    [1213574400000, 0.647],
-    [1213660800000, 0.6462],
-    [1213747200000, 0.6456],
-    [1213833600000, 0.6461],
-    [1213920000000, 0.6407],
-    [1214179200000, 0.6444],
-    [1214265600000, 0.6424],
-    [1214352000000, 0.6412],
-    [1214438400000, 0.6358],
-    [1214524800000, 0.6351],
-    [1214784000000, 0.6345],
-    [1214870400000, 0.634],
-    [1214956800000, 0.6328],
-    [1215043200000, 0.6296],
-    [1215129600000, 0.6382],
-    [1215388800000, 0.639],
-    [1215475200000, 0.6376],
-    [1215561600000, 0.6364],
-    [1215648000000, 0.6367],
-    [1215734400000, 0.6316],
-    [1215993600000, 0.6311],
-    [1216080000000, 0.6255],
-    [1216166400000, 0.6295],
-    [1216252800000, 0.6311],
-    [1216339200000, 0.6324],
-    [1216598400000, 0.6307],
-    [1216684800000, 0.6283],
-    [1216771200000, 0.6354],
-    [1216857600000, 0.638],
-    [1216944000000, 0.6357],
-    [1217203200000, 0.6352],
-    [1217289600000, 0.6368],
-    [1217376000000, 0.6416],
-    [1217462400000, 0.6407],
-    [1217548800000, 0.6422],
-    [1217808000000, 0.6425],
-    [1217894400000, 0.6458],
-    [1217980800000, 0.6462],
-    [1218067200000, 0.6465],
-    [1218153600000, 0.6635],
-    [1218412800000, 0.6662],
-    [1218499200000, 0.6709],
-    [1218585600000, 0.6711],
-    [1218672000000, 0.6709],
-    [1218758400000, 0.679],
-    [1219017600000, 0.6802],
-    [1219104000000, 0.6814],
-    [1219190400000, 0.6788],
-    [1219276800000, 0.6751],
-    [1219363200000, 0.6754],
-    [1219622400000, 0.6773],
-    [1219708800000, 0.6851],
-    [1219795200000, 0.6773],
-    [1219881600000, 0.6771],
-    [1219968000000, 0.6788],
-    [1220227200000, 0.684],
-    [1220313600000, 0.689],
-    [1220400000000, 0.6926],
-    [1220486400000, 0.6903],
-    [1220572800000, 0.702],
-    [1220832000000, 0.7036],
-    [1220918400000, 0.7071],
-    [1221004800000, 0.7096],
-    [1221091200000, 0.7178],
-    [1221177600000, 0.711],
-    [1221436800000, 0.7068],
-    [1221523200000, 0.701],
-    [1221609600000, 0.7031],
-    [1221696000000, 0.6897],
-    [1221782400000, 0.7025],
-    [1222041600000, 0.6864],
-    [1222128000000, 0.6789],
-    [1222214400000, 0.6808],
-    [1222300800000, 0.6804],
-    [1222387200000, 0.6832],
-    [1222646400000, 0.697],
-    [1222732800000, 0.6993],
-    [1222819200000, 0.7103],
-    [1222905600000, 0.7194],
-    [1222992000000, 0.723],
-    [1223251200000, 0.7336],
-    [1223337600000, 0.7337],
-    [1223424000000, 0.7284],
-    [1223510400000, 0.731],
-    [1223596800000, 0.7365],
-    [1223856000000, 0.7333],
-    [1223942400000, 0.7273],
-    [1224028800000, 0.734],
-    [1224115200000, 0.7405],
-    [1224201600000, 0.7461],
-    [1224460800000, 0.745],
-    [1224547200000, 0.7586],
-    [1224633600000, 0.7787],
-    [1224720000000, 0.7807],
-    [1224806400000, 0.794],
-    [1225065600000, 0.8027],
-    [1225152000000, 0.7984],
-    [1225238400000, 0.7832],
-    [1225324800000, 0.7673],
-    [1225411200000, 0.784],
-    [1225670400000, 0.78],
-    [1225756800000, 0.7801],
-    [1225843200000, 0.7771],
-    [1225929600000, 0.7832],
-    [1226016000000, 0.784],
-    [1226275200000, 0.7758],
-    [1226361600000, 0.7846],
-    [1226448000000, 0.7982],
-    [1226534400000, 0.7985],
-    [1226620800000, 0.7891],
-    [1226880000000, 0.79],
-    [1226966400000, 0.7904],
-    [1227052800000, 0.7916],
-    [1227139200000, 0.7974],
-    [1227225600000, 0.7936],
-    [1227484800000, 0.783],
-    [1227571200000, 0.7807],
-    [1227657600000, 0.7732],
-    [1227744000000, 0.7753],
-    [1227830400000, 0.7858],
-    [1228089600000, 0.7932],
-    [1228176000000, 0.7877],
-    [1228262400000, 0.7923],
-    [1228348800000, 0.7925],
-    [1228435200000, 0.7897],
-    [1228694400000, 0.7781],
-    [1228780800000, 0.779],
-    [1228867200000, 0.7738],
-    [1228953600000, 0.7568],
-    [1229040000000, 0.7497],
-    [1229299200000, 0.7403],
-    [1229385600000, 0.7306],
-    [1229472000000, 0.7114],
-    [1229558400000, 0.6843],
-    [1229644800000, 0.7175],
-    [1229904000000, 0.7159],
-    [1229990400000, 0.7155],
-    [1230076800000, 0.7141],
-    [1230163200000, 0.7141],
-    [1230249600000, 0.7141],
-    [1230508800000, 0.7009],
-    [1230595200000, 0.7094],
-    [1230681600000, 0.7186],
-    [1230768000000, 0.7186],
-    [1230854400000, 0.7213],
-    [1231113600000, 0.7364],
-    [1231200000000, 0.7502],
-    [1231286400000, 0.7357],
-    [1231372800000, 0.7345],
-  ];
-}
diff --git a/apps/cookbook/src/app/examples/examples.common.ts b/apps/cookbook/src/app/examples/examples.common.ts
index 41ee083016..075b6cbd32 100644
--- a/apps/cookbook/src/app/examples/examples.common.ts
+++ b/apps/cookbook/src/app/examples/examples.common.ts
@@ -46,7 +46,6 @@ import { SlideButtonExampleComponent } from './slide-button-example/slide-button
 import { CookbookExampleCardContentComponent } from './slides-example/example-card-content';
 import { SlidesExampleComponent } from './slides-example/slides-example.component';
 import { SpinnerExampleComponent } from './spinner-example/spinner-example.component';
-import { StockChartDeprecatedExampleComponent } from './stock-chart-deprecated-example/stock-chart-deprecated-example.component';
 import { StylingHtmlListsExampleComponent } from './styling-html-lists-example/styling-html-lists-example.component';
 import { TabExampleComponent } from './tabs-example/tab/tab-example.component';
 import { TabsExampleComponent } from './tabs-example/tabs-example.component';
@@ -108,7 +107,6 @@ export const COMPONENT_DECLARATIONS: any[] = [
   DividerExampleComponent,
   ReorderListExampleComponent,
   DropdownExampleComponent,
-  StockChartDeprecatedExampleComponent,
   ProgressCircleExampleComponent,
   FlagExampleComponent,
   SlidesExampleComponent,
diff --git a/apps/cookbook/src/app/examples/examples.module.ts b/apps/cookbook/src/app/examples/examples.module.ts
index ff994c9c53..a176b6659b 100644
--- a/apps/cookbook/src/app/examples/examples.module.ts
+++ b/apps/cookbook/src/app/examples/examples.module.ts
@@ -8,8 +8,6 @@ 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';
 import { DropdownExampleModule } from './dropdown-example/dropdown-example.module';
@@ -40,7 +38,6 @@ const IMPORTS = [
   ListExamplesModule,
   DropdownExampleModule,
   SegmentedControlExampleModule,
-  ChartDeprecatedExampleModule,
   ChartExampleModule,
   CardExampleModule,
   ItemSlidingExampleModule,
diff --git a/apps/cookbook/src/app/examples/examples.routes.ts b/apps/cookbook/src/app/examples/examples.routes.ts
index 6b62690a2b..db4ddb2dbc 100644
--- a/apps/cookbook/src/app/examples/examples.routes.ts
+++ b/apps/cookbook/src/app/examples/examples.routes.ts
@@ -11,7 +11,6 @@ import { ButtonExampleComponent } from './button-example/button-example.componen
 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 { ChartDeprecatedExampleComponent } from './chart-deprecated-example/chart-deprecated-example.component';
 import { ChartExampleComponent } from './chart-example/chart-example.component';
 import { CheckboxExampleComponent } from './checkbox-example/checkbox-example.component';
 import { ChipExampleComponent } from './chip-example/chip-example.component';
@@ -65,7 +64,6 @@ import { SegmentedControlExampleComponent } from './segmented-control-example/se
 import { SlideButtonExampleComponent } from './slide-button-example/slide-button-example.component';
 import { SlidesExampleComponent } from './slides-example/slides-example.component';
 import { SpinnerExampleComponent } from './spinner-example/spinner-example.component';
-import { StockChartDeprecatedExampleComponent } from './stock-chart-deprecated-example/stock-chart-deprecated-example.component';
 import { StylingHtmlListsExampleComponent } from './styling-html-lists-example/styling-html-lists-example.component';
 import { TabExampleComponent } from './tabs-example/tab/tab-example.component';
 import { TabsExampleComponent } from './tabs-example/tabs-example.component';
@@ -343,18 +341,10 @@ export const routes: Routes = [
     path: 'list-experimental',
     component: ListExperimentalExampleComponent,
   },
-  {
-    path: 'chart-deprecated',
-    component: ChartDeprecatedExampleComponent,
-  },
   {
     path: 'chart',
     component: ChartExampleComponent,
   },
-  {
-    path: 'stock-chart-deprecated',
-    component: StockChartDeprecatedExampleComponent,
-  },
   {
     path: 'grid',
     component: GridExampleComponent,
diff --git a/apps/cookbook/src/app/examples/stock-chart-deprecated-example/stock-chart-deprecated-example.component.html b/apps/cookbook/src/app/examples/stock-chart-deprecated-example/stock-chart-deprecated-example.component.html
deleted file mode 100644
index 90104d59d8..0000000000
--- a/apps/cookbook/src/app/examples/stock-chart-deprecated-example/stock-chart-deprecated-example.component.html
+++ /dev/null
@@ -1,10 +0,0 @@
-
-  
-  
-  
-
diff --git a/apps/cookbook/src/app/examples/stock-chart-deprecated-example/stock-chart-deprecated-example.component.scss b/apps/cookbook/src/app/examples/stock-chart-deprecated-example/stock-chart-deprecated-example.component.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/apps/cookbook/src/app/examples/stock-chart-deprecated-example/stock-chart-deprecated-example.component.ts b/apps/cookbook/src/app/examples/stock-chart-deprecated-example/stock-chart-deprecated-example.component.ts
deleted file mode 100644
index 79579924ec..0000000000
--- a/apps/cookbook/src/app/examples/stock-chart-deprecated-example/stock-chart-deprecated-example.component.ts
+++ /dev/null
@@ -1,305 +0,0 @@
-import { Component, Inject, LOCALE_ID, OnInit } from '@angular/core';
-import { Options } from 'highcharts';
-
-import {
-  StockChartDeprecatedDataPoint,
-  stockChartDeprecatedOptions,
-} from '@kirbydesign/designsystem';
-
-const config = {
-  selector: 'cookbook-stock-chart-deprecated-example',
-  template: `
-`,
-};
-
-@Component({
-  selector: config.selector,
-  template: config.template,
-})
-export class StockChartDeprecatedExampleComponent implements OnInit {
-  template = config.template;
-  constructor(@Inject(LOCALE_ID) locale: string) {
-    this.height = 300;
-    this.options = stockChartDeprecatedOptions(locale, this.height);
-  }
-
-  options: Options;
-  height: number;
-
-  data: StockChartDeprecatedDataPoint[] = [
-    { x: 1198914890000, y: 0.6809, id: '' },
-    { x: 1199232000000, y: 0.6809, id: '' },
-    { x: 1199318400000, y: 0.6779, id: '' },
-    { x: 1199404800000, y: 0.6791, id: '' },
-    { x: 1199664000000, y: 0.6793, id: '' },
-    { x: 1199750400000, y: 0.6801, id: '' },
-    { x: 1199836800000, y: 0.6813, id: '' },
-    { x: 1199923200000, y: 0.6821, id: '' },
-    { x: 1200009600000, y: 0.6761, id: '' },
-    { x: 1200268800000, y: 0.6715, id: '' },
-    { x: 1200355200000, y: 0.6719, id: '' },
-    { x: 1200441600000, y: 0.6761, id: '' },
-    { x: 1200528000000, y: 0.6808, id: '' },
-    { x: 1200614400000, y: 0.6816, id: '' },
-    { x: 1200873600000, y: 0.6906, id: '' },
-    { x: 1200960000000, y: 0.69, id: '' },
-    { x: 1201046400000, y: 0.6863, id: '' },
-    { x: 1201132800000, y: 0.6821, id: '' },
-    { x: 1201219200000, y: 0.6801, id: '' },
-    { x: 1201478400000, y: 0.6778, id: '' },
-    { x: 1201564800000, y: 0.677, id: '' },
-    { x: 1201651200000, y: 0.6753, id: '' },
-    { x: 1201737600000, y: 0.6726, id: '' },
-    { x: 1201824000000, y: 0.6717, id: '' },
-    { x: 1202083200000, y: 0.6745, id: '' },
-    { x: 1202169600000, y: 0.6809, id: '' },
-    { x: 1202256000000, y: 0.684, id: '' },
-    { x: 1202342400000, y: 0.6865, id: '' },
-    { x: 1202428800000, y: 0.6891, id: '' },
-    { x: 1202688000000, y: 0.6878, id: '' },
-    { x: 1202774400000, y: 0.688, id: '' },
-    { x: 1202860800000, y: 0.6857, id: '' },
-    { x: 1202947200000, y: 0.6838, id: '' },
-    { x: 1203033600000, y: 0.6816, id: '' },
-    { x: 1203292800000, y: 0.6833, id: '' },
-    { x: 1203379200000, y: 0.6784, id: '' },
-    { x: 1203465600000, y: 0.6824, id: '' },
-    { x: 1203552000000, y: 0.6787, id: '' },
-    { x: 1203638400000, y: 0.6736, id: '' },
-    { x: 1203897600000, y: 0.675, id: '' },
-    { x: 1203984000000, y: 0.6724, id: '' },
-    { x: 1204070400000, y: 0.6648, id: '' },
-    { x: 1204156800000, y: 0.6614, id: '' },
-    { x: 1204243200000, y: 0.6594, id: '' },
-    { x: 1204502400000, y: 0.6579, id: '' },
-    { x: 1204588800000, y: 0.6577, id: '' },
-    { x: 1204675200000, y: 0.6582, id: '' },
-    { x: 1204761600000, y: 0.6529, id: '' },
-    { x: 1204848000000, y: 0.6487, id: '' },
-    { x: 1205107200000, y: 0.652, id: '' },
-    { x: 1205193600000, y: 0.6503, id: '' },
-    { x: 1205280000000, y: 0.6462, id: '' },
-    { x: 1205366400000, y: 0.6421, id: '' },
-    { x: 1205452800000, y: 0.6427, id: '' },
-    { x: 1205712000000, y: 0.6342, id: '' },
-    { x: 1205798400000, y: 0.6342, id: '' },
-    { x: 1205884800000, y: 0.6374, id: '' },
-    { x: 1205971200000, y: 0.6485, id: '' },
-    { x: 1206057600000, y: 0.6485, id: '' },
-    { x: 1206316800000, y: 0.6485, id: '' },
-    { x: 1206403200000, y: 0.6424, id: '' },
-    { x: 1206489600000, y: 0.6366, id: '' },
-    { x: 1206576000000, y: 0.6336, id: '' },
-    { x: 1206662400000, y: 0.6332, id: '' },
-    { x: 1206921600000, y: 0.6325, id: '' },
-    { x: 1207008000000, y: 0.6387, id: '' },
-    { x: 1207094400000, y: 0.6398, id: '' },
-    { x: 1207180800000, y: 0.6442, id: '' },
-    { x: 1207267200000, y: 0.6362, id: '' },
-    { x: 1207526400000, y: 0.6373, id: '' },
-    { x: 1207612800000, y: 0.6373, id: '' },
-    { x: 1207699200000, y: 0.636, id: '' },
-    { x: 1207785600000, y: 0.63, id: '' },
-    { x: 1207872000000, y: 0.6317, id: '' },
-    { x: 1208131200000, y: 0.6303, id: '' },
-    { x: 1208217600000, y: 0.6319, id: '' },
-    { x: 1208304000000, y: 0.6279, id: '' },
-    { x: 1208390400000, y: 0.6301, id: '' },
-    { x: 1208476800000, y: 0.6338, id: '' },
-    { x: 1208736000000, y: 0.6291, id: '' },
-    { x: 1208822400000, y: 0.6278, id: '' },
-    { x: 1208908800000, y: 0.6275, id: 'min' },
-    { x: 1208995200000, y: 0.6343, id: '' },
-    { x: 1209081600000, y: 0.6413, id: '' },
-    { x: 1209340800000, y: 0.64, id: '' },
-    { x: 1209427200000, y: 0.6423, id: '' },
-    { x: 1209513600000, y: 0.6436, id: '' },
-    { x: 1209600000000, y: 0.6436, id: '' },
-    { x: 1209686400000, y: 0.647, id: '' },
-    { x: 1209945600000, y: 0.6469, id: '' },
-    { x: 1210032000000, y: 0.6441, id: '' },
-    { x: 1210118400000, y: 0.6482, id: '' },
-    { x: 1210204800000, y: 0.6517, id: '' },
-    { x: 1210291200000, y: 0.647, id: '' },
-    { x: 1210550400000, y: 0.6482, id: '' },
-    { x: 1210636800000, y: 0.6464, id: '' },
-    { x: 1210723200000, y: 0.6478, id: '' },
-    { x: 1210809600000, y: 0.6463, id: '' },
-    { x: 1210896000000, y: 0.6453, id: '' },
-    { x: 1211155200000, y: 0.6421, id: '' },
-    { x: 1211241600000, y: 0.6395, id: '' },
-    { x: 1211328000000, y: 0.6349, id: '' },
-    { x: 1211414400000, y: 0.6348, id: '' },
-    { x: 1211500800000, y: 0.6353, id: '' },
-    { x: 1211760000000, y: 0.6346, id: '' },
-    { x: 1211846400000, y: 0.6346, id: '' },
-    { x: 1211932800000, y: 0.6388, id: '' },
-    { x: 1212019200000, y: 0.6431, id: '' },
-    { x: 1212105600000, y: 0.6449, id: '' },
-    { x: 1212364800000, y: 0.6444, id: '' },
-    { x: 1212451200000, y: 0.6414, id: '' },
-    { x: 1212537600000, y: 0.6467, id: '' },
-    { x: 1212624000000, y: 0.6494, id: '' },
-    { x: 1212710400000, y: 0.6412, id: '' },
-    { x: 1212969600000, y: 0.6337, id: '' },
-    { x: 1213056000000, y: 0.6442, id: '' },
-    { x: 1213142400000, y: 0.6446, id: '' },
-    { x: 1213228800000, y: 0.6487, id: '' },
-    { x: 1213315200000, y: 0.6522, id: '' },
-    { x: 1213574400000, y: 0.647, id: '' },
-    { x: 1213660800000, y: 0.6462, id: '' },
-    { x: 1213747200000, y: 0.6456, id: '' },
-    { x: 1213833600000, y: 0.6461, id: '' },
-    { x: 1213920000000, y: 0.6407, id: '' },
-    { x: 1214179200000, y: 0.6444, id: '' },
-    { x: 1214265600000, y: 0.6424, id: '' },
-    { x: 1214352000000, y: 0.6412, id: '' },
-    { x: 1214438400000, y: 0.6358, id: '' },
-    { x: 1214524800000, y: 0.6351, id: '' },
-    { x: 1214784000000, y: 0.6345, id: '' },
-    { x: 1214870400000, y: 0.634, id: '' },
-    { x: 1214956800000, y: 0.6328, id: '' },
-    { x: 1215043200000, y: 0.6296, id: '' },
-    { x: 1215129600000, y: 0.6382, id: '' },
-    { x: 1215388800000, y: 0.639, id: '' },
-    { x: 1215475200000, y: 0.6376, id: '' },
-    { x: 1215561600000, y: 0.6364, id: '' },
-    { x: 1215648000000, y: 0.6367, id: '' },
-    { x: 1215734400000, y: 0.6316, id: '' },
-    { x: 1215993600000, y: 0.6311, id: '' },
-    { x: 1216080000000, y: 0.6255, id: '' },
-    { x: 1216166400000, y: 0.6295, id: '' },
-    { x: 1216252800000, y: 0.6311, id: '' },
-    { x: 1216339200000, y: 0.6324, id: '' },
-    { x: 1216598400000, y: 0.6307, id: '' },
-    { x: 1216684800000, y: 0.6283, id: '' },
-    { x: 1216771200000, y: 0.6354, id: '' },
-    { x: 1216857600000, y: 0.638, id: '' },
-    { x: 1216944000000, y: 0.6357, id: '' },
-    { x: 1217203200000, y: 0.6352, id: '' },
-    { x: 1217289600000, y: 0.6368, id: '' },
-    { x: 1217376000000, y: 0.6416, id: '' },
-    { x: 1217462400000, y: 0.6407, id: '' },
-    { x: 1217548800000, y: 0.6422, id: '' },
-    { x: 1217808000000, y: 0.6425, id: '' },
-    { x: 1217894400000, y: 0.6458, id: '' },
-    { x: 1217980800000, y: 0.6462, id: '' },
-    { x: 1218067200000, y: 0.6465, id: '' },
-    { x: 1218153600000, y: 0.6635, id: '' },
-    { x: 1218412800000, y: 0.6662, id: '' },
-    { x: 1218499200000, y: 0.6709, id: '' },
-    { x: 1218585600000, y: 0.6711, id: '' },
-    { x: 1218672000000, y: 0.6709, id: '' },
-    { x: 1218758400000, y: 0.679, id: '' },
-    { x: 1219017600000, y: 0.6802, id: '' },
-    { x: 1219104000000, y: 0.6814, id: '' },
-    { x: 1219190400000, y: 0.6788, id: '' },
-    { x: 1219276800000, y: 0.6751, id: '' },
-    { x: 1219363200000, y: 0.6754, id: '' },
-    { x: 1219622400000, y: 0.6773, id: '' },
-    { x: 1219708800000, y: 0.6851, id: '' },
-    { x: 1219795200000, y: 0.6773, id: '' },
-    { x: 1219881600000, y: 0.6771, id: '' },
-    { x: 1219968000000, y: 0.6788, id: '' },
-    { x: 1220227200000, y: 0.684, id: '' },
-    { x: 1220313600000, y: 0.689, id: '' },
-    { x: 1220400000000, y: 0.6926, id: '' },
-    { x: 1220486400000, y: 0.6903, id: '' },
-    { x: 1220572800000, y: 0.702, id: '' },
-    { x: 1220832000000, y: 0.7036, id: '' },
-    { x: 1220918400000, y: 0.7071, id: '' },
-    { x: 1221004800000, y: 0.7096, id: '' },
-    { x: 1221091200000, y: 0.7178, id: '' },
-    { x: 1221177600000, y: 0.711, id: '' },
-    { x: 1221436800000, y: 0.7068, id: '' },
-    { x: 1221523200000, y: 0.701, id: '' },
-    { x: 1221609600000, y: 0.7031, id: '' },
-    { x: 1221696000000, y: 0.6897, id: '' },
-    { x: 1221782400000, y: 0.7025, id: '' },
-    { x: 1222041600000, y: 0.6864, id: '' },
-    { x: 1222128000000, y: 0.6789, id: '' },
-    { x: 1222214400000, y: 0.6808, id: '' },
-    { x: 1222300800000, y: 0.6804, id: '' },
-    { x: 1222387200000, y: 0.6832, id: '' },
-    { x: 1222646400000, y: 0.697, id: '' },
-    { x: 1222732800000, y: 0.6993, id: '' },
-    { x: 1222819200000, y: 0.7103, id: '' },
-    { x: 1222905600000, y: 0.7194, id: '' },
-    { x: 1222992000000, y: 0.723, id: '' },
-    { x: 1223251200000, y: 0.7336, id: '' },
-    { x: 1223337600000, y: 0.7337, id: '' },
-    { x: 1223424000000, y: 0.7284, id: '' },
-    { x: 1223510400000, y: 0.731, id: '' },
-    { x: 1223596800000, y: 0.7365, id: '' },
-    { x: 1223856000000, y: 0.7333, id: '' },
-    { x: 1223942400000, y: 0.7273, id: '' },
-    { x: 1224028800000, y: 0.734, id: '' },
-    { x: 1224115200000, y: 0.7405, id: '' },
-    { x: 1224201600000, y: 0.7461, id: '' },
-    { x: 1224460800000, y: 0.745, id: '' },
-    { x: 1224547200000, y: 0.7586, id: '' },
-    { x: 1224633600000, y: 0.7787, id: '' },
-    { x: 1224720000000, y: 0.7807, id: '' },
-    { x: 1224806400000, y: 0.794, id: '' },
-    { x: 1225065600000, y: 0.8027, id: 'max' },
-    { x: 1225152000000, y: 0.7984, id: '' },
-    { x: 1225238400000, y: 0.7832, id: '' },
-    { x: 1225324800000, y: 0.7673, id: '' },
-    { x: 1225411200000, y: 0.784, id: '' },
-    { x: 1225670400000, y: 0.78, id: '' },
-    { x: 1225756800000, y: 0.7801, id: '' },
-    { x: 1225843200000, y: 0.7771, id: '' },
-    { x: 1225929600000, y: 0.7832, id: '' },
-    { x: 1226016000000, y: 0.784, id: '' },
-    { x: 1226275200000, y: 0.7758, id: '' },
-    { x: 1226361600000, y: 0.7846, id: '' },
-    { x: 1226448000000, y: 0.7982, id: '' },
-    { x: 1226534400000, y: 0.7985, id: '' },
-    { x: 1226620800000, y: 0.7891, id: '' },
-    { x: 1226880000000, y: 0.79, id: '' },
-    { x: 1226966400000, y: 0.7904, id: '' },
-    { x: 1227052800000, y: 0.7916, id: '' },
-    { x: 1227139200000, y: 0.7974, id: '' },
-    { x: 1227225600000, y: 0.7936, id: '' },
-    { x: 1227484800000, y: 0.783, id: '' },
-    { x: 1227571200000, y: 0.7807, id: '' },
-    { x: 1227657600000, y: 0.7732, id: '' },
-    { x: 1227744000000, y: 0.7753, id: '' },
-    { x: 1227830400000, y: 0.7858, id: '' },
-    { x: 1228089600000, y: 0.7932, id: '' },
-    { x: 1228176000000, y: 0.7877, id: '' },
-    { x: 1228262400000, y: 0.7923, id: '' },
-    { x: 1228348800000, y: 0.7925, id: '' },
-    { x: 1228435200000, y: 0.7897, id: '' },
-    { x: 1228694400000, y: 0.7781, id: '' },
-    { x: 1228780800000, y: 0.779, id: '' },
-    { x: 1228867200000, y: 0.7738, id: '' },
-    { x: 1228953600000, y: 0.7568, id: '' },
-    { x: 1229040000000, y: 0.7497, id: '' },
-    { x: 1229299200000, y: 0.7403, id: '' },
-    { x: 1229385600000, y: 0.7306, id: '' },
-    { x: 1229472000000, y: 0.7114, id: '' },
-    { x: 1229558400000, y: 0.6843, id: '' },
-    { x: 1229644800000, y: 0.7175, id: '' },
-    { x: 1229904000000, y: 0.7159, id: '' },
-    { x: 1229990400000, y: 0.7155, id: '' },
-    { x: 1230076800000, y: 0.7141, id: '' },
-    { x: 1230163200000, y: 0.7141, id: '' },
-    { x: 1230249600000, y: 0.7141, id: '' },
-    { x: 1230508800000, y: 0.7009, id: '' },
-    { x: 1230595200000, y: 0.7094, id: '' },
-    { x: 1230681600000, y: 0.7186, id: '' },
-    { x: 1230768000000, y: 0.7186, id: '' },
-    { x: 1230854400000, y: 0.7213, id: '' },
-    { x: 1231113600000, y: 0.7364, id: '' },
-    { x: 1231200000000, y: 0.7502, id: '' },
-    { x: 1231286400000, y: 0.7357, id: '' },
-    { x: 1231372800000, y: 0.7345, id: '' },
-  ];
-
-  ngOnInit() {}
-}
diff --git a/apps/cookbook/src/app/showcase/chart-deprecated-showcase/chart-deprecated-showcase.component.html b/apps/cookbook/src/app/showcase/chart-deprecated-showcase/chart-deprecated-showcase.component.html
deleted file mode 100644
index 4e17f5d98d..0000000000
--- a/apps/cookbook/src/app/showcase/chart-deprecated-showcase/chart-deprecated-showcase.component.html
+++ /dev/null
@@ -1,30 +0,0 @@
-
    
-  
-     
-  
-  
-     
-  
-  
-    
-    
-  
-  
-    
-    
-  
-  
-    
-    
-  
-  
-     
-  
-  
-     
-  
-  
    Properties:
    
-  
-
    
diff --git a/apps/cookbook/src/app/showcase/chart-deprecated-showcase/chart-deprecated-showcase.component.scss b/apps/cookbook/src/app/showcase/chart-deprecated-showcase/chart-deprecated-showcase.component.scss
deleted file mode 100644
index e6bded8fe3..0000000000
--- a/apps/cookbook/src/app/showcase/chart-deprecated-showcase/chart-deprecated-showcase.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@use '~@kirbydesign/core/src/scss/utils';
-
-cookbook-example-viewer {
-  margin-bottom: utils.size('l');
-}
diff --git a/apps/cookbook/src/app/showcase/chart-deprecated-showcase/chart-deprecated-showcase.component.ts b/apps/cookbook/src/app/showcase/chart-deprecated-showcase/chart-deprecated-showcase.component.ts
deleted file mode 100644
index 2a29328b0f..0000000000
--- a/apps/cookbook/src/app/showcase/chart-deprecated-showcase/chart-deprecated-showcase.component.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Component } from '@angular/core';
-import { ApiDescriptionProperty } from '~/app/shared/api-description/api-description-properties/api-description-properties.component';
-
-@Component({
-  selector: 'cookbook-chart-deprecated-showcase',
-  templateUrl: './chart-deprecated-showcase.component.html',
-  styleUrls: ['./chart-deprecated-showcase.component.scss'],
-})
-export class ChartDeprecatedShowcaseComponent {
-  properties: ApiDescriptionProperty[] = [
-    {
-      name: 'height',
-      description: 'The height of the chart in px for web and dp for native',
-      type: ['number'],
-    },
-    {
-      name: 'type',
-      description: 'The type of chart',
-      type: ['donut', 'pie', 'areaspline'],
-    },
-    {
-      name: 'showDataLabels',
-      description: 'Enable or disable labels around pie/donut charts',
-      type: ['true', 'false'],
-      defaultValue: 'true',
-    },
-    {
-      name: 'description',
-      description: 'Description of chart for accessibility',
-      type: ['string - e.g. "Distribution of assets in custody account"'],
-    },
-    {
-      name: 'data',
-      description: 'Data input for chart',
-      type: ['See examples above for exact format'],
-    },
-    {
-      name: 'options',
-      description:
-        'The Highcharts options to configure the chart with (will override existing options using a deep merge)',
-      type: ['See [Highcharts options docs](https://api.highcharts.com/highcharts/)'],
-    },
-  ];
-}
diff --git a/apps/cookbook/src/app/showcase/showcase.common.ts b/apps/cookbook/src/app/showcase/showcase.common.ts
index c8ad2a9fea..e486d845c3 100644
--- a/apps/cookbook/src/app/showcase/showcase.common.ts
+++ b/apps/cookbook/src/app/showcase/showcase.common.ts
@@ -13,7 +13,6 @@ import { BadgeShowcaseComponent } from './badge-showcase/badge-showcase.componen
 import { ButtonShowcaseComponent } from './button-showcase/button-showcase.component';
 import { CalendarShowcaseComponent } from './calendar-showcase/calendar-showcase.component';
 import { CardShowcaseComponent } from './card-showcase/card-showcase.component';
-import { ChartDeprecatedShowcaseComponent } from './chart-deprecated-showcase/chart-deprecated-showcase.component';
 import { ChartShowcaseComponent } from './chart-showcase/chart-showcase.component';
 import { CheckboxShowcaseComponent } from './checkbox-showcase/checkbox-showcase.component';
 import { ChipShowcaseComponent } from './chip-showcase/chip-showcase.component';
@@ -46,7 +45,6 @@ import { ShowcaseComponent } from './showcase.component';
 import { SlideButtonShowcaseComponent } from './slide-button-showcase/slide-button-showcase.component';
 import { SlidesShowcaseComponent } from './slides-showcase/slides-showcase.component';
 import { SpinnerShowcaseComponent } from './spinner-showcase/spinner-showcase.component';
-import { StockChartDeprecatedShowcaseComponent } from './stock-chart-deprecated-showcase/stock-chart-deprecated-showcase.component';
 import { StylingHtmlListsShowcaseComponent } from './styling-html-lists/styling-html-lists-showcase';
 import { TabsShowcaseComponent } from './tabs-showcase/tabs-showcase.component';
 import { ToastShowcaseComponent } from './toast-showcase/toast-showcase.component';
@@ -67,7 +65,6 @@ export const COMPONENT_EXPORTS: any[] = [
   ListNoShapeShowcaseComponent,
   GridShowcaseComponent,
   AvatarShowcaseComponent,
-  ChartDeprecatedShowcaseComponent,
   ChartShowcaseComponent,
   FontsShowcaseComponent,
   SpinnerShowcaseComponent,
@@ -95,7 +92,6 @@ export const COMPONENT_EXPORTS: any[] = [
   DividerShowcaseComponent,
   ReorderListShowcaseComponent,
   DropdownShowcaseComponent,
-  StockChartDeprecatedShowcaseComponent,
   ProgressCircleShowcaseComponent,
   FlagShowcaseComponent,
   SlidesShowcaseComponent,
diff --git a/apps/cookbook/src/app/showcase/showcase.routes.ts b/apps/cookbook/src/app/showcase/showcase.routes.ts
index c17825e90a..9fe4d369a9 100644
--- a/apps/cookbook/src/app/showcase/showcase.routes.ts
+++ b/apps/cookbook/src/app/showcase/showcase.routes.ts
@@ -13,7 +13,6 @@ import { BadgeShowcaseComponent } from './badge-showcase/badge-showcase.componen
 import { ButtonShowcaseComponent } from './button-showcase/button-showcase.component';
 import { CalendarShowcaseComponent } from './calendar-showcase/calendar-showcase.component';
 import { CardShowcaseComponent } from './card-showcase/card-showcase.component';
-import { ChartDeprecatedShowcaseComponent } from './chart-deprecated-showcase/chart-deprecated-showcase.component';
 import { ChartShowcaseComponent } from './chart-showcase/chart-showcase.component';
 import { CheckboxShowcaseComponent } from './checkbox-showcase/checkbox-showcase.component';
 import { ChipShowcaseComponent } from './chip-showcase/chip-showcase.component';
@@ -47,7 +46,6 @@ import { ShowcaseComponent } from './showcase.component';
 import { SlideButtonShowcaseComponent } from './slide-button-showcase/slide-button-showcase.component';
 import { SlidesShowcaseComponent } from './slides-showcase/slides-showcase.component';
 import { SpinnerShowcaseComponent } from './spinner-showcase/spinner-showcase.component';
-import { StockChartDeprecatedShowcaseComponent } from './stock-chart-deprecated-showcase/stock-chart-deprecated-showcase.component';
 import { StylingHtmlListsShowcaseComponent } from './styling-html-lists/styling-html-lists-showcase';
 import { TabsShowcaseComponent } from './tabs-showcase/tabs-showcase.component';
 import { ToastShowcaseComponent } from './toast-showcase/toast-showcase.component';
@@ -149,18 +147,10 @@ export const routes: Routes = [
           hide: true,
         },
       },
-      {
-        path: 'chart-deprecated',
-        component: ChartDeprecatedShowcaseComponent,
-      },
       {
         path: 'chart',
         component: ChartShowcaseComponent,
       },
-      {
-        path: 'stock-chart-deprecated',
-        component: StockChartDeprecatedShowcaseComponent,
-      },
       {
         path: 'fonts',
         component: FontsShowcaseComponent,
diff --git a/apps/cookbook/src/app/showcase/stock-chart-deprecated-showcase/stock-chart-deprecated-showcase.component.html b/apps/cookbook/src/app/showcase/stock-chart-deprecated-showcase/stock-chart-deprecated-showcase.component.html
deleted file mode 100644
index b2585d9afb..0000000000
--- a/apps/cookbook/src/app/showcase/stock-chart-deprecated-showcase/stock-chart-deprecated-showcase.component.html
+++ /dev/null
@@ -1,7 +0,0 @@
-
-  
-
-
    Properties:
    
-
diff --git a/apps/cookbook/src/app/showcase/stock-chart-deprecated-showcase/stock-chart-deprecated-showcase.component.scss b/apps/cookbook/src/app/showcase/stock-chart-deprecated-showcase/stock-chart-deprecated-showcase.component.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/apps/cookbook/src/app/showcase/stock-chart-deprecated-showcase/stock-chart-deprecated-showcase.component.ts b/apps/cookbook/src/app/showcase/stock-chart-deprecated-showcase/stock-chart-deprecated-showcase.component.ts
deleted file mode 100644
index af2afdf2df..0000000000
--- a/apps/cookbook/src/app/showcase/stock-chart-deprecated-showcase/stock-chart-deprecated-showcase.component.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Component } from '@angular/core';
-import { ApiDescriptionProperty } from '~/app/shared/api-description/api-description-properties/api-description-properties.component';
-
-@Component({
-  selector: 'cookbook-highstock-chart-deprecated-showcase',
-  templateUrl: './stock-chart-deprecated-showcase.component.html',
-  styleUrls: ['./stock-chart-deprecated-showcase.component.scss'],
-})
-export class StockChartDeprecatedShowcaseComponent {
-  properties: ApiDescriptionProperty[] = [
-    {
-      name: 'description',
-      description: 'Description of Highstock Chart for accessibility',
-      type: ['string - e.g. "Microsoft Stock (NASDAQ: MSFT) today"'],
-    },
-    {
-      name: 'options',
-      description: 'Options input for Highstock Chart',
-      type: ['Options'],
-    },
-    {
-      name: 'data',
-      description: 'Data input for Highstock Chart',
-      type: ['StockChartDataPoint[]'],
-    },
-    {
-      name: 'height',
-      description: 'The height of the Highstock Chart in px for web and dp for native',
-      type: ['number'],
-    },
-  ];
-}
diff --git a/libs/designsystem/ng-package.json b/libs/designsystem/ng-package.json
index 8a4a784302..8ab8c48670 100644
--- a/libs/designsystem/ng-package.json
+++ b/libs/designsystem/ng-package.json
@@ -8,9 +8,6 @@
       "@ionic/angular": "ionic",
       "date-fns-tz": "date-fns-tz",
       "date-fns": "date-fns",
-      "highcharts": "highcharts",
-      "highcharts/highstock": "highcharts/highstock",
-      "highcharts/modules/annotations": "highcharts",
       "inputmask/lib/inputmask": "inputmask"
     }
   },
@@ -24,7 +21,6 @@
     "chartjs-plugin-datalabels",
     "date-fns-tz",
     "date-fns",
-    "highcharts",
     "include-media",
     "inputmask",
     "ts-deepcopy"
diff --git a/libs/designsystem/ngcc.config.js b/libs/designsystem/ngcc.config.js
index 9ad66b9e13..05dcea2147 100644
--- a/libs/designsystem/ngcc.config.js
+++ b/libs/designsystem/ngcc.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-  ignorableDeepImportMatchers: [/highcharts\//, /inputmask\//],
+  ignorableDeepImportMatchers: [/inputmask\//],
 };
diff --git a/libs/designsystem/package.json b/libs/designsystem/package.json
index ad920e526f..566f7a83da 100644
--- a/libs/designsystem/package.json
+++ b/libs/designsystem/package.json
@@ -11,7 +11,6 @@
     "chartjs-plugin-datalabels": "^2.0.0",
     "date-fns-tz": "1.1.4",
     "date-fns": "2.21.1",
-    "highcharts": "8.0.4",
     "include-media": "^1.4.10",
     "inputmask": "5.0.5",
     "ts-deepcopy": "^0.1.4"
diff --git a/libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated-helper.ts b/libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated-helper.ts
deleted file mode 100644
index 1d7469798f..0000000000
--- a/libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated-helper.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ElementRef, Injectable } from '@angular/core';
-import { chart, Options } from 'highcharts';
-import * as Highcharts from 'highcharts';
-
-// Docs on importing accessibility: https://www.highcharts.com/docs/chart-concepts/accessibility
-
-declare var require: any;
-require('highcharts/highcharts-more')(Highcharts);
-require('highcharts/modules/solid-gauge')(Highcharts);
-require('highcharts/modules/broken-axis')(Highcharts);
-
-@Injectable()
-export class ChartDeprecatedHelper {
-  chartContainer: ElementRef;
-
-  public init(chartContainer: ElementRef) {
-    this.chartContainer = chartContainer;
-  }
-
-  public renderChart(options: Options) {
-    if (this.chartContainer && options.chart) {
-      chart(this.chartContainer.nativeElement, options);
-    }
-  }
-}
diff --git a/libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated-type.ts b/libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated-type.ts
deleted file mode 100644
index 73c77a8567..0000000000
--- a/libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated-type.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export enum ChartDeprecatedType {
-  PIE = 'pie',
-  DONUT = 'donut',
-  AREASPLINE = 'areaspline',
-  TIMESERIES = 'timeseries',
-  ACTIVITYGAUGE = 'activitygauge',
-  BAR = 'bar',
-  COLUMN = 'column',
-  CUSTOM = 'custom',
-}
diff --git a/libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated.component.scss b/libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated.component.scss
deleted file mode 100644
index 5d4e87f30f..0000000000
--- a/libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-:host {
-  display: block;
-}
diff --git a/libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated.component.spec.ts b/libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated.component.spec.ts
deleted file mode 100644
index 141f507281..0000000000
--- a/libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated.component.spec.ts
+++ /dev/null
@@ -1,273 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { Options, PlotSeriesDataLabelsOptions, XAxisOptions } from 'highcharts';
-
-import { ChartDeprecatedType } from './chart-deprecated-type';
-import { ChartDeprecatedComponent } from './chart-deprecated.component';
-
-describe('ChartDeprecatedComponent', () => {
-  let component: ChartDeprecatedComponent;
-  let fixture: ComponentFixture;
-
-  const expectedDefaultHeight = 300;
-
-  beforeEach(
-    waitForAsync(() => {
-      TestBed.configureTestingModule({
-        declarations: [ChartDeprecatedComponent],
-      }).compileComponents();
-    })
-  );
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ChartDeprecatedComponent);
-    component = fixture.componentInstance;
-    component.data = [];
-    component.ngOnChanges({ type: {} as any });
-    fixture.detectChanges();
-  });
-
-  it('should have correct default height input', () => {
-    expect(component.height).toBe(expectedDefaultHeight);
-  });
-
-  it('should set correct default chart height', () => {
-    expect(component.mergedOptions.chart.height).toBe(expectedDefaultHeight);
-  });
-
-  it('should set correct non-default chart height', () => {
-    const expectedHeight = 400;
-    component.height = expectedHeight;
-    component.ngOnChanges({ type: {} as any });
-    fixture.detectChanges();
-    expect(component.mergedOptions.chart.height).toBe(expectedHeight);
-  });
-
-  it('should have correct default chart type', () => {
-    expect((component.type = ChartDeprecatedType.PIE));
-    component.ngOnChanges({ type: {} as any });
-
-    expect(component.mergedOptions.chart.type).toBe(ChartDeprecatedType.PIE);
-    expect(component.mergedOptions.plotOptions.pie.innerSize).toBe('0%');
-  });
-
-  it('should convert donut chart type to highcharts pie with 50% innerSize', () => {
-    component.type = ChartDeprecatedType.DONUT;
-    component.ngOnChanges({ type: {} as any });
-
-    expect((component.type = ChartDeprecatedType.DONUT));
-    expect(component.mergedOptions.chart.type).toBe(ChartDeprecatedType.PIE);
-    expect(component.mergedOptions.plotOptions.pie.innerSize).toBe('50%');
-  });
-
-  it('should set areaspline chart type', () => {
-    component.type = ChartDeprecatedType.AREASPLINE;
-    component.ngOnChanges({ type: {} as any });
-
-    expect((component.type = ChartDeprecatedType.AREASPLINE));
-    expect(component.mergedOptions.chart.type).toBe(ChartDeprecatedType.AREASPLINE);
-  });
-
-  it('should have dataLabels enabled as default', () => {
-    expect(
-      (component.mergedOptions.plotOptions.pie.dataLabels as PlotSeriesDataLabelsOptions).enabled
-    ).toBe(true);
-  });
-
-  it('should disable dataLabels when false', () => {
-    component.showDataLabels = false;
-    component.ngOnChanges({ type: {} as any });
-
-    expect(
-      (component.mergedOptions.plotOptions.pie.dataLabels as PlotSeriesDataLabelsOptions).enabled
-    ).toBe(false);
-  });
-
-  it('should set correct input data in chart series', () => {
-    component.data = [
-      {
-        name: 'Boomerangs 20%',
-        y: 20,
-        label: '20%',
-      },
-      {
-        name: 'Bubbles 41%',
-        y: 41,
-        label: '41%',
-      },
-    ];
-    component.ngOnChanges({ type: {} as any });
-    const data = (component.mergedOptions.series[0] as Highcharts.SeriesAreasplineOptions).data;
-
-    expect(data.length).toBe(2);
-    expect(data[0]['name']).toBe('Boomerangs 20%');
-  });
-
-  describe('ActivityGauge', () => {
-    it('should set correct title and subtitle', () => {
-      component.type = ChartDeprecatedType.ACTIVITYGAUGE;
-
-      component.data = [
-        {
-          title: '1.234.567',
-          subtitle: 'Afdraget',
-        },
-      ];
-      component.ngOnChanges({ type: {} as any });
-
-      expect(component.mergedOptions.title.text).toBe('1.234.567');
-      expect(component.mergedOptions.subtitle.text).toBe('Afdraget');
-    });
-
-    it('should add backgroundColor to optionsarray', () => {
-      component.type = ChartDeprecatedType.ACTIVITYGAUGE;
-      const ActivityGaugeOptions: Options = {
-        pane: {
-          background: [
-            {
-              backgroundColor: {
-                linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
-                stops: [
-                  [1, 'rgba(255, 255, 255, 0.3)'],
-                  [0, 'rgba(255, 255, 255, 0.3)'],
-                ],
-              },
-              outerRadius: '112%',
-              innerRadius: '88%',
-              borderWidth: 0,
-            },
-          ],
-        },
-      };
-
-      component.mergedOptions = ActivityGaugeOptions;
-
-      component.data = [
-        {
-          paneBackgroundColor: 'red',
-        },
-      ];
-      component.ngOnChanges({ type: {} as any });
-
-      expect(component.mergedOptions.pane.background[0].backgroundColor).toEqual(
-        component.data[0].paneBackgroundColor
-      );
-    });
-
-    it('should change title and subtitle color when color-attribute is set', () => {
-      component.type = ChartDeprecatedType.ACTIVITYGAUGE;
-      component.data = [
-        {
-          color: 'red',
-        },
-      ];
-      component.ngOnChanges({ type: {} as any });
-
-      const expected = component.data[0].color;
-
-      expect(component.mergedOptions.title.style.color).toEqual(expected);
-      expect(component.mergedOptions.subtitle.style.color).toEqual(expected);
-    });
-
-    it('should set type to solidgauge when ACTIVITYGAUGE is chosen', () => {
-      component.type = ChartDeprecatedType.ACTIVITYGAUGE;
-      component.data = [
-        {
-          title: '',
-          subtitle: '',
-        },
-      ];
-      component.ngOnChanges({ type: {} as any });
-
-      expect(component.mergedOptions.series[0].type).toEqual('solidgauge');
-    });
-
-    it('should set activitygauge chart type', () => {
-      component.type = ChartDeprecatedType.ACTIVITYGAUGE;
-      component.data = [
-        {
-          title: 'test',
-          subtitle: 'test',
-        },
-      ];
-      component.ngOnChanges({ type: {} as any });
-
-      expect(component.mergedOptions.chart.type).toBe(ChartDeprecatedType.ACTIVITYGAUGE);
-    });
-  });
-
-  describe('column', () => {
-    it('should set inputs correct', () => {
-      component.type = ChartDeprecatedType.COLUMN;
-      component.data = [1, 2, 3];
-      component.categories = ['jan', 'feb', 'mar'];
-      component.ngOnChanges({ type: {} as any });
-      const dataMax = Math.max(...component.data);
-
-      expect(component.mergedOptions.series as any).toEqual([
-        {
-          type: 'column',
-          name: 'InvisibleClickReceiver',
-          data: component.data.map((_, idx) => dataMax - component.data[idx]),
-          opacity: 0,
-        },
-        {
-          type: 'column',
-          data: component.data,
-        },
-      ]);
-
-      expect((component.mergedOptions.xAxis as XAxisOptions).categories).toEqual(
-        component.categories
-      );
-    });
-  });
-
-  describe('bar', () => {
-    it('should set inputs correct', () => {
-      component.type = ChartDeprecatedType.BAR;
-      component.data = [1, 2, 3];
-      component.categories = ['jan', 'feb', 'mar'];
-      component.ngOnChanges({ type: {} as any });
-
-      expect(component.mergedOptions.series as any).toEqual([
-        {
-          type: 'bar',
-          name: 'InvisibleClickReceiver',
-          data: component.data.map((dataEntry) => Math.max(...component.data) - dataEntry),
-          edgeColor: 'rgb(255, 255, 255, 0)',
-          opacity: 0,
-        },
-        {
-          type: 'bar',
-          data: component.data,
-        },
-      ]);
-
-      expect((component.mergedOptions.xAxis as XAxisOptions).categories).toEqual(
-        component.categories
-      );
-    });
-  });
-
-  describe('override options', () => {
-    it('should override options', () => {
-      component.type = ChartDeprecatedType.PIE;
-      component.data = [
-        {
-          data: [1, 1],
-        },
-      ];
-
-      component.options = {
-        series: [
-          {
-            data: [2, 2],
-          } as any,
-        ],
-      };
-      component.ngOnChanges({ type: {} as any });
-
-      expect((component.mergedOptions.series[0] as any).data).toEqual([2, 2]);
-    });
-  });
-});
diff --git a/libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated.component.ts b/libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated.component.ts
deleted file mode 100644
index 8afc7edc34..0000000000
--- a/libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated.component.ts
+++ /dev/null
@@ -1,233 +0,0 @@
-import { Component, ElementRef, Inject, Input, OnChanges, SimpleChanges } from '@angular/core';
-import {
-  Options,
-  PlotSeriesDataLabelsOptions,
-  XAxisBreaksOptions,
-  XAxisOptions,
-  YAxisOptions,
-} from 'highcharts';
-
-import { mergeDeep } from '../../helpers/merge-deep';
-
-import { ChartDeprecatedHelper } from './chart-deprecated-helper';
-import { ChartDeprecatedType } from './chart-deprecated-type';
-import { ActivityGaugeOptions, ACTIVITYGAUGE_OPTIONS } from './options/activitygauge';
-import { AreaSplineOptions, AREASPLINE_OPTIONS } from './options/areaspline';
-import { barOptions } from './options/bar';
-import { columnOptions } from './options/column';
-import { DonutOptions, DONUT_OPTIONS } from './options/donut';
-import { TimeSeriesOptions, TIMESERIES_OPTIONS } from './options/timeseries';
-
-@Component({
-  selector: 'kirby-chart-deprecated',
-  template: '',
-  styleUrls: ['./chart-deprecated.component.scss'],
-  providers: [
-    ChartDeprecatedHelper,
-    { provide: DONUT_OPTIONS, useValue: DonutOptions },
-    { provide: AREASPLINE_OPTIONS, useValue: AreaSplineOptions },
-    { provide: TIMESERIES_OPTIONS, useValue: TimeSeriesOptions },
-    { provide: ACTIVITYGAUGE_OPTIONS, useValue: ActivityGaugeOptions },
-  ],
-})
-export class ChartDeprecatedComponent implements OnChanges {
-  @Input() data = [];
-  @Input() categories: string[] = [];
-  @Input() breaks: Array = [];
-  @Input() height = 300;
-  @Input() type: ChartDeprecatedType = ChartDeprecatedType.PIE;
-  @Input() description = '';
-  @Input() showDataLabels = true;
-  @Input() options: Options;
-  mergedOptions: Options = {
-    accessibility: {},
-  };
-
-  constructor(
-    private chartHelper: ChartDeprecatedHelper,
-    private hostElement: ElementRef,
-    @Inject(DONUT_OPTIONS) public donutOptions: Options,
-    @Inject(AREASPLINE_OPTIONS) public areasplineOptions: Options,
-    @Inject(TIMESERIES_OPTIONS) public timeSeriesOptions: Options,
-    @Inject(ACTIVITYGAUGE_OPTIONS) public activitygaugeOptions: Options
-  ) {
-    this.chartHelper.init(this.hostElement);
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes.type) {
-      this.setupChartType();
-    }
-    this.updateProperties();
-    this.chartHelper.renderChart(this.mergedOptions);
-  }
-
-  setupChartType() {
-    switch (this.type) {
-      case ChartDeprecatedType.DONUT: {
-        this.mergedOptions = this.donutOptions;
-        this.mergedOptions.chart.type = ChartDeprecatedType.PIE;
-        this.mergedOptions.plotOptions.pie.innerSize = '50%';
-        break;
-      }
-      case ChartDeprecatedType.PIE: {
-        this.mergedOptions = this.donutOptions;
-        this.mergedOptions.chart.type = this.type;
-        this.mergedOptions.plotOptions.pie.innerSize = '0%';
-        break;
-      }
-      case ChartDeprecatedType.AREASPLINE: {
-        this.mergedOptions = this.areasplineOptions;
-        this.mergedOptions.chart.type = this.type;
-        break;
-      }
-      case ChartDeprecatedType.TIMESERIES: {
-        this.mergedOptions = this.timeSeriesOptions;
-        this.mergedOptions.chart.type = this.type;
-        break;
-      }
-      case ChartDeprecatedType.ACTIVITYGAUGE: {
-        this.mergedOptions = this.activitygaugeOptions;
-        this.mergedOptions.chart.type = this.type;
-        break;
-      }
-      case ChartDeprecatedType.COLUMN: {
-        this.mergedOptions = columnOptions;
-        this.mergedOptions.chart.type = this.type;
-        break;
-      }
-      case ChartDeprecatedType.BAR: {
-        this.mergedOptions = barOptions;
-        this.mergedOptions.chart.type = this.type;
-        break;
-      }
-    }
-  }
-
-  updateProperties() {
-    this.mergedOptions.chart.height = this.height;
-    this.mergedOptions.accessibility.description = this.description;
-    switch (this.mergedOptions.chart.type) {
-      case ChartDeprecatedType.PIE:
-      case ChartDeprecatedType.DONUT: {
-        this.setPieInput();
-        break;
-      }
-      case ChartDeprecatedType.AREASPLINE: {
-        this.setSeries('areaspline');
-        break;
-      }
-      case ChartDeprecatedType.TIMESERIES: {
-        this.setTimeseriesInput();
-        break;
-      }
-      case ChartDeprecatedType.ACTIVITYGAUGE: {
-        this.setActivitygaugeInput();
-        break;
-      }
-      case ChartDeprecatedType.COLUMN: {
-        this.setColumnInput();
-        break;
-      }
-      case ChartDeprecatedType.BAR: {
-        this.setBarInput();
-        break;
-      }
-    }
-    if (!!this.options) {
-      this.mergedOptions = mergeDeep(this.mergedOptions, this.options);
-    }
-  }
-
-  private setPieInput() {
-    (this.mergedOptions.plotOptions.pie
-      .dataLabels as PlotSeriesDataLabelsOptions).enabled = this.showDataLabels;
-    this.setSeries('pie');
-  }
-
-  private setBarInput() {
-    const dataMaxValue = Math.max(...this.data);
-    this.mergedOptions.series = [
-      {
-        type: 'bar',
-        name: 'InvisibleClickReceiver',
-        data: this.data.map((dataEntry) => dataMaxValue - dataEntry),
-        edgeColor: 'rgb(255, 255, 255, 0)',
-        opacity: 0,
-      },
-      {
-        type: 'bar',
-        data: this.data,
-      },
-    ];
-    (this.mergedOptions.xAxis as XAxisOptions).categories = this.categories;
-  }
-
-  private setColumnInput() {
-    this.mergedOptions.series = [
-      {
-        type: 'column',
-        data: this.data,
-      },
-    ];
-    const dataMaxValue = Math.max(...this.data);
-    ((this.mergedOptions.yAxis as YAxisOptions).tickPositioner = () => {
-      var positions = [0, dataMaxValue];
-      return positions;
-    }),
-      (this.mergedOptions.series = [
-        {
-          type: 'column',
-          name: 'InvisibleClickReceiver',
-          data: this.data.map((_, idx) => dataMaxValue - this.data[idx]),
-          opacity: 0,
-        },
-        {
-          type: 'column',
-          data: this.data,
-        },
-      ]);
-    (this.mergedOptions.xAxis as XAxisOptions).categories = this.categories;
-  }
-
-  private setActivitygaugeInput() {
-    const data = this.data[0];
-    this.mergedOptions.title.text = data.title;
-    this.mergedOptions.subtitle.text = data.subtitle;
-    if (data.paneBackgroundColor) {
-      this.mergedOptions.pane.background = [
-        {
-          ...this.mergedOptions.pane.background[0],
-          backgroundColor: data.paneBackgroundColor,
-        },
-      ];
-    }
-    if (data.color) {
-      this.mergedOptions.title.style.color = data.color;
-      this.mergedOptions.subtitle.style.color = data.color;
-    }
-    this.mergedOptions.series = [
-      {
-        type: 'solidgauge',
-        data: data.series,
-      },
-    ];
-  }
-
-  private setTimeseriesInput() {
-    this.setSeries('area');
-    this.mergedOptions.xAxis = {
-      ...this.mergedOptions.xAxis,
-      breaks: this.breaks,
-    };
-  }
-
-  private setSeries(type) {
-    this.mergedOptions.series = [
-      {
-        type,
-        data: this.data,
-      },
-    ];
-  }
-}
diff --git a/libs/designsystem/src/lib/components/chart-deprecated/index.ts b/libs/designsystem/src/lib/components/chart-deprecated/index.ts
deleted file mode 100644
index 7cbed50b62..0000000000
--- a/libs/designsystem/src/lib/components/chart-deprecated/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { ChartDeprecatedComponent } from './chart-deprecated.component';
-export { ChartDeprecatedType } from './chart-deprecated-type';
diff --git a/libs/designsystem/src/lib/components/chart-deprecated/options/activitygauge.ts b/libs/designsystem/src/lib/components/chart-deprecated/options/activitygauge.ts
deleted file mode 100644
index d44449259a..0000000000
--- a/libs/designsystem/src/lib/components/chart-deprecated/options/activitygauge.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { InjectionToken } from '@angular/core';
-import { Options } from 'highcharts';
-
-export const ACTIVITYGAUGE_OPTIONS = new InjectionToken('ActivityGaugeOptions');
-export const ActivityGaugeOptions: Options = {
-  chart: {
-    style: {
-      fontFamily: 'Roboto, sans-serif',
-      fontWeight: '300',
-    },
-    backgroundColor: 'transparent',
-    type: 'solidgauge',
-    height: '110%',
-  },
-  accessibility: {
-    description: '',
-  },
-  title: {
-    align: 'center',
-    verticalAlign: 'middle',
-    text: '',
-    y: 0,
-    floating: false,
-    style: {
-      fontSize: '30px',
-      color: '#fff',
-      fontWeight: 'bold',
-    },
-  },
-  subtitle: {
-    text: '',
-    align: 'center',
-    y: 25,
-    verticalAlign: 'middle',
-    style: {
-      color: '#fff',
-      fontSize: '14px',
-      fontWeight: 'normal',
-    },
-  },
-  credits: {
-    enabled: false,
-  },
-  tooltip: {
-    enabled: false,
-    animation: false,
-  },
-  pane: {
-    startAngle: 0,
-    endAngle: 360,
-    background: [
-      {
-        backgroundColor: {
-          linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
-          stops: [
-            [1, 'rgba(255, 255, 255, 0.3)'],
-            [0, 'rgba(255, 255, 255, 0.3)'],
-          ],
-        },
-        outerRadius: '112%',
-        innerRadius: '88%',
-        borderWidth: 0,
-      },
-    ],
-  },
-  yAxis: {
-    min: 0,
-    max: 100,
-    lineWidth: 0,
-    tickPositions: [],
-  },
-  plotOptions: {
-    solidgauge: {
-      dataLabels: {
-        enabled: false,
-      },
-      linecap: 'round',
-      stickyTracking: false,
-      rounded: true,
-    },
-  },
-  series: [
-    {
-      type: 'solidgauge',
-    },
-  ],
-};
diff --git a/libs/designsystem/src/lib/components/chart-deprecated/options/areaspline.ts b/libs/designsystem/src/lib/components/chart-deprecated/options/areaspline.ts
deleted file mode 100644
index ba8e188ce2..0000000000
--- a/libs/designsystem/src/lib/components/chart-deprecated/options/areaspline.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import { InjectionToken } from '@angular/core';
-import { Options } from 'highcharts';
-
-export const AREASPLINE_OPTIONS = new InjectionToken('AreasplineOptions');
-export const AreaSplineOptions: Options = {
-  chart: {
-    type: 'areaspline',
-    borderWidth: 0,
-    plotBorderWidth: 0,
-    margin: 0,
-    marginTop: 48,
-  },
-  accessibility: {
-    description: '',
-  },
-  title: {
-    text: '',
-  },
-  credits: {
-    enabled: false,
-  },
-  exporting: {
-    enabled: false,
-  },
-  tooltip: {
-    enabled: true,
-    animation: false,
-    shape: 'square',
-    borderColor: '#FFFFFF',
-    shadow: false,
-    backgroundColor: '#FFFFFF',
-    style: {
-      fontSize: '1.25rem',
-    },
-    formatter: function(): string {
-      return String(this.y);
-    },
-    positioner: function() {
-      return { x: this.chart.plotSizeX / 2 - this.label.width / 2, y: 0 };
-    },
-  },
-  xAxis: {
-    visible: false,
-    minPadding: 0,
-    maxPadding: 0,
-    crosshair: {
-      zIndex: 3,
-      width: 1,
-      color: '#177E17',
-    },
-  },
-  yAxis: {
-    visible: false,
-    endOnTick: false,
-    startOnTick: false,
-  },
-  plotOptions: {
-    areaspline: {
-      shadow: true,
-      showInLegend: false,
-      fillColor: {
-        linearGradient: { x1: 0, x2: 0, y1: 0, y2: 0.8 },
-        stops: [
-          [0, '#C9E5C9'],
-          [1, '#FFFFFF'],
-        ],
-      },
-      lineColor: '#177E17',
-      lineWidth: 2,
-    },
-    series: {
-      states: {
-        hover: {
-          halo: {
-            size: 0,
-          },
-        },
-      },
-      marker: {
-        enabled: false,
-        states: {
-          hover: {
-            enabled: true,
-            fillColor: '#177E17',
-          },
-        },
-      },
-    },
-  },
-  series: [
-    {
-      type: 'areaspline',
-    },
-  ],
-};
diff --git a/libs/designsystem/src/lib/components/chart-deprecated/options/bar.ts b/libs/designsystem/src/lib/components/chart-deprecated/options/bar.ts
deleted file mode 100644
index 9e94c81118..0000000000
--- a/libs/designsystem/src/lib/components/chart-deprecated/options/bar.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import { Options } from 'highcharts';
-
-import { DesignTokenHelper } from '@kirbydesign/core';
-
-const getColor = DesignTokenHelper.getColor;
-const fontSize = DesignTokenHelper.fontSize;
-
-function colorPoints() {
-  var series = this.series;
-  for (var i = 0, ie = series.length; i < ie; ++i) {
-    var points = series[i].data;
-    for (var j = 0, je = points.length; j < je; ++j) {
-      if (points[j].graphic) {
-        points[j].graphic.element.style.stroke = getColor('background-color').value;
-      }
-    }
-  }
-}
-
-export const barOptions: Options = {
-  chart: {
-    type: 'bar',
-    animation: {
-      duration: 150,
-    },
-    backgroundColor: 'transparent',
-    events: {
-      load: colorPoints,
-      redraw: colorPoints,
-    },
-  },
-  accessibility: {
-    description: 'Bar chart',
-  },
-  credits: {
-    enabled: false,
-  },
-  title: {
-    text: '',
-  },
-  xAxis: {
-    labels: {
-      style: {
-        fontSize: fontSize('s'),
-        fontFamily: 'Roboto',
-        color: getColor('black').value,
-      },
-    },
-    min: 0,
-    lineColor: 'transparent',
-  },
-  yAxis: {
-    title: {
-      text: '',
-    },
-    labels: {
-      enabled: false,
-    },
-    min: 0,
-    lineWidth: 0,
-    minorGridLineWidth: 0,
-    gridLineColor: 'transparent',
-    minorTickLength: 0,
-    tickLength: 0,
-    maxPadding: 0,
-    endOnTick: false,
-    showLastLabel: false,
-    showFirstLabel: false,
-  },
-  plotOptions: {
-    bar: {
-      events: {},
-    },
-    series: {
-      color: getColor('secondary').value,
-      stacking: 'normal',
-      states: {
-        hover: {
-          enabled: false,
-        },
-        inactive: {
-          opacity: 1,
-        },
-      },
-    },
-  },
-  tooltip: {
-    enabled: false,
-  },
-  legend: {
-    enabled: false,
-  },
-};
diff --git a/libs/designsystem/src/lib/components/chart-deprecated/options/column.ts b/libs/designsystem/src/lib/components/chart-deprecated/options/column.ts
deleted file mode 100644
index ba5a572c40..0000000000
--- a/libs/designsystem/src/lib/components/chart-deprecated/options/column.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import { Options } from 'highcharts';
-
-import { DesignTokenHelper } from '@kirbydesign/core';
-
-const getColor = DesignTokenHelper.getColor;
-const fontSize = DesignTokenHelper.fontSize;
-
-function colorPoints() {
-  var series = this.series;
-  for (var i = 0, ie = series.length; i < ie; ++i) {
-    var points = series[i].data;
-    for (var j = 0, je = points.length; j < je; ++j) {
-      if (points[j].graphic) {
-        points[j].graphic.element.style.stroke = getColor('secondary').value;
-      }
-    }
-  }
-}
-
-export const columnOptions: Options = {
-  chart: {
-    animation: {
-      duration: 500,
-    },
-    backgroundColor: 'transparent',
-    type: 'column',
-    events: {
-      load: colorPoints,
-      redraw: colorPoints,
-    },
-  },
-  title: {
-    text: '',
-  },
-  accessibility: {
-    description: 'Column chart',
-  },
-  xAxis: {
-    labels: {
-      style: {
-        fontSize: fontSize('xxs'),
-        fontFamily: 'Roboto',
-        color: getColor('black').value,
-      },
-    },
-    lineWidth: 0,
-    minorGridLineWidth: 0,
-    lineColor: 'transparent',
-    minorTickLength: 0,
-    tickLength: 0,
-  },
-  yAxis: {
-    title: {
-      text: '',
-    },
-    labels: {
-      enabled: false,
-    },
-    min: 0,
-    lineWidth: 0,
-    minorGridLineWidth: 0,
-    gridLineColor: 'transparent',
-    minorTickLength: 0,
-    tickLength: 0,
-    showLastLabel: false,
-    showFirstLabel: false,
-  },
-  credits: {
-    enabled: false,
-  },
-  plotOptions: {
-    column: {
-      stacking: 'normal',
-    },
-    series: {
-      color: getColor('secondary').value,
-      zIndex: 10,
-      states: {
-        hover: {
-          enabled: false,
-        },
-        inactive: {
-          opacity: 1,
-        },
-      },
-    },
-    line: {
-      className: 'avg-line',
-      marker: {
-        enabled: false,
-      },
-      allowPointSelect: false,
-    },
-  },
-  tooltip: {
-    enabled: false,
-  },
-  legend: {
-    enabled: false,
-  },
-};
diff --git a/libs/designsystem/src/lib/components/chart-deprecated/options/donut.ts b/libs/designsystem/src/lib/components/chart-deprecated/options/donut.ts
deleted file mode 100644
index f5e5667c56..0000000000
--- a/libs/designsystem/src/lib/components/chart-deprecated/options/donut.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-import { InjectionToken } from '@angular/core';
-import { Options } from 'highcharts';
-
-export const DONUT_OPTIONS = new InjectionToken('DonutOptions');
-export const DonutOptions: Options = {
-  chart: {
-    style: {
-      fontFamily: 'Roboto',
-      fontWeight: '300',
-    },
-    backgroundColor: 'transparent',
-    type: '',
-  },
-  accessibility: {
-    description: 'Donut chart',
-  },
-  title: {
-    text: '',
-  },
-  tooltip: {
-    enabled: false,
-    animation: false,
-  },
-  legend: {
-    layout: 'vertical',
-    symbolRadius: 0,
-    itemStyle: {
-      fontSize: '.875rem',
-    },
-  },
-  plotOptions: {
-    pie: {
-      colors: ['#015132', '#B2D1BF', '#AABC08', '#1FA05A', 'yellowgreen'],
-      allowPointSelect: false,
-      cursor: 'pointer',
-      showInLegend: true,
-      borderColor: null,
-      dataLabels: {
-        format: '{point.label}',
-        enabled: true,
-        connectorWidth: 0,
-        distance: 5,
-        style: {
-          fontSize: '1rem',
-          fontWeight: '200',
-        },
-      },
-      point: {
-        events: {
-          legendItemClick: () => {
-            // Prevent the default behavior (toggle visibility of slices when clicking on legends)
-            return false;
-          },
-        },
-      },
-      states: {
-        hover: {
-          enabled: false,
-        },
-      },
-    },
-    series: {
-      animation: true,
-      dataLabels: {},
-      states: {
-        hover: {
-          enabled: false,
-        },
-        inactive: {
-          opacity: 1,
-        },
-      },
-    },
-  },
-  series: [
-    {
-      name: '',
-      type: 'pie',
-    },
-  ],
-  credits: {
-    enabled: false,
-  },
-  exporting: {
-    enabled: false,
-  },
-  responsive: {
-    rules: [
-      {
-        condition: {
-          minWidth: 640,
-        },
-        chartOptions: {
-          legend: {
-            layout: 'vertical',
-            align: 'right',
-            verticalAlign: 'middle',
-            itemMarginTop: 12,
-            symbolRadius: 0,
-            symbolWidth: 14,
-            symbolHeight: 14,
-            x: -100,
-          },
-        },
-      },
-      {
-        condition: {
-          minWidth: 0,
-        },
-        chartOptions: {
-          legend: {
-            symbolRadius: 0,
-          },
-        },
-      },
-    ],
-  },
-};
diff --git a/libs/designsystem/src/lib/components/chart-deprecated/options/timeseries.ts b/libs/designsystem/src/lib/components/chart-deprecated/options/timeseries.ts
deleted file mode 100644
index ec0e0524e7..0000000000
--- a/libs/designsystem/src/lib/components/chart-deprecated/options/timeseries.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import { InjectionToken } from '@angular/core';
-import { dateFormat, Options } from 'highcharts';
-
-export const TIMESERIES_OPTIONS = new InjectionToken('TimeSeriesOptions');
-export const TimeSeriesOptions: Options = {
-  chart: {
-    backgroundColor: {
-      linearGradient: { x1: 0, x2: 0, y1: 0, y2: 3 },
-      stops: [
-        [0, '#F6F6F6'],
-        [1, '#808080'],
-      ],
-    },
-    zoomType: 'x',
-    type: 'timeseries',
-    borderWidth: 0,
-    plotBorderWidth: 0,
-    margin: 0,
-    marginTop: 48,
-  },
-  accessibility: {
-    description: '',
-  },
-  title: {
-    text: '',
-  },
-  subtitle: {
-    text: '',
-  },
-  tooltip: {
-    shadow: false,
-    formatter: function() {
-      // @ts-ignore
-      return dateFormat('%e. %b', new Date(this.x)) + '.' + '
    ' + this.y + '';
-    },
-    //xDateFormat: '%d/%m',
-    positioner: function(_labelWidth, _labelHeight, point) {
-      return { x: point.x, y: 0 };
-    },
-    borderWidth: 0,
-  },
-  xAxis: {
-    visible: false,
-    lineColor: '#FFFFFF',
-    tickColor: '#FFFFFF',
-    labels: {
-      style: {
-        color: 'white',
-      },
-    },
-    opposite: true,
-    crosshair: {
-      zIndex: 3,
-      width: 1,
-      color: '#00E89A',
-    },
-    type: 'datetime',
-    tickInterval: 1,
-  },
-  yAxis: {
-    visible: false,
-  },
-  legend: {
-    enabled: false,
-  },
-  plotOptions: {
-    area: {
-      fillColor: '#01352C',
-      marker: {
-        lineWidth: 14,
-        lineColor: 'rgba(255,255,255,0.2)',
-        radius: 6,
-        fillColor: '#00E89A',
-      },
-      lineColor: '#01352C',
-      lineWidth: 1,
-      states: {
-        hover: {
-          lineWidth: 1,
-        },
-      },
-      threshold: null,
-    },
-    series: {
-      marker: {
-        enabledThreshold: 50,
-      },
-    },
-  },
-  series: [
-    {
-      type: 'area',
-      name: 'USD to EUR',
-    },
-  ],
-};
diff --git a/libs/designsystem/src/lib/components/index.ts b/libs/designsystem/src/lib/components/index.ts
index 9915cbfa07..5d8ac6dd2b 100644
--- a/libs/designsystem/src/lib/components/index.ts
+++ b/libs/designsystem/src/lib/components/index.ts
@@ -5,9 +5,7 @@ export { AvatarComponent, AvatarSize } from './avatar/avatar.component';
 export { ButtonComponent, ButtonSize } from './button/button.component';
 
 export * from './card';
-export * from './chart-deprecated';
 export * from './chart';
-export * from './stock-chart-deprecated';
 export * from './calendar';
 export * from './item-sliding';
 
diff --git a/libs/designsystem/src/lib/components/stock-chart-deprecated/index.ts b/libs/designsystem/src/lib/components/stock-chart-deprecated/index.ts
deleted file mode 100644
index 2e51a57e2e..0000000000
--- a/libs/designsystem/src/lib/components/stock-chart-deprecated/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './options/stock-chart-deprecated-options';
-export * from './stock-chart-deprecated.component';
diff --git a/libs/designsystem/src/lib/components/stock-chart-deprecated/options/stock-chart-deprecated-options.ts b/libs/designsystem/src/lib/components/stock-chart-deprecated/options/stock-chart-deprecated-options.ts
deleted file mode 100644
index 5b09a39257..0000000000
--- a/libs/designsystem/src/lib/components/stock-chart-deprecated/options/stock-chart-deprecated-options.ts
+++ /dev/null
@@ -1,220 +0,0 @@
-import { formatNumber } from '@angular/common';
-import { Options } from 'highcharts';
-import { dateFormat } from 'highcharts/highstock';
-
-import { ColorHelper } from '@kirbydesign/core';
-
-export interface StockChartDeprecatedDataPoint {
-  x: number;
-  y: number;
-  id: 'min' | 'max' | '';
-}
-
-export const stockChartDeprecatedOptions = (locale: string, height: number) => {
-  const options: Options = defaultOptions(locale) as Options;
-  const transparentColor = 'rgba(255,255,255,0)';
-  options.chart.backgroundColor = transparentColor;
-  options.chart.height = height;
-
-  options.tooltip.backgroundColor = ColorHelper.getThemeColorRgbString('background-color');
-  // Using a function instead of a lamdba-expression because of a reference to this.
-  options.tooltip.formatter = function() {
-    return (
-      '
    ' +
-      // @ts-ignore
-      dateFormat('%e. %b', new Date(this.x)) +
-      '

    ' +
-      formatNumber(this.y, locale) +
-      '
    '
-    );
-  };
-  options.plotOptions.area.fillColor = transparentColor;
-  options.plotOptions.area.lineColor = ColorHelper.getThemeColorRgbString('tertiary');
-
-  options.plotOptions.area.marker.lineColor = 'rgba(255,255,255,0.3)';
-  options.plotOptions.area.marker.fillColor = ColorHelper.getThemeColorRgbString('primary');
-
-  options.xAxis = {
-    ...options.xAxis,
-    crosshair: {
-      color: ColorHelper.getThemeColorRgbString('primary'),
-    },
-    tickColor: transparentColor,
-    lineColor: ColorHelper.getThemeColorRgbString('medium'),
-    labels: {
-      style: {
-        color: ColorHelper.getThemeColorRgbString('semi-dark-tint'),
-      },
-    },
-  };
-
-  options.yAxis = {
-    ...options.yAxis,
-    lineColor: transparentColor,
-    gridLineColor: ColorHelper.getThemeColorRgbString('medium'),
-    labels: {
-      style: {
-        color: ColorHelper.getThemeColorRgbString('semi-dark-tint'),
-      },
-    },
-  };
-
-  /*
-  // Using a function instead of a lamdba-expression because of a reference to this.
-  options.plotOptions.area.events.mouseOver = function() {
-    const transparentColor = 'rgba(255,255,255,0)';
-    this.chart.xAxis[0].update({
-      tickColor: transparentColor,
-      lineColor: ColorHelper.getThemeColorRgbString('medium'),
-      labels: {
-        style: {
-          color: ColorHelper.getThemeColorRgbString('semi-dark-tint'),
-        },
-      },
-    });
-  };
-
-  // Using a function instead of a lamdba-expression because of a reference to this.
-  options.plotOptions.area.events.mouseOut = function() {
-    const transparentColor = 'rgba(255,255,255,0)';
-    this.chart.xAxis[0].update({
-      lineColor: transparentColor,
-      labels: {
-        style: {
-          color: transparentColor,
-        },
-      },
-    });
-  };
-   */
-
-  return options;
-};
-
-export const annotations = (locale: string): Highcharts.AnnotationsOptions => {
-  return {
-    id: 'minmax',
-    zIndex: 2,
-    labels: [
-      {
-        point: 'max',
-        shape: 'rect',
-        distance: 5,
-        align: 'center',
-        verticalAlign: 'top',
-        backgroundColor: ColorHelper.getThemeColorRgbString('tertiary'),
-        // Using a function instead of a lamdba-expression because of a reference to this.
-        formatter: function() {
-          return formatNumber(this.y, locale, '1.1-1');
-        },
-      },
-      {
-        point: 'min',
-        shape: 'rect',
-        distance: -28,
-        align: 'center',
-        verticalAlign: 'bottom',
-        backgroundColor: ColorHelper.getThemeColorRgbString('tertiary'),
-        // Using a function instead of a lamdba-expression because of a reference to this.
-        formatter: function() {
-          return formatNumber(this.y, locale, '1.1-1');
-        },
-      },
-    ],
-    labelOptions: {
-      y: 0,
-      allowOverlap: true,
-    },
-  };
-};
-
-const defaultOptions = (locale: string) => {
-  return {
-    chart: {
-      zoomType: 'x',
-      type: 'StockChart',
-      spacingTop: 30,
-      //spacingRight: 55,
-    },
-    navigator: {
-      enabled: false,
-    },
-    rangeSelector: {
-      enabled: false,
-    },
-    scrollbar: {
-      enabled: false,
-    },
-    credits: {
-      enabled: false,
-    },
-    title: {
-      text: '',
-    },
-    subtitle: {
-      text: '',
-    },
-    xAxis: {
-      ordinal: true,
-      type: 'datetime',
-      lineWidth: 0.5,
-      opposite: false,
-      labels: {
-        format: '{value:%Y-%b-%e %l:%M %p }',
-      },
-    },
-    yAxis: {
-      opposite: false,
-      title: {
-        text: '',
-      },
-      /* Doesn't work before upgrade.
-        labels: {
-          x: 0,
-          y: 10,
-          align: 'right',
-        },
-         */
-    },
-    annotations: [annotations(locale)],
-    legend: {
-      enabled: false,
-    },
-    tooltip: {
-      crosshairs: {
-        width: 1,
-        zIndex: 2,
-      },
-      shadow: false,
-      borderWidth: 0,
-    },
-    plotOptions: {
-      area: {
-        marker: {
-          lineWidth: 16,
-          radius: 7,
-        },
-        lineWidth: 2,
-        states: {
-          hover: {
-            lineWidth: 2,
-          },
-        },
-        events: {},
-        threshold: null,
-      },
-      series: {
-        marker: {
-          zIndex: 100,
-          enabledThreshold: 50,
-        },
-      },
-    },
-    series: [
-      {
-        type: 'area',
-        data: [],
-      },
-    ],
-  };
-};
diff --git a/libs/designsystem/src/lib/components/stock-chart-deprecated/stock-chart-deprecated.component.scss b/libs/designsystem/src/lib/components/stock-chart-deprecated/stock-chart-deprecated.component.scss
deleted file mode 100644
index 5d4e87f30f..0000000000
--- a/libs/designsystem/src/lib/components/stock-chart-deprecated/stock-chart-deprecated.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-:host {
-  display: block;
-}
diff --git a/libs/designsystem/src/lib/components/stock-chart-deprecated/stock-chart-deprecated.component.spec.ts b/libs/designsystem/src/lib/components/stock-chart-deprecated/stock-chart-deprecated.component.spec.ts
deleted file mode 100644
index f53f8c0ff0..0000000000
--- a/libs/designsystem/src/lib/components/stock-chart-deprecated/stock-chart-deprecated.component.spec.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { stockChartDeprecatedOptions } from './options/stock-chart-deprecated-options';
-import { StockChartDeprecatedComponent } from './stock-chart-deprecated.component';
-
-describe('StockChartDeprecatedComponent', () => {
-  let component: StockChartDeprecatedComponent;
-  let fixture: ComponentFixture;
-
-  const expectedDefaultHeight = 300;
-
-  beforeEach(
-    waitForAsync(() => {
-      TestBed.configureTestingModule({
-        declarations: [StockChartDeprecatedComponent],
-      }).compileComponents();
-    })
-  );
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(StockChartDeprecatedComponent);
-    component = fixture.componentInstance;
-    component.options = stockChartDeprecatedOptions('da', expectedDefaultHeight);
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should have correct default height input', () => {
-    expect(component.height).toBe(expectedDefaultHeight);
-  });
-});
diff --git a/libs/designsystem/src/lib/components/stock-chart-deprecated/stock-chart-deprecated.component.ts b/libs/designsystem/src/lib/components/stock-chart-deprecated/stock-chart-deprecated.component.ts
deleted file mode 100644
index 78e0e41f90..0000000000
--- a/libs/designsystem/src/lib/components/stock-chart-deprecated/stock-chart-deprecated.component.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { Component, ElementRef, Inject, Input, LOCALE_ID } from '@angular/core';
-import { Options } from 'highcharts';
-import * as Highcharts from 'highcharts/highstock';
-import AnnotationsModule from 'highcharts/modules/annotations';
-
-import {
-  annotations,
-  StockChartDeprecatedDataPoint,
-} from './options/stock-chart-deprecated-options';
-
-// @ts-ignore
-AnnotationsModule(Highcharts);
-
-@Component({
-  selector: 'kirby-stock-chart-deprecated',
-  template: '',
-  styleUrls: ['./stock-chart-deprecated.component.scss'],
-})
-export class StockChartDeprecatedComponent {
-  chartContainer: ElementRef;
-  private _data: StockChartDeprecatedDataPoint[];
-  @Input() set data(val: StockChartDeprecatedDataPoint[]) {
-    this.onDataChanges(val);
-  }
-  get data() {
-    return this._data;
-  }
-  private _options: Options;
-  @Input() set options(val: Options) {
-    this.onOptionsChanges(val);
-  }
-  get options() {
-    return this._options;
-  }
-  private _height = 300;
-  @Input() set height(height: number) {
-    this._height = height;
-    if (this.chart) {
-      this.chart.setSize(null, height);
-    }
-  }
-  get height() {
-    return this._height;
-  }
-  @Input() description = '';
-  @Input() showDataLabels = true;
-
-  chart: Highcharts.Chart;
-
-  constructor(hostElement: ElementRef, @Inject(LOCALE_ID) private locale: string) {
-    this.chartContainer = hostElement;
-  }
-
-  onOptionsChanges(options: Options) {
-    this._options = options;
-    this.chart = Highcharts.stockChart(this.chartContainer.nativeElement, this._options);
-  }
-
-  onDataChanges(data: StockChartDeprecatedDataPoint[]) {
-    this._data = data;
-
-    if (this.chart != null) {
-      // First delete all points in the previous series.
-      this.chart.update(
-        {
-          series: [],
-        },
-        false,
-        true
-      );
-      // Remove the annotations.
-      this.chart.removeAnnotation('minmax');
-      // Then update the chart with new series data.
-      this.chart.update(
-        {
-          series: [
-            {
-              type: 'area',
-              data: data,
-            },
-          ],
-        },
-        false,
-        true
-      );
-      // Add the new annotations.
-      this.chart.addAnnotation(annotations(this.locale), false);
-      // And finally redraw the graph with all the changes.
-      this.chart.redraw();
-    }
-  }
-}
diff --git a/libs/designsystem/src/lib/kirby.module.ts b/libs/designsystem/src/lib/kirby.module.ts
index 7c463a9d50..5e3b9a01d8 100644
--- a/libs/designsystem/src/lib/kirby.module.ts
+++ b/libs/designsystem/src/lib/kirby.module.ts
@@ -12,7 +12,6 @@ import { CalendarComponent } from './components/calendar/calendar.component';
 import { CardFooterComponent } from './components/card/card-footer/card-footer.component';
 import { CardHeaderComponent } from './components/card/card-header/card-header.component';
 import { CardComponent } from './components/card/card.component';
-import { ChartDeprecatedComponent } from './components/chart-deprecated/chart-deprecated.component';
 import { ChartModule } from './components/chart/chart.module';
 import { CheckboxComponent } from './components/checkbox/checkbox.component';
 import { ChipComponent } from './components/chip/chip.component';
@@ -64,7 +63,6 @@ import { ResizeObserverService } from './components/shared/resize-observer/resiz
 import { SlideButtonComponent } from './components/slide-button/slide-button.component';
 import { SlideDirective, SlidesComponent } from './components/slides/slides.component';
 import { SpinnerModule } from './components/spinner/spinner.module';
-import { StockChartDeprecatedComponent } from './components/stock-chart-deprecated/stock-chart-deprecated.component';
 import { TabsModule } from './components/tabs/tabs.module';
 import { ToastController } from './components/toast/services/toast.controller';
 import { ToastHelper } from './components/toast/services/toast.helper';
@@ -82,8 +80,6 @@ const exportedDeclarations = [
   CardHeaderComponent,
   CardFooterComponent,
   ButtonComponent,
-  ChartDeprecatedComponent,
-  StockChartDeprecatedComponent,
   GridComponent,
   ComponentLoaderDirective,
   AvatarComponent,
diff --git a/libs/designsystem/testing-base/src/lib/components/mock.chart-deprecated.component.ts b/libs/designsystem/testing-base/src/lib/components/mock.chart-deprecated.component.ts
deleted file mode 100644
index eadfe415fd..0000000000
--- a/libs/designsystem/testing-base/src/lib/components/mock.chart-deprecated.component.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Component, forwardRef, Input } from '@angular/core';
-import { Options, XAxisBreaksOptions } from 'highcharts';
-
-import { ChartDeprecatedComponent, ChartDeprecatedType } from '@kirbydesign/designsystem';
-
-// #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
-@Component({
-  selector: 'kirby-chart-deprecated',
-  template: '',
-  providers: [
-    {
-      provide: ChartDeprecatedComponent,
-      useExisting: forwardRef(() => MockChartDeprecatedComponent),
-    },
-  ],
-})
-export class MockChartDeprecatedComponent {
-  @Input() data: [];
-  @Input() categories: string[];
-  @Input() breaks: Array;
-  @Input() height: number;
-  @Input() type: ChartDeprecatedType;
-  @Input() description: string;
-  @Input() showDataLabels: boolean;
-  @Input() options: Options;
-}
-
-// #endregion
diff --git a/libs/designsystem/testing-base/src/lib/mock-components.ts b/libs/designsystem/testing-base/src/lib/mock-components.ts
index 6cfa21cd44..bab454cb67 100644
--- a/libs/designsystem/testing-base/src/lib/mock-components.ts
+++ b/libs/designsystem/testing-base/src/lib/mock-components.ts
@@ -9,7 +9,6 @@ import { MockCalendarComponent } from './components/mock.calendar.component';
 import { MockCardFooterComponent } from './components/mock.card-footer.component';
 import { MockCardHeaderComponent } from './components/mock.card-header.component';
 import { MockCardComponent } from './components/mock.card.component';
-import { MockChartDeprecatedComponent } from './components/mock.chart-deprecated.component';
 import { MockChartComponent } from './components/mock.chart.component';
 import { MockCheckboxComponent } from './components/mock.checkbox.component';
 import { MockChipComponent } from './components/mock.chip.component';
@@ -74,7 +73,6 @@ export const MOCK_COMPONENTS = [
   MockCardHeaderComponent,
   MockCardComponent,
   MockChartComponent,
-  MockChartDeprecatedComponent,
   MockCheckboxComponent,
   MockChipComponent,
   MockDividerComponent,
diff --git a/package-lock.json b/package-lock.json
index 5fa1bcbf42..62e6f7a213 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10607,11 +10607,6 @@
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
       "dev": true
     },
-    "highcharts": {
-      "version": "8.0.4",
-      "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-8.0.4.tgz",
-      "integrity": "sha512-RD86/w7VNwuY96c2Pv16dtZujJ4vg5viiVjbFF/TCrvFpmtQRzBIECG90ww0JtiK6+6TKlwCYf0an+kgQshnRw=="
-    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
diff --git a/package.json b/package.json
index c1846e2248..91c3b9aaaf 100644
--- a/package.json
+++ b/package.json
@@ -107,7 +107,6 @@
     "date-fns": "2.21.1",
     "date-fns-tz": "1.1.4",
     "firebase": "8.3.1",
-    "highcharts": "8.0.4",
     "include-media": "^1.4.10",
     "inputmask": "^5.0.5",
     "prismjs": "1.27.0",
diff --git a/readme.md b/readme.md
index ebad1d1f64..dbf79ab570 100644
--- a/readme.md
+++ b/readme.md
@@ -330,10 +330,6 @@ Finally, add the following to `index.html` :
 
 _**Please note:** If you don't want the additional http request for the polyfill loader, you can copy the contents of `node_modules/@kirbydesign/designsystem/polyfills/resize-observer-polyfill-loader.js` into a `script` tag in `index.html` instead_
 
-## Chart Components
-
-The Kirby chart components use Highcharts. Note that this is a licensed product.
-
 [angular]: https://angular.io
 [jasmine]: https://jasmine.github.io/
 [jest]: https://jestjs.io/

From c3ddca619ebf5f8f17f6821328ef02a59918188f Mon Sep 17 00:00:00 2001
From: Michael T 
Date: Fri, 4 Mar 2022 14:17:33 +0100
Subject: [PATCH 13/59] Add subtitle to page-title (#2030)

* Added subtitle concept to page component

* Remove realtion-bank example

* Update libs/designsystem/src/lib/components/page/page.component.spec.ts

Co-authored-by: Mads Buchmann Frederiksen 

* Update libs/designsystem/src/lib/components/page/page.component.spec.ts

Co-authored-by: Mads Buchmann Frederiksen 

* Update libs/designsystem/src/lib/components/page/page.component.spec.ts

Co-authored-by: Mads Buchmann Frederiksen 

* Update libs/designsystem/src/lib/components/page/page.component.spec.ts

Co-authored-by: Mads Buchmann Frederiksen 

* Update libs/designsystem/src/lib/components/page/page.component.spec.ts

Co-authored-by: Mads Buchmann Frederiksen 

* Update apps/cookbook/src/app/showcase/page-showcase/page-showcase.component.ts

Co-authored-by: Mads Buchmann Frederiksen 

* Update apps/cookbook/src/app/examples/page-example/advanced/page-advanced-example.component.ts

Co-authored-by: Mads Buchmann Frederiksen 

* Correct Inpection Findings

Co-authored-by: Michael Troelsen 
Co-authored-by: Mads Buchmann Frederiksen 
---
 .../page-advanced-example.component.ts        | 15 +++--
 .../page-custom-title-example.component.ts    | 31 ++++-----
 ...ent-and-toolbar-title-example.component.ts |  1 +
 .../fit-heading-example.component.ts          |  6 +-
 .../simple/page-simple-example.component.ts   |  2 +-
 .../page-showcase.component.html              | 47 ++++++++-----
 .../page-showcase/page-showcase.component.ts  | 18 +++--
 libs/core/src/scss/base/_typography.scss      |  2 +-
 .../src/lib/components/page/index.ts          |  1 +
 .../lib/components/page/page.component.html   | 29 +++++---
 .../lib/components/page/page.component.scss   | 36 +++++-----
 .../components/page/page.component.spec.ts    | 67 ++++++++++++++++++-
 .../src/lib/components/page/page.component.ts | 15 ++++-
 .../src/lib/components/page/page.module.ts    |  3 +
 .../src/lib/components/mock.page.component.ts | 13 ++++
 .../testing-base/src/lib/mock-components.ts   |  2 +
 16 files changed, 215 insertions(+), 73 deletions(-)

diff --git a/apps/cookbook/src/app/examples/page-example/advanced/page-advanced-example.component.ts b/apps/cookbook/src/app/examples/page-example/advanced/page-advanced-example.component.ts
index 2e23278ca1..0226fb6110 100644
--- a/apps/cookbook/src/app/examples/page-example/advanced/page-advanced-example.component.ts
+++ b/apps/cookbook/src/app/examples/page-example/advanced/page-advanced-example.component.ts
@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 
-import { ActionSheetItem, ActionSheetConfig } from '@kirbydesign/designsystem';
+import { ActionSheetConfig, ActionSheetItem } from '@kirbydesign/designsystem';
 import { ToastConfig, ToastController } from '@kirbydesign/designsystem';
 import { ModalController } from '@kirbydesign/designsystem';
 
@@ -14,7 +14,11 @@ const config = {
     
    
       
     
    
-    
+  
+
+  
+  
    
+Custom subtitle with a long long long long name
   
    
 
   
@@ -22,10 +26,11 @@ const config = {
   
 
   
-    Custom Title with a very long name
+    Custom Title with a very long name
   
-  
-    Custom subtitle explaining something
+
+  
+    Custom subtitle of custom title with a very long name
   
   
   
diff --git a/apps/cookbook/src/app/examples/page-example/advanced/page-custom-title-example.component.ts b/apps/cookbook/src/app/examples/page-example/advanced/page-custom-title-example.component.ts
index db6cc38dd5..e2c0674a7d 100644
--- a/apps/cookbook/src/app/examples/page-example/advanced/page-custom-title-example.component.ts
+++ b/apps/cookbook/src/app/examples/page-example/advanced/page-custom-title-example.component.ts
@@ -11,31 +11,28 @@ const config = {
 
   
   
    
-    
-  
    
-
-  
-    
-  
-
-  
     
    
       
    
         Custom Titles with very long names that span multiple lines will be truncated
       
    
       
     
    
-      
+  
 
-  
-    
    
-      
    
-        Custom Titles with very long names that span multiple lines will be truncated
-      
    
-      
+  
+  
    
+    
    
+      Custom subtitles with very long names that span multiple lines will wrap.
     
    
-  
-  
+  
    
+
+  
    
+    
    
+      Custom Titles with very long names that span multiple lines will be truncated
+    
    
+    
+  
    
+
   
   
     
    
               
-                
    
-                  1
-                
    
+                
    1
    
                   
             
           
@@ -24,9 +22,7 @@ 
    Heading level 2
    
                 
    Heading level 2
    
               
               
-                
    
-                  2
-                
    
+                
    2
    
                   
             
           
@@ -36,9 +32,7 @@ 
    Heading level 2
    
                 
    Heading level 2
    
               
               
-                
    
-                  3
-                
    
+                
    3
    
                   
             
           
@@ -48,9 +42,7 @@ 
    Heading level 2
    
                 
    Heading level 2
    
               
               
-                
    
-                  4
-                
    
+                
    4
    
                   
             
           
@@ -132,9 +124,7 @@ 
    Heading level 2
    
     
    
       
    
         
    
-          
    
-            max-width + gutter + safe area
-          
    
+          
    max-width + gutter + safe area
    
           .safe-area-inline > .max-width-container.gutter
         
    
       
    
diff --git a/apps/cookbook/src/app/examples/grid-layout-example/grid-layout-multiple-containers-example/grid-layout-multiple-containers-example.component.html b/apps/cookbook/src/app/examples/grid-layout-example/grid-layout-multiple-containers-example/grid-layout-multiple-containers-example.component.html
index e36ad14a24..0bd1cb1a02 100644
--- a/apps/cookbook/src/app/examples/grid-layout-example/grid-layout-multiple-containers-example/grid-layout-multiple-containers-example.component.html
+++ b/apps/cookbook/src/app/examples/grid-layout-example/grid-layout-multiple-containers-example/grid-layout-multiple-containers-example.component.html
@@ -3,27 +3,19 @@ 
    Grid Layout - Multiple Grid Containers
    
   
    
     
    
       
    Heading level 2
    
-      
-        1
-      
+       1 
     
    
     
    
       
    Heading level 2
    
-      
-        2
-      
+       2 
     
    
     
    
       
    Heading level 2
    
-      
-        3
-      
+       3 
     
    
     
    
       
    Heading level 2
    
-      
-        4
-      
+       4 
     
    
   
    
   
    
diff --git a/apps/cookbook/src/app/examples/grid-layout-example/grid-layout-single-container-example/grid-layout-single-container-example.component.html b/apps/cookbook/src/app/examples/grid-layout-example/grid-layout-single-container-example/grid-layout-single-container-example.component.html
index 843a7cfdda..86479b6172 100644
--- a/apps/cookbook/src/app/examples/grid-layout-example/grid-layout-single-container-example/grid-layout-single-container-example.component.html
+++ b/apps/cookbook/src/app/examples/grid-layout-example/grid-layout-single-container-example/grid-layout-single-container-example.component.html
@@ -5,27 +5,19 @@ 
    Grid Layout - Single Grid Container
    
     
    
     
    
       
    Heading level 2
    
-      
-        1
-      
+       1 
     
    
     
    
       
    Heading level 2
    
-      
-        2
-      
+       2 
     
    
     
    
       
    Heading level 2
    
-      
-        3
-      
+       3 
     
    
     
    
       
    Heading level 2
    
-      
-        4
-      
+       4 
     
    
     
    
       
diff --git a/apps/cookbook/src/app/examples/icon-example/icon-example.component.scss b/apps/cookbook/src/app/examples/icon-example/icon-example.component.scss
index d72863b9c3..c9837aabe2 100644
--- a/apps/cookbook/src/app/examples/icon-example/icon-example.component.scss
+++ b/apps/cookbook/src/app/examples/icon-example/icon-example.component.scss
@@ -29,7 +29,7 @@ h2 {
   display: block;
   max-width: 112px;
   font-size: 12px;
-  color: rgba(0, 0, 0, 0.6);
+  color: rgb(0 0 0 / 60%);
   white-space: nowrap;
 }
 
diff --git a/apps/cookbook/src/app/examples/list-example/examples/colored-items.ts b/apps/cookbook/src/app/examples/list-example/examples/colored-items.ts
index 2af41020de..dc0902bcc8 100644
--- a/apps/cookbook/src/app/examples/list-example/examples/colored-items.ts
+++ b/apps/cookbook/src/app/examples/list-example/examples/colored-items.ts
@@ -25,9 +25,7 @@ export const ListColoredItemsExampleTemplate = `
-      
-        ${ListColoredItemsExampleTemplate}
-      
+       ${ListColoredItemsExampleTemplate} 
     
   `,
 })
diff --git a/apps/cookbook/src/app/examples/list-example/examples/dividers.ts b/apps/cookbook/src/app/examples/list-example/examples/dividers.ts
index b607f41f78..d888a1db7e 100644
--- a/apps/cookbook/src/app/examples/list-example/examples/dividers.ts
+++ b/apps/cookbook/src/app/examples/list-example/examples/dividers.ts
@@ -14,9 +14,7 @@ export const ListWithDividersExampleTemplate = `
-      
-        ${ListWithDividersExampleTemplate}
-      
+       ${ListWithDividersExampleTemplate} 
     
   `,
 })
diff --git a/apps/cookbook/src/app/examples/list-example/examples/header-and-footer.ts b/apps/cookbook/src/app/examples/list-example/examples/header-and-footer.ts
index 9193f3c9c8..9a67f4949c 100644
--- a/apps/cookbook/src/app/examples/list-example/examples/header-and-footer.ts
+++ b/apps/cookbook/src/app/examples/list-example/examples/header-and-footer.ts
@@ -33,9 +33,7 @@ export const ListWithHeaderAndFooterExampleTemplate = `
-      
-        ${ListWithHeaderAndFooterExampleTemplate}
-      
+       ${ListWithHeaderAndFooterExampleTemplate} 
     
   `,
   styles: ['p { margin: 0; }', '.footer { text-align: center; width: 100%; }'],
diff --git a/apps/cookbook/src/app/examples/list-example/examples/items.ts b/apps/cookbook/src/app/examples/list-example/examples/items.ts
index 7e471ed503..24e1f244be 100644
--- a/apps/cookbook/src/app/examples/list-example/examples/items.ts
+++ b/apps/cookbook/src/app/examples/list-example/examples/items.ts
@@ -14,9 +14,7 @@ export const ListItemsExampleTemplate = `
   selector: 'list-items-example',
   template: `
     
-      
-        ${ListItemsExampleTemplate}
-      
+       ${ListItemsExampleTemplate} 
     
   `,
 })
diff --git a/apps/cookbook/src/app/examples/list-example/examples/sections-and-colored-items.ts b/apps/cookbook/src/app/examples/list-example/examples/sections-and-colored-items.ts
index 042dd8b931..1f97c939c1 100644
--- a/apps/cookbook/src/app/examples/list-example/examples/sections-and-colored-items.ts
+++ b/apps/cookbook/src/app/examples/list-example/examples/sections-and-colored-items.ts
@@ -29,9 +29,7 @@ export const ListWithSectionsAndColoredItemsExampleTemplate = `
-      
-        ${ListWithSectionsAndColoredItemsExampleTemplate}
-      
+       ${ListWithSectionsAndColoredItemsExampleTemplate} 
     
   `,
 })
diff --git a/apps/cookbook/src/app/examples/list-example/examples/sections.ts b/apps/cookbook/src/app/examples/list-example/examples/sections.ts
index e907afc33d..39157451b6 100644
--- a/apps/cookbook/src/app/examples/list-example/examples/sections.ts
+++ b/apps/cookbook/src/app/examples/list-example/examples/sections.ts
@@ -28,9 +28,7 @@ export const ListWithSectionsExampleTemplate = `
-      
-        ${ListWithSectionsExampleTemplate}
-      
+       ${ListWithSectionsExampleTemplate} 
     
   `,
 })
diff --git a/apps/cookbook/src/app/examples/list-example/examples/selectable-items.ts b/apps/cookbook/src/app/examples/list-example/examples/selectable-items.ts
index 3359864191..0abc9472f6 100644
--- a/apps/cookbook/src/app/examples/list-example/examples/selectable-items.ts
+++ b/apps/cookbook/src/app/examples/list-example/examples/selectable-items.ts
@@ -14,9 +14,7 @@ export const ListSelectableItemsExampleTemplate = `
-      
-        ${ListSelectableItemsExampleTemplate}
-      
+       ${ListSelectableItemsExampleTemplate} 
     
   `,
 })
diff --git a/apps/cookbook/src/app/examples/list-experimental-example/list-experimental-example.component.scss b/apps/cookbook/src/app/examples/list-experimental-example/list-experimental-example.component.scss
index ec6016e003..c8481531ba 100644
--- a/apps/cookbook/src/app/examples/list-experimental-example/list-experimental-example.component.scss
+++ b/apps/cookbook/src/app/examples/list-experimental-example/list-experimental-example.component.scss
@@ -1,4 +1,4 @@
-@use "sass:map";
+@use 'sass:map';
 @use '~@kirbydesign/core/src/scss/utils';
 @use '~@kirbydesign/core/src/scss/base/list';
 
diff --git a/apps/cookbook/src/app/examples/list-load-on-demand-example/list-load-on-demand-example.component.scss b/apps/cookbook/src/app/examples/list-load-on-demand-example/list-load-on-demand-example.component.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/apps/cookbook/src/app/examples/list-load-on-demand-example/list-load-on-demand-example.component.ts b/apps/cookbook/src/app/examples/list-load-on-demand-example/list-load-on-demand-example.component.ts
index 47f8f15927..7e2e7eedf8 100644
--- a/apps/cookbook/src/app/examples/list-load-on-demand-example/list-load-on-demand-example.component.ts
+++ b/apps/cookbook/src/app/examples/list-load-on-demand-example/list-load-on-demand-example.component.ts
@@ -22,12 +22,9 @@ export const ListLoadOnDemandExampleTemplate = `
   selector: 'cookbook-list-load-on-demand-example',
   template: `
     
-      
-        ${ListLoadOnDemandExampleTemplate}
-      
+       ${ListLoadOnDemandExampleTemplate} 
     
   `,
-  styleUrls: ['./list-load-on-demand-example.component.scss'],
 })
 export class ListLoadOnDemandExampleComponent extends BaseListComponent {
   private itemCount: number = 0;
diff --git a/apps/cookbook/src/app/examples/list-no-shape-example/list-no-shape-example.component.scss b/apps/cookbook/src/app/examples/list-no-shape-example/list-no-shape-example.component.scss
index 9d2a1b35eb..f03369fb5f 100644
--- a/apps/cookbook/src/app/examples/list-no-shape-example/list-no-shape-example.component.scss
+++ b/apps/cookbook/src/app/examples/list-no-shape-example/list-no-shape-example.component.scss
@@ -1,4 +1,4 @@
-@use "sass:map";
+@use 'sass:map';
 @use '~@kirbydesign/core/src/scss/utils';
 
 kirby-card {
diff --git a/apps/cookbook/src/app/examples/list-swipe-example/list-swipe-example.component.scss b/apps/cookbook/src/app/examples/list-swipe-example/list-swipe-example.component.scss
index e8836a6221..0813b3915b 100644
--- a/apps/cookbook/src/app/examples/list-swipe-example/list-swipe-example.component.scss
+++ b/apps/cookbook/src/app/examples/list-swipe-example/list-swipe-example.component.scss
@@ -19,6 +19,7 @@ $dot-margin: utils.size('xxxs');
   &.success {
     background: var(--kirby-success);
   }
+
   &.warning {
     background: var(--kirby-warning);
   }
diff --git a/apps/cookbook/src/app/examples/modal-example/embedded-modal-example/embedded-modal-example.component.html b/apps/cookbook/src/app/examples/modal-example/embedded-modal-example/embedded-modal-example.component.html
index 168ee349b8..c4cf24e48b 100644
--- a/apps/cookbook/src/app/examples/modal-example/embedded-modal-example/embedded-modal-example.component.html
+++ b/apps/cookbook/src/app/examples/modal-example/embedded-modal-example/embedded-modal-example.component.html
@@ -48,15 +48,9 @@ 
    Component properties (injected from parent component):
    
         class="nested-modal-configuration"
       >
         
    Open nested:
    
-        
-        
-        
+        
+        
+        
         
diff --git a/apps/cookbook/src/app/examples/modal-example/modal-example.component.scss b/apps/cookbook/src/app/examples/modal-example/modal-example.component.scss
index 6705a8adf6..2861d801fe 100644
--- a/apps/cookbook/src/app/examples/modal-example/modal-example.component.scss
+++ b/apps/cookbook/src/app/examples/modal-example/modal-example.component.scss
@@ -1,5 +1,5 @@
 @use '../examples.shared';
-@use "~@kirbydesign/core/src/scss/utils";
+@use '~@kirbydesign/core/src/scss/utils';
 
 h1 {
   text-align: center;
diff --git a/apps/cookbook/src/app/examples/modal-example/modal-route-example/modal-route-page1-example.component.ts b/apps/cookbook/src/app/examples/modal-example/modal-route-example/modal-route-page1-example.component.ts
index 00583fb382..86a5821ee6 100644
--- a/apps/cookbook/src/app/examples/modal-example/modal-route-example/modal-route-page1-example.component.ts
+++ b/apps/cookbook/src/app/examples/modal-example/modal-route-example/modal-route-page1-example.component.ts
@@ -6,10 +6,10 @@ import { ActivatedRoute } from '@angular/router';
   template: `
     Modal Page 1/2
     
    The standard Lorem Ipsum passage, used since the 1500s
    
-    QueryParams:
-      
    {{ queryParams$ | async | json }}
    
+    
+      QueryParams:
+      
    {{ queryParams$ | async | json }}
    
+        
     
    
       "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
       labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
diff --git a/apps/cookbook/src/app/examples/progress-circle-example/progress-circle-example.component.scss b/apps/cookbook/src/app/examples/progress-circle-example/progress-circle-example.component.scss
index 8c3c30ab2d..7fcc7ad126 100644
--- a/apps/cookbook/src/app/examples/progress-circle-example/progress-circle-example.component.scss
+++ b/apps/cookbook/src/app/examples/progress-circle-example/progress-circle-example.component.scss
@@ -14,6 +14,7 @@
 
   h2 {
     margin-bottom: utils.size('xxxs');
+
     &:not(first-of-type) {
       margin-top: utils.size('l');
     }
diff --git a/apps/cookbook/src/app/examples/range-example/range-example.component.scss b/apps/cookbook/src/app/examples/range-example/range-example.component.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/apps/cookbook/src/app/examples/range-example/range-example.component.ts b/apps/cookbook/src/app/examples/range-example/range-example.component.ts
index c49f666b1e..040686a390 100644
--- a/apps/cookbook/src/app/examples/range-example/range-example.component.ts
+++ b/apps/cookbook/src/app/examples/range-example/range-example.component.ts
@@ -3,6 +3,5 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'cookbook-range-example',
   templateUrl: './range-example.component.html',
-  styleUrls: ['./range-example.component.scss'],
 })
 export class RangeExampleComponent {}
diff --git a/apps/cookbook/src/app/examples/reorder-list-example/reorder-list-example.component.scss b/apps/cookbook/src/app/examples/reorder-list-example/reorder-list-example.component.scss
index 98dfb5125b..8d026b8470 100644
--- a/apps/cookbook/src/app/examples/reorder-list-example/reorder-list-example.component.scss
+++ b/apps/cookbook/src/app/examples/reorder-list-example/reorder-list-example.component.scss
@@ -4,6 +4,7 @@
   padding: 0 utils.size('s') utils.size('xxs') utils.size('xxs');
   display: flex;
   justify-content: flex-end;
+
   span {
     padding-left: utils.size('s');
   }
diff --git a/apps/cookbook/src/app/examples/section-header-example/section-header-example.component.scss b/apps/cookbook/src/app/examples/section-header-example/section-header-example.component.scss
index 35bc84864c..a318464f7b 100644
--- a/apps/cookbook/src/app/examples/section-header-example/section-header-example.component.scss
+++ b/apps/cookbook/src/app/examples/section-header-example/section-header-example.component.scss
@@ -10,6 +10,7 @@
     &:not(:first-child) {
       margin-top: utils.size('l');
     }
+
     border-bottom: 1px dotted utils.get-color('medium');
   }
 }
diff --git a/apps/cookbook/src/app/examples/slide-button-example/slide-button-example.component.scss b/apps/cookbook/src/app/examples/slide-button-example/slide-button-example.component.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/apps/cookbook/src/app/examples/slide-button-example/slide-button-example.component.ts b/apps/cookbook/src/app/examples/slide-button-example/slide-button-example.component.ts
index e2ff83fb37..822681c302 100644
--- a/apps/cookbook/src/app/examples/slide-button-example/slide-button-example.component.ts
+++ b/apps/cookbook/src/app/examples/slide-button-example/slide-button-example.component.ts
@@ -5,7 +5,6 @@ import { AlertConfig, ModalController } from '@kirbydesign/designsystem';
 @Component({
   selector: 'cookbook-slide-button-example',
   templateUrl: './slide-button-example.component.html',
-  styleUrls: ['./slide-button-example.component.scss'],
 })
 export class SlideButtonExampleComponent {
   constructor(private modalController: ModalController) {}
diff --git a/apps/cookbook/src/app/examples/slides-example/slides-example.component.html b/apps/cookbook/src/app/examples/slides-example/slides-example.component.html
index bd82dc36a5..b632daa0be 100644
--- a/apps/cookbook/src/app/examples/slides-example/slides-example.component.html
+++ b/apps/cookbook/src/app/examples/slides-example/slides-example.component.html
@@ -11,6 +11,6 @@
   >
 
 
    
-
    
+
    
   
 
    
diff --git a/apps/cookbook/src/app/examples/spinner-example/spinner-example.component.scss b/apps/cookbook/src/app/examples/spinner-example/spinner-example.component.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/apps/cookbook/src/app/examples/spinner-example/spinner-example.component.ts b/apps/cookbook/src/app/examples/spinner-example/spinner-example.component.ts
index ba61f5344b..cf5ed10391 100644
--- a/apps/cookbook/src/app/examples/spinner-example/spinner-example.component.ts
+++ b/apps/cookbook/src/app/examples/spinner-example/spinner-example.component.ts
@@ -3,7 +3,6 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'cookbook-spinner-example',
   templateUrl: './spinner-example.component.html',
-  styleUrls: ['./spinner-example.component.scss'],
 })
 export class SpinnerExampleComponent implements OnInit {
   constructor() {}
diff --git a/apps/cookbook/src/app/examples/stock-chart-deprecated-example/stock-chart-deprecated-example.component.scss b/apps/cookbook/src/app/examples/stock-chart-deprecated-example/stock-chart-deprecated-example.component.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/apps/cookbook/src/app/examples/styling-html-lists-example/styling-html-lists-example.component.html b/apps/cookbook/src/app/examples/styling-html-lists-example/styling-html-lists-example.component.html
index 001d4ff8af..b152734e57 100644
--- a/apps/cookbook/src/app/examples/styling-html-lists-example/styling-html-lists-example.component.html
+++ b/apps/cookbook/src/app/examples/styling-html-lists-example/styling-html-lists-example.component.html
@@ -28,9 +28,7 @@ 
    Ordered list
    
         
  • Sed egestas lorem pharetra
    • 
         
  • Pellentesque habitant morbi
    • 
       
-      
    
-        Ipsum, vero est? Iusto ipsum cumque nemo aut exercitationem!
-      
    
+      
    Ipsum, vero est? Iusto ipsum cumque nemo aut exercitationem!
    
     
     
       
    Nested list (unordered)
    
@@ -140,9 +138,7 @@ 
    Text overflow (normal wrap)
    
           ac, consectetur adipiscing elit. Fusce iaculis ante ac diam.
         
       

-      

-        Quidem magnam ad architecto quod modi explicabo reiciendis omnis perferendis.
-      

+      
Quidem magnam ad architecto quod modi explicabo reiciendis omnis perferendis.

     
   
 
diff --git a/apps/cookbook/src/app/examples/toggle-button-example/toggle-button-example.component.scss b/apps/cookbook/src/app/examples/toggle-button-example/toggle-button-example.component.scss
index c56822ecef..ab7e072282 100644
--- a/apps/cookbook/src/app/examples/toggle-button-example/toggle-button-example.component.scss
+++ b/apps/cookbook/src/app/examples/toggle-button-example/toggle-button-example.component.scss
@@ -1,5 +1,5 @@
 @use '../examples.shared';
-@use "~@kirbydesign/core/src/scss/utils";
+@use '~@kirbydesign/core/src/scss/utils';
 
 kirby-toggle-button {
   margin-right: utils.size('m');
diff --git a/apps/cookbook/src/app/examples/virtual-scroll-example/virtual-scroll-list-example/virtual-scroll-list-example.component.html b/apps/cookbook/src/app/examples/virtual-scroll-example/virtual-scroll-list-example/virtual-scroll-list-example.component.html
index 9f9eea6153..cbde24391b 100644
--- a/apps/cookbook/src/app/examples/virtual-scroll-example/virtual-scroll-list-example/virtual-scroll-list-example.component.html
+++ b/apps/cookbook/src/app/examples/virtual-scroll-example/virtual-scroll-list-example/virtual-scroll-list-example.component.html
@@ -4,7 +4,7 @@
       minBufferPx="840"
       maxBufferPx="1120"
       itemSize="56"
-      style="height: 720px;"
+      style="height: 720px"
     >
       
         
diff --git a/apps/cookbook/src/app/guides/grid-layout/grid-layout-extended/grid-layout-extended.component.ts b/apps/cookbook/src/app/guides/grid-layout/grid-layout-extended/grid-layout-extended.component.ts
index 485fbe3651..3f712ceeab 100644
--- a/apps/cookbook/src/app/guides/grid-layout/grid-layout-extended/grid-layout-extended.component.ts
+++ b/apps/cookbook/src/app/guides/grid-layout/grid-layout-extended/grid-layout-extended.component.ts
@@ -5,8 +5,10 @@ import { Component } from '@angular/core';
   templateUrl: './grid-layout-extended.component.html',
 })
 export class GridLayoutExtendedComponent {
-  exampleHtml: string = require('!raw-loader!../../../examples/grid-layout-example/grid-layout-extended-example/grid-layout-extended-example.component.html')
-    .default;
-  exampleCss: string = require('!raw-loader!../../../examples/grid-layout-example/grid-layout-extended-example/grid-layout-extended-example.component.scss')
-    .default;
+  exampleHtml: string =
+    require('!raw-loader!../../../examples/grid-layout-example/grid-layout-extended-example/grid-layout-extended-example.component.html')
+      .default;
+  exampleCss: string =
+    require('!raw-loader!../../../examples/grid-layout-example/grid-layout-extended-example/grid-layout-extended-example.component.scss')
+      .default;
 }
diff --git a/apps/cookbook/src/app/guides/grid-layout/grid-layout-multiple-containers/grid-layout-multiple-containers.component.ts b/apps/cookbook/src/app/guides/grid-layout/grid-layout-multiple-containers/grid-layout-multiple-containers.component.ts
index 993a55e508..82623a870c 100644
--- a/apps/cookbook/src/app/guides/grid-layout/grid-layout-multiple-containers/grid-layout-multiple-containers.component.ts
+++ b/apps/cookbook/src/app/guides/grid-layout/grid-layout-multiple-containers/grid-layout-multiple-containers.component.ts
@@ -5,8 +5,10 @@ import { Component } from '@angular/core';
   templateUrl: './grid-layout-multiple-containers.component.html',
 })
 export class GridLayoutMultipleContainersComponent {
-  exampleHtml: string = require('!raw-loader!../../../examples/grid-layout-example/grid-layout-multiple-containers-example/grid-layout-multiple-containers-example.component.html')
-    .default;
-  exampleCss: string = require('!raw-loader!../../../examples/grid-layout-example/grid-layout-multiple-containers-example/grid-layout-multiple-containers-example.component.scss')
-    .default;
+  exampleHtml: string =
+    require('!raw-loader!../../../examples/grid-layout-example/grid-layout-multiple-containers-example/grid-layout-multiple-containers-example.component.html')
+      .default;
+  exampleCss: string =
+    require('!raw-loader!../../../examples/grid-layout-example/grid-layout-multiple-containers-example/grid-layout-multiple-containers-example.component.scss')
+      .default;
 }
diff --git a/apps/cookbook/src/app/guides/grid-layout/grid-layout-single-container/grid-layout-single-container.component.ts b/apps/cookbook/src/app/guides/grid-layout/grid-layout-single-container/grid-layout-single-container.component.ts
index 551380b72f..bde4b5ae76 100644
--- a/apps/cookbook/src/app/guides/grid-layout/grid-layout-single-container/grid-layout-single-container.component.ts
+++ b/apps/cookbook/src/app/guides/grid-layout/grid-layout-single-container/grid-layout-single-container.component.ts
@@ -5,8 +5,10 @@ import { Component } from '@angular/core';
   templateUrl: './grid-layout-single-container.component.html',
 })
 export class GridLayoutSingleContainerComponent {
-  exampleHtml: string = require('!raw-loader!../../../examples/grid-layout-example/grid-layout-single-container-example/grid-layout-single-container-example.component.html')
-    .default;
-  exampleCss: string = require('!raw-loader!../../../examples/grid-layout-example/grid-layout-single-container-example/grid-layout-single-container-example.component.scss')
-    .default;
+  exampleHtml: string =
+    require('!raw-loader!../../../examples/grid-layout-example/grid-layout-single-container-example/grid-layout-single-container-example.component.html')
+      .default;
+  exampleCss: string =
+    require('!raw-loader!../../../examples/grid-layout-example/grid-layout-single-container-example/grid-layout-single-container-example.component.scss')
+      .default;
 }
diff --git a/apps/cookbook/src/app/guides/virtual-scroll/virtual-scroll-list/virtual-scroll-list.component.ts b/apps/cookbook/src/app/guides/virtual-scroll/virtual-scroll-list/virtual-scroll-list.component.ts
index 5a212e8744..5a866f9f95 100644
--- a/apps/cookbook/src/app/guides/virtual-scroll/virtual-scroll-list/virtual-scroll-list.component.ts
+++ b/apps/cookbook/src/app/guides/virtual-scroll/virtual-scroll-list/virtual-scroll-list.component.ts
@@ -5,6 +5,7 @@ import { Component } from '@angular/core';
   templateUrl: './virtual-scroll-list.component.html',
 })
 export class VirtualScrollListComponent {
-  exampleHtml: string = require('!raw-loader!../../../examples/virtual-scroll-example/virtual-scroll-list-example/virtual-scroll-list-example.component.html')
-    .default;
+  exampleHtml: string =
+    require('!raw-loader!../../../examples/virtual-scroll-example/virtual-scroll-list-example/virtual-scroll-list-example.component.html')
+      .default;
 }
diff --git a/apps/cookbook/src/app/home/home.component.scss b/apps/cookbook/src/app/home/home.component.scss
index 497488c970..1189ef77f9 100644
--- a/apps/cookbook/src/app/home/home.component.scss
+++ b/apps/cookbook/src/app/home/home.component.scss
@@ -1,5 +1,7 @@
 @use '~@kirbydesign/core/src/scss/utils';
 
+/* stylelint-disable declaration-block-no-redundant-longhand-properties */
+
 $header-height-mobile: utils.size('xxxl');
 $header-height-desktop: 2 * utils.size('xxl');
 $footer-height: 3 * utils.size('xxl');
diff --git a/apps/cookbook/src/app/intro/intro.component.html b/apps/cookbook/src/app/intro/intro.component.html
index bd7456e0e0..053a2b519c 100644
--- a/apps/cookbook/src/app/intro/intro.component.html
+++ b/apps/cookbook/src/app/intro/intro.component.html
@@ -28,9 +28,5 @@ 
This is Kirby Design System™

   between designers and developers is streamlined, and helps teams to quickly build beautiful
   screens.
 

-

-  We are on a constant journey of learning and Kirby is steadily evolving day by day.
-

-

-  Thanks for your interest — have fun building!
-

+
We are on a constant journey of learning and Kirby is steadily evolving day by day.

+
Thanks for your interest — have fun building!

diff --git a/apps/cookbook/src/app/iphone/iphone.component.html b/apps/cookbook/src/app/iphone/iphone.component.html
index 6187576f55..98b35a223f 100644
--- a/apps/cookbook/src/app/iphone/iphone.component.html
+++ b/apps/cookbook/src/app/iphone/iphone.component.html
@@ -1,7 +1,7 @@
 

   

     

-      
+      
         
       
-      
+      
         
     

   

-  
-    Pop out
-  
+   Pop out 
 

diff --git a/apps/cookbook/src/app/iphone/iphone.component.scss b/apps/cookbook/src/app/iphone/iphone.component.scss
index 381773cc6a..8f156682f2 100644
--- a/apps/cookbook/src/app/iphone/iphone.component.scss
+++ b/apps/cookbook/src/app/iphone/iphone.component.scss
@@ -1,5 +1,6 @@
 @use '~@kirbydesign/core/src/scss/utils';
 
+/* stylelint-disable custom-property-pattern */
 .container {
   text-align: center;
 }
@@ -21,7 +22,7 @@
 
 .docs-demo-device > figure {
   border-radius: 32px;
-  box-shadow: 0 0 0 14px #090a0d, 0 0 0 17px #9fa3a8, 0 0 34px 17px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 0 14px #090a0d, 0 0 0 17px #9fa3a8, 0 0 34px 17px rgb(0 0 0 / 20%);
   height: 0;
   margin: 0;
   max-width: 320px;
@@ -62,7 +63,7 @@
   font-weight: 700;
   letter-spacing: 0.1em;
   line-height: 24px;
-  margin: 0px 3px;
+  margin: 0 3px;
   padding: 0 9px;
   text-transform: uppercase;
   transition: 200ms background-color ease, 200ms color ease;
@@ -96,7 +97,7 @@
   }
 }
 
-.docs-demo-device__ios-notch {
+.docs-demo-device-ios-notch {
   display: none;
   fill: #090a0d;
   left: 50%;
@@ -107,8 +108,8 @@
   z-index: 2;
 }
 
-.docs-demo-device.ios figure:after {
-  background-color: rgba(0, 0, 0, 0.5);
+.docs-demo-device.ios figure::after {
+  background-color: rgb(0 0 0 / 50%);
   border-radius: 2px;
   bottom: 6px;
   content: '';
@@ -121,8 +122,8 @@
   z-index: 1;
 }
 
-.docs-demo-device.ios .docs-demo-device__ios-notch,
-.docs-demo-device.ios figure:after {
+.docs-demo-device.ios .docs-demo-device-ios-notch,
+.docs-demo-device.ios figure::after {
   display: block;
 }
 
@@ -130,11 +131,11 @@
   border-radius: 20px;
 }
 
-.docs-demo-device__md-bar {
+.docs-demo-device-md-bar {
   display: none;
 }
 
-.docs-demo-device.md .docs-demo-device__md-bar {
+.docs-demo-device.md .docs-demo-device-md-bar {
   display: block;
   fill: #090a0d;
   opacity: 0.1;
diff --git a/apps/cookbook/src/app/page/footer/footer.component.scss b/apps/cookbook/src/app/page/footer/footer.component.scss
index 7d003a8844..3d433112e3 100644
--- a/apps/cookbook/src/app/page/footer/footer.component.scss
+++ b/apps/cookbook/src/app/page/footer/footer.component.scss
@@ -5,6 +5,7 @@
   background-color: utils.get-color('white');
   text-align: center;
   padding: utils.size('xl') 0;
+
   p {
     margin: 0;
   }
diff --git a/apps/cookbook/src/app/page/header/header.component.html b/apps/cookbook/src/app/page/header/header.component.html
index 8731b45608..f40e09d53b 100644
--- a/apps/cookbook/src/app/page/header/header.component.html
+++ b/apps/cookbook/src/app/page/header/header.component.html
@@ -9,7 +9,7 @@
         x="0px"
         y="0px"
         viewBox="0 0 132.3 158.8"
-        style="enable-background:new 0 0 132.3 158.8;"
+        style="enable-background: new 0 0 132.3 158.8"
         xml:space="preserve"
       >