@openmfp/webcomponents 0.6.1 → 0.6.7

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

@@ -1,141 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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();
-  });
-}

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

@@ -1,142 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,107 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,134 +0,0 @@
-<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()"
-/>