@openmfp/webcomponents 0.6.1 → 0.6.7

package/projects/ngx/declarative-ui/dashboard/models/dashboard.model.ts

@@ -1,50 +0,0 @@
-import { ButtonSettings } from '../../models/ui-definition';
-
-
-
-
-export const CARD_TYPES = {
-  WC: 'wc',
-  ANGULAR: 'angular',
-  SAP_UI: 'sap-ui',
-} as const;
-
-export type CardsType = (typeof CARD_TYPES)[keyof typeof CARD_TYPES];
-
-export interface CardConfig {
-  id: string;
-  w?: number;
-  h?: number;
-  x?: number;
-  y?: number;
-  maxH?: number;
-  maxW?: number;
-  minH?: number;
-  minW?: number;
-  sectionId?: string;
-  component: string;
-  type?: CardsType;
-  componentInputs?: Record<string, unknown>;
-  label?: string;
-}
-
-export interface SectionConfig {
-  id: string;
-  w?: number;
-  title?: string;
-  editable?: boolean;
-}
-
-export interface DashboardButtonsSettings {
-  editViewButton?: Partial<ButtonSettings>;
-  addCardButton?: Partial<ButtonSettings>;
-}
-
-export interface DashboardConfig {
-  title: string;
-  description?: string;
-  backgroundImageUrl?: string;
-  buttonsSettings?: DashboardButtonsSettings;
-  customActions?: ButtonSettings[];
-  editable?: boolean;
-}

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

@@ -1 +0,0 @@
-export * from './dashboard.model';

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

@@ -1,28 +0,0 @@
-<div
-  class="section"
-  [class.section--edit]="editMode() && section().editable !== false"
->
-  @if (editMode() && section().editable !== false) {
-    <ui5-button
-      class="section__remove"
-      design="Default"
-      icon="decline"
-      (click)="removeSection.emit()"
-    >
-    </ui5-button>
-  }
-  @if (section().title) {
-    <div class="section__header">
-      <span class="section__title">{{ section().title }}</span>
-    </div>
-  }
-  <div class="section__grid" [style.--cols]="columns()">
-    @for (card of cards(); track card.id) {
-      <mfp-dashboard-card
-        [card]="card"
-        [editMode]="editMode() && section().editable !== false"
-        (removeCard)="removeCard.emit($any(card.id))"
-      />
-    }
-  </div>
-</div>

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

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

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

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

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

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

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