@openmfp/webcomponents 0.6.1 → 0.6.7

package/docs/declarative-table-card.md

@@ -1,235 +0,0 @@
-# DeclarativeTableCard
-
-A card component that wraps `mfp-declarative-table` and adds a header, search, and optional create/edit/delete dialogs. Form validation and async submit state are owned by the host application.
-
-## Tags
-
-| Usage                              | Tag                               |
-| ---------------------------------- | --------------------------------- |
-| Angular component                  | `<mfp-declarative-table-card>`    |
-| Web Component (framework-agnostic) | `<mfp-wc-declarative-table-card>` |
-
----
-
-## Usage as a web component
-
-```html
-<mfp-wc-declarative-table-card id="card"></mfp-wc-declarative-table-card>
-
-<script type="module">
-  const card = document.getElementById('card');
-
-  card.resources = [
-    {
-      id: '1',
-      metadata: { name: 'api-server', namespace: 'default' },
-      status: { phase: 'Running' },
-    },
-  ];
-
-  card.config = {
-    header: 'Pods',
-    tableConfig: {
-      fields: [
-        { label: 'Name', property: 'metadata.name' },
-        { label: 'Namespace', property: 'metadata.namespace' },
-      ],
-    },
-    createResourceFormConfig: {
-      fields: [
-        { name: 'metadata.name', label: 'Name', required: true },
-        { name: 'metadata.namespace', label: 'Namespace' },
-      ],
-      title: 'Create Pod',
-      confirmLabel: 'Create',
-    },
-  };
-
-  card.addEventListener('createFieldChange', (event) => {
-    const { fieldProperty, value } = event.detail;
-
-    card.createFormState = {
-      fieldErrors: {
-        ...card.createFormState?.fieldErrors,
-        [fieldProperty]: !value ? 'Field is required' : null,
-      },
-    };
-  });
-
-  card.addEventListener('createSubmit', async (event) => {
-    await createPod(event.detail);
-    card.createFormState = {};
-    card.closeCreateDialog();
-  });
-</script>
-```
-
----
-
-## Usage as an Angular component
-
-```ts
-import {
-  DeclarativeTableCard,
-  FormFieldChangeEvent,
-  TableCardConfig,
-  TableCardFormState,
-} from '@openmfp/webcomponents';
-
-@Component({
-  imports: [DeclarativeTableCard],
-  template: `
-    <mfp-declarative-table-card
-      #tableCard
-      [config]="config"
-      [resources]="pods"
-      [createFormState]="createFormState"
-      [editFormState]="editFormState"
-      (createFieldChange)="onCreateFieldChange($event)"
-      (editFieldChange)="onEditFieldChange($event)"
-      (createSubmit)="onCreateSubmit($event, tableCard)"
-      (editSubmit)="onEditSubmit($event, tableCard)"
-      (deleteSubmit)="onDeleteSubmit($event, tableCard)"
-      (searchChanged)="onSearch($event)"
-    />
-  `,
-})
-export class MyComponent {
-  pods = [];
-  createFormState: TableCardFormState = {};
-  editFormState: TableCardFormState = {};
-
-  config: TableCardConfig = {
-    header: 'Pods',
-    tableConfig: {
-      fields: [
-        { label: 'Name', property: 'metadata.name' },
-        { label: 'Namespace', property: 'metadata.namespace' },
-      ],
-    },
-    createResourceFormConfig: {
-      fields: [
-        { name: 'metadata.name', label: 'Name', required: true },
-        { name: 'metadata.namespace', label: 'Namespace' },
-      ],
-      title: 'Create Pod',
-      confirmLabel: 'Create',
-    },
-    deleteResourceConfirmationConfig: {
-      title: 'Delete Pod?',
-      message: 'This action cannot be undone.',
-      confirmLabel: 'Delete',
-    },
-  };
-
-  onCreateFieldChange(event: FormFieldChangeEvent): void {
-    const { fieldProperty, value } = event;
-    this.createFormState = {
-      fieldErrors: {
-        ...this.createFormState.fieldErrors,
-        [fieldProperty]: !value ? 'Field is required' : null,
-      },
-    };
-  }
-
-  onEditFieldChange(event: {
-    resource: Pod;
-    formChangeEvent: FormFieldChangeEvent;
-  }): void {
-    // Validate event.formChangeEvent and update editFormState.
-  }
-
-  async onCreateSubmit(
-    value: Record<string, unknown>,
-    tableCard: DeclarativeTableCard<Pod>,
-  ): Promise<void> {
-    await this.createPod(value);
-    this.createFormState = {};
-    tableCard.closeCreateDialog();
-  }
-
-  async onEditSubmit(
-    event: { resource: Pod; value: Record<string, unknown> },
-    tableCard: DeclarativeTableCard<Pod>,
-  ): Promise<void> {
-    await this.updatePod(event.resource, event.value);
-    this.editFormState = {};
-    tableCard.closeEditDialog();
-  }
-
-  async onDeleteSubmit(
-    pod: Pod,
-    tableCard: DeclarativeTableCard<Pod>,
-  ): Promise<void> {
-    await this.deletePod(pod);
-    tableCard.closeDeleteDialog();
-  }
-}
-```
-
----
-
-## API
-
-### Inputs
-
-| Input             | Type                 | Required | Default | Description                                               |
-| ----------------- | -------------------- | -------- | ------- | --------------------------------------------------------- |
-| `resources`       | `T[]`                | yes      | -       | Data rows passed to the inner table                       |
-| `config`          | `TableCardConfig`    | yes      | -       | Static table, button, and dialog configuration            |
-| `createFormState` | `TableCardFormState` | no       | `{}`    | Runtime validation and submit state for the create dialog |
-| `editFormState`   | `TableCardFormState` | no       | `{}`    | Runtime validation and submit state for the edit dialog   |
-
-### Outputs / Events
-
-| Event                    | Payload                                           | Description                                                  |
-| ------------------------ | ------------------------------------------------- | ------------------------------------------------------------ |
-| `createFieldChange`       | `FormFieldChangeEvent`                            | Re-emits per-field change from the create form               |
-| `editFieldChange`         | `{ resource: T; formChangeEvent: FormFieldChangeEvent }` | Re-emits per-field change from the edit form with resource   |
-| `createSubmit`           | `Record<string, unknown>`                         | Fires when the create dialog Save button is clicked          |
-| `editSubmit`             | `{ resource: T; value: Record<string, unknown> }` | Fires when the edit dialog Save button is clicked            |
-| `deleteSubmit`           | `T`                                               | Fires when the delete dialog Delete button is clicked        |
-| `searchChanged`          | `string`                                          | Emits 300 ms after the search input changes                  |
-| `tableRowClicked`        | `T`                                               | Emits when a table row is clicked                            |
-| `loadMoreResources`      | -                                                 | Emits when the user triggers load more                       |
-| `paginationLimitChanged` | `number`                                          | Emits when the user changes page size                        |
-| `actionButtonClick`      | `ValueCellButtonClickEvent<T>`                    | Emits for row-action buttons other than built-in edit/delete |
-
-### Methods
-
-| Method                | Description              |
-| --------------------- | ------------------------ |
-| `closeCreateDialog()` | Closes the create dialog |
-| `closeEditDialog()`   | Closes the edit dialog   |
-| `closeDeleteDialog()` | Closes the delete dialog |
-
-Submit events do not close dialogs automatically. Close the dialog after successful validation, save, or delete.
-
----
-
-## Configuration types
-
-```ts
-interface TableCardConfig {
-  header: string;
-  headerTooltip?: string;
-  tableConfig: TableConfig;
-  buttonSettings?: TableCardButtonSettings;
-  createResourceFormConfig?: ResourceFormConfig;
-  editResourceFormConfig?: ResourceFormConfig;
-  deleteResourceConfirmationConfig?: DeleteResourceConfirmationConfig;
-}
-
-interface ResourceFormConfig {
-  fields: FormFieldDefinition[];
-  title?: string;
-  confirmLabel?: string;
-  cancelLabel?: string;
-}
-
-interface TableCardFormState {
-  fieldErrors?: FormFieldErrors;
-}
-```
-
-`ResourceFormConfig` is static. Keep runtime errors in `createFormState` / `editFormState`. The submit button is disabled when any entry in `fieldErrors` is truthy.

