npm - @openmfp/webcomponents - Versions diffs - 0.6.1 - Mend

@openmfp/webcomponents 0.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (140) hide show

package/docs/declarative-table.md ADDED Viewed

@@ -0,0 +1,315 @@
+# 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 ADDED Viewed

@@ -0,0 +1,41 @@
+// @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/package.json ADDED Viewed

@@ -0,0 +1,73 @@
+{
+  "name": "@openmfp/webcomponents",
+  "version": "0.6.1",
+  "type": "module",
+  "scripts": {
+    "build:ngx": "ng build ngx",
+    "build:wc": "ng build webcomponents && ng build webcomponents-dashboard && node scripts/bundle-wc.mjs",
+    "build": "npm run build:ngx && npm run build:wc",
+    "build:watch": "node -e \"require('fs').mkdirSync('dist',{recursive:true})\" && nodemon --ignore dist --ignore public --ext js,yml,yaml,ts,html,css,scss,json,md --exec \"rimraf dist && npm run build && yalc publish dist/ngx --push --sig\"",
+    "test": "ng test ngx --watch=false",
+    "test:watch": "ng test ngx",
+    "test:cov": "ng test ngx --watch=false --coverage",
+    "storybook": "ng run ngx:storybook",
+    "build:storybook": "ng run ngx:build-storybook",
+    "lint": "ng lint",
+    "lint:fix": "ng lint --fix",
+    "format": "prettier . --write --list-different",
+    "check-format": "prettier . --check"
+  },
+  "engines": {
+    "node": ">=20.0.0",
+    "npm": ">=10.0.0"
+  },
+  "dependencies": {
+    "gridstack": "12.6.0",
+    "tslib": "2.8.1"
+  },
+  "peerDependencies": {
+    "@angular/animations": "^21.2.0",
+    "@angular/common": "^21.2.0",
+    "@angular/compiler": "^21.2.0",
+    "@angular/core": "^21.2.0",
+    "@angular/elements": "^21.2.0",
+    "@angular/forms": "^21.2.0",
+    "@angular/platform-browser": "^21.2.0",
+    "@fundamental-ngx/ui5-webcomponents": "0.59.1",
+    "@fundamental-ngx/ui5-webcomponents-fiori": "0.59.1",
+    "jsonpath": "^1.1.1",
+    "rxjs": "^7.8.2"
+  },
+  "prettier": "@openmfp/config-prettier",
+  "devDependencies": {
+    "@angular-devkit/build-angular": "21.2.7",
+    "@angular-eslint/builder": "^21.3.1",
+    "@angular/build": "^21.2.7",
+    "@angular/cli": "21.2.7",
+    "@angular/compiler-cli": "21.2.12",
+    "@compodoc/compodoc": "^1.2.1",
+    "@openmfp/config-prettier": "0.9.2",
+    "@openmfp/eslint-config-typescript": "0.7.11",
+    "@storybook/addon-docs": "^10.3.5",
+    "@storybook/addon-links": "^10.3.5",
+    "@storybook/angular": "^10.3.5",
+    "@types/jsonpath": "^0.2.4",
+    "@types/node": "24.12.2",
+    "@vitest/coverage-v8": "4.1.5",
+    "concurrently": "9.2.1",
+    "eslint": "9.39.4",
+    "jsdom": "29.1.1",
+    "ng-packagr": "^21.1.0",
+    "nodemon": "3.1.14",
+    "prettier": "3.8.3",
+    "rimraf": "6.1.3",
+    "storybook": "^10.3.5",
+    "typescript": "5.9.3",
+    "typescript-eslint": "^8.33.0",
+    "vitest": "4.1.5",
+    "wait-on": "9.0.5"
+  },
+  "overrides": {
+    "underscore": "1.13.8"
+  }
+}

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

@@ -0,0 +1,12 @@
+<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 ADDED Viewed

@@ -0,0 +1,50 @@
+: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 ADDED Viewed

@@ -0,0 +1,19 @@
+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 ADDED Viewed

@@ -0,0 +1,4 @@
+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 ADDED Viewed

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

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

@@ -0,0 +1,87 @@
+: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 ADDED Viewed

@@ -0,0 +1,36 @@
+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' },
+  };
+}