@openmfp/webcomponents 0.6.1

package/projects/ngx/declarative-ui/table/value-cell/value-cell.component.spec.ts

@@ -0,0 +1,316 @@
+import {
+  FieldDefinition,
+  GenericResource,
+  ValueCellButtonClickEvent,
+} from '../../models';
+import { ValueCell } from './value-cell.component';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+type Fixture = ComponentFixture<ValueCell<GenericResource, FieldDefinition>>;
+type Comp = ValueCell<GenericResource, FieldDefinition>;
+
+function setup(
+  field: FieldDefinition,
+  resource?: Partial<GenericResource>,
+): { fixture: Fixture; component: Comp } {
+  const fixture: Fixture = TestBed.createComponent(
+    ValueCell as unknown as typeof ValueCell<GenericResource, FieldDefinition>,
+  );
+  const component = fixture.componentInstance;
+  fixture.componentRef.setInput('fieldDefinition', field);
+  if (resource !== undefined)
+    fixture.componentRef.setInput('resource', resource as GenericResource);
+  fixture.detectChanges();
+  return { fixture, component };
+}
+
+function el(fixture: Fixture, testId: string): Element | null {
+  return (
+    fixture.nativeElement.shadowRoot ?? fixture.nativeElement
+  ).querySelector(`[test-id="${testId}"]`);
+}
+
+function q(fixture: Fixture, selector: string): Element | null {
+  return (
+    fixture.nativeElement.shadowRoot ?? fixture.nativeElement
+  ).querySelector(selector);
+}
+
+describe('ValueCell', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ValueCell],
+    }).compileComponents();
+  });
+
+  describe('testId', () => {
+    it('is derived from fieldDefinition.property', () => {
+      const { component } = setup({ property: 'name' });
+      expect(component.testId()).toBe('value-cell-name');
+    });
+  });
+
+  describe('default display', () => {
+    it('renders plain string value from resource property', () => {
+      const { fixture } = setup({ property: 'status' }, { status: 'Active' });
+      const span = q(fixture, '[test-id="value-cell-status"]');
+      expect(span?.textContent?.trim()).toBe('Active');
+    });
+
+    it('falls back to field.value when no resource is provided', () => {
+      const { fixture } = setup({ property: 'status', value: 'fallback' });
+      const span = q(fixture, '[test-id="value-cell-status"]');
+      expect(span?.textContent?.trim()).toBe('fallback');
+    });
+
+    it('renders empty when value is absent', () => {
+      const { fixture } = setup({ property: 'missing' }, {});
+      const span = q(fixture, '[test-id="value-cell-missing"]');
+      expect(span?.textContent?.trim()).toBe('');
+    });
+  });
+
+  describe('computed signals', () => {
+    it('value() resolves from resource property', () => {
+      const { component } = setup({ property: 'age' }, { age: 42 });
+      expect(component.value()).toBe(42);
+    });
+
+    it('boolValue() is true for string "true"', () => {
+      const { component } = setup({ property: 'active' }, { active: 'true' });
+      expect(component.boolValue()).toBe(true);
+    });
+
+    it('boolValue() is false for string "false"', () => {
+      const { component } = setup({ property: 'active' }, { active: 'false' });
+      expect(component.boolValue()).toBe(false);
+    });
+
+    it('boolValue() is undefined for non-boolean string', () => {
+      const { component } = setup({ property: 'status' }, { status: 'Active' });
+      expect(component.boolValue()).toBeUndefined();
+    });
+
+    it('isBoolLike() is true when boolValue is defined', () => {
+      const { component } = setup({ property: 'active' }, { active: 'true' });
+      expect(component.isBoolLike()).toBe(true);
+    });
+
+    it('isBoolLike() is false for non-boolean value', () => {
+      const { component } = setup(
+        { property: 'status' },
+        { status: 'running' },
+      );
+      expect(component.isBoolLike()).toBe(false);
+    });
+
+    it('stringValue() returns string value', () => {
+      const { component } = setup({ property: 'label' }, { label: 'hello' });
+      expect(component.stringValue()).toBe('hello');
+    });
+
+    it('stringValue() returns undefined for non-string value', () => {
+      const { component } = setup({ property: 'count' }, { count: 99 });
+      expect(component.stringValue()).toBeUndefined();
+    });
+
+    it('stringValue() returns undefined for blank string', () => {
+      const { component } = setup({ property: 'label' }, { label: '   ' });
+      expect(component.stringValue()).toBeUndefined();
+    });
+
+    it('isUrlValue() is true for valid http URL', () => {
+      const { component } = setup(
+        { property: 'link' },
+        { link: 'https://example.com' },
+      );
+      expect(component.isUrlValue()).toBe(true);
+    });
+
+    it('isUrlValue() is false for plain string', () => {
+      const { component } = setup({ property: 'link' }, { link: 'not-a-url' });
+      expect(component.isUrlValue()).toBe(false);
+    });
+  });
+
+  describe('displayAs: secret', () => {
+    it('renders secret-value component', () => {
+      const { fixture } = setup(
+        { property: 'token', uiSettings: { displayAs: 'secret' } },
+        { token: 'abc123' },
+      );
+      expect(el(fixture, 'value-cell-token-secret')).not.toBeNull();
+    });
+
+    it('renders toggle icon', () => {
+      const { fixture } = setup(
+        { property: 'token', uiSettings: { displayAs: 'secret' } },
+        { token: 'abc123' },
+      );
+      expect(el(fixture, 'value-cell-token-secret-toggle')).not.toBeNull();
+    });
+
+    it('toggleVisibility flips isVisible', () => {
+      const { component } = setup(
+        { property: 'token', uiSettings: { displayAs: 'secret' } },
+        { token: 'abc123' },
+      );
+      expect(component.isVisible()).toBe(false);
+      component.toggleVisibility(new MouseEvent('click'));
+      expect(component.isVisible()).toBe(true);
+      component.toggleVisibility(new MouseEvent('click'));
+      expect(component.isVisible()).toBe(false);
+    });
+  });
+
+  describe('displayAs: boolIcon', () => {
+    it('renders boolean-value when value is boolean-like', () => {
+      const { fixture } = setup(
+        { property: 'enabled', uiSettings: { displayAs: 'boolIcon' } },
+        { enabled: 'true' },
+      );
+      expect(el(fixture, 'value-cell-enabled-boolean')).not.toBeNull();
+    });
+
+    it('does not render boolean-value when value is not boolean-like', () => {
+      const { fixture } = setup(
+        { property: 'status', uiSettings: { displayAs: 'boolIcon' } },
+        { status: 'running' },
+      );
+      expect(el(fixture, 'value-cell-status-boolean')).toBeNull();
+    });
+  });
+
+  describe('displayAs: link', () => {
+    it('renders link-value for valid URL', () => {
+      const { fixture } = setup(
+        { property: 'url', uiSettings: { displayAs: 'link' } },
+        { url: 'https://example.com' },
+      );
+      expect(el(fixture, 'value-cell-url-link')).not.toBeNull();
+    });
+
+    it('does not render link-value for non-URL string', () => {
+      const { fixture } = setup(
+        { property: 'url', uiSettings: { displayAs: 'link' } },
+        { url: 'not-a-url' },
+      );
+      expect(el(fixture, 'value-cell-url-link')).toBeNull();
+    });
+  });
+
+  describe('displayAs: tooltip', () => {
+    it('renders tooltip icon', () => {
+      const { fixture } = setup(
+        { property: 'info', uiSettings: { displayAs: 'tooltip' } },
+        { info: 'some tooltip text' },
+      );
+      expect(el(fixture, 'value-cell-info-tooltip')).not.toBeNull();
+    });
+  });
+
+  describe('displayAs: alert', () => {
+    it('renders alert icon when value is falsy', () => {
+      const { fixture } = setup(
+        { property: 'flag', uiSettings: { displayAs: 'alert' } },
+        { flag: '' },
+      );
+      expect(el(fixture, 'value-cell-flag-icon')).not.toBeNull();
+    });
+
+    it('does not render alert icon when value is truthy', () => {
+      const { fixture } = setup(
+        { property: 'flag', uiSettings: { displayAs: 'alert' } },
+        { flag: 'ok' },
+      );
+      expect(el(fixture, 'value-cell-flag-icon')).toBeNull();
+    });
+  });
+
+  describe('displayAs: img', () => {
+    it('renders img element when value is set', () => {
+      const { fixture } = setup(
+        { property: 'avatar', uiSettings: { displayAs: 'img' } },
+        { avatar: 'https://example.com/img.png' },
+      );
+      const img = q(fixture, 'img.image-cell');
+      expect(img).not.toBeNull();
+      expect(img?.getAttribute('src')).toBe('https://example.com/img.png');
+    });
+
+    it('does not render img when value is absent', () => {
+      const { fixture } = setup(
+        { property: 'avatar', uiSettings: { displayAs: 'img' } },
+        {},
+      );
+      expect(q(fixture, 'img.image-cell')).toBeNull();
+    });
+  });
+
+  describe('withCopyButton', () => {
+    it('renders copy icon when withCopyButton is true', () => {
+      const { fixture } = setup(
+        { property: 'token', uiSettings: { withCopyButton: true } },
+        { token: 'secret' },
+      );
+      expect(el(fixture, 'value-cell-token-copy')).not.toBeNull();
+    });
+
+    it('does not render copy icon when withCopyButton is false', () => {
+      const { fixture } = setup(
+        { property: 'token', uiSettings: { withCopyButton: false } },
+        { token: 'secret' },
+      );
+      expect(el(fixture, 'value-cell-token-copy')).toBeNull();
+    });
+  });
+
+  describe('cssStyles', () => {
+    it('merges cssCustomization and cssRules', () => {
+      const { component } = setup(
+        {
+          property: 'status',
+          uiSettings: {
+            cssCustomization: { color: 'red' },
+            cssRules: [
+              {
+                if: { condition: 'equals', value: 'Active' },
+                styles: { fontWeight: 'bold' },
+              },
+            ],
+          },
+        },
+        { status: 'Active' },
+      );
+      expect(component.cssStyles()).toEqual({
+        color: 'red',
+        fontWeight: 'bold',
+      });
+    });
+  });
+
+  describe('buttonClick output', () => {
+    it('emits buttonClick with field and resource on buttonClicked', () => {
+      const field: FieldDefinition = {
+        property: 'action',
+        uiSettings: {
+          displayAs: 'button',
+          buttonSettings: { text: 'Go', action: 'navigate' },
+        },
+      };
+      const resource = { action: 'go' };
+      const { fixture, component } = setup(field, resource);
+
+      const emitted: ValueCellButtonClickEvent<GenericResource>[] = [];
+      component.buttonClick.subscribe((e) => emitted.push(e));
+
+      const btn = q(fixture, 'ui5-button');
+      btn?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+      fixture.detectChanges();
+
+      expect(emitted).toHaveLength(1);
+      expect(emitted[0].field).toEqual(field);
+      expect(emitted[0].resource).toEqual(resource);
+    });
+  });
+});

