@openmfp/webcomponents 0.6.1 → 0.6.8

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

@@ -1,345 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DeclarativeTable } from './declarative-table.component';
-import { GenericResource, TableFieldDefinition, ValueCellButtonClickEvent } from '../models';
-import { ValueCell } from '../value-cell/value-cell.component';
-
-type Fixture = ComponentFixture<DeclarativeTable<GenericResource>>;
-type Comp = DeclarativeTable<GenericResource>;
-
-function setup(opts: {
-  columns: TableFieldDefinition[];
-  resources?: GenericResource[];
-  trackByPath?: string;
-  totalItemsCount?: number;
-  paginationLimit?: number;
-  hasMore?: boolean;
-}): { fixture: Fixture; component: Comp } {
-  const fixture: Fixture = TestBed.createComponent(
-    DeclarativeTable as unknown as typeof DeclarativeTable<GenericResource>,
-  );
-  const component = fixture.componentInstance;
-  fixture.componentRef.setInput('columns', opts.columns);
-  fixture.componentRef.setInput('resources', opts.resources ?? []);
-  if (opts.trackByPath !== undefined) fixture.componentRef.setInput('trackByPath', opts.trackByPath);
-  if (opts.totalItemsCount !== undefined) fixture.componentRef.setInput('totalItemsCount', opts.totalItemsCount);
-  if (opts.paginationLimit !== undefined) fixture.componentRef.setInput('paginationLimit', opts.paginationLimit);
-  if (opts.hasMore !== undefined) fixture.componentRef.setInput('hasMore', opts.hasMore);
-  fixture.detectChanges();
-  return { fixture, component };
-}
-
-function root(fixture: Fixture): ShadowRoot | HTMLElement {
-  return fixture.nativeElement.shadowRoot ?? fixture.nativeElement;
-}
-
-function el(fixture: Fixture, testId: string): Element | null {
-  return root(fixture).querySelector(`[test-id="${testId}"]`);
-}
-
-describe('DeclarativeTable', () => {
-  beforeEach(async () => {
-    vi.useFakeTimers();
-    await TestBed.configureTestingModule({
-      imports: [DeclarativeTable as unknown as typeof DeclarativeTable<GenericResource>],
-    }).compileComponents();
-  });
-
-  afterEach(() => {
-    vi.useRealTimers();
-  });
-
-  describe('column headers', () => {
-    it('renders a header cell for each column', () => {
-      const { fixture } = setup({
-        columns: [
-          { property: 'name', label: 'Name' },
-          { property: 'status', label: 'Status' },
-        ],
-      });
-      expect(el(fixture, 'generic-table-header-name')).not.toBeNull();
-      expect(el(fixture, 'generic-table-header-status')).not.toBeNull();
-    });
-
-    it('renders group header with group label and test-id from first field property', () => {
-      const { fixture } = setup({
-        columns: [
-          { property: 'city', label: 'City', group: { name: 'location', label: 'Location' } },
-          { property: 'country', label: 'Country', group: { name: 'location', label: 'Location' } },
-        ],
-      });
-      // processGroupFields preserves the first field's property as the column property
-      const header = el(fixture, 'generic-table-header-city');
-      expect(header).not.toBeNull();
-      expect(header?.textContent?.trim()).toBe('Location');
-    });
-
-    it('renders group header with group name when no label', () => {
-      const { fixture } = setup({
-        columns: [
-          { property: 'city', group: { name: 'location' } },
-        ],
-      });
-      const header = el(fixture, 'generic-table-header-city');
-      expect(header?.textContent?.trim()).toBe('location');
-    });
-
-    it('renders column header with label text', () => {
-      const { fixture } = setup({
-        columns: [{ property: 'name', label: 'Full Name' }],
-      });
-      const header = el(fixture, 'generic-table-header-name');
-      expect(header?.textContent?.trim()).toBe('Full Name');
-    });
-  });
-
-  describe('no-data state', () => {
-    it('renders no-data illustrated message when resources is empty', () => {
-      const { fixture } = setup({ columns: [{ property: 'name' }], resources: [] });
-      expect(el(fixture, 'generic-table-view-nodata')).not.toBeNull();
-    });
-
-    it('does not render no-data message when resources exist', () => {
-      const { fixture } = setup({
-        columns: [{ property: 'name' }],
-        resources: [{ id: '1', name: 'Alice' }],
-      });
-      expect(el(fixture, 'generic-table-view-nodata')).toBeNull();
-    });
-  });
-
-  describe('row rendering', () => {
-    it('renders a row for each resource', () => {
-      const { fixture } = setup({
-        columns: [{ property: 'name' }],
-        resources: [{ id: '1', name: 'Alice' }, { id: '2', name: 'Bob' }],
-      });
-      expect(el(fixture, 'generic-table-row-0')).not.toBeNull();
-      expect(el(fixture, 'generic-table-row-1')).not.toBeNull();
-    });
-
-    it('renders cells with correct test-ids', () => {
-      const { fixture } = setup({
-        columns: [{ property: 'name' }, { property: 'status' }],
-        resources: [{ id: '1', name: 'Alice', status: 'Active' }],
-      });
-      expect(el(fixture, 'generic-table-cell-0-name')).not.toBeNull();
-      expect(el(fixture, 'generic-table-cell-0-status')).not.toBeNull();
-    });
-
-    it('marks row as disabled when isAvailable is false', () => {
-      const { fixture } = setup({
-        columns: [{ property: 'name' }],
-        resources: [{ id: '1', name: 'Alice', isAvailable: false }],
-      });
-      const row = el(fixture, 'generic-table-row-0');
-      expect(row?.classList.contains('disabled')).toBe(true);
-    });
-
-    it('does not mark row as disabled when isAvailable is true', () => {
-      const { fixture } = setup({
-        columns: [{ property: 'name' }],
-        resources: [{ id: '1', name: 'Alice', isAvailable: true }],
-      });
-      const row = el(fixture, 'generic-table-row-0');
-      expect(row?.classList.contains('disabled')).toBe(false);
-    });
-  });
-
-  describe('group columns', () => {
-    it('renders group cell with sub-field test-ids using first-field property', () => {
-      // processGroupFields: grouped column keeps first field's property ('city')
-      // cell test-id: 'generic-table-cell-{i}-{column.property}-{field.property}'
-      // => 'generic-table-cell-0-city-city' and 'generic-table-cell-0-city-country'
-      const { fixture } = setup({
-        columns: [
-          { property: 'city', group: { name: 'location' } },
-          { property: 'country', group: { name: 'location' } },
-        ],
-        resources: [{ id: '1', city: 'Berlin', country: 'Germany' }],
-      });
-      expect(el(fixture, 'generic-table-cell-0-city-city')).not.toBeNull();
-      expect(el(fixture, 'generic-table-cell-0-city-country')).not.toBeNull();
-    });
-
-    it('renders field label inside group cell when label is set', () => {
-      const { fixture } = setup({
-        columns: [
-          { property: 'city', label: 'City', group: { name: 'location' } },
-        ],
-        resources: [{ id: '1', city: 'Berlin' }],
-      });
-      const cell = el(fixture, 'generic-table-cell-0-city-city');
-      expect(cell?.textContent).toContain('City:');
-    });
-  });
-
-  describe('tableRowClicked output', () => {
-    it('emits tableRowClicked with resource on row click', () => {
-      const resource = { id: '1', name: 'Alice' };
-      const { fixture, component } = setup({
-        columns: [{ property: 'name' }],
-        resources: [resource],
-      });
-
-      const emitted: unknown[] = [];
-      component.tableRowClicked.subscribe((e) => emitted.push(e));
-
-      const row = el(fixture, 'generic-table-row-0') as HTMLElement;
-      row?.click();
-      fixture.detectChanges();
-
-      expect(emitted).toHaveLength(1);
-      expect(emitted[0]).toEqual(resource);
-    });
-  });
-
-  describe('buttonClick output', () => {
-    it('bubbles buttonClick from value-cell', () => {
-      const field: TableFieldDefinition = {
-        property: 'action',
-        uiSettings: { displayAs: 'button', buttonSettings: { text: 'Go', action: 'navigate' } },
-      };
-      const resource = { id: '1', action: 'go' };
-      const { fixture, component } = setup({
-        columns: [field],
-        resources: [resource],
-      });
-
-      const emitted: ValueCellButtonClickEvent<GenericResource>[] = [];
-      component.buttonClick.subscribe((e) => emitted.push(e));
-
-      // The button lives inside value-cell's shadow root, unreachable via DOM
-      // querySelector in jsdom. Get the ValueCell instance directly
-      // and invoke its buttonClicked method to test the event chain.
-      const valueCellDe = fixture.debugElement.query(By.directive(ValueCell));
-      const valueCellComp: ValueCell<GenericResource, TableFieldDefinition> = valueCellDe.componentInstance;
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- accessing protected method for testing
-      (valueCellComp as any).buttonClicked(new MouseEvent('click'));
-      fixture.detectChanges();
-
-      expect(emitted).toHaveLength(1);
-      expect(emitted[0].field).toEqual(field);
-      expect(emitted[0].resource).toEqual(resource);
-    });
-  });
-
-  describe('hasMore / table-growing', () => {
-    it('renders ui5-table-growing when hasMore is true', () => {
-      const { fixture } = setup({
-        columns: [{ property: 'name' }],
-        resources: [{ id: '1', name: 'Alice' }],
-        hasMore: true,
-      });
-      expect(root(fixture).querySelector('ui5-table-growing')).not.toBeNull();
-    });
-
-    it('does not render ui5-table-growing when hasMore is false', () => {
-      const { fixture } = setup({
-        columns: [{ property: 'name' }],
-        resources: [{ id: '1', name: 'Alice' }],
-        hasMore: false,
-      });
-      expect(root(fixture).querySelector('ui5-table-growing')).toBeNull();
-    });
-
-    it('exposes loadMoreResources as output', () => {
-      const { component } = setup({
-        columns: [{ property: 'name' }],
-        resources: [],
-        hasMore: true,
-      });
-      expect(typeof component.loadMoreResources.emit).toBe('function');
-      expect(typeof component.loadMoreResources.subscribe).toBe('function');
-    });
-  });
-
-  describe('pagination footer', () => {
-    it('displays loaded count vs total', () => {
-      const { fixture } = setup({
-        columns: [{ property: 'name' }],
-        resources: [{ id: '1', name: 'Alice' }, { id: '2', name: 'Bob' }],
-        totalItemsCount: 10,
-      });
-      const text = root(fixture).textContent;
-      expect(text).toContain('2 / 10');
-    });
-
-    it('emits paginationLimitChanged when select fires change event with value 50', () => {
-      const { fixture, component } = setup({
-        columns: [{ property: 'name' }],
-        resources: [],
-        paginationLimit: 5,
-      });
-
-      const emitted: number[] = [];
-      component.paginationLimitChanged.subscribe((v) => emitted.push(v));
-
-      const select = root(fixture).querySelector('ui5-select') as HTMLElement & { value: string };
-      if (select) {
-        Object.defineProperty(select, 'value', { value: '50', configurable: true });
-        select.dispatchEvent(new Event('change'));
-        fixture.detectChanges();
-      }
-
-      expect(emitted).toHaveLength(1);
-      expect(emitted[0]).toBe(50);
-    });
-  });
-
-  describe('viewColumns computed', () => {
-    it('collapses grouped fields into single column entry', () => {
-      const { component } = setup({
-        columns: [
-          { property: 'city', group: { name: 'location' } },
-          { property: 'country', group: { name: 'location' } },
-          { property: 'name' },
-        ],
-      });
-      const cols = component.viewColumns();
-      expect(cols).toHaveLength(2);
-      expect(cols[0].group?.fields).toHaveLength(2);
-      expect(cols[1].property).toBe('name');
-    });
-  });
-
-  describe('rowTrackBy', () => {
-    it('returns id field value by default', () => {
-      const { component } = setup({
-        columns: [{ property: 'name' }],
-        resources: [{ id: 'abc', name: 'Alice' }],
-      });
-      const result = component.rowTrackBy(0, { id: 'abc', name: 'Alice' });
-      expect(result).toBe('abc');
-    });
-
-    it('returns value from custom trackByPath', () => {
-      const { component } = setup({
-        columns: [{ property: 'name' }],
-        resources: [{ id: '1', metadata: { name: 'pod-1' } }],
-        trackByPath: 'metadata.name',
-      });
-      const result = component.rowTrackBy(0, { id: '1', metadata: { name: 'pod-1' } });
-      expect(result).toBe('pod-1');
-    });
-
-    it('falls back to index when trackByPath resolves to undefined', () => {
-      const { component } = setup({
-        columns: [{ property: 'name' }],
-        resources: [{ name: 'Alice' }],
-        trackByPath: 'nonexistent',
-      });
-      const result = component.rowTrackBy(3, { name: 'Alice' });
-      expect(result).toBe(3);
-    });
-
-    it('works for resources without an id field', () => {
-      const { component } = setup({
-        columns: [{ property: 'name' }],
-        resources: [{ name: 'Alice' }],
-      });
-      const result = component.rowTrackBy(0, { name: 'Alice' });
-      expect(result).toBe(0);
-    });
-  });
-});

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

