@openmfp/webcomponents 0.6.1

package/projects/ngx/declarative-ui/dashboard/card/utils/mount-sap-card.spec.ts

@@ -0,0 +1,142 @@
+import { EffectCleanupRegisterFn, ViewContainerRef } from '@angular/core';
+import { mountSapCard } from './mount-sap-card';
+import { CardConfig } from '../../models';
+
+function makeCleanup(): {
+  onCleanup: EffectCleanupRegisterFn;
+  runCleanup: () => void;
+} {
+  let registered: (() => void) | undefined;
+  return {
+    onCleanup: (fn) => {
+      registered = fn;
+    },
+    runCleanup: () => registered?.(),
+  };
+}
+
+function makeContainer(): { container: ViewContainerRef; el: HTMLElement } {
+  const el = document.createElement('div');
+  document.body.appendChild(el);
+  const container = { element: { nativeElement: el } } as unknown as ViewContainerRef;
+  return { container, el };
+}
+
+function makeCfg(overrides: Partial<CardConfig> = {}): CardConfig {
+  return { id: 'card-1', component: 'my.sap.App', type: 'sap-ui', ...overrides };
+}
+
+describe('mountSapCard', () => {
+  let placeAt: ReturnType<typeof vi.fn>;
+  let destroy: ReturnType<typeof vi.fn>;
+  let ComponentContainer: ReturnType<typeof vi.fn>;
+  let sapRequire: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    placeAt = vi.fn();
+    destroy = vi.fn();
+    ComponentContainer = vi.fn(function (this: Record<string, unknown>) {
+      this['placeAt'] = placeAt;
+      this['destroy'] = destroy;
+    });
+    sapRequire = vi
+      .fn()
+      .mockImplementation((_deps: unknown, cb: (ctor: unknown) => void) => {
+        cb(ComponentContainer);
+      });
+
+    (window as unknown as Record<string, unknown>)['sap'] = {
+      ui: { require: sapRequire },
+    };
+  });
+
+  afterEach(() => {
+    delete (window as unknown as Record<string, unknown>)['sap'];
+    vi.restoreAllMocks();
+  });
+
+  it('calls sap.ui.require with ComponentContainer dependency', () => {
+    const { onCleanup } = makeCleanup();
+    mountSapCard(makeCfg(), makeContainer().container, onCleanup);
+
+    expect(sapRequire).toHaveBeenCalledWith(
+      ['sap/ui/core/ComponentContainer'],
+      expect.any(Function),
+    );
+  });
+
+  it('instantiates ComponentContainer with the correct config', () => {
+    const { onCleanup } = makeCleanup();
+    mountSapCard(
+      makeCfg({ componentInputs: { env: 'prod' } }),
+      makeContainer().container,
+      onCleanup,
+    );
+
+    expect(ComponentContainer).toHaveBeenCalledWith({
+      name: 'my.sap.App',
+      manifest: true,
+      async: true,
+      settings: { env: 'prod' },
+    });
+  });
+
+  it('falls back to empty settings when componentInputs is omitted', () => {
+    const { onCleanup } = makeCleanup();
+    mountSapCard(makeCfg(), makeContainer().container, onCleanup);
+
+    expect(ComponentContainer).toHaveBeenCalledWith(
+      expect.objectContaining({ settings: {} }),
+    );
+  });
+
+  it('calls placeAt with the host element', () => {
+    const { onCleanup } = makeCleanup();
+    const { container, el } = makeContainer();
+    mountSapCard(makeCfg(), container, onCleanup);
+
+    expect(placeAt).toHaveBeenCalledWith(el);
+  });
+
+  it('destroys the container and clears the host on cleanup', () => {
+    const { onCleanup, runCleanup } = makeCleanup();
+    const { container, el } = makeContainer();
+    el.innerHTML = '<span>old</span>';
+    mountSapCard(makeCfg(), container, onCleanup);
+
+    runCleanup();
+
+    expect(destroy).toHaveBeenCalledTimes(1);
+    expect(el.innerHTML).toBe('');
+  });
+
+  it('does not mount the container when cleanup runs before the require callback fires', () => {
+    let deferred: ((ctor: unknown) => void) | undefined;
+    sapRequire.mockImplementationOnce(
+      (_deps: unknown, cb: (ctor: unknown) => void) => {
+        deferred = cb;
+      },
+    );
+
+    const { onCleanup, runCleanup } = makeCleanup();
+    mountSapCard(makeCfg(), makeContainer().container, onCleanup);
+
+    runCleanup();
+    deferred?.(ComponentContainer);
+
+    expect(ComponentContainer).not.toHaveBeenCalled();
+    expect(placeAt).not.toHaveBeenCalled();
+  });
+
+  it('logs an error when window.sap is not available', () => {
+    delete (window as unknown as Record<string, unknown>)['sap'];
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(vi.fn());
+    const { onCleanup } = makeCleanup();
+
+    mountSapCard(makeCfg(), makeContainer().container, onCleanup);
+
+    expect(consoleSpy).toHaveBeenCalledWith(
+      '[DashboardCard] SAP UI5 is not available on window.sap',
+    );
+  });
+});

