@openmfp/webcomponents 0.6.1 → 0.6.8

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

@@ -1,363 +0,0 @@
-import type { GenericResource } from '../models';
-import type { TableFieldDefinition } from '../table/models';
-import { CUSTOM_ELEMENTS_SCHEMA, Component, Input } from '@angular/core';
-import type { Meta, StoryObj } from '@storybook/angular';
-
-// ---------------------------------------------------------------------------
-// Sample data
-// ---------------------------------------------------------------------------
-
-interface Pod extends GenericResource {
-  id: string;
-  metadata: { name: string; namespace: string; uid: string };
-  status: { phase: string; ready: boolean; restarts: number; message?: string };
-  spec: { nodeName: string; image: string };
-}
-
-const PODS: Pod[] = [
-  {
-    id: 'abc-001',
-    metadata: { name: 'api-server-7d9f', namespace: 'default', uid: 'abc-001' },
-    status: { phase: 'Running', ready: true, restarts: 0, message: undefined },
-    spec: { nodeName: 'node-1', image: 'nginx:1.25' },
-    isAvailable: true,
-  },
-  {
-    id: 'abc-002',
-    metadata: { name: 'worker-5bc8', namespace: 'default', uid: 'abc-002' },
-    status: {
-      phase: 'Pending',
-      ready: false,
-      restarts: 3,
-      message: 'ImagePullBackOff',
-    },
-    spec: { nodeName: 'node-2', image: 'myapp:latest' },
-    isAvailable: false,
-    accessibleName: 'Pod unavailable: ImagePullBackOff',
-  },
-  {
-    id: 'abc-003',
-    metadata: {
-      name: 'cache-redis-0',
-      namespace: 'kube-system',
-      uid: 'abc-003',
-    },
-    status: { phase: 'Running', ready: true, restarts: 1, message: undefined },
-    spec: { nodeName: 'node-1', image: 'redis:7' },
-    isAvailable: true,
-  },
-  {
-    id: 'abc-004',
-    metadata: {
-      name: 'db-postgres-0',
-      namespace: 'production',
-      uid: 'abc-004',
-    },
-    status: {
-      phase: 'Failed',
-      ready: false,
-      restarts: 5,
-      message: 'CrashLoopBackOff',
-    },
-    spec: { nodeName: 'node-3', image: 'postgres:16' },
-    isAvailable: false,
-    accessibleName: 'Pod unavailable: CrashLoopBackOff',
-  },
-  {
-    id: 'abc-005',
-    metadata: {
-      name: 'ingress-ctrl-xkp',
-      namespace: 'default',
-      uid: 'abc-005',
-    },
-    status: { phase: 'Running', ready: true, restarts: 0, message: undefined },
-    spec: { nodeName: 'node-2', image: 'nginx-ingress:1.9' },
-    isAvailable: true,
-  },
-];
-
-// ---------------------------------------------------------------------------
-// Wrapper component (avoids attachShadow conflict)
-// ---------------------------------------------------------------------------
-
-@Component({
-  selector: 'mfp-declarative-table-story',
-  template: `
-    <mfp-wc-declarative-table
-      [columns]="columns"
-      [hasMore]="hasMore"
-      [paginationLimit]="paginationLimit"
-      [resources]="resources"
-      [totalItemsCount]="totalItemsCount"
-      [trackByProperty]="trackByProperty"
-    />
-  `,
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-})
-class DeclarativeTableStory {
-  @Input() columns: TableFieldDefinition[] = [];
-  @Input() resources: GenericResource[] = PODS;
-  @Input() trackByProperty = 'metadata.uid';
-  @Input() hasMore = false;
-  @Input() paginationLimit = 5;
-  @Input() totalItemsCount?: number;
-}
-
-// ---------------------------------------------------------------------------
-// Meta
-// ---------------------------------------------------------------------------
-
-const meta: Meta<DeclarativeTableStory> = {
-  title: 'Declarative UI / DeclarativeTable',
-  component: DeclarativeTableStory,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'fullscreen',
-  },
-  argTypes: {
-    columns: { control: 'object' },
-    resources: { control: 'object' },
-    trackByProperty: { control: 'text' },
-    hasMore: { control: 'boolean' },
-    paginationLimit: { control: 'number' },
-    totalItemsCount: { control: 'number' },
-  },
-  args: {
-    resources: PODS,
-    trackByProperty: 'metadata.uid',
-    hasMore: false,
-    paginationLimit: 5,
-  },
-};
-
-export default meta;
-type Story = StoryObj<DeclarativeTableStory>;
-
-// ---------------------------------------------------------------------------
-// Stories
-// ---------------------------------------------------------------------------
-
-/** Minimal setup: three plain-text columns. */
-export const Basic: Story = {
-  args: {
-    columns: [
-      { label: 'Name', property: 'metadata.name' },
-      { label: 'Namespace', property: 'metadata.namespace' },
-      { label: 'Node', property: 'spec.nodeName' },
-    ] satisfies TableFieldDefinition[],
-  },
-};
-
-/**
- * Boolean icons, secret cell with inline copy button, and conditional colour
- * rules. The copy icon appears next to the masked value on the same line.
- */
-export const CellDisplayModes: Story = {
-  args: {
-    columns: [
-      { label: 'Name', property: 'metadata.name' },
-      {
-        label: 'Ready',
-        property: 'status.ready',
-        uiSettings: { displayAs: 'boolIcon' },
-      },
-      {
-        label: 'Phase',
-        property: 'status.phase',
-        uiSettings: {
-          cssRules: [
-            {
-              if: { condition: 'equals', value: 'Running' },
-              styles: { color: 'green' },
-            },
-            {
-              if: { condition: 'equals', value: 'Pending' },
-              styles: { color: 'darkorange' },
-            },
-            {
-              if: { condition: 'equals', value: 'Failed' },
-              styles: { color: 'red', fontWeight: 'bold' },
-            },
-          ],
-        },
-      },
-      {
-        label: 'UID',
-        property: 'metadata.uid',
-        uiSettings: { displayAs: 'secret', withCopyButton: true },
-      },
-      {
-        label: 'Image',
-        property: 'spec.image',
-        uiSettings: { displayAs: 'tooltip', tooltipIcon: 'information' },
-      },
-    ] satisfies TableFieldDefinition[],
-  },
-};
-
-/** Two columns sharing the same group name are merged into one header. */
-export const GroupedColumns: Story = {
-  args: {
-    columns: [
-      {
-        label: 'Name',
-        property: 'metadata.name',
-        group: { name: 'identity', label: 'Identity', delimiter: ' / ' },
-      },
-      {
-        label: 'Namespace',
-        property: 'metadata.namespace',
-        group: { name: 'identity' },
-      },
-      { label: 'Phase', property: 'status.phase' },
-      { label: 'Node', property: 'spec.nodeName' },
-    ] satisfies TableFieldDefinition[],
-  },
-};
-
-/**
- * Group with a space delimiter and labelDisplay — values rendered as blue
- * badge labels, separated by a single space. Also demonstrates the alert
- * display type: a warning icon appears when the field value is falsy.
- */
-export const GroupedWithLabelsAndAlert: Story = {
-  args: {
-    columns: [
-      { label: 'Name', property: 'metadata.name' },
-      {
-        property: 'spec.nodeName',
-        uiSettings: { labelDisplay: true },
-        group: {
-          name: 'placement',
-          label: 'Placement',
-          delimiter: ' ',
-          multiline: false,
-        },
-      },
-      {
-        property: 'spec.image',
-        uiSettings: { labelDisplay: true },
-        group: { name: 'placement' },
-      },
-      {
-        label: 'OK',
-        property: 'status.message',
-        uiSettings: { displayAs: 'alert' },
-      },
-      { label: 'Message', property: 'status.message', value: '—' },
-    ] satisfies TableFieldDefinition[],
-  },
-};
-
-/**
- * `uiSettings.columnWidth` sets the width of the header cell (and thus the
- * whole column). Useful for icon-only columns like `alert` or `boolIcon` where
- * the default `auto` width is wider than necessary.
- */
-export const ColumnWidth: Story = {
-  args: {
-    columns: [
-      { label: 'Name', property: 'metadata.name' },
-      {
-        label: 'Alert',
-        property: 'status.message',
-        uiSettings: { displayAs: 'alert', columnWidth: '60px' },
-      },
-      {
-        label: 'Ready',
-        property: 'status.ready',
-        uiSettings: { displayAs: 'boolIcon', columnWidth: '60px' },
-      },
-      { label: 'Phase', property: 'status.phase' },
-    ] satisfies TableFieldDefinition[],
-  },
-};
-
-/** JSONPath expression for deeply nested or array values. */
-export const JsonPathExpression: Story = {
-  args: {
-    columns: [
-      { label: 'Name', property: 'metadata.name' },
-      { label: 'Namespace', jsonPathExpression: '$.metadata.namespace' },
-      { label: 'Image', jsonPathExpression: '$.spec.image' },
-      { label: 'Restarts', jsonPathExpression: '$.status.restarts' },
-    ] satisfies TableFieldDefinition[],
-  },
-};
-
-/** Static fallback value shown when the resource field is absent. */
-export const StaticFallback: Story = {
-  args: {
-    columns: [
-      { label: 'Name', property: 'metadata.name' },
-      { label: 'Message', property: 'status.message', value: '—' },
-    ] satisfies TableFieldDefinition[],
-  },
-};
-
-/** Load-more pagination trigger. Click "Load More" to fire loadMoreResources. */
-export const Pagination: Story = {
-  args: {
-    columns: [
-      { label: 'Name', property: 'metadata.name' },
-      { label: 'Namespace', property: 'metadata.namespace' },
-      { label: 'Phase', property: 'status.phase' },
-    ] satisfies TableFieldDefinition[],
-    hasMore: true,
-    paginationLimit: 5,
-    totalItemsCount: 20,
-  },
-};
-
-/** Button cell that fires buttonClick with { event, field, resource }. */
-export const ButtonCell: Story = {
-  args: {
-    columns: [
-      { label: 'Name', property: 'metadata.name' },
-      { label: 'Phase', property: 'status.phase' },
-      {
-        label: 'Actions',
-        property: 'metadata.name',
-        uiSettings: {
-          displayAs: 'button',
-          buttonSettings: {
-            text: 'Inspect',
-            icon: 'inspect',
-            design: 'Emphasized',
-            action: 'navigate',
-          },
-        },
-      },
-    ] satisfies TableFieldDefinition[],
-  },
-};
-
-/** Empty resources array triggers the illustrated empty-state message. */
-export const EmptyState: Story = {
-  args: {
-    columns: [
-      { label: 'Name', property: 'metadata.name' },
-      { label: 'Namespace', property: 'metadata.namespace' },
-    ] satisfies TableFieldDefinition[],
-    resources: [],
-  },
-};
-
-/**
- * isAvailable=false greys out the row and disables interaction.
- * accessibleName is used as the tooltip text on the alert icon for unavailable pods.
- */
-export const RowAvailability: Story = {
-  args: {
-    columns: [
-      { label: 'Name', property: 'metadata.name' },
-      { label: 'Phase', property: 'status.phase' },
-      { label: 'Node', property: 'spec.nodeName' },
-      {
-        label: 'Status',
-        property: 'isAvailable',
-        uiSettings: { displayAs: 'alert' },
-      },
-    ] satisfies TableFieldDefinition[],
-  },
-};

