@outbook/webcomponents-modal-dialog 1.0.3 → 1.0.4

package/modal-dialog.js

@@ -5,7 +5,6 @@ import { Scrollable } from '@outbook/webcomponents-scrollable';
 import { TypeIcon } from '@outbook/webcomponents-type-icon/shadow';
 import { close } from '@outbook/icons';
 import { DialogBase } from './_lib/dialog-base.js';
-import { tmplSlot } from './_lib/tmpl-slot.js';
 import { Tabs } from '@outbook/webcomponents-tabs';
 import { getI18n } from './_i18n/i18n.js';
 import styleComponent from './_style/modal-dialog.style.js';
@@ -27,6 +26,13 @@ function DialogUi(props) {
     view = null,
     tabs = []
   } = props;
+  const dialogContent =
+    view !== null
+      ? view({ closeDialog: handlers.close })
+      : tabs.length
+        ? Tabs({ items: tabs, isInDialog: true })
+        : nothing;
+
   return html`
     <outbook-modal-dialog
       class="dialog--host"
@@ -35,16 +41,10 @@ function DialogUi(props) {
         literals,
         handlers,
         dialogId: baseId,
-        portalWrapperId,
-        content: () => {
-          return view !== null
-            ? view({ closeDialog: handlers.close })
-            : tabs.length
-              ? Tabs({ items: tabs, isInDialog: true })
-              : nothing;
-        }
+        portalWrapperId
       }}"
-    ></outbook-modal-dialog>
+      >${dialogContent}</outbook-modal-dialog
+    >
   `;
 }
 
@@ -91,6 +91,16 @@ function DialogUiComponent(element) {
     'dialog--scroll': hasScroll
   });
 
+  function contentSlot() {
+    return html`
+      <div class="dialog__content-wrapper">
+        <div class="dialog__content" id="${dialogId}-view">
+          <slot>${content ? content() : nothing}</slot>
+        </div>
+      </div>
+    `;
+  }
+
   return html`
     <div tabindex="0" @focus="${refocusEnd}"></div>
     <div
@@ -137,9 +147,9 @@ function DialogUiComponent(element) {
         ${hasScroll
           ? Scrollable({
               extraClasses: 'dialog__content-scroll',
-              content: () => tmplSlot({ dialogId, content })
+              content: contentSlot
             })
-          : tmplSlot({ dialogId, content })}
+          : contentSlot()}
       </div>
     </div>
     <div tabindex="0" @focus="${refocusStart}"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@outbook/webcomponents-modal-dialog",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "main": "modal-dialog.js",
   "type": "module",
   "private": false,

package/_lib/tmpl-slot.js

@@ -1,9 +0,0 @@
-import { html } from 'lit';
-
-export function tmplSlot({ dialogId, content }) {
-  return html`
-    <div class="dialog__content-wrapper">
-      <div class="dialog__content" id="${dialogId}-view">${content()}</div>
-    </div>
-  `;
-}