package/projects/ngx/declarative-ui/dashboard/card/utils/mount-sap-card.ts

@@ -0,0 +1,52 @@
+import { CardConfig } from '../../models';
+import { EffectCleanupRegisterFn, ViewContainerRef } from '@angular/core';
+
+export type SapUiRequire = (
+  deps: string[],
+  cb: (
+    ComponentContainer: new (cfg: {
+      name: string;
+      manifest: boolean;
+      async: boolean;
+      settings: Record<string, unknown>;
+    }) => { placeAt(el: HTMLElement): void; destroy(): void },
+  ) => void,
+) => void;
+
+export function mountSapCard(
+  cfg: CardConfig,
+  container: ViewContainerRef,
+  onCleanup: EffectCleanupRegisterFn,
+): void {
+  const host = container.element.nativeElement;
+
+  let sapContainer: { destroy(): void } | null = null;
+  let isDestroyed = false;
+  const sapRequire = (
+    window as unknown as { sap?: { ui: { require: SapUiRequire } } }
+  ).sap?.ui?.require;
+
+  if (sapRequire) {
+    sapRequire(['sap/ui/core/ComponentContainer'], (ComponentContainer) => {
+      if (isDestroyed) return;
+
+      const container = new ComponentContainer({
+        name: cfg.component,
+        manifest: true,
+        async: true,
+        settings: cfg.componentInputs ?? {},
+      });
+
+      container.placeAt(host);
+      sapContainer = container;
+    });
+  } else {
+    console.error('[DashboardCard] SAP UI5 is not available on window.sap');
+  }
+
+  onCleanup(() => {
+    isDestroyed = true;
+    sapContainer?.destroy();
+    host.innerHTML = '';
+  });
+}

package/projects/ngx/declarative-ui/dashboard/card/utils/mount-wc-card.spec.ts

@@ -0,0 +1,107 @@
+import { EffectCleanupRegisterFn, Renderer2, ViewContainerRef } from '@angular/core';
+import { mountWcCard } from './mount-wc-card';
+import { CardConfig } from '../../models';
+
+function makeCleanup(): {
+  onCleanup: EffectCleanupRegisterFn;
+  runCleanup: () => void;
+} {
+  let registered: (() => void) | undefined;
+  return {
+    onCleanup: (fn) => {
+      registered = fn;
+    },
+    runCleanup: () => registered?.(),
+  };
+}
+
+function makeContainer(): { container: ViewContainerRef; el: HTMLElement } {
+  const el = document.createElement('div');
+  document.body.appendChild(el);
+  const container = { element: { nativeElement: el } } as unknown as ViewContainerRef;
+  return { container, el };
+}
+
+function makeRenderer(): Renderer2 {
+  return {
+    createElement: vi.fn((tag: string) => document.createElement(tag)),
+    setProperty: vi.fn((el: Record<string, unknown>, key: string, value: unknown) => {
+      el[key] = value;
+    }),
+    appendChild: vi.fn((parent: HTMLElement, child: HTMLElement) => {
+      parent.appendChild(child);
+    }),
+  } as unknown as Renderer2;
+}
+
+function makeCfg(overrides: Partial<CardConfig> = {}): CardConfig {
+  return { id: 'card-1', component: 'demo-widget', ...overrides };
+}
+
+describe('mountWcCard', () => {
+  it('appends the web component element to the host', () => {
+    const { onCleanup } = makeCleanup();
+    const { container, el } = makeContainer();
+    mountWcCard(makeCfg(), container, onCleanup, makeRenderer());
+
+    expect(el.querySelector('demo-widget')).not.toBeNull();
+  });
+
+  it('applies componentInputs as properties on the element', () => {
+    const { onCleanup } = makeCleanup();
+    const { container, el } = makeContainer();
+    mountWcCard(
+      makeCfg({ componentInputs: { title: 'Pods', count: 5 } }),
+      container,
+      onCleanup,
+      makeRenderer(),
+    );
+
+    const wc = el.querySelector('demo-widget') as HTMLElement & {
+      title?: string;
+      count?: number;
+    };
+    expect(wc?.title).toBe('Pods');
+    expect(wc?.count).toBe(5);
+  });
+
+  it('renders without errors when componentInputs is omitted', () => {
+    const { onCleanup } = makeCleanup();
+    expect(() => {
+      mountWcCard(makeCfg(), makeContainer().container, onCleanup, makeRenderer());
+    }).not.toThrow();
+  });
+
+  it('clears the host innerHTML on cleanup', () => {
+    const { onCleanup, runCleanup } = makeCleanup();
+    const { container, el } = makeContainer();
+    mountWcCard(makeCfg(), container, onCleanup, makeRenderer());
+
+    runCleanup();
+
+    expect(el.innerHTML).toBe('');
+  });
+
+  it('calls renderer.createElement, setProperty and appendChild in order', () => {
+    const { onCleanup } = makeCleanup();
+    const { container, el } = makeContainer();
+    const renderer = makeRenderer();
+    mountWcCard(
+      makeCfg({ componentInputs: { label: 'test' } }),
+      container,
+      onCleanup,
+      renderer,
+    );
+
+    expect(renderer.createElement).toHaveBeenCalledWith('demo-widget');
+    expect(renderer.setProperty).toHaveBeenCalledWith(
+      expect.any(HTMLElement),
+      'label',
+      'test',
+    );
+    expect(renderer.appendChild).toHaveBeenCalledWith(
+      el,
+      expect.any(HTMLElement),
+    );
+  });
+});

