@openmfp/webcomponents 0.6.1

package/projects/ngx/declarative-ui/table/value-cell/link-value/link-value.component.spec.ts

@@ -0,0 +1,114 @@
+import { LinkValue } from './link-value.component';
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+describe('LinkValueComponent', () => {
+  let component: LinkValue;
+  let fixture: ComponentFixture<LinkValue>;
+
+  const makeComponent = (urlValue: string) => {
+    fixture = TestBed.createComponent(LinkValue);
+    component = fixture.componentInstance;
+
+    fixture.componentRef.setInput('urlValue', urlValue);
+
+    fixture.detectChanges();
+
+    return { component, fixture };
+  };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [LinkValue],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
+    });
+  });
+
+  it('should create', () => {
+    const { component } = makeComponent('https://example.com');
+    expect(component).toBeTruthy();
+  });
+
+  it('should render ui5-link', () => {
+    const { fixture } = makeComponent('https://example.com');
+    const compiled = fixture.nativeElement;
+    const linkElement = compiled.querySelector('ui5-link');
+
+    expect(linkElement).toBeTruthy();
+    expect(linkElement.textContent.trim()).toBe('Link');
+  });
+
+  it('should render ui5-link with different URL', () => {
+    const { fixture } = makeComponent('http://test.com');
+    const compiled = fixture.nativeElement;
+    const linkElement = compiled.querySelector('ui5-link');
+
+    expect(linkElement).toBeTruthy();
+  });
+
+  it('should call stopPropagation when link is clicked', () => {
+    const { component } = makeComponent('https://example.com');
+
+    const mockEvent = {
+      stopPropagation: vi.fn(),
+    } as unknown as Event;
+
+    component.stopPropagation(mockEvent);
+
+    expect(mockEvent.stopPropagation).toHaveBeenCalled();
+  });
+
+  it('should update when urlValue changes', () => {
+    const { fixture } = makeComponent('https://example.com');
+    const compiled = fixture.nativeElement;
+    let linkElement = compiled.querySelector('ui5-link');
+
+    expect(linkElement).toBeTruthy();
+
+    fixture.componentRef.setInput('urlValue', 'https://newurl.com');
+    fixture.detectChanges();
+
+    linkElement = compiled.querySelector('ui5-link');
+    expect(linkElement).toBeTruthy();
+  });
+
+  it('should have required urlValue input', () => {
+    const { component } = makeComponent('https://example.com');
+    expect(component.urlValue()).toBe('https://example.com');
+  });
+
+  it('should handle complex URLs with paths and parameters', () => {
+    const complexUrl = 'https://example.com/path?param=value&other=123';
+    const { fixture } = makeComponent(complexUrl);
+    const compiled = fixture.nativeElement;
+    const linkElement = compiled.querySelector('ui5-link');
+
+    expect(linkElement).toBeTruthy();
+  });
+
+  it('should handle URLs with fragments', () => {
+    const urlWithFragment = 'https://example.com/page#section';
+    const { fixture } = makeComponent(urlWithFragment);
+    const compiled = fixture.nativeElement;
+    const linkElement = compiled.querySelector('ui5-link');
+
+    expect(linkElement).toBeTruthy();
+  });
+
+  it('should have default testId', () => {
+    const { component } = makeComponent('https://example.com');
+    expect(component.testId()).toBe('link-value-link');
+  });
+
+  it('should accept custom testId', () => {
+    fixture = TestBed.createComponent(LinkValue);
+    component = fixture.componentInstance;
+
+    fixture.componentRef.setInput('urlValue', 'https://example.com');
+    fixture.componentRef.setInput('testId', 'custom-link-test-id');
+
+    fixture.detectChanges();
+
+    expect(component.testId()).toBe('custom-link-test-id');
+  });
+});

package/projects/ngx/declarative-ui/table/value-cell/link-value/link-value.component.ts

