@openmfp/webcomponents 0.6.1 → 0.6.8

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

@@ -1,88 +0,0 @@
-@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;
-}

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

@@ -1,354 +0,0 @@
-import { resetDashboardCardRegistry } from '../card/utils/dashboard-card-registry';
-import { CardConfig, SectionConfig } from '../models';
-import { Dashboard } from './dashboard.component';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-vi.mock('gridstack', () => ({}));
-
-vi.mock('gridstack/dist/angular', async () => {
-  const { Component, EventEmitter, Input, Output } =
-    await import('@angular/core');
-
-  @Component({
-    selector: 'mfp-gridstack',
-    standalone: true,
-    template: '<ng-content />',
-  })
-  class GridstackComponent {
-    @Input() options?: unknown;
-    @Output() readonly changeCB = new EventEmitter<unknown>();
-
-    gridstackItems = {
-      toArray: () => [],
-    };
-  }
-
-  @Component({
-    selector: 'mfp-gridstack-item',
-    standalone: true,
-    template: '<ng-content />',
-  })
-  class GridstackItemComponent {
-    @Input() options?: unknown;
-  }
-
-  return {
-    GridstackComponent,
-    GridstackItemComponent,
-  };
-});
-
-type Fixture = ComponentFixture<Dashboard>;
-
-function setup(): { fixture: Fixture; component: Dashboard } {
-  const fixture = TestBed.createComponent(Dashboard);
-  const component = fixture.componentInstance;
-  return { fixture, component };
-}
-
-function root(fixture: Fixture): ShadowRoot | HTMLElement {
-  return fixture.nativeElement.shadowRoot ?? fixture.nativeElement;
-}
-
-describe('Dashboard', () => {
-  beforeEach(async () => {
-    resetDashboardCardRegistry();
-    await TestBed.configureTestingModule({
-      imports: [Dashboard],
-    }).compileComponents();
-  });
-
-  it('creates and applies the configured background image', () => {
-    const { fixture, component } = setup();
-
-    fixture.componentRef.setInput('config', {
-      title: 'Operations',
-      backgroundImageUrl: 'https://example.com/bg.png',
-    });
-    fixture.detectChanges();
-
-    expect(component).toBeTruthy();
-    expect(fixture.nativeElement.style.backgroundImage).toContain(
-      'https://example.com/bg.png',
-    );
-  });
-
-  it('renders dashboard metadata, sections and loose cards from the provided inputs', () => {
-    const { fixture, component } = setup();
-
-    fixture.componentRef.setInput('config', {
-      title: 'Operations',
-      description: 'Platform status',
-    });
-    component.sections.set([{ id: 'alpha', title: 'Alpha' }]);
-    component.cards.set([
-      { id: 'card-1', component: 'mfp-a', sectionId: 'alpha' },
-      { id: 'card-2', component: 'mfp-b' },
-    ]);
-    fixture.detectChanges();
-
-    expect(root(fixture).textContent).toContain('Operations');
-    expect(root(fixture).textContent).toContain('Platform status');
-    expect(
-      root(fixture).querySelectorAll('mfp-dashboard-section'),
-    ).toHaveLength(1);
-    expect(root(fixture).querySelectorAll('gridstack-item')).toHaveLength(1);
-    expect(
-      root(fixture).querySelector('.mfp-dashboard__toolbar ui5-button'),
-    ).toBeNull();
-  });
-
-  it('switches the template into edit mode and opens the add-card dialog from the toolbar', () => {
-    const { fixture, component } = setup();
-
-    fixture.componentRef.setInput('config', {
-      title: 'Operations',
-      editable: true,
-    });
-    component.cards.set([{ id: 'card-1', component: 'mfp-a' }]);
-    fixture.detectChanges();
-
-    const editButton = root(fixture).querySelector(
-      '.mfp-dashboard__toolbar ui5-button',
-    );
-
-    editButton?.dispatchEvent(new Event('click'));
-    fixture.detectChanges();
-
-    const addCardButton = root(fixture).querySelector('#add-card-btn');
-
-    expect(component.editMode()).toBe(true);
-    expect(addCardButton).not.toBeNull();
-    expect(
-      root(fixture).querySelectorAll('.mfp-dashboard__edit-bar ui5-button'),
-    ).toHaveLength(2);
-
-    addCardButton?.dispatchEvent(new Event('click'));
-    fixture.detectChanges();
-
-    expect(component.cardDialogOpen()).toBe(true);
-  });
-
-  it('computes added components, section cards, loose cards and drag options from state', () => {
-    const { component } = setup();
-    const cards: CardConfig[] = [
-      { id: 'card-1', component: 'mfp-a', sectionId: 'alpha' },
-      { id: 'card-2', component: 'mfp-b' },
-      { id: 'card-3', component: 'mfp-c' },
-    ];
-    const gridOptions = (
-      component as unknown as { gridOptions: () => { disableDrag: boolean } }
-    ).gridOptions;
-
-    component.cards.set(cards);
-
-    expect(component.addedCardsIds()).toEqual(
-      new Set(['card-1', 'card-2', 'card-3']),
-    );
-    expect(component.sectionCards()('alpha')).toEqual([cards[0]]);
-    expect(component.looseCards()).toEqual([cards[1], cards[2]]);
-    expect(gridOptions().disableDrag).toBe(true);
-
-    component.editMode.set(true);
-
-    expect(gridOptions().disableDrag).toBe(false);
-  });
-
-  it('captures snapshots and grid positions when entering edit mode', () => {
-    const { component } = setup();
-    const sections: SectionConfig[] = [{ id: 'alpha', title: 'Alpha' }];
-    const cards: CardConfig[] = [
-      { id: 'card-1', component: 'mfp-a', x: 0, y: 0 },
-      { id: 'card-2', component: 'mfp-b', sectionId: 'alpha', x: 1, y: 1 },
-    ];
-
-    component.sections.set(sections);
-    component.cards.set(cards);
-    (component as unknown as { gridStackItems: () => unknown }).gridStackItems =
-      () => ({
-        gridstackItems: {
-          toArray: () => [
-            { options: { id: 'card-1', x: 4, y: 2 } },
-            { options: { id: 'card-2', x: 1, y: 3 } },
-          ],
-        },
-      });
-
-    component.enterEditMode();
-
-    expect(component.editMode()).toBe(true);
-    expect(
-      (component as unknown as { sectionsSnapshot: SectionConfig[] })
-        .sectionsSnapshot,
-    ).toEqual(sections);
-    expect(
-      (component as unknown as { cardsSnapshot: CardConfig[] }).cardsSnapshot,
-    ).toEqual(cards);
-    expect(component.cardsPosition.get('card-1')).toEqual({ x: 4, y: 2 });
-    expect(component.cardsPosition.get('card-2')).toEqual({ x: 1, y: 3 });
-  });
-
-  it('emits the saved payload and persists the latest order on save', () => {
-    const { component } = setup();
-    const sections: SectionConfig[] = [{ id: 'alpha', title: 'Alpha' }];
-    const cards: CardConfig[] = [{ id: 'card-1', component: 'mfp-a' }];
-    const emitted: { sections: SectionConfig[]; cards: CardConfig[] }[] = [];
-
-    component.sections.set(sections);
-    component.cards.set(cards);
-    component.editMode.set(true);
-    component.saved.subscribe((value) => emitted.push(value));
-    component.onOrderChange({
-      nodes: [{ id: 'card-1', x: 7, y: 5 }],
-    } as never);
-
-    component.saveEdit();
-
-    expect(emitted).toEqual([
-      {
-        sections,
-        cards: [{ id: 'card-1', component: 'mfp-a', x: 7, y: 5 }],
-      },
-    ]);
-    expect(component.cardsPosition.get('card-1')).toEqual({ x: 7, y: 5 });
-    expect(component.editMode()).toBe(false);
-  });
-
-  it('restores snapshot data and saved positions when edit mode is cancelled', () => {
-    const { component } = setup();
-    const sections: SectionConfig[] = [{ id: 'alpha', title: 'Alpha' }];
-    const cards: CardConfig[] = [
-      { id: 'card-1', component: 'mfp-a', x: 0, y: 0 },
-      { id: 'card-2', component: 'mfp-b', sectionId: 'alpha', x: 1, y: 1 },
-    ];
-
-    component.sections.set(sections);
-    component.cards.set(cards);
-    (component as unknown as { gridStackItems: () => unknown }).gridStackItems =
-      () => ({
-        gridstackItems: {
-          toArray: () => [
-            { options: { id: 'card-1', x: 3, y: 6 } },
-            { options: { id: 'card-2', x: 8, y: 1 } },
-          ],
-        },
-      });
-    component.enterEditMode();
-    component.sections.set([{ id: 'beta', title: 'Beta' }]);
-    component.cards.set([{ id: 'temp', component: 'mfp-temp', x: 9, y: 9 }]);
-    component.cardDialogOpen.set(true);
-
-    component.cancelEdit();
-
-    expect(component.sections()).toEqual(sections);
-    expect(component.cards()).toEqual([
-      { id: 'card-1', component: 'mfp-a', x: 3, y: 6 },
-      { id: 'card-2', component: 'mfp-b', sectionId: 'alpha', x: 8, y: 1 },
-    ]);
-    expect(component.cardDialogOpen()).toBe(false);
-    expect(component.editMode()).toBe(false);
-  });
-
-  it('removes sections together with their cards and removes loose cards by id', () => {
-    const { component } = setup();
-
-    component.sections.set([
-      { id: 'alpha', title: 'Alpha' },
-      { id: 'beta', title: 'Beta' },
-    ]);
-    component.cards.set([
-      { id: 'card-1', component: 'mfp-a', sectionId: 'alpha' },
-      { id: 'card-2', component: 'mfp-b', sectionId: 'beta' },
-      { id: 'card-3', component: 'mfp-c' },
-    ]);
-
-    component.removeSection('alpha');
-    component.removeCard('card-3');
-
-    expect(component.sections()).toEqual([{ id: 'beta', title: 'Beta' }]);
-    expect(component.cards()).toEqual([
-      { id: 'card-2', component: 'mfp-b', sectionId: 'beta' },
-    ]);
-  });
-
-  it('opens and closes the add-card dialog', () => {
-    const { component } = setup();
-
-    component.openCardPanel();
-    expect(component.cardDialogOpen()).toBe(true);
-
-    component.closeCardPanel();
-    expect(component.cardDialogOpen()).toBe(false);
-  });
-
-  it('adds new cards and closes the panel', () => {
-    const { component } = setup();
-
-    component.cards.set([{ id: 'card-1', component: 'mfp-a' }]);
-    component.cardDialogOpen.set(true);
-
-    component.onCardsAdded([
-      {
-        id: 'template-card',
-        component: 'mfp-b',
-        label: 'Table',
-        componentInputs: { size: 'L' },
-      },
-    ]);
-
-    expect(component.cards()).toEqual([
-      { id: 'card-1', component: 'mfp-a' },
-      {
-        id: 'template-card',
-        component: 'mfp-b',
-        label: 'Table',
-        componentInputs: { size: 'L' },
-      },
-    ]);
-    expect(component.cardDialogOpen()).toBe(false);
-  });
-
-  it('preserves card constraint fields (maxH/maxW/minH/minW) through saveEdit', () => {
-    const { component } = setup();
-    const cards: CardConfig[] = [
-      {
-        id: 'card-1',
-        component: 'mfp-a',
-        x: 0,
-        y: 0,
-        maxH: 4,
-        maxW: 6,
-        minH: 1,
-        minW: 2,
-      },
-    ];
-
-    component.cards.set(cards);
-    component.editMode.set(true);
-    component.saved.subscribe(() => false);
-    component.onOrderChange({
-      nodes: [{ id: 'card-1', x: 1, y: 2 }],
-    } as never);
-
-    component.saveEdit();
-
-    expect(component.cards()[0]).toMatchObject({
-      maxH: 4,
-      maxW: 6,
-      minH: 1,
-      minW: 2,
-    });
-  });
-
-  it('still closes the add-card dialog when no cards were selected', () => {
-    const { component } = setup();
-
-    component.cardDialogOpen.set(true);
-    component.cards.set([{ id: 'card-1', component: 'mfp-a' }]);
-
-    component.onCardsAdded([]);
-
-    expect(component.cards()).toEqual([{ id: 'card-1', component: 'mfp-a' }]);
-    expect(component.cardDialogOpen()).toBe(false);
-  });
-});

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

