fix(core): adopt latest changes for user menu

Author: InnaAtanasova

libs/core/list/directives/list-title.directive.spec.ts

@@ -1,20 +1,26 @@
 import { Component, ElementRef, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 import { ListModule } from '../list.module';
+import { ListTitleDirective } from './list-title.directive';
 
 @Component({
-    template: ` <li #componentElement fd-list-title>ListTitleComponent</li> `,
+    template: `<li #componentElement fd-list-title [truncate]="isTruncate" [wrap]="isWrap">ListTitleComponent</li>`,
     standalone: true,
     imports: [ListModule]
 })
 class TestComponent {
     @ViewChild('componentElement', { read: ElementRef })
-    ref: ElementRef;
+    ref!: ElementRef;
+
+    isTruncate = false;
+    isWrap = false;
 }
 
-describe('ListTitleComponent', () => {
+describe('ListTitleDirective', () => {
     let component: TestComponent;
     let fixture: ComponentFixture<TestComponent>;
+    let directiveInstance: ListTitleDirective;
 
     beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
@@ -26,13 +32,36 @@ describe('ListTitleComponent', () => {
         fixture = TestBed.createComponent(TestComponent);
         component = fixture.componentInstance;
         fixture.detectChanges();
+
+        const debugElement = fixture.debugElement.query(By.directive(ListTitleDirective));
+        directiveInstance = debugElement.injector.get(ListTitleDirective);
     });
 
     it('should create', () => {
         expect(component).toBeTruthy();
+        expect(directiveInstance).toBeTruthy();
+    });
+
+    it('should assign base class', () => {
+        expect(component.ref.nativeElement.classList).toContain('fd-list__title');
+    });
+
+    it('should not have truncate or wrap classes by default', () => {
+        expect(component.ref.nativeElement.classList).not.toContain('fd-list__title--truncate');
+        expect(component.ref.nativeElement.classList).not.toContain('fd-list__title--wrap');
     });
 
-    it('should assign class', () => {
-        expect(component.ref.nativeElement.className).toBe('fd-list__title');
+    it('should add truncate class when truncate is true (via input binding)', () => {
+        component.isTruncate = true;
+        fixture.detectChanges();
+
+        expect(component.ref.nativeElement.classList).toContain('fd-list__title--truncate');
+    });
+
+    it('should add wrap class when wrap is true (via input binding)', () => {
+        component.isWrap = true;
+        fixture.detectChanges();
+
+        expect(component.ref.nativeElement.classList).toContain('fd-list__title--wrap');
     });
 });

libs/core/list/directives/list-title.directive.ts

@@ -1,18 +1,20 @@
-import { Directive, ElementRef, HostBinding, Input, OnInit } from '@angular/core';
+import { booleanAttribute, Directive, ElementRef, input, OnInit } from '@angular/core';
 
 @Directive({
     selector: '[fd-list-title], [fdListTitle]',
-    standalone: true
+    standalone: true,
+    host: {
+        class: 'fd-list__title',
+        '[class.fd-list__title--truncate]': 'truncate()',
+        '[class.fd-list__title--wrap]': 'wrap()'
+    }
 })
 export class ListTitleDirective implements OnInit {
-    /** @hidden */
-    @HostBinding('class.fd-list__title')
-    fdListTitleClass = true;
-
     /** Whether or not this should be wrapped, when too much text. */
-    @Input()
-    @HostBinding('class.fd-list__title--wrap')
-    wrap = false;
+    wrap = input(false, { transform: booleanAttribute });
+
+    /** Whether the text should truncate with ellipsis. */
+    truncate = input(false, { transform: booleanAttribute });
 
     /** @hidden */
     constructor(public elRef: ElementRef) {}

libs/core/list/directives/subline/list-subline.directive.spec.ts

@@ -1,20 +1,24 @@
 import { Component, ElementRef, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 import { ListSublineDirective } from './list-subline.directive';
 
 @Component({
-    template: ` <li #componentElement fd-list-subline>List Subline Directive Test</li> `,
+    template: `<li #componentElement fd-list-subline [truncate]="isTruncate">List Subline Directive Test</li>`,
     standalone: true,
     imports: [ListSublineDirective]
 })
 class TestComponent {
     @ViewChild('componentElement', { read: ElementRef })
-    ref: ElementRef;
+    ref!: ElementRef;
+
+    isTruncate = false;
 }
 
 describe('ListSublineDirective', () => {
     let component: TestComponent;
     let fixture: ComponentFixture<TestComponent>;
+    let directiveInstance: ListSublineDirective;
 
     beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
@@ -26,13 +30,29 @@ describe('ListSublineDirective', () => {
         fixture = TestBed.createComponent(TestComponent);
         component = fixture.componentInstance;
         fixture.detectChanges();
+
+        // Get the directive instance
+        const debugElement = fixture.debugElement.query(By.directive(ListSublineDirective));
+        directiveInstance = debugElement.injector.get(ListSublineDirective);
     });
 
     it('should create', () => {
         expect(component).toBeTruthy();
+        expect(directiveInstance).toBeTruthy();
+    });
+
+    it('should assign base class', () => {
+        expect(component.ref.nativeElement.classList).toContain('fd-list__subline');
     });
 
-    it('should assign class', () => {
-        expect(component.ref.nativeElement.className).toBe('fd-list__subline');
+    it('should not have truncate class by default', () => {
+        expect(component.ref.nativeElement.classList).not.toContain('fd-list__subline--truncate');
+    });
+
+    it('should add truncate class when truncate is true (via input binding)', () => {
+        component.isTruncate = true;
+        fixture.detectChanges();
+
+        expect(component.ref.nativeElement.classList).toContain('fd-list__subline--truncate');
     });
 });

libs/core/list/directives/subline/list-subline.directive.ts

@@ -1,10 +1,14 @@
-import { Directive } from '@angular/core';
+import { booleanAttribute, Directive, input } from '@angular/core';
 
 @Directive({
     selector: '[fdListSubline], [fd-list-subline]',
     host: {
-        class: 'fd-list__subline'
+        class: 'fd-list__subline',
+        '[class.fd-list__subline--truncate]': 'truncate()'
     },
     standalone: true
 })
-export class ListSublineDirective {}
+export class ListSublineDirective {
+    /** Whether the text should truncate with ellipsis. */
+    truncate = input(false, { transform: booleanAttribute });
+}

libs/core/list/list.component.scss

@@ -19,3 +19,59 @@
 .fd-list.fd-list--selection .fd-radio:focus + .fd-radio__label {
     outline: none;
 }
+
+/*
+ * TO BE REMOVED WITH FUNDAMENTAL STYLES VERSION 0.41.0
+ * ----------------------------------------------------------------------------------------------------
+ */
+
+.fd-list--subline .fd-list__item {
+    height: auto;
+}
+
+.fd-list--subline .fd-list__title {
+    width: 100%;
+    max-width: 100%;
+    font-style: normal;
+    line-height: normal;
+    white-space: normal;
+    font-size: var(--sapFontSize);
+    color: var(--sapList_TextColor);
+    font-family: var(--sapFontSemiboldDuplexFamily);
+}
+
+.fd-list--subline .fd-list__title--truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.fd-list--subline .fd-list__subline {
+    font-size: var(--sapFontSize);
+    line-height: normal;
+    color: var(--sapTextColor);
+    font-family: var(--sapFontFamily);
+    font-weight: normal;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    forced-color-adjust: none;
+    padding-inline: 0;
+    padding-block: 0;
+    margin-inline: 0;
+    margin-block: 0;
+    border: 0;
+    width: 100%;
+    max-width: 100%;
+    font-style: normal;
+    line-height: normal;
+    white-space: normal;
+    font-size: var(--sapFontSize);
+    font-family: var(--sapFontFamily);
+    color: var(--sapContent_LabelColor);
+}
+
+.fd-list--subline .fd-list__subline--truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

libs/core/user-menu/components/user-menu-list-item.component.ts

@@ -144,7 +144,7 @@ export class UserMenuListItemComponent implements KeyboardSupportItemInterface {
         this.isOpenChange.emit(isOpen);
 
         this._onZoneStable().subscribe(() => {
-            this.isOpen() ? linkElement.classList.add('is-active') : linkElement.classList.remove('is-active');
+            this.isOpen() ? linkElement.classList.add('is-selected') : linkElement.classList.remove('is-selected');
             firstTabbableElement.focus();
         });
 

libs/core/user-menu/directives/user-menu-subline.directive.spec.ts

@@ -5,15 +5,18 @@ import { By } from '@angular/platform-browser';
 import { UserMenuSublineDirective } from './user-menu-subline.directive';
 
 @Component({
-    template: `<span fd-user-menu-subline>User Menu Subline Test</span>`,
+    template: `<span fd-user-menu-subline [truncate]="isTruncate">User Menu Subline Test</span>`,
     standalone: true,
     imports: [UserMenuSublineDirective]
 })
-class TestComponent {}
+class TestComponent {
+    isTruncate = false;
+}
 
 describe('UserMenuSublineDirective', () => {
     let fixture: ComponentFixture<TestComponent>;
     let debugElement: DebugElement;
+    let directiveInstance: UserMenuSublineDirective;
 
     beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
@@ -23,17 +26,29 @@ describe('UserMenuSublineDirective', () => {
 
     beforeEach(() => {
         fixture = TestBed.createComponent(TestComponent);
-
         fixture.detectChanges();
 
         debugElement = fixture.debugElement.query(By.directive(UserMenuSublineDirective));
+        directiveInstance = debugElement.injector.get(UserMenuSublineDirective);
     });
 
     it('should create', () => {
         expect(fixture).toBeTruthy();
+        expect(directiveInstance).toBeTruthy();
+    });
+
+    it('should add base class to host', () => {
+        expect(debugElement.nativeElement.classList).toContain('fd-user-menu__subline');
     });
 
-    it('should add class to host', () => {
-        expect(debugElement.nativeElement.className.includes('fd-user-menu__subline')).toBe(true);
+    it('should not have truncate class by default', () => {
+        expect(debugElement.nativeElement.classList).not.toContain('fd-user-menu__subline--truncate');
+    });
+
+    it('should add truncate class when truncate is true (via input binding)', () => {
+        fixture.componentInstance.isTruncate = true;
+        fixture.detectChanges();
+
+        expect(debugElement.nativeElement.classList).toContain('fd-user-menu__subline--truncate');
     });
 });

libs/core/user-menu/directives/user-menu-subline.directive.ts

@@ -1,10 +1,14 @@
-import { Directive } from '@angular/core';
+import { booleanAttribute, Directive, input } from '@angular/core';
 
 @Directive({
     // eslint-disable-next-line @angular-eslint/directive-selector
     selector: '[fd-user-menu-subline]',
     host: {
-        class: 'fd-user-menu__subline'
+        class: 'fd-user-menu__subline',
+        '[class.fd-user-menu__subline--truncate]': 'truncate()'
     }
 })
-export class UserMenuSublineDirective {}
+export class UserMenuSublineDirective {
+    /** Whether the text should truncate with ellipsis. */
+    truncate = input(false, { transform: booleanAttribute });
+}

libs/core/user-menu/directives/user-menu-user-name.directive.spec.ts

@@ -5,15 +5,18 @@ import { By } from '@angular/platform-browser';
 import { UserMenuUserNameDirective } from './user-menu-user-name.directive';
 
 @Component({
-    template: `<span fd-user-menu-user-name>User Menu User Name Test</span>`,
+    template: `<span fd-user-menu-user-name [truncate]="isTruncate">User Menu User Name Test</span>`,
     standalone: true,
     imports: [UserMenuUserNameDirective]
 })
-class TestComponent {}
+class TestComponent {
+    isTruncate = false;
+}
 
 describe('UserMenuUserNameDirective', () => {
     let fixture: ComponentFixture<TestComponent>;
     let debugElement: DebugElement;
+    let directiveInstance: UserMenuUserNameDirective;
 
     beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
@@ -23,17 +26,29 @@ describe('UserMenuUserNameDirective', () => {
 
     beforeEach(() => {
         fixture = TestBed.createComponent(TestComponent);
-
         fixture.detectChanges();
 
         debugElement = fixture.debugElement.query(By.directive(UserMenuUserNameDirective));
+        directiveInstance = debugElement.injector.get(UserMenuUserNameDirective);
     });
 
     it('should create', () => {
         expect(fixture).toBeTruthy();
+        expect(directiveInstance).toBeTruthy();
+    });
+
+    it('should add base class to host', () => {
+        expect(debugElement.nativeElement.classList).toContain('fd-user-menu__user-name');
     });
 
-    it('should add class to host', () => {
-        expect(debugElement.nativeElement.className.includes('fd-user-menu__user-name')).toBe(true);
+    it('should not have truncate class by default', () => {
+        expect(debugElement.nativeElement.classList).not.toContain('fd-user-menu__user-name--truncate');
+    });
+
+    it('should add truncate class when truncate is true (via input binding)', () => {
+        fixture.componentInstance.isTruncate = true;
+        fixture.detectChanges();
+
+        expect(debugElement.nativeElement.classList).toContain('fd-user-menu__user-name--truncate');
     });
 });

libs/core/user-menu/directives/user-menu-user-name.directive.ts

@@ -1,10 +1,14 @@
-import { Directive } from '@angular/core';
+import { booleanAttribute, Directive, input } from '@angular/core';
 
 @Directive({
     // eslint-disable-next-line @angular-eslint/directive-selector
     selector: '[fd-user-menu-user-name]',
     host: {
-        class: 'fd-user-menu__user-name'
+        class: 'fd-user-menu__user-name',
+        '[class.fd-user-menu__user-name--truncate]': 'truncate()'
     }
 })
-export class UserMenuUserNameDirective {}
+export class UserMenuUserNameDirective {
+    /** Whether the text should truncate with ellipsis. */
+    truncate = input(false, { transform: booleanAttribute });
+}