@kirbydesign/designsystem 4.0.9 → 4.0.13

package/lib/components/angular-component-lib/utils.d.ts

@@ -0,0 +1,7 @@
+export declare const proxyInputs: (Cmp: any, inputs: string[]) => void;
+export declare const proxyMethods: (Cmp: any, methods: string[]) => void;
+export declare const proxyOutputs: (instance: any, el: any, events: string[]) => void;
+export declare function ProxyCmp(opts: {
+    inputs?: any;
+    methods?: any;
+}): (cls: any) => any;

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

@@ -1,4 +1,4 @@
-import { BrandColor, NotificationColor } from '../../helpers/color-helper';
+import { BrandColor, NotificationColor } from '@kirbydesign/core';
 export declare enum AvatarSize {
     XS = "xs",
     SM = "sm",

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

@@ -1,5 +1,5 @@
 import { AfterContentInit, ElementRef } from '@angular/core';
-import { NotificationColor } from '../../helpers';
+import { NotificationColor } from '@kirbydesign/core';
 import { IconComponent } from '../icon/icon.component';
 export declare enum ButtonSize {
     SM = "sm",

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

@@ -1,4 +1,4 @@
-import { NotificationColor } from '../../../helpers';
+import { NotificationColor } from '@kirbydesign/core';
 export declare type CardFlagLevel = NotificationColor | 'info' | null;
 export declare class CardHeaderComponent {
     title: string;

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

@@ -16,6 +16,7 @@ export declare class ChartComponent implements AfterViewInit, OnChanges {
     canvasElement: ElementRef<HTMLCanvasElement>;
     constructor(chartJSService: ChartJSService);
     ngAfterViewInit(): void;
+    private whenElementHasHeightAndWidth;
     ngOnChanges(simpleChanges: SimpleChanges): void;
     private renderChart;
     private updateData;

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

@@ -1,5 +1,5 @@
 export declare class FlagComponent {
     size: 'xs' | 'sm' | 'md';
     themeColor: 'success' | 'warning' | 'danger' | 'semi-light' | 'transparent';
-    get _cssClass(): ("transparent" | "success" | "md" | "warning" | "danger" | "semi-light" | "xs" | "sm")[];
+    get _cssClass(): ("transparent" | "success" | "warning" | "danger" | "semi-light" | "xs" | "sm" | "md")[];
 }

package/lib/components/index.d.ts

@@ -1,6 +1,5 @@
 export * from './app';
 export { AvatarComponent, AvatarSize } from './avatar/avatar.component';
-export { BadgeComponent } from './badge/badge.component';
 export { ButtonComponent, ButtonSize } from './button/button.component';
 export * from './card';
 export * from './chart-deprecated';

package/lib/components/list/directives/list-item-color.directive.d.ts

@@ -1,5 +1,5 @@
 import { OnChanges } from '@angular/core';
-import { ThemeColor } from '../../../helpers/theme-color.type';
+import { ThemeColor } from '@kirbydesign/core';
 export declare class ListItemColorDirective implements OnChanges {
     kirbyListItemColor: (item: any) => ThemeColor;
     item: any;

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

@@ -1,7 +1,7 @@
 import { AfterViewInit, EventEmitter, OnInit, TemplateRef } from '@angular/core';
 import { IonItemSliding } from '@ionic/angular';
+import { ThemeColor } from '@kirbydesign/core';
 import { PlatformService } from '../../../helpers/platform.service';
-import { ThemeColor } from '../../../helpers/theme-color.type';
 import { ListSwipeAction, ListSwipeDirection, ListSwipeEnd } from '../list-swipe-action.type';
 export declare type BoundaryClass = 'first' | 'last';
 export declare class ListItemComponent implements OnInit, AfterViewInit {

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

@@ -1,6 +1,6 @@
 import { AfterViewInit, EventEmitter, OnChanges, OnInit, TemplateRef, TrackByFunction } from '@angular/core';
 import { IDatasource } from 'ngx-ui-scroll';
-import { ThemeColor } from '../../helpers/theme-color.type';
+import { ThemeColor } from '@kirbydesign/core';
 import { ItemComponent } from '../item/item.component';
 import { InfiniteScrollDirective } from './directives/infinite-scroll.directive';
 import { ListHelper } from './helpers/list-helper';

package/lib/components/progress-circle/progress-circle.component.d.ts

@@ -22,7 +22,7 @@ export declare class ProgressCircleComponent implements AfterViewInit, OnDestroy
     value: number;
     size: 'sm' | 'md' | 'lg';
     themeColor: 'success' | 'warning' | 'danger';
-    get _cssSize(): "md" | "sm" | "lg";
+    get _cssSize(): "sm" | "md" | "lg";
     private hasElementBeenVisible?;
     private observer;
     constructor(elementRef: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef);

package/lib/components/radio/radio-group/radio-group.component.d.ts

@@ -14,6 +14,7 @@ export declare class RadioGroupComponent implements AfterContentInit, ControlVal
     set selectedIndex(value: number);
     get value(): string | any;
     set value(value: string | any);
+    private get hasValue();
     /**
      * Emitted when an option is selected
      */

package/lib/components/segmented-control/segment-item.d.ts

@@ -1,4 +1,4 @@
-import { ThemeColor } from '../../helpers/theme-color.type';
+import { ThemeColor } from '@kirbydesign/core';
 export interface SegmentItem {
     id: string;
     text: string;
@@ -7,7 +7,8 @@ export interface SegmentItem {
      */
     checked?: boolean;
     badge?: {
-        content: string;
+        content?: string;
+        icon?: string;
         description?: string;
         themeColor: ThemeColor;
     };

package/lib/components/web-component-proxies.component.d.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectorRef, ElementRef, NgZone } from '@angular/core';
+import { Components } from '@kirbydesign/core';
+export declare interface KirbyBadge extends Components.KirbyBadge {
+}
+export declare class KirbyBadge {
+    protected z: NgZone;
+    protected el: HTMLElement;
+    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
+}

package/lib/custom-elements-initializer.d.ts

@@ -0,0 +1,7 @@
+export declare const appInitialize: (doc: Document) => () => void;
+export declare function customElementsInitializer(): {
+    provide: import("@angular/core").InjectionToken<(() => void)[]>;
+    useFactory: (doc: Document) => () => void;
+    deps: import("@angular/core").InjectionToken<Document>[];
+    multi: boolean;
+};

package/lib/directives/theme-color/theme-color.directive.d.ts

@@ -1,4 +1,4 @@
-import { ThemeColor } from '../../helpers/theme-color.type';
+import { ThemeColor } from '@kirbydesign/core';
 export declare class ThemeColorDirective {
     private _isDefault;
     get isDefault(): boolean;

package/lib/helpers/color-helper.d.ts

@@ -1,37 +1 @@
-import { styles } from './color-helper.styles';
-export declare class ColorHelper {
-    static readonly brandColors: KirbyColor[];
-    static readonly notificationColors: KirbyColor[];
-    static readonly systemColors: KirbyColor[];
-    static readonly textColors: KirbyColor[];
-    static readonly mainColors: Color[];
-    private static getMainColors;
-    private static mapToKirbyColorArray;
-    static getBackgroundColor(): string;
-    static getColorBrightness(name: string): string;
-    static getThemeColorRgbString(name: string, opacity?: number): string;
-    static getThemeTextColorRgbString(name: string): string;
-    static getThemeColorHexString(name: string): string;
-    static getThemeTextColorHexString(name: string): string;
-    static getTransparentColorRgbString(): string;
-    static colorStringToRgbString(color: string): any;
-    private static hexToRGB;
-    private static getColor;
-    private static getTextColor;
-    private static opacityThreshold;
-}
-export interface Color {
-    name: string;
-    /**
-     * The color value in either hex (#ff0000), rgb(255,0,0) or rgba(255,0,0,1)
-     */
-    value: string;
-}
-export interface KirbyColor extends Color {
-    base: string;
-    tint: Color;
-    shade: Color;
-    contrast: Color;
-}
-export declare type NotificationColor = keyof typeof styles.notificationColors;
-export declare type BrandColor = keyof typeof styles.brandColors;
+export { ColorHelper, Color, BrandColor, KirbyColor, NotificationColor } from '@kirbydesign/core';

package/lib/helpers/design-token-helper.d.ts

@@ -1,42 +1 @@
-import { styles } from './design-token-helper.styles';
-import { ThemeColor } from './theme-color.type';
-export declare class DesignTokenHelper {
-    static readonly breakpoints: {
-        small: string;
-        medium: string;
-        large: string;
-        xlarge: string;
-        xxlarge: string;
-    };
-    static readonly softKeyboardTransitionEnter: string;
-    static readonly softKeyboardTransitionLeave: string;
-    static readonly modalDefaultHeight: string;
-    static readonly drawerDefaultHeight: string;
-    static getColor(name: ThemeColorExtended, variant?: ThemeColorVariant): ThemeColorDefinition;
-    static getTextColor(name: ThemeColorExtended, variant?: ThemeColorVariant): ThemeColorDefinition;
-    static size(key: keyof typeof styles.sizes): string;
-    static fontSize(key: keyof typeof styles.fontSizes): string;
-    static iconFontSize(key: keyof typeof styles.iconFontSizes): string;
-    static fontWeight(key: keyof typeof styles.fontWeight): string;
-    static lineHeight(key: keyof typeof styles.lineHeight): string;
-    static backgroundColor(): string;
-    static borderRadius(): string;
-    static borderRadiusRound(): string;
-    static alertMaxWidth(): string;
-    static compactModalMaxWidth(): string;
-    static dropdownItemHeight(): string;
-    static avatarSize(key: keyof typeof styles.avatarSizes): string;
-    static fatFingerSize(): string;
-    static getElevation(z: keyof typeof styles.elevations): string;
-    static itemHeight(key: keyof typeof styles.itemHeights): string;
-    static zLayer(key: keyof typeof styles.zLayers): string;
-}
-export declare type ThemeColorExtended = ThemeColor | 'black' | 'semi-light' | 'semi-dark' | 'background-color';
-export declare type ThemeColorVariant = 'tint' | 'shade' | 'contrast';
-export interface ThemeColorDefinition {
-    name: ThemeColorExtended;
-    variant?: ThemeColorVariant;
-    fullname: string;
-    value?: string;
-    hex?: string;
-}
+export { DesignTokenHelper, ThemeColorDefinition, ThemeColorExtended, ThemeColorVariant, } from '@kirbydesign/core';

package/lib/helpers/index.d.ts

@@ -1,5 +1,5 @@
 export * from './color-helper';
 export * from './design-token-helper';
+export * from './string-helper';
 export * from './theme-color.type';
 export * from './platform.service';
-export * from './string-helper';

package/lib/helpers/string-helper.d.ts

@@ -1,4 +1 @@
-export declare const kebabToCamelCase: (kebabString: string) => string;
-export declare const camelToKebabCase: (camelString: string) => string;
-export declare const kebabToTitleCase: (kebabString: string) => string;
-export declare const capitalizeFirstLetter: (string: string) => string;
+export { kebabToCamelCase, kebabToTitleCase, camelToKebabCase, capitalizeFirstLetter, } from '@kirbydesign/core';

package/lib/helpers/theme-color.type.d.ts

@@ -1 +1 @@
-export declare type ThemeColor = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark' | 'white';
+export { ThemeColor } from '@kirbydesign/core';

package/lib/index.d.ts

@@ -3,4 +3,5 @@ export * from './components';
 export * from './directives';
 export * from './helpers';
 export * from './scss/scss-helper';
+export { KirbyBadge as BadgeComponent } from './components/web-component-proxies.component';
 export { KirbyModule } from './kirby.module';

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@kirbydesign/designsystem",
-  "version": "4.0.9",
+  "version": "4.0.13",
   "dependencies": {
     "chart.js": "3.3.2",
     "chartjs-plugin-annotation": "1.0.2",
     "@ionic/angular": "5.5.2",
+    "@kirbydesign/core": "0.0.10",
     "date-fns": "2.21.1",
     "date-fns-tz": "1.1.4",
     "highcharts": "8.0.4",
@@ -29,7 +30,7 @@
   "typings": "kirbydesign-designsystem.d.ts",
   "metadata": "kirbydesign-designsystem.metadata.json",
   "sideEffects": false,
-  "description": "Kirby Design Components",
+  "description": "Kirby Design Angular Components. This library provides Angular wrappers for the @kirbydesign/core package, for smoother integration into Angular projects.",
   "repository": {
     "type": "git",
     "url": "https://github.com/kirbydesign/designsystem.git"

package/scss/base/_variables.scss

@@ -70,6 +70,7 @@ $icon-font-sizes: (
 $z-layers: (
   default: 1,
   segmentBadge: 2,
+  avatarBadge: 2,
   dropdown: 800,
   popover: 850,
   modal-overlay: 900,

package/testing-base/kirbydesign-designsystem-testing-base.d.ts

@@ -3,57 +3,56 @@
  */
 export * from './public_api';
 export { MockAccordionItemComponent as ɵb } from './lib/components/mock.accordion-item.component';
-export { MockActionSheetComponent as ɵbh } from './lib/components/mock.action-sheet.component';
+export { MockActionSheetComponent as ɵbg } from './lib/components/mock.action-sheet.component';
 export { MockAppComponent as ɵc } from './lib/components/mock.app.component';
 export { MockAvatarComponent as ɵd } from './lib/components/mock.avatar.component';
-export { MockBadgeComponent as ɵe } from './lib/components/mock.badge.component';
-export { MockButtonComponent as ɵf } from './lib/components/mock.button.component';
-export { MockCalendarComponent as ɵg } from './lib/components/mock.calendar.component';
-export { MockCardFooterComponent as ɵh } from './lib/components/mock.card-footer.component';
-export { MockCardHeaderComponent as ɵi } from './lib/components/mock.card-header.component';
-export { MockCardComponent as ɵj } from './lib/components/mock.card.component';
-export { MockChartDeprecatedComponent as ɵl } from './lib/components/mock.chart-deprecated.component';
-export { MockChartComponent as ɵk } from './lib/components/mock.chart.component';
-export { MockCheckboxComponent as ɵm } from './lib/components/mock.checkbox.component';
-export { MockChipComponent as ɵn } from './lib/components/mock.chip.component';
-export { MockDividerComponent as ɵo } from './lib/components/mock.divider.component';
-export { MockDropdownComponent as ɵp } from './lib/components/mock.dropdown.component';
-export { MockEmptyStateComponent as ɵq } from './lib/components/mock.empty-state.component';
-export { MockFabSheetComponent as ɵr } from './lib/components/mock.fab-sheet.component';
-export { MockFlagComponent as ɵs } from './lib/components/mock.flag.component';
-export { MockFormFieldMessageComponent as ɵt } from './lib/components/mock.form-field-message.component';
-export { MockFormFieldComponent as ɵu } from './lib/components/mock.form-field.component';
-export { MockGridComponent as ɵy } from './lib/components/mock.grid.component';
-export { MockIconComponent as ɵz } from './lib/components/mock.icon.component';
-export { MockInputCounterComponent as ɵw } from './lib/components/mock.input-counter.component';
-export { MockInputComponent as ɵv } from './lib/components/mock.input.component';
-export { MockItemComponent as ɵba } from './lib/components/mock.item.component';
-export { MockLabelComponent as ɵbb } from './lib/components/mock.label.component';
-export { MockListHeaderComponent as ɵbc } from './lib/components/mock.list-header.component';
-export { MockListItemComponent as ɵbd } from './lib/components/mock.list-item.component';
-export { MockListSectionHeaderComponent as ɵbe } from './lib/components/mock.list-section-header.component';
-export { MockListComponent as ɵbf } from './lib/components/mock.list.component';
-export { MockLoadingOverlayComponent as ɵbg } from './lib/components/mock.loading-overlay.component';
-export { MockModalFooterComponent as ɵbi } from './lib/components/mock.modal-footer.component';
-export { MockPageFooterComponent as ɵbj } from './lib/components/mock.page-footer.component';
-export { MockPageActionsComponent as ɵbr, MockPageActionsDirective as ɵbm, MockPageComponent as ɵbs, MockPageContentComponent as ɵbq, MockPageContentDirective as ɵbn, MockPageProgressComponent as ɵbo, MockPageTitleComponent as ɵbp, MockPageTitleDirective as ɵbk, MockPageToolbarTitleDirective as ɵbl } from './lib/components/mock.page.component';
-export { MockPopoverComponent as ɵbt } from './lib/components/mock.popover.component';
-export { MockProgressCircleComponent as ɵbu } from './lib/components/mock.progress-circle.component';
-export { MockRadioGroupComponent as ɵbv } from './lib/components/mock.radio-group.component';
-export { MockRadioComponent as ɵbw } from './lib/components/mock.radio.component';
-export { MockRangeComponent as ɵbx } from './lib/components/mock.range.component';
-export { MockReorderListComponent as ɵby } from './lib/components/mock.reorder-list.component';
-export { MockRouterOutletComponent as ɵbz } from './lib/components/mock.router-outlet.component';
-export { MockSegmentedControlComponent as ɵca } from './lib/components/mock.segmented-control.component';
-export { MockSlideButtonComponent as ɵcb } from './lib/components/mock.slide-button.component';
-export { MockSpinnerComponent as ɵcc } from './lib/components/mock.spinner.component';
-export { MockTabButtonComponent as ɵcd } from './lib/components/mock.tab-button.component';
-export { MockTabsComponent as ɵce } from './lib/components/mock.tabs.component';
-export { MockTextareaComponent as ɵx } from './lib/components/mock.textarea.component';
-export { MockToggleButtonComponent as ɵcg } from './lib/components/mock.toggle-button.component';
-export { MockToggleComponent as ɵcf } from './lib/components/mock.toggle.component';
-export { MockAccordionDirective as ɵck } from './lib/directives/mock.accordion.directive';
-export { MockFitHeadingDirective as ɵcj } from './lib/directives/mock.fit-heading.directive';
-export { MockThemeColorDirective as ɵci } from './lib/directives/mock.theme-color.directive';
+export { MockButtonComponent as ɵe } from './lib/components/mock.button.component';
+export { MockCalendarComponent as ɵf } from './lib/components/mock.calendar.component';
+export { MockCardFooterComponent as ɵg } from './lib/components/mock.card-footer.component';
+export { MockCardHeaderComponent as ɵh } from './lib/components/mock.card-header.component';
+export { MockCardComponent as ɵi } from './lib/components/mock.card.component';
+export { MockChartDeprecatedComponent as ɵk } from './lib/components/mock.chart-deprecated.component';
+export { MockChartComponent as ɵj } from './lib/components/mock.chart.component';
+export { MockCheckboxComponent as ɵl } from './lib/components/mock.checkbox.component';
+export { MockChipComponent as ɵm } from './lib/components/mock.chip.component';
+export { MockDividerComponent as ɵn } from './lib/components/mock.divider.component';
+export { MockDropdownComponent as ɵo } from './lib/components/mock.dropdown.component';
+export { MockEmptyStateComponent as ɵp } from './lib/components/mock.empty-state.component';
+export { MockFabSheetComponent as ɵq } from './lib/components/mock.fab-sheet.component';
+export { MockFlagComponent as ɵr } from './lib/components/mock.flag.component';
+export { MockFormFieldMessageComponent as ɵs } from './lib/components/mock.form-field-message.component';
+export { MockFormFieldComponent as ɵt } from './lib/components/mock.form-field.component';
+export { MockGridComponent as ɵx } from './lib/components/mock.grid.component';
+export { MockIconComponent as ɵy } from './lib/components/mock.icon.component';
+export { MockInputCounterComponent as ɵv } from './lib/components/mock.input-counter.component';
+export { MockInputComponent as ɵu } from './lib/components/mock.input.component';
+export { MockItemComponent as ɵz } from './lib/components/mock.item.component';
+export { MockLabelComponent as ɵba } from './lib/components/mock.label.component';
+export { MockListHeaderComponent as ɵbb } from './lib/components/mock.list-header.component';
+export { MockListItemComponent as ɵbc } from './lib/components/mock.list-item.component';
+export { MockListSectionHeaderComponent as ɵbd } from './lib/components/mock.list-section-header.component';
+export { MockListComponent as ɵbe } from './lib/components/mock.list.component';
+export { MockLoadingOverlayComponent as ɵbf } from './lib/components/mock.loading-overlay.component';
+export { MockModalFooterComponent as ɵbh } from './lib/components/mock.modal-footer.component';
+export { MockPageFooterComponent as ɵbi } from './lib/components/mock.page-footer.component';
+export { MockPageActionsComponent as ɵbq, MockPageActionsDirective as ɵbl, MockPageComponent as ɵbr, MockPageContentComponent as ɵbp, MockPageContentDirective as ɵbm, MockPageProgressComponent as ɵbn, MockPageTitleComponent as ɵbo, MockPageTitleDirective as ɵbj, MockPageToolbarTitleDirective as ɵbk } from './lib/components/mock.page.component';
+export { MockPopoverComponent as ɵbs } from './lib/components/mock.popover.component';
+export { MockProgressCircleComponent as ɵbt } from './lib/components/mock.progress-circle.component';
+export { MockRadioGroupComponent as ɵbu } from './lib/components/mock.radio-group.component';
+export { MockRadioComponent as ɵbv } from './lib/components/mock.radio.component';
+export { MockRangeComponent as ɵbw } from './lib/components/mock.range.component';
+export { MockReorderListComponent as ɵbx } from './lib/components/mock.reorder-list.component';
+export { MockRouterOutletComponent as ɵby } from './lib/components/mock.router-outlet.component';
+export { MockSegmentedControlComponent as ɵbz } from './lib/components/mock.segmented-control.component';
+export { MockSlideButtonComponent as ɵca } from './lib/components/mock.slide-button.component';
+export { MockSpinnerComponent as ɵcb } from './lib/components/mock.spinner.component';
+export { MockTabButtonComponent as ɵcc } from './lib/components/mock.tab-button.component';
+export { MockTabsComponent as ɵcd } from './lib/components/mock.tabs.component';
+export { MockTextareaComponent as ɵw } from './lib/components/mock.textarea.component';
+export { MockToggleButtonComponent as ɵcf } from './lib/components/mock.toggle-button.component';
+export { MockToggleComponent as ɵce } from './lib/components/mock.toggle.component';
+export { MockAccordionDirective as ɵcj } from './lib/directives/mock.accordion.directive';
+export { MockFitHeadingDirective as ɵci } from './lib/directives/mock.fit-heading.directive';
+export { MockThemeColorDirective as ɵch } from './lib/directives/mock.theme-color.directive';
 export { MOCK_COMPONENTS as ɵa } from './lib/mock-components';
-export { MOCK_DIRECTIVES as ɵch } from './lib/mock-directives';
+export { MOCK_DIRECTIVES as ɵcg } from './lib/mock-directives';