@ui5/webcomponents-ngx 0.5.9-rc.4 → 0.5.9

package/fiori/user-settings-item/index.ts

@@ -1,109 +0,0 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input as InputDecorator,
-  NgZone,
-  booleanAttribute,
-  inject,
-} from '@angular/core';
-import '@ui5/webcomponents-fiori/dist/UserSettingsItem.js';
-import {
-  default as UserSettingsItem,
-  UserSettingsItemViewSelectEventDetail,
-} from '@ui5/webcomponents-fiori/dist/UserSettingsItem.js';
-import { ProxyInputs, ProxyOutputs } from '@ui5/webcomponents-ngx/utils';
-@ProxyInputs([
-  'text',
-  'tooltip',
-  'headerText',
-  'selected',
-  'disabled',
-  'loading',
-  'loadingReason',
-  'icon',
-  'accessibleName',
-])
-@ProxyOutputs(['selection-change: ui5SelectionChange'])
-@Component({
-  standalone: true,
-  selector: 'ui5-user-settings-item',
-  template: '<ng-content></ng-content>',
-  inputs: [
-    'text',
-    'tooltip',
-    'headerText',
-    'selected',
-    'disabled',
-    'loading',
-    'loadingReason',
-    'icon',
-    'accessibleName',
-  ],
-  outputs: ['ui5SelectionChange'],
-  exportAs: 'ui5UserSettingsItem',
-})
-class UserSettingsItemComponent {
-  /**
-        Defines the text of the user settings item.
-        */
-  text!: string;
-  /**
-        Defines the tooltip of the component.
-
-A tooltip attribute should be provided to represent the meaning or function when the component is collapsed and only the icon is visible.
-        */
-  tooltip!: string;
-  /**
-        Defines the headerText of the item.
-        */
-  headerText!: string | undefined;
-  /**
-        Shows item tab.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  selected!: boolean;
-  /**
-        Defines whether the component is in disabled state.
-
-**Note:** A disabled component is completely noninteractive.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  disabled!: boolean;
-  /**
-        Indicates whether a loading indicator should be shown.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  loading!: boolean;
-  /**
-        Indicates why the control is in loading state.
-        */
-  loadingReason!: string | undefined;
-  /**
-        Defines the icon of the component.
-        */
-  icon!: string;
-  /**
-        Defines the accessible ARIA name of the component.
-        */
-  accessibleName!: string | undefined;
-
-  /**
-     Fired when a selected view changed.
-    */
-  ui5SelectionChange!: EventEmitter<UserSettingsItemViewSelectEventDetail>;
-
-  private elementRef: ElementRef<UserSettingsItem> = inject(ElementRef);
-  private zone = inject(NgZone);
-  private cdr = inject(ChangeDetectorRef);
-
-  get element(): UserSettingsItem {
-    return this.elementRef.nativeElement;
-  }
-
-  constructor() {
-    this.cdr.detach();
-  }
-}
-export { UserSettingsItemComponent };

package/fiori/user-settings-item/ng-package.json

@@ -1 +0,0 @@
-{"lib":{"entryFile":"./index.ts"}}

package/fiori/user-settings-view/index.ts