package/projects/ngx/declarative-ui/dashboard/card/utils/mount-wc-card.ts

@@ -0,0 +1,22 @@
+import { EffectCleanupRegisterFn, Renderer2, ViewContainerRef } from '@angular/core';
+import { CardConfig } from '../../models';
+
+export function mountWcCard(
+  cfg: CardConfig,
+  container: ViewContainerRef,
+  onCleanup: EffectCleanupRegisterFn,
+  renderer: Renderer2,
+): void {
+  const host = container.element.nativeElement;
+  const element = renderer.createElement(cfg.component);
+
+  for (const [key, value] of Object.entries(cfg.componentInputs ?? {})) {
+    renderer.setProperty(element, key, value);
+  }
+
+  renderer.appendChild(host, element);
+
+  onCleanup(() => {
+    host.innerHTML = '';
+  });
+}

package/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.html

@@ -0,0 +1,134 @@
+<div class="mfp-dashboard">
+  <div class="mfp-dashboard__topbar">
+    <div class="mfp-dashboard__topbar-row">
+      <div class="mfp-dashboard__header">
+        @if (config().title) {
+          <ui5-title level="H2" size="H2" wrapping-type="Normal">{{
+            config().title
+          }}</ui5-title>
+        }
+        @if (config().description) {
+          <ui5-text>{{ config().description }}</ui5-text>
+        }
+      </div>
+
+      <div class="mfp-dashboard__toolbar">
+        @if (editMode()) {
+          <ui5-button
+            id="add-card-btn"
+            [design]="addCardButton().design"
+            [icon]="addCardButton().icon"
+            [tooltip]="addCardButton().tooltip"
+            (click)="openCardPanel()"
+            >{{ addCardButton().text }}</ui5-button
+          >
+        } @else if (compactToolbar()) {
+          <ui5-button
+            #menuBtn
+            design="Transparent"
+            icon="menu2"
+            tooltip="Actions"
+            (click)="toolbarMenuOpen.update((v) => !v)"
+          ></ui5-button>
+          <ui5-menu
+            [open]="toolbarMenuOpen()"
+            [opener]="menuBtn.element"
+            (ui5Open)="toolbarMenuOpen.set(true)"
+            (ui5Close)="toolbarMenuOpen.set(false)"
+            (ui5ItemClick)="
+              onMenuItemClick(
+                $any($event).detail.item.dataset['action'],
+                $event
+              )
+            "
+          >
+            @for (action of customActions(); track action.action) {
+              <ui5-menu-item
+                [icon]="action.icon ?? ''"
+                [text]="action.text ?? ''"
+                [attr.data-action]="action.action"
+              ></ui5-menu-item>
+            }
+            @if (config().editable) {
+              <ui5-menu-separator></ui5-menu-separator>
+              <ui5-menu-item
+                [icon]="editViewButton().icon"
+                [text]="editViewButton().text || 'Edit View'"
+                data-action="edit-view"
+              ></ui5-menu-item>
+            }
+          </ui5-menu>
+        } @else {
+          @for (action of customActions(); track action.action) {
+            <ui5-button
+              [design]="action.design ?? 'Default'"
+              [icon]="action.icon ?? ''"
+              [endIcon]="action?.endIcon"
+              [tooltip]="action.tooltip ?? ''"
+              (click)="
+                actionButtonClick.emit({ event: $event, action: action })
+              "
+              >{{ action.text }}</ui5-button
+            >
+          }
+          @if (config().editable) {
+            <ui5-button
+              [design]="editViewButton().design"
+              [icon]="editViewButton().icon"
+              [tooltip]="editViewButton().tooltip"
+              (click)="enterEditMode()"
+              >{{ editViewButton().text }}</ui5-button
+            >
+          }
+        }
+      </div>
+    </div>
+
+    <div class="mfp-dashboard__subheader">
+      <slot name="dashboard-subheader"></slot>
+    </div>
+  </div>
+  <div class="mfp-sections-container">
+    @for (section of sections(); track section.id) {
+      <mfp-dashboard-section
+        [section]="section"
+        [cards]="sectionCards()(section.id)"
+        [columns]="12"
+        [editMode]="editMode()"
+        (removeSection)="removeSection(section.id)"
+        (removeCard)="removeCard($event)"
+      />
+    }
+  </div>
+  <gridstack #grid (changeCB)="onOrderChange($event)" [options]="gridOptions()">
+    @for (card of looseCards(); track card.id) {
+      <gridstack-item
+        [style.cursor]="editMode() ? 'pointer' : 'auto'"
+        [options]="card"
+      >
+        <mfp-dashboard-card
+          [card]="card"
+          [editMode]="editMode()"
+          (removeCard)="removeCard($any(card.id))"
+        />
+      </gridstack-item>
+    }
+  </gridstack>
+
+  @if (editMode()) {
+    <div class="mfp-dashboard__edit-bar">
+      <ui5-button design="Emphasized" (click)="saveEdit()">Save</ui5-button>
+      <ui5-button design="Transparent" (click)="cancelEdit()"
+        >Cancel</ui5-button
+      >
+    </div>
+  }
+</div>
+
+<mfp-add-card-dialog
+  [open]="cardDialogOpen()"
+  [availableCards]="availableCards()"
+  [addedCardsIds]="addedCardsIds()"
+  (confirm)="onCardsAdded($event)"
+  (cancel)="closeCardPanel()"
+/>

