Add "collapsibleTitle" field to modal config

apps/cookbook/src/app/examples/modal-example/embedded-modal-example/embedded-modal-example.component.html

@@ -48,15 +48,9 @@ <h4>Component properties (injected from parent component):</h4>
         class="nested-modal-configuration"
       >
         <h3>Open nested:</h3>
-        <button kirby-button attentionLevel="2" (click)="showNestedModal()">
-          Modal
-        </button>
-        <button kirby-button attentionLevel="2" (click)="showNestedDrawer()">
-          Drawer
-        </button>
-        <button kirby-button attentionLevel="2" (click)="showNestedAlert()">
-          Alert
-        </button>
+        <button kirby-button attentionLevel="2" (click)="showNestedModal()">Modal</button>
+        <button kirby-button attentionLevel="2" (click)="showNestedDrawer()">Drawer</button>
+        <button kirby-button attentionLevel="2" (click)="showNestedAlert()">Alert</button>
         <button kirby-button attentionLevel="2" (click)="showNestedActionSheet()">
           Action sheet
         </button>
@@ -161,6 +155,7 @@ <h4>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45
 
 <kirby-modal-footer
   *ngIf="!isLoading && showFooter"
+  [type]="_footerType"
   themeColor="white"
   [snapToKeyboard]="snapFooterToKeyboard"
 >

apps/cookbook/src/app/examples/modal-example/embedded-modal-example/embedded-modal-example.component.ts

