@openmfp/webcomponents 0.6.1

package/projects/ngx/declarative-ui/dashboard/section/dashboard-section.component.scss

@@ -0,0 +1,85 @@
+:host {
+  display: block;
+  min-width: 0;
+}
+
+.section {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid transparent;
+  border-top: none;
+  border-radius: 0 0 0.5rem 0.5rem;
+  padding: 1.25rem 0.75rem 0.75rem;
+
+  &--edit {
+    border-color: var(--sapGroup_ContentBorderColor, #d9d9d9);
+  }
+
+  &__remove {
+    position: absolute;
+    top: -0.75rem;
+    right: -0.75rem;
+    border-radius: 50% !important;
+    width: 1.25rem !important;
+    height: 1.25rem !important;
+    min-width: unset !important;
+    padding: 0 !important;
+    font-size: 0.625rem !important;
+  }
+
+  &__header {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+
+    &::before,
+    &::after {
+      content: '';
+      flex: 1;
+      height: 1px;
+      background: transparent;
+    }
+
+    &::before {
+      max-width: 0.75rem;
+      flex: 0 0 0.75rem;
+    }
+  }
+
+  &--edit &__header {
+    &::before,
+    &::after {
+      background: var(--sapGroup_ContentBorderColor, #d9d9d9);
+    }
+  }
+
+  &__title {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--sapTextColor, #fff);
+    padding: 0 0.5rem;
+    white-space: nowrap;
+    pointer-events: all;
+  }
+
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(var(--cols, 12), 1fr);
+    grid-auto-rows: var(--row-height, 10px);
+    gap: var(--row-gap, 0px);
+
+    @media (max-width: 599px) {
+      grid-template-columns: 1fr;
+    }
+
+    @media (min-width: 600px) and (max-width: 1023px) {
+      grid-template-columns: repeat(8, 1fr);
+    }
+  }
+}

package/projects/ngx/declarative-ui/dashboard/section/dashboard-section.component.spec.ts

@@ -0,0 +1,104 @@
+import { DashboardCard } from '../card/dashboard-card.component';
+import { DashboardSection } from './dashboard-section.component';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+type Fixture = ComponentFixture<DashboardSection>;
+
+function setup(): { fixture: Fixture; component: DashboardSection } {
+  const fixture = TestBed.createComponent(DashboardSection);
+  const component = fixture.componentInstance;
+  return { fixture, component };
+}
+
+function root(fixture: Fixture): ShadowRoot | HTMLElement {
+  return fixture.nativeElement.shadowRoot ?? fixture.nativeElement;
+}
+
+describe('DashboardSection', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DashboardSection],
+    }).compileComponents();
+  });
+
+  it('uses w for grid placement and lets content define the height', () => {
+    const { fixture } = setup();
+
+    fixture.componentRef.setInput('section', {
+      id: 'section-1',
+      title: 'Favorites',
+      w: 8,
+    });
+    fixture.componentRef.setInput('cards', []);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.style.gridColumn).toBe('span 8');
+    expect(fixture.nativeElement.style.gridRow).toBe('');
+    expect(root(fixture).textContent).toContain('Favorites');
+  });
+
+  it('shows a remove button in editable edit mode and emits when clicked', () => {
+    const { fixture, component } = setup();
+    let emitted = 0;
+
+    component.removeSection.subscribe(() => emitted++);
+    fixture.componentRef.setInput('section', {
+      id: 'section-1',
+      title: 'Favorites',
+      editable: true,
+    });
+    fixture.componentRef.setInput('cards', []);
+    fixture.componentRef.setInput('editMode', true);
+    fixture.detectChanges();
+
+    const button = root(fixture).querySelector('.section__remove');
+    button?.dispatchEvent(new Event('click'));
+
+    expect(button).not.toBeNull();
+    expect(emitted).toBe(1);
+  });
+
+  it('disables section edit affordances when the section is marked non-editable', () => {
+    const { fixture } = setup();
+
+    fixture.componentRef.setInput('section', {
+      id: 'section-1',
+      title: 'Favorites',
+      editable: false,
+    });
+    fixture.componentRef.setInput('cards', [
+      { id: 'card-1', component: 'demo-widget' },
+    ]);
+    fixture.componentRef.setInput('editMode', true);
+    fixture.detectChanges();
+
+    const card = fixture.debugElement.query(By.directive(DashboardCard))
+      .componentInstance as DashboardCard;
+
+    expect(root(fixture).querySelector('.section__remove')).toBeNull();
+    expect(card.editMode()).toBe(false);
+  });
+
+  it('emits the card id when a nested card requests removal', () => {
+    const { fixture, component } = setup();
+    const emitted: string[] = [];
+
+    component.removeCard.subscribe((id) => emitted.push(id));
+    fixture.componentRef.setInput('section', {
+      id: 'section-1',
+      editable: true,
+    });
+    fixture.componentRef.setInput('cards', [
+      { id: 'card-1', component: 'demo-widget' },
+    ]);
+    fixture.componentRef.setInput('editMode', true);
+    fixture.detectChanges();
+
+    const card = fixture.debugElement.query(By.directive(DashboardCard))
+      .componentInstance as DashboardCard;
+    card.removeCard.emit();
+
+    expect(emitted).toEqual(['card-1']);
+  });
+});