package/projects/ngx/declarative-ui/table/value-cell/value-cell.component.ts

@@ -0,0 +1,115 @@
+import {
+  FieldDefinition,
+  GenericResource,
+  ValueCellButtonClickEvent,
+} from '../../models';
+import { evaluateCssRules } from '../utils/cssRules.engine';
+import { getFieldValue } from '../utils/field-definition.utils';
+import { BooleanValue } from './boolean-value/boolean-value.component';
+import { LinkValue } from './link-value/link-value.component';
+import { SecretValue } from './secret-value/secret-value.component';
+import {
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+  computed,
+  input,
+  output,
+  signal,
+} from '@angular/core';
+import { Button } from '@fundamental-ngx/ui5-webcomponents/button';
+import { Icon } from '@fundamental-ngx/ui5-webcomponents/icon';
+import '@ui5/webcomponents-icons/dist/AllIcons.js';
+
+@Component({
+  selector: 'mfp-value-cell',
+  imports: [Icon, BooleanValue, LinkValue, SecretValue, Button],
+  templateUrl: './value-cell.component.html',
+  styleUrl: './value-cell.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.ShadowDom,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class ValueCell<T extends GenericResource, F extends FieldDefinition> {
+  fieldDefinition = input.required<F>();
+  resource = input<T>();
+  readonly buttonClick = output<ValueCellButtonClickEvent<T>>();
+
+  value = computed(() =>
+    getFieldValue(this.fieldDefinition(), this.resource()),
+  );
+
+  uiSettings = computed(() => this.fieldDefinition().uiSettings);
+  displayAs = computed(() => this.uiSettings()?.displayAs);
+  withCopyButton = computed(() => this.uiSettings()?.withCopyButton);
+  labelDisplay = computed(() => this.uiSettings()?.labelDisplay);
+  cssCustomization = computed(() => this.uiSettings()?.cssCustomization);
+  tooltipIcon = computed(() => this.uiSettings()?.tooltipIcon);
+  cssRules = computed(() =>
+    evaluateCssRules(this.value(), this.uiSettings()?.cssRules),
+  );
+  cssStyles = computed(() => ({
+    ...this.cssCustomization(),
+    ...this.cssRules(),
+  }));
+
+  isBoolLike = computed(() => this.boolValue() !== undefined);
+  isUrlValue = computed(() => this.checkValidUrl(this.stringValue()));
+  testId = computed(() => `value-cell-${this.fieldDefinition().property}`);
+
+  boolValue = computed(() => this.normalizeBoolean(this.value()));
+  stringValue = computed(() => this.normalizeString(this.value()));
+  isVisible = signal(false);
+
+  toggleVisibility(e: Event): void {
+    e.stopPropagation();
+    this.isVisible.set(!this.isVisible());
+  }
+
+  private normalizeBoolean(value: unknown): boolean | undefined {
+    const normalizedValue = value?.toString()?.toLowerCase();
+    if (normalizedValue === 'true') {
+      return true;
+    }
+    if (normalizedValue === 'false') {
+      return false;
+    }
+    return undefined;
+  }
+
+  private normalizeString(value: unknown): string | undefined {
+    if (typeof value !== 'string' || !value.trim()) {
+      return undefined;
+    }
+
+    return value;
+  }
+
+  private checkValidUrl(value: string | undefined): boolean {
+    if (!value) {
+      return false;
+    }
+
+    try {
+      new URL(value);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  public copyValue(event: Event) {
+    event.stopPropagation();
+    navigator.clipboard.writeText(this.value() || '');
+  }
+
+  protected buttonClicked(event: MouseEvent) {
+    event.stopPropagation();
+    this.buttonClick.emit({
+      event,
+      field: this.fieldDefinition(),
+      resource: this.resource(),
+    });
+  }
+}

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

@@ -0,0 +1,156 @@
+<div class="card">
+  <div class="card__header">
+    <div class="card__title">
+      @if (header(); as header) {
+        {{ header }}
+        @if (headerTooltip(); as tooltip) {
+          <ui5-icon
+            class="card__info-icon"
+            name="hint"
+            [showTooltip]="true"
+            [accessibleName]="tooltip"
+          />
+        }
+      }
+    </div>
+    <div class="card__actions">
+      @if (config().resourcesSearchable) {
+        @if (searchExpanded()) {
+          <ui5-input
+            #searchInput
+            [class]="
+              'card__search-input card__search-input--' +
+              (searchCollapsing() ? 'leave' : 'enter')
+            "
+            [formControl]="searchControl"
+            (blur)="onSearchBlur()"
+            (animationend)="onSearchAnimationEnd()"
+          />
+        }
+        <ui5-button
+          class="card__search-btn"
+          design="Transparent"
+          [icon]="searchButtonConfig()?.icon ?? 'search'"
+          [tooltip]="searchButtonConfig()?.tooltip ?? 'Search'"
+          (click)="toggleSearch()"
+        />
+      }
+      @if (createFormConfig()) {
+        <ui5-button
+          class="card__create-btn"
+          [icon]="createButtonConfig()?.icon ?? 'add'"
+          [design]="createButtonConfig()?.design ?? 'Transparent'"
+          [tooltip]="createButtonConfig()?.tooltip"
+          (click)="createDialogOpen.set(true)"
+        >
+          {{ createButtonConfig()?.text ?? '' }}
+        </ui5-button>
+      }
+    </div>
+  </div>
+
+  <div class="card__body">
+    @if (tableConfig(); as config) {
+      <mfp-declarative-table
+        [columns]="effectiveColumns()"
+        [resources]="resources()"
+        [totalItemsCount]="config.totalItemsCount"
+        [paginationLimit]="config.paginationLimit ?? 5"
+        [hasMore]="config.hasMore ?? false"
+        (buttonClick)="onButtonClick($event)"
+        (tableRowClicked)="tableRowClicked.emit($event)"
+        (loadMoreResources)="loadMoreResources.emit()"
+        (paginationLimitChanged)="paginationLimitChanged.emit($event)"
+      />
+    }
+  </div>
+</div>
+
+@if (createFormConfig(); as config) {
+  <ui5-dialog
+    [open]="createDialogOpen()"
+    (ui5BeforeClose)="createDialogOpen.set(false)"
+  >
+    <div slot="header" class="dialog__header">
+      <ui5-title level="H5">{{ config.title ?? 'Create' }}</ui5-title>
+    </div>
+    <div class="dialog__body">
+      <mfp-declarative-form
+        #createForm
+        [fields]="config.fields"
+        [fieldErrors]="createFormState().fieldErrors ?? {}"
+        (fieldChange)="onCreateFieldChange($event)"
+        (formSubmit)="onCreateSubmit($event)"
+      />
+    </div>
+    <div slot="footer" class="dialog__footer">
+      <ui5-button
+        design="Emphasized"
+        [disabled]="hasErrors(createFormState())"
+        (click)="createForm.submit()"
+      >
+        {{ config.confirmLabel ?? 'Save' }}
+      </ui5-button>
+      <ui5-button design="Transparent" (click)="closeCreateDialog()">
+        {{ config.cancelLabel ?? 'Cancel' }}
+      </ui5-button>
+    </div>
+  </ui5-dialog>
+}
+
+@if (editFormConfig(); as config) {
+  <ui5-dialog
+    [open]="editDialogOpen()"
+    (ui5BeforeClose)="editDialogOpen.set(false)"
+  >
+    <div slot="header" class="dialog__header">
+      <ui5-title level="H5">{{ config.title ?? 'Edit' }}</ui5-title>
+    </div>
+    <div class="dialog__body">
+      <mfp-declarative-form
+        #editForm
+        [fields]="config.fields"
+        [initialValues]="editInitialValue()"
+        [fieldErrors]="editFormState().fieldErrors ?? {}"
+        (fieldChange)="onEditFieldChange($event)"
+        (formSubmit)="onEditSubmit($event)"
+      />
+    </div>
+    <div slot="footer" class="dialog__footer">
+      <ui5-button
+        design="Emphasized"
+        [disabled]="hasErrors(editFormState())"
+        (click)="editForm.submit()"
+      >
+        {{ config.confirmLabel ?? 'Edit' }}
+      </ui5-button>
+      <ui5-button design="Transparent" (click)="closeEditDialog()">
+        {{ config.cancelLabel ?? 'Cancel' }}
+      </ui5-button>
+    </div>
+  </ui5-dialog>
+}
+
+@if (deleteConfirmationConfig(); as config) {
+  <ui5-dialog
+    [open]="deleteDialogOpen()"
+    (ui5BeforeClose)="deleteDialogOpen.set(false)"
+  >
+    <div slot="header" class="dialog__header">
+      <ui5-title level="H5">{{ config.title ?? 'Confirm Delete' }}</ui5-title>
+    </div>
+    @if (config.message) {
+      <div class="dialog__body">
+        <p class="dialog__message">{{ config.message }}</p>
+      </div>
+    }
+    <div slot="footer" class="dialog__footer">
+      <ui5-button design="Negative" (click)="onDeleteSubmit()">
+        {{ config.confirmLabel ?? 'Delete' }}
+      </ui5-button>
+      <ui5-button design="Transparent" (click)="closeDeleteDialog()">
+        {{ config.cancelLabel ?? 'Cancel' }}
+      </ui5-button>
+    </div>
+  </ui5-dialog>
+}

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

@@ -0,0 +1,123 @@
+:host {
+  display: block;
+}
+
+@keyframes slide-in {
+  from {
+    opacity: 0;
+    transform: scaleX(0);
+  }
+  to {
+    opacity: 1;
+    transform: scaleX(1);
+  }
+}
+
+@keyframes slide-out {
+  from {
+    opacity: 1;
+    transform: scaleX(1);
+  }
+  to {
+    opacity: 0;
+    transform: scaleX(0);
+  }
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);
+  border-radius: 16px;
+  background: var(--sapGroup_TitleBackground, #fff);
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 3rem;
+    padding: 0 1rem;
+    border-bottom: 1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);
+  }
+
+  &__title {
+    color: var(--sapTile_TitleTextColor);
+    text-overflow: ellipsis;
+    font-family: var(--Font-Family-sapFontFamily, 72);
+    font-size: var(--Font-Size-sapFontHeader6Size, 16px);
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    display: flex;
+    align-items: center;
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  &__info-icon {
+    color: var(--sapButton_IconColor, #0070f2);
+    margin-left: 0.5rem;
+  }
+
+  &__search-input {
+    transform-origin: right center;
+
+    &--enter {
+      animation: slide-in 0.2s ease-out both;
+    }
+
+    &--leave {
+      animation: slide-out 0.2s ease-in both;
+    }
+  }
+
+  &__create-btn {
+    min-width: auto;
+    color: var(--sapButton_IconColor, #0070f2);
+  }
+
+  &__search-btn {
+    min-width: auto;
+    color: var(--sapButton_IconColor, #0070f2);
+  }
+
+  &__body {
+    flex: 1;
+    overflow: auto;
+  }
+}
+
+.dialog {
+  &__header {
+    display: flex;
+    align-items: flex-start;
+    padding: 0.75rem 1rem;
+  }
+
+  &__body {
+    margin: -1rem;
+    min-width: 320px;
+    padding: 1rem;
+  }
+
+  &__message {
+    padding: 1rem;
+    margin: 0;
+    font-size: 0.875rem;
+    max-width: 320px;
+  }
+
+  &__footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    margin: 0 -1rem;
+    width: 100%;
+  }
+}