@openmfp/webcomponents 0.6.1

package/projects/ngx/declarative-ui/dashboard/card/dashboard-card.component.spec.ts

@@ -0,0 +1,255 @@
+import { DashboardCard } from './dashboard-card.component';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+type Fixture = ComponentFixture<DashboardCard>;
+
+function setup(): { fixture: Fixture; component: DashboardCard } {
+  const fixture = TestBed.createComponent(DashboardCard);
+  const component = fixture.componentInstance;
+  return { fixture, component };
+}
+
+function root(fixture: Fixture): ShadowRoot | HTMLElement {
+  return fixture.nativeElement.shadowRoot ?? fixture.nativeElement;
+}
+
+describe('DashboardCard', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DashboardCard],
+    }).compileComponents();
+  });
+
+  it('uses w and h for grid placement on the host element', () => {
+    const { fixture } = setup();
+
+    fixture.componentRef.setInput('card', {
+      id: 'card-1',
+      component: 'demo-widget',
+      w: 3,
+      h: 2,
+    });
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.style.gridColumn).toBe('span 3');
+    expect(fixture.nativeElement.style.gridRow).toBe('span 2');
+  });
+
+  it('uses x and y as zero-based grid start coordinates when provided', () => {
+    const { fixture } = setup();
+
+    fixture.componentRef.setInput('card', {
+      id: 'card-1',
+      component: 'demo-widget',
+      w: 3,
+      h: 2,
+      x: 0,
+      y: 4,
+    });
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.style.gridColumn).toBe('1 / span 3');
+    expect(fixture.nativeElement.style.gridRow).toBe('5 / span 2');
+  });
+
+  it('renders a dynamic component and applies component inputs', () => {
+    const { fixture } = setup();
+
+    fixture.componentRef.setInput('card', {
+      id: 'card-1',
+      component: 'demo-widget',
+      componentInputs: { title: 'Pods', count: 3 },
+    });
+    fixture.detectChanges();
+
+    const element = root(fixture).querySelector('demo-widget') as
+      | (HTMLElement & { title?: string; count?: number })
+      | null;
+
+    expect(element).not.toBeNull();
+    expect(element?.title).toBe('Pods');
+    expect(element?.count).toBe(3);
+  });
+
+  it('replaces the rendered dynamic component when the card definition changes', () => {
+    const { fixture } = setup();
+
+    fixture.componentRef.setInput('card', {
+      id: 'card-1',
+      component: 'demo-widget',
+      componentInputs: { title: 'Pods' },
+    });
+    fixture.detectChanges();
+    fixture.componentRef.setInput('card', {
+      id: 'card-1',
+      component: 'next-widget',
+      componentInputs: { title: 'Services' },
+    });
+    fixture.detectChanges();
+
+    const current = root(fixture).querySelector('next-widget') as
+      | (HTMLElement & { title?: string })
+      | null;
+
+    expect(root(fixture).querySelector('demo-widget')).toBeNull();
+    expect(current?.title).toBe('Services');
+  });
+
+  it('shows a remove action in edit mode and emits when it is clicked', () => {
+    const { fixture, component } = setup();
+    let emitted = 0;
+
+    component.removeCard.subscribe(() => emitted++);
+    fixture.componentRef.setInput('card', {
+      id: 'card-1',
+      component: 'demo-widget',
+    });
+    fixture.componentRef.setInput('editMode', true);
+    fixture.detectChanges();
+
+    const button = root(fixture).querySelector('.card__remove');
+    button?.dispatchEvent(new Event('click'));
+
+    expect(button).not.toBeNull();
+    expect(emitted).toBe(1);
+  });
+
+  it('renders the fallback card shell when no dynamic component tag is provided', () => {
+    const { fixture } = setup();
+
+    fixture.componentRef.setInput('card', {
+      id: 'card-1',
+      component: '',
+    });
+    fixture.detectChanges();
+
+    expect(root(fixture).querySelector('.card__body')).not.toBeNull();
+    expect(root(fixture).querySelector('.component-card')).toBeNull();
+  });
+
+  describe('sap-ui type', () => {
+    let placeAt: ReturnType<typeof vi.fn>;
+    let destroy: ReturnType<typeof vi.fn>;
+    let sapRequire: ReturnType<typeof vi.fn>;
+    let ComponentContainer: 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'];
+    });
+
+    it('calls sap.ui.require with ComponentContainer dependency', () => {
+      const { fixture } = setup();
+
+      fixture.componentRef.setInput('card', {
+        id: 'card-1',
+        component: 'my.sap.App',
+        type: 'sap-ui',
+      });
+      fixture.detectChanges();
+
+      expect(sapRequire).toHaveBeenCalledWith(
+        ['sap/ui/core/ComponentContainer'],
+        expect.any(Function),
+      );
+    });
+
+    it('mounts the SAP component with correct config', () => {
+      const { fixture } = setup();
+
+      fixture.componentRef.setInput('card', {
+        id: 'card-1',
+        component: 'my.sap.App',
+        type: 'sap-ui',
+        componentInputs: { env: 'prod' },
+      });
+      fixture.detectChanges();
+
+      expect(placeAt).toHaveBeenCalledTimes(1);
+      expect(placeAt.mock.calls[0][0]).toBeInstanceOf(HTMLElement);
+    });
+
+    it('destroys the SAP container when the card definition changes', () => {
+      const { fixture } = setup();
+
+      fixture.componentRef.setInput('card', {
+        id: 'card-1',
+        component: 'my.sap.App',
+        type: 'sap-ui',
+      });
+      fixture.detectChanges();
+
+      fixture.componentRef.setInput('card', {
+        id: 'card-1',
+        component: 'my.sap.Other',
+        type: 'sap-ui',
+      });
+      fixture.detectChanges();
+
+      expect(destroy).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not mount a SAP container after the card is cleaned up', () => {
+      const requireResolver: { current?: (ctor: unknown) => void } = {};
+      sapRequire.mockImplementationOnce(
+        (_deps: unknown, cb: (ctor: unknown) => void) => {
+          requireResolver.current = cb;
+        },
+      );
+      const { fixture } = setup();
+
+      fixture.componentRef.setInput('card', {
+        id: 'card-1',
+        component: 'my.sap.App',
+        type: 'sap-ui',
+      });
+      fixture.detectChanges();
+
+      fixture.componentRef.setInput('card', {
+        id: 'card-1',
+        component: 'demo-widget',
+      });
+      fixture.detectChanges();
+
+      requireResolver.current?.(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 { fixture } = setup();
+
+      fixture.componentRef.setInput('card', {
+        id: 'card-1',
+        component: 'my.sap.App',
+        type: 'sap-ui',
+      });
+      fixture.detectChanges();
+
+      expect(consoleSpy).toHaveBeenCalledWith(
+        '[DashboardCard] SAP UI5 is not available on window.sap',
+      );
+      consoleSpy.mockRestore();
+    });
+  });
+});

