Experimental Fullscreen Modal

apps/cookbook/src/app/app.module.ts

@@ -6,7 +6,7 @@ import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
-import { KirbyExperimentalModule, KirbyModule } from '@kirbydesign/designsystem';
+import { KirbyExperimentalModule, KirbyModalModule, KirbyModule } from '@kirbydesign/designsystem';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -41,6 +41,7 @@ registerLocaleData(localeData);
     FormsModule,
     KirbyModule,
     KirbyExperimentalModule,
+    KirbyModalModule,
   ],
 
   providers: [

apps/cookbook/src/app/examples/examples.module.ts

@@ -30,6 +30,7 @@ import { LinkExampleModule } from './link-example/link-example.module';
 import { ListExamplesModule } from './list-example/list-example.module';
 import { ListExperimentalExampleModule } from './list-experimental-example/list-experimental-example.module';
 import { ModalExampleModule } from './modal-example/modal-example.module';
+import { ModalExperimentalExampleModule } from './modal-experimental-example/modal-experimental-example.module';
 import { ProgressCircleExampleModule } from './progress-circle-example/progress-circle-example.module';
 import { RadioExampleModule } from './radio-example/radio-example.module';
 import { RangeExampleModule } from './range-example/range-example.module';
@@ -60,6 +61,7 @@ const IMPORTS = [
   RangeExampleModule,
   LinkExampleModule,
   ModalExampleModule,
+  ModalExperimentalExampleModule,
   GridLayoutExamplesModule,
   SectionHeaderExampleModule,
   ItemGroupExampleModule,

apps/cookbook/src/app/examples/examples.routes.ts

@@ -44,6 +44,7 @@ import { ListNoShapeExampleComponent } from './list-no-shape-example/list-no-sha
 import { ListSwipeExampleComponent } from './list-swipe-example/list-swipe-example.component';
 import { LoadingOverlayExampleComponent } from './loading-overlay-example/loading-overlay-example.component';
 import { ModalExampleComponent } from './modal-example/modal-example.component';
+import { FullscreenModalExperimentalExampleComponent } from './modal-experimental-example/fullscreen/fullscreen-experimental-example.component';
 import { ModalRoutePage1ExampleComponent } from './modal-example/modal-route-example/modal-route-page1-example.component';
 import { ModalRoutePage2ExampleComponent } from './modal-example/modal-route-example/modal-route-page2-example.component';
 import { PageAdvancedExampleComponent } from './page-example/advanced/page-advanced-example.component';
@@ -242,6 +243,10 @@ export const routes: Routes = [
           },
         ],
       },
