@openmfp/webcomponents 0.6.1 → 0.6.7

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

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

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

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

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