package/docs/declarative-table.md

@@ -1,315 +0,0 @@
-# DeclarativeTable
-
-A data table web component that renders rows and columns from a declarative column definition. Supports pagination, grouped columns, conditional cell styling, and multiple cell display modes (plain text, link, boolean icon, secret, tooltip, button, image).
-
-## Tags
-
-| Usage | Tag |
-|---|---|
-| Angular component | `<mfp-declarative-table>` |
-| Web Component (framework-agnostic) | `<mfp-wc-declarative-table>` |
-
----
-
-## Usage as a web component
-
-Include the bundle and set properties via JavaScript. Because the component uses Shadow DOM, no extra CSS setup is needed.
-
-```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <script type="module" src="declarative-table.js"/>
-  </head>
-  <body>
-    <mfp-wc-declarative-table id="table"></mfp-wc-declarative-table>
-
-    <script type="module">
-      const table = document.getElementById('table');
-
-      table.columns = [
-        { label: 'Name',   property: 'metadata.name' },
-        { label: 'Status', property: 'status.phase' },
-      ];
-
-      table.resources = [
-        { metadata: { name: 'pod-1' }, status: { phase: 'Running' } },
-        { metadata: { name: 'pod-2' }, status: { phase: 'Pending' } },
-      ];
-
-      table.trackByPath = 'metadata.name';
-    </script>
-  </body>
-</html>
-```
-
-> `columns`, `resources`, and `trackBy` are JavaScript properties, not HTML attributes. They must be set programmatically after the element is available in the DOM.
-
----
-
-## Usage as an Angular component
-
-```ts
-import { DeclarativeTable } from '@openmfp/webcomponents';
-import { TableFieldDefinition } from '@openmfp/webcomponents';
-
-@Component({
-  imports: [DeclarativeTable],
-  template: `
-    <mfp-declarative-table
-      [columns]="columns"
-      [resources]="resources"
-      [trackByPath]="trackByPath"
-      [hasMore]="hasMore"
-      [paginationLimit]="pageSize"
-      [totalItemsCount]="total"
-      (tableRowClicked)="onRowClick($event)"
-      (loadMoreResources)="loadMore()"
-      (paginationLimitChanged)="onPageSizeChange($event)"
-    />
-  `,
-})
-export class MyComponent {
-  columns: TableFieldDefinition[] = [
-    { label: 'Name',   property: 'metadata.name' },
-    { label: 'Status', property: 'status.phase' },
-  ];
-  resources = [...];
-  trackByPath = 'metadata.name';
-  hasMore = false;
-  pageSize = 10;
-  total = 0;
-}
-```
-
----
-
-## API
-
-### Inputs
-
-| Input | Type | Required | Default | Description |
-|---|---|---|---|---|
-| `columns` | `TableFieldDefinition[]` | yes | — | Column definitions |
-| `resources` | `GenericResource[]` | yes | — | Data rows |
-| `trackByPath` | `string` | no | `'id'` | JSONPath (dot-notation) into each resource used as the row identity key |
-| `totalItemsCount` | `number` | no | — | Total count of all items across pages |
-| `paginationLimit` | `number` | no | `5` | Rows per page shown in the page-size selector |
-| `hasMore` | `boolean` | no | `false` | Show the load-more trigger at the bottom |
-
-### Outputs / Events
-
-| Event | Detail payload | Description |
-|---|---|---|
-| `tableRowClicked` | row object | Fires when a row is clicked |
-| `buttonClick` | `{ event, field, resource }` | Fires when a button cell is clicked |
-| `loadMoreResources` | — | Fires when the user triggers load more |
-| `paginationLimitChanged` | `number` | Fires when the user changes the page size |
-
-**Listening to events from a web component:**
-
-```js
-table.addEventListener('tableRowClicked', (e) => console.log(e.detail));
-table.addEventListener('loadMoreResources', () => fetchNextPage());
-table.addEventListener('paginationLimitChanged', (e) => {
-  table.paginationLimit = e.detail;
-});
-table.addEventListener('buttonClick', (e) => {
-  const { field, resource } = e.detail;
-  console.log('Button clicked for', resource);
-});
-```
-
----
-
-## Column definition (`TableFieldDefinition`)
-
-```ts
-interface TableFieldDefinition {
-  label?:              string;
-  property?:           string;        // dot-notation path into the resource object
-  jsonPathExpression?: string;        // explicit JSONPath expression
-  propertyField?:      PropertyField; // access a sub-key with optional transforms
-  value?:              string;        // static fallback value
-  uiSettings?:         UiSettings;
-  group?: {
-    name:       string;  // columns sharing the same name are merged into one header
-    label?:     string;  // label for the merged header
-    delimiter?: string;  // separator between values (default: space)
-    multiline?: boolean; // render values on separate lines instead
-  };
-}
-```
-
-### Resolving cell values
-
-Values are resolved in this order:
-
-1. `jsonPathExpression` — evaluated as a JSONPath query against the resource (e.g. `$.spec.containers[0].image`)
-2. `property` — dot-notation path; a `$.` prefix is added automatically if missing
-3. `propertyField` — accesses `resource[property][propertyField.key]` with optional transforms
-4. `value` — static string, used as a fallback when the resource yields no value
-
-**Examples:**
-
-```ts
-// Simple dot-notation
-{ label: 'Name', property: 'metadata.name' }
-
-// Explicit JSONPath
-{ label: 'Image', jsonPathExpression: '$.spec.containers[0].image' }
-
-// Sub-key with transform
-{ label: 'Created', property: 'metadata', propertyField: { key: 'creationTimestamp', transform: ['uppercase'] } }
-
-// Static fallback when property may be absent
-{ label: 'Message', property: 'status.message', value: 'N/A' }
-```
-
-### `PropertyField` transforms
-
-Transforms can be chained and are applied left to right.
-
-| Transform | Effect |
-|---|---|
-| `uppercase` | `hello` → `HELLO` |
-| `lowercase` | `HELLO` → `hello` |
-| `capitalize` | `hello` → `Hello` |
-| `encode` | Base64-encodes the value |
-| `decode` | Base64-decodes the value |
-
-```ts
-{ property: 'metadata', propertyField: { key: 'name', transform: ['capitalize'] } }
-```
-
----
-
-## Cell display modes (`uiSettings.displayAs`)
-
-By default a cell renders its value as plain text. Use `uiSettings.displayAs` to change the rendering:
-
-| `displayAs` | Renders as |
-|---|---|
-| _(unset)_ | Plain text |
-| `'secret'` | Masked value with a toggle-visibility button |
-| `'boolIcon'` | Check / X icon for `"true"` / `"false"` string values |
-| `'link'` | Clickable anchor (the value must be a valid URL) |
-| `'tooltip'` | Text with an info icon; the full value appears on hover |
-| `'alert'` | Alert-styled text |
-| `'img'` | `<img>` element using the value as `src` |
-| `'button'` | Action button (requires `buttonSettings`) |
-
-### Copy button
-
-Add a copy-to-clipboard icon to any cell:
-
-```ts
-{ label: 'ID', property: 'metadata.uid', uiSettings: { withCopyButton: true } }
-```
-
-### Button cells
-
-```ts
-{
-  label: 'Actions',
-  property: 'metadata.name',
-  uiSettings: {
-    displayAs: 'button',
-    buttonSettings: {
-      text: 'Open',
-      icon: 'action',
-      design: 'Emphasized', // 'Default' | 'Positive' | 'Negative' | 'Transparent' | 'Emphasized' | 'Attention'
-      action: 'navigate',   // 'navigate' | 'openInModal'
-    },
-  },
-}
-```
-
-A `buttonClick` event fires with `{ event, field, resource }` when clicked.
-
----
-
-## Grouped columns
-
-Columns that share the same `group.name` are collapsed into a single table column. Their values are displayed together, separated by `group.delimiter` or on separate lines when `group.multiline` is `true`.
-
-```ts
-columns = [
-  {
-    label: 'First name',
-    property: 'firstName',
-    group: { name: 'fullName', label: 'Full Name', delimiter: ' ' },
-  },
-  {
-    label: 'Last name',
-    property: 'lastName',
-    group: { name: 'fullName' },
-  },
-  { label: 'Email', property: 'email' },
-];
-```
-
-The above produces two visible columns: **Full Name** and **Email**.
-
----
-
-## Conditional cell styling (`cssRules`)
-
-Apply inline styles to a cell when its value meets a condition:
-
-```ts
-{
-  label: 'Status',
-  property: 'status.phase',
-  uiSettings: {
-    cssRules: [
-      { if: { condition: 'equals',    value: 'Running' }, styles: { color: 'green' } },
-      { if: { condition: 'equals',    value: 'Failed' },  styles: { color: 'red', fontWeight: 'bold' } },
-      { if: { condition: 'contains',  value: 'Pending' }, styles: { color: 'orange' } },
-    ],
-  },
-}
-```
-
-Available conditions: `equals`, `notEquals`, `greaterThan`, `greaterThanOrEqual`, `lessThan`, `lessThanOrEqual`, `contains`.
-
-`cssCustomization` applies static styles unconditionally:
-
-```ts
-uiSettings: { cssCustomization: { fontStyle: 'italic' } }
-```
-
----
-
-## Pagination
-
-When `hasMore` is `true` a **Load More** trigger appears at the bottom of the table. A page-size selector is always present.
-
-```js
-table.hasMore = true;
-table.totalItemsCount = 100;
-table.paginationLimit = 10;
-
-table.addEventListener('loadMoreResources', () => {
-  fetchNextPage().then((rows) => {
-    table.resources = [...table.resources, ...rows];
-  });
-});
-
-table.addEventListener('paginationLimitChanged', (e) => {
-  table.paginationLimit = e.detail;
-  reloadWithNewLimit(e.detail);
-});
-```
-
----
-
-## Resource shape
-
-Any plain object works as a resource. Three optional fields control table behaviour:
-
-| Field | Type | Description |
-|---|---|---|
-| `id` | `string` | Default `trackByPath` target; used as the row identity key unless overridden |
-| `isAvailable` | `boolean` | When `false`, the row is rendered as non-interactive |
-| `accessibleName` | `string` | Accessible label attached to the row element |

