feat(core,platform,cx): horizon 2023 update (#10276)

* chore: adopted radio button changes (#9950) * chore(core): removed todo for popover body after fd-styles update * fix(core,platform): removed some todos * feat(core): list horizon update. added secondary list item type support (#9992) * chore: latest fd-styles rc update * chore: adopted radio button changes (#9950) * chore(deps): update to the latest fd-styles release * chore(core): removed todo for popover body after fd-styles update * feat(core): added list secondary item types * fix(e2e): fixed e2e test for list byline * chore: added examples for secondary types * chore: got rid of unused variables * chore(core): updated card to latest styles modifications * feat(core): message strip horizon (#10067) * feat(core,docs): added message strip indication color and custom icon support * feat(docs): added message strip custom icon small example * fix(docs): fixed documentation missing files * fix(e2e,docs): moved custom icon example to separate example file * feat(core): added wrapping to the checkbox label (#10091) * feat(core): added wrapping to the checkbox label * chore(core): fixed jsdocs * fix(e2e): fixed e2e tests for checkbox * feat(core): busy indicator horizon (#10066) * feat(core): busy indicator standalone migration * feat(core): link standalone migration * feat: i18n module standalone migration * feat(core): text component standalone migration * feat(cdk): added auto dynamic portal type * feat(core,docs): added example of extended loading configuration of the dialog * fix(core): fixed object identifier test * fix(core): fixed vertical navigation tests * chore(core): pr feedback * feat(core,platform): slider horizon update (#10125) * feat(core,platform): slider horizon update * feat(core,platform): standalone slider component * chore: updated deps * chore: removed DestroyService usages and replaced it with built-in functionality * chore: updated deps * feat(platform): slider jest migration * feat(core): shellbar horizon update (#10275) * feat(core): shellbar horizon update * fix(core): fix unit tests * feat(core): horizon carousel update (#10274) * feat(core,platform): checkbox horizon update (#10315) * feat(core,platform): checkbox horizon update * fix(core): fix unit tests * fix(cdk): resolve conflicts after rebase * chore: adjust commitlint max symbols * fix(e2e): try to fix failing e2e test * feat(core): toolbar horizon update (#10314) * feat(core): toolbar horizon update * fix(core): fix unit tests * fix(core): pr comments * feat(platform): message popover horizon update (#10317) * feat(platform): message popover horizon update * fix(platform): correct button state * feat: fd-title standalone migration * feat: fd-popover standalone migration * fix: fixed deleted symbol usage * chore: nx format write * fix(e2e): skip false negative tests BREAKING CHANGE: Vertical carousel markup change: Previously navigation buttons had icons `sap-icon--slim-arrow-left` and `sap-icon--slim-arrow-left` ignoring the direction. Now if vertical navigation is applied, buttons will have icons `sap-icon--slim-arrow-up` and `sap-icon--slim-arrow-down` respectively. Toolbar markup change: Removed inner `<div class="fd-toolbar">...</div>`. Now classes and other attributes applied to the root `fd-toolbar` element. Radio button: Projected content now wrapped with `<span class="fd-radio__text">` --------- Co-authored-by: Giorgi Cheishvili <[email protected]> Co-authored-by: Mike O'Donnell <[email protected]>
SAP · Aug 22, 2023 · dfab60d · dfab60d
1 parent f86ded2
commit dfab60d
Show file tree

Hide file tree

Showing 176 changed files with 1,921 additions and 687 deletions.
diff --git a/commitlint.config.js b/commitlint.config.js
@@ -6,9 +6,9 @@ const Configuration = {
             'always',
             ['core', 'platform', 'docs', 'e2e', 'release', 'deps', 'deps-dev', 'changelog', 'ci', 'cx', 'cdk', 'shared']
         ],
-        'body-max-line-length': [2, 'always', 200],
-        'footer-max-line-length': [2, 'always', 200],
-        'header-max-length': [2, 'always', 200]
+        'body-max-line-length': [2, 'always', 400],
+        'footer-max-line-length': [2, 'always', 400],
+        'header-max-length': [2, 'always', 400]
     }
 };
 

