JSPM – @kirbydesign/designsystem@0.7.1

Package Exports

@kirbydesign/designsystem

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@kirbydesign/designsystem) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Kirby Design System

About

Kirby Design System is a UX Component library implementing the Kirby Design Philosophy.

Kirby Components are built on top of Angular and can be used in Angular projects.

The Kirby Cookbook, containing samples, status of components etc. can be accessed from https://cookbook.kirby.design.

Note

Please note: The package currently contains the uncompiled typescript (.ts), markup (.html) and styling (.scss) source code. See the Installation section below on how to enable typescript compilation of the package in your project.

Installation
Polyfills
Chart Components

Installation

Install through NPM:

npm install @kirbydesign/designsystem

Sass

Include the Kirby Sass variables in your app:

Eg. in src/styles.scss:

@import '~@kirbydesign/designsystem/scss/web/web-styles';

As devDependencies don't get installed with the package in the target project, you also need to install sass-extract and sass-extract-loader via npm:

npm i sass-extract sass-extract-loader -D

Typescript Configuration

Please note: To enable typescript compilation of the package in your project, you need to add the following to your tsconfig.json:

...
  "include": [
    "./src/**/*",
    "./node_modules/@kirbydesign/designsystem/**/*.ts"
  ],
...

Ionic

The Kirby web components are build on top of Ionic. The @ionic/angular package should automatically be installed as a dependency of Kirby. If not, please execute the following:

npm install @ionic/angular

Icons

Kirby comes bundled with a default set of icons. Make sure the .svg files used by Kirby are copied to your output folder by adding the following to build > options > assets in angular.json:

{
  ...
  "build": {
    "options": {
      "assets": [
        ...
        {
          "glob": "**/*.svg",
          "input": "node_modules/@kirbydesign/designsystem/icons/svg",
          "output": "./assets/kirby/icons/svg"
        },
        ...
      ],
    }
  }
}

Autocompletion

To enable autocompletion (e.g. in VS Code), you need to add the following line to your reference.d.ts:

/// <reference path="./node_modules/@kirbydesign/designsystem/index.d.ts" /> Needed for autocompletion and compilation.

Polyfills

Some features of Kirby requires polyfills to ensure compability across all major browsers (e.g. the ResizeObserverService used by the automagic sizing feature of the Kirby Card component).

To enable the polyfill, you register a polyfill loader that checks whether the polyfill is needed or the feature is already supported by the browser (and can skip requesting the polyfill).
To use the sizing feature of Kirby Card across all major browsers, you must copy additional files from the Kirby package to your output folder.
Add the following to build > options > assets in angular.json:

{
  ...
  "build": {
    "options": {
      "assets": [
        ...
        {
          "glob": "**/*",
          "input": "./node_modules/@kirbydesign/designsystem/polyfills",
          "output": "./kirby/polyfills"
        },
        ...
      ],
    }
  }
}

Finally, add the following to index.html:

<head>
  ...
  <script src="kirby/polyfills/resize-observer-polyfill-loader.min.js"></script>
</head>

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.

@kirbydesign/designsystem