package/eslint.config.js

@@ -1,41 +0,0 @@
-// @ts-check
-import angularConfig from '@openmfp/eslint-config-typescript/angular.js';
-import tsEslint from 'typescript-eslint';
-
-export default tsEslint.config(
-  {
-    ignores: ['dist', 'coverage', '.angular'],
-  },
-  ...angularConfig,
-  {
-    // Disable jest rules — this project uses Vitest, not Jest
-    files: ['**/*.spec.ts'],
-    rules: {
-      'jest/no-deprecated-functions': 'off',
-      'jest/expect-expect': 'off',
-      'jest/valid-title': 'off',
-      'jest/no-conditional-expect': 'off',
-    },
-  },
-  {
-    files: ['**/*.ts'],
-    languageOptions: {
-      parserOptions: {
-        projectService: true,
-        tsconfigRootDir: import.meta.dirname,
-      },
-    },
-    rules: {
-      // Override shared config defaults for this library
-      '@angular-eslint/prefer-on-push-component-change-detection': 'off',
-      '@angular-eslint/directive-selector': [
-        'error',
-        { type: 'attribute', prefix: 'mfp', style: 'camelCase' },
-      ],
-      '@angular-eslint/component-selector': [
-        'error',
-        { type: 'element', prefix: 'mfp', style: 'kebab-case' },
-      ],
-    },
-  },
-);