diff --git a/libs/cdk/src/lib/utils/components/dynamic-portal/dynamic-portal.component.ts b/libs/cdk/src/lib/utils/components/dynamic-portal/dynamic-portal.component.ts
@@ -1,15 +1,30 @@
 import {
+    AfterViewInit,
     Component,
+    ComponentRef,
+    DestroyRef,
     ElementRef,
+    EmbeddedViewRef,
+    EventEmitter,
     inject,
     Input,
-    OnChanges,
-    SimpleChanges,
+    Output,
+    Renderer2,
     TemplateRef,
+    ViewChild,
     ViewContainerRef
 } from '@angular/core';
-import { ComponentPortal, ComponentType, DomPortal, Portal, PortalModule, TemplatePortal } from '@angular/cdk/portal';
+import {
+    CdkPortalOutlet,
+    ComponentPortal,
+    ComponentType,
+    DomPortal,
+    PortalModule,
+    TemplatePortal
+} from '@angular/cdk/portal';
 import { coerceElement } from '@angular/cdk/coercion';
+import { BehaviorSubject, filter, map, tap } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 /**
  * A component that can be used to attach a portal to a DOM element, without explicitly creating portal instances on place.
@@ -20,35 +35,88 @@ import { coerceElement } from '@angular/cdk/coercion';
     selector: 'fdk-dynamic-portal',
     standalone: true,
     imports: [PortalModule],
-    template: ` <ng-template [cdkPortalOutlet]="portal"></ng-template>`
+    template: ` <ng-template cdkPortalOutlet></ng-template>`
 })
-export class DynamicPortalComponent implements OnChanges {
+export class DynamicPortalComponent implements AfterViewInit {
     /** The DOM element to attach */
-    @Input() domElement: HTMLElement | ElementRef<HTMLElement>;
+    @Input()
+    set domElement(value: HTMLElement | ElementRef<HTMLElement> | string) {
+        this.portalContent$.next(value);
+    }
 
     /** The component to attach */
     @Input()
-    component: ComponentType<any>;
+    set component(value: ComponentType<any>) {
+        this.portalContent$.next(value);
+    }
 
     /** The template to attach */
     @Input()
-    template: TemplateRef<any>;
+    set template(value: TemplateRef<any>) {
+        this.portalContent$.next(value);
+    }
+
+    /** The Content which should be attached and can be any of the items */
+    @Input()
+    set auto(value: DynamicPortalComponent['domElement' | 'component' | 'template']) {
+        this.portalContent$.next(value);
+    }
+
+    /** Emits when the portal is attached */
+    @Output()
+    attached = new EventEmitter<ComponentRef<any> | EmbeddedViewRef<any> | Element>();
 
-    /** Portal associated with the Portal outlet. */
-    portal?: Portal<any>;
+    /** @hidden */
+    @ViewChild(CdkPortalOutlet)
+    portalOutlet?: CdkPortalOutlet;
+
+    /** @hidden */
+    private portalContent$ = new BehaviorSubject<
+        DynamicPortalComponent['domElement' | 'component' | 'template'] | undefined
+    >(undefined);
+
+    /** @hidden */
+    private readonly _destroyRef = inject(DestroyRef);
 
     /** @hidden */
     private viewContainerRef = inject(ViewContainerRef);
 
     /** @hidden */