@@ -1,61 +0,0 @@
-import { GenericResource } from '../../models';
-import { TableFieldDefinition, ValueCellButtonClickEvent } from '../models';
-import { processGroupFields } from '../utils/proccess-fields';
-import { getResourceValueByJsonPath } from '../utils/resource-field-by-path';
-import { ValueCell } from '../value-cell/value-cell.component';
-import {
-  Component,
-  ViewEncapsulation,
-  computed,
-  input,
-  output,
-} from '@angular/core';
-import { IllustratedMessage } from '@fundamental-ngx/ui5-webcomponents-fiori';
-import { Option } from '@fundamental-ngx/ui5-webcomponents/option';
-import { Select } from '@fundamental-ngx/ui5-webcomponents/select';
-import { Table } from '@fundamental-ngx/ui5-webcomponents/table';
-import { TableCell } from '@fundamental-ngx/ui5-webcomponents/table-cell';
-import { TableGrowing } from '@fundamental-ngx/ui5-webcomponents/table-growing';
-import { TableHeaderCell } from '@fundamental-ngx/ui5-webcomponents/table-header-cell';
-import { TableHeaderRow } from '@fundamental-ngx/ui5-webcomponents/table-header-row';
-import { TableRow } from '@fundamental-ngx/ui5-webcomponents/table-row';
-import '@ui5/webcomponents-fiori/dist/illustrations/NoData.js';
-
-@Component({
-  selector: 'mfp-declarative-table',
-  imports: [
-    IllustratedMessage,
-    Table,
-    TableCell,
-    TableHeaderCell,
-    TableHeaderRow,
-    TableRow,
-    ValueCell,
-    Select,
-    Option,
-    TableGrowing,
-  ],
-  templateUrl: './declarative-table.component.html',
-  styleUrl: './declarative-table.component.scss',
-  encapsulation: ViewEncapsulation.ShadowDom,
-})
-export class DeclarativeTable<T extends GenericResource> {
-  columns = input.required<TableFieldDefinition[]>();
-  resources = input.required<T[]>();
-  trackByPath = input<string>('id');
-
-  totalItemsCount = input<number>();
-  paginationLimit = input<number>(5);
-  hasMore = input<boolean>(false);
-
-  readonly buttonClick = output<ValueCellButtonClickEvent<T>>();
-  readonly tableRowClicked = output<T>();
-  readonly loadMoreResources = output<void>();
-  readonly paginationLimitChanged = output<number>();
-
-  columnTrackBy = (column: TableFieldDefinition, index: number) =>
-    column.property ?? column.value ?? index;
-  rowTrackBy = (_index: number, item: T): unknown =>
-    getResourceValueByJsonPath(item, { property: this.trackByPath() }) ?? _index;
-  viewColumns = computed(() => processGroupFields(this.columns()));
-}

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

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

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

