@openmfp/webcomponents 0.6.1 → 0.6.8

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

@@ -1,63 +0,0 @@
-:host {
-  display: block;
-  min-width: 0;
-  min-height: 0;
-  overflow: visible;
-}
-
-.card__remove {
-  position: absolute;
-  top: 0;
-  right: -0.5rem;
-  z-index: 10;
-  border-radius: 50% !important;
-  width: 1.25rem !important;
-  height: 1.25rem !important;
-  min-width: unset !important;
-  padding: 0 !important;
-  font-size: 0.625rem !important;
-}
-
-.remove-wrapper {
-  position: sticky;
-  height: 0.5rem;
-  top: 0;
-  right: 0;
-  z-index: 10;
-}
-
-.component-card {
-  position: relative;
-  height: 100%;
-  overflow: visible;
-  isolation: isolate;
-  padding: 0 0.5rem;
-}
-
-.component-host {
-  height: 100%;
-}
-
-.card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  border: 1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);
-  border-radius: 0.5rem;
-  background: var(--sapBackgroundColor, #fff);
-  overflow: visible;
-
-  &__header {
-    padding: 0.75rem 1rem;
-    font-weight: 600;
-    border-bottom: 1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);
-    background: var(--sapGroup_TitleBackground, #f5f5f5);
-  }
-
-  &__body {
-    flex: 1;
-    padding: 1rem;
-    overflow: auto;
-  }
-}

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

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

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

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

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

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