Add fullscreen size option to modal settings

client/luigi-client.d.ts

@@ -19,7 +19,7 @@ export declare interface ConfirmationModalSettings {
 
 export declare interface ModalSettings {
   title?: string;
-  size?: 'l' | 'm' | 's';
+  size?: 'fullscreen' | 'l' | 'm' | 's';
   width?: string;
   height?: string;
 }
@@ -300,7 +300,7 @@ export declare interface LinkManager {
    * @param {boolean} preserveView preserve a view by setting it to `true`. It keeps the current view opened in the background and opens the new route in a new frame. Use the {@link #goBack goBack()} function to navigate back. You can use this feature across different levels. Preserved views are discarded as soon as you use the standard {@link #navigate navigate()} function instead of {@link #goBack goBack()}
    * @param {Object} modalSettings opens a view in a modal. Use these settings to configure the modal's title and size
    * @param {string} modalSettings.title modal title. By default, it is the node label. If there is no label, it is left empty
-   * @param {('l'|'m'|'s')} [modalSettings.size="l"] size of the modal
+   * @param {('fullscreen'|'l'|'m'|'s')} [modalSettings.size="l"] size of the modal
    * @param {Object} splitViewSettings opens a view in a split view. Use these settings to configure the split view's behaviour
    * @param {string} splitViewSettings.title split view title. By default, it is the node label. If there is no label, it is left empty
    * @param {number} [splitViewSettings.size=40] height of the split view in percent
@@ -365,7 +365,7 @@ export declare interface LinkManager {
    * @param {string} path navigation path
    * @param {Object} [modalSettings] opens a view in a modal. Use these settings to configure the modal's title and size
    * @param {string} modalSettings.title modal title. By default, it is the node label. If there is no label, it is left empty
-   * @param {('l'|'m'|'s')} [modalSettings.size="l"] size of the modal
+   * @param {('fullscreen'|'l'|'m'|'s')} [modalSettings.size="l"] size of the modal
    * @example
    * LuigiClient.linkManager().openAsModal('projects/pr1/users', {title:'Users', size:'m'});
    */

client/src/linkManager.js

@@ -41,7 +41,7 @@ export class linkManager extends LuigiClientBase {
    * @param {boolean} preserveView preserve a view by setting it to `true`. It keeps the current view opened in the background and opens the new route in a new frame. Use the {@link #goBack goBack()} function to navigate back. You can use this feature across different levels. Preserved views are discarded as soon as you use the standard {@link #navigate navigate()} function instead of {@link #goBack goBack()}
    * @param {Object} modalSettings opens a view in a modal. Use these settings to configure the modal's title and size
    * @param {string} modalSettings.title modal title. By default, it is the node label. If there is no label, it is left empty
-   * @param {('l'|'m'|'s')} [modalSettings.size="l"] size of the modal
+   * @param {('fullscreen'|'l'|'m'|'s')} [modalSettings.size="l"] size of the modal
    * @param {string} modalSettings.width lets you specify a precise width for the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw'.
    * @param {string} modalSettings.height lets you specify a precise height for the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw'.
    * @param {Object} splitViewSettings opens a view in a split view. Use these settings to configure the split view's behaviour
@@ -156,7 +156,7 @@ export class linkManager extends LuigiClientBase {
    * @param {string} path navigation path
    * @param {Object} [modalSettings] opens a view in a modal. Use these settings to configure the modal's title and size
    * @param {string} modalSettings.title modal title. By default, it is the node label. If there is no label, it is left empty
-   * @param {('l'|'m'|'s')} [modalSettings.size="l"] size of the modal
+   * @param {('fullscreen'|'l'|'m'|'s')} [modalSettings.size="l"] size of the modal
    * @param {string} modalSettings.width lets you specify a precise width for the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw'.
    * @param {string} modalSettings.height lets you specify a precise height for the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw'.
    * @example

core/src/Modal.svelte

@@ -7,12 +7,9 @@
     onDestroy,
   } from 'svelte';
   import { fade } from 'svelte/transition';
-  const dispatch = createEventDispatcher();
-
   import { Navigation } from './navigation/services/navigation';
   import {
     EventListenerHelpers,
-    EscapingHelpers,
     GenericHelpers,
     IframeHelpers,
     RoutingHelpers,
@@ -23,6 +20,7 @@
   export let settings;
   export let isDataPrepared = false;
   export let nodepath;
+  const dispatch = createEventDispatcher();
   let nodeObject;
   let pathData;
   let nodeParams;
@@ -114,23 +112,40 @@
   };
 
   const setModalSize = async () => {
-    const elem = document.getElementsByClassName('lui-modal-mf');
-    let height = '80%';
-    let width = '80%';
-    if (settings.size) {
-      if (settings.size === 'm') {
-        height, width = '60%';
-      } else if (settings.size === 's') {
-        height, width = '40%';
-      }
-    }else if(settings.width && settings.height){
-      const regex = /^.?[0-9]{1,3}(%|px|rem|em|vh|vw)$/;
-      if(settings.width.match(regex) && settings.height.match(regex)){
-        height = settings.height;
-        width = settings.width;
+    let height, width;
+    const elem = document.querySelector('.lui-modal-mf');
+    const { size, width: settingsWidth, height: settingsHeight } = settings;
+    const regex = /^.?[0-9]{1,3}(%|px|rem|em|vh|vw)$/;
+
+    if (
+      settingsWidth &&
+      settingsWidth.match(regex) &&
+      settingsHeight &&
+      settingsHeight.match(regex)
+    ) {
+      height = settingsHeight;
+      width = settingsWidth;
+    } else {
+      switch (size) {
+        case 'fullscreen':
+          height = '100vh';
+          width = '100vw';
+          elem.classList.add('lui-modal-fullscreen');
+          break;
+        case 'm':
+          height = '80%';
+          width = '60%';
+          break;
+        case 's':
+          height = '80%';
+          width = '40%';
+          break;
+        default:
+          height = '80%';
+          width = '80%';
       }
     }
-    elem[0].setAttribute('style', `width:${width};height:${height};`);
+    elem.setAttribute('style', `width:${width};height:${height};`);
   };
 
   const createIframeModal = async (viewUrl, componentData) => {
@@ -237,14 +252,18 @@
   onMount(() => {
     EventListenerHelpers.addEventListener('message', onMessage);
     // only disable accessibility for all cases other than a drawer without backdrop
-    !(settings.isDrawer && !settings.backdrop) ? IframeHelpers.disableA11YKeyboardExceptClassName('.fd-dialog') : '';
+    !(settings.isDrawer && !settings.backdrop)
+      ? IframeHelpers.disableA11YKeyboardExceptClassName('.fd-dialog')
+      : '';
     window.focus();
   });
 
   onDestroy(() => {
     EventListenerHelpers.removeEventListener('message', onMessage);
     // only disable accessibility for all cases other than a drawer without backdrop
-    !(settings.isDrawer && !settings.backdrop) ? IframeHelpers.enableA11YKeyboardBackdropExceptClassName('.fd-dialog') : '';
+    !(settings.isDrawer && !settings.backdrop)
+      ? IframeHelpers.enableA11YKeyboardBackdropExceptClassName('.fd-dialog')
+      : '';
   });
 
   //  [svelte-upgrade suggestion]
@@ -379,6 +398,11 @@
       left: 0;
     }
   }
+  .lui-modal-fullscreen {
+    max-height: none;
+    max-width: none;
+    border-radius: 0;
+  }
   .spinnerContainer {
     display: flex;
     align-items: center;

core/src/core-api/navigation.js

@@ -26,7 +26,7 @@ class LuigiNavigationManager {
    * @param {boolean} preserveView preserve a view by setting it to `true`. It keeps the current view opened in the background and opens the new route in a new frame. Use the {@link #goBack goBack()} function to navigate back. You can use this feature across different levels. Preserved views are discarded as soon as you use the standard {@link #navigate navigate()} function instead of {@link #goBack goBack()}
    * @param {Object} modalSettings opens a view in a modal. Use these settings to configure the modal's title and size
    * @param {string} modalSettings.title modal title. By default, it is the node label. If there is no label, it is left empty
-   * @param {('l'|'m'|'s')} [modalSettings.size="l"] size of the modal
+   * @param {('fullscreen'|'l'|'m'|'s')} [modalSettings.size="l"] size of the modal
    * @param {string} modalSettings.width lets you specify a precise width for the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw'.
    * @param {string} modalSettings.height lets you specify a precise height for the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw'.
    * @param {Object} splitViewSettings opens a view in a split view. Use these settings to configure the split view's behaviour
@@ -52,7 +52,7 @@ class LuigiNavigationManager {
    * @param {string} path navigation path
    * @param {Object} [modalSettings] opens a view in a modal. Use these settings to configure the modal's title and size
    * @param {string} modalSettings.title modal title. By default, it is the node label. If there is no label, it is left empty
-   * @param {('l'|'m'|'s')} [modalSettings.size="l"] size of the modal
+   * @param {('fullscreen'|'l'|'m'|'s')} [modalSettings.size="l"] size of the modal
    * @param {string} modalSettings.width lets you specify a precise width for the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw'.
    * @param {string} modalSettings.height lets you specify a precise height for the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw'.
    * @example

docs/luigi-client-api.md

@@ -536,7 +536,7 @@ Navigates to the given path in the application hosted by Luigi. It contains eith
 -   `preserveView` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** preserve a view by setting it to `true`. It keeps the current view opened in the background and opens the new route in a new frame. Use the [goBack()](#goBack) function to navigate back. You can use this feature across different levels. Preserved views are discarded as soon as you use the standard [navigate()](#navigate) function instead of [goBack()](#goBack)
 -   `modalSettings` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** opens a view in a modal. Use these settings to configure the modal's title and size
     -   `modalSettings.title` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** modal title. By default, it is the node label. If there is no label, it is left empty
-    -   `modalSettings.size` **(`"l"` \| `"m"` \| `"s"`)** size of the modal (optional, default `"l"`)
+    -   `modalSettings.size` **(`"fullscreen"` \| `"l"` \| `"m"` \| `"s"`)** size of the modal (optional, default `"l"`)
     -   `modalSettings.width` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** lets you specify a precise width for the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw'.
     -   `modalSettings.height` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** lets you specify a precise height for the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw'.
 -   `splitViewSettings` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** opens a view in a split view. Use these settings to configure the split view's behaviour
@@ -586,7 +586,7 @@ Opens a view in a modal. You can specify the modal's title and size. If you don'
 -   `path` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** navigation path
 -   `modalSettings` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)?** opens a view in a modal. Use these settings to configure the modal's title and size (optional, default `{}`)
     -   `modalSettings.title` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** modal title. By default, it is the node label. If there is no label, it is left empty
-    -   `modalSettings.size` **(`"l"` \| `"m"` \| `"s"`)** size of the modal (optional, default `"l"`)
+    -   `modalSettings.size` **(`"fullscreen"` \| `"l"` \| `"m"` \| `"s"`)** size of the modal (optional, default `"l"`)
     -   `modalSettings.width` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** lets you specify a precise width for the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw'.
     -   `modalSettings.height` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** lets you specify a precise height for the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw'.
 

docs/luigi-core-api.md

@@ -530,7 +530,7 @@ Navigates to the given path in the application. It contains either a full absolu
 -   `preserveView` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** preserve a view by setting it to `true`. It keeps the current view opened in the background and opens the new route in a new frame. Use the [goBack()](#goBack) function to navigate back. You can use this feature across different levels. Preserved views are discarded as soon as you use the standard [navigate()](#navigate) function instead of [goBack()](#goBack)
 -   `modalSettings` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** opens a view in a modal. Use these settings to configure the modal's title and size
     -   `modalSettings.title` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** modal title. By default, it is the node label. If there is no label, it is left empty
-    -   `modalSettings.size` **(`"l"` \| `"m"` \| `"s"`)** size of the modal (optional, default `"l"`)
+    -   `modalSettings.size` **(`"fullscreen"` \| `"l"` \| `"m"` \| `"s"`)** size of the modal (optional, default `"l"`)
     -   `modalSettings.width` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** lets you specify a precise width for the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw'.
     -   `modalSettings.height` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** lets you specify a precise height for the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw'.
 -   `splitViewSettings` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** opens a view in a split view. Use these settings to configure the split view's behaviour
@@ -559,7 +559,7 @@ Opens a view in a modal. You can specify the modal's title and size. If you do n
 -   `path` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** navigation path
 -   `modalSettings` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)?** opens a view in a modal. Use these settings to configure the modal's title and size
     -   `modalSettings.title` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** modal title. By default, it is the node label. If there is no label, it is left empty
-    -   `modalSettings.size` **(`"l"` \| `"m"` \| `"s"`)** size of the modal (optional, default `"l"`)
+    -   `modalSettings.size` **(`"fullscreen"` \| `"l"` \| `"m"` \| `"s"`)** size of the modal (optional, default `"l"`)
     -   `modalSettings.width` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** lets you specify a precise width for the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw'.
     -   `modalSettings.height` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** lets you specify a precise height for the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw'.
 

test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js

@@ -26,6 +26,15 @@ describe('Fiddle', () => {
           .click();
         cy.expectPathToBe('/home/two');
       });
+      it('Open modal via core api with "fullscreen"', () => {
+        cy.window().then(win => {
+          win.Luigi.navigation().openAsModal('/home/two', { size: 'fullscreen' });
+        });
+        cy.get('.lui-modal-mf').should('exist');
+        cy.get('.lui-modal-mf').should('have.class', 'lui-modal-fullscreen');
+        cy.get('.lui-modal-mf').should('have.attr', 'style', 'width:100vw;height:100vh;');
+        cy.get('[aria-label="close"]').click();
+      });
       it('Open modal via core api with "px"', () => {
         cy.window().then(win => {
           win.Luigi.navigation().openAsModal('/home/two', { width: '500px', height: '500px' });

test/e2e-test-application/src/app/project/settings/settings.component.html

@@ -347,6 +347,26 @@ <h3 class="fd-layout-panel__title">Navigate</h3>
           >
           </app-code-snippet>
         </li>
+        <li class="fd-list__item">
+          <a
+            href="javascript:void(0)"
+            class="fd-link"
+            (click)="
+              linkManager().openAsModal('/projects/pr2/webcomponent', {
+                title: 'Webcomponent in a fullscreen modal',
+                size: 'fullscreen'
+              })
+            "
+            >Open webcomponent in a fullscreen modal</a
+          >
+          <app-code-snippet
+            data="linkManager().openAsModal('/projects/pr2/webcomponent', {
+              title: 'Webcomponent in a modal',
+              size: 'fullscreen'
+            })"
+          >
+          </app-code-snippet>
+        </li>
         <li class="fd-list__item">
           <a
             href="javascript:void(0)"
@@ -360,8 +380,7 @@ <h3 class="fd-layout-panel__title">Navigate</h3>
             >Open webcomponent in a modal</a
           >
           <app-code-snippet
-            data="linkManager()
-            .openAsModal('/projects/pr2/webcomponent', {
+            data="linkManager().openAsModal('/projects/pr2/webcomponent', {
               title: 'Webcomponent in a modal',
               size: 'm'
             })"