@@ -38,12 +38,17 @@ export class EmbeddedModalExampleComponent implements OnInit {
   delayLoadDummyContent: boolean;
   loadAdditionalContent: boolean;
   disableScroll: boolean = false;
+  displayFooterAsInline: boolean = false;
   openFullHeight: boolean;
 
   isLoading = false;
   isLoadingAdditionalContent = false;
   snapFooterToKeyboard = false;
 
+  get _footerType(): 'inline' | 'fixed' {
+    return this.displayFooterAsInline ? 'inline' : 'fixed';
+  }
+
   constructor(
     @Inject(COMPONENT_PROPS) componentProps,
     private modalController: ModalController,

apps/cookbook/src/app/examples/modal-example/modal-example-configuration/modal-example-configuration.component.html

@@ -22,6 +22,15 @@
   text="Show footer"
 ></kirby-checkbox>
 
+<kirby-checkbox
+  *ngIf="displayFooterAsInline !== undefined"
+  [checked]="displayFooterAsInline"
+  (checkedChange)="toggleDisplayFooterAsInline($event)"
+  [disabled]="disabled || !showFooter"
+  text="Display footer as inline"
+  class="indent"
+></kirby-checkbox>
+
 <kirby-checkbox
   *ngIf="disableScroll !== undefined"
   [checked]="disableScroll"
@@ -64,6 +73,13 @@
   text="Open in full height"
 ></kirby-checkbox>
 
+<kirby-checkbox
+  [checked]="collapseTitle"
+  (checkedChange)="toggleCollapseTitle($event)"
+  [disabled]="disabled"
+  text="Collapse title"
+></kirby-checkbox>
+
 <ng-container *ngIf="interactWithBackground !== undefined || customCssClass !== undefined">
   <kirby-divider [hasMargin]="true"></kirby-divider>
   <p>Custom modal/drawer:</p>

apps/cookbook/src/app/examples/modal-example/modal-example-configuration/modal-example-configuration.component.ts

@@ -18,9 +18,15 @@ export class ModalExampleConfigurationComponent {
   @Input() showPageProgress: boolean;
   @Output() showPageProgressChange = new EventEmitter<boolean>();
 
+  @Input() collapseTitle: boolean;
+  @Output() collapseTitleChange = new EventEmitter<boolean>();
+
   @Input() showFooter: boolean;
   @Output() showFooterChange = new EventEmitter<boolean>();
 
+  @Input() displayFooterAsInline: boolean = false;
+  @Output() displayFooterAsInlineChange = new EventEmitter<boolean>();
+
   @Input() showDummyContent: boolean;
   @Output() showDummyContentChange = new EventEmitter<boolean>();
 
@@ -81,6 +87,18 @@ export class ModalExampleConfigurationComponent {
     this.showFooterChange.emit(this.showFooter);
   }
 
+  toggleDisplayFooterAsInline(value: boolean) {
+    if (this.preventChangeEvent) return;
+    this.displayFooterAsInline = value;
+    this.displayFooterAsInlineChange.emit(this.displayFooterAsInline);
+  }
+
+  toggleCollapseTitle(value: boolean) {
+    if (this.preventChangeEvent) return;
+    this.collapseTitle = value;
+    this.collapseTitleChange.emit(this.collapseTitle);
+  }
+
   toggleShowDummyContent(show: boolean) {
     this.showDummyContent = show;
     this.showDummyContentChange.emit(this.showDummyContent);

apps/cookbook/src/app/examples/modal-example/modal-example-default.component.ts

@@ -15,6 +15,8 @@ const config = {
       <cookbook-modal-example-configuration [disabled]="preventInteraction" [(showDummyKeyboard)]="showDummyKeyboard"
       [(showPageProgress)]="showPageProgress"
       [(showFooter)]="showFooter"
+      [(displayFooterAsInline)]="displayFooterAsInline"
+      [(collapseTitle)]="collapseTitle"
       [(showDummyContent)]="showDummyContent"
       [(delayLoadDummyContent)]="delayLoadDummyContent"
       [(loadAdditionalContent)]="loadAdditionalContent"
@@ -207,6 +209,8 @@ export class ModalExampleDefaultComponent {
   );
   showPageProgress = false;
   showFooter = false;
+  displayFooterAsInline = false;
+  collapseTitle = false;
   showDummyContent = true;
   delayLoadDummyContent = true;
   loadAdditionalContent = false;
@@ -226,12 +230,14 @@ export class ModalExampleDefaultComponent {
     this.preventInteraction = this.interactWithBackground;
     const config: ModalConfig = {
       flavor,
+      collapseTitle: this.collapseTitle,
       component: EmbeddedModalExampleComponent,
       interactWithBackground: this.interactWithBackground,
       cssClass: this.customCssClass ? ['my-custom-modal-class'] : [],
       size: this.openFullHeight ? 'full-height' : null,
       componentProps: {
         title,
+        displayFooterAsInline: this.displayFooterAsInline,
         subtitle: 'Hello from the first embedded example component!',
         exampleProperties: {
           stringProperty: 'Value injected from parent component',

apps/cookbook/src/app/showcase/modal-showcase/modal-showcase.component.ts

@@ -44,6 +44,13 @@ export class ModalShowcaseComponent implements AfterViewInit {
       defaultValue: 'modal',
       type: ['undefined', 'modal', 'drawer', 'compact'],
     },
+    {
+      name: 'collapseTitle',
+      description: `(Optional) If \`true\` will cause the title to initially be rendered as part of the content; once scrolled out of view it collapses and appears in the header area. 
+      \n Useful for long titles that would otherwise truncate. `,
+      defaultValue: 'false',
+      type: ['boolean'],
+    },
     {
       name: 'size',
       description: `(Optional) The initial size of the modal before content is loaded.

libs/designsystem/src/lib/components/modal/modal-wrapper/config/modal-config.ts

@@ -11,6 +11,7 @@ export interface ModalConfig {
    * @deprecated Will be removed in next major version. Embed a `<kirby-page-title>` element inside the component instead.
    */
   title?: string;
+  collapseTitle?: boolean;
   component: any;
   size?: ModalSize;
   modalRoute?: ActivatedRoute;

libs/designsystem/src/lib/components/modal/modal-wrapper/modal-wrapper.component.html

@@ -1,6 +1,6 @@
 <ion-header (touchstart)="onHeaderTouchStart($event)">
   <ion-toolbar>
-    <ion-title>{{ config.title }}</ion-title>
+    <ion-title></ion-title>
     <ion-buttons slot="start" *ngIf="config.flavor === 'drawer'">
       <ng-container *ngTemplateOutlet="closeButton; context: { icon: 'arrow-down' }"></ng-container>
     </ion-buttons>
@@ -16,6 +16,11 @@
 </ion-header>
 
 <ion-content [scrollEvents]="true">
+  <ion-header *ngIf="_hasCollapsibleTitle" collapse="condense">
+    <ion-toolbar>
+      <span class="kirby-text-large" #contentTitle></span>
+    </ion-toolbar>
+  </ion-header>
   <ng-container
     *ngComponentOutlet="config.component; injector: componentPropsInjector"
   ></ng-container>

libs/designsystem/src/lib/components/modal/modal-wrapper/modal-wrapper.component.scss

@@ -134,4 +134,23 @@ ion-content {
     --padding-end: #{utils.size('xxxl')};
   }
 }
+
+:host(.collapsible-title) {
+  ion-content {
+    --padding-top: 0;
+
+    ion-header ion-toolbar:first-of-type {
+      padding-top: 0;
+      --padding-top: 0;
+      --padding-bottom: 0;
+      --padding-start: 0;
+      --padding-end: 0;
+    }
+  }
+  ion-title {
+    font-size: utils.font-size('m');
+    font-weight: utils.font-weight('bold');
+  }
+}
+
 /* clean-css ignore:end */

libs/designsystem/src/lib/components/modal/modal-wrapper/modal-wrapper.component.spec.ts

@@ -1,22 +1,66 @@
 import { fakeAsync, tick } from '@angular/core/testing';
-import { IonContent } from '@ionic/angular';
-import { Spectator } from '@ngneat/spectator';
+import { RouterTestingModule } from '@angular/router/testing';
+import { IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular';
+import { createComponentFactory, Spectator } from '@ngneat/spectator';
+import { MockComponents } from 'ng-mocks';
 
 import { KirbyAnimation } from '../../../animation/kirby-animation';
 import { TestHelper } from '../../../testing/test-helper';
+import { WindowRef } from '../../../types';
+import { ButtonComponent } from '../../button/button.component';
 import { IconComponent } from '../../icon/icon.component';
+import { PageProgressComponent } from '../../page';
+import { ModalFooterComponent } from '../footer/modal-footer.component';
 
 import { ModalWrapperComponent } from './modal-wrapper.component';
 import {
   DynamicFooterEmbeddedComponent,
   DynamicPageProgressEmbeddedComponent,
+  InputEmbeddedComponent,
   ModalWrapperTestBuilder,
+  StaticFooterEmbeddedComponent,
+  StaticPageProgressEmbeddedComponent,
 } from './modal-wrapper.testbuilder';
 
 describe('ModalWrapperComponent', () => {
-  const modalWrapperTestBuilder = new ModalWrapperTestBuilder();
+  const createComponent = createComponentFactory({
+    component: ModalWrapperComponent,
+    imports: [RouterTestingModule],
+    entryComponents: [
+      StaticFooterEmbeddedComponent,
+      DynamicFooterEmbeddedComponent,
+      InputEmbeddedComponent,
+      StaticPageProgressEmbeddedComponent,
+      DynamicPageProgressEmbeddedComponent,
+    ],
+    providers: [
+      {
+        provide: WindowRef,
+        useValue: <WindowRef>{ nativeWindow: window },
+      },
+    ],
+    declarations: [
+      MockComponents(
+        IconComponent,
+        ButtonComponent,
+        PageProgressComponent,
+        ModalFooterComponent,
+        IonHeader,
+        IonToolbar,
+        IonTitle,
+        IonButtons,
+        IonContent
+      ),
+    ],
+  });
+
+  let modalWrapperTestBuilder = new ModalWrapperTestBuilder(createComponent);
   let spectator: Spectator<ModalWrapperComponent>;
 
+  beforeEach(() => {
+    modalWrapperTestBuilder = new ModalWrapperTestBuilder(createComponent);
+  });
+
   it('should create', () => {
     spectator = modalWrapperTestBuilder.build();