-    ngOnChanges(changes: SimpleChanges): void {
-        this.portal?.detach();
-        if (changes['domElement']) {
-            this.portal = new DomPortal(coerceElement(this.domElement));
-        } else if (changes['component']) {
-            this.portal = new ComponentPortal(this.component);
-        } else if (changes['template']) {
-            this.portal = new TemplatePortal(this.template, this.viewContainerRef);
-        }
+    private renderer = inject(Renderer2);
+
+    /** @hidden */
+    private elementRef = inject(ElementRef);
+
+    /** @hidden */
+    ngAfterViewInit(): void {
+        const portalOutlet = this.portalOutlet as CdkPortalOutlet;
+        this.portalContent$
+            .pipe(
+                tap(() => portalOutlet.detach()),
+                filter(Boolean),
+                map((content) => {
+                    if (typeof content === 'string') {
+                        const textElement = this.renderer.createText(content);
+                        this.renderer.appendChild(this.elementRef.nativeElement, textElement);
+                        return new DomPortal(textElement);
+                    } else if (content instanceof HTMLElement || content instanceof ElementRef) {
+                        return new DomPortal(coerceElement(content as HTMLElement | ElementRef<HTMLElement>));
+                    } else if (content instanceof TemplateRef) {
+                        return new TemplatePortal(content, this.viewContainerRef);
+                    }
+                    return new ComponentPortal(content);
+                }),
+                filter(Boolean),
+                takeUntilDestroyed(this._destroyRef)
+            )
+            .subscribe((portal) => {
+                const ref = portalOutlet.attach(portal);
+                if (portal instanceof DomPortal) {
+                    // DomPortal Attachment does not refer return Ref, like other portals
+                    this.attached.emit(portal.element);
+                } else {
+                    this.attached.emit(ref);
+                }
+            });
     }
 }