package/projects/ngx/declarative-ui/dashboard/card/dashboard-card.component.ts

@@ -0,0 +1,75 @@
+import { CARD_TYPES, CardConfig } from '../models';
+import {
+  Component,
+  Renderer2,
+  ViewContainerRef,
+  ViewEncapsulation,
+  computed,
+  effect,
+  inject,
+  input,
+  output,
+  viewChild,
+} from '@angular/core';
+import { Button } from '@fundamental-ngx/ui5-webcomponents/button';
+import { mountSapCard, mountAngularCard, mountWcCard } from './utils';
+
+@Component({
+  selector: 'mfp-dashboard-card',
+  imports: [Button],
+  templateUrl: './dashboard-card.component.html',
+  styleUrl: './dashboard-card.component.scss',
+  encapsulation: ViewEncapsulation.Emulated,
+  host: {
+    '[style.grid-column]': 'gridColumn()',
+    '[style.grid-row]': 'gridRow()',
+  },
+})
+export class DashboardCard {
+  card = input.required<CardConfig>();
+  editMode = input<boolean>(false);
+  readonly removeCard = output<void>();
+  protected readonly gridColumn = computed(() => {
+    const width = this.card().w ?? 12;
+    return this.createGridTrack(this.card().x, width);
+  });
+  protected readonly gridRow = computed(() => {
+    const height = this.card().h ?? 100;
+    return this.createGridTrack(this.card().y, height);
+  });
+
+  private host = viewChild('elementHost', { read: ViewContainerRef });
+  private renderer = inject(Renderer2);
+
+  constructor() {
+    effect((onCleanup) => {
+      const host = this.host();
+      const cfg = this.card();
+      if (!host || !cfg.component) return;
+
+      host.clear();
+      host.element.nativeElement.innerHTML = '';
+
+      switch (cfg.type) {
+        case CARD_TYPES.SAP_UI:
+          mountSapCard(cfg, host, onCleanup);
+          break;
+        case CARD_TYPES.ANGULAR:
+          mountAngularCard(cfg, host, onCleanup);
+          break;
+        case CARD_TYPES.WC:
+        default:
+          mountWcCard(cfg, host, onCleanup, this.renderer);
+          break;
+      }
+    });
+  }
+
+  private createGridTrack(start: number | undefined, span: number): string {
+    if (start === undefined) {
+      return `span ${span}`;
+    }
+
+    return `${start + 1} / span ${span}`;
+  }
+}

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