@@ -1,2 +0,0 @@
-export * from './declarative-table';
-export * from './models';

package/projects/ngx/declarative-ui/table/models/index.ts

@@ -1,14 +0,0 @@
-export * from './table.model';
-export type { GenericResource } from '../../models/resource';
-export type {
-  ButtonSettings,
-  ModalSettings,
-  UiSettings,
-  CssRule,
-  CssRuleCondition,
-  FieldDefinition,
-  TableFieldDefinition,
-  ValueCellButtonClickEvent,
-  PropertyField,
-  TransformType,
-} from '../../models/ui-definition';

package/projects/ngx/declarative-ui/table/models/table.model.ts

@@ -1,17 +0,0 @@
-import { GenericResource } from '../../models/resource';
-import { FieldDefinition } from '../../models/ui-definition';
-
-export interface ValueCellButtonClickEvent<T extends GenericResource> {
-  event: MouseEvent;
-  field: TableFieldDefinition;
-  resource: T | undefined;
-}
-
-export interface TableFieldDefinition extends FieldDefinition {
-  group?: {
-    name: string;
-    label?: string;
-    delimiter?: string;
-    multiline?: boolean;
-  };
-}

package/projects/ngx/declarative-ui/table/utils/cssRules.engine.spec.ts

@@ -1,146 +0,0 @@
-import { CssRule, CssRuleCondition } from '../../models';
-import {
-  cssRuleResolver,
-  evaluateCssRules,
-  parseStringValue,
-} from './cssRules.engine';
-
-describe('cssRules.engine', () => {
-  describe('parseStringValue', () => {
-    it('returns boolean for true and false strings', () => {
-      expect(parseStringValue('true')).toBe(true);
-      expect(parseStringValue('false')).toBe(false);
-    });
-
-    it('returns number for numeric strings', () => {
-      expect(parseStringValue('42')).toBe(42);
-    });
-
-    it('returns original string when not boolean or number', () => {
-      expect(parseStringValue('text')).toBe('text');
-    });
-  });
-
-  describe('cssRuleResolver', () => {
-    it('handles equality and inequality comparisons', () => {
-      const equalsRule: CssRule = {
-        if: { condition: 'equals', value: '10' },
-        styles: {},
-      };
-      const notEqualsRule: CssRule = {
-        if: { condition: 'notEquals', value: 'off' },
-        styles: {},
-      };
-
-      expect(cssRuleResolver(equalsRule, '10')).toBe(true);
-      expect(cssRuleResolver(notEqualsRule, 'on')).toBe(true);
-      expect(cssRuleResolver(notEqualsRule, 'off')).toBe(false);
-    });
-
-    it('handles numeric comparisons', () => {
-      const greaterThanRule: CssRule = {
-        if: { condition: 'greaterThan', value: '3' },
-        styles: {},
-      };
-      const greaterThanOrEqualRule: CssRule = {
-        if: { condition: 'greaterThanOrEqual', value: '3' },
-        styles: {},
-      };
-      const lessThanRule: CssRule = {
-        if: { condition: 'lessThan', value: '3' },
-        styles: {},
-      };
-      const lessThanOrEqualRule: CssRule = {
-        if: { condition: 'lessThanOrEqual', value: '3' },
-        styles: {},
-      };
-
-      expect(cssRuleResolver(greaterThanRule, '5')).toBe(true);
-      expect(cssRuleResolver(greaterThanOrEqualRule, '3')).toBe(true);
-      expect(cssRuleResolver(lessThanRule, '2')).toBe(true);
-      expect(cssRuleResolver(lessThanOrEqualRule, '3')).toBe(true);
-    });
-
-    it('checks containment for strings and arrays', () => {
-      const stringContainsRule: CssRule = {
-        if: { condition: 'contains', value: 'world' },
-        styles: {},
-      };
-      const arrayContainsRule: CssRule = {
-        if: { condition: 'contains', value: 'green' },
-        styles: {},
-      };
-
-      expect(cssRuleResolver(stringContainsRule, 'hello world')).toBe(true);
-      expect(
-        cssRuleResolver(arrayContainsRule, [
-          'blue',
-          'green',
-        ] as unknown as string),
-      ).toBe(true);
-      expect(cssRuleResolver(stringContainsRule, 'hello')).toBe(false);
-    });
-
-    it('returns false for contains when value is not string or array', () => {
-      const rule: CssRule = {
-        if: { condition: 'contains', value: '2' },
-        styles: {},
-      };
-
-      expect(cssRuleResolver(rule, '123')).toBe(false);
-    });
-
-    it('returns false for unsupported conditions', () => {
-      const rule: CssRule = {
-        if: { condition: 'unknown' as CssRuleCondition, value: 'x' },
-        styles: {},
-      };
-
-      expect(cssRuleResolver(rule, 'value')).toBe(false);
-    });
-  });
-
-  describe('evaluateCssRules', () => {
-    it('returns empty object when rules are missing', () => {
-      expect(evaluateCssRules('value', undefined)).toEqual({});
-    });
-
-    it('applies styles for matching rules only', () => {
-      const rules: CssRule[] = [
-        {
-          if: { condition: 'equals', value: 'active' },
-          styles: { color: 'green' },
-        },
-        {
-          if: { condition: 'notEquals', value: 'active' },
-          styles: { color: 'red', fontWeight: '700' },
-        },
-      ];
-
-      expect(evaluateCssRules('active', rules)).toEqual({ color: 'green' });
-    });
-
-    it('merges styles from multiple matching rules', () => {
-      const rules: CssRule[] = [
-        {
-          if: { condition: 'equals', value: 'ok' },
-          styles: { color: 'blue' },
-        },
-        {
-          if: { condition: 'contains', value: 'o' },
-          styles: { backgroundColor: 'yellow' },
-        },
-        {
-          if: { condition: 'notEquals', value: 'fail' },
-          styles: { borderColor: 'black' },
-        },
-      ];
-
-      expect(evaluateCssRules('ok', rules)).toEqual({
-        color: 'blue',
-        backgroundColor: 'yellow',
-        borderColor: 'black',
-      });
-    });
-  });
-});

