JSPM – @kirbydesign/designsystem@0.0.51

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 NativeScript and can be used in a standalone Angular project as well as a Angular/NativeScript code-sharing project.

Note

Please note: To enable the code-sharing capabilities of Angular/NativeScript the package contains the uncompiled typescript (.ts), markup (.html/.tns.html) and styling (.scss/.tns.scss) source code. See the Installation section below on how to enable typescript compilation of the package in your project.

Installation
Usage

Installation

Install through NPM:

npm install @kirbydesign/designsystem

Include the Kirby Sass variables in your app:

Web (eg. in src/styles.scss):

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

{N} (eg. in src/_app-variables.scss)::

@import '~@kirbydesign/designsystem/scss/native-common';

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"
  ],
...

NativeScript-Only Components

Some Kirby components only exists as Platform-Specific Components, e.g. NativeScriptDoughnutChartComponent.

To avoid typescript compilation of NativeScript-Only Components in your web project, you need to add the following to your tsconfig.json:

...
  "exclude": [
    ...
    "**/*.tns-only.ts",
    ...
  ],
...

Then, make sure you don't exclude tns-only.ts files in your {N} specific tsconfig.tns.json:

...
  "exclude": [
    "**/*.tns.ts",
    "**/*.android.ts",
    "**/*.ios.ts",
    "**/*.spec.ts"
  ],
...

Finally, for all imports in your {N} specific typescript files (*.tns.ts) you will need to use a path that includes the {N} specific typings definition:

import { NativeScriptDoughnutChartComponent } from '@kirbydesign/designsystem/index.d.tns-only';

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.tns-only.ts" /> Needed for autocompletion and compilation.

Chart Components

The Kirby chart components use Highcharts. Note that this is a licensed product. On iOS and Android the charts are rendered inside a webview. To use charts on iOS and Android devices, you must transfer some files to the device by adding this to your webpack.config.js:

...
  new CopyWebpackPlugin([
  ...
    { from: "../node_modules/@kirbydesign/designsystem/components/chart/chart.webview.html", to: "chart" },
    { from: "../node_modules/@kirbydesign/designsystem/components/chart/css/styles.css", to: "chart" },
    { from: "../node_modules/@kirbydesign/designsystem/node_modules/highcharts/highcharts.js", to: "chart" },
    { from: "../node_modules/@kirbydesign/designsystem/node_modules/nativescript-webview-interface/www/nativescript-webview-interface.js", to: "chart" }
  ]...
...

@kirbydesign/designsystem