@@ -1,238 +0,0 @@
-import { ButtonSettings } from '../../models/ui-definition';
-import { AddCardDialog } from '../add-card-dialog/add-card-dialog.component';
-import { addComponentToRegistry } from '../card/utils/dashboard-card-registry';
-import { DashboardCard } from '../card/dashboard-card.component';
-import { CardConfig, DashboardConfig, SectionConfig } from '../models';
-import { CELL_HEIGHT, COMPACT_BREAKPOINT } from '../models/constants';
-import { DashboardSection } from '../section/dashboard-section.component';
-import {
-  Component,
-  ElementRef,
-  OnDestroy,
-  OnInit,
-  Type,
-  ViewEncapsulation,
-  computed,
-  inject,
-  input,
-  linkedSignal,
-  model,
-  output,
-  signal,
-  viewChild,
-} from '@angular/core';
-import { Button } from '@fundamental-ngx/ui5-webcomponents/button';
-import { Menu } from '@fundamental-ngx/ui5-webcomponents/menu';
-import { MenuItem } from '@fundamental-ngx/ui5-webcomponents/menu-item';
-import { MenuSeparator } from '@fundamental-ngx/ui5-webcomponents/menu-separator';
-import { Text } from '@fundamental-ngx/ui5-webcomponents/text';
-import { Title } from '@fundamental-ngx/ui5-webcomponents/title';
-import '@ui5/webcomponents-icons/dist/action-settings.js';
-import '@ui5/webcomponents-icons/dist/menu2.js';
-import { GridStackNode, GridStackOptions } from 'gridstack';
-import {
-  GridstackComponent,
-  GridstackItemComponent,
-  nodesCB,
-} from 'gridstack/dist/angular';
-
-document.body.classList.add('ui5-content-density-compact');
-
-@Component({
-  selector: 'mfp-dashboard',
-  imports: [
-    GridstackComponent,
-    GridstackItemComponent,
-    AddCardDialog,
-    DashboardSection,
-    DashboardCard,
-    Button,
-    Menu,
-    MenuItem,
-    MenuSeparator,
-    Title,
-    Text,
-  ],
-  templateUrl: './dashboard.component.html',
-  styleUrl: './dashboard.component.scss',
-  encapsulation: ViewEncapsulation.None,
-  host: {
-    '[style.background-image]':
-      'config().backgroundImageUrl ? "url(" + config().backgroundImageUrl + ")" : null',
-  },
-})
-export class Dashboard implements OnInit, OnDestroy {
-  static registerAngularComponents(componentTypes: Type<unknown>[]): void {
-    addComponentToRegistry(componentTypes);
-  }
-
-  config = input.required<DashboardConfig>();
-  sections = model<SectionConfig[]>([]);
-  cards = model<CardConfig[]>([]);
-  availableCards = input<CardConfig[]>([]);
-
-  readonly saved = output<{ sections: SectionConfig[]; cards: CardConfig[] }>();
-  readonly actionButtonClick = output<{
-    event: MouseEvent;
-    action: ButtonSettings;
-  }>();
-
-  editMode = signal(false);
-  compactToolbar = signal(false);
-  toolbarMenuOpen = signal(false);
-
-  private sectionsSnapshot: SectionConfig[] = [];
-  private cardsSnapshot: CardConfig[] = [];
-  private gridStackItems = viewChild.required<GridstackComponent>('grid');
-  private resizeObserver?: ResizeObserver;
-  private readonly hostEl = inject(ElementRef<HTMLElement>);
-
-  protected gridOptions = computed(
-    (): GridStackOptions => ({
-      cellHeight: CELL_HEIGHT,
-      disableResize: !this.editMode(),
-      disableDrag: !this.editMode(),
-      columnOpts: {
-        breakpointForWindow: true,
-        breakpoints: [
-          { w: 1440, c: 12, layout: 'none' },
-          { w: 1024, c: 8, layout: 'compact' },
-          { w: 600, c: 1, layout: 'list' },
-        ],
-      },
-    }),
-  );
-
-  cardDialogOpen = signal(false);
-  customActions = computed(() => this.config().customActions ?? []);
-  addedCardsIds = computed(() => new Set(this.cards().map((c) => c.id)));
-
-  editViewButton = computed(() => ({
-    icon: 'action-settings',
-    design: 'Transparent' as const,
-    tooltip: 'Edit View',
-    text: '',
-    ...this.config().buttonsSettings?.editViewButton,
-  }));
-
-  addCardButton = computed(() => ({
-    icon: '',
-    design: 'Default' as const,
-    tooltip: '',
-    text: '+ Add Card',
-    ...this.config().buttonsSettings?.addCardButton,
-  }));
-
-  sectionCards = computed(() => {
-    const all = this.cards();
-    return (sectionId: string) => all.filter((c) => c.sectionId === sectionId);
-  });
-
-  cardsPosition = new Map<string, { x?: number; y?: number }>();
-  looseCards = linkedSignal(() => this.cards().filter((c) => !c.sectionId));
-
-  private newGridStackNodes: GridStackNode[] = [];
-
-  ngOnInit(): void {
-    this.resizeObserver = new ResizeObserver((entries) => {
-      const width = entries[0]?.contentRect.width ?? 0;
-      this.compactToolbar.set(width < COMPACT_BREAKPOINT);
-    });
-    this.resizeObserver.observe(this.hostEl.nativeElement);
-  }
-
-  ngOnDestroy(): void {
-    this.resizeObserver?.disconnect();
-  }
-
-  onMenuItemClick(actionId: string, event: Event): void {
-    if (actionId === 'edit-view') {
-      this.enterEditMode();
-      return;
-    }
-    const action = this.customActions().find((a) => a.action === actionId);
-    if (action) {
-      this.actionButtonClick.emit({ event: event as MouseEvent, action });
-    }
-  }
-
-  enterEditMode(): void {
-    const gridStackNodes = this.gridStackItems()
-      .gridstackItems?.toArray()
-      .map((node) => node.options);
-
-    if (gridStackNodes) {
-      this.saveCardsPosition(gridStackNodes);
-    }
-
-    this.sectionsSnapshot = [...this.sections()];
-    this.cardsSnapshot = [...this.cards()];
-    this.editMode.set(true);
-  }
-
-  saveEdit(): void {
-    this.saveCardsPosition(this.newGridStackNodes);
-    this.saved.emit({
-      sections: this.sections(),
-      cards: this.cards().map((c) => {
-        const pos = this.cardsPosition.get(c.id);
-        return { ...c, x: pos?.x, y: pos?.y };
-      }),
-    });
-    this.editMode.set(false);
-  }
-
-  cancelEdit(): void {
-    this.sections.set(this.sectionsSnapshot);
-    this.cards.set(
-      this.cardsSnapshot.map((c) => {
-        const pos = this.cardsPosition.get(c.id);
-        return { ...c, x: pos?.x, y: pos?.y };
-      }),
-    );
-    this.cardDialogOpen.set(false);
-    this.editMode.set(false);
-  }
-
-  removeSection(id: string): void {
-    this.sections.update((list) => list.filter((s) => s.id !== id));
-    this.cards.update((list) => list.filter((c) => c.sectionId !== id));
-  }
-
-  removeCard(id: string): void {
-    this.cardsPosition.delete(id);
-    this.cards.update((list) => list.filter((c) => c.id !== id));
-  }
-
-  openCardPanel(): void {
-    this.cardDialogOpen.set(true);
-  }
-
-  closeCardPanel(): void {
-    this.cardDialogOpen.set(false);
-  }
-
-  onCardsAdded(cards: CardConfig[]): void {
-    if (cards.length > 0) {
-      this.cards.update((list) => [
-        ...list,
-        ...cards.map((ac) => ({
-          ...ac,
-        })),
-      ]);
-    }
-    this.closeCardPanel();
-  }
-
-  onOrderChange(event: nodesCB): void {
-    this.newGridStackNodes = event.nodes;
-  }
-
-  private saveCardsPosition(items: GridStackNode[]): void {
-    items.forEach((node) => {
-      if (node.id) {
-        this.cardsPosition.set(node.id, { x: node.x, y: node.y });
-      }
-    });
-  }
-}

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

@@ -1 +0,0 @@
-export * from './dashboard.component';

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

@@ -1,5 +0,0 @@
-export * from './dashboard';
-export * from './add-card-dialog/add-card-dialog.component';
-export * from './card/dashboard-card.component';
-export * from './section/dashboard-section.component';
-export * from './models';

package/projects/ngx/declarative-ui/dashboard/models/constants.ts

@@ -1,2 +0,0 @@
-export const COMPACT_BREAKPOINT = 726;
-export const CELL_HEIGHT = 10;