@openmfp/webcomponents 0.6.1 → 0.6.8

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

@@ -1,166 +0,0 @@
-import {
-  FormFieldChangeEvent,
-  FormFieldDefinition,
-  FormFieldErrors,
-} from '../models';
-import { setPropertyByPath } from '../utils/set-property-by-path';
-import {
-  Component,
-  ViewEncapsulation,
-  effect,
-  inject,
-  input,
-  output,
-} from '@angular/core';
-import {
-  FormBuilder,
-  FormControl,
-  FormGroup,
-  ReactiveFormsModule,
-} from '@angular/forms';
-import { Input } from '@fundamental-ngx/ui5-webcomponents/input';
-import { Label } from '@fundamental-ngx/ui5-webcomponents/label';
-import { Option } from '@fundamental-ngx/ui5-webcomponents/option';
-import { Select } from '@fundamental-ngx/ui5-webcomponents/select';
-
-@Component({
-  selector: 'mfp-declarative-form',
-  imports: [ReactiveFormsModule, Input, Label, Select, Option],
-  templateUrl: './declarative-form.component.html',
-  styleUrl: './declarative-form.component.scss',
-  encapsulation: ViewEncapsulation.ShadowDom,
-})
-export class DeclarativeForm {
-  readonly fields = input.required<FormFieldDefinition[]>();
-  readonly initialValues = input<Record<string, unknown>>({});
-  readonly fieldErrors = input<FormFieldErrors>({});
-
-  readonly fieldChange = output<FormFieldChangeEvent>();
-  readonly formSubmit = output<Record<string, unknown>>();
-
-  readonly form: FormGroup;
-
-  private readonly fb = inject(FormBuilder);
-
-  constructor() {
-    this.form = this.fb.group({});
-
-    effect(() => {
-      this.rebuildControls(this.fields());
-    });
-
-    effect(() => {
-      this.setInitialValues(this.initialValues());
-    });
-
-    effect(() => {
-      const fields = this.fields();
-      this.initialValues();
-
-      for (const field of fields) {
-        if (field.validation) {
-          this.fieldChange.emit({
-            fieldProperty: field.name,
-            value: this.form.controls[field.name]?.value ?? '',
-          });
-        }
-      }
-    });
-  }
-
-  setFormControlValue($event: Event, field: FormFieldDefinition): void {
-    const target = $event.target as
-      | HTMLInputElement
-      | HTMLTextAreaElement
-      | HTMLSelectElement;
-
-    const control = this.form.controls[field.name];
-    control.setValue(target.value);
-    control.markAsTouched();
-    control.markAsDirty();
-
-    if (field.validation === 'onChange') {
-      this.fieldChange.emit({
-        fieldProperty: field.name,
-        value: control.value,
-      });
-    }
-  }
-
-  getError(name: string): string | null {
-    const control = this.form.controls[name];
-    const error = this.fieldErrors()[name];
-
-    return error && (control.dirty || control.touched) ? error : null;
-  }
-
-  getValueState(name: string): 'None' | 'Negative' {
-    return this.getError(name) ? 'Negative' : 'None';
-  }
-
-  onFieldBlur(field: FormFieldDefinition): void {
-    this.form.controls[field.name]?.markAsTouched();
-
-    if (field.validation === 'onBlur') {
-      this.fieldChange.emit({
-        fieldProperty: field.name,
-        value: this.form.controls[field.name]?.value,
-      });
-    }
-  }
-
-  submit(): void {
-    this.formSubmit.emit(this.buildOutputValue());
-  }
-
-  clear(): void {
-    this.form.reset();
-  }
-
-  private rebuildControls(fields: FormFieldDefinition[]): void {
-    const existingControls = this.form.controls;
-    const nextFieldNames = new Set(fields.map((field) => field.name));
-
-    for (const field of fields) {
-      const existingControl = existingControls[field.name];
-
-      if (existingControl) {
-        existingControl.clearValidators();
-        existingControl.updateValueAndValidity({ emitEvent: false });
-        continue;
-      }
-
-      this.form.addControl(field.name, new FormControl(''));
-    }
-
-    for (const controlName of Object.keys(existingControls)) {
-      if (!nextFieldNames.has(controlName)) {
-        this.form.removeControl(controlName);
-      }
-    }
-
-    this.form.updateValueAndValidity({ emitEvent: false });
-  }
-
-  private setInitialValues(
-    initialValues: Record<string, unknown> | null | undefined,
-  ): void {
-    if (!initialValues) {
-      return;
-    }
-
-    this.form.patchValue(initialValues, { emitEvent: false });
-    this.form.markAsPristine({ emitEvent: false });
-    this.form.updateValueAndValidity({ emitEvent: false });
-  }
-
-  private buildOutputValue(): Record<string, unknown> {
-    const result: Record<string, unknown> = {};
-
-    for (const key of Object.keys(this.form.controls)) {
-      setPropertyByPath(result, key, this.form.controls[key].value);
-    }
-
-    return result;
-  }
-}

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

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

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

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

