@kirbydesign/designsystem 6.0.2 → 6.1.2-rc.ionic

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

@@ -14,7 +14,7 @@ export declare class AvatarComponent {
     overlay: boolean;
     size: AvatarSize | `${AvatarSize}`;
     themeColor: NotificationColor | BrandColor | 'medium' | 'white' | 'dark' | 'light' | 'semi-light';
-    get _cssClass(): ("medium" | "md" | "warning" | "xs" | "sm" | "lg" | "success" | "danger" | "primary" | "secondary" | "tertiary" | "light" | "dark" | AvatarSize | "white" | "semi-light")[];
+    get _cssClass(): ("medium" | "md" | "warning" | "xs" | "sm" | "lg" | "success" | "danger" | AvatarSize | "primary" | "secondary" | "tertiary" | "white" | "dark" | "light" | "semi-light")[];
     static ɵfac: i0.ɵɵFactoryDeclaration<AvatarComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AvatarComponent, "kirby-avatar", never, { "imageSrc": "imageSrc"; "altText": "altText"; "shadow": "shadow"; "text": "text"; "overlay": "overlay"; "size": "size"; "themeColor": "themeColor"; }, {}, never, ["kirby-icon", "kirby-badge"]>;
 }

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

@@ -1,16 +1,15 @@
-import { AfterContentChecked, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, QueryList, Renderer2, TemplateRef } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, QueryList, Renderer2, TemplateRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { HorizontalDirection, PopoverComponent } from '../popover/popover.component';
 import { KeyboardHandlerService } from './keyboard-handler.service';
 import * as i0 from "@angular/core";
