@openmfp/webcomponents 0.6.1 → 0.6.7

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

@@ -1,87 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-}
-
-.service-status {
-  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 {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    overflow-y: auto;
-  }
-
-  &__item {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    padding: 0.5rem 1rem;
-    border-bottom: 1px solid var(--sapList_BorderColor, #e5e5e5);
-
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-
-  &__icon {
-    flex-shrink: 0;
-    color: var(--sapHighlightColor, #0070f2);
-  }
-
-  &__name {
-    flex: 1;
-    font-size: var(--sapFontSize, 0.875rem);
-    color: var(--sapTextColor, #32363a);
-  }
-
-  &__status {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-    flex-shrink: 0;
-    font-size: 0.75rem;
-    font-weight: 500;
-    border-radius: 0.75rem;
-    padding: 0.125rem 0.5rem;
-
-    &--operational {
-      color: var(--sapPositiveColor, #256f3a);
-      background: var(--sapPositiveBackground, #f1fdf6);
-    }
-
-    &--degraded {
-      color: var(--sapCriticalColor, #e76500);
-      background: var(--sapCriticalBackground, #fef7f1);
-    }
-
-    &--outage {
-      color: var(--sapNegativeColor, #aa0808);
-      background: var(--sapNegativeBackground, #fff1f1);
-    }
-
-    &--maintenance {
-      color: var(--sapNeutralColor, #5b738b);
-      background: var(--sapNeutralBackground, #f5f6f7);
-    }
-  }
-
-  &__status-icon {
-    font-size: 0.75rem;
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-}

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

@@ -1,36 +0,0 @@
-import { Component, ViewEncapsulation } from '@angular/core';
-import { Icon } from '@fundamental-ngx/ui5-webcomponents/icon';
-import { Title } from '@fundamental-ngx/ui5-webcomponents/title';
-
-export type ServiceStatusValue = 'operational' | 'degraded' | 'outage' | 'maintenance';
-
-export interface ServiceStatusItem {
-  name: string;
-  icon: string;
-  status: ServiceStatusValue;
-}
-
-@Component({
-  selector: 'mfp-service-status-card',
-  templateUrl: './service-status-card.component.html',
-  styleUrls: ['./service-status-card.component.scss'],
-  encapsulation: ViewEncapsulation.ShadowDom,
-  imports: [Icon, Title],
-})
-export class ServiceStatusCard {
-  readonly services: ServiceStatusItem[] = [
-    { name: 'API Gateway', icon: 'connected', status: 'operational' },
-    { name: 'Identity Service', icon: 'customer', status: 'operational' },
-    { name: 'Database Cluster', icon: 'database', status: 'degraded' },
-    { name: 'Message Queue', icon: 'email', status: 'operational' },
-    { name: 'Object Storage', icon: 'storage', status: 'maintenance' },
-    { name: 'Audit Log', icon: 'log', status: 'outage' },
-  ];
-
-  readonly statusConfig: Record<ServiceStatusValue, { label: string; icon: string; colorClass: string }> = {
-    operational: { label: 'Operational', icon: 'status-positive', colorClass: 'status--operational' },
-    degraded:    { label: 'Degraded',    icon: 'status-critical', colorClass: 'status--degraded' },
-    outage:      { label: 'Outage',      icon: 'status-negative', colorClass: 'status--outage' },
-    maintenance: { label: 'Maintenance', icon: 'status-inactive', colorClass: 'status--maintenance' },
-  };
-}

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

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

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

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

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

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

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

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

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

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

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

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

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