@@ -0,0 +1,76 @@
+import {
+  addComponentToRegistry,
+  resetDashboardCardRegistry,
+} from './dashboard-card-registry';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'dashboard-test-card',
+  standalone: true,
+  template: 'dashboard test card',
+})
+class DashboardTestCard {}
+
+@Component({
+  selector: '[dashboard-test-card]',
+  standalone: true,
+  template: 'dashboard attr card',
+})
+class DashboardAttrCard {}
+
+@Component({
+  selector: 'dashboard-test-card',
+  standalone: true,
+  host: {
+    'data-test-duplicate': 'true',
+  },
+  template: 'dashboard duplicate card',
+})
+class DashboardDuplicateCard {}
+
+@Component({
+  selector: 'dashboard-non-standalone-card',
+  standalone: false,
+  template: 'dashboard non-standalone card',
+})
+class DashboardNonStandaloneCard {}
+
+describe('dashboard card registry', () => {
+  beforeEach(() => {
+    resetDashboardCardRegistry();
+  });
+
+  it('registers standalone Angular components by selector', () => {
+    expect(() => addComponentToRegistry([DashboardTestCard])).not.toThrow();
+  });
+
+  it('rejects non-component registrations', () => {
+    class NotAComponent {}
+
+    expect(() => addComponentToRegistry([NotAComponent])).toThrowError(
+      'Dashboard card registration failed: "NotAComponent" is not an Angular component.',
+    );
+  });
+
+  it('rejects selectors that are not a single element selector', () => {
+    expect(() => addComponentToRegistry([DashboardAttrCard])).toThrowError(
+      /must use a single element selector\. Received "\[dashboard-test-card\]"./,
+    );
+  });
+
+  it('rejects non-standalone Angular components', () => {
+    expect(() =>
+      addComponentToRegistry([DashboardNonStandaloneCard]),
+    ).toThrowError(
+      'Dashboard card registration failed: "dashboard-non-standalone-card" must be a standalone Angular component.',
+    );
+  });
+
+  it('rejects duplicate selector registrations for different component types', () => {
+    addComponentToRegistry([DashboardTestCard]);
+
+    expect(() => addComponentToRegistry([DashboardDuplicateCard])).toThrowError(
+      'Dashboard card registration failed: selector "dashboard-test-card" is already registered.',
+    );
+  });
+});

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