@@ -0,0 +1,19 @@
+import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { Link } from '@fundamental-ngx/ui5-webcomponents/link';
+
+@Component({
+  selector: 'mfp-link-value',
+  imports: [Link],
+  templateUrl: './link-value.component.html',
+  styleUrl: './link-value.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class LinkValue {
+  urlValue = input.required<string>();
+  testId = input<string>('link-value-link');
+
+  public stopPropagation(event: Event) {
+    event.stopPropagation();
+  }
+}

package/projects/ngx/declarative-ui/table/value-cell/secret-value/secret-value.component.html

@@ -0,0 +1,7 @@
+<span class="secret-value" [attr.test-id]="testId()" [class.masked]="!isVisible()">
+  @if (isVisible()) {
+    {{ value() }}
+  } @else {
+    {{ maskedValue() }}
+  }
+</span>

package/projects/ngx/declarative-ui/table/value-cell/secret-value/secret-value.component.scss

@@ -0,0 +1,10 @@
+.secret-value {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.masked {
+  transform: translateY(0.2em);
+  display: flex;
+}

package/projects/ngx/declarative-ui/table/value-cell/secret-value/secret-value.component.spec.ts

@@ -0,0 +1,188 @@
+import { SecretValue } from './secret-value.component';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+describe('SecretValueComponent', () => {
+  let component: SecretValue;
+  let fixture: ComponentFixture<SecretValue>;
+
+  const makeComponent = (value: string) => {
+    fixture = TestBed.createComponent(SecretValue);
+    component = fixture.componentInstance;
+
+    fixture.componentRef.setInput('value', value);
+
+    fixture.detectChanges();
+
+    return { component, fixture };
+  };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [SecretValue],
+      schemas: [],
+    });
+  });
+
+  it('should create', () => {
+    const { component } = makeComponent('test-secret');
+    expect(component).toBeTruthy();
+  });
+
+  it('should initialize with isVisible as false', () => {
+    const { component } = makeComponent('test-secret');
+    expect(component.isVisible()).toBe(false);
+  });
+
+  it('should mask value with asterisks', () => {
+    const { component, fixture } = makeComponent('my-secret-password');
+    const compiled = fixture.nativeElement;
+
+    expect(component.maskedValue()).toBe(
+      '*'.repeat('my-secret-password'.length),
+    );
+    expect(compiled.querySelector('.secret-value')?.textContent?.trim()).toBe(
+      '*'.repeat('my-secret-password'.length),
+    );
+  });
+
+  it('should mask empty string with default 8 asterisks', () => {
+    const { component, fixture } = makeComponent('');
+    const compiled = fixture.nativeElement;
+
+    expect(component.maskedValue()).toBe('*'.repeat(8));
+    expect(compiled.querySelector('.secret-value')?.textContent?.trim()).toBe(
+      '*'.repeat(8),
+    );
+  });
+
+  it('should mask short value correctly', () => {
+    const { component, fixture } = makeComponent('abc');
+    const compiled = fixture.nativeElement;
+
+    expect(component.maskedValue()).toBe('***');
+    expect(compiled.querySelector('.secret-value')?.textContent?.trim()).toBe(
+      '***',
+    );
+  });
+
+  it('should mask long value correctly', () => {
+    const longValue = 'a'.repeat(100);
+    const { component, fixture } = makeComponent(longValue);
+    const compiled = fixture.nativeElement;
+
+    expect(component.maskedValue()).toBe('*'.repeat(100));
+    expect(compiled.querySelector('.secret-value')?.textContent?.trim()).toBe(
+      '*'.repeat(100),
+    );
+  });
+
+  it('should display masked value by default', () => {
+    const { fixture } = makeComponent('secret-value');
+    const compiled = fixture.nativeElement;
+
+    const secretSpan = compiled.querySelector('.secret-value');
+
+    expect(secretSpan).toBeTruthy();
+    expect(secretSpan?.classList.contains('masked')).toBe(true);
+    expect(secretSpan?.textContent?.trim()).toBe(
+      '*'.repeat('secret-value'.length),
+    );
+  });
+
+  it('should display original value when isVisible is true', () => {
+    const { fixture } = makeComponent('secret-value');
+
+    fixture.componentRef.setInput('isVisible', true);
+    fixture.detectChanges();
+
+    const compiled = fixture.nativeElement;
+    const secretSpan = compiled.querySelector('.secret-value');
+
+    expect(secretSpan).toBeTruthy();
+    expect(secretSpan?.classList.contains('masked')).toBe(false);
+    expect(secretSpan?.textContent?.trim()).toBe('secret-value');
+  });
+
+  it('should switch from masked to original when isVisible changes', () => {
+    const { component, fixture } = makeComponent('secret-value');
+    const compiled = fixture.nativeElement;
+    const secretSpan = compiled.querySelector('.secret-value');
+
+    expect(component.isVisible()).toBe(false);
+    expect(secretSpan?.classList.contains('masked')).toBe(true);
+    expect(secretSpan?.textContent?.trim()).toBe(
+      '*'.repeat('secret-value'.length),
+    );
+
+    fixture.componentRef.setInput('isVisible', true);
+    fixture.detectChanges();
+
+    expect(component.isVisible()).toBe(true);
+    expect(secretSpan?.classList.contains('masked')).toBe(false);
+    expect(secretSpan?.textContent?.trim()).toBe('secret-value');
+  });
+
+  it('should switch back to masked when isVisible changes to false', () => {
+    const { component, fixture } = makeComponent('secret-value');
+
+    fixture.componentRef.setInput('isVisible', true);
+    fixture.detectChanges();
+    expect(component.isVisible()).toBe(true);
+
+    fixture.componentRef.setInput('isVisible', false);
+    fixture.detectChanges();
+
+    const compiled = fixture.nativeElement;
+    const secretSpan = compiled.querySelector('.secret-value');
+
+    expect(component.isVisible()).toBe(false);
+    expect(secretSpan?.classList.contains('masked')).toBe(true);
+    expect(secretSpan?.textContent?.trim()).toBe(
+      '*'.repeat('secret-value'.length),
+    );
+  });
+
+  it('should update masked value when input changes', () => {
+    const { component, fixture } = makeComponent('initial');
+    expect(component.maskedValue()).toBe('*'.repeat('initial'.length));
+
+    fixture.componentRef.setInput('value', 'updated-secret');
+    fixture.detectChanges();
+
+    expect(component.maskedValue()).toBe('*'.repeat('updated-secret'.length));
+  });
+
+  it('should maintain visibility state when input changes', () => {
+    const { component, fixture } = makeComponent('initial');
+
+    fixture.componentRef.setInput('isVisible', true);
+    fixture.detectChanges();
+
+    expect(component.isVisible()).toBe(true);
+
+    fixture.componentRef.setInput('value', 'updated-secret');
+    fixture.detectChanges();
+
+    expect(component.isVisible()).toBe(true);
+    const compiled = fixture.nativeElement;
+    const secretSpan = compiled.querySelector('.secret-value');
+    expect(secretSpan?.textContent?.trim()).toBe('updated-secret');
+  });
+
+  it('should have default testId', () => {
+    const { component } = makeComponent('test-secret');
+    expect(component.testId()).toBe('secret-value');
+  });
+
+  it('should accept custom testId', () => {
+    fixture = TestBed.createComponent(SecretValue);
+    component = fixture.componentInstance;
+
+    fixture.componentRef.setInput('value', 'test-secret');
+    fixture.componentRef.setInput('testId', 'custom-secret-test-id');
+
+    fixture.detectChanges();
+
+    expect(component.testId()).toBe('custom-secret-test-id');
+  });
+});

