@openmfp/webcomponents 0.6.1

package/projects/ngx/cards/stories/visited-service-card.stories.ts

@@ -0,0 +1,149 @@
+import { VisitedServiceCard } from '../visited-service-card/visited-service-card.component';
+import {
+  CUSTOM_ELEMENTS_SCHEMA,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core';
+import { MessageStrip } from '@fundamental-ngx/ui5-webcomponents/message-strip';
+import type { Meta, StoryObj } from '@storybook/angular';
+
+@Component({
+  selector: 'visited-service-card-story',
+  template: `
+    <mfp-visited-service-card
+      [serviceType]="serviceType"
+      [serviceName]="serviceName"
+      [serviceIcon]="serviceIcon"
+      [serviceDescription]="serviceDescription"
+      [path]="path"
+      (click)="onCardClick()"
+    ></mfp-visited-service-card>
+    @if (clicked) {
+      <ui5-message-strip design="Information" style="margin-top: 1rem;">
+        Card clicked — would navigate to: {{ path }}
+      </ui5-message-strip>
+    }
+  `,
+  imports: [MessageStrip, VisitedServiceCard],
+})
+class VisitedServiceCardStory {
+  @Input() serviceType = '';
+  @Input() serviceName = '';
+  @Input() serviceIcon = '';
+  @Input() serviceDescription = '';
+  @Input() path = '';
+  @Output() click = new EventEmitter<string>();
+  clicked = false;
+  onCardClick() {
+    this.clicked = true;
+    setTimeout(() => (this.clicked = false), 3000);
+  }
+}
+
+const meta: Meta<VisitedServiceCardStory> = {
+  title: 'Cards / VisitedServiceCard',
+  component: VisitedServiceCardStory,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    serviceType: { control: 'text' },
+    serviceName: { control: 'text' },
+    serviceIcon: { control: 'text' },
+    serviceDescription: { control: 'text' },
+    path: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<VisitedServiceCardStory>;
+
+export const HanaCloud: Story = {
+  args: {
+    serviceType: 'SAP HANA Cloud',
+    serviceName: 'olc-hana-db',
+    serviceIcon: 'database',
+    serviceDescription: 'My Subaccount 1/Space dev',
+    path: '/hana/olc-hana-db',
+  },
+};
+
+export const CloudIdentityService: Story = {
+  args: {
+    serviceType: 'Cloud Identity Service',
+    serviceName: 'Cloud Identity Service',
+    serviceIcon: 'customer',
+    serviceDescription: 'My Subaccount 1/Space dev',
+    path: '/identity/cloud-identity-service',
+  },
+};
+
+export const HanaCloudTest: Story = {
+  args: {
+    serviceType: 'SAP HANA Cloud',
+    serviceName: 'olc-hana-db-test',
+    serviceIcon: 'database',
+    serviceDescription: 'My Subaccount 1/Space dev',
+    path: '/hana/olc-hana-db-test',
+  },
+};
+
+export const ApplicationAutoscaler: Story = {
+  args: {
+    serviceType: 'Application Autoscaler',
+    serviceName: 'applicationtest',
+    serviceIcon: 'accelerated',
+    serviceDescription: 'My Subaccount 2/Space prod',
+    path: '/autoscaler/applicationtest',
+  },
+};
+
+export const CloudIdentityLongPath: Story = {
+  args: {
+    serviceType: 'Cloud Identity Service',
+    serviceName: 'Cloud Identity Service',
+    serviceIcon: 'customer',
+    serviceDescription: 'Long text Subaccount 1/Space',
+    path: '/identity/cloud-identity-service',
+  },
+};
+
+export const AuditLogService: Story = {
+  args: {
+    serviceType: 'Audit Log Service',
+    serviceName: 'auditlog-name',
+    serviceIcon: 'log',
+    serviceDescription: 'My Subaccount 4/Space dev',
+    path: '/auditlog/auditlog-name',
+  },
+};
+
+export const AllCards: Story = {
+  render: () => ({
+    props: {
+      clicked: false,
+      clickedPath: '',
+      onCardClick(path: string) {
+        this['clickedPath'] = path;
+        this['clicked'] = true;
+        setTimeout(() => (this['clicked'] = false), 3000);
+      },
+    },
+    template: `
+      <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding: 1rem;">
+        <mfp-visited-service-card serviceType="SAP HANA Cloud" serviceName="olc-hana-db" serviceIcon="database" serviceDescription="My Subaccount 1/Space dev" path="/hana/olc-hana-db" (click)="onCardClick('/hana/olc-hana-db')"></mfp-visited-service-card>
+        <mfp-visited-service-card serviceType="Cloud Identity Service" serviceName="Cloud Identity Service" serviceIcon="customer" serviceDescription="My Subaccount 1/Space dev" path="/identity/cloud-identity-service" (click)="onCardClick('/identity/cloud-identity-service')"></mfp-visited-service-card>
+        <mfp-visited-service-card serviceType="SAP HANA Cloud" serviceName="olc-hana-db-test" serviceIcon="database" serviceDescription="My Subaccount 1/Space dev" path="/hana/olc-hana-db-test" (click)="onCardClick('/hana/olc-hana-db-test')"></mfp-visited-service-card>
+        <mfp-visited-service-card serviceType="Application Autoscaler" serviceName="applicationtest" serviceIcon="accelerated" serviceDescription="My Subaccount 2/Space prod" path="/autoscaler/applicationtest" (click)="onCardClick('/autoscaler/applicationtest')"></mfp-visited-service-card>
+        <mfp-visited-service-card serviceType="Cloud Identity Service" serviceName="Cloud Identity Service" serviceIcon="customer" serviceDescription="Long text Subaccount 1/Space" path="/identity/cloud-identity-service" (click)="onCardClick('/identity/cloud-identity-service')"></mfp-visited-service-card>
+        <mfp-visited-service-card serviceType="Audit Log Service" serviceName="auditlog-name" serviceIcon="log" serviceDescription="My Subaccount 4/Space dev" path="/auditlog/auditlog-name" (click)="onCardClick('/auditlog/auditlog-name')"></mfp-visited-service-card>
+      </div>
+      @if (clicked) {
+        <ui5-message-strip design="Information" style="margin-top: 1rem;">
+          Card clicked — would navigate to: {{ clickedPath }}
+        </ui5-message-strip>
+      }
+    `,
+  }),
+};

package/projects/ngx/cards/visited-service-card/visited-service-card.component.html

@@ -0,0 +1,17 @@
+<div class="visited-card-wrapper" (click)="click.emit(path())">
+  <span class="visited-card__type-badge">{{ serviceType() }}</span>
+  <ui5-card class="visited-card">
+    <ui5-card-header
+      slot="header"
+      [titleText]="serviceName()"
+      [subtitleText]="serviceDescription()"
+      [interactive]="true"
+    >
+      <ui5-icon
+        slot="avatar"
+        [name]="serviceIcon()"
+        class="visited-card__icon"
+      ></ui5-icon>
+    </ui5-card-header>
+  </ui5-card>
+</div>

package/projects/ngx/cards/visited-service-card/visited-service-card.component.scss

@@ -0,0 +1,34 @@
+:host {
+  display: block;
+}
+
+.visited-card-wrapper {
+  position: relative;
+  padding-top: 0.625rem;
+  cursor: pointer;
+}
+
+.visited-card {
+  width: 100%;
+}
+
+.visited-card__type-badge {
+  position: absolute;
+  top: 0;
+  right: 0.75rem;
+  display: inline-block;
+  padding: 0.125rem 0.625rem;
+  border-radius: 0.75rem;
+  background-color: #e8f3ff;
+  color: #0070f2;
+  font-size: var(--sapFontSmallSize, 0.75rem);
+  font-weight: 700;
+  white-space: nowrap;
+  z-index: 1;
+}
+
+.visited-card__icon {
+  width: 2.5rem;
+  height: 2.5rem;
+  color: var(--sapHighlightColor, #0070f2);
+}

package/projects/ngx/cards/visited-service-card/visited-service-card.component.ts

@@ -0,0 +1,22 @@
+import { Component, ViewEncapsulation, input, output } from '@angular/core';
+import { Card } from '@fundamental-ngx/ui5-webcomponents/card';
+import { CardHeader } from '@fundamental-ngx/ui5-webcomponents/card-header';
+import { Icon } from '@fundamental-ngx/ui5-webcomponents/icon';
+import '@ui5/webcomponents-icons/dist/AllIcons.js';
+
+@Component({
+  selector: 'mfp-visited-service-card',
+  templateUrl: './visited-service-card.component.html',
+  styleUrls: ['./visited-service-card.component.scss'],
+  encapsulation: ViewEncapsulation.ShadowDom,
+  imports: [Card, CardHeader, Icon],
+})
+export class VisitedServiceCard {
+  serviceType = input.required<string>();
+  serviceName = input.required<string>();
+  serviceDescription = input.required<string>();
+  serviceIcon = input.required<string>();
+  path = input.required<string>();
+
+  click = output<string>();
+}

package/projects/ngx/cards/whats-new/whats-new.component.html

@@ -0,0 +1,10 @@
+<div class="whats-new">
+  <ui5-title level="H5" class="whats-new__title">What's New</ui5-title>
+  <ui5-list separators="Inner" class="whats-new__list">
+    @for (item of headlines; track item.title) {
+      <ui5-li icon="{{ item.icon }}" description="{{ item.description }}">
+        {{ item.title }}
+      </ui5-li>
+    }
+  </ui5-list>
+</div>

package/projects/ngx/cards/whats-new/whats-new.component.scss

@@ -0,0 +1,25 @@
+:host {
+  display: block;
+  height: 100%;
+}
+
+.whats-new {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--sapTile_Background, #fff);
+  border-radius: var(--_ui5_card_border-radius, 0.5rem);
+  border: var(--_ui5_card_border, 1px solid var(--sapTile_BorderColor, #e5e5e5));
+  box-shadow: var(--_ui5_card_box_shadow, var(--sapContent_Shadow0));
+  overflow: hidden;
+
+  &__title {
+    padding: 1rem 1rem 0.5rem;
+    flex-shrink: 0;
+  }
+
+  &__list {
+    flex: 1;
+    overflow-y: auto;
+  }
+}

package/projects/ngx/cards/whats-new/whats-new.component.ts

@@ -0,0 +1,46 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { List } from '@fundamental-ngx/ui5-webcomponents/list';
+import { ListItemStandard } from '@fundamental-ngx/ui5-webcomponents/list-item-standard';
+import { Title } from '@fundamental-ngx/ui5-webcomponents/title';
+
+@Component({
+  selector: 'mfp-whats-new',
+  templateUrl: './whats-new.component.html',
+  styleUrls: ['./whats-new.component.scss'],
+  encapsulation: ViewEncapsulation.ShadowDom,
+  imports: [List, ListItemStandard, Title],
+})
+export class WhatsNew {
+  readonly headlines = [
+    {
+      title: 'Kubernetes 1.32 Released',
+      description: 'Improved scheduling, new APIs and graduated features.',
+      icon: 'cloud',
+    },
+    {
+      title: 'Angular 20 Signals Stable',
+      description: 'Signal-based reactivity is now production-ready.',
+      icon: 'developer-settings',
+    },
+    {
+      title: 'WebAssembly WASI 2.0 Preview',
+      description: 'System interface advances bring server-side WASM closer.',
+      icon: 'technical-object',
+    },
+    {
+      title: 'OpenTelemetry Hits 1.0',
+      description: 'Unified observability standard lands in enterprise stacks.',
+      icon: 'monitor-payments',
+    },
+    {
+      title: 'Rust Enters Linux Kernel Mainstream',
+      description: 'More subsystems accept Rust driver contributions.',
+      icon: 'settings',
+    },
+    {
+      title: 'TypeScript 5.8 Performance Boost',
+      description: 'Declaration emit is up to 10x faster in large projects.',
+      icon: 'accelerated',
+    },
+  ];
+}

package/projects/ngx/declarative-ui/dashboard/add-card-dialog/add-card-dialog.component.html

@@ -0,0 +1,28 @@
+<ui5-dialog [open]="open()" (ui5BeforeClose)="cancel.emit()">
+  <div slot="header" class="add-card-dialog__header">
+    <ui5-title level="H5">Add Card</ui5-title>
+  </div>
+  <div class="add-card-dialog">
+    @if (availableCards().length === 0) {
+      <p class="add-card-dialog__empty">No cards available.</p>
+    }
+    @for (ac of availableCards(); track ac.id) {
+      @let alreadyAdded = addedCardsIds().has(ac.id);
+      <div
+        class="add-card-dialog__item"
+        [class.add-card-dialog__item--disabled]="alreadyAdded"
+      >
+        <ui5-checkbox
+          [checked]="alreadyAdded || selectedIds().has(ac.id)"
+          [disabled]="alreadyAdded"
+          (ui5Change)="toggle(ac.id)"
+          [text]="ac.label || ac.component"
+        />
+      </div>
+    }
+  </div>
+  <div slot="footer" class="add-card-dialog__footer">
+    <ui5-button design="Emphasized" (click)="confirmAdd()">Add</ui5-button>
+    <ui5-button design="Transparent" (click)="cancel.emit()">Cancel</ui5-button>
+  </div>
+</ui5-dialog>

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

@@ -0,0 +1,44 @@
+:host {
+  display: contents;
+}
+
+.add-card-dialog {
+  margin: -1rem;
+  min-width: 300px;
+
+  &__header {
+    display: flex;
+    align-items: flex-start;
+    padding: 0.75rem 1rem;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    border-bottom: 1px solid var(--sapList_BorderColor, #e5e5e5);
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &--disabled {
+      opacity: 0.8;
+    }
+  }
+
+  &__empty {
+    padding: 1rem;
+    margin: 0;
+    color: var(--sapContent_LabelColor, #6a6d70);
+    font-size: 0.875rem;
+  }
+}
+
+.add-card-dialog__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  margin: 0 -1rem;
+}

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

@@ -0,0 +1,85 @@
+import { CardConfig } from '../models';
+import { AddCardDialog } from './add-card-dialog.component';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+type Fixture = ComponentFixture<AddCardDialog>;
+
+function setup(): { fixture: Fixture; component: AddCardDialog } {
+  const fixture = TestBed.createComponent(AddCardDialog);
+  const component = fixture.componentInstance;
+  return { fixture, component };
+}
+
+function root(fixture: Fixture): ShadowRoot | HTMLElement {
+  return fixture.nativeElement.shadowRoot ?? fixture.nativeElement;
+}
+
+describe('AddCardDialog', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AddCardDialog],
+    }).compileComponents();
+  });
+
+  it('renders the empty state when there are no available cards', () => {
+    const { fixture } = setup();
+
+    fixture.componentRef.setInput('open', true);
+    fixture.componentRef.setInput('availableCards', []);
+    fixture.detectChanges();
+
+    expect(root(fixture).textContent).toContain('No cards available.');
+  });
+
+  it('resets selected cards whenever the dialog is opened', () => {
+    const { fixture, component } = setup();
+
+    fixture.componentRef.setInput('availableCards', [
+      { id: 'card-1', component: 'mfp-a' },
+    ]);
+    fixture.detectChanges();
+
+    component.toggle('card-1');
+    expect(component.selectedIds().has('card-1')).toBe(true);
+
+    fixture.componentRef.setInput('open', true);
+    fixture.detectChanges();
+
+    expect(component.selectedIds().size).toBe(0);
+  });
+
+  it('emits only selected cards that have not already been added', () => {
+    const { fixture, component } = setup();
+    const availableCards: CardConfig[] = [
+      { id: 'card-1', component: 'mfp-a', label: 'Card A' },
+      { id: 'card-2', component: 'mfp-b', label: 'Card B' },
+    ];
+    const emitted: CardConfig[][] = [];
+
+    component.confirm.subscribe((cards) => emitted.push(cards));
+    fixture.componentRef.setInput('availableCards', availableCards);
+    fixture.componentRef.setInput('addedCardsIds', new Set(['card-2']));
+    fixture.detectChanges();
+
+    component.toggle('card-1');
+    component.toggle('card-2');
+    component.confirmAdd();
+
+    expect(emitted).toEqual([[availableCards[0]]]);
+  });
+
+  it('emits cancel when the cancel button is clicked', () => {
+    const { fixture, component } = setup();
+    let emitted = 0;
+
+    component.cancel.subscribe(() => emitted++);
+    fixture.componentRef.setInput('open', true);
+    fixture.componentRef.setInput('availableCards', []);
+    fixture.detectChanges();
+
+    const buttons = root(fixture).querySelectorAll('ui5-button');
+    buttons[1]?.dispatchEvent(new Event('click'));
+
+    expect(emitted).toBe(1);
+  });
+});

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