@@ -0,0 +1,109 @@
+import {
+  Type,
+  isDevMode,
+  isStandalone,
+  reflectComponentType,
+} from '@angular/core';
+
+
+export interface RegisteredDashboardCardComponent {
+  componentType: Type<unknown>;
+  selector: string;
+  inputs: ReadonlyMap<string, string>;
+}
+
+const ELEMENT_SELECTOR_PATTERN = /^[a-z](?:[a-z0-9-]*)$/;
+
+const dashboardCardRegistry = new Map<
+  string,
+  RegisteredDashboardCardComponent
+>();
+
+export function addComponentToRegistry(componentTypes: Type<unknown>[]): void {
+  for (const componentType of componentTypes) {
+    const mirror = reflectComponentType(componentType);
+
+    if (!mirror) {
+      throw new Error(
+        `Dashboard card registration failed: "${getTypeName(componentType)}" is not an Angular component.`,
+      );
+    }
+
+    if (!isStandalone(componentType)) {
+      throw new Error(
+        `Dashboard card registration failed: "${mirror.selector}" must be a standalone Angular component.`,
+      );
+    }
+
+    const selector = toElementSelector(mirror.selector, componentType);
+    const existing = dashboardCardRegistry.get(selector);
+
+    if (existing && existing.componentType !== componentType) {
+      throw new Error(
+        `Dashboard card registration failed: selector "${selector}" is already registered.`,
+      );
+    }
+
+    dashboardCardRegistry.set(selector, {
+      componentType,
+      selector,
+      inputs: createInputMap(mirror.inputs),
+    });
+  }
+}
+
+export function getRegisteredDashboardCardComponent(
+  selector: string,
+): RegisteredDashboardCardComponent | undefined {
+  return dashboardCardRegistry.get(selector);
+}
+
+export function resetDashboardCardRegistry(): void {
+  dashboardCardRegistry.clear();
+}
+
+export function warnForUnknownDashboardCardInput(
+  selector: string,
+  inputName: string,
+): void {
+  if (!isDevMode()) return;
+
+  console.warn(
+    `Dashboard card "${selector}" ignores unknown Angular input "${inputName}".`,
+  );
+}
+
+function createInputMap(
+  inputs: readonly {
+    readonly propName: string;
+    readonly templateName: string;
+  }[],
+): ReadonlyMap<string, string> {
+  const bindings = new Map<string, string>();
+
+  for (const input of inputs) {
+    bindings.set(input.templateName, input.templateName);
+    bindings.set(input.propName, input.templateName);
+  }
+
+  return bindings;
+}
+
+function toElementSelector(
+  selector: string,
+  componentType: Type<unknown>,
+): string {
+  const normalized = selector.trim();
+
+  if (!ELEMENT_SELECTOR_PATTERN.test(normalized)) {
+    throw new Error(
+      `Dashboard card registration failed: "${getTypeName(componentType)}" must use a single element selector. Received "${selector}".`,
+    );
+  }
+
+  return normalized;
+}
+
+function getTypeName(componentType: Type<unknown>): string {
+  return componentType.name.replace(/^_+/, '') || 'AnonymousComponent';
+}

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

@@ -0,0 +1,4 @@
+export * from './dashboard-card-registry';
+export * from './mount-angular-card';
+export * from './mount-sap-card';
+export * from './mount-wc-card';

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