-export declare class DropdownComponent implements AfterContentChecked, AfterViewInit, OnDestroy, ControlValueAccessor {
+export declare class DropdownComponent implements AfterViewInit, OnDestroy, ControlValueAccessor {
     private renderer;
     private elementRef;
     private changeDetectorRef;
     private keyboardHandlerService;
     static readonly OPEN_DELAY_IN_MS = 100;
     private state;
-    private hasConfiguredSlottedItems;
     private horizontalDirection;
     private verticalDirection;
     private _items;
@@ -53,7 +52,9 @@ export declare class DropdownComponent implements AfterContentChecked, AfterView
     popover?: PopoverComponent;
     buttonElement: ElementRef<HTMLElement>;
     kirbyItemsDefault: QueryList<ElementRef<HTMLElement>>;
-    kirbyItemsSlotted: QueryList<ElementRef<HTMLElement>>;
+    _kirbyItemsSlotted: QueryList<ElementRef<HTMLElement>>;
+    set kirbyItemsSlotted(kirbyItems: QueryList<ElementRef<HTMLElement>>);
+    get kirbyItemsSlotted(): QueryList<ElementRef<HTMLElement>>;
     private itemClickUnlisten;
     private intersectionObserverRef;
     private showDropdownTimeoutId;
@@ -61,7 +62,6 @@ export declare class DropdownComponent implements AfterContentChecked, AfterView
     onToggle(event: MouseEvent): void;
     toggle(): void;
     onButtonMouseEvent(event: Event): void;
-    ngAfterContentChecked(): void;
     private setPopoverCardStyle;
     ngAfterViewInit(): void;
     private initializeAlignment;
@@ -118,6 +118,7 @@ export declare class DropdownComponent implements AfterContentChecked, AfterView
     _onEnter(event: KeyboardEvent): void;
     _onArrowKeys(event: KeyboardEvent): boolean;
     _onHomeEndKeys(event: KeyboardEvent): boolean;
+    private unlistenAllSlottedItems;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DropdownComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DropdownComponent, "kirby-dropdown", never, { "items": "items"; "selectedIndex": "selectedIndex"; "itemTextProperty": "itemTextProperty"; "placeholder": "placeholder"; "popout": "popout"; "attentionLevel": "attentionLevel"; "expand": "expand"; "disabled": "disabled"; "hasError": "hasError"; "size": "size"; "tabindex": "tabindex"; "usePopover": "usePopover"; }, { "change": "change"; }, ["itemTemplate", "slottedItems", "kirbyItemsSlotted"], never>;

package/lib/components/modal/footer/modal-footer.component.d.ts

@@ -1,7 +1,10 @@
+import { ElementRef } from '@angular/core';
+import { ModalElementComponent, ModalElementsAdvertiser } from '../services/modal.interfaces';
 import * as i0 from "@angular/core";
-export declare class ModalFooterComponent {
+export declare class ModalFooterComponent extends ModalElementComponent {
     snapToKeyboard: boolean;
     type: 'inline' | 'fixed';
-    static ɵfac: i0.ɵɵFactoryDeclaration<ModalFooterComponent, never>;
+    constructor(elementRef: ElementRef<HTMLElement>, modalElementsAdvertiser: ModalElementsAdvertiser);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ModalFooterComponent, [null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ModalFooterComponent, "kirby-modal-footer", never, { "snapToKeyboard": "snapToKeyboard"; "type": "type"; }, {}, never, ["*"]>;
 }

package/lib/components/modal/modal-wrapper/modal-elements-mover.delegate.d.ts

@@ -0,0 +1,14 @@
+import { ElementRef, Renderer2 } from '@angular/core';
+export declare class ModalElementsMoverDelegate {
+    private renderer;
+    private elementRef;
+    constructor(renderer: Renderer2, elementRef: ElementRef<HTMLElement>);
+    addFooter(footerElementRef: ElementRef<HTMLElement>): void;
+    removeFooter(footerElementRef: ElementRef<HTMLElement>): void;
+    addPageProgress(pageProgressElementRef: ElementRef<HTMLElement>, ionToolbarElement: ElementRef<HTMLIonToolbarElement>): void;
+    removePageProgress(pageProgressElementRef: ElementRef<HTMLElement>): void;
+    addTitle(titleElementRef: ElementRef<HTMLElement>, contentTitleElement: ElementRef<HTMLElement>, hasCollapsibleTitle: boolean, ionTitleElement: ElementRef<HTMLIonTitleElement>): void;
+    removeTitle(titleElementRef: ElementRef<HTMLElement>, hasCollapsibleTitle: boolean, contentTitleElement: ElementRef<HTMLElement>): void;
+    private moveChild;
+    private removeChild;
+}

package/lib/components/modal/modal-wrapper/modal-wrapper.component.d.ts

@@ -1,13 +1,14 @@
-import { AfterViewInit, ComponentFactoryResolver, ElementRef, Injector, NgZone, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ComponentFactoryResolver, ElementRef, Injector, NgZone, OnDestroy, OnInit, Renderer2 } from '@angular/core';
 import { Observable } from 'rxjs';
 import { KirbyAnimation } from '../../../animation/kirby-animation';
 import { PlatformService } from '../../../helpers/platform.service';
 import { WindowRef } from '../../../types/window-ref';
 import { ResizeObserverService } from '../../shared/resize-observer/resize-observer.service';
-import { Modal } from '../services/modal.interfaces';
+import { Modal, ModalElementsAdvertiser, ModalElementType } from '../services/modal.interfaces';
 import { ModalConfig } from './config/modal-config';
 import * as i0 from "@angular/core";
-export declare class ModalWrapperComponent implements Modal, AfterViewInit, OnInit, OnDestroy {
+export declare class ModalWrapperComponent implements Modal, AfterViewInit, OnInit, OnDestroy, ModalElementsAdvertiser {
+    private changeDetector;
     private injector;
     private elementRef;
     private renderer;
@@ -30,7 +31,8 @@ export declare class ModalWrapperComponent implements Modal, AfterViewInit, OnIn
     private ionToolbarElement;
     private ionTitleElement;
     private routerOutlet;
-    private contentTitle;
+    private _contentTitleElement;
+    get contentTitleElement(): ElementRef<HTMLElement>;
     private keyboardVisible;
     private toolbarButtons;
     private delayedClose;
@@ -45,24 +47,28 @@ export declare class ModalWrapperComponent implements Modal, AfterViewInit, OnIn
     private viewportResize;
     private viewportResize$;
     private _mutationObserver;
-    private get mutationObserver();
     private _intersectionObserver;
     private get intersectionObserver();
     private destroy$;
     get _isDrawer(): boolean;
     willClose$: Observable<void>;
-    constructor(injector: Injector, elementRef: ElementRef<HTMLElement>, renderer: Renderer2, zone: NgZone, resizeObserverService: ResizeObserverService, componentFactoryResolver: ComponentFactoryResolver, windowRef: WindowRef, platform: PlatformService);
+    private modalElementsMoverDelegate;
+    constructor(changeDetector: ChangeDetectorRef, injector: Injector, elementRef: ElementRef<HTMLElement>, renderer: Renderer2, zone: NgZone, resizeObserverService: ResizeObserverService, componentFactoryResolver: ComponentFactoryResolver, windowRef: WindowRef, platform: PlatformService);
     ngOnInit(): void;
+    private _currentFooter;
+    private set currentFooter(value);
+    private get currentFooter();
+    addModalElement(type: ModalElementType, modalElement: ElementRef<HTMLElement>): void;
+    removeModalElement(type: ModalElementType, modalElement: ElementRef<HTMLElement>): void;
     private initializeResizeModalToModalWrapper;
     private initializeSizing;
     private initializeModalRoute;
     private onSiblingModalRouteActivated;
     private patchScrollElementSize;
     private observeModalFullHeight;
+    private getIonModalWrapperElement;
     ngAfterViewInit(): void;
-    private checkForEmbeddedElements;
     private observeHeaderResize;
-    private moveEmbeddedElements;
     private listenForIonModalDidPresent;
     private listenForIonModalWillDismiss;
     scrollToTop(scrollDuration?: KirbyAnimation.Duration): void;
@@ -83,14 +89,6 @@ export declare class ModalWrapperComponent implements Modal, AfterViewInit, OnIn
     private observeViewportResize;
     private onViewportResize;
     blurActiveElement(): void;
-    private readonly elementToParentMap;
-    private clearEmbeddedElements;
-    private getEmbeddedComponentElement;
-    private getEmbeddedFooterElement;
-    private moveChild;
-    private removeChild;
-    private observeEmbeddedElements;
-    private createEmbeddedElementsMutationObserver;
     private createModalWrapperIntersectionObserver;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ModalWrapperComponent, never>;

package/lib/components/modal/services/modal-animation-builder.service.d.ts

@@ -1,16 +1,27 @@
-import { AnimationBuilder, AnimationController } from '@ionic/angular';
+import { AnimationBuilder } from '@ionic/angular';
 import { PlatformService } from '../../../helpers/platform.service';
 import * as i0 from "@angular/core";
 export declare class ModalAnimationBuilderService {
-    private animationCtrl;
     private platform;
-    constructor(animationCtrl: AnimationController, platform: PlatformService);
+    constructor(platform: PlatformService);
     private readonly easingEnter;
     private readonly easingLeave;
     private readonly duration;
     private readonly SwipeToCloseDefaults;
     enterAnimation(currentBackdrop?: HTMLIonBackdropElement): AnimationBuilder;
     leaveAnimation(currentBackdrop?: HTMLIonBackdropElement): AnimationBuilder;
+    private createEnterAnimation;
+    private createLeaveAnimation;
+    /**
+     * Gets the root context of a shadow dom element
+     * On newer browsers this will be the shadowRoot,
+     * but for older browser this may just be the
+     * element itself.
+     *
+     * Useful for whenever you need to explicitly
+     * do "myElement.shadowRoot!.querySelector(...)".
+     */
+    private getElementRoot;
     static ɵfac: i0.ɵɵFactoryDeclaration<ModalAnimationBuilderService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ModalAnimationBuilderService>;
 }

package/lib/components/modal/services/modal.interfaces.d.ts

@@ -1,5 +1,7 @@
+import { AfterViewInit, ElementRef, OnDestroy } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { KirbyAnimation } from '../../../animation/kirby-animation';
+import * as i0 from "@angular/core";
 export interface OverlayEventDetail<T = any> {
     data?: T;
     role?: string;
@@ -21,3 +23,23 @@ export declare abstract class Modal {
     scrollToBottom: (scrollDuration?: KirbyAnimation.Duration) => void;
     scrollDisabled: boolean;
 }
+export declare enum ModalElementType {
+    PAGE_PROGRESS = 0,
+    FOOTER = 1,
+    TITLE = 2
+}
+export declare abstract class ModalElementsAdvertiser {
+    addModalElement: (type: ModalElementType, elementRef: ElementRef<HTMLElement>) => void;
+    removeModalElement: (type: ModalElementType, elementRef: ElementRef<HTMLElement>) => void;
+}
+export declare abstract class ModalElementComponent implements AfterViewInit, OnDestroy {
+    private modalElementType;
+    private elementRef;
+    private modalElementsAdvertiser;
+    private get isContainedInModal();
+    constructor(modalElementType: ModalElementType, elementRef: ElementRef<HTMLElement>, modalElementsAdvertiser: ModalElementsAdvertiser);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ModalElementComponent, [null, null, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ModalElementComponent, "ng-component", never, {}, {}, never, never>;
+}

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

@@ -4,6 +4,7 @@ import { FitHeadingConfig } from '../../directives/fit-heading/fit-heading.direc
 import { WindowRef } from '../../types/window-ref';
 import { ModalWrapperComponent } from '../modal/modal-wrapper/modal-wrapper.component';
 import { ModalNavigationService } from '../modal/services/modal-navigation.service';
+import { ModalElementComponent, ModalElementsAdvertiser } from '../modal/services/modal.interfaces';
 import { TabsComponent } from '../tabs/tabs.component';
 import * as i0 from "@angular/core";
 declare type stickyConfig = {
@@ -52,16 +53,17 @@ export declare class PageContentDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<PageContentDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<PageContentDirective, "[kirbyPageContent]", never, { "config": "kirbyPageContent"; }, {}, never>;
 }
-export declare class PageProgressComponent implements OnInit {
+export declare class PageProgressComponent extends ModalElementComponent implements OnInit {
     private modalWrapper;
     slot: string;
-    constructor(modalWrapper: ModalWrapperComponent);
+    constructor(modalWrapper: ModalWrapperComponent, modalElementsAdvertiser: ModalElementsAdvertiser, elementRef: ElementRef<HTMLElement>);
     ngOnInit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<PageProgressComponent, [{ optional: true; skipSelf: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PageProgressComponent, [{ optional: true; skipSelf: true; }, { optional: true; }, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PageProgressComponent, "kirby-page-progress", never, {}, {}, never, ["*"]>;
 }
-export declare class PageTitleComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<PageTitleComponent, never>;
+export declare class PageTitleComponent extends ModalElementComponent {
+    constructor(elementRef: ElementRef<HTMLElement>, modalElementsAdvertiser: ModalElementsAdvertiser);
+    static ɵfac: i0.ɵɵFactoryDeclaration<PageTitleComponent, [null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PageTitleComponent, "kirby-page-title", never, {}, {}, never, ["*"]>;
 }
 export declare class PageContentComponent {

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@kirbydesign/designsystem",
-  "version": "6.0.2",
+  "version": "6.1.2-rc.ionic",
   "dependencies": {
     "@fontsource/roboto": "4.2.1",
-    "@ionic/angular": "5.5.2",
-    "@kirbydesign/core": "0.0.28",
+    "@ionic/angular": "6.2.1",
+    "@kirbydesign/core": "0.0.29-rc.ionic",
     "chart.js": "3.3.2",
     "chartjs-adapter-date-fns": "^2.0.0",
     "chartjs-plugin-annotation": "^1.0.2",
@@ -17,11 +17,11 @@
     "tslib": "^2.3.0"
   },
   "peerDependencies": {
-    "@angular/common": ">=9.0.0",
-    "@angular/core": ">=9.0.0",
-    "@angular/forms": ">=9.0.0",
-    "@angular/router": ">=9.0.0",
-    "rxjs": ">=6.5.3",
+    "@angular/common": ">=12.0.0",
+    "@angular/core": ">=12.0.0",
+    "@angular/forms": ">=12.0.0",
+    "@angular/router": ">=12.0.0",
+    "rxjs": ">=6.5.5",
     "zone.js": ">=0.10.2"
   },
   "exports": {

package/scss/base/_link.scss

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

package/scss/interaction-state/_active.scss

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

package/scss/interaction-state/_focus.scss

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

package/scss/interaction-state/_hover.scss

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

package/scss/interaction-state/_index.scss

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

package/scss/interaction-state/_interaction-state.utilities.scss

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

package/scss/interaction-state/_layer.scss

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

package/scss/opt-out/_index.scss

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

package/scss/opt-out/_link.scss

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

package/src/lib/components/icon/README.md

@@ -0,0 +1,16 @@
+# Add new icons
+
+To add new icons, you should use the [icomoon app](https://icomoon.io).
+
+## Generate font from svg's
+
+1. Upload selection.json to get existing icons and settings
+2. Upload new icons
+3. Download Font
+
+## Update kirby icons
+
+1. Replace src/kirby/icon/selection.json, with newly generated selection.json
+2. Replace src/fonts/kirby.ttf, with newly generated kirby.ttf
+3. Update kirby-custom-icon-settings.ts with new icons (old icons should not have changed)
+4. Add new icon svg's to src/assets/icons/kirby

package/README.md

@@ -1,7 +0,0 @@
-# designsystem
-
-This library was generated with [Nx](https://nx.dev).
-
-## Running unit tests
-
-Run `nx test designsystem` to execute the unit tests.