@@ -1,50 +0,0 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  Input as InputDecorator,
-  NgZone,
-  booleanAttribute,
-  inject,
-} from '@angular/core';
-import '@ui5/webcomponents-fiori/dist/UserSettingsView.js';
-import UserSettingsView from '@ui5/webcomponents-fiori/dist/UserSettingsView.js';
-import { ProxyInputs } from '@ui5/webcomponents-ngx/utils';
-@ProxyInputs(['text', 'selected', 'secondary'])
-@Component({
-  standalone: true,
-  selector: 'ui5-user-settings-view',
-  template: '<ng-content></ng-content>',
-  inputs: ['text', 'selected', 'secondary'],
-  exportAs: 'ui5UserSettingsView',
-})
-class UserSettingsViewComponent {
-  /**
-        Defines the title text of the user settings view.
-        */
-  text!: string | undefined;
-  /**
-        Defines whether the view is selected. There can be just one selected view at a time.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  selected!: boolean;
-  /**
-        Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`
-and controls the visibility of the back button.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  secondary!: boolean;
-
-  private elementRef: ElementRef<UserSettingsView> = inject(ElementRef);
-  private zone = inject(NgZone);
-  private cdr = inject(ChangeDetectorRef);
-
-  get element(): UserSettingsView {
-    return this.elementRef.nativeElement;
-  }
-
-  constructor() {
-    this.cdr.detach();
-  }
-}
-export { UserSettingsViewComponent };

package/fiori/user-settings-view/ng-package.json

@@ -1 +0,0 @@
-{"lib":{"entryFile":"./index.ts"}}

package/fiori/view-settings-dialog/index.ts

@@ -1,84 +0,0 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input as InputDecorator,
-  NgZone,
-  booleanAttribute,
-  inject,
-} from '@angular/core';
-import '@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js';
-import {
-  default as ViewSettingsDialog,
-  ViewSettingsDialogCancelEventDetail,
-  ViewSettingsDialogConfirmEventDetail,
-} from '@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js';
-import { ProxyInputs, ProxyOutputs } from '@ui5/webcomponents-ngx/utils';
-@ProxyInputs(['sortDescending', 'groupDescending', 'open'])
-@ProxyOutputs([
-  'confirm: ui5Confirm',
-  'cancel: ui5Cancel',
-  'before-open: ui5BeforeOpen',
-  'open: ui5Open',
-  'close: ui5Close',
-])
-@Component({
-  standalone: true,
-  selector: 'ui5-view-settings-dialog',
-  template: '<ng-content></ng-content>',
-  inputs: ['sortDescending', 'groupDescending', 'open'],
-  outputs: ['ui5Confirm', 'ui5Cancel', 'ui5BeforeOpen', 'ui5Open', 'ui5Close'],
-  exportAs: 'ui5ViewSettingsDialog',
-})
-class ViewSettingsDialogComponent {
-  /**
-        Defines the initial sort order.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  sortDescending!: boolean;
-  /**
-        Defines the initial group order.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  groupDescending!: boolean;
-  /**
-        Indicates if the dialog is open.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  open!: boolean;
-
-  /**
-     Fired when confirmation button is activated.
-    */
-  ui5Confirm!: EventEmitter<ViewSettingsDialogConfirmEventDetail>;
-  /**
-     Fired when cancel button is activated.
-    */
-  ui5Cancel!: EventEmitter<ViewSettingsDialogCancelEventDetail>;
-  /**
-     Fired before the component is opened.
-    */
-  ui5BeforeOpen!: EventEmitter<void>;
-  /**
-     Fired after the dialog is opened.
-    */
-  ui5Open!: EventEmitter<void>;
-  /**
-     Fired after the dialog is closed.
-    */
-  ui5Close!: EventEmitter<void>;
-
-  private elementRef: ElementRef<ViewSettingsDialog> = inject(ElementRef);
-  private zone = inject(NgZone);
-  private cdr = inject(ChangeDetectorRef);
-
-  get element(): ViewSettingsDialog {
-    return this.elementRef.nativeElement;
-  }
-
-  constructor() {
-    this.cdr.detach();
-  }
-}
-export { ViewSettingsDialogComponent };

package/fiori/view-settings-dialog/ng-package.json

@@ -1 +0,0 @@
-{"lib":{"entryFile":"./index.ts"}}

package/fiori/wizard/index.ts

@@ -1,49 +0,0 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  NgZone,
-  inject,
-} from '@angular/core';
-import '@ui5/webcomponents-fiori/dist/Wizard.js';
-import {
-  default as Wizard,
-  WizardStepChangeEventDetail,
-} from '@ui5/webcomponents-fiori/dist/Wizard.js';
-import { ProxyInputs, ProxyOutputs } from '@ui5/webcomponents-ngx/utils';
-@ProxyInputs(['contentLayout'])
-@ProxyOutputs(['step-change: ui5StepChange'])
-@Component({
-  standalone: true,
-  selector: 'ui5-wizard',
-  template: '<ng-content></ng-content>',
-  inputs: ['contentLayout'],
-  outputs: ['ui5StepChange'],
-  exportAs: 'ui5Wizard',
-})
-class WizardComponent {
-  /**
-        Defines how the content of the `ui5-wizard` would be visualized.
-        */
-  contentLayout!: 'MultipleSteps' | 'SingleStep';
-
-  /**
-     Fired when the step is changed by user interaction - either with scrolling,
-or by clicking on the steps within the component header.
-    */
-  ui5StepChange!: EventEmitter<WizardStepChangeEventDetail>;
-
-  private elementRef: ElementRef<Wizard> = inject(ElementRef);
-  private zone = inject(NgZone);
-  private cdr = inject(ChangeDetectorRef);
-
-  get element(): Wizard {
-    return this.elementRef.nativeElement;
-  }
-
-  constructor() {
-    this.cdr.detach();
-  }
-}
-export { WizardComponent };