package/projects/ngx/declarative-ui/form/models/form-field-definition.ts

@@ -1,15 +0,0 @@
-export interface FormFieldDefinition {
-  name: string;
-  label?: string;
-  required?: boolean;
-  values?: string[];
-  disabled?: boolean;
-  validation?: 'onBlur' | 'onChange';
-}
-
-export interface FormFieldChangeEvent {
-  fieldProperty: string;
-  value: unknown;
-}
-
-export type FormFieldErrors = Record<string, string | null>;

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

@@ -1 +0,0 @@
-export * from './form-field-definition';

package/projects/ngx/declarative-ui/form/utils/set-property-by-path.ts

@@ -1,30 +0,0 @@
-export function setPropertyByPath<T extends Record<string, unknown>>(
-  object: T,
-  path: string,
-  value: unknown,
-): T {
-  const segments = path.split('.').filter(Boolean);
-  if (segments.length === 0) {
-    return object;
-  }
-
-  let current: Record<string, unknown> = object;
-
-  for (let i = 0; i < segments.length; i += 1) {
-    const key = segments[i];
-    if (i === segments.length - 1) {
-      current[key] = value;
-      break;
-    }
-
-    const existing = current[key];
-
-    if (existing === undefined || existing === null || typeof existing !== 'object') {
-      current[key] = {};
-    }
-
-    current = current[key] as Record<string, unknown>;
-  }
-
-  return object;
-}

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

@@ -1,2 +0,0 @@
-export * from './resource';
-export * from './ui-definition';

package/projects/ngx/declarative-ui/models/resource.ts

@@ -1,5 +0,0 @@
-export interface GenericResource extends Record<string, unknown> {
-  id?: string;
-  isAvailable?: boolean;
-  accessibleName?: string;
-}

package/projects/ngx/declarative-ui/models/ui-definition.ts

@@ -1,95 +0,0 @@
-import { GenericResource } from './resource';
-
-export type TransformType =
-  | 'uppercase'
-  | 'lowercase'
-  | 'capitalize'
-  | 'decode'
-  | 'encode';
-
-export interface PropertyField {
-  key: string;
-  transform?: TransformType[];
-}
-
-export interface UiSettings {
-  labelDisplay?: boolean;
-  displayAs?:
-    | 'secret'
-    | 'boolIcon'
-    | 'link'
-    | 'tooltip'
-    | 'alert'
-    | 'img'
-    | 'button';
-  buttonSettings?: ButtonSettings;
-  tooltipIcon?: string;
-  withCopyButton?: boolean;
-  cssCustomization?: Partial<CSSStyleDeclaration>;
-  cssRules?: CssRule[];
-  columnWidth?: string;
-}
-
-type KnownButtonActions = 'openInModal' | 'navigate' | 'edit' | 'delete';
-type ButtonActions = KnownButtonActions | (string & {});
-
-export interface ButtonSettings {
-  text?: string;
-  icon?: string;
-  endIcon?: string;
-  design?:
-    | 'Default'
-    | 'Positive'
-    | 'Negative'
-    | 'Transparent'
-    | 'Emphasized'
-    | 'Attention';
-  tooltip?: string;
-  action: ButtonActions;
-  modalSettings?: ModalSettings;
-}
-
-export interface ModalSettings {
-  title?: string;
-  size?: 'fullscreen' | 'l' | 'm' | 's'; // ze of the modal
-  width?: string; //updates the width of the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw
-  height?: string; //updates the height of the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw
-}
-
-export type CssRuleCondition =
-  | 'equals'
-  | 'notEquals'
-  | 'greaterThan'
-  | 'greaterThanOrEqual'
-  | 'lessThan'
-  | 'lessThanOrEqual'
-  | 'contains';
-
-export interface CssRule {
-  if: { condition: CssRuleCondition; value: string };
-  styles: Partial<CSSStyleDeclaration>;
-}
-
-export interface ValueCellButtonClickEvent<T extends GenericResource> {
-  event: MouseEvent;
-  field: TableFieldDefinition;
-  resource: T | undefined;
-}
-
-export interface FieldDefinition {
-  label?: string;
-  property?: string | string[];
-  propertyField?: PropertyField;
-  jsonPathExpression?: string;
-  value?: string;
-  uiSettings?: UiSettings;
-}
-
-export interface TableFieldDefinition extends FieldDefinition {
-  group?: {
-    name: string;
-    label?: string;
-    delimiter?: string;
-    multiline?: boolean;
-  };
-}