package/projects/ngx/declarative-ui/dashboard/section/dashboard-section.component.ts

@@ -0,0 +1,23 @@
+import { DashboardCard } from '../card/dashboard-card.component';
+import { CardConfig, SectionConfig } from '../models';
+import { Component, ViewEncapsulation, input, output } from '@angular/core';
+import { Button } from '@fundamental-ngx/ui5-webcomponents/button';
+
+@Component({
+  selector: 'mfp-dashboard-section',
+  imports: [DashboardCard, Button],
+  templateUrl: './dashboard-section.component.html',
+  styleUrl: './dashboard-section.component.scss',
+  encapsulation: ViewEncapsulation.Emulated,
+  host: {
+    '[style.grid-column]': '"span " + (section().w ?? 12)',
+  },
+})
+export class DashboardSection {
+  section = input.required<SectionConfig>();
+  cards = input<CardConfig[]>([]);
+  columns = input<number>(12);
+  editMode = input<boolean>(false);
+  readonly removeSection = output<void>();
+  readonly removeCard = output<string>();
+}

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

@@ -0,0 +1,62 @@
+<section test-id="generic-form" class="form" [formGroup]="form">
+  @for (field of fields(); track field.name) {
+    @let control = form.controls[field.name];
+    <div
+      class="inputs"
+      [attr.test-id]="'generic-form-field-container-' + field.name"
+    >
+      <ui5-label
+        [attr.test-id]="'generic-form-field-label-' + field.name"
+        show-colon
+        [required]="field.required"
+        >{{ field.label }}</ui5-label
+      >
+      @if (field.values?.length) {
+        <ui5-select
+          class="input"
+          [attr.test-id]="'generic-form-field-' + field.name"
+          [value]="control.value"
+          (input)="setFormControlValue($event, field)"
+          (change)="setFormControlValue($event, field)"
+          (blur)="onFieldBlur(field)"
+          [required]="field.required"
+          [valueState]="getValueState(field.name)"
+          [disabled]="field.disabled"
+        >
+          @if (getError(field.name); as error) {
+            <div slot="valueStateMessage">{{ error }}</div>
+          }
+          @for (value of [''].concat(field.values ?? []); track value) {
+            <ui5-option
+              [attr.test-id]="
+                'generic-form-field-' +
+                field.name +
+                '-option-' +
+                (value || 'empty')
+              "
+              [value]="value"
+              [selected]="value === control.value"
+              >{{ value }}</ui5-option
+            >
+          }
+        </ui5-select>
+      } @else {
+        <ui5-input
+          class="input"
+          [attr.test-id]="'generic-form-field-' + field.name"
+          [value]="control.value"
+          (blur)="onFieldBlur(field)"
+          (change)="setFormControlValue($event, field)"
+          (input)="setFormControlValue($event, field)"
+          [required]="field.required"
+          [valueState]="getValueState(field.name)"
+          [disabled]="field.disabled"
+        >
+          @if (getError(field.name); as error) {
+            <div slot="valueStateMessage">{{ error }}</div>
+          }
+        </ui5-input>
+      }
+    </div>
+  }
+</section>

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

@@ -0,0 +1,12 @@
+.form > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  align-items: flex-start;
+  margin-bottom: 0.5rem;
+  width: 100%;
+}
+
+.input {
+  width: 100%;
+}

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