@@ -0,0 +1,141 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  EffectCleanupRegisterFn,
+  ViewContainerRef,
+  input,
+} from '@angular/core';
+import { mountAngularCard } from './mount-angular-card';
+import {
+  addComponentToRegistry,
+  resetDashboardCardRegistry,
+} from './dashboard-card-registry';
+import { CardConfig } from '../../models';
+
+@Component({
+  selector: 'mfp-test-angular-card',
+  standalone: true,
+  template: '<span>angular card</span>',
+})
+class TestAngularCard {
+  title = input<string>();
+  count = input<number>();
+}
+
+function makeCleanup(): {
+  onCleanup: EffectCleanupRegisterFn;
+  runCleanup: () => void;
+} {
+  let registered: (() => void) | undefined;
+  return {
+    onCleanup: (fn) => {
+      registered = fn;
+    },
+    runCleanup: () => registered?.(),
+  };
+}
+
+function makeMockVcr(): {
+  vcr: ViewContainerRef;
+  setInput: ReturnType<typeof vi.fn>;
+  clear: ReturnType<typeof vi.fn>;
+} {
+  const setInput = vi.fn();
+  const detectChanges = vi.fn();
+  const componentRef = {
+    setInput,
+    changeDetectorRef: { detectChanges } as unknown as ChangeDetectorRef,
+  };
+  const clear = vi.fn();
+  const vcr = {
+    createComponent: vi.fn(() => componentRef),
+    clear,
+  } as unknown as ViewContainerRef;
+  return { vcr, setInput, clear };
+}
+
+function makeCfg(overrides: Partial<CardConfig> = {}): CardConfig {
+  return {
+    id: 'card-1',
+    component: 'mfp-test-angular-card',
+    type: 'angular',
+    ...overrides,
+  };
+}
+
+describe('mountAngularCard', () => {
+  beforeEach(() => {
+    resetDashboardCardRegistry();
+    addComponentToRegistry([TestAngularCard]);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    resetDashboardCardRegistry();
+  });
+
+  it('creates the registered Angular component in the host', () => {
+    const { vcr } = makeMockVcr();
+    const { onCleanup } = makeCleanup();
+    mountAngularCard(makeCfg(), vcr, onCleanup);
+
+    expect(
+      (vcr.createComponent as ReturnType<typeof vi.fn>),
+    ).toHaveBeenCalledWith(TestAngularCard);
+  });
+
+  it('calls setInput for each provided componentInput', () => {
+    const { vcr, setInput } = makeMockVcr();
+    const { onCleanup } = makeCleanup();
+    mountAngularCard(
+      makeCfg({ componentInputs: { title: 'Pods', count: 3 } }),
+      vcr,
+      onCleanup,
+    );
+
+    expect(setInput).toHaveBeenCalledWith('title', 'Pods');
+    expect(setInput).toHaveBeenCalledWith('count', 3);
+  });
+
+  it('warns and skips unknown inputs in dev mode', () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(vi.fn());
+    const { vcr, setInput } = makeMockVcr();
+    const { onCleanup } = makeCleanup();
+
+    mountAngularCard(
+      makeCfg({ componentInputs: { unknownProp: 'x' } }),
+      vcr,
+      onCleanup,
+    );
+
+    expect(warnSpy).toHaveBeenCalledWith(
+      expect.stringContaining('unknownProp'),
+    );
+    expect(setInput).not.toHaveBeenCalled();
+  });
+
+  it('clears the host on cleanup', () => {
+    const { vcr, clear } = makeMockVcr();
+    const { onCleanup, runCleanup } = makeCleanup();
+    mountAngularCard(makeCfg(), vcr, onCleanup);
+
+    runCleanup();
+
+    expect(clear).toHaveBeenCalledTimes(1);
+  });
+
+  it('warns and returns without creating a component when selector is not registered', () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(vi.fn());
+    const { vcr } = makeMockVcr();
+    const { onCleanup } = makeCleanup();
+
+    mountAngularCard(makeCfg({ component: 'unknown-card' }), vcr, onCleanup);
+
+    expect(
+      (vcr.createComponent as ReturnType<typeof vi.fn>),
+    ).not.toHaveBeenCalled();
+    expect(warnSpy).toHaveBeenCalledWith(
+      expect.stringContaining('"unknown-card" is not registered'),
+    );
+  });
+});

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

@@ -0,0 +1,44 @@
+import { CardConfig } from '../../models';
+import {
+  getRegisteredDashboardCardComponent,
+  warnForUnknownDashboardCardInput,
+} from './dashboard-card-registry';
+import { EffectCleanupRegisterFn, ViewContainerRef } from '@angular/core';
+
+export function mountAngularCard(
+  cfg: CardConfig,
+  angularHost: ViewContainerRef,
+  onCleanup: EffectCleanupRegisterFn,
+): void {
+  const registeredComponent = getRegisteredDashboardCardComponent(
+    cfg.component,
+  );
+
+  if (!registeredComponent) {
+    console.warn(
+      `[DashboardCard] Angular component "${cfg.component}" is not registered`,
+    );
+    return;
+  }
+
+  const componentRef = angularHost.createComponent(
+    registeredComponent.componentType,
+  );
+
+  for (const [inputName, value] of Object.entries(cfg.componentInputs ?? {})) {
+    const templateName = registeredComponent.inputs.get(inputName);
+
+    if (!templateName) {
+      warnForUnknownDashboardCardInput(cfg.component, inputName);
+      continue;
+    }
+
+    componentRef.setInput(templateName, value);
+  }
+
+  componentRef.changeDetectorRef.detectChanges();
+
+  onCleanup(() => {
+    angularHost.clear();
+  });
+}