diff --git a/libs/cdk/src/lib/utils/directives/focusable-item/focusable-item.directive.ts b/libs/cdk/src/lib/utils/directives/focusable-item/focusable-item.directive.ts
@@ -61,6 +61,9 @@ export class FocusableItemDirective implements FocusableItem {
     @Output()
     readonly cellFocused = new EventEmitter<FocusableItemPosition>();
 
+    /** Element reference. */
+    readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+
     /** @hidden */
     readonly keydown = new Subject<KeyboardEvent>();
 
@@ -73,8 +76,6 @@ export class FocusableItemDirective implements FocusableItem {
         return this._tabbable ? 0 : -1;
     }
 
-    /** Element reference. */
-    readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
     /** @hidden */
     protected readonly _destroyRef = inject(DestroyRef);
     /** @hidden */
@@ -88,7 +89,6 @@ export class FocusableItemDirective implements FocusableItem {
 
     /** @hidden */
     private _tabbable = true;
-
     /** @hidden */
     private _timerId: ReturnType<typeof setTimeout> | null;
     /** @hidden */

diff --git a/.../src/lib/busy-indicator/busy-indicator-extended/busy-indicator-extended.directive.spec.ts b/.../src/lib/busy-indicator/busy-indicator-extended/busy-indicator-extended.directive.spec.ts
@@ -1,6 +1,7 @@
 import { Component, ElementRef, TemplateRef, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { BusyIndicatorModule } from '../busy-indicator.module';
+import { BusyIndicatorExtendedDirective } from './busy-indicator-extended.directive';
+import { BusyIndicatorComponent } from '../busy-indicator.component';
 
 @Component({
     template: ` <div class="fd-message-toast" #container>
@@ -21,7 +22,7 @@ describe('BusyIndicatorExtendedDirective', () => {
     beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [TestComponent],
-            imports: [BusyIndicatorModule]
+            imports: [BusyIndicatorExtendedDirective, BusyIndicatorComponent]
         }).compileComponents();
     }));
 

diff --git a/.../core/src/lib/busy-indicator/busy-indicator-extended/busy-indicator-extended.directive.ts b/.../core/src/lib/busy-indicator/busy-indicator-extended/busy-indicator-extended.directive.ts
@@ -6,7 +6,8 @@ const messageToastClass = 'fd-message-toast';
 
 @Directive({
     // eslint-disable-next-line @angular-eslint/directive-selector
-    selector: '[fd-busy-indicator-extended]'
+    selector: '[fd-busy-indicator-extended]',
+    standalone: true
 })
 export class BusyIndicatorExtendedDirective implements AfterContentInit {
     /** @hidden */

diff --git a/libs/core/src/lib/busy-indicator/busy-indicator.component.spec.ts b/libs/core/src/lib/busy-indicator/busy-indicator.component.spec.ts
@@ -1,13 +1,16 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgIf } from '@angular/common';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BusyIndicatorComponent } from './busy-indicator.component';
-import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
     template: `
         <fd-busy-indicator [loading]="loading" [size]="size" [block]="block">
             <button *ngIf="hasContent">Button</button>
         </fd-busy-indicator>
-    `
+    `,
+    standalone: true,
+    imports: [NgIf, BusyIndicatorComponent]
 })
 class TestWrapperComponent {
     block = true;
@@ -22,7 +25,7 @@ describe('BusyIndicatorComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            declarations: [TestWrapperComponent, BusyIndicatorComponent]
+            imports: [TestWrapperComponent]
         })
             .overrideComponent(BusyIndicatorComponent, {
                 set: { changeDetection: ChangeDetectionStrategy.Default }

diff --git a/libs/core/src/lib/busy-indicator/busy-indicator.component.ts b/libs/core/src/lib/busy-indicator/busy-indicator.component.ts
@@ -11,6 +11,7 @@ import { KeyUtil } from '@fundamental-ngx/cdk/utils';
 import { Nullable } from '@fundamental-ngx/cdk/utils';
 import { TAB } from '@angular/cdk/keycodes';
 import { FD_BUSY_INDICATOR_COMPONENT } from './tokens';
+import { NgIf } from '@angular/common';
 
 export type BusyIndicatorSize = 's' | 'm' | 'l';
 
@@ -35,7 +36,9 @@ export type BusyIndicatorSize = 's' | 'm' | 'l';
         '[attr.title]': 'title',
         '[class.fd-busy-indicator__container]': 'true',
         '[class.fd-busy-indicator__container--inline]': '!block'
-    }
+    },
+    standalone: true,
+    imports: [NgIf]
 })
 export class BusyIndicatorComponent {
     /** Whether to display the loading indicator animation. */
@@ -60,7 +63,7 @@ export class BusyIndicatorComponent {
 
     /** add loading label value */
     @Input()
-    label: string;
+    label?: string;
 
     /** Aria live attribute value. */
     @Input()

diff --git a/libs/core/src/lib/busy-indicator/busy-indicator.module.ts b/libs/core/src/lib/busy-indicator/busy-indicator.module.ts
@@ -4,8 +4,7 @@ import { BusyIndicatorComponent } from './busy-indicator.component';
 import { BusyIndicatorExtendedDirective } from './busy-indicator-extended/busy-indicator-extended.directive';
 
 @NgModule({
-    declarations: [BusyIndicatorComponent, BusyIndicatorExtendedDirective],
     exports: [BusyIndicatorComponent, BusyIndicatorExtendedDirective],
-    imports: [CommonModule]
+    imports: [CommonModule, BusyIndicatorComponent, BusyIndicatorExtendedDirective]
 })
 export class BusyIndicatorModule {}
diff --git a/libs/core/src/lib/card/card-footer.component.html b/libs/core/src/lib/card/card-footer.component.html
@@ -1,6 +1,6 @@
 <ng-content></ng-content>
 <div class="fd-card__footer-actions" *ngIf="actionItems && actionItems.length > 0">
-    <div class="fd-card__footer-actions-item" *ngFor="let actionItem of actionItems">
+    <ng-container *ngFor="let actionItem of actionItems">
         <ng-template [ngTemplateOutlet]="actionItem.templateRef"></ng-template>
-    </div>
+    </ng-container>
 </div>
diff --git a/libs/core/src/lib/carousel/carousel-item.directive.ts b/libs/core/src/lib/carousel/carousel-item.directive.ts
@@ -4,7 +4,8 @@ let carouselItemCounter = 0;
 
 @Directive({
     selector: '[fd-carousel-item], [fdCarouselItem]',
-    exportAs: 'fdCarouselItem'
+    exportAs: 'fdCarouselItem',
+    standalone: true
 })
 export class CarouselItemDirective {
     /** Value of the item , to keep some information inside */

diff --git a/libs/core/src/lib/carousel/carousel-item/carousel-item.component.ts b/libs/core/src/lib/carousel/carousel-item/carousel-item.component.ts
@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, ElementRef, HostBinding, Input, ViewEncapsulation } from '@angular/core';
 import { CarouselItemInterface } from '../carousel.service';
 import { Nullable } from '@fundamental-ngx/cdk/utils';
+import { BusyIndicatorComponent } from '@fundamental-ngx/core/busy-indicator';
 
 export type Visibility = 'visible' | 'hidden';
 
@@ -10,7 +11,9 @@ let carouselItemCounter = 0;
     selector: 'fd-carousel-item',
     templateUrl: './carousel-item.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    standalone: true,
+    imports: [BusyIndicatorComponent]
 })
 export class CarouselItemComponent implements CarouselItemInterface {
     /** Id of the Carousel items. */

diff --git a/libs/core/src/lib/carousel/carousel.component.html b/libs/core/src/lib/carousel/carousel.component.html
@@ -17,6 +17,7 @@
     <div
         class="fd-carousel__content"
         [class.fd-carousel__content--horizontal]="!vertical"
+        [ngClass]="'fd-carousel__content--' + contentBackground"
         [style.width]="_contentSizePx"
     >
         <ng-container *ngIf="_showNavigationButtonInContent">
@@ -42,7 +43,11 @@
 </div>
 
 <ng-template #pageIndicatorContainer>
-    <div class="fd-carousel__page-indicator-container">
+    <div
+        class="fd-carousel__page-indicator-container"
+        [class.fd-carousel__page-indicator-container--no-border]="noPaginationContainerBorder"
+        [ngClass]="'fd-carousel__page-indicator-container--' + pageIndicatorBackground"
+    >
         <ng-container *ngIf="_showNavigationButtonInPageIndicatorContainer">
             <ng-container *ngTemplateOutlet="buttonLeft"></ng-container>
         </ng-container>
@@ -83,27 +88,31 @@
 <ng-template #buttonLeft>
     <button
         fd-button
-        class="fd-carousel__button fd-carousel__button--left"
+        class="fd-carousel__button"
+        [class.fd-carousel__button--left]="!vertical"
+        [class.fd-carousel__button--up]="vertical"
         [style.z-index]="1"
         data-slide="previous"
         [attr.aria-label]="'coreCarousel.leftNavigationBtnLabel' | fdTranslate"
         (click)="previous(); $event.stopPropagation()"
         [disabled]="leftButtonDisabled"
         [attr.title]="'coreCarousel.leftNavigationBtnLabel' | fdTranslate"
-        glyph="slim-arrow-left"
+        [glyph]="vertical ? 'slim-arrow-up' : 'slim-arrow-left'"
     ></button>
 </ng-template>
 
 <ng-template #buttonRight>
     <button
         fd-button
-        class="fd-carousel__button fd-carousel__button--right"
+        class="fd-carousel__button"
+        [class.fd-carousel__button--right]="!vertical"
+        [class.fd-carousel__button--down]="vertical"
         [style.z-index]="1"
         data-slide="next"
         [attr.aria-label]="'coreCarousel.rightNavigationBtnLabel' | fdTranslate"
         (click)="next(); $event.stopPropagation()"
         [disabled]="rightButtonDisabled"
         [attr.title]="'coreCarousel.rightNavigationBtnLabel' | fdTranslate"
-        glyph="slim-arrow-right"
+        [glyph]="vertical ? 'slim-arrow-down' : 'slim-arrow-right'"
     ></button>
 </ng-template>