package/projects/ngx/declarative-ui/public-api.ts

@@ -1,4 +0,0 @@
-export * from './table';
-export * from './form';
-export * from './table-card';
-export * from './dashboard';

package/projects/ngx/declarative-ui/stories/add-card-dialog.stories.ts

@@ -1,91 +0,0 @@
-import { AddCardDialog } from '../dashboard/add-card-dialog/add-card-dialog.component';
-import type { CardConfig } from '../dashboard/models';
-import { Component, Input } from '@angular/core';
-import type { Meta, StoryObj } from '@storybook/angular';
-
-const AVAILABLE_CARDS: CardConfig[] = [
-  {
-    id: 'whats-new',
-    component: 'mfp-whats-new',
-    label: "What's New",
-    w: 3,
-    h: 3,
-  },
-  {
-    id: 'recently-visited',
-    component: 'mfp-visited-service-card',
-    label: 'Recently Visited',
-    w: 4,
-    h: 1,
-  },
-];
-
-@Component({
-  selector: 'add-card-dialog-story',
-  imports: [AddCardDialog],
-  template: `
-    <ui5-button (click)="open = true">Open Dialog</ui5-button>
-    <mfp-add-card-dialog
-      [addedCardsIds]="addedComponents"
-      [availableCards]="availableCards"
-      [open]="open"
-      (cancel)="open = false"
-      (confirm)="onConfirm($event)"
-    />
-    @if (lastAdded) {
-      <ui5-message-strip design="Positive" style="margin-top: 1rem;">
-        Added: {{ lastAdded }}
-      </ui5-message-strip>
-    }
-  `,
-})
-class AddCardDialogStory {
-  @Input() availableCards: CardConfig[] = AVAILABLE_CARDS;
-  @Input() addedComponents: Set<string> = new Set<string>();
-
-  open = false;
-  lastAdded = '';
-
-  onConfirm(cards: CardConfig[]): void {
-    this.open = false;
-    this.lastAdded = cards.map((c) => c.label || c.component).join(', ');
-    setTimeout(() => (this.lastAdded = ''), 3000);
-  }
-}
-
-const meta: Meta<AddCardDialogStory> = {
-  title: 'Declarative UI / AddCardDialog',
-  component: AddCardDialogStory,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-  },
-  argTypes: {
-    availableCards: { control: 'object' },
-    addedComponents: { control: false },
-  },
-};
-
-export default meta;
-type Story = StoryObj<AddCardDialogStory>;
-
-export const NoneAdded: Story = {
-  args: {
-    availableCards: AVAILABLE_CARDS,
-    addedComponents: new Set<string>(),
-  },
-};
-
-export const SomeAdded: Story = {
-  args: {
-    availableCards: AVAILABLE_CARDS,
-    addedComponents: new Set(['whats-new']),
-  },
-};
-
-export const AllAdded: Story = {
-  args: {
-    availableCards: AVAILABLE_CARDS,
-    addedComponents: new Set(AVAILABLE_CARDS.map((c) => c.id)),
-  },
-};