+      {
+        path: 'modal-experimental-fullscreen',
+        component: FullscreenModalExperimentalExampleComponent,
+      },
       {
         path: 'form-field',
         children: [

apps/cookbook/src/app/examples/modal-example/modal-example.module.ts

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { KirbyModule } from '@kirbydesign/designsystem';
+import { KirbyModalModule, KirbyModule } from '@kirbydesign/designsystem';
 
 import { ExamplesSharedModule } from '../examples.shared.module';
 
@@ -27,7 +27,7 @@ const COMPONENT_DECLARATIONS = [
 ];
 
 @NgModule({
-  imports: [CommonModule, RouterModule, KirbyModule, ExamplesSharedModule],
+  imports: [CommonModule, RouterModule, KirbyModule, KirbyModalModule, ExamplesSharedModule],
   declarations: COMPONENT_DECLARATIONS,
   exports: COMPONENT_DECLARATIONS,
 })

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

@@ -0,0 +1,45 @@
+<kirby-modal-wrapper-experimental [title]="title">
+  <p>
+    Edit the title below and see the output in the console, when clicking "cancel" or "submit". The
+    output comes from subscribing to <code>onWillDismiss</code> and
+    <code>onDidDismiss</code> events.
+  </p>
+  <input kirby-input [(ngModel)]="title" />
+
+  <br />
+
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non justo mollis, gravida
+    nisl sit amet, blandit nulla. Proin eget posuere nibh. Pellentesque hendrerit sapien id
+    venenatis porttitor. Donec laoreet laoreet dui, nec luctus elit accumsan eu. Nullam placerat sem
+    libero, quis laoreet magna egestas lobortis. Vivamus condimentum suscipit nisl a elementum.
+    Aliquam in mi mauris. Etiam finibus, felis non venenatis volutpat, metus leo vulputate enim, id
+    porttitor mi arcu vel urna. Quisque a sollicitudin turpis, non egestas urna. Aliquam ac leo a
+    quam rhoncus efficitur. Aliquam maximus varius tellus malesuada vehicula. Cras bibendum elit
+    tempor tellus pellentesque finibus. Maecenas iaculis enim vitae ex varius, id commodo lectus
+    porta. Donec quis dui aliquet, elementum magna sed, mollis mi. Ut sed nisi ut mauris maximus
+    gravida at eu purus. Mauris a diam nulla. Morbi sit amet lobortis risus. Ut maximus rutrum
+    turpis tempor finibus. Nam et pretium arcu, ac placerat arcu. Fusce eu leo vel enim bibendum
+    porttitor. Suspendisse potenti. Etiam maximus erat id magna vulputate, id eleifend neque
+    aliquam. Quisque ut nunc suscipit, semper lectus at, suscipit urna. Nulla mollis tellus nunc,
+    finibus iaculis lectus fringilla et. Vestibulum ante ipsum primis in faucibus orci luctus et
+    ultrices posuere cubilia curae; Suspendisse dictum accumsan ipsum, dictum consectetur sapien
+    dapibus eget. Aenean mattis turpis eu dolor tincidunt, sit amet mollis arcu fermentum. Maecenas
+    sagittis et mauris sit amet condimentum. Maecenas pulvinar non turpis sed pellentesque.
+    Vestibulum ac ornare ipsum. Pellentesque ac ante nec ex ornare pharetra. Nulla non neque eget
+    est convallis vulputate. Quisque imperdiet suscipit ligula, sit amet egestas diam semper
+    tristique. Etiam ut quam enim. Quisque nec faucibus tortor. Morbi consectetur ultricies lorem,
+    tempus posuere est tempor vitae. Aenean eget magna quam. Praesent volutpat arcu a efficitur
+    faucibus. Nulla non mauris sed mauris gravida rutrum. Ut eu ullamcorper lacus, ac varius tellus.
+    Proin convallis interdum nulla vitae pharetra. Fusce enim ex, cursus eget est sed, fringilla
+    fringilla diam. Maecenas aliquam aliquam libero, ut auctor eros rhoncus quis. Sed auctor vitae
+    libero id posuere. Integer mollis mollis arcu ac vestibulum. Suspendisse at viverra leo. Nulla
+    ac semper augue. Aenean consequat purus eget convallis cursus. Aliquam facilisis nisl massa, vel
+    imperdiet ante dictum eleifend. Morbi ut nibh in elit venenatis semper.
+  </p>
+
+  <kirby-modal-footer-experimental footer>
+    <button kirby-button (click)="close('cancel')" attentionLevel="3">Cancel</button>
+    <button kirby-button (click)="close('submit')">Submit</button>
+  </kirby-modal-footer-experimental>
+</kirby-modal-wrapper-experimental>

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

@@ -0,0 +1,67 @@
+import { Component, Input } from '@angular/core';
+import { ModalExperimentalController } from '@kirbydesign/designsystem/components/modal-experimental/services/modal.controller';
+
+export const showModalCodeSnippet = `constructor(private modalController: ModalExperimentalController) {}
+
+showModal() {
+  const config: ModalExperimentalConfig = {
+    flavor: 'modal',
+    component: YourEmbeddedModalComponent,
+  };
+  this.modalController.showModal(config);
+}`;
+
+export const observableCodeSnippet = `constructor(private modalController: ModalExperimentalController) {}
+
+showModal() {
+  const config: ModalExperimentalConfig = {
+    flavor: 'modal',
+    component: YourEmbeddedModalComponent,
+  };
+
+  const modal = this.modalController.showModal(config);
+
+  modal?.onWillDismiss.subscribe((response) => {
+    const { role, data } = response;
+
+    // role is: 'confirm'
+    // data is: {
+    //  title: 'myTitle',
+    //  items: [{id: 1}, {id: 2}]
+    }
+  });
+
+  modal?.onDidDismiss.subscribe((response) => {
+    const { role, data } = response;
+
+    // role is: 'confirm'
+    // data is: {
+    //  title: 'myTitle',
+    //  items: [{id: 1}, {id: 2}]
+    }
+  });
+
+
+  // Inside the embedded component
+
+  constructor(private modalController: ModalExperimentalController) {}
+
+  close() {
+    this.modalController.closeModal({
+      title: 'myTitle',
+      items: [{id: 1}, {id: 2}]
+    }, 'confirm');
+  }
+}`;
+@Component({
+  templateUrl: './modal-controller-experimental-example.component.html',
+})
+export class ModalControllerExperimentalExampleComponent {
+  constructor(private modalController: ModalExperimentalController) {}
+
+  @Input() title = '';
+
+  close(role: string) {
+    this.modalController.closeModal({ title: this.title }, role);
+  }
+}

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

@@ -0,0 +1,120 @@
+<div class="fullscreen-example">
+  <h1>Fullscreen modal</h1>
+
+  <div class="config">
+    <h2>Config</h2>
+
+    <kirby-checkbox
+      [checked]="showFooter"
+      (checkedChange)="toggleFooter()"
+      text="Show footer"
+    ></kirby-checkbox>
+
+    <kirby-checkbox
+      [checked]="isInlineFooter"
+      (checkedChange)="toggleIsInlineFooter()"
+      text="Inline footer"
+    ></kirby-checkbox>
+
+    <kirby-checkbox
+      [checked]="showPageProgress"
+      (checkedChange)="togglePageProgress()"
+      text="Show page progress"
+    ></kirby-checkbox>
+
+    <kirby-checkbox
+      [checked]="collapseTitle"
+      (checkedChange)="toggleCollapseTitle()"
+      text="Collapse title"
+    ></kirby-checkbox>
+
+    <kirby-checkbox
+      [checked]="scrollDisabled"
+      (checkedChange)="toggleScrollDisabled()"
+      text="Scroll disabled"
+    ></kirby-checkbox>
+  </div>
+
+  <button kirby-button (click)="openModal()">Open Modal</button>
+
+  <kirby-fullscreen-modal-experimental
+    [open]="open"
+    [title]="'Modal title'"
+    [hasCollapsibleTitle]="collapseTitle"
+    [scrollDisabled]="scrollDisabled"
+    [canDismiss]="canDismiss"
+    (willDismiss)="closeModal()"
+  >
+    <!-- HEADER SLOT -->
+    <kirby-page-progress *ngIf="showPageProgress" header-start>
+      <kirby-progress-circle themeColor="warning" value="25" size="sm" class="kirby-text-xsmall">
+        1/4
+      </kirby-progress-circle>
+    </kirby-page-progress>
+
+    <!-- DEFAULT SLOT -->
+    <div>
+      <button kirby-button attentionLevel="3" (click)="scrollToBottom()">
+        Scroll to bottom
+        <kirby-icon name="arrow-down"></kirby-icon>
+      </button>
+
+      <button kirby-button attentionLevel="3" (click)="toggleCanDismiss()">
+        Can dismiss: {{ canDismiss }}
+      </button>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nunc eros, fermentum sed
+        ligula ac, placerat porta est. Cras luctus mi et aliquam semper. Sed urna leo, gravida
+        accumsan vulputate in, viverra at neque. Cras in nisi ac orci venenatis semper scelerisque
+        ullamcorper libero. Donec ornare accumsan massa, at eleifend lorem sollicitudin ut. Donec
+        vitae malesuada neque. Morbi ultricies urna ac dignissim blandit. Duis sollicitudin tellus
+        ligula, sit amet congue augue blandit et. Lorem ipsum dolor sit amet, consectetur adipiscing
+        elit. Aenean cursus laoreet diam sed elementum. In justo est, aliquet sed placerat quis,
+        tincidunt rhoncus augue. Donec vulputate suscipit nulla, quis consectetur dolor congue
+        vitae. Fusce felis ex, ornare id finibus vel, tempus vel tellus. Vestibulum cursus nulla et
+        sem fermentum pulvinar. Curabitur ac odio vulputate, condimentum nulla non, vestibulum sem.
+        Praesent semper sodales nisi, quis ornare nisi vehicula pellentesque. Duis nulla felis,
+        sollicitudin vitae eleifend a, mollis eu elit. Nulla aliquam, diam eget cursus pellentesque,
+        nulla dui elementum risus, in sodales dolor mauris sit amet magna. Praesent nec metus a
+        massa elementum eleifend nec vulputate est. Nullam blandit lorem et tortor semper, tempus
+        tempor ipsum varius. Etiam et laoreet massa. Nam lacinia purus a lorem pellentesque varius.
+        Donec vel dui tincidunt, efficitur dui a, rhoncus nisi. Sed id lectus libero. Duis turpis
+        lorem, placerat eu tortor vel, tempor luctus enim. Donec pulvinar odio at fringilla
+        ultricies. Aliquam erat volutpat. Cras eget elit eleifend, lacinia sapien sit amet, mattis
+        orci. Fusce ac scelerisque est. Nulla orci dui, placerat fringilla felis vitae, cursus
+        facilisis est. Aenean consectetur, dui ut scelerisque lacinia, ante arcu laoreet ligula,
+        vitae congue ex nulla consequat purus. Maecenas sit amet velit eget dui sodales iaculis nec
+        nec ante. Morbi bibendum sapien et pulvinar ornare. Nullam commodo varius mi, ac tincidunt
+        lectus vulputate nec. Orci varius natoque penatibus et magnis dis parturient montes,
+        nascetur ridiculus mus. Quisque ac orci libero. Nulla facilisi. Nullam quis lacinia elit.
+        Morbi tempus, lacus ac vehicula finibus, urna mi viverra nulla, quis malesuada mi magna eu
+        libero. Aliquam consectetur neque sed nisi vestibulum posuere. Nam viverra nisl varius
+        placerat sagittis. Pellentesque velit nisl, blandit nec laoreet at, tincidunt quis augue.
+        Nunc ultrices lacinia est, eu lacinia felis fermentum vel. Sed a quam lobortis, facilisis
+        nunc vitae, faucibus sapien. Sed et orci vitae leo consequat consectetur non eu mauris. Nunc
+        non vulputate diam. Sed ultricies arcu et mattis ullamcorper. Curabitur vel massa enim. In
+        venenatis augue eu lectus scelerisque egestas. Duis dignissim at augue non semper. Integer
+        lectus mi, pulvinar porta velit ac, interdum consequat felis. Vestibulum vitae ipsum
+        viverra, egestas neque et, efficitur velit. Aenean ac facilisis velit. Ut imperdiet, lacus
+        nec tempor ornare, sem odio pulvinar justo, in pellentesque orci lacus non mauris. Sed
+        aliquam neque vel mauris consequat, elementum lacinia ex convallis. In nec dui vitae quam
+        sodales venenatis. Aenean lacus purus, iaculis sed sollicitudin vitae, consequat ut magna.
+        Suspendisse malesuada justo quis ante sollicitudin blandit elementum sit amet dolor.
+      </p>
+    </div>
+
+    <!-- FOOTER SLOT -->
+    <kirby-modal-footer-experimental
+      *ngIf="showFooter"
+      [type]="isInlineFooter ? 'inline' : 'fixed'"
+      themeColor="white"
+      footer
+    >
+      <button kirby-button attentionLevel="3" (click)="scrollToTop()">
+        To top
+        <kirby-icon name="arrow-up"></kirby-icon>
+      </button>
+      <button kirby-button (click)="close()">Close</button>
+    </kirby-modal-footer-experimental>
+  </kirby-fullscreen-modal-experimental>
+</div>

apps/cookbook/src/app/examples/modal-experimental-example/fullscreen/fullscreen-experimental-example.component.scss

@@ -0,0 +1,15 @@
+.fullscreen-example {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  padding: 20px 0;
+
+  .config {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}