@openmfp/webcomponents 0.6.1 → 0.6.7

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

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

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

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

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

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

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

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

@@ -1,33 +0,0 @@
-: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);
-  }
-}