@kirbydesign/designsystem 5.1.1 → 5.2.3-beta.0

package/lib/components/avatar/avatar.component.d.ts

@@ -11,7 +11,7 @@ export declare class AvatarComponent {
     shadow: boolean;
     text: string;
     overlay: boolean;
-    size: AvatarSize;
+    size: AvatarSize | `${AvatarSize}`;
     themeColor: NotificationColor | BrandColor | 'medium' | 'white' | 'dark' | 'light' | 'semi-light';
-    get _cssClass(): ("medium" | "success" | "primary" | "secondary" | "tertiary" | "warning" | "danger" | "light" | "dark" | "white" | "semi-light" | AvatarSize)[];
+    get _cssClass(): ("medium" | "success" | "primary" | "secondary" | "tertiary" | "warning" | "danger" | "light" | "dark" | "white" | "semi-light" | "xs" | "sm" | "md" | "lg")[];
 }

package/lib/components/button/button.component.d.ts

@@ -19,13 +19,13 @@ export declare class ButtonComponent implements AfterContentInit {
     get isIconLeft(): boolean;
     private _isIconRight;
     get isIconRight(): boolean;
-    get _cssClass(): ("success" | "warning" | "danger" | ButtonSize)[];
+    get _cssClass(): ("success" | "warning" | "danger" | "sm" | "md" | "lg")[];
     set attentionLevel(level: '1' | '2' | '3' | '4');
     set isDestructive(state: boolean);
     themeColor: NotificationColor;
     expand: 'full' | 'block';
     isFloating: boolean;
-    size: ButtonSize;
+    size: ButtonSize | `${ButtonSize}`;
     icon: IconComponent;
     iconElementRef: ElementRef<HTMLElement>;
     private hasText;

package/lib/components/calendar/calendar.component.d.ts

@@ -18,6 +18,7 @@ export declare class CalendarComponent implements OnInit, AfterViewInit, OnChang
     customLocales: {
         [key: string]: Locale;
     };
+    usePopover: boolean;
     /**
      * Configuration for the year navigator.
      *

package/lib/components/card/card.component.d.ts

@@ -6,6 +6,8 @@ export declare class CardComponent implements OnInit, OnDestroy {
     private renderer;
     title: string;
     subtitle: string;
+    _backgroundImage: string;
+    set backgroundImageUrl(value: string);
     hasPadding: boolean;
     private sizesSortedByBreakpoint;
     set sizes(value: {

package/lib/components/chart/chart-js/configured-chart-js.d.ts

@@ -1,2 +1,3 @@
 import { Chart } from 'chart.js';
+import 'chartjs-adapter-date-fns';
 export { Chart };

package/lib/components/dropdown/dropdown.component.d.ts

@@ -20,8 +20,8 @@ export declare class DropdownComponent implements AfterContentChecked, AfterView
     set selectedIndex(value: number);
     itemTextProperty: string;
     placeholder: string;
-    set popout(direction: HorizontalDirection);
-    get popout(): HorizontalDirection;
+    set popout(direction: HorizontalDirection | `${HorizontalDirection}`);
+    get popout(): HorizontalDirection | `${HorizontalDirection}`;
     attentionLevel: '1' | '2' | '3' | '4';
     readonly attentionLevelOpen = "2";
     expand?: 'block';

package/lib/components/form-field/input/input.component.d.ts

@@ -7,7 +7,7 @@ export declare class InputComponent implements OnChanges {
     private static typeToInputmodeMap;
     kirbyChange: EventEmitter<string>;
     set type(value: string);
-    size: InputSize;
+    size: InputSize | `${InputSize}`;
     /**
      * Removes padding, width, rounded borders and drop-shadow when set to `true`.
      */

package/lib/components/form-field/input-counter/input-counter.component.d.ts

@@ -1,6 +1,6 @@
-import { OnInit, OnDestroy } from '@angular/core';
-import { TextareaComponent } from './../textarea/textarea.component';
+import { OnDestroy, OnInit } from '@angular/core';
 import { InputComponent } from '../input/input.component';
+import { TextareaComponent } from './../textarea/textarea.component';
 export declare class InputCounterComponent implements OnInit, OnDestroy {
     listenTo: InputComponent | TextareaComponent;
     length: number;

package/lib/components/icon/icon.component.d.ts

@@ -11,7 +11,7 @@ export declare class IconComponent implements OnChanges {
     private iconRegistryService;
     defaultIcon: Icon;
     private _icon;
-    size: IconSize;
+    size: IconSize | `${IconSize}`;
     name: string;
     customName: string;
     get icon(): Icon;

package/lib/components/item/item.component.d.ts

@@ -8,6 +8,6 @@ export declare class ItemComponent {
     selected: boolean;
     selectable: boolean;
     reorderable: boolean;
-    size: ItemSize;
+    size: ItemSize | `${ItemSize}`;
     onMouseDown(event: MouseEvent): void;
 }

package/lib/components/popover/popover.component.d.ts

@@ -13,7 +13,7 @@ export declare class PopoverComponent implements AfterViewInit, OnDestroy {
     private zIndex;
     private document;
     wrapperElement: ElementRef<HTMLDivElement>;
-    popout: HorizontalDirection;
+    popout: HorizontalDirection | `${HorizontalDirection}`;
     target: HTMLElement | ElementRef<HTMLElement>;
     willHide: EventEmitter<void>;
     private get targetElement();

package/lib/components/segmented-control/segmented-control.component.d.ts

@@ -10,7 +10,7 @@ export declare class SegmentedControlComponent {
     private iconRegistryService;
     constructor(iconRegistryService: IconRegistryService);
     preventWrapperClick(event: Event): void;
-    mode: SegmentedControlMode;
+    mode: SegmentedControlMode | `${SegmentedControlMode}`;
     get _modeCssClass(): string;
     private _items;
     get items(): SegmentItem[];

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@kirbydesign/designsystem",
-  "version": "5.1.1",
+  "version": "5.2.3-beta.0",
   "dependencies": {
     "@fontsource/roboto": "4.2.1",
     "@ionic/angular": "5.5.2",
-    "@kirbydesign/core": "0.0.24",
+    "@kirbydesign/core": "0.0.25-beta.0",
     "chart.js": "3.3.2",
     "chartjs-adapter-date-fns": "^2.0.0",
     "chartjs-plugin-annotation": "^1.0.2",

package/polyfills/intersection-observer-polyfill-loader.js

@@ -1,14 +1,14 @@
 (function () {
-    // A technique for loading polyfills only when needed. Details here:
-    // https://philipwalton.com/articles/loading-polyfills-only-when-needed/
-    if (polyfillNeeded()) {
-      // Browsers that doesn't support IntersectionObserver must load the polyfills first:
-      var script = document.createElement('script');
-      script.src = 'kirby/polyfills/intersection-observer-polyfill.min.js';
-      document.head.appendChild(script);
-    }
+  // A technique for loading polyfills only when needed. Details here:
+  // https://philipwalton.com/articles/loading-polyfills-only-when-needed/
+  if (polyfillNeeded()) {
+    // Browsers that doesn't support IntersectionObserver must load the polyfills first:
+    var script = document.createElement('script');
+    script.src = 'kirby/polyfills/intersection-observer-polyfill.min.js';
+    document.head.appendChild(script);
+  }
 
-    function polyfillNeeded() {
-        return (typeof IntersectionObserver === 'undefined');
-    }
-  })();
+  function polyfillNeeded() {
+    return typeof IntersectionObserver === 'undefined';
+  }
+})();

package/polyfills/resize-observer-polyfill-loader.js

@@ -1,4 +1,4 @@
-(function() {
+(function () {
   // A technique for loading polyfills only when needed. Details here:
   // https://philipwalton.com/articles/loading-polyfills-only-when-needed/
   if (polyfillNeeded()) {

package/readme.md

@@ -6,7 +6,7 @@
 [![npm](https://img.shields.io/npm/v/@kirbydesign/designsystem.svg)](https://www.npmjs.com/package/@kirbydesign/designsystem)
 [![npm](https://img.shields.io/npm/l/@kirbydesign/designsystem.svg)](https://www.npmjs.com/package/@kirbydesign/designsystem)
 [![npm](https://img.shields.io/npm/dm/@kirbydesign/designsystem.svg)](https://www.npmjs.com/package/@kirbydesign/designsystem)
-[![Build Status](https://travis-ci.org/kirbydesign/designsystem.svg?branch=master)](https://travis-ci.org/kirbydesign/designsystem)
+[![Build Status](https://travis-ci.org/kirbydesign/designsystem.svg?branch=stable)](https://travis-ci.org/kirbydesign/designsystem)
 
 [![GitHub forks](https://img.shields.io/github/forks/kirbydesign/designsystem.svg?style=social&label=Fork)](https://github.com/kirbydesign/designsystem/fork)
 [![GitHub stars](https://img.shields.io/github/stars/kirbydesign/designsystem.svg?style=social&label=Star)](https://github.com/kirbydesign/designsystem/stargazers)
@@ -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)
@@ -83,6 +77,7 @@ In each `.scss` file where you need to access the Sass utility functions from Ki
 ```
 
 #### Generic Print Styles (Optional)
+
 Kirby also provides a generic print stylesheet. It includes the basics. You most likely have to add local print styles specific to your app as well.
 
 Import it into your app, e.g., in `src/styles.scss` or in your local print stylesheet if you have one:

package/scss/_trigger-publish.scss

@@ -0,0 +1 @@
+@forward "~@kirbydesign/core/scss/trigger-publish";

package/scss/_trigger.scss

@@ -0,0 +1 @@
+@forward "~@kirbydesign/core/scss/trigger";

package/scss/awesome-stylesheet.scss

@@ -0,0 +1 @@
+@forward "~@kirbydesign/core/scss/awesome-stylesheet";

package/scss/base/_awesome-partial.scss

@@ -0,0 +1 @@
+@forward "~@kirbydesign/core/scss/base/awesome-partial";

package/scss/base/_index.scss

@@ -0,0 +1 @@
+@forward "~@kirbydesign/core/scss/base";

package/scss/base/_interaction-states.scss

@@ -0,0 +1 @@
+@forward "~@kirbydesign/core/scss/base/interaction-states";

package/scss/base/_link.scss

@@ -0,0 +1 @@
+@forward "~@kirbydesign/core/scss/base/link";

package/scss/base/index.scss

@@ -0,0 +1 @@
+@forward "~@kirbydesign/core/scss/base";

package/scss/interaction-state/_focus.scss

@@ -0,0 +1 @@
+@forward "~@kirbydesign/core/scss/interaction-state/focus";

package/scss/interaction-state/_hover.scss

@@ -0,0 +1 @@
+@forward "~@kirbydesign/core/scss/interaction-state/hover";

package/scss/interaction-state/_index.scss

@@ -0,0 +1 @@
+@forward "~@kirbydesign/core/scss/interaction-state";

package/scss/interaction-state/_layer.scss

@@ -0,0 +1 @@
+@forward "~@kirbydesign/core/scss/interaction-state/layer";

package/scss/interaction-state/_state-layer.scss

@@ -0,0 +1 @@
+@forward "~@kirbydesign/core/scss/interaction-state/state-layer";

package/scss/interaction-state/_utilities.scss

@@ -0,0 +1 @@
+@forward "~@kirbydesign/core/scss/interaction-state/utilities";

package/scss/interaction-state/ionic/_active.scss

@@ -0,0 +1 @@
+@forward "~@kirbydesign/core/scss/interaction-state/ionic/active";

package/scss/interaction-state/ionic/_hover.scss

@@ -0,0 +1 @@
+@forward "~@kirbydesign/core/scss/interaction-state/ionic/hover";

package/scss/interaction-state/ionic/_index.scss

@@ -0,0 +1 @@
+@forward "~@kirbydesign/core/scss/interaction-state/ionic";

package/scss/interaction-states/_hover.scss

@@ -0,0 +1 @@
+@forward "~@kirbydesign/core/scss/interaction-states/hover";

package/scss/interaction-states/_index.scss

@@ -0,0 +1 @@
+@forward "~@kirbydesign/core/scss/interaction-states";

package/scss/opt-out/_index.scss

@@ -0,0 +1 @@
+@forward "~@kirbydesign/core/scss/opt-out";

package/scss/opt-out/_link.scss

@@ -0,0 +1 @@
+@forward "~@kirbydesign/core/scss/opt-out/link";