package/projects/ngx/cards/favorites/favorites.component.html

@@ -1,12 +0,0 @@
-<div class="favorites">
-  <ui5-title level="H5" class="favorites__title">Favorites</ui5-title>
-  <div class="favorites__list">
-    @for (item of items; track item.action) {
-      <div class="favorites__item">
-        <ui5-icon name="{{ item.icon }}" class="favorites__icon"></ui5-icon>
-        <span class="favorites__label">{{ item.label }}</span>
-        <ui5-button design="Transparent" icon="{{ item.icon }}">{{ item.label }}</ui5-button>
-      </div>
-    }
-  </div>
-</div>

package/projects/ngx/cards/favorites/favorites.component.scss

@@ -1,50 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-}
-
-.favorites {
-  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);
-  }
-
-  &__label {
-    flex: 1;
-    font-size: var(--sapFontSize, 0.875rem);
-    color: var(--sapTextColor, #32363a);
-  }
-}

package/projects/ngx/cards/favorites/favorites.component.ts

@@ -1,19 +0,0 @@
-import { Component, ViewEncapsulation } from '@angular/core';
-import { Button } from '@fundamental-ngx/ui5-webcomponents/button';
-import { Icon } from '@fundamental-ngx/ui5-webcomponents/icon';
-import { Title } from '@fundamental-ngx/ui5-webcomponents/title';
-
-@Component({
-  selector: 'mfp-favorites',
-  templateUrl: './favorites.component.html',
-  styleUrls: ['./favorites.component.scss'],
-  encapsulation: ViewEncapsulation.ShadowDom,
-  imports: [Button, Icon, Title],
-})
-export class Favorites {
-  readonly items = [
-    { label: 'Create Account', icon: 'add', action: 'create-account' },
-    { label: 'Start Approval', icon: 'workflow-tasks', action: 'start-approval' },
-    { label: 'Add User to Account', icon: 'person-placeholder', action: 'add-user' },
-  ];
-}

package/projects/ngx/cards/public-api.ts

@@ -1,4 +0,0 @@
-export * from './visited-service-card/visited-service-card.component';
-export * from './favorites/favorites.component';
-export * from './service-status/service-status-card.component';
-export * from './whats-new/whats-new.component';

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

@@ -1,15 +0,0 @@
-<div class="service-status">
-  <ui5-title level="H5" class="service-status__title">Service Availability</ui5-title>
-  <div class="service-status__list">
-    @for (service of services; track service.name) {
-      <div class="service-status__item">
-        <ui5-icon name="{{ service.icon }}" class="service-status__icon"></ui5-icon>
-        <span class="service-status__name">{{ service.name }}</span>
-        <div class="service-status__status {{ statusConfig[service.status].colorClass }}">
-          <ui5-icon name="{{ statusConfig[service.status].icon }}" class="service-status__status-icon"></ui5-icon>
-          <span class="service-status__status-label">{{ statusConfig[service.status].label }}</span>
-        </div>
-      </div>
-    }
-  </div>
-</div>