package/fiori/wizard/ng-package.json

@@ -1 +0,0 @@
-{"lib":{"entryFile":"./index.ts"}}

package/fiori/wizard-step/index.ts

@@ -1,96 +0,0 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  Input as InputDecorator,
-  NgZone,
-  booleanAttribute,
-  inject,
-} from '@angular/core';
-import '@ui5/webcomponents-fiori/dist/WizardStep.js';
-import WizardStep from '@ui5/webcomponents-fiori/dist/WizardStep.js';
-import { ProxyInputs } from '@ui5/webcomponents-ngx/utils';
-@ProxyInputs([
-  'titleText',
-  'subtitleText',
-  'icon',
-  'disabled',
-  'selected',
-  'branching',
-])
-@Component({
-  standalone: true,
-  selector: 'ui5-wizard-step',
-  template: '<ng-content></ng-content>',
-  inputs: [
-    'titleText',
-    'subtitleText',
-    'icon',
-    'disabled',
-    'selected',
-    'branching',
-  ],
-  exportAs: 'ui5WizardStep',
-})
-class WizardStepComponent {
-  /**
-        Defines the `titleText` of the step.
-
-**Note:** The text is displayed in the `ui5-wizard` navigation header.
-        */
-  titleText!: string | undefined;
-  /**
-        Defines the `subtitleText` of the step.
-
-**Note:** the text is displayed in the `ui5-wizard` navigation header.
-        */
-  subtitleText!: string | undefined;
-  /**
-        Defines the `icon` of the step.
-
-**Note:** The icon is displayed in the `ui5-wizard` navigation header.
-
-The SAP-icons font provides numerous options.
-See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
-        */
-  icon!: string | undefined;
-  /**
-        Defines if the step is `disabled`. When disabled the step is displayed,
-but the user can't select the step by clicking or navigate to it with scrolling.
-
-**Note:** Step can't be `selected` and `disabled` at the same time.
-In this case the `selected` property would take precedence.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  disabled!: boolean;
-  /**
-        Defines the step's `selected` state - the step that is currently active.
-
-**Note:** Step can't be `selected` and `disabled` at the same time.
-In this case the `selected` property would take precedence.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  selected!: boolean;
-  /**
-        When `branching` is enabled a dashed line would be displayed after the step,
-meant to indicate that the next step is not yet known and depends on user choice in the current step.
-
-**Note:** It is recommended to use `branching` on the last known step
-and later add new steps when it becomes clear how the wizard flow should continue.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  branching!: boolean;
-
-  private elementRef: ElementRef<WizardStep> = inject(ElementRef);
-  private zone = inject(NgZone);
-  private cdr = inject(ChangeDetectorRef);
-
-  get element(): WizardStep {
-    return this.elementRef.nativeElement;
-  }
-
-  constructor() {
-    this.cdr.detach();
-  }
-}
-export { WizardStepComponent };

package/fiori/wizard-step/ng-package.json

@@ -1 +0,0 @@
-{"lib":{"entryFile":"./index.ts"}}

package/fiori-snapshot-test.spec.ts

@@ -1,17 +0,0 @@
-import {join} from "path";
-import {readdirSync, readFileSync} from "fs";
-import {startCase} from "lodash";
-
-describe('Snapshot test Fiori', () => {
-  const basePath = `${__dirname}/fiori`;
-  const fioriFolders = readdirSync(basePath, {withFileTypes: true});
-  fioriFolders.forEach((folder) => {
-    const fileName = folder.isDirectory() ? join(basePath, folder.name,'index.ts') : join(basePath, folder.name);
-    describe(startCase(folder.name), () => {
-      it('should match the snapshot', function () {
-        const fileContents = readFileSync(fileName, 'utf8');
-        expect(fileContents).toMatchSnapshot();
-      });
-    });
-  });
-});

package/generic-cva/index.ts

@@ -1,48 +0,0 @@
-import { Directive } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-interface CvaComponent<ValueType = any> {
-  element: Element;
-  cvaValue: ValueType;
-}
-
-@Directive({
-  selector: '[noop]',
-  standalone: true,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: GenericControlValueAccessor,
-      multi: true,
-    },
-  ],
-  host: {
-    '(focusout)': 'onTouched?.()',
-  },
-})
-class GenericControlValueAccessor<ValueType = any>
-  implements ControlValueAccessor
-{
-  onChange!: (val: ValueType) => void;
-  onTouched!: () => void;
-
-  host!: CvaComponent<ValueType>;
-
-  setDisabledState = (isDisabled: boolean): void => {
-    this.host.element['disabled'] = isDisabled;
-  };
-
-  registerOnChange(fn: (newVal: ValueType) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  writeValue(val: ValueType): void {
-    this.host.cvaValue = val;
-  }
-}
-
-export { GenericControlValueAccessor };

package/generic-cva/ng-package.json

@@ -1 +0,0 @@
-{"lib":{"entryFile":"./index.ts"}}

package/i18n/i18n.module.ts

@@ -1,35 +0,0 @@
-import { Inject, ModuleWithProviders, NgModule } from "@angular/core";
-import { I18nPipe } from "./i18n.pipe";
-import { I18nConfig } from "./i18n.types";
-import { I18N_ROOT_CONFIG } from "./i18n.tokens";
-import { i18nChildProviders, i18nRootProviders } from "./i18n.providers";
-
-
-@NgModule({
-  imports: [I18nPipe],
-  exports: [I18nPipe]
-})
-export class Ui5I18nModule {
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  constructor(@Inject(I18N_ROOT_CONFIG) private config: I18nConfig) {
-  }
-
-  static forRoot(config: I18nConfig = {}): ModuleWithProviders<Ui5I18nModule> {
-
-    return {
-      ngModule: Ui5I18nModule,
-      providers: [
-        i18nRootProviders(config)
-      ]
-    }
-  }
-
-  static forChild(config: I18nConfig['bundle'] = {}): ModuleWithProviders<Ui5I18nModule> {
-    return {
-      ngModule: Ui5I18nModule,
-      providers: [
-        i18nChildProviders(config)
-      ]
-    }
-  }
-}

package/i18n/i18n.pipe.ts

@@ -1,47 +0,0 @@
-import {ChangeDetectorRef, OnDestroy, Pipe, PipeTransform} from "@angular/core";
-import {I18nService} from "./i18n.service";
-import {distinctUntilChanged, Subject, Subscription, takeUntil} from "rxjs";
-
-@Pipe({
-  name: 'ui5I18n',
-  pure: false,
-  standalone: true
-})
-export class I18nPipe implements PipeTransform, OnDestroy {
-  private _lastTranslationValue = '';
-  private _subscription?: Subscription;
-  private _destroyed$ = new Subject<void>();
-  private _lastValue!: string;
-  private _lastValueParams!: string[];
-
-  constructor(private changeDetectorRef: ChangeDetectorRef,
-              private i18nService: I18nService) {
-  }
-
-  transform(value: string, ...params: any[]): string {
-    const paramsChanged = !this._lastValue || params.some((param, index) => param !== this._lastValueParams[index]);
-    if (value === this._lastValue && !paramsChanged) {
-      return this._lastTranslationValue;
-    }
-    this._lastValue = value;
-    this._lastValueParams = params;
-    if (this._subscription) {
-      this._subscription.unsubscribe();
-      this._subscription = undefined;
-    }
-    this._subscription = this.i18nService.getText(value, ...params)
-      .pipe(
-        distinctUntilChanged(),
-        takeUntil(this._destroyed$)
-      ).subscribe((text) => {
-        this._lastTranslationValue = text;
-        this.changeDetectorRef.markForCheck();
-      });
-    return this._lastTranslationValue;
-  }
-
-  ngOnDestroy(): void {
-    this._destroyed$.next();
-    this._destroyed$.complete();
-  }
-}

package/i18n/i18n.providers.ts

@@ -1,40 +0,0 @@
-import { setFetchDefaultLanguage, setLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
-import { I18nConfig } from "./i18n.types";
-import { I18N_NAMESPACE, I18N_ROOT_CONFIG } from "./i18n.tokens";
-import { resolveTranslationsProvider } from "./i18n.utils";
-import { I18nService } from "./i18n.service";
-
-let childIds = 0;
-export function i18nRootProviders(config: I18nConfig) {
-  return [
-    {
-      provide: I18N_ROOT_CONFIG,
-      useFactory: () => {
-        if (config.language) {
-          setLanguage(config.language);
-        }
-        if (config.fetchDefaultLanguage) {
-          setFetchDefaultLanguage(config.fetchDefaultLanguage);
-        }
-        return config;
-      }
-    },
-    {
-      provide: I18N_NAMESPACE,
-      useValue: config.bundle?.name || 'root_i18n'
-    },
-    resolveTranslationsProvider(config.bundle?.translations),
-    I18nService
-  ]
-}
-
-export function i18nChildProviders(config: I18nConfig['bundle']) {
-  return [
-    {
-      provide: I18N_NAMESPACE,
-      useValue: config?.name || ++childIds + '_i18n'
-    },
-    resolveTranslationsProvider(config?.translations),
-    I18nService
-  ]
-}

package/i18n/i18n.service.ts

@@ -1,90 +0,0 @@
-import {Inject, inject, Injectable} from "@angular/core";
-import I18nBundle, {getI18nBundle, registerI18nLoader} from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import parseProperties from "@ui5/webcomponents-base/dist/PropertiesFileFormat.js";
-
-import {getLanguage, setLanguage} from "@ui5/webcomponents-base/dist/config/Language.js";
-import {
-  BehaviorSubject,
-  filter,
-  first,
-  firstValueFrom,
-  from,
-  isObservable,
-  map,
-  Observable,
-  of,
-  switchMap,
-  tap
-} from "rxjs";
-import {I18N_NAMESPACE, I18N_ROOT_CONFIG, I18N_TRANSLATIONS} from "./i18n.tokens";
-import {I18nConfig, Translations} from "./i18n.types";
-
-@Injectable()
-export class I18nService {
-  private parent: I18nService | null = inject(I18nService, {skipSelf: true, optional: true});
-  private currentLanguage$ = new BehaviorSubject<string>(getLanguage() || this.config.language as string);
-  private readonly i18nBundle$: Observable<I18nBundle>;
-  private loadedLanguages$ = new BehaviorSubject<string[]>([]);
-
-  constructor(
-    @Inject(I18N_ROOT_CONFIG) private config: I18nConfig,
-    @Inject(I18N_NAMESPACE) private namespace: string,
-    @Inject(I18N_TRANSLATIONS) private bundles: Translations = {}
-  ) {
-    Object.keys(bundles).forEach((lang) => {
-      registerI18nLoader(this.namespace, lang, async (localeId: string) => {
-        const val = this.bundles[localeId];
-        const result = isObservable(val) ? await firstValueFrom(val) : await val;
-        setTimeout(() => {
-          this.loadedLanguages$.next([
-            ...new Set([...this.loadedLanguages$.value, localeId]).values()
-          ]);
-        });
-        if (typeof result === 'string') {
-          return parseProperties(result);
-        }
-        return result;
-      });
-    });
-    this.i18nBundle$ = from(getI18nBundle(this.namespace));
-  }
-
-  currentLanguage(): string | undefined {
-    if (this.parent) {
-      return this.parent.currentLanguage();
-    }
-    return this.currentLanguage$.value;
-  }
-
-  currentLanguageEvent(): Observable<string> {
-    if (this.parent) {
-      return this.parent.currentLanguageEvent();
-    }
-    return this.currentLanguage$;
-  }
-
-  setLanguage(language: string): void {
-    if (this.parent) {
-      return this.parent.setLanguage(language);
-    }
-    setLanguage(language);
-    this.loadedLanguages$.pipe(
-      filter(langs => langs.includes(language)),
-      first(),
-      tap(() => this.currentLanguage$.next(language))
-    ).subscribe();
-  }
-
-  getText(key: string, ...placeholders: any[]): Observable<string> {
-    return this.currentLanguageEvent().pipe(
-      switchMap(() => this.i18nBundle$),
-      map((bundle) => bundle.getText({key, defaultText: key}, ...placeholders)),
-      switchMap((text) => {
-        if (text === key && this.parent) {
-          return this.parent.getText(key, ...placeholders);
-        }
-        return of(text);
-      })
-    );
-  }
-}