Release version 6.0.0

.gitignore

@@ -37,6 +37,7 @@
 !.vscode/extensions.json
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

MIGRATION.md

@@ -0,0 +1,123 @@
+# Migrations
+
+This document provides information about breaking changes and their migrations for major versions of Kirby Design System.
+
+- [Version 6](#version-6)
+  - [Platform Support](#platform-support)
+  - [Components](#components)
+    - [Alert](#alert)
+    - [Chart](#chart)
+    - [Icons](#icons)
+    - [List](#list)
+    - [Modal](#modal)
+    - [Page](#page)
+    - [Segmented Control](#segmented-control)
+    - [Toast](#toast)
+  - [Additional Performance notice](#additional-performance-notice)
+
+## Version 6
+
+### Platform Support
+
+From v6 and onwards, Kirby no longer supports Angular projects using the Legacy View Engine. Applications already using Ivy should see no differences other than Kirby not needing an additional compile-step on their side via `ngcc`.
+
+### Styles
+
+`global-styles` and `utils` are now the only modules that can be loaded from `~@kirbydesign/designsystem/scss`.
+This means that modules like `~@kirbydesign/designsystem/scss/theme/colors` is no longer available as a standalone module, and should instead be changed to `~@kirbydesign/designsystem/scss/utils`,
+which forwards all mixins and functions exposed by Kirby.
+
+### Components
+
+#### Alert
+
+`okBtnText` and `cancelBtnText` of `AlertConfig` are removed, and the existing `okBtn` and `cancelBtn` should be used instead, as a direct replacement for these.
+
+#### Chart
+
+The `kirby-chart` input property `dataLabels` has been removed. Use `labels` (with a similar API) instead.
+
+#### Icons
+
+Use of `IconSettings` is deprecated, use `IconRegistryService` instead, as per the [icon documentation](https://cookbook.kirby.design/#/home/showcase/icon), as follows:
+
+```
+import { IconRegistryService } from '@kirbydesign/designsystem';
+
+const customIcons = [
+    {
+      name: 'customIconName',
+      svg: '[PATH_TO_SVG_FILE]',
+    },
+    ...
+];
+
+@NgModule({ ... } )
+export class MyModule {
+  constructor(iconRegistryService: IconRegistryService) {
+    iconRegistryService.addIcons(customIcons);
+  }
+}
+```
+
+#### List
+
+`*kirbyListItem` and `*kirbyListFlexItem` is replaced in favor of the `*kirbyListItemTemplate` directive.
+
+#### Modal
+
+The `dim` field of the `ModalConfig` interface has been removed.
+
+The `title` field of the `ModalConfig` interface has been removed. Instead, you should include a `<kirby-page-title>` element inside the embedded component markup with the title of your modal.
+
+```
+<kirby-page-title>My Modal Title</kirby-page-title>
+
+<p>Some content of the embedded component</p>
+```
+
+See the [modal documentation](https://cookbook.kirby.design/#/home/showcase/modal) for more examples of this.
+
+#### Page
+
+The current spacing below custom titles (title elements with the `*kirbyPageTitle` directive) has been removed.
+In cases where a text block immediately following the title heading within a custom title element has lost its intended spacing, the text should be moved to the new custom subtitle element (`*kirbyPageSubtitle`).
+
+#### Segmented Control
+
+It is no longer an option to mark a `SegmentItem` as `checked` when provided in the items input of `SegmentedControl`.
+Use `selectedIndex` or `value` on `<kirby-segmented-control>` instead.
+
+#### Toast
+
+The `danger` variant of `MessageType` has been removed. Use Kirby Alert for critical events instead.
+
+### Additional Performance notice
+
+To improve the general performance of Kirby components, `OnPush` change detection has been enabled on a lot of the simpler components.
+
+This is not a breaking change, as it has only been carried out for components that should be robust to this change because they have immutable inputs. Even though it has been tested thoroughly there might be edge cases or unforeseen consequences related to this change so please be aware that the following components now utilise OnPush change detection:
+
+- `kirby-app`
+- `kirby-button`
+- `kirby-card-header`
+- `kirby-card-footer`
+- `kirby-chip`
+- `kirby-divider`
+- `kirby-empty-state`
+- `kirby-fab-sheet`
+- `kirby-icon`
+- `kirby-item-component`
+- `kirby-list-experimental`
+- `kirby-list-header`
+- `kirby-list-section-header`
+- `kirby-loading-overlay`
+- `kirby-alert`
+- `kirby-modal-footer`
+- `kirby-page-footer`
+- `kirby-radio`
+- `kirby-range`
+- `kirby-router-outlet`
+- `kirby-section-header`
+- `kirby-spinner`
+- `kirby-toggle`

angular.json

@@ -2,47 +2,6 @@
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "projects": {
-    "designsystem": {
-      "projectType": "library",
-      "root": "libs/designsystem",
-      "sourceRoot": "libs/designsystem/src",
-      "prefix": "kirby",
-      "architect": {
-        "build": {
-          "builder": "@nrwl/angular:package",
-          "options": {
-            "tsConfig": "libs/designsystem/tsconfig.lib.json",
-            "project": "libs/designsystem/ng-package.json",
-            "updateBuildableProjectDepsInPackageJson": false
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "libs/designsystem/tsconfig.lib.json",
-              "libs/designsystem/tsconfig.spec.json"
-            ],
-            "exclude": ["**/node_modules/**", "!libs/designsystem/**/*"]
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "libs/designsystem/src/test.ts",
-            "tsConfig": "libs/designsystem/tsconfig.spec.json",
-            "karmaConfig": "libs/designsystem/karma.conf.js",
-            "styles": ["libs/designsystem/src/lib/testing/styles.scss"]
-          },
-          "outputs": ["coverage/libs/designsystem"]
-        }
-      },
-      "schematics": {
-        "@nrwl/angular:component": {
-          "styleext": "scss"
-        }
-      }
-    },
     "cookbook": {
       "projectType": "application",
       "schematics": {
@@ -72,7 +31,6 @@
             "main": "apps/cookbook/src/main.ts",
             "polyfills": "apps/cookbook/src/polyfills.ts",
             "tsConfig": "apps/cookbook/tsconfig.app.json",
-            "aot": false,
             "assets": [
               "apps/cookbook/src/favicon.ico",
               "apps/cookbook/src/assets",
@@ -96,21 +54,23 @@
             "scripts": []
           },
           "configurations": {
+            "development": {
+              "optimization": false,
+              "aot": false,
+              "buildOptimizer": false,
+              "sourceMap": true,
+              "extractLicenses": false,
+              "namedChunks": true,
+              "vendorChunk": true
+            },
             "production": {
               "fileReplacements": [
                 {
                   "replace": "apps/cookbook/src/environments/environment.ts",
                   "with": "apps/cookbook/src/environments/environment.prod.ts"
                 }
               ],
-              "optimization": true,
               "outputHashing": "all",
-              "sourceMap": false,
-              "namedChunks": false,
-              "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
@@ -129,7 +89,7 @@
         "serve": {
           "builder": "@angular-builders/custom-webpack:dev-server",
           "options": {
-            "browserTarget": "cookbook:build"
+            "browserTarget": "cookbook:build:development"
           },
           "configurations": {
             "production": {
@@ -143,13 +103,6 @@
             "browserTarget": "cookbook:build"
           }
         },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": ["apps/cookbook/tsconfig.app.json", "apps/cookbook/tsconfig.spec.json"],
-            "exclude": ["**/node_modules/**", "!apps/cookbook/**/*"]
-          }
-        },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
@@ -163,48 +116,40 @@
           },
           "outputs": ["coverage/apps/cookbook"]
         }
-      }
+      },
+      "tags": []
     },
-    "cookbook-e2e": {
-      "root": "apps/cookbook-e2e",
-      "sourceRoot": "apps/cookbook-e2e/src",
-      "projectType": "application",
+    "designsystem": {
+      "projectType": "library",
+      "root": "libs/designsystem",
+      "sourceRoot": "libs/designsystem/src",
+      "prefix": "kirby",
       "architect": {
-        "e2e": {
-          "builder": "@nrwl/cypress:cypress",
+        "build": {
+          "builder": "@nrwl/angular:package",
           "options": {
-            "cypressConfig": "apps/cookbook-e2e/cypress.json",
-            "tsConfig": "apps/cookbook-e2e/tsconfig.e2e.json",
-            "devServerTarget": "cookbook:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "cookbook:serve:production"
-            }
+            "tsConfig": "libs/designsystem/tsconfig.lib.json",
+            "project": "libs/designsystem/ng-package.json",
+            "updateBuildableProjectDepsInPackageJson": false
           }
         },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "tsConfig": ["apps/cookbook-e2e/tsconfig.e2e.json"],
-            "exclude": ["**/node_modules/**", "!apps/cookbook-e2e/**/*"]
-          }
+            "main": "libs/designsystem/src/test.ts",
+            "tsConfig": "libs/designsystem/tsconfig.spec.json",
+            "karmaConfig": "libs/designsystem/karma.conf.js",
+            "styles": ["libs/designsystem/src/lib/testing/styles.scss"]
+          },
+          "outputs": ["coverage/libs/designsystem"]
         }
-      }
-    }
-  },
-  "cli": {
-    "defaultCollection": "@nrwl/angular",
-    "analytics": false
-  },
-  "schematics": {
-    "@nrwl/angular:application": {
-      "unitTestRunner": "karma",
-      "e2eTestRunner": "cypress"
-    },
-    "@nrwl/angular:library": {
-      "unitTestRunner": "karma"
+      },
+      "schematics": {
+        "@nrwl/angular:component": {
+          "styleext": "scss"
+        }
+      },
+      "tags": []
     }
-  },
-  "defaultProject": "designsystem"
+  }
 }