package/projects/ngx/declarative-ui/table/utils/cssRules.engine.ts

@@ -1,69 +0,0 @@
-import { CssRule } from '../../models';
-
-export const parseStringValue = (value: string) => {
-  if (value === 'true') {
-    return true;
-  }
-
-  if (value === 'false') {
-    return false;
-  }
-
-  if (!isNaN(Number(value))) {
-    return Number(value);
-  }
-
-  return value;
-};
-
-export const cssRuleResolver = (
-  rule: CssRule,
-  resourceValue: string,
-): boolean => {
-  const parsedResouceValue = parseStringValue(resourceValue);
-  const parsedConditionValue = parseStringValue(rule.if.value);
-
-  switch (rule.if.condition) {
-    case 'equals':
-      return parsedResouceValue === parsedConditionValue;
-    case 'notEquals':
-      return parsedResouceValue !== parsedConditionValue;
-    case 'greaterThan':
-      return parsedResouceValue > parsedConditionValue;
-    case 'greaterThanOrEqual':
-      return parsedResouceValue >= parsedConditionValue;
-    case 'lessThan':
-      return parsedResouceValue < parsedConditionValue;
-    case 'lessThanOrEqual':
-      return parsedResouceValue <= parsedConditionValue;
-    case 'contains':
-      if (Array.isArray(parsedResouceValue)) {
-        return parsedResouceValue.includes(parsedConditionValue);
-      } else if (
-        typeof parsedResouceValue === 'string' &&
-        typeof parsedConditionValue === 'string'
-      ) {
-        return parsedResouceValue.includes(parsedConditionValue);
-      }
-
-      return false;
-  }
-  return false;
-};
-
-export const evaluateCssRules = (
-  value: string,
-  rules?: CssRule[],
-): Partial<CSSStyleDeclaration> => {
-  if (!rules) {
-    return {};
-  }
-
-  return rules.reduce((acc, rule) => {
-    const result = cssRuleResolver(rule, value);
-    if (result) {
-      return { ...acc, ...rule.styles };
-    }
-    return acc;
-  }, {});
-};