package/projects/ngx/declarative-ui/stories/dashboard.cards.ts

@@ -1,107 +0,0 @@
-import { Favorites } from '../../cards/favorites/favorites.component';
-import { ServiceStatusCard } from '../../cards/service-status/service-status-card.component';
-import { VisitedServiceCard } from '../../cards/visited-service-card/visited-service-card.component';
-import { WhatsNew } from '../../cards/whats-new/whats-new.component';
-import { Dashboard } from '../dashboard/dashboard/dashboard.component';
-import type { CardConfig, SectionConfig } from '../dashboard/models';
-import { TABLE_CARD_CONFIG, TABLE_RESOURCES } from './pods-table.config';
-
-Dashboard.registerAngularComponents([
-  Favorites,
-  VisitedServiceCard,
-  ServiceStatusCard,
-  WhatsNew,
-]);
-
-export const SECTIONS: SectionConfig[] = [
-  { id: 'ras', title: 'Recently accessed services', editable: false, w: 12 },
-];
-
-const RAS_CARD_TEMPLATES = [
-  {
-    serviceType: 'SAP HANA Cloud',
-    serviceName: 'olc-hana-db',
-    serviceIcon: 'database',
-    serviceDescription: 'My Subaccount 1/Space dev',
-    path: '/hana/olc-hana-db',
-  },
-  {
-    serviceType: 'Cloud Identity Service',
-    serviceName: 'Cloud Identity',
-    serviceIcon: 'customer',
-    serviceDescription: 'My Subaccount 1/Space dev',
-    path: '/identity/cloud-identity',
-  },
-  {
-    serviceType: 'SAP HANA Cloud',
-    serviceName: 'olc-hana-db-test',
-    serviceIcon: 'database',
-    serviceDescription: 'My Subaccount 1/Space dev',
-    path: '/hana/olc-hana-db-test',
-  },
-  {
-    serviceType: 'Application Autoscaler',
-    serviceName: 'applicationtest',
-    serviceIcon: 'accelerated',
-    serviceDescription: 'My Subaccount 2/Space prod',
-    path: '/autoscaler/applicationtest',
-  },
-  {
-    serviceType: 'Cloud Identity Service',
-    serviceName: 'Cloud Identity 2',
-    serviceIcon: 'customer',
-    serviceDescription: 'Long text Subaccount 1/Space',
-    path: '/identity/cloud-identity-2',
-  },
-  {
-    serviceType: 'Audit Log Service',
-    serviceName: 'auditlog-name',
-    serviceIcon: 'log',
-    serviceDescription: 'My Subaccount 4/Space dev',
-    path: '/auditlog/auditlog-name',
-  },
-];
-
-export const CARDS: CardConfig[] = [
-  ...RAS_CARD_TEMPLATES.map((t, i) => ({
-    id: `ras-card-${i}`,
-    w: 4,
-    h: 10,
-    sectionId: 'ras',
-    component: 'mfp-visited-service-card',
-    componentInputs: { ...t },
-  })),
-  {
-    id: 'table-pods',
-    w: 12,
-    h: 50,
-    component: 'mfp-wc-declarative-table-card',
-    componentInputs: {
-      config: TABLE_CARD_CONFIG,
-      header: 'Pods',
-      headerTooltip: 'This table lists all pods running in the cluster.',
-      resources: TABLE_RESOURCES,
-    },
-  },
-  {
-    id: 'whats-new',
-    label: "What's New",
-    w: 5,
-    h: 57,
-    component: 'mfp-whats-new',
-  },
-  {
-    id: 'favorites',
-    label: 'Favorites',
-    w: 4,
-    h: 21,
-    component: 'mfp-favorites',
-  },
-  {
-    id: 'service-status',
-    label: 'Service Status',
-    w: 4,
-    h: 30,
-    component: 'mfp-service-status-card',
-  },
-];