@@ -0,0 +1,58 @@
+import { CardConfig } from '../models';
+import {
+  Component,
+  ViewEncapsulation,
+  effect,
+  input,
+  output,
+  signal,
+} from '@angular/core';
+import { Button } from '@fundamental-ngx/ui5-webcomponents/button';
+import { CheckBox } from '@fundamental-ngx/ui5-webcomponents/check-box';
+import { Dialog } from '@fundamental-ngx/ui5-webcomponents/dialog';
+import { Title } from '@fundamental-ngx/ui5-webcomponents/title';
+
+@Component({
+  selector: 'mfp-add-card-dialog',
+  templateUrl: './add-card-dialog.component.html',
+  styleUrls: ['./add-card-dialog.component.scss'],
+  encapsulation: ViewEncapsulation.ShadowDom,
+  imports: [Button, CheckBox, Dialog, Title],
+})
+export class AddCardDialog {
+  availableCards = input<CardConfig[]>([]);
+  addedCardsIds = input<Set<string>>(new Set());
+  open = input<boolean>(false);
+
+  confirm = output<CardConfig[]>();
+  cancel = output<void>();
+
+  selectedIds = signal<Set<string>>(new Set());
+
+  constructor() {
+    effect(() => {
+      if (this.open()) {
+        this.selectedIds.set(new Set());
+      }
+    });
+  }
+
+  toggle(id: string): void {
+    this.selectedIds.update((set) => {
+      const next = new Set(set);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  }
+
+  confirmAdd(): void {
+    const toAdd = this.availableCards().filter(
+      (ac) => this.selectedIds().has(ac.id) && !this.addedCardsIds().has(ac.id),
+    );
+    this.confirm.emit(toAdd);
+  }
+}

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

@@ -0,0 +1,29 @@
+@if (card().component) {
+  <div class="component-card">
+    @if (editMode()) {
+      <div class="remove-wrapper">
+        <ui5-button
+          class="card__remove"
+          design="Default"
+          icon="decline"
+          (click)="removeCard.emit()"
+        />
+      </div>
+    }
+    <div
+      [style.pointer-events]="editMode() ? 'none' : 'auto'"
+      class="component-host"
+    >
+      <div #elementHost></div>
+    </div>
+  </div>
+} @else {
+  <div class="card">
+    <div
+      [style.pointer-events]="editMode() ? 'none' : 'auto'"
+      class="card__body"
+    >
+      <ng-content />
+    </div>
+  </div>
+}

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

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