package/projects/ngx/declarative-ui/table/value-cell/secret-value/secret-value.component.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+@Component({
+  selector: 'mfp-secret-value',
+  imports: [],
+  templateUrl: './secret-value.component.html',
+  styleUrl: './secret-value.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  schemas: []
+})
+export class SecretValue {
+  value = input.required<string>();
+  isVisible = input<boolean>(false);
+  testId = input<string>('secret-value');
+  maskedValue = computed(() => '*'.repeat(this.value().length || 8));
+}

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

@@ -0,0 +1,59 @@
+@let displayType = displayAs();
+<span [attr.test-id]="testId()" [class.label-value]="labelDisplay()" [style]="cssStyles()">
+  @if (displayType === 'secret') {
+    <span class="secret-value-container">
+      <mfp-secret-value [isVisible]="isVisible()" [testId]="testId() + '-secret'" [value]="value()" />
+      <ui5-icon
+        class="toggle-icon"
+        [attr.test-id]="testId() + '-secret-toggle'"
+        [name]="isVisible() ? 'hide' : 'show'"
+        (click)="toggleVisibility($event)"
+      />
+    </span>
+  } @else if (displayType === 'boolIcon' && isBoolLike()) {
+    <mfp-boolean-value [boolValue]="boolValue()!" [testId]="testId() + '-boolean'" />
+  } @else if (displayType === 'link' && isUrlValue()) {
+    <mfp-link-value [testId]="testId() + '-link'" [urlValue]="stringValue()!" />
+  } @else if (displayType === 'tooltip') {
+    <ui5-icon
+      [accessibleName]="stringValue()!"
+      [attr.test-id]="testId() + '-tooltip'"
+      [name]="tooltipIcon() ?? 'hint'"
+      [showTooltip]="true"
+    />
+  } @else if (displayType === 'alert') {
+    @if (!value()) {
+      <ui5-icon
+        design="Critical"
+        name="alert"
+        [accessibleName]="resource()?.accessibleName ?? ''"
+        [attr.test-id]="testId() + '-icon'"
+        [showTooltip]="true"
+        (click)="$event.stopPropagation()"
+      />
+    }
+  } @else if (displayType === 'img' && value()) {
+    <img alt="Resource image" class="image-cell" [src]="value()" />
+  } @else if (displayType === 'button') {
+    @let buttonSettings = uiSettings()?.buttonSettings;
+    <ui5-button
+      [design]="buttonSettings?.design"
+      [endIcon]="buttonSettings?.endIcon"
+      [icon]="buttonSettings?.icon"
+      [tooltip]="buttonSettings?.tooltip"
+      (click)="buttonClicked($event)"
+      >{{ buttonSettings?.text }}</ui5-button
+    >&nbsp;
+  } @else {
+    {{ value() }}
+  }
+</span>
+
+@if (withCopyButton()) {
+  <ui5-icon
+    class="toggle-icon"
+    name="copy"
+    [attr.test-id]="testId() + '-copy'"
+    (click)="copyValue($event)"
+  />
+}

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

@@ -0,0 +1,33 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+}
+
+.label-value {
+  background-color: #01B4FF;
+  color: #ffffff;
+  border-radius: 1.4rem;
+  padding-inline: 0.4375rem;
+  letter-spacing: -0.00875rem;
+  display: inline-block;
+  border: 0;
+  font-size: 0.875rem;
+  line-height: 1.4rem;
+  margin: 3px 3px;
+}
+
+.secret-value-container {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.toggle-icon {
+  cursor: pointer;
+  transition: color 0.2s ease;
+  padding: 0.25rem;
+
+  &:hover {
+    color: var(--sapButton_Hover_TextColor, #0854a0);
+  }
+}