@kirbydesign/designsystem 5.3.1 → 6.0.0-rc.0

package/bundles/kirbydesign-designsystem-testing-base.umd.js

@@ -1,8 +1,28 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@kirbydesign/designsystem')) :
     typeof define === 'function' && define.amd ? define('@kirbydesign/designsystem/testing-base', ['exports', '@angular/core', '@kirbydesign/designsystem'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.kirbydesign = global.kirbydesign || {}, global.kirbydesign.designsystem = global.kirbydesign.designsystem || {}, global.kirbydesign.designsystem['testing-base'] = {}), global.ng.core, global.kirbydesign.designsystem));
-}(this, (function (exports, core, designsystem) { 'use strict';
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.kirbydesign = global.kirbydesign || {}, global.kirbydesign.designsystem = global.kirbydesign.designsystem || {}, global.kirbydesign.designsystem["testing-base"] = {}), global.ng.core, global.kirbydesign.designsystem));
+})(this, (function (exports, i0, designsystem) { 'use strict';
+
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n["default"] = e;
+        return Object.freeze(n);
+    }
+
+    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockAccordionItemComponent = /** @class */ (function () {
@@ -10,55 +30,75 @@
         }
         return MockAccordionItemComponent;
     }());
-    MockAccordionItemComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-accordion-item',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.AccordionItemComponent,
-                            useExisting: core.forwardRef(function () { return MockAccordionItemComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockAccordionItemComponent.propDecorators = {
-        title: [{ type: core.Input }],
-        isExpanded: [{ type: core.Input }]
-    };
-    // #endregion
+    /** @nocollapse */ MockAccordionItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockAccordionItemComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockAccordionItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockAccordionItemComponent, selector: "kirby-accordion-item", inputs: { title: "title", isExpanded: "isExpanded" }, providers: [
+            {
+                provide: designsystem.AccordionItemComponent,
+                useExisting: i0.forwardRef((function () { return MockAccordionItemComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockAccordionItemComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-accordion-item',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.AccordionItemComponent,
+                                useExisting: i0.forwardRef((function () { return MockAccordionItemComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { title: [{
+                    type: i0.Input
+                }], isExpanded: [{
+                    type: i0.Input
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockActionSheetComponent = /** @class */ (function () {
         function MockActionSheetComponent() {
-            this.cancel = new core.EventEmitter();
-            this.itemSelect = new core.EventEmitter();
+            this.cancel = new i0.EventEmitter();
+            this.itemSelect = new i0.EventEmitter();
         }
         return MockActionSheetComponent;
     }());
-    MockActionSheetComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-action-sheet',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.ActionSheetComponent,
-                            useExisting: core.forwardRef(function () { return MockActionSheetComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockActionSheetComponent.propDecorators = {
-        cancelButtonText: [{ type: core.Input }],
-        hideCancel: [{ type: core.Input }],
-        disabled: [{ type: core.Input }],
-        header: [{ type: core.Input }],
-        subheader: [{ type: core.Input }],
-        items: [{ type: core.Input }],
-        cancel: [{ type: core.Output }],
-        itemSelect: [{ type: core.Output }]
-    };
-    // #endregion
+    /** @nocollapse */ MockActionSheetComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockActionSheetComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockActionSheetComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockActionSheetComponent, selector: "kirby-action-sheet", inputs: { cancelButtonText: "cancelButtonText", hideCancel: "hideCancel", disabled: "disabled", header: "header", subheader: "subheader", items: "items" }, outputs: { cancel: "cancel", itemSelect: "itemSelect" }, providers: [
+            {
+                provide: designsystem.ActionSheetComponent,
+                useExisting: i0.forwardRef((function () { return MockActionSheetComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockActionSheetComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-action-sheet',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.ActionSheetComponent,
+                                useExisting: i0.forwardRef((function () { return MockActionSheetComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { cancelButtonText: [{
+                    type: i0.Input
+                }], hideCancel: [{
+                    type: i0.Input
+                }], disabled: [{
+                    type: i0.Input
+                }], header: [{
+                    type: i0.Input
+                }], subheader: [{
+                    type: i0.Input
+                }], items: [{
+                    type: i0.Input
+                }], cancel: [{
+                    type: i0.Output
+                }], itemSelect: [{
+                    type: i0.Output
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockAppComponent = /** @class */ (function () {
@@ -66,19 +106,26 @@
         }
         return MockAppComponent;
     }());
-    MockAppComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-app',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.AppComponent,
-                            useExisting: core.forwardRef(function () { return MockAppComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    // #endregion
+    /** @nocollapse */ MockAppComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockAppComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockAppComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockAppComponent, selector: "kirby-app", providers: [
+            {
+                provide: designsystem.AppComponent,
+                useExisting: i0.forwardRef((function () { return MockAppComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockAppComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-app',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.AppComponent,
+                                useExisting: i0.forwardRef((function () { return MockAppComponent; })),
+                            },
+                        ],
+                    }]
+            }] });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockAvatarComponent = /** @class */ (function () {
@@ -86,28 +133,40 @@
         }
         return MockAvatarComponent;
     }());
-    MockAvatarComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-avatar',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.AvatarComponent,
-                            useExisting: core.forwardRef(function () { return MockAvatarComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockAvatarComponent.propDecorators = {
-        imageSrc: [{ type: core.Input }],
-        altText: [{ type: core.Input }],
-        shadow: [{ type: core.Input }],
-        text: [{ type: core.Input }],
-        overlay: [{ type: core.Input }],
-        size: [{ type: core.Input }],
-        themeColor: [{ type: core.Input }]
-    };
-    // #endregion
+    /** @nocollapse */ MockAvatarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockAvatarComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockAvatarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockAvatarComponent, selector: "kirby-avatar", inputs: { imageSrc: "imageSrc", altText: "altText", shadow: "shadow", text: "text", overlay: "overlay", size: "size", themeColor: "themeColor" }, providers: [
+            {
+                provide: designsystem.AvatarComponent,
+                useExisting: i0.forwardRef((function () { return MockAvatarComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockAvatarComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-avatar',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.AvatarComponent,
+                                useExisting: i0.forwardRef((function () { return MockAvatarComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { imageSrc: [{
+                    type: i0.Input
+                }], altText: [{
+                    type: i0.Input
+                }], shadow: [{
+                    type: i0.Input
+                }], text: [{
+                    type: i0.Input
+                }], overlay: [{
+                    type: i0.Input
+                }], size: [{
+                    type: i0.Input
+                }], themeColor: [{
+                    type: i0.Input
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockButtonComponent = /** @class */ (function () {
@@ -115,69 +174,101 @@
         }
         return MockButtonComponent;
     }());
-    MockButtonComponent.decorators = [
-        { type: core.Component, args: [{
-                    // tslint:disable-next-line: component-selector
-                    selector: 'button[kirby-button],Button[kirby-button]',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.ButtonComponent,
-                            useExisting: core.forwardRef(function () { return MockButtonComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockButtonComponent.propDecorators = {
-        attentionLevel: [{ type: core.Input }],
-        isDestructive: [{ type: core.Input }],
-        themeColor: [{ type: core.Input }],
-        expand: [{ type: core.Input }],
-        isFloating: [{ type: core.Input }],
-        size: [{ type: core.Input }]
-    };
-    // #endregion
+    /** @nocollapse */ MockButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockButtonComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: { attentionLevel: "attentionLevel", isDestructive: "isDestructive", themeColor: "themeColor", expand: "expand", isFloating: "isFloating", size: "size" }, providers: [
+            {
+                provide: designsystem.ButtonComponent,
+                useExisting: i0.forwardRef((function () { return MockButtonComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockButtonComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        // tslint:disable-next-line: component-selector
+                        selector: 'button[kirby-button],Button[kirby-button]',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.ButtonComponent,
+                                useExisting: i0.forwardRef((function () { return MockButtonComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { attentionLevel: [{
+                    type: i0.Input
+                }], isDestructive: [{
+                    type: i0.Input
+                }], themeColor: [{
+                    type: i0.Input
+                }], expand: [{
+                    type: i0.Input
+                }], isFloating: [{
+                    type: i0.Input
+                }], size: [{
+                    type: i0.Input
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockCalendarComponent = /** @class */ (function () {
         function MockCalendarComponent() {
-            this.dateChange = new core.EventEmitter();
-            this.dateSelect = new core.EventEmitter();
-            this.yearSelect = new core.EventEmitter();
+            this.dateChange = new i0.EventEmitter();
+            this.dateSelect = new i0.EventEmitter();
+            this.yearSelect = new i0.EventEmitter();
         }
         return MockCalendarComponent;
     }());
-    MockCalendarComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-calendar',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.CalendarComponent,
-                            useExisting: core.forwardRef(function () { return MockCalendarComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockCalendarComponent.propDecorators = {
-        dateChange: [{ type: core.Output }],
-        dateSelect: [{ type: core.Output }],
-        yearSelect: [{ type: core.Output }],
-        timezone: [{ type: core.Input }],
-        disableWeekends: [{ type: core.Input }],
-        disablePastDates: [{ type: core.Input }],
-        disableFutureDates: [{ type: core.Input }],
-        alwaysEnableToday: [{ type: core.Input }],
-        customLocales: [{ type: core.Input }],
-        usePopover: [{ type: core.Input }],
-        yearNavigatorOptions: [{ type: core.Input }],
-        selectedDate: [{ type: core.Input }],
-        disabledDates: [{ type: core.Input }],
-        todayDate: [{ type: core.Input }],
-        minDate: [{ type: core.Input }],
-        maxDate: [{ type: core.Input }]
-    };
-    // #endregion
+    /** @nocollapse */ MockCalendarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockCalendarComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockCalendarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockCalendarComponent, selector: "kirby-calendar", inputs: { timezone: "timezone", disableWeekends: "disableWeekends", disablePastDates: "disablePastDates", disableFutureDates: "disableFutureDates", alwaysEnableToday: "alwaysEnableToday", customLocales: "customLocales", usePopover: "usePopover", yearNavigatorOptions: "yearNavigatorOptions", selectedDate: "selectedDate", disabledDates: "disabledDates", todayDate: "todayDate", minDate: "minDate", maxDate: "maxDate" }, outputs: { dateChange: "dateChange", dateSelect: "dateSelect", yearSelect: "yearSelect" }, providers: [
+            {
+                provide: designsystem.CalendarComponent,
+                useExisting: i0.forwardRef((function () { return MockCalendarComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockCalendarComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-calendar',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.CalendarComponent,
+                                useExisting: i0.forwardRef((function () { return MockCalendarComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { dateChange: [{
+                    type: i0.Output
+                }], dateSelect: [{
+                    type: i0.Output
+                }], yearSelect: [{
+                    type: i0.Output
+                }], timezone: [{
+                    type: i0.Input
+                }], disableWeekends: [{
+                    type: i0.Input
+                }], disablePastDates: [{
+                    type: i0.Input
+                }], disableFutureDates: [{
+                    type: i0.Input
+                }], alwaysEnableToday: [{
+                    type: i0.Input
+                }], customLocales: [{
+                    type: i0.Input
+                }], usePopover: [{
+                    type: i0.Input
+                }], yearNavigatorOptions: [{
+                    type: i0.Input
+                }], selectedDate: [{
+                    type: i0.Input
+                }], disabledDates: [{
+                    type: i0.Input
+                }], todayDate: [{
+                    type: i0.Input
+                }], minDate: [{
+                    type: i0.Input
+                }], maxDate: [{
+                    type: i0.Input
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockCardFooterComponent = /** @class */ (function () {
@@ -185,19 +276,26 @@
         }
         return MockCardFooterComponent;
     }());
-    MockCardFooterComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-card-footer',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.CardFooterComponent,
-                            useExisting: core.forwardRef(function () { return MockCardFooterComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    // #endregion
+    /** @nocollapse */ MockCardFooterComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockCardFooterComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockCardFooterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockCardFooterComponent, selector: "kirby-card-footer", providers: [
+            {
+                provide: designsystem.CardFooterComponent,
+                useExisting: i0.forwardRef((function () { return MockCardFooterComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockCardFooterComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-card-footer',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.CardFooterComponent,
+                                useExisting: i0.forwardRef((function () { return MockCardFooterComponent; })),
+                            },
+                        ],
+                    }]
+            }] });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockCardHeaderComponent = /** @class */ (function () {
@@ -205,25 +303,34 @@
         }
         return MockCardHeaderComponent;
     }());
-    MockCardHeaderComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-card-header',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.CardHeaderComponent,
-                            useExisting: core.forwardRef(function () { return MockCardHeaderComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockCardHeaderComponent.propDecorators = {
-        title: [{ type: core.Input }],
-        subtitle: [{ type: core.Input }],
-        isTitleBold: [{ type: core.Input }],
-        flagged: [{ type: core.Input }]
-    };
-    // #endregion
+    /** @nocollapse */ MockCardHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockCardHeaderComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockCardHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockCardHeaderComponent, selector: "kirby-card-header", inputs: { title: "title", subtitle: "subtitle", isTitleBold: "isTitleBold", flagged: "flagged" }, providers: [
+            {
+                provide: designsystem.CardHeaderComponent,
+                useExisting: i0.forwardRef((function () { return MockCardHeaderComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockCardHeaderComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-card-header',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.CardHeaderComponent,
+                                useExisting: i0.forwardRef((function () { return MockCardHeaderComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { title: [{
+                    type: i0.Input
+                }], subtitle: [{
+                    type: i0.Input
+                }], isTitleBold: [{
+                    type: i0.Input
+                }], flagged: [{
+                    type: i0.Input
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockCardComponent = /** @class */ (function () {
@@ -231,27 +338,38 @@
         }
         return MockCardComponent;
     }());
-    MockCardComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-card',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.CardComponent,
-                            useExisting: core.forwardRef(function () { return MockCardComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockCardComponent.propDecorators = {
-        title: [{ type: core.Input }],
-        subtitle: [{ type: core.Input }],
-        backgroundImageUrl: [{ type: core.Input }],
-        hasPadding: [{ type: core.Input }],
-        sizes: [{ type: core.Input }],
-        mode: [{ type: core.Input }]
-    };
-    // #endregion
+    /** @nocollapse */ MockCardComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockCardComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockCardComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockCardComponent, selector: "kirby-card", inputs: { title: "title", subtitle: "subtitle", backgroundImageUrl: "backgroundImageUrl", hasPadding: "hasPadding", sizes: "sizes", mode: "mode" }, providers: [
+            {
+                provide: designsystem.CardComponent,
+                useExisting: i0.forwardRef((function () { return MockCardComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockCardComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-card',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.CardComponent,
+                                useExisting: i0.forwardRef((function () { return MockCardComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { title: [{
+                    type: i0.Input
+                }], subtitle: [{
+                    type: i0.Input
+                }], backgroundImageUrl: [{
+                    type: i0.Input
+                }], hasPadding: [{
+                    type: i0.Input
+                }], sizes: [{
+                    type: i0.Input
+                }], mode: [{
+                    type: i0.Input
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockChartDeprecatedComponent = /** @class */ (function () {
@@ -259,29 +377,42 @@
         }
         return MockChartDeprecatedComponent;
     }());
-    MockChartDeprecatedComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-chart-deprecated',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.ChartDeprecatedComponent,
-                            useExisting: core.forwardRef(function () { return MockChartDeprecatedComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockChartDeprecatedComponent.propDecorators = {
-        data: [{ type: core.Input }],
-        categories: [{ type: core.Input }],
-        breaks: [{ type: core.Input }],
-        height: [{ type: core.Input }],
-        type: [{ type: core.Input }],
-        description: [{ type: core.Input }],
-        showDataLabels: [{ type: core.Input }],
-        options: [{ type: core.Input }]
-    };
-    // #endregion
+    /** @nocollapse */ MockChartDeprecatedComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockChartDeprecatedComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockChartDeprecatedComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockChartDeprecatedComponent, selector: "kirby-chart-deprecated", inputs: { data: "data", categories: "categories", breaks: "breaks", height: "height", type: "type", description: "description", showDataLabels: "showDataLabels", options: "options" }, providers: [
+            {
+                provide: designsystem.ChartDeprecatedComponent,
+                useExisting: i0.forwardRef((function () { return MockChartDeprecatedComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockChartDeprecatedComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-chart-deprecated',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.ChartDeprecatedComponent,
+                                useExisting: i0.forwardRef((function () { return MockChartDeprecatedComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { data: [{
+                    type: i0.Input
+                }], categories: [{
+                    type: i0.Input
+                }], breaks: [{
+                    type: i0.Input
+                }], height: [{
+                    type: i0.Input
+                }], type: [{
+                    type: i0.Input
+                }], description: [{
+                    type: i0.Input
+                }], showDataLabels: [{
+                    type: i0.Input
+                }], options: [{
+                    type: i0.Input
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockChartComponent = /** @class */ (function () {
@@ -289,60 +420,84 @@
         }
         return MockChartComponent;
     }());
-    MockChartComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-chart',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.ChartComponent,
-                            useExisting: core.forwardRef(function () { return MockChartComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockChartComponent.propDecorators = {
-        type: [{ type: core.Input }],
-        data: [{ type: core.Input }],
-        labels: [{ type: core.Input }],
-        dataLabels: [{ type: core.Input }],
-        customOptions: [{ type: core.Input }],
-        dataLabelOptions: [{ type: core.Input }],
-        annotations: [{ type: core.Input }],
-        highlightedElements: [{ type: core.Input }],
-        height: [{ type: core.Input }]
-    };
-    // #endregion
+    /** @nocollapse */ MockChartComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockChartComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockChartComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockChartComponent, selector: "kirby-chart", inputs: { type: "type", data: "data", labels: "labels", customOptions: "customOptions", dataLabelOptions: "dataLabelOptions", annotations: "annotations", highlightedElements: "highlightedElements", height: "height" }, providers: [
+            {
+                provide: designsystem.ChartComponent,
+                useExisting: i0.forwardRef((function () { return MockChartComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockChartComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-chart',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.ChartComponent,
+                                useExisting: i0.forwardRef((function () { return MockChartComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { type: [{
+                    type: i0.Input
+                }], data: [{
+                    type: i0.Input
+                }], labels: [{
+                    type: i0.Input
+                }], customOptions: [{
+                    type: i0.Input
+                }], dataLabelOptions: [{
+                    type: i0.Input
+                }], annotations: [{
+                    type: i0.Input
+                }], highlightedElements: [{
+                    type: i0.Input
+                }], height: [{
+                    type: i0.Input
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockCheckboxComponent = /** @class */ (function () {
         function MockCheckboxComponent() {
-            this.checkedChange = new core.EventEmitter();
+            this.checkedChange = new i0.EventEmitter();
         }
         return MockCheckboxComponent;
     }());
-    MockCheckboxComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-checkbox',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.CheckboxComponent,
-                            useExisting: core.forwardRef(function () { return MockCheckboxComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockCheckboxComponent.propDecorators = {
-        checked: [{ type: core.Input }],
-        attentionLevel: [{ type: core.Input }],
-        text: [{ type: core.Input }],
-        size: [{ type: core.Input }],
-        hasError: [{ type: core.Input }],
-        disabled: [{ type: core.Input }],
-        checkedChange: [{ type: core.Output }]
-    };
-    // #endregion
+    /** @nocollapse */ MockCheckboxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockCheckboxComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockCheckboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockCheckboxComponent, selector: "kirby-checkbox", inputs: { checked: "checked", attentionLevel: "attentionLevel", text: "text", size: "size", hasError: "hasError", disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, providers: [
+            {
+                provide: designsystem.CheckboxComponent,
+                useExisting: i0.forwardRef((function () { return MockCheckboxComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockCheckboxComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-checkbox',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.CheckboxComponent,
+                                useExisting: i0.forwardRef((function () { return MockCheckboxComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { checked: [{
+                    type: i0.Input
+                }], attentionLevel: [{
+                    type: i0.Input
+                }], text: [{
+                    type: i0.Input
+                }], size: [{
+                    type: i0.Input
+                }], hasError: [{
+                    type: i0.Input
+                }], disabled: [{
+                    type: i0.Input
+                }], checkedChange: [{
+                    type: i0.Output
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockChipComponent = /** @class */ (function () {
@@ -350,23 +505,30 @@
         }
         return MockChipComponent;
     }());
-    MockChipComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-chip',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.ChipComponent,
-                            useExisting: core.forwardRef(function () { return MockChipComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockChipComponent.propDecorators = {
-        text: [{ type: core.Input }],
-        isSelected: [{ type: core.Input }]
-    };
-    // #endregion
+    /** @nocollapse */ MockChipComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockChipComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockChipComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockChipComponent, selector: "kirby-chip", inputs: { text: "text", isSelected: "isSelected" }, providers: [
+            {
+                provide: designsystem.ChipComponent,
+                useExisting: i0.forwardRef((function () { return MockChipComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockChipComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-chip',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.ChipComponent,
+                                useExisting: i0.forwardRef((function () { return MockChipComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { text: [{
+                    type: i0.Input
+                }], isSelected: [{
+                    type: i0.Input
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockDividerComponent = /** @class */ (function () {
@@ -374,58 +536,82 @@
         }
         return MockDividerComponent;
     }());
-    MockDividerComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-divider',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.DividerComponent,
-                            useExisting: core.forwardRef(function () { return MockDividerComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockDividerComponent.propDecorators = {
-        hasMargin: [{ type: core.Input }]
-    };
-    // #endregion
+    /** @nocollapse */ MockDividerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockDividerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockDividerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockDividerComponent, selector: "kirby-divider", inputs: { hasMargin: "hasMargin" }, providers: [
+            {
+                provide: designsystem.DividerComponent,
+                useExisting: i0.forwardRef((function () { return MockDividerComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockDividerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-divider',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.DividerComponent,
+                                useExisting: i0.forwardRef((function () { return MockDividerComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { hasMargin: [{
+                    type: i0.Input
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockDropdownComponent = /** @class */ (function () {
         function MockDropdownComponent() {
-            this.change = new core.EventEmitter();
+            this.change = new i0.EventEmitter();
         }
         return MockDropdownComponent;
     }());
-    MockDropdownComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-dropdown',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.DropdownComponent,
-                            useExisting: core.forwardRef(function () { return MockDropdownComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockDropdownComponent.propDecorators = {
-        items: [{ type: core.Input }],
-        selectedIndex: [{ type: core.Input }],
-        itemTextProperty: [{ type: core.Input }],
-        placeholder: [{ type: core.Input }],
-        popout: [{ type: core.Input }],
-        attentionLevel: [{ type: core.Input }],
-        expand: [{ type: core.Input }],
-        disabled: [{ type: core.Input }],
-        hasError: [{ type: core.Input }],
-        size: [{ type: core.Input }],
-        tabindex: [{ type: core.Input }],
-        usePopover: [{ type: core.Input }],
-        change: [{ type: core.Output }]
-    };
-    // #endregion
+    /** @nocollapse */ MockDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockDropdownComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockDropdownComponent, selector: "kirby-dropdown", inputs: { items: "items", selectedIndex: "selectedIndex", itemTextProperty: "itemTextProperty", placeholder: "placeholder", popout: "popout", attentionLevel: "attentionLevel", expand: "expand", disabled: "disabled", hasError: "hasError", size: "size", tabindex: "tabindex", usePopover: "usePopover" }, outputs: { change: "change" }, providers: [
+            {
+                provide: designsystem.DropdownComponent,
+                useExisting: i0.forwardRef((function () { return MockDropdownComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockDropdownComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-dropdown',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.DropdownComponent,
+                                useExisting: i0.forwardRef((function () { return MockDropdownComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { items: [{
+                    type: i0.Input
+                }], selectedIndex: [{
+                    type: i0.Input
+                }], itemTextProperty: [{
+                    type: i0.Input
+                }], placeholder: [{
+                    type: i0.Input
+                }], popout: [{
+                    type: i0.Input
+                }], attentionLevel: [{
+                    type: i0.Input
+                }], expand: [{
+                    type: i0.Input
+                }], disabled: [{
+                    type: i0.Input
+                }], hasError: [{
+                    type: i0.Input
+                }], size: [{
+                    type: i0.Input
+                }], tabindex: [{
+                    type: i0.Input
+                }], usePopover: [{
+                    type: i0.Input
+                }], change: [{
+                    type: i0.Output
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockEmptyStateComponent = /** @class */ (function () {
@@ -433,25 +619,34 @@
         }
         return MockEmptyStateComponent;
     }());
-    MockEmptyStateComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-empty-state',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.EmptyStateComponent,
-                            useExisting: core.forwardRef(function () { return MockEmptyStateComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockEmptyStateComponent.propDecorators = {
-        iconName: [{ type: core.Input }],
-        customIconName: [{ type: core.Input }],
-        title: [{ type: core.Input }],
-        subtitle: [{ type: core.Input }]
-    };
-    // #endregion
+    /** @nocollapse */ MockEmptyStateComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockEmptyStateComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockEmptyStateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockEmptyStateComponent, selector: "kirby-empty-state", inputs: { iconName: "iconName", customIconName: "customIconName", title: "title", subtitle: "subtitle" }, providers: [
+            {
+                provide: designsystem.EmptyStateComponent,
+                useExisting: i0.forwardRef((function () { return MockEmptyStateComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockEmptyStateComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-empty-state',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.EmptyStateComponent,
+                                useExisting: i0.forwardRef((function () { return MockEmptyStateComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { iconName: [{
+                    type: i0.Input
+                }], customIconName: [{
+                    type: i0.Input
+                }], title: [{
+                    type: i0.Input
+                }], subtitle: [{
+                    type: i0.Input
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockFabSheetComponent = /** @class */ (function () {
@@ -459,23 +654,30 @@
         }
         return MockFabSheetComponent;
     }());
-    MockFabSheetComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-fab-sheet',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.FabSheetComponent,
-                            useExisting: core.forwardRef(function () { return MockFabSheetComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockFabSheetComponent.propDecorators = {
-        disabled: [{ type: core.Input }],
-        horizontalAlignment: [{ type: core.Input }]
-    };
-    // #endregion
+    /** @nocollapse */ MockFabSheetComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockFabSheetComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockFabSheetComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockFabSheetComponent, selector: "kirby-fab-sheet", inputs: { disabled: "disabled", horizontalAlignment: "horizontalAlignment" }, providers: [
+            {
+                provide: designsystem.FabSheetComponent,
+                useExisting: i0.forwardRef((function () { return MockFabSheetComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockFabSheetComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-fab-sheet',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.FabSheetComponent,
+                                useExisting: i0.forwardRef((function () { return MockFabSheetComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { disabled: [{
+                    type: i0.Input
+                }], horizontalAlignment: [{
+                    type: i0.Input
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockFlagComponent = /** @class */ (function () {
@@ -483,23 +685,30 @@
         }
         return MockFlagComponent;
     }());
-    MockFlagComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-flag',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.FlagComponent,
-                            useExisting: core.forwardRef(function () { return MockFlagComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockFlagComponent.propDecorators = {
-        size: [{ type: core.Input }],
-        themeColor: [{ type: core.Input }]
-    };
-    // #endregion
+    /** @nocollapse */ MockFlagComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockFlagComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockFlagComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockFlagComponent, selector: "kirby-flag", inputs: { size: "size", themeColor: "themeColor" }, providers: [
+            {
+                provide: designsystem.FlagComponent,
+                useExisting: i0.forwardRef((function () { return MockFlagComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockFlagComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-flag',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.FlagComponent,
+                                useExisting: i0.forwardRef((function () { return MockFlagComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { size: [{
+                    type: i0.Input
+                }], themeColor: [{
+                    type: i0.Input
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockFormFieldMessageComponent = /** @class */ (function () {
@@ -507,23 +716,30 @@
         }
         return MockFormFieldMessageComponent;
     }());
-    MockFormFieldMessageComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-form-field-message',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.FormFieldMessageComponent,
-                            useExisting: core.forwardRef(function () { return MockFormFieldMessageComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockFormFieldMessageComponent.propDecorators = {
-        text: [{ type: core.Input }],
-        position: [{ type: core.Input }]
-    };
-    // #endregion
+    /** @nocollapse */ MockFormFieldMessageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockFormFieldMessageComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockFormFieldMessageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockFormFieldMessageComponent, selector: "kirby-form-field-message", inputs: { text: "text", position: "position" }, providers: [
+            {
+                provide: designsystem.FormFieldMessageComponent,
+                useExisting: i0.forwardRef((function () { return MockFormFieldMessageComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockFormFieldMessageComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-form-field-message',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.FormFieldMessageComponent,
+                                useExisting: i0.forwardRef((function () { return MockFormFieldMessageComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { text: [{
+                    type: i0.Input
+                }], position: [{
+                    type: i0.Input
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockFormFieldComponent = /** @class */ (function () {
@@ -532,23 +748,30 @@
         MockFormFieldComponent.prototype.focus = function () { };
         return MockFormFieldComponent;
     }());
-    MockFormFieldComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-form-field',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.FormFieldComponent,
-                            useExisting: core.forwardRef(function () { return MockFormFieldComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockFormFieldComponent.propDecorators = {
-        label: [{ type: core.Input }],
-        message: [{ type: core.Input }]
-    };
-    // #endregion
+    /** @nocollapse */ MockFormFieldComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockFormFieldComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockFormFieldComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockFormFieldComponent, selector: "kirby-form-field", inputs: { label: "label", message: "message" }, providers: [
+            {
+                provide: designsystem.FormFieldComponent,
+                useExisting: i0.forwardRef((function () { return MockFormFieldComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockFormFieldComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-form-field',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.FormFieldComponent,
+                                useExisting: i0.forwardRef((function () { return MockFormFieldComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { label: [{
+                    type: i0.Input
+                }], message: [{
+                    type: i0.Input
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockGridComponent = /** @class */ (function () {
@@ -556,23 +779,30 @@
         }
         return MockGridComponent;
     }());
-    MockGridComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-grid',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.GridComponent,
-                            useExisting: core.forwardRef(function () { return MockGridComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockGridComponent.propDecorators = {
-        maxColumns: [{ type: core.Input }],
-        cardConfigurations: [{ type: core.Input }]
-    };
-    // #endregion
+    /** @nocollapse */ MockGridComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockGridComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockGridComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockGridComponent, selector: "kirby-grid", inputs: { maxColumns: "maxColumns", cardConfigurations: "cardConfigurations" }, providers: [
+            {
+                provide: designsystem.GridComponent,
+                useExisting: i0.forwardRef((function () { return MockGridComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockGridComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-grid',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.GridComponent,
+                                useExisting: i0.forwardRef((function () { return MockGridComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { maxColumns: [{
+                    type: i0.Input
+                }], cardConfigurations: [{
+                    type: i0.Input
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockIconComponent = /** @class */ (function () {
@@ -580,24 +810,32 @@
         }
         return MockIconComponent;
     }());
-    MockIconComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-icon',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.IconComponent,
-                            useExisting: core.forwardRef(function () { return MockIconComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockIconComponent.propDecorators = {
-        size: [{ type: core.Input }],
-        name: [{ type: core.Input }],
-        customName: [{ type: core.Input }]
-    };
-    // #endregion
+    /** @nocollapse */ MockIconComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockIconComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockIconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockIconComponent, selector: "kirby-icon", inputs: { size: "size", name: "name", customName: "customName" }, providers: [
+            {
+                provide: designsystem.IconComponent,
+                useExisting: i0.forwardRef((function () { return MockIconComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockIconComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-icon',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.IconComponent,
+                                useExisting: i0.forwardRef((function () { return MockIconComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { size: [{
+                    type: i0.Input
+                }], name: [{
+                    type: i0.Input
+                }], customName: [{
+                    type: i0.Input
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockInputCounterComponent = /** @class */ (function () {
@@ -605,22 +843,28 @@
         }
         return MockInputCounterComponent;
     }());
-    MockInputCounterComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-input-counter',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.InputCounterComponent,
-                            useExisting: core.forwardRef(function () { return MockInputCounterComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockInputCounterComponent.propDecorators = {
-        listenTo: [{ type: core.Input }]
-    };
-    // #endregion
+    /** @nocollapse */ MockInputCounterComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockInputCounterComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockInputCounterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockInputCounterComponent, selector: "kirby-input-counter", inputs: { listenTo: "listenTo" }, providers: [
+            {
+                provide: designsystem.InputCounterComponent,
+                useExisting: i0.forwardRef((function () { return MockInputCounterComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockInputCounterComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-input-counter',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.InputCounterComponent,
+                                useExisting: i0.forwardRef((function () { return MockInputCounterComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { listenTo: [{
+                    type: i0.Input
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockInputComponent = /** @class */ (function () {
@@ -628,31 +872,45 @@
         }
         return MockInputComponent;
     }());
-    MockInputComponent.decorators = [
-        { type: core.Component, args: [{
-                    // tslint:disable-next-line: component-selector
-                    selector: 'input[kirby-input]',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.InputComponent,
-                            useExisting: core.forwardRef(function () { return MockInputComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockInputComponent.propDecorators = {
-        type: [{ type: core.Input }],
-        size: [{ type: core.Input }],
-        borderless: [{ type: core.Input }],
-        hasError: [{ type: core.Input }],
-        autocomplete: [{ type: core.Input }],
-        autocorrect: [{ type: core.Input }],
-        value: [{ type: core.Input }],
-        maxlength: [{ type: core.Input }],
-        inputmode: [{ type: core.Input }]
-    };
-    // #endregion
+    /** @nocollapse */ MockInputComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockInputComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockInputComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockInputComponent, selector: "input[kirby-input]", inputs: { type: "type", size: "size", borderless: "borderless", hasError: "hasError", autocomplete: "autocomplete", autocorrect: "autocorrect", value: "value", maxlength: "maxlength", inputmode: "inputmode" }, providers: [
+            {
+                provide: designsystem.InputComponent,
+                useExisting: i0.forwardRef((function () { return MockInputComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockInputComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        // tslint:disable-next-line: component-selector
+                        selector: 'input[kirby-input]',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.InputComponent,
+                                useExisting: i0.forwardRef((function () { return MockInputComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { type: [{
+                    type: i0.Input
+                }], size: [{
+                    type: i0.Input
+                }], borderless: [{
+                    type: i0.Input
+                }], hasError: [{
+                    type: i0.Input
+                }], autocomplete: [{
+                    type: i0.Input
+                }], autocorrect: [{
+                    type: i0.Input
+                }], value: [{
+                    type: i0.Input
+                }], maxlength: [{
+                    type: i0.Input
+                }], inputmode: [{
+                    type: i0.Input
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockItemGroupComponent = /** @class */ (function () {
@@ -660,19 +918,26 @@
         }
         return MockItemGroupComponent;
     }());
-    MockItemGroupComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-item-group',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.ItemGroupComponent,
-                            useExisting: core.forwardRef(function () { return MockItemGroupComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    // #endregion
+    /** @nocollapse */ MockItemGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockItemGroupComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockItemGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockItemGroupComponent, selector: "kirby-item-group", providers: [
+            {
+                provide: designsystem.ItemGroupComponent,
+                useExisting: i0.forwardRef((function () { return MockItemGroupComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockItemGroupComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-item-group',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.ItemGroupComponent,
+                                useExisting: i0.forwardRef((function () { return MockItemGroupComponent; })),
+                            },
+                        ],
+                    }]
+            }] });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockItemSlidingComponent = /** @class */ (function () {
@@ -680,23 +945,30 @@
         }
         return MockItemSlidingComponent;
     }());
-    MockItemSlidingComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-item-sliding',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.ItemSlidingComponent,
-                            useExisting: core.forwardRef(function () { return MockItemSlidingComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockItemSlidingComponent.propDecorators = {
-        swipeActions: [{ type: core.Input }],
-        side: [{ type: core.Input }]
-    };
-    // #endregion
+    /** @nocollapse */ MockItemSlidingComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockItemSlidingComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockItemSlidingComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockItemSlidingComponent, selector: "kirby-item-sliding", inputs: { swipeActions: "swipeActions", side: "side" }, providers: [
+            {
+                provide: designsystem.ItemSlidingComponent,
+                useExisting: i0.forwardRef((function () { return MockItemSlidingComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockItemSlidingComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-item-sliding',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.ItemSlidingComponent,
+                                useExisting: i0.forwardRef((function () { return MockItemSlidingComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { swipeActions: [{
+                    type: i0.Input
+                }], side: [{
+                    type: i0.Input
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockItemComponent = /** @class */ (function () {
@@ -704,26 +976,36 @@
         }
         return MockItemComponent;
     }());
-    MockItemComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-item',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.ItemComponent,
-                            useExisting: core.forwardRef(function () { return MockItemComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockItemComponent.propDecorators = {
-        disabled: [{ type: core.Input }],
-        selected: [{ type: core.Input }],
-        selectable: [{ type: core.Input }],
-        reorderable: [{ type: core.Input }],
-        size: [{ type: core.Input }]
-    };
-    // #endregion
+    /** @nocollapse */ MockItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockItemComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockItemComponent, selector: "kirby-item", inputs: { disabled: "disabled", selected: "selected", selectable: "selectable", reorderable: "reorderable", size: "size" }, providers: [
+            {
+                provide: designsystem.ItemComponent,
+                useExisting: i0.forwardRef((function () { return MockItemComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockItemComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-item',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.ItemComponent,
+                                useExisting: i0.forwardRef((function () { return MockItemComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { disabled: [{
+                    type: i0.Input
+                }], selected: [{
+                    type: i0.Input
+                }], selectable: [{
+                    type: i0.Input
+                }], reorderable: [{
+                    type: i0.Input
+                }], size: [{
+                    type: i0.Input
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockLabelComponent = /** @class */ (function () {
@@ -731,22 +1013,28 @@
         }
         return MockLabelComponent;
     }());
-    MockLabelComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-label',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.LabelComponent,
-                            useExisting: core.forwardRef(function () { return MockLabelComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockLabelComponent.propDecorators = {
-        direction: [{ type: core.Input }]
-    };
-    // #endregion
+    /** @nocollapse */ MockLabelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockLabelComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockLabelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockLabelComponent, selector: "kirby-label", inputs: { direction: "direction" }, providers: [
+            {
+                provide: designsystem.LabelComponent,
+                useExisting: i0.forwardRef((function () { return MockLabelComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockLabelComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-label',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.LabelComponent,
+                                useExisting: i0.forwardRef((function () { return MockLabelComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { direction: [{
+                    type: i0.Input
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockListExperimentalComponent = /** @class */ (function () {
@@ -754,19 +1042,26 @@
         }
         return MockListExperimentalComponent;
     }());
-    MockListExperimentalComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-list-experimental',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.ListExperimentalComponent,
-                            useExisting: core.forwardRef(function () { return MockListExperimentalComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    // #endregion
+    /** @nocollapse */ MockListExperimentalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockListExperimentalComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockListExperimentalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockListExperimentalComponent, selector: "kirby-list-experimental", providers: [
+            {
+                provide: designsystem.ListExperimentalComponent,
+                useExisting: i0.forwardRef((function () { return MockListExperimentalComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockListExperimentalComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-list-experimental',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.ListExperimentalComponent,
+                                useExisting: i0.forwardRef((function () { return MockListExperimentalComponent; })),
+                            },
+                        ],
+                    }]
+            }] });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockListHeaderComponent = /** @class */ (function () {
@@ -774,52 +1069,73 @@
         }
         return MockListHeaderComponent;
     }());
-    MockListHeaderComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-list-header',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.ListHeaderComponent,
-                            useExisting: core.forwardRef(function () { return MockListHeaderComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    // #endregion
+    /** @nocollapse */ MockListHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockListHeaderComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockListHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockListHeaderComponent, selector: "kirby-list-header", providers: [
+            {
+                provide: designsystem.ListHeaderComponent,
+                useExisting: i0.forwardRef((function () { return MockListHeaderComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockListHeaderComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-list-header',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.ListHeaderComponent,
+                                useExisting: i0.forwardRef((function () { return MockListHeaderComponent; })),
+                            },
+                        ],
+                    }]
+            }] });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockListItemComponent = /** @class */ (function () {
         function MockListItemComponent() {
-            this.itemSelect = new core.EventEmitter();
-            this.swipeActionSelect = new core.EventEmitter();
+            this.itemSelect = new i0.EventEmitter();
+            this.swipeActionSelect = new i0.EventEmitter();
         }
         return MockListItemComponent;
     }());
-    MockListItemComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-list-item',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.ListItemComponent,
-                            useExisting: core.forwardRef(function () { return MockListItemComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockListItemComponent.propDecorators = {
-        item: [{ type: core.Input }],
-        boundaryClass: [{ type: core.Input }],
-        swipeActions: [{ type: core.Input }],
-        itemTemplate: [{ type: core.Input }],
-        isSelected: [{ type: core.Input }],
-        isSelectable: [{ type: core.Input }],
-        getItemColor: [{ type: core.Input }],
-        itemSelect: [{ type: core.Output }],
-        swipeActionSelect: [{ type: core.Output }]
-    };
-    // #endregion
+    /** @nocollapse */ MockListItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockListItemComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockListItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockListItemComponent, selector: "kirby-list-item", inputs: { item: "item", boundaryClass: "boundaryClass", swipeActions: "swipeActions", itemTemplate: "itemTemplate", isSelected: "isSelected", isSelectable: "isSelectable", getItemColor: "getItemColor" }, outputs: { itemSelect: "itemSelect", swipeActionSelect: "swipeActionSelect" }, providers: [
+            {
+                provide: designsystem.ListItemComponent,
+                useExisting: i0.forwardRef((function () { return MockListItemComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockListItemComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-list-item',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.ListItemComponent,
+                                useExisting: i0.forwardRef((function () { return MockListItemComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { item: [{
+                    type: i0.Input
+                }], boundaryClass: [{
+                    type: i0.Input
+                }], swipeActions: [{
+                    type: i0.Input
+                }], itemTemplate: [{
+                    type: i0.Input
+                }], isSelected: [{
+                    type: i0.Input
+                }], isSelectable: [{
+                    type: i0.Input
+                }], getItemColor: [{
+                    type: i0.Input
+                }], itemSelect: [{
+                    type: i0.Output
+                }], swipeActionSelect: [{
+                    type: i0.Output
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockListSectionHeaderComponent = /** @class */ (function () {
@@ -827,60 +1143,85 @@
         }
         return MockListSectionHeaderComponent;
     }());
-    MockListSectionHeaderComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-list-section-header',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.ListSectionHeaderComponent,
-                            useExisting: core.forwardRef(function () { return MockListSectionHeaderComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockListSectionHeaderComponent.propDecorators = {
-        title: [{ type: core.Input }]
-    };
-    // #endregion
+    /** @nocollapse */ MockListSectionHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockListSectionHeaderComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockListSectionHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockListSectionHeaderComponent, selector: "kirby-list-section-header", inputs: { title: "title" }, providers: [
+            {
+                provide: designsystem.ListSectionHeaderComponent,
+                useExisting: i0.forwardRef((function () { return MockListSectionHeaderComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockListSectionHeaderComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-list-section-header',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.ListSectionHeaderComponent,
+                                useExisting: i0.forwardRef((function () { return MockListSectionHeaderComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { title: [{
+                    type: i0.Input
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockListComponent = /** @class */ (function () {
         function MockListComponent() {
-            this.loadOnDemand = new core.EventEmitter();
-            this.itemSelect = new core.EventEmitter();
+            this.loadOnDemand = new i0.EventEmitter();
+            this.itemSelect = new i0.EventEmitter();
         }
         return MockListComponent;
     }());
-    MockListComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-list',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.ListComponent,
-                            useExisting: core.forwardRef(function () { return MockListComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockListComponent.propDecorators = {
-        items: [{ type: core.Input }],
-        getItemColor: [{ type: core.Input }],
-        getSectionName: [{ type: core.Input }],
-        trackBy: [{ type: core.Input }],
-        noMoreItemsText: [{ type: core.Input }],
-        showDivider: [{ type: core.Input }],
-        markSelectedRow: [{ type: core.Input }],
-        shape: [{ type: core.Input }],
-        hasItemSpacing: [{ type: core.Input }],
-        isLoadOnDemandEnabled: [{ type: core.Input }],
-        loadOnDemand: [{ type: core.Output }],
-        swipeActions: [{ type: core.Input }],
-        itemSelect: [{ type: core.Output }],
-        disableSelectionHighlight: [{ type: core.Input }]
-    };
-    // #endregion
+    /** @nocollapse */ MockListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockListComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockListComponent, selector: "kirby-list", inputs: { items: "items", getItemColor: "getItemColor", getSectionName: "getSectionName", trackBy: "trackBy", noMoreItemsText: "noMoreItemsText", showDivider: "showDivider", markSelectedRow: "markSelectedRow", shape: "shape", hasItemSpacing: "hasItemSpacing", isLoadOnDemandEnabled: "isLoadOnDemandEnabled", swipeActions: "swipeActions", disableSelectionHighlight: "disableSelectionHighlight" }, outputs: { loadOnDemand: "loadOnDemand", itemSelect: "itemSelect" }, providers: [
+            {
+                provide: designsystem.ListComponent,
+                useExisting: i0.forwardRef((function () { return MockListComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockListComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-list',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.ListComponent,
+                                useExisting: i0.forwardRef((function () { return MockListComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { items: [{
+                    type: i0.Input
+                }], getItemColor: [{
+                    type: i0.Input
+                }], getSectionName: [{
+                    type: i0.Input
+                }], trackBy: [{
+                    type: i0.Input
+                }], noMoreItemsText: [{
+                    type: i0.Input
+                }], showDivider: [{
+                    type: i0.Input
+                }], markSelectedRow: [{
+                    type: i0.Input
+                }], shape: [{
+                    type: i0.Input
+                }], hasItemSpacing: [{
+                    type: i0.Input
+                }], isLoadOnDemandEnabled: [{
+                    type: i0.Input
+                }], loadOnDemand: [{
+                    type: i0.Output
+                }], swipeActions: [{
+                    type: i0.Input
+                }], itemSelect: [{
+                    type: i0.Output
+                }], disableSelectionHighlight: [{
+                    type: i0.Input
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockLoadingOverlayComponent = /** @class */ (function () {
@@ -888,23 +1229,30 @@
         }
         return MockLoadingOverlayComponent;
     }());
-    MockLoadingOverlayComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-loading-overlay',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.LoadingOverlayComponent,
-                            useExisting: core.forwardRef(function () { return MockLoadingOverlayComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockLoadingOverlayComponent.propDecorators = {
-        isLoading: [{ type: core.Input }],
-        showBackdrop: [{ type: core.Input }]
-    };
-    // #endregion
+    /** @nocollapse */ MockLoadingOverlayComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockLoadingOverlayComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockLoadingOverlayComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockLoadingOverlayComponent, selector: "kirby-loading-overlay", inputs: { isLoading: "isLoading", showBackdrop: "showBackdrop" }, providers: [
+            {
+                provide: designsystem.LoadingOverlayComponent,
+                useExisting: i0.forwardRef((function () { return MockLoadingOverlayComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockLoadingOverlayComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-loading-overlay',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.LoadingOverlayComponent,
+                                useExisting: i0.forwardRef((function () { return MockLoadingOverlayComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { isLoading: [{
+                    type: i0.Input
+                }], showBackdrop: [{
+                    type: i0.Input
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockModalFooterComponent = /** @class */ (function () {
@@ -912,23 +1260,30 @@
         }
         return MockModalFooterComponent;
     }());
-    MockModalFooterComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-modal-footer',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.ModalFooterComponent,
-                            useExisting: core.forwardRef(function () { return MockModalFooterComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockModalFooterComponent.propDecorators = {
-        snapToKeyboard: [{ type: core.Input }],
-        type: [{ type: core.Input }]
-    };
-    // #endregion
+    /** @nocollapse */ MockModalFooterComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockModalFooterComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockModalFooterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockModalFooterComponent, selector: "kirby-modal-footer", inputs: { snapToKeyboard: "snapToKeyboard", type: "type" }, providers: [
+            {
+                provide: designsystem.ModalFooterComponent,
+                useExisting: i0.forwardRef((function () { return MockModalFooterComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockModalFooterComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-modal-footer',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.ModalFooterComponent,
+                                useExisting: i0.forwardRef((function () { return MockModalFooterComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { snapToKeyboard: [{
+                    type: i0.Input
+                }], type: [{
+                    type: i0.Input
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockPageFooterComponent = /** @class */ (function () {
@@ -936,22 +1291,28 @@
         }
         return MockPageFooterComponent;
     }());
-    MockPageFooterComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-page-footer',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.PageFooterComponent,
-                            useExisting: core.forwardRef(function () { return MockPageFooterComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockPageFooterComponent.propDecorators = {
-        hasPadding: [{ type: core.Input }]
-    };
-    // #endregion
+    /** @nocollapse */ MockPageFooterComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockPageFooterComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockPageFooterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockPageFooterComponent, selector: "kirby-page-footer", inputs: { hasPadding: "hasPadding" }, providers: [
+            {
+                provide: designsystem.PageFooterComponent,
+                useExisting: i0.forwardRef((function () { return MockPageFooterComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockPageFooterComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-page-footer',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.PageFooterComponent,
+                                useExisting: i0.forwardRef((function () { return MockPageFooterComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { hasPadding: [{
+                    type: i0.Input
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockPageTitleDirective = /** @class */ (function () {
@@ -959,198 +1320,311 @@
         }
         return MockPageTitleDirective;
     }());
-    MockPageTitleDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[kirbyPageTitle]',
-                    providers: [
-                        {
-                            provide: designsystem.PageTitleDirective,
-                            useExisting: core.forwardRef(function () { return MockPageTitleDirective; }),
-                        },
-                    ],
-                },] }
-    ];
+    /** @nocollapse */ MockPageTitleDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockPageTitleDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ MockPageTitleDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: MockPageTitleDirective, selector: "[kirbyPageTitle]", providers: [
+            {
+                provide: designsystem.PageTitleDirective,
+                useExisting: i0.forwardRef((function () { return MockPageTitleDirective; })),
+            },
+        ], ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockPageTitleDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[kirbyPageTitle]',
+                        providers: [
+                            {
+                                provide: designsystem.PageTitleDirective,
+                                useExisting: i0.forwardRef((function () { return MockPageTitleDirective; })),
+                            },
+                        ],
+                    }]
+            }] });
+    var MockPageSubtitleDirective = /** @class */ (function () {
+        function MockPageSubtitleDirective() {
+        }
+        return MockPageSubtitleDirective;
+    }());
+    /** @nocollapse */ MockPageSubtitleDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockPageSubtitleDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ MockPageSubtitleDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: MockPageSubtitleDirective, selector: "[kirbyPageSubtitle]", providers: [
+            {
+                provide: designsystem.PageSubtitleDirective,
+                useExisting: i0.forwardRef((function () { return MockPageSubtitleDirective; })),
+            },
+        ], ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockPageSubtitleDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[kirbyPageSubtitle]',
+                        providers: [
+                            {
+                                provide: designsystem.PageSubtitleDirective,
+                                useExisting: i0.forwardRef((function () { return MockPageSubtitleDirective; })),
+                            },
+                        ],
+                    }]
+            }] });
     var MockPageToolbarTitleDirective = /** @class */ (function () {
         function MockPageToolbarTitleDirective() {
         }
         return MockPageToolbarTitleDirective;
     }());
-    MockPageToolbarTitleDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[kirbyPageToolbarTitle]',
-                    providers: [
-                        {
-                            provide: designsystem.PageToolbarTitleDirective,
-                            useExisting: core.forwardRef(function () { return MockPageToolbarTitleDirective; }),
-                        },
-                    ],
-                },] }
-    ];
+    /** @nocollapse */ MockPageToolbarTitleDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockPageToolbarTitleDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ MockPageToolbarTitleDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: MockPageToolbarTitleDirective, selector: "[kirbyPageToolbarTitle]", providers: [
+            {
+                provide: designsystem.PageToolbarTitleDirective,
+                useExisting: i0.forwardRef((function () { return MockPageToolbarTitleDirective; })),
+            },
+        ], ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockPageToolbarTitleDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[kirbyPageToolbarTitle]',
+                        providers: [
+                            {
+                                provide: designsystem.PageToolbarTitleDirective,
+                                useExisting: i0.forwardRef((function () { return MockPageToolbarTitleDirective; })),
+                            },
+                        ],
+                    }]
+            }] });
     var MockPageActionsDirective = /** @class */ (function () {
         function MockPageActionsDirective() {
         }
         return MockPageActionsDirective;
     }());
-    MockPageActionsDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[kirbyPageActions]',
-                    providers: [
-                        {
-                            provide: designsystem.PageActionsDirective,
-                            useExisting: core.forwardRef(function () { return MockPageActionsDirective; }),
-                        },
-                    ],
-                },] }
-    ];
-    MockPageActionsDirective.propDecorators = {
-        config: [{ type: core.Input, args: ['kirbyPageActions',] }]
-    };
+    /** @nocollapse */ MockPageActionsDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockPageActionsDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ MockPageActionsDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: MockPageActionsDirective, selector: "[kirbyPageActions]", inputs: { config: ["kirbyPageActions", "config"] }, providers: [
+            {
+                provide: designsystem.PageActionsDirective,
+                useExisting: i0.forwardRef((function () { return MockPageActionsDirective; })),
+            },
+        ], ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockPageActionsDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[kirbyPageActions]',
+                        providers: [
+                            {
+                                provide: designsystem.PageActionsDirective,
+                                useExisting: i0.forwardRef((function () { return MockPageActionsDirective; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { config: [{
+                    type: i0.Input,
+                    args: ['kirbyPageActions']
+                }] } });
     var MockPageContentDirective = /** @class */ (function () {
         function MockPageContentDirective() {
         }
         return MockPageContentDirective;
     }());
-    MockPageContentDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[kirbyPageContent]',
-                    providers: [
-                        {
-                            provide: designsystem.PageContentDirective,
-                            useExisting: core.forwardRef(function () { return MockPageContentDirective; }),
-                        },
-                    ],
-                },] }
-    ];
-    MockPageContentDirective.propDecorators = {
-        config: [{ type: core.Input, args: ['kirbyPageContent',] }]
-    };
+    /** @nocollapse */ MockPageContentDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockPageContentDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ MockPageContentDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: MockPageContentDirective, selector: "[kirbyPageContent]", inputs: { config: ["kirbyPageContent", "config"] }, providers: [
+            {
+                provide: designsystem.PageContentDirective,
+                useExisting: i0.forwardRef((function () { return MockPageContentDirective; })),
+            },
+        ], ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockPageContentDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[kirbyPageContent]',
+                        providers: [
+                            {
+                                provide: designsystem.PageContentDirective,
+                                useExisting: i0.forwardRef((function () { return MockPageContentDirective; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { config: [{
+                    type: i0.Input,
+                    args: ['kirbyPageContent']
+                }] } });
     var MockPageProgressComponent = /** @class */ (function () {
         function MockPageProgressComponent() {
         }
         return MockPageProgressComponent;
     }());
-    MockPageProgressComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-page-progress',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.PageProgressComponent,
-                            useExisting: core.forwardRef(function () { return MockPageProgressComponent; }),
-                        },
-                    ]
-                },] }
-    ];
+    /** @nocollapse */ MockPageProgressComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockPageProgressComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockPageProgressComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockPageProgressComponent, selector: "kirby-page-progress", providers: [
+            {
+                provide: designsystem.PageProgressComponent,
+                useExisting: i0.forwardRef((function () { return MockPageProgressComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockPageProgressComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-page-progress',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.PageProgressComponent,
+                                useExisting: i0.forwardRef((function () { return MockPageProgressComponent; })),
+                            },
+                        ],
+                    }]
+            }] });
     var MockPageTitleComponent = /** @class */ (function () {
         function MockPageTitleComponent() {
         }
         return MockPageTitleComponent;
     }());
-    MockPageTitleComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-page-title',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.PageTitleComponent,
-                            useExisting: core.forwardRef(function () { return MockPageTitleComponent; }),
-                        },
-                    ]
-                },] }
-    ];
+    /** @nocollapse */ MockPageTitleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockPageTitleComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockPageTitleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockPageTitleComponent, selector: "kirby-page-title", providers: [
+            {
+                provide: designsystem.PageTitleComponent,
+                useExisting: i0.forwardRef((function () { return MockPageTitleComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockPageTitleComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-page-title',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.PageTitleComponent,
+                                useExisting: i0.forwardRef((function () { return MockPageTitleComponent; })),
+                            },
+                        ],
+                    }]
+            }] });
     var MockPageContentComponent = /** @class */ (function () {
         function MockPageContentComponent() {
         }
         return MockPageContentComponent;
     }());
-    MockPageContentComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-page-content',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.PageContentComponent,
-                            useExisting: core.forwardRef(function () { return MockPageContentComponent; }),
-                        },
-                    ]
-                },] }
-    ];
+    /** @nocollapse */ MockPageContentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockPageContentComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockPageContentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockPageContentComponent, selector: "kirby-page-content", providers: [
+            {
+                provide: designsystem.PageContentComponent,
+                useExisting: i0.forwardRef((function () { return MockPageContentComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockPageContentComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-page-content',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.PageContentComponent,
+                                useExisting: i0.forwardRef((function () { return MockPageContentComponent; })),
+                            },
+                        ],
+                    }]
+            }] });
     var MockPageActionsComponent = /** @class */ (function () {
         function MockPageActionsComponent() {
         }
         return MockPageActionsComponent;
     }());
-    MockPageActionsComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-page-actions',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.PageActionsComponent,
-                            useExisting: core.forwardRef(function () { return MockPageActionsComponent; }),
-                        },
-                    ]
-                },] }
-    ];
+    /** @nocollapse */ MockPageActionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockPageActionsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockPageActionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockPageActionsComponent, selector: "kirby-page-actions", providers: [
+            {
+                provide: designsystem.PageActionsComponent,
+                useExisting: i0.forwardRef((function () { return MockPageActionsComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockPageActionsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-page-actions',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.PageActionsComponent,
+                                useExisting: i0.forwardRef((function () { return MockPageActionsComponent; })),
+                            },
+                        ],
+                    }]
+            }] });
     var MockPageComponent = /** @class */ (function () {
         function MockPageComponent() {
-            this.enter = new core.EventEmitter();
-            this.leave = new core.EventEmitter();
-            this.refresh = new core.EventEmitter();
+            this.enter = new i0.EventEmitter();
+            this.leave = new i0.EventEmitter();
+            this.refresh = new i0.EventEmitter();
         }
         return MockPageComponent;
     }());
-    MockPageComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-page',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.PageComponent,
-                            useExisting: core.forwardRef(function () { return MockPageComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockPageComponent.propDecorators = {
-        title: [{ type: core.Input }],
-        toolbarTitle: [{ type: core.Input }],
-        titleAlignment: [{ type: core.Input }],
-        defaultBackHref: [{ type: core.Input }],
-        hideBackButton: [{ type: core.Input }],
-        titleMaxLines: [{ type: core.Input }],
-        tabBarBottomHidden: [{ type: core.Input }],
-        enter: [{ type: core.Output }],
-        leave: [{ type: core.Output }],
-        refresh: [{ type: core.Output }]
-    };
-    // #endregion
+    /** @nocollapse */ MockPageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockPageComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockPageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockPageComponent, selector: "kirby-page", inputs: { title: "title", subtitle: "subtitle", toolbarTitle: "toolbarTitle", titleAlignment: "titleAlignment", defaultBackHref: "defaultBackHref", hideBackButton: "hideBackButton", titleMaxLines: "titleMaxLines", tabBarBottomHidden: "tabBarBottomHidden" }, outputs: { enter: "enter", leave: "leave", refresh: "refresh" }, providers: [
+            {
+                provide: designsystem.PageComponent,
+                useExisting: i0.forwardRef((function () { return MockPageComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockPageComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-page',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.PageComponent,
+                                useExisting: i0.forwardRef((function () { return MockPageComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { title: [{
+                    type: i0.Input
+                }], subtitle: [{
+                    type: i0.Input
+                }], toolbarTitle: [{
+                    type: i0.Input
+                }], titleAlignment: [{
+                    type: i0.Input
+                }], defaultBackHref: [{
+                    type: i0.Input
+                }], hideBackButton: [{
+                    type: i0.Input
+                }], titleMaxLines: [{
+                    type: i0.Input
+                }], tabBarBottomHidden: [{
+                    type: i0.Input
+                }], enter: [{
+                    type: i0.Output
+                }], leave: [{
+                    type: i0.Output
+                }], refresh: [{
+                    type: i0.Output
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockPopoverComponent = /** @class */ (function () {
         function MockPopoverComponent() {
-            this.willHide = new core.EventEmitter();
+            this.willHide = new i0.EventEmitter();
         }
         return MockPopoverComponent;
     }());
-    MockPopoverComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-popover',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.PopoverComponent,
-                            useExisting: core.forwardRef(function () { return MockPopoverComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockPopoverComponent.propDecorators = {
-        popout: [{ type: core.Input }],
-        target: [{ type: core.Input }],
-        willHide: [{ type: core.Output }]
-    };
-    // #endregion
+    /** @nocollapse */ MockPopoverComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockPopoverComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockPopoverComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockPopoverComponent, selector: "kirby-popover", inputs: { popout: "popout", target: "target" }, outputs: { willHide: "willHide" }, providers: [
+            {
+                provide: designsystem.PopoverComponent,
+                useExisting: i0.forwardRef((function () { return MockPopoverComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockPopoverComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-popover',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.PopoverComponent,
+                                useExisting: i0.forwardRef((function () { return MockPopoverComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { popout: [{
+                    type: i0.Input
+                }], target: [{
+                    type: i0.Input
+                }], willHide: [{
+                    type: i0.Output
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockProgressCircleComponent = /** @class */ (function () {
@@ -1158,55 +1632,76 @@
         }
         return MockProgressCircleComponent;
     }());
-    MockProgressCircleComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-progress-circle',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.ProgressCircleComponent,
-                            useExisting: core.forwardRef(function () { return MockProgressCircleComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockProgressCircleComponent.propDecorators = {
-        value: [{ type: core.Input }],
-        size: [{ type: core.Input }],
-        themeColor: [{ type: core.Input }]
-    };
-    // #endregion
+    /** @nocollapse */ MockProgressCircleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockProgressCircleComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockProgressCircleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockProgressCircleComponent, selector: "kirby-progress-circle", inputs: { value: "value", size: "size", themeColor: "themeColor" }, providers: [
+            {
+                provide: designsystem.ProgressCircleComponent,
+                useExisting: i0.forwardRef((function () { return MockProgressCircleComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockProgressCircleComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-progress-circle',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.ProgressCircleComponent,
+                                useExisting: i0.forwardRef((function () { return MockProgressCircleComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { value: [{
+                    type: i0.Input
+                }], size: [{
+                    type: i0.Input
+                }], themeColor: [{
+                    type: i0.Input
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockRadioGroupComponent = /** @class */ (function () {
         function MockRadioGroupComponent() {
-            this.valueChange = new core.EventEmitter();
+            this.valueChange = new i0.EventEmitter();
         }
         return MockRadioGroupComponent;
     }());
-    MockRadioGroupComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-radio-group',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.RadioGroupComponent,
-                            useExisting: core.forwardRef(function () { return MockRadioGroupComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockRadioGroupComponent.propDecorators = {
-        disabled: [{ type: core.Input }],
-        hasError: [{ type: core.Input }],
-        items: [{ type: core.Input }],
-        itemTextProperty: [{ type: core.Input }],
-        itemDisabledProperty: [{ type: core.Input }],
-        selectedIndex: [{ type: core.Input }],
-        value: [{ type: core.Input }],
-        valueChange: [{ type: core.Output }]
-    };
-    // #endregion
+    /** @nocollapse */ MockRadioGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockRadioGroupComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockRadioGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockRadioGroupComponent, selector: "kirby-radio-group", inputs: { disabled: "disabled", hasError: "hasError", items: "items", itemTextProperty: "itemTextProperty", itemDisabledProperty: "itemDisabledProperty", selectedIndex: "selectedIndex", value: "value" }, outputs: { valueChange: "valueChange" }, providers: [
+            {
+                provide: designsystem.RadioGroupComponent,
+                useExisting: i0.forwardRef((function () { return MockRadioGroupComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockRadioGroupComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-radio-group',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.RadioGroupComponent,
+                                useExisting: i0.forwardRef((function () { return MockRadioGroupComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { disabled: [{
+                    type: i0.Input
+                }], hasError: [{
+                    type: i0.Input
+                }], items: [{
+                    type: i0.Input
+                }], itemTextProperty: [{
+                    type: i0.Input
+                }], itemDisabledProperty: [{
+                    type: i0.Input
+                }], selectedIndex: [{
+                    type: i0.Input
+                }], value: [{
+                    type: i0.Input
+                }], valueChange: [{
+                    type: i0.Output
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockRadioComponent = /** @class */ (function () {
@@ -1214,30 +1709,39 @@
         }
         return MockRadioComponent;
     }());
-    MockRadioComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-radio',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.RadioComponent,
-                            useExisting: core.forwardRef(function () { return MockRadioComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockRadioComponent.propDecorators = {
-        value: [{ type: core.Input }],
-        text: [{ type: core.Input }],
-        size: [{ type: core.Input }],
-        disabled: [{ type: core.Input }]
-    };
-    // #endregion
+    /** @nocollapse */ MockRadioComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockRadioComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockRadioComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockRadioComponent, selector: "kirby-radio", inputs: { value: "value", text: "text", size: "size", disabled: "disabled" }, providers: [
+            {
+                provide: designsystem.RadioComponent,
+                useExisting: i0.forwardRef((function () { return MockRadioComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockRadioComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-radio',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.RadioComponent,
+                                useExisting: i0.forwardRef((function () { return MockRadioComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { value: [{
+                    type: i0.Input
+                }], text: [{
+                    type: i0.Input
+                }], size: [{
+                    type: i0.Input
+                }], disabled: [{
+                    type: i0.Input
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockRangeComponent = /** @class */ (function () {
         function MockRangeComponent() {
-            this.change = new core.EventEmitter();
+            this.change = new i0.EventEmitter();
         }
         MockRangeComponent.prototype.setDisabledState = function () { };
         MockRangeComponent.prototype.writeValue = function () { };
@@ -1245,61 +1749,87 @@
         MockRangeComponent.prototype.registerOnChange = function () { };
         return MockRangeComponent;
     }());
-    MockRangeComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-range',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.RangeComponent,
-                            useExisting: core.forwardRef(function () { return MockRangeComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockRangeComponent.propDecorators = {
-        minLabel: [{ type: core.Input }],
-        maxLabel: [{ type: core.Input }],
-        debounce: [{ type: core.Input }],
-        max: [{ type: core.Input }],
-        min: [{ type: core.Input }],
-        pin: [{ type: core.Input }],
-        step: [{ type: core.Input }],
-        ticks: [{ type: core.Input }],
-        disabled: [{ type: core.Input }],
-        value: [{ type: core.Input }],
-        change: [{ type: core.Output }]
-    };
-    // #endregion
+    /** @nocollapse */ MockRangeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockRangeComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockRangeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockRangeComponent, selector: "kirby-range", inputs: { minLabel: "minLabel", maxLabel: "maxLabel", debounce: "debounce", max: "max", min: "min", pin: "pin", step: "step", ticks: "ticks", disabled: "disabled", value: "value" }, outputs: { change: "change" }, providers: [
+            {
+                provide: designsystem.RangeComponent,
+                useExisting: i0.forwardRef((function () { return MockRangeComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockRangeComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-range',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.RangeComponent,
+                                useExisting: i0.forwardRef((function () { return MockRangeComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { minLabel: [{
+                    type: i0.Input
+                }], maxLabel: [{
+                    type: i0.Input
+                }], debounce: [{
+                    type: i0.Input
+                }], max: [{
+                    type: i0.Input
+                }], min: [{
+                    type: i0.Input
+                }], pin: [{
+                    type: i0.Input
+                }], step: [{
+                    type: i0.Input
+                }], ticks: [{
+                    type: i0.Input
+                }], disabled: [{
+                    type: i0.Input
+                }], value: [{
+                    type: i0.Input
+                }], change: [{
+                    type: i0.Output
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockReorderListComponent = /** @class */ (function () {
         function MockReorderListComponent() {
-            this.itemReorder = new core.EventEmitter();
-            this.subItemReorder = new core.EventEmitter();
+            this.itemReorder = new i0.EventEmitter();
+            this.subItemReorder = new i0.EventEmitter();
         }
         return MockReorderListComponent;
     }());
-    MockReorderListComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-reorder-list',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.ReorderListComponent,
-                            useExisting: core.forwardRef(function () { return MockReorderListComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockReorderListComponent.propDecorators = {
-        items: [{ type: core.Input }],
-        subItemsName: [{ type: core.Input }],
-        getItemTextDefault: [{ type: core.Input }],
-        itemReorder: [{ type: core.Output }],
-        subItemReorder: [{ type: core.Output }]
-    };
-    // #endregion
+    /** @nocollapse */ MockReorderListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockReorderListComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockReorderListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockReorderListComponent, selector: "kirby-reorder-list", inputs: { items: "items", subItemsName: "subItemsName", getItemTextDefault: "getItemTextDefault" }, outputs: { itemReorder: "itemReorder", subItemReorder: "subItemReorder" }, providers: [
+            {
+                provide: designsystem.ReorderListComponent,
+                useExisting: i0.forwardRef((function () { return MockReorderListComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockReorderListComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-reorder-list',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.ReorderListComponent,
+                                useExisting: i0.forwardRef((function () { return MockReorderListComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { items: [{
+                    type: i0.Input
+                }], subItemsName: [{
+                    type: i0.Input
+                }], getItemTextDefault: [{
+                    type: i0.Input
+                }], itemReorder: [{
+                    type: i0.Output
+                }], subItemReorder: [{
+                    type: i0.Output
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockRouterOutletComponent = /** @class */ (function () {
@@ -1307,22 +1837,28 @@
         }
         return MockRouterOutletComponent;
     }());
-    MockRouterOutletComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-router-outlet',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.RouterOutletComponent,
-                            useExisting: core.forwardRef(function () { return MockRouterOutletComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockRouterOutletComponent.propDecorators = {
-        main: [{ type: core.Input }]
-    };
-    // #endregion
+    /** @nocollapse */ MockRouterOutletComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockRouterOutletComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockRouterOutletComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockRouterOutletComponent, selector: "kirby-router-outlet", inputs: { main: "main" }, providers: [
+            {
+                provide: designsystem.RouterOutletComponent,
+                useExisting: i0.forwardRef((function () { return MockRouterOutletComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockRouterOutletComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-router-outlet',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.RouterOutletComponent,
+                                useExisting: i0.forwardRef((function () { return MockRouterOutletComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { main: [{
+                    type: i0.Input
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockSectionHeaderComponent = /** @class */ (function () {
@@ -1330,76 +1866,157 @@
         }
         return MockSectionHeaderComponent;
     }());
-    MockSectionHeaderComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-section-header',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.SectionHeaderComponent,
-                            useExisting: core.forwardRef(function () { return MockSectionHeaderComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    // #endregion
+    /** @nocollapse */ MockSectionHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockSectionHeaderComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockSectionHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockSectionHeaderComponent, selector: "kirby-section-header", providers: [
+            {
+                provide: designsystem.SectionHeaderComponent,
+                useExisting: i0.forwardRef((function () { return MockSectionHeaderComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockSectionHeaderComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-section-header',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.SectionHeaderComponent,
+                                useExisting: i0.forwardRef((function () { return MockSectionHeaderComponent; })),
+                            },
+                        ],
+                    }]
+            }] });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockSegmentedControlComponent = /** @class */ (function () {
         function MockSegmentedControlComponent() {
-            this.segmentSelect = new core.EventEmitter();
+            this.segmentSelect = new i0.EventEmitter();
         }
         return MockSegmentedControlComponent;
     }());
-    MockSegmentedControlComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-segmented-control',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.SegmentedControlComponent,
-                            useExisting: core.forwardRef(function () { return MockSegmentedControlComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockSegmentedControlComponent.propDecorators = {
-        mode: [{ type: core.Input }],
-        items: [{ type: core.Input }],
-        selectedIndex: [{ type: core.Input }],
-        value: [{ type: core.Input }],
-        size: [{ type: core.Input }],
-        segmentSelect: [{ type: core.Output }]
-    };
-    // #endregion
+    /** @nocollapse */ MockSegmentedControlComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockSegmentedControlComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockSegmentedControlComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockSegmentedControlComponent, selector: "kirby-segmented-control", inputs: { mode: "mode", items: "items", selectedIndex: "selectedIndex", value: "value", size: "size" }, outputs: { segmentSelect: "segmentSelect" }, providers: [
+            {
+                provide: designsystem.SegmentedControlComponent,
+                useExisting: i0.forwardRef((function () { return MockSegmentedControlComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockSegmentedControlComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-segmented-control',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.SegmentedControlComponent,
+                                useExisting: i0.forwardRef((function () { return MockSegmentedControlComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { mode: [{
+                    type: i0.Input
+                }], items: [{
+                    type: i0.Input
+                }], selectedIndex: [{
+                    type: i0.Input
+                }], value: [{
+                    type: i0.Input
+                }], size: [{
+                    type: i0.Input
+                }], segmentSelect: [{
+                    type: i0.Output
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockSlideButtonComponent = /** @class */ (function () {
         function MockSlideButtonComponent() {
-            this.slideDone = new core.EventEmitter();
-            this.slidingPercentageChanged = new core.EventEmitter();
+            this.slideDone = new i0.EventEmitter();
+            this.slidingPercentageChanged = new i0.EventEmitter();
         }
         return MockSlideButtonComponent;
     }());
-    MockSlideButtonComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-slide-button',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.SlideButtonComponent,
-                            useExisting: core.forwardRef(function () { return MockSlideButtonComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockSlideButtonComponent.propDecorators = {
-        text: [{ type: core.Input }],
-        expand: [{ type: core.Input }],
-        slideDone: [{ type: core.Output }],
-        slidingPercentageChanged: [{ type: core.Output }]
-    };
-    // #endregion
+    /** @nocollapse */ MockSlideButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockSlideButtonComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockSlideButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockSlideButtonComponent, selector: "kirby-slide-button", inputs: { text: "text", expand: "expand" }, outputs: { slideDone: "slideDone", slidingPercentageChanged: "slidingPercentageChanged" }, providers: [
+            {
+                provide: designsystem.SlideButtonComponent,
+                useExisting: i0.forwardRef((function () { return MockSlideButtonComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockSlideButtonComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-slide-button',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.SlideButtonComponent,
+                                useExisting: i0.forwardRef((function () { return MockSlideButtonComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { text: [{
+                    type: i0.Input
+                }], expand: [{
+                    type: i0.Input
+                }], slideDone: [{
+                    type: i0.Output
+                }], slidingPercentageChanged: [{
+                    type: i0.Output
+                }] } });
+
+    var MockSlideDirective = /** @class */ (function () {
+        function MockSlideDirective() {
+        }
+        return MockSlideDirective;
+    }());
+    /** @nocollapse */ MockSlideDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockSlideDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ MockSlideDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: MockSlideDirective, selector: "[kirbySlide]", providers: [
+            {
+                provide: designsystem.SlideDirective,
+                useExisting: i0.forwardRef((function () { return MockSlideDirective; })),
+            },
+        ], ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockSlideDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[kirbySlide]',
+                        providers: [
+                            {
+                                provide: designsystem.SlideDirective,
+                                useExisting: i0.forwardRef((function () { return MockSlideDirective; })),
+                            },
+                        ],
+                    }]
+            }] });
+    var MockSlidesComponent = /** @class */ (function () {
+        function MockSlidesComponent() {
+        }
+        return MockSlidesComponent;
+    }());
+    /** @nocollapse */ MockSlidesComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockSlidesComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockSlidesComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockSlidesComponent, selector: "kirby-slides", inputs: { slidesOptions: "slidesOptions", slides: "slides" }, providers: [
+            {
+                provide: designsystem.SlidesComponent,
+                useExisting: i0.forwardRef((function () { return MockSlidesComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockSlidesComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-slides',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.SlidesComponent,
+                                useExisting: i0.forwardRef((function () { return MockSlidesComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { slidesOptions: [{
+                    type: i0.Input
+                }], slides: [{
+                    type: i0.Input
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockSpinnerComponent = /** @class */ (function () {
@@ -1407,44 +2024,58 @@
         }
         return MockSpinnerComponent;
     }());
-    MockSpinnerComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-spinner',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.SpinnerComponent,
-                            useExisting: core.forwardRef(function () { return MockSpinnerComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    // #endregion
+    /** @nocollapse */ MockSpinnerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockSpinnerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockSpinnerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockSpinnerComponent, selector: "kirby-spinner", providers: [
+            {
+                provide: designsystem.SpinnerComponent,
+                useExisting: i0.forwardRef((function () { return MockSpinnerComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockSpinnerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-spinner',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.SpinnerComponent,
+                                useExisting: i0.forwardRef((function () { return MockSpinnerComponent; })),
+                            },
+                        ],
+                    }]
+            }] });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockTabButtonComponent = /** @class */ (function () {
         function MockTabButtonComponent() {
-            this.click = new core.EventEmitter();
+            this.click = new i0.EventEmitter();
         }
         return MockTabButtonComponent;
     }());
-    MockTabButtonComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-tab-button',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.TabButtonComponent,
-                            useExisting: core.forwardRef(function () { return MockTabButtonComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockTabButtonComponent.propDecorators = {
-        routerLink: [{ type: core.Input }],
-        click: [{ type: core.Output }]
-    };
-    // #endregion
+    /** @nocollapse */ MockTabButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockTabButtonComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockTabButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockTabButtonComponent, selector: "kirby-tab-button", inputs: { routerLink: "routerLink" }, outputs: { click: "click" }, providers: [
+            {
+                provide: designsystem.TabButtonComponent,
+                useExisting: i0.forwardRef((function () { return MockTabButtonComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockTabButtonComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-tab-button',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.TabButtonComponent,
+                                useExisting: i0.forwardRef((function () { return MockTabButtonComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { routerLink: [{
+                    type: i0.Input
+                }], click: [{
+                    type: i0.Output
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockTabsComponent = /** @class */ (function () {
@@ -1452,19 +2083,26 @@
         }
         return MockTabsComponent;
     }());
-    MockTabsComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-tab-bar',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.TabsComponent,
-                            useExisting: core.forwardRef(function () { return MockTabsComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    // #endregion
+    /** @nocollapse */ MockTabsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockTabsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockTabsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockTabsComponent, selector: "kirby-tab-bar", providers: [
+            {
+                provide: designsystem.TabsComponent,
+                useExisting: i0.forwardRef((function () { return MockTabsComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockTabsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-tab-bar',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.TabsComponent,
+                                useExisting: i0.forwardRef((function () { return MockTabsComponent; })),
+                            },
+                        ],
+                    }]
+            }] });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockTextareaComponent = /** @class */ (function () {
@@ -1472,79 +2110,220 @@
         }
         return MockTextareaComponent;
     }());
-    MockTextareaComponent.decorators = [
-        { type: core.Component, args: [{
-                    // tslint:disable-next-line: component-selector
-                    selector: 'textarea[kirby-textarea]',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.TextareaComponent,
-                            useExisting: core.forwardRef(function () { return MockTextareaComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockTextareaComponent.propDecorators = {
-        value: [{ type: core.Input }],
-        borderless: [{ type: core.Input }],
-        hasError: [{ type: core.Input }],
-        autocomplete: [{ type: core.Input }],
-        autocorrect: [{ type: core.Input }],
-        maxlength: [{ type: core.Input }]
-    };
-    // #endregion
+    /** @nocollapse */ MockTextareaComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockTextareaComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockTextareaComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockTextareaComponent, selector: "textarea[kirby-textarea]", inputs: { value: "value", borderless: "borderless", hasError: "hasError", autocomplete: "autocomplete", autocorrect: "autocorrect", maxlength: "maxlength" }, providers: [
+            {
+                provide: designsystem.TextareaComponent,
+                useExisting: i0.forwardRef((function () { return MockTextareaComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockTextareaComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        // tslint:disable-next-line: component-selector
+                        selector: 'textarea[kirby-textarea]',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.TextareaComponent,
+                                useExisting: i0.forwardRef((function () { return MockTextareaComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { value: [{
+                    type: i0.Input
+                }], borderless: [{
+                    type: i0.Input
+                }], hasError: [{
+                    type: i0.Input
+                }], autocomplete: [{
+                    type: i0.Input
+                }], autocorrect: [{
+                    type: i0.Input
+                }], maxlength: [{
+                    type: i0.Input
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockToggleButtonComponent = /** @class */ (function () {
         function MockToggleButtonComponent() {
-            this.checkChanged = new core.EventEmitter();
+            this.checkChanged = new i0.EventEmitter();
         }
         return MockToggleButtonComponent;
     }());
-    MockToggleButtonComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-toggle-button',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.ToggleButtonComponent,
-                            useExisting: core.forwardRef(function () { return MockToggleButtonComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockToggleButtonComponent.propDecorators = {
-        checked: [{ type: core.Input }],
-        checkChanged: [{ type: core.Output }]
-    };
-    // #endregion
+    /** @nocollapse */ MockToggleButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockToggleButtonComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockToggleButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockToggleButtonComponent, selector: "kirby-toggle-button", inputs: { checked: "checked" }, outputs: { checkChanged: "checkChanged" }, providers: [
+            {
+                provide: designsystem.ToggleButtonComponent,
+                useExisting: i0.forwardRef((function () { return MockToggleButtonComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockToggleButtonComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-toggle-button',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.ToggleButtonComponent,
+                                useExisting: i0.forwardRef((function () { return MockToggleButtonComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { checked: [{
+                    type: i0.Input
+                }], checkChanged: [{
+                    type: i0.Output
+                }] } });
 
     // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
     var MockToggleComponent = /** @class */ (function () {
         function MockToggleComponent() {
-            this.checkedChange = new core.EventEmitter();
+            this.checkedChange = new i0.EventEmitter();
         }
         return MockToggleComponent;
     }());
-    MockToggleComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kirby-toggle',
-                    template: '<ng-content></ng-content>',
-                    providers: [
-                        {
-                            provide: designsystem.ToggleComponent,
-                            useExisting: core.forwardRef(function () { return MockToggleComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MockToggleComponent.propDecorators = {
-        checked: [{ type: core.Input }],
-        disabled: [{ type: core.Input }],
-        checkedChange: [{ type: core.Output }]
-    };
-    // #endregion
+    /** @nocollapse */ MockToggleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockToggleComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockToggleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockToggleComponent, selector: "kirby-toggle", inputs: { checked: "checked", disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, providers: [
+            {
+                provide: designsystem.ToggleComponent,
+                useExisting: i0.forwardRef((function () { return MockToggleComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockToggleComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-toggle',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.ToggleComponent,
+                                useExisting: i0.forwardRef((function () { return MockToggleComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { checked: [{
+                    type: i0.Input
+                }], disabled: [{
+                    type: i0.Input
+                }], checkedChange: [{
+                    type: i0.Output
+                }] } });
+
+    // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
+    var MockBadgeComponent = /** @class */ (function () {
+        function MockBadgeComponent() {
+        }
+        return MockBadgeComponent;
+    }());
+    /** @nocollapse */ MockBadgeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockBadgeComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ MockBadgeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MockBadgeComponent, selector: "kirby-badge", inputs: { size: "size", text: "text", themeColor: "themeColor" }, providers: [
+            {
+                provide: designsystem.BadgeComponent,
+                useExisting: i0.forwardRef((function () { return MockBadgeComponent; })),
+            },
+        ], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockBadgeComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kirby-badge',
+                        template: '<ng-content></ng-content>',
+                        providers: [
+                            {
+                                provide: designsystem.BadgeComponent,
+                                useExisting: i0.forwardRef((function () { return MockBadgeComponent; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { size: [{
+                    type: i0.Input
+                }], text: [{
+                    type: i0.Input
+                }], themeColor: [{
+                    type: i0.Input
+                }] } });
+
+    var MockAccordionDirective = /** @class */ (function () {
+        function MockAccordionDirective() {
+        }
+        return MockAccordionDirective;
+    }());
+    /** @nocollapse */ MockAccordionDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockAccordionDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ MockAccordionDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: MockAccordionDirective, selector: "[kirbyAccordion], kirby-accordion", providers: [
+            {
+                provide: designsystem.AccordionDirective,
+                useExisting: i0.forwardRef((function () { return MockAccordionDirective; })),
+            },
+        ], exportAs: ["kirby-accordion"], ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockAccordionDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[kirbyAccordion], kirby-accordion',
+                        exportAs: 'kirby-accordion',
+                        providers: [
+                            {
+                                provide: designsystem.AccordionDirective,
+                                useExisting: i0.forwardRef((function () { return MockAccordionDirective; })),
+                            },
+                        ],
+                    }]
+            }] });
+
+    var MockFitHeadingDirective = /** @class */ (function () {
+        function MockFitHeadingDirective() {
+        }
+        return MockFitHeadingDirective;
+    }());
+    /** @nocollapse */ MockFitHeadingDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockFitHeadingDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ MockFitHeadingDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: MockFitHeadingDirective, selector: "h1[kirbyFitHeading],\n             h2[kirbyFitHeading],\n             h3[kirbyFitHeading]", inputs: { config: ["kirbyFitHeading", "config"] }, providers: [
+            {
+                provide: designsystem.FitHeadingDirective,
+                useExisting: i0.forwardRef((function () { return MockFitHeadingDirective; })),
+            },
+        ], ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockFitHeadingDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: "h1[kirbyFitHeading],\n             h2[kirbyFitHeading],\n             h3[kirbyFitHeading]",
+                        providers: [
+                            {
+                                provide: designsystem.FitHeadingDirective,
+                                useExisting: i0.forwardRef((function () { return MockFitHeadingDirective; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { config: [{
+                    type: i0.Input,
+                    args: ['kirbyFitHeading']
+                }] } });
+
+    var MockThemeColorDirective = /** @class */ (function () {
+        function MockThemeColorDirective() {
+        }
+        return MockThemeColorDirective;
+    }());
+    /** @nocollapse */ MockThemeColorDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockThemeColorDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ MockThemeColorDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: MockThemeColorDirective, selector: "kirby-card[themeColor],\n             kirby-icon[themeColor],\n             kirby-empty-state[themeColor]", inputs: { themeColor: "themeColor" }, providers: [
+            {
+                provide: designsystem.ThemeColorDirective,
+                useExisting: i0.forwardRef((function () { return MockThemeColorDirective; })),
+            },
+        ], ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MockThemeColorDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        // tslint:disable-next-line:directive-selector
+                        selector: "kirby-card[themeColor],\n             kirby-icon[themeColor],\n             kirby-empty-state[themeColor]",
+                        providers: [
+                            {
+                                provide: designsystem.ThemeColorDirective,
+                                useExisting: i0.forwardRef((function () { return MockThemeColorDirective; })),
+                            },
+                        ],
+                    }]
+            }], propDecorators: { themeColor: [{
+                    type: i0.Input
+                }] } });
 
     // AUTO-GENERATED - PLEASE DON'T EDIT THIS FILE MANUALLY
     var MOCK_COMPONENTS = [
@@ -1586,6 +2365,7 @@
         MockModalFooterComponent,
         MockPageFooterComponent,
         MockPageTitleDirective,
+        MockPageSubtitleDirective,
         MockPageToolbarTitleDirective,
         MockPageActionsDirective,
         MockPageContentDirective,
@@ -1609,67 +2389,9 @@
         MockTabsComponent,
         MockToggleComponent,
         MockToggleButtonComponent,
+        MockBadgeComponent,
     ];
 
-    var MockAccordionDirective = /** @class */ (function () {
-        function MockAccordionDirective() {
-        }
-        return MockAccordionDirective;
-    }());
-    MockAccordionDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[kirbyAccordion], kirby-accordion',
-                    exportAs: 'kirby-accordion',
-                    providers: [
-                        {
-                            provide: designsystem.AccordionDirective,
-                            useExisting: core.forwardRef(function () { return MockAccordionDirective; }),
-                        },
-                    ],
-                },] }
-    ];
-
-    var MockFitHeadingDirective = /** @class */ (function () {
-        function MockFitHeadingDirective() {
-        }
-        return MockFitHeadingDirective;
-    }());
-    MockFitHeadingDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: "h1[kirbyFitHeading],\n             h2[kirbyFitHeading],\n             h3[kirbyFitHeading]",
-                    providers: [
-                        {
-                            provide: designsystem.FitHeadingDirective,
-                            useExisting: core.forwardRef(function () { return MockFitHeadingDirective; }),
-                        },
-                    ],
-                },] }
-    ];
-    MockFitHeadingDirective.propDecorators = {
-        config: [{ type: core.Input, args: ['kirbyFitHeading',] }]
-    };
-
-    var MockThemeColorDirective = /** @class */ (function () {
-        function MockThemeColorDirective() {
-        }
-        return MockThemeColorDirective;
-    }());
-    MockThemeColorDirective.decorators = [
-        { type: core.Directive, args: [{
-                    // tslint:disable-next-line:directive-selector
-                    selector: "kirby-card[themeColor],\n             kirby-icon[themeColor],\n             kirby-empty-state[themeColor]",
-                    providers: [
-                        {
-                            provide: designsystem.ThemeColorDirective,
-                            useExisting: core.forwardRef(function () { return MockThemeColorDirective; }),
-                        },
-                    ],
-                },] }
-    ];
-    MockThemeColorDirective.propDecorators = {
-        themeColor: [{ type: core.Input }]
-    };
-
     var MOCK_DIRECTIVES = [
         MockThemeColorDirective,
         MockFitHeadingDirective,
@@ -1681,86 +2403,92 @@
         }
         return KirbyTestingBaseModule;
     }());
-    KirbyTestingBaseModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [MOCK_COMPONENTS, MOCK_DIRECTIVES],
-                    exports: [MOCK_COMPONENTS, MOCK_DIRECTIVES],
-                },] }
-    ];
+    /** @nocollapse */ KirbyTestingBaseModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KirbyTestingBaseModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    /** @nocollapse */ KirbyTestingBaseModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KirbyTestingBaseModule, declarations: [MockAccordionItemComponent, MockAppComponent, MockAvatarComponent, MockButtonComponent, MockCalendarComponent, MockCardFooterComponent, MockCardHeaderComponent, MockCardComponent, MockChartComponent, MockChartDeprecatedComponent, MockCheckboxComponent, MockChipComponent, MockDividerComponent, MockDropdownComponent, MockEmptyStateComponent, MockFabSheetComponent, MockFlagComponent, MockFormFieldMessageComponent, MockFormFieldComponent, MockInputComponent, MockInputCounterComponent, MockTextareaComponent, MockGridComponent, MockIconComponent, MockItemComponent, MockLabelComponent, MockItemGroupComponent, MockItemSlidingComponent, MockListExperimentalComponent, MockListHeaderComponent, MockListItemComponent, MockListSectionHeaderComponent, MockListComponent, MockLoadingOverlayComponent, MockActionSheetComponent, MockModalFooterComponent, MockPageFooterComponent, MockPageTitleDirective, MockPageSubtitleDirective, MockPageToolbarTitleDirective, MockPageActionsDirective, MockPageContentDirective, MockPageProgressComponent, MockPageTitleComponent, MockPageContentComponent, MockPageActionsComponent, MockPageComponent, MockPopoverComponent, MockProgressCircleComponent, MockRadioGroupComponent, MockRadioComponent, MockRangeComponent, MockReorderListComponent, MockRouterOutletComponent, MockSectionHeaderComponent, MockSegmentedControlComponent, MockSlideButtonComponent, MockSpinnerComponent, MockTabButtonComponent, MockTabsComponent, MockToggleComponent, MockToggleButtonComponent, MockBadgeComponent, MockThemeColorDirective, MockFitHeadingDirective, MockAccordionDirective], exports: [MockAccordionItemComponent, MockAppComponent, MockAvatarComponent, MockButtonComponent, MockCalendarComponent, MockCardFooterComponent, MockCardHeaderComponent, MockCardComponent, MockChartComponent, MockChartDeprecatedComponent, MockCheckboxComponent, MockChipComponent, MockDividerComponent, MockDropdownComponent, MockEmptyStateComponent, MockFabSheetComponent, MockFlagComponent, MockFormFieldMessageComponent, MockFormFieldComponent, MockInputComponent, MockInputCounterComponent, MockTextareaComponent, MockGridComponent, MockIconComponent, MockItemComponent, MockLabelComponent, MockItemGroupComponent, MockItemSlidingComponent, MockListExperimentalComponent, MockListHeaderComponent, MockListItemComponent, MockListSectionHeaderComponent, MockListComponent, MockLoadingOverlayComponent, MockActionSheetComponent, MockModalFooterComponent, MockPageFooterComponent, MockPageTitleDirective, MockPageSubtitleDirective, MockPageToolbarTitleDirective, MockPageActionsDirective, MockPageContentDirective, MockPageProgressComponent, MockPageTitleComponent, MockPageContentComponent, MockPageActionsComponent, MockPageComponent, MockPopoverComponent, MockProgressCircleComponent, MockRadioGroupComponent, MockRadioComponent, MockRangeComponent, MockReorderListComponent, MockRouterOutletComponent, MockSectionHeaderComponent, MockSegmentedControlComponent, MockSlideButtonComponent, MockSpinnerComponent, MockTabButtonComponent, MockTabsComponent, MockToggleComponent, MockToggleButtonComponent, MockBadgeComponent, MockThemeColorDirective, MockFitHeadingDirective, MockAccordionDirective] });
+    /** @nocollapse */ KirbyTestingBaseModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KirbyTestingBaseModule });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KirbyTestingBaseModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [MOCK_COMPONENTS, MOCK_DIRECTIVES],
+                        exports: [MOCK_COMPONENTS, MOCK_DIRECTIVES],
+                    }]
+            }] });
 
     /**
      * Generated bundle index. Do not edit.
      */
 
     exports.KirbyTestingBaseModule = KirbyTestingBaseModule;
-    exports.ɵa = MOCK_COMPONENTS;
-    exports.ɵb = MockAccordionItemComponent;
-    exports.ɵba = MockLabelComponent;
-    exports.ɵbb = MockItemGroupComponent;
-    exports.ɵbc = MockItemSlidingComponent;
-    exports.ɵbd = MockListExperimentalComponent;
-    exports.ɵbe = MockListHeaderComponent;
-    exports.ɵbf = MockListItemComponent;
-    exports.ɵbg = MockListSectionHeaderComponent;
-    exports.ɵbh = MockListComponent;
-    exports.ɵbi = MockLoadingOverlayComponent;
-    exports.ɵbj = MockActionSheetComponent;
-    exports.ɵbk = MockModalFooterComponent;
-    exports.ɵbl = MockPageFooterComponent;
-    exports.ɵbm = MockPageTitleDirective;
-    exports.ɵbn = MockPageToolbarTitleDirective;
-    exports.ɵbo = MockPageActionsDirective;
-    exports.ɵbp = MockPageContentDirective;
-    exports.ɵbq = MockPageProgressComponent;
-    exports.ɵbr = MockPageTitleComponent;
-    exports.ɵbs = MockPageContentComponent;
-    exports.ɵbt = MockPageActionsComponent;
-    exports.ɵbu = MockPageComponent;
-    exports.ɵbv = MockPopoverComponent;
-    exports.ɵbw = MockProgressCircleComponent;
-    exports.ɵbx = MockRadioGroupComponent;
-    exports.ɵby = MockRadioComponent;
-    exports.ɵbz = MockRangeComponent;
-    exports.ɵc = MockAppComponent;
-    exports.ɵca = MockReorderListComponent;
-    exports.ɵcb = MockRouterOutletComponent;
-    exports.ɵcc = MockSectionHeaderComponent;
-    exports.ɵcd = MockSegmentedControlComponent;
-    exports.ɵce = MockSlideButtonComponent;
-    exports.ɵcf = MockSpinnerComponent;
-    exports.ɵcg = MockTabButtonComponent;
-    exports.ɵch = MockTabsComponent;
-    exports.ɵci = MockToggleComponent;
-    exports.ɵcj = MockToggleButtonComponent;
-    exports.ɵck = MOCK_DIRECTIVES;
-    exports.ɵcl = MockThemeColorDirective;
-    exports.ɵcm = MockFitHeadingDirective;
-    exports.ɵcn = MockAccordionDirective;
-    exports.ɵd = MockAvatarComponent;
-    exports.ɵe = MockButtonComponent;
-    exports.ɵf = MockCalendarComponent;
-    exports.ɵg = MockCardFooterComponent;
-    exports.ɵh = MockCardHeaderComponent;
-    exports.ɵi = MockCardComponent;
-    exports.ɵj = MockChartComponent;
-    exports.ɵk = MockChartDeprecatedComponent;
-    exports.ɵl = MockCheckboxComponent;
-    exports.ɵm = MockChipComponent;
-    exports.ɵn = MockDividerComponent;
-    exports.ɵo = MockDropdownComponent;
-    exports.ɵp = MockEmptyStateComponent;
-    exports.ɵq = MockFabSheetComponent;
-    exports.ɵr = MockFlagComponent;
-    exports.ɵs = MockFormFieldMessageComponent;
-    exports.ɵt = MockFormFieldComponent;
-    exports.ɵu = MockInputComponent;
-    exports.ɵv = MockInputCounterComponent;
-    exports.ɵw = MockTextareaComponent;
-    exports.ɵx = MockGridComponent;
-    exports.ɵy = MockIconComponent;
-    exports.ɵz = MockItemComponent;
+    exports.MockAccordionDirective = MockAccordionDirective;
+    exports.MockAccordionItemComponent = MockAccordionItemComponent;
+    exports.MockActionSheetComponent = MockActionSheetComponent;
+    exports.MockAppComponent = MockAppComponent;
+    exports.MockAvatarComponent = MockAvatarComponent;
+    exports.MockBadgeComponent = MockBadgeComponent;
+    exports.MockButtonComponent = MockButtonComponent;
+    exports.MockCalendarComponent = MockCalendarComponent;
+    exports.MockCardComponent = MockCardComponent;
+    exports.MockCardFooterComponent = MockCardFooterComponent;
+    exports.MockCardHeaderComponent = MockCardHeaderComponent;
+    exports.MockChartComponent = MockChartComponent;
+    exports.MockChartDeprecatedComponent = MockChartDeprecatedComponent;
+    exports.MockCheckboxComponent = MockCheckboxComponent;
+    exports.MockChipComponent = MockChipComponent;
+    exports.MockDividerComponent = MockDividerComponent;
+    exports.MockDropdownComponent = MockDropdownComponent;
+    exports.MockEmptyStateComponent = MockEmptyStateComponent;
+    exports.MockFabSheetComponent = MockFabSheetComponent;
+    exports.MockFitHeadingDirective = MockFitHeadingDirective;
+    exports.MockFlagComponent = MockFlagComponent;
+    exports.MockFormFieldComponent = MockFormFieldComponent;
+    exports.MockFormFieldMessageComponent = MockFormFieldMessageComponent;
+    exports.MockGridComponent = MockGridComponent;
+    exports.MockIconComponent = MockIconComponent;
+    exports.MockInputComponent = MockInputComponent;
+    exports.MockInputCounterComponent = MockInputCounterComponent;
+    exports.MockItemComponent = MockItemComponent;
+    exports.MockItemGroupComponent = MockItemGroupComponent;
+    exports.MockItemSlidingComponent = MockItemSlidingComponent;
+    exports.MockLabelComponent = MockLabelComponent;
+    exports.MockListComponent = MockListComponent;
+    exports.MockListExperimentalComponent = MockListExperimentalComponent;
+    exports.MockListHeaderComponent = MockListHeaderComponent;
+    exports.MockListItemComponent = MockListItemComponent;
+    exports.MockListSectionHeaderComponent = MockListSectionHeaderComponent;
+    exports.MockLoadingOverlayComponent = MockLoadingOverlayComponent;
+    exports.MockModalFooterComponent = MockModalFooterComponent;
+    exports.MockPageActionsComponent = MockPageActionsComponent;
+    exports.MockPageActionsDirective = MockPageActionsDirective;
+    exports.MockPageComponent = MockPageComponent;
+    exports.MockPageContentComponent = MockPageContentComponent;
+    exports.MockPageContentDirective = MockPageContentDirective;
+    exports.MockPageFooterComponent = MockPageFooterComponent;
+    exports.MockPageProgressComponent = MockPageProgressComponent;
+    exports.MockPageSubtitleDirective = MockPageSubtitleDirective;
+    exports.MockPageTitleComponent = MockPageTitleComponent;
+    exports.MockPageTitleDirective = MockPageTitleDirective;
+    exports.MockPageToolbarTitleDirective = MockPageToolbarTitleDirective;
+    exports.MockPopoverComponent = MockPopoverComponent;
+    exports.MockProgressCircleComponent = MockProgressCircleComponent;
+    exports.MockRadioComponent = MockRadioComponent;
+    exports.MockRadioGroupComponent = MockRadioGroupComponent;
+    exports.MockRangeComponent = MockRangeComponent;
+    exports.MockReorderListComponent = MockReorderListComponent;
+    exports.MockRouterOutletComponent = MockRouterOutletComponent;
+    exports.MockSectionHeaderComponent = MockSectionHeaderComponent;
+    exports.MockSegmentedControlComponent = MockSegmentedControlComponent;
+    exports.MockSlideButtonComponent = MockSlideButtonComponent;
+    exports.MockSlideDirective = MockSlideDirective;
+    exports.MockSlidesComponent = MockSlidesComponent;
+    exports.MockSpinnerComponent = MockSpinnerComponent;
+    exports.MockTabButtonComponent = MockTabButtonComponent;
+    exports.MockTabsComponent = MockTabsComponent;
+    exports.MockTextareaComponent = MockTextareaComponent;
+    exports.MockThemeColorDirective = MockThemeColorDirective;
+    exports.MockToggleButtonComponent = MockToggleButtonComponent;
+    exports.MockToggleComponent = MockToggleComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=kirbydesign-designsystem-testing-base.umd.js.map