@@ -0,0 +1,301 @@
+import { FormFieldChangeEvent, FormFieldDefinition } from '../models';
+import { DeclarativeForm } from './declarative-form.component';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+
+describe('DeclarativeForm', () => {
+  let component: DeclarativeForm;
+  let fixture: ComponentFixture<DeclarativeForm>;
+
+  const testFields: FormFieldDefinition[] = [
+    { name: 'metadata.name', label: 'Name', required: true, validation: 'onChange' },
+    { name: 'metadata.namespace', label: 'Namespace', required: false, validation: 'onBlur' },
+    { name: 'metadata.labels', label: 'Labels' },
+  ];
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ReactiveFormsModule, DeclarativeForm],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DeclarativeForm);
+    component = fixture.componentInstance;
+    fixture.componentRef.setInput('fields', testFields);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('form initialization', () => {
+    it('should create controls for each field', () => {
+      expect(component.form.controls['metadata.name']).toBeDefined();
+      expect(component.form.controls['metadata.namespace']).toBeDefined();
+      expect(component.form.controls['metadata.labels']).toBeDefined();
+    });
+
+    it('should not register validators for required fields', () => {
+      const ctrl = component.form.controls['metadata.name'];
+
+      ctrl.setValue('');
+
+      expect(ctrl.validator).toBeNull();
+      expect(ctrl.valid).toBe(true);
+    });
+
+    it('should pre-populate controls from initialValues without marking dirty', () => {
+      fixture.componentRef.setInput('initialValues', {
+        'metadata.name': 'my-resource',
+        'metadata.namespace': 'default',
+      });
+
+      fixture.detectChanges();
+
+      expect(component.form.controls['metadata.name'].value).toBe(
+        'my-resource',
+      );
+      expect(component.form.controls['metadata.namespace'].value).toBe(
+        'default',
+      );
+      expect(component.form.controls['metadata.name'].dirty).toBe(false);
+      expect(component.getValueState('metadata.name')).toBe('None');
+    });
+
+    it('should default missing initialValues keys to empty string', () => {
+      fixture.componentRef.setInput('initialValues', {});
+      expect(component.form.controls['metadata.name'].value).toBe('');
+    });
+
+    it('should render a select when field.values are provided', () => {
+      fixture.componentRef.setInput('fields', [
+        {
+          name: 'metadata.namespace',
+          label: 'Namespace',
+          values: ['default', 'kube-system'],
+        },
+      ]);
+
+      fixture.detectChanges();
+
+      const shadowRoot = fixture.nativeElement.shadowRoot as ShadowRoot;
+      const fieldElement = shadowRoot.querySelector(
+        '[test-id="generic-form-field-metadata.namespace"]',
+      );
+
+      expect(fieldElement?.tagName.toLowerCase()).toBe('ui5-select');
+    });
+
+    it('should render an input when field.values are not provided', () => {
+      fixture.componentRef.setInput('fields', [
+        {
+          name: 'metadata.namespace',
+          label: 'Namespace',
+        },
+      ]);
+
+      fixture.detectChanges();
+
+      const shadowRoot = fixture.nativeElement.shadowRoot as ShadowRoot;
+      const fieldElement = shadowRoot.querySelector(
+        '[test-id="generic-form-field-metadata.namespace"]',
+      );
+
+      expect(fieldElement?.tagName.toLowerCase()).toBe('ui5-input');
+    });
+  });
+
+  describe('fieldChange output', () => {
+    it('should emit on value change for validation: onChange field', () => {
+      const emitted: FormFieldChangeEvent[] = [];
+      component.fieldChange.subscribe((event) => emitted.push(event));
+
+      const onChangeField = testFields.find((f) => f.name === 'metadata.name')!;
+      component.setFormControlValue(
+        { target: { value: 'new-value' } } as unknown as Event,
+        onChangeField,
+      );
+
+      expect(emitted).toEqual([
+        { fieldProperty: 'metadata.name', value: 'new-value' },
+      ]);
+    });
+
+    it('should not emit on blur for validation: onChange field', () => {
+      const emitted: FormFieldChangeEvent[] = [];
+      component.fieldChange.subscribe((event) => emitted.push(event));
+
+      const onChangeField = testFields.find((f) => f.name === 'metadata.name')!;
+      component.onFieldBlur(onChangeField);
+
+      expect(emitted).toEqual([]);
+    });
+
+    it('should emit on blur for validation: onBlur field', () => {
+      const emitted: FormFieldChangeEvent[] = [];
+      component.fieldChange.subscribe((event) => emitted.push(event));
+
+      const onBlurField = testFields.find((f) => f.name === 'metadata.namespace')!;
+      component.setFormControlValue(
+        { target: { value: 'kube-system' } } as unknown as Event,
+        onBlurField,
+      );
+
+      expect(emitted).toEqual([]);
+
+      component.onFieldBlur(onBlurField);
+
+      expect(emitted).toEqual([
+        { fieldProperty: 'metadata.namespace', value: 'kube-system' },
+      ]);
+    });
+
+    it('should not emit on value change for validation: onBlur field', () => {
+      const emitted: FormFieldChangeEvent[] = [];
+      component.fieldChange.subscribe((event) => emitted.push(event));
+
+      const onBlurField = testFields.find((f) => f.name === 'metadata.namespace')!;
+      component.setFormControlValue(
+        { target: { value: 'kube-system' } } as unknown as Event,
+        onBlurField,
+      );
+
+      expect(emitted).toEqual([]);
+    });
+
+    it('should not emit on change or blur for field without validation', () => {
+      const emitted: FormFieldChangeEvent[] = [];
+      component.fieldChange.subscribe((event) => emitted.push(event));
+
+      const noValidationField = testFields.find((f) => f.name === 'metadata.labels')!;
+      component.setFormControlValue(
+        { target: { value: 'some-label' } } as unknown as Event,
+        noValidationField,
+      );
+      component.onFieldBlur(noValidationField);
+
+      expect(emitted).toEqual([]);
+    });
+
+    it('should emit fieldChange for validated fields when initialValues change', () => {
+      const emitted: FormFieldChangeEvent[] = [];
+      component.fieldChange.subscribe((event) => emitted.push(event));
+
+      fixture.componentRef.setInput('initialValues', {
+        'metadata.name': 'my-resource',
+        'metadata.namespace': 'ns-value',
+      });
+      fixture.detectChanges();
+
+      expect(emitted).toEqual(
+        expect.arrayContaining([
+          { fieldProperty: 'metadata.name', value: 'my-resource' },
+          { fieldProperty: 'metadata.namespace', value: 'ns-value' },
+        ]),
+      );
+      expect(
+        emitted.find((e) => e.fieldProperty === 'metadata.labels'),
+      ).toBeUndefined();
+    });
+  });
+
+  describe('initial emission', () => {
+    it('should emit fieldChange for fields with validation on init', () => {
+      const localFixture = TestBed.createComponent(DeclarativeForm);
+      const localComponent = localFixture.componentInstance;
+
+      const emitted: FormFieldChangeEvent[] = [];
+      localComponent.fieldChange.subscribe((event) => emitted.push(event));
+
+      localFixture.componentRef.setInput('fields', testFields);
+      localFixture.detectChanges();
+
+      expect(emitted).toEqual(
+        expect.arrayContaining([
+          { fieldProperty: 'metadata.name', value: '' },
+          { fieldProperty: 'metadata.namespace', value: '' },
+        ]),
+      );
+    });
+
+    it('should not emit fieldChange for fields without validation on init', () => {
+      const localFixture = TestBed.createComponent(DeclarativeForm);
+      const localComponent = localFixture.componentInstance;
+
+      const emitted: FormFieldChangeEvent[] = [];
+      localComponent.fieldChange.subscribe((event) => emitted.push(event));
+
+      localFixture.componentRef.setInput('fields', testFields);
+      localFixture.detectChanges();
+
+      expect(
+        emitted.find((e) => e.fieldProperty === 'metadata.labels'),
+      ).toBeUndefined();
+    });
+  });
+
+  describe('field errors', () => {
+    it('should show no error for a pristine field', () => {
+      fixture.componentRef.setInput('fieldErrors', {
+        'metadata.name': 'Name is required',
+      });
+      fixture.detectChanges();
+
+      expect(component.getValueState('metadata.name')).toBe('None');
+    });
+
+    it('should show error for a dirty field with an error string', () => {
+      fixture.componentRef.setInput('fieldErrors', {
+        'metadata.name': 'Name is required',
+      });
+
+      const onChangeField = testFields.find((f) => f.name === 'metadata.name')!;
+      component.setFormControlValue(
+        { target: { value: '' } } as unknown as Event,
+        onChangeField,
+      );
+      fixture.detectChanges();
+
+      const shadowRoot = fixture.nativeElement.shadowRoot as ShadowRoot;
+      const message = shadowRoot.querySelector('[slot="valueStateMessage"]');
+
+      expect(component.getValueState('metadata.name')).toBe('Negative');
+      expect(message?.textContent?.trim()).toBe('Name is required');
+    });
+
+    it('should show error for a touched field', () => {
+      fixture.componentRef.setInput('fieldErrors', {
+        'metadata.name': 'Name is required',
+      });
+      fixture.detectChanges();
+
+      const control = component.form.controls['metadata.name'];
+      control.markAsTouched();
+
+      expect(component.getValueState('metadata.name')).toBe('Negative');
+    });
+  });
+
+  describe('submit output', () => {
+    it('should emit nested object built from dotted field names', () => {
+      const emitted: Record<string, unknown>[] = [];
+      component.formSubmit.subscribe((value) => emitted.push(value));
+
+      component.form.controls['metadata.name'].setValue('my-app');
+      component.form.controls['metadata.namespace'].setValue('default');
+      component.form.controls['metadata.labels'].setValue('app=my-app');
+
+      component.submit();
+
+      expect(emitted).toEqual([
+        {
+          metadata: {
+            name: 'my-app',
+            namespace: 'default',
+            labels: 'app=my-app',
+          },
+        },
+      ]);
+    });
+  });
+});