package/projects/ngx/declarative-ui/stories/pods-table.config.ts

@@ -1,188 +0,0 @@
-import type { TableFieldDefinition } from '../../declarative-ui/table/models';
-import type {
-  DeleteResourceConfirmationConfig,
-  ResourceFormConfig,
-  TableCardConfig,
-  TableConfig,
-} from '..//table-card/models/configs';
-
-export const TABLE_RESOURCES = [
-  {
-    id: 'abc-001',
-    metadata: { name: 'api-server-7d9f', namespace: 'default', uid: 'abc-001' },
-    status: { phase: 'Running', ready: true, restarts: 0, message: undefined },
-    spec: { nodeName: 'node-1', image: 'nginx:1.25' },
-    isAvailable: true,
-  },
-  {
-    id: 'abc-002',
-    metadata: { name: 'worker-5bc8', namespace: 'default', uid: 'abc-002' },
-    status: {
-      phase: 'Pending',
-      ready: false,
-      restarts: 3,
-      message: 'ImagePullBackOff',
-    },
-    spec: { nodeName: 'node-2', image: 'myapp:latest' },
-    isAvailable: false,
-    accessibleName: 'Pod unavailable: ImagePullBackOff',
-  },
-  {
-    id: 'abc-003',
-    metadata: {
-      name: 'cache-redis-0',
-      namespace: 'kube-system',
-      uid: 'abc-003',
-    },
-    status: { phase: 'Running', ready: true, restarts: 1, message: undefined },
-    spec: { nodeName: 'node-1', image: 'redis:7' },
-    isAvailable: true,
-  },
-  {
-    id: 'abc-004',
-    metadata: {
-      name: 'db-postgres-0',
-      namespace: 'production',
-      uid: 'abc-004',
-    },
-    status: {
-      phase: 'Failed',
-      ready: false,
-      restarts: 5,
-      message: 'CrashLoopBackOff',
-    },
-    spec: { nodeName: 'node-3', image: 'postgres:16' },
-    isAvailable: false,
-    accessibleName: 'Pod unavailable: CrashLoopBackOff',
-  },
-  {
-    id: 'abc-005',
-    metadata: {
-      name: 'ingress-ctrl-xkp',
-      namespace: 'default',
-      uid: 'abc-005',
-    },
-    status: { phase: 'Running', ready: true, restarts: 0, message: undefined },
-    spec: { nodeName: 'node-2', image: 'nginx-ingress:1.9' },
-    isAvailable: true,
-  },
-];
-
-export const TABLE_COLUMNS: TableFieldDefinition[] = [
-  { label: 'Name', property: 'metadata.name' },
-  { label: 'Namespace', property: 'metadata.namespace' },
-  {
-    label: 'Ready',
-    property: 'status.ready',
-    uiSettings: { displayAs: 'boolIcon', columnWidth: '56px' },
-  },
-  {
-    label: 'Phase',
-    property: 'status.phase',
-    uiSettings: {
-      cssRules: [
-        {
-          if: { condition: 'equals', value: 'Running' },
-          styles: { color: 'green' },
-        },
-        {
-          if: { condition: 'equals', value: 'Pending' },
-          styles: { color: 'darkorange' },
-        },
-        {
-          if: { condition: 'equals', value: 'Failed' },
-          styles: { color: 'red', fontWeight: 'bold' },
-        },
-      ],
-    },
-  },
-  {
-    label: 'UID',
-    property: 'metadata.uid',
-    uiSettings: { displayAs: 'secret', withCopyButton: true },
-  },
-  {
-    property: 'spec.image',
-    uiSettings: { labelDisplay: true },
-    group: { name: 'placement', label: 'Placement', delimiter: ' ' },
-  },
-  {
-    property: 'spec.nodeName',
-    uiSettings: { labelDisplay: true },
-    group: { name: 'placement' },
-  },
-  {
-    label: 'Alert',
-    property: 'status.message',
-    uiSettings: { displayAs: 'alert', columnWidth: '42px' },
-  },
-  { label: 'Message', property: 'status.message', value: '—' },
-  {
-    property: 'metadata.name',
-    uiSettings: {
-      displayAs: 'button',
-      buttonSettings: {
-        icon: 'inspect',
-        design: 'Transparent',
-        action: 'navigate',
-      },
-    },
-    group: { name: 'actions', label: 'Actions', multiline: false },
-  },
-];
-
-export const POD_FORM_FIELDS = [
-  { name: 'metadata.name', label: 'Name', required: true },
-  {
-    name: 'metadata.namespace',
-    label: 'Namespace',
-    required: true,
-    values: ['default', 'kube-system', 'production'],
-  },
-];
-
-export const POD_EDIT_FORM_FIELDS = [
-  { name: 'metadata.name', label: 'Name', required: true, disabled: true },
-  {
-    name: 'metadata.namespace',
-    label: 'Namespace',
-    required: true,
-    values: ['default', 'kube-system', 'production'],
-  },
-];
-
-export const BASE_TABLE_CONFIG: TableConfig = {
-  fields: TABLE_COLUMNS,
-  paginationLimit: 5,
-  hasMore: false,
-};
-
-export const DELETE_CONFIRMATION_CONFIG: DeleteResourceConfirmationConfig = {
-  title: 'Delete Pod?',
-  message: 'This action cannot be undone. The pod will be permanently removed.',
-  confirmLabel: 'Delete',
-  cancelLabel: 'Cancel',
-};
-
-export const CREATE_FORM_CONFIG: ResourceFormConfig = {
-  fields: POD_FORM_FIELDS,
-  title: 'Create Pod',
-  confirmLabel: 'Create',
-  cancelLabel: 'Cancel',
-};
-
-export const EDIT_FORM_CONFIG: ResourceFormConfig = {
-  fields: POD_EDIT_FORM_FIELDS,
-  title: 'Edit Pod',
-  confirmLabel: 'Save',
-  cancelLabel: 'Cancel',
-};
-
-export const TABLE_CARD_CONFIG: TableCardConfig = {
-  header: 'Pods',
-  headerTooltip: 'This table lists all pods running in the cluster.',
-  tableConfig: BASE_TABLE_CONFIG,
-  createResourceFormConfig: CREATE_FORM_CONFIG,
-  editResourceFormConfig: EDIT_FORM_CONFIG,
-  deleteResourceConfirmationConfig: DELETE_CONFIRMATION_CONFIG,
-};

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