package/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.scss

@@ -0,0 +1,88 @@
+@import 'gridstack/dist/gridstack.min.css';
+
+mfp-dashboard,
+mfp-wc-dashboard {
+  display: block;
+  margin: 0;
+  padding: 0;
+  min-height: 100%;
+  background: var(--sapShellColor, #354a5e);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-attachment: local;
+}
+
+.mfp-dashboard {
+  padding: 2rem;
+}
+
+.mfp-sections-container {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-auto-rows: auto;
+  align-content: start;
+  gap: 1rem;
+
+  @media (max-width: 726px) {
+    grid-template-columns: 1fr;
+  }
+
+  @media (min-width: 727px) and (max-width: 1200px) {
+    grid-template-columns: repeat(8, 1fr);
+  }
+}
+
+.mfp-dashboard__topbar {
+  grid-column: 1 / -1;
+  align-self: start;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding-bottom: 3rem;
+  width: 100%;
+  min-width: 0;
+}
+
+.mfp-dashboard__topbar-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.mfp-dashboard__header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.mfp-dashboard__toolbar {
+  flex-shrink: 0;
+  display: flex;
+  gap: 0.5rem;
+}
+
+.mfp-dashboard__subheader {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.mfp-dashboard__edit-bar {
+  position: fixed;
+  bottom: 20px;
+  left: 16px;
+  right: 16px;
+  z-index: 1000;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 16px;
+  background: var(--sapPageFooter_Background, white);
+  border-radius: var(--sapElement_BorderCornerRadius, 12px);
+  box-shadow: 0px 0px 0px 1px rgba(34, 53, 72, 0.48), 0px 2px 8px 0px rgba(34, 53, 72, 0.3);
+  box-sizing: border-box;
+  overflow: hidden;
+}