fix: tests adjustments, table column fixes

e2e/wdio/platform/fixtures/appData/standard-list-item-contents.ts

@@ -1,6 +1,6 @@
 export const linkAttr = 'href';
 export const secondaryAttr = 'secondary';
-export const secondaryTypes = ['positive', 'negative', 'neutral', 'informative', 'critical'];
+export const secondaryTypes = ['positive', 'negative', 'no status', 'informative', 'critical'];
 export const toolbarTextValue = [
     '1 : Items selected',
     '2 : Items selected',

libs/platform/src/lib/form/form-generator/interfaces/dynamic-form-item.ts

@@ -221,8 +221,8 @@ export interface DynamicFormFieldItem {
 
 type PreparedDynamicFormFieldItemFields = {
     message: string;
-    placeholder: string;
-    choices: SelectItem[];
+    placeholder?: string;
+    choices?: SelectItem[];
 };
 
 /**

libs/platform/src/lib/form/multi-input/base-multi-input.ts

@@ -7,11 +7,13 @@ import {
     EventEmitter,
     Host,
     Input,
+    OnChanges,
     OnDestroy,
     Optional,
     Output,
     QueryList,
     Self,
+    SimpleChanges,
     SkipSelf,
     TemplateRef,
     ViewChild
@@ -29,8 +31,8 @@ import {
     UP_ARROW
 } from '@angular/cdk/keycodes';
 
-import { fromEvent, isObservable, Observable, Subject, Subscription } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { combineLatest, fromEvent, isObservable, Observable, Subject, Subscription } from 'rxjs';
+import { takeUntil, startWith } from 'rxjs/operators';
 
 import { DialogConfig } from '@fundamental-ngx/core/dialog';
 import { ContentDensity, FocusEscapeDirection, KeyUtil, TemplateDirective } from '@fundamental-ngx/core/utils';
@@ -66,7 +68,7 @@ export class MultiInputSelectionChangeEvent {
 }
 
 @Directive()
-export abstract class BaseMultiInput extends CollectionBaseInput implements AfterViewInit, OnDestroy {
+export abstract class BaseMultiInput extends CollectionBaseInput implements AfterViewInit, OnChanges, OnDestroy {
     /** Provides maximum height for the optionPanel */
     @Input()
     maxHeight = '250px';
@@ -243,6 +245,9 @@ export abstract class BaseMultiInput extends CollectionBaseInput implements Afte
      */
     openChange = new Subject<boolean>();
 
+    /** @hidden emits whenever there're changes to the inputs, that affect the data creation from data source */
+    private readonly _updateDataSourceValues$ = new Subject<void>();
+
     protected _dataSource: FdpMultiInputDataSource<any>;
 
     /** @hidden */
@@ -300,6 +305,13 @@ export abstract class BaseMultiInput extends CollectionBaseInput implements Afte
         super.ngAfterViewInit();
     }
 
+    /** @hidden */
+    ngOnChanges(changes: SimpleChanges): void {
+        if ('group' in changes || 'groupKey' in changes) {
+            this._updateDataSourceValues$.next();
+        }
+    }
+
     /** @hidden */
     ngOnDestroy(): void {
         super.ngOnDestroy();
@@ -493,12 +505,10 @@ export abstract class BaseMultiInput extends CollectionBaseInput implements Afte
          * its here.
          */
         this._dsSubscription = new Subscription();
-        const dsSub = initDataSource
-            .open()
+        const dsSub = combineLatest([initDataSource.open(), this._updateDataSourceValues$.pipe(startWith(null))])
             .pipe(takeUntil(this._destroyed))
-            .subscribe((data) => {
+            .subscribe(([data]) => {
                 this._suggestions = this._convertToOptionItems(data);
-
                 this.stateChanges.next('initDataSource.open().');
 
                 this.cd.markForCheck();

libs/platform/src/lib/form/step-input/number/number-step-input.component.spec.ts

@@ -8,8 +8,9 @@ import { ContentDensity, RtlService } from '@fundamental-ngx/core/utils';
 import { FdpFormGroupModule } from '../../form-group/fdp-form.module';
 import { FormFieldComponent } from '../../form-group/form-field/form-field.component';
 import { PlatformStepInputModule } from '../step-input.module';
-import { NumberStepInputChangeEvent, NumberStepInputComponent } from './number-step-input.component';
+import { NumberStepInputComponent } from './number-step-input.component';
 import { runValueAccessorTests } from 'ngx-cva-test-suite';
+import { StepInputChangeEvent } from '../base.step-input';
 
 @Component({
     template: `<fdp-number-step-input name="number"></fdp-number-step-input>`
@@ -97,7 +98,7 @@ class NumberStepInputMainFunctionalityHostComponent {
 
     stepFn: (value: number, action: 'increase' | 'decrease') => number;
 
-    onValueChanged(event: NumberStepInputChangeEvent): void {
+    onValueChanged(event: StepInputChangeEvent): void {
         this.value = event.payload;
     }
 }

libs/platform/src/lib/table/components/table-column/table-column.component.ts

@@ -5,19 +5,13 @@ import {
     Host,
     Input,
     OnChanges,
-    OnDestroy,
     OnInit,
     Optional,
     SimpleChanges,
     TemplateRef
 } from '@angular/core';
 
-import { BehaviorSubject, of, Subject } from 'rxjs';
-import { map, switchMap, takeUntil } from 'rxjs/operators';
-
-import { RtlService } from '@fundamental-ngx/core/utils';
-
-import { ColumnAlign, ColumnAlignValue } from '../../enums/column-align.enum';
+import { ColumnAlignValue } from '../../enums/column-align.enum';
 import { FilterableColumnDataType } from '../../enums/filter-type.enum';
 import { FdpCellDef, FdpEditableCellDef } from '../../directives/table-cell.directive';
 import { FdpHeaderCellDef } from '../../directives/table-header.directive';
@@ -52,7 +46,7 @@ import { TableColumnResizeService } from '../../table-column-resize.service';
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [{ provide: TableColumn, useExisting: TableColumnComponent }]
 })
-export class TableColumnComponent extends TableColumn implements OnInit, OnChanges, OnDestroy {
+export class TableColumnComponent extends TableColumn implements OnInit, OnChanges {
     /** Column unique identifier. */
     @Input()
     name: string;
@@ -66,26 +60,7 @@ export class TableColumnComponent extends TableColumn implements OnInit, OnChang
     label: string;
 
     /** Cell text alignment. */
-    @Input() set align(align: ColumnAlignValue) {
-        let _align = ColumnAlign.START;
-
-        switch (align) {
-            case ColumnAlign.CENTER:
-                _align = ColumnAlign.CENTER;
-                break;
-            case ColumnAlign.END:
-                _align = ColumnAlign.END;
-                break;
-            case ColumnAlign.START:
-                _align = ColumnAlign.START;
-        }
-
-        this._align$.next(_align);
-    }
-
-    get align(): ColumnAlignValue {
-        return this._align;
-    }
+    @Input() align: ColumnAlignValue = 'start';
 
     /** Toggles sort feature for the column. */
     @Input()
@@ -150,22 +125,12 @@ export class TableColumnComponent extends TableColumn implements OnInit, OnChang
         this.headerCellTemplate = fdpHeaderCellDef?.templateRef;
     }
 
-    /** @hidden */
-    private _align$: BehaviorSubject<ColumnAlign> = new BehaviorSubject<ColumnAlign>(null);
-
-    /** @hidden */
-    private _align: ColumnAlignValue;
-
-    /** @hidden */
-    private _destroyed = new Subject<void>();
-
     /** @hidden */
     private _width: string;
 
     /** @hidden */
     constructor(
         @Optional() @Host() private readonly _tableService: TableService,
-        @Optional() private readonly _rtlService: RtlService,
         private readonly _tableColumnResizeService: TableColumnResizeService
     ) {
         super();
@@ -174,65 +139,20 @@ export class TableColumnComponent extends TableColumn implements OnInit, OnChang
     /** @hidden */
     ngOnInit(): void {
         this._validateNameOption();
-
-        this._listenToAlign();
     }
 
     /** Table won't know about column properties update so notify about it manually
      * @hidden */
     ngOnChanges(changes: SimpleChanges): void {
-        if (
-            this._tableService &&
-            (changes.sortable?.currentValue !== changes.sortable?.previousValue ||
-                changes.filterable?.currentValue !== changes.filterable?.previousValue ||
-                changes.groupable?.currentValue !== changes.groupable?.previousValue ||
-                changes.freezable?.currentValue !== changes.freezable?.previousValue)
-        ) {
+        if (this._tableService && (changes.sortable || changes.filterable || changes.groupable || changes.freezable)) {
             this._tableService.markForCheck();
         }
     }
 
     /** @hidden */
-    ngOnDestroy(): void {
-        this._destroyed.next();
-        this._destroyed.complete();
-    }
-
     private _validateNameOption(): void {
         if (typeof this.name !== 'string') {
             throw Error('fdp-column: "name" option is required.');
         }
     }
-
-    /** @hidden */
-    private _listenToAlign(): void {
-        this._align$
-            .asObservable()
-            .pipe(
-                switchMap((align) => {
-                    if (!this._rtlService) {
-                        return of(align);
-                    }
-
-                    return this._rtlService.rtl.pipe(
-                        map((isRtl): ColumnAlign => {
-                            if (isRtl && align === ColumnAlign.START) {
-                                return ColumnAlign.END;
-                            }
-
-                            if (isRtl && align === ColumnAlign.END) {
-                                return ColumnAlign.START;
-                            }
-
-                            return align;
-                        })
-                    );
-                }),
-                takeUntil(this._destroyed)
-            )
-            .subscribe((align) => {
-                this._align = align;
-                this._tableService?.markForCheck();
-            });
-    }
 }

libs/platform/src/lib/table/table.component.html

@@ -82,7 +82,6 @@
                 [ngStyle]="_getCellStyles(column)"
                 [fdPopoverTrigger]="columnHeaderPopover"
                 [class.fd-table__item--clickable]="_isColumnHasHeaderMenu(column)"
-                [style.text-align]="column.align"
             >
                 <div
                     class="fd-table__text fd-table__text--no-wrap"
@@ -342,7 +341,6 @@
                                 [columnName]="column.name"
                                 role="cell"
                                 [headers]="id + '__' + column.name"
-                                [style.textAlign]="column.align"
                                 [ngClass]="'fdp-table__col--' + column.name"
                                 [class.fd-table__cell--fixed]="_freezableColumns?.has(column.name)"
                                 [class.fd-table__cell--fixed-last]="column.name === freezeColumnsTo"

libs/platform/src/lib/table/table.component.ts

@@ -54,7 +54,8 @@ import {
     SelectionMode,
     SelectionModeValue,
     SortDirection,
-    TableRowType
+    TableRowType,
+    ColumnAlign
 } from './enums';
 import {
     DEFAULT_HIGHLIGHTING_KEY,
@@ -1305,6 +1306,21 @@ export class TableComponent<T = any> extends Table<T> implements AfterViewInit,
         styles['max-width'] = columnWidth;
         styles['width'] = columnWidth;
 
+        // The "start" value does align left when you are using a LTR browser.
+        // In RTL browsers, the "start" value aligns right.
+        // Since we want to dynamically apply alignment only depending on the service value, we are using "left"/"right" as values instead
+        switch (column.align) {
+            case ColumnAlign.START:
+                styles['text-align'] = this._rtl ? 'right' : 'left';
+                break;
+            case ColumnAlign.END:
+                styles['text-align'] = this._rtl ? 'left' : 'right';
+                break;
+            default:
+                styles['text-align'] = 'center';
+                break;
+        }
+
         return styles;
     }