@@ -1,138 +0,0 @@
-<ui5-table test-id="generic-table">
-  <ui5-table-header-row slot="headerRow">
-    @for (column of viewColumns(); track columnTrackBy(column, $index)) {
-      @if (column.group) {
-        <ui5-table-header-cell
-          [attr.test-id]="'generic-table-header-' + column.property"
-          >{{ column.group.label ?? column.group.name }}</ui5-table-header-cell
-        >
-      } @else {
-        <ui5-table-header-cell
-          [attr.test-id]="'generic-table-header-' + column.property"
-          [width]="column.uiSettings?.columnWidth ?? 'auto'"
-          >{{ column.label }}</ui5-table-header-cell
-        >
-      }
-    }
-  </ui5-table-header-row>
-
-  @for (item of resources(); let i = $index; track rowTrackBy($index, item)) {
-    <ui5-table-row
-      [attr.test-id]="'generic-table-row-' + i"
-      [class.disabled]="!(item.isAvailable ?? true)"
-      [interactive]="item.isAvailable ?? true"
-      (click)="tableRowClicked.emit(item)"
-    >
-      @for (column of viewColumns(); track columnTrackBy(column, $index)) {
-        @if (column.group) {
-          <ui5-table-cell
-            [attr.test-id]="'generic-table-cell-' + i + '-' + column.property"
-            [class.multiline]="column.group.multiline ?? true"
-          >
-            @for (
-              field of column.group.fields;
-              let last = $last;
-              track columnTrackBy(field, $index)
-            ) {
-              <span
-                class="group-value"
-                [attr.test-id]="
-                  'generic-table-cell-' +
-                  i +
-                  '-' +
-                  column.property +
-                  '-' +
-                  field.property
-                "
-              >
-                @if (field.label) {
-                  <span>{{ field.label }}: </span>
-                }
-                <mfp-value-cell
-                  [fieldDefinition]="field"
-                  [resource]="item"
-                  (buttonClick)="buttonClick.emit($event)"
-                />
-              </span>
-              @if (!last && column.group.delimiter) {
-                <span>{{ column.group.delimiter }}</span>
-              }
-            }
-          </ui5-table-cell>
-        } @else {
-          <ui5-table-cell
-            [attr.test-id]="'generic-table-cell-' + i + '-' + column.property"
-          >
-            <mfp-value-cell
-              [fieldDefinition]="column"
-              [resource]="item"
-              (buttonClick)="buttonClick.emit($event)"
-            />
-          </ui5-table-cell>
-        }
-      }
-    </ui5-table-row>
-  } @empty {
-    <ui5-illustrated-message
-      name="NoData"
-      slot="noData"
-      test-id="generic-table-view-nodata"
-    >
-      <span slot="title">No Resources</span>
-      <span slot="subtitle">There are currently no items to show.</span>
-    </ui5-illustrated-message>
-  }
-
-  @if (hasMore()) {
-    <ui5-table-growing
-      id="growing"
-      mode="Button"
-      slot="features"
-      text="Load more"
-      (ui5LoadMore)="loadMoreResources.emit()"
-    />
-  }
-</ui5-table>
-
-<!-- Pagination Control -->
-<div
-  class="pagination-footer"
-  style="
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0rem 1rem;
-    min-height: 3rem;
-    border-top: 1px solid var(--sapList_BorderColor);
-  "
->
-  <div style="display: flex; align-items: center; gap: 1.5rem">
-    <div style="display: flex; align-items: center; gap: 0.5rem">
-      <span
-        style="color: var(--sapTextColor); font-size: var(--sapFontSmallSize)"
-        >Items per load:</span
-      >
-      <ui5-select
-        style="width: 5rem"
-        (change)="paginationLimitChanged.emit(+$any($event)?.target?.value)"
-        [value]="paginationLimit().toString()"
-      >
-        <ui5-option value="5">5</ui5-option>
-        <ui5-option value="10">10</ui5-option>
-        <ui5-option value="50">50</ui5-option>
-        <ui5-option value="100">100</ui5-option>
-      </ui5-select>
-    </div>
-
-    <span
-      style="color: var(--sapTextColor); font-size: var(--sapFontSmallSize)"
-    >
-      Items loaded:
-      <b>{{
-        totalItemsCount() !== undefined
-          ? resources().length + ' / ' + totalItemsCount()
-          : resources().length
-      }}</b>
-    </span>
-  </div>
-</div>

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

@@ -1,21 +0,0 @@
-.multiline {
-  display: block;
-}
-
-.disabled {
-  filter: brightness(0.92);
-  pointer-events: none;
-
-  ui5-table-cell:not(:first-child) {
-    color: var(--sapContent_DisabledTextColor, #6a6d70);
-
-    ui5-icon {
-      color: var(--sapContent_DisabledTextColor, #6a6d70);
-    }
-  }
-}
-
-.group-value {
-  display: flex;
-  align-items: center;
-}