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

package/fiori/dynamic-side-content/index.ts

@@ -1,108 +0,0 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input as InputDecorator,
-  NgZone,
-  booleanAttribute,
-  inject,
-} from '@angular/core';
-import '@ui5/webcomponents-fiori/dist/DynamicSideContent.js';
-import {
-  default as DynamicSideContent,
-  DynamicSideContentAccessibilityAttributes,
-  DynamicSideContentLayoutChangeEventDetail,
-} from '@ui5/webcomponents-fiori/dist/DynamicSideContent.js';
-import { ProxyInputs, ProxyOutputs } from '@ui5/webcomponents-ngx/utils';
-@ProxyInputs([
-  'hideMainContent',
-  'hideSideContent',
-  'sideContentPosition',
-  'sideContentVisibility',
-  'sideContentFallDown',
-  'equalSplit',
-  'accessibilityAttributes',
-])
-@ProxyOutputs(['layout-change: ui5LayoutChange'])
-@Component({
-  standalone: true,
-  selector: 'ui5-dynamic-side-content',
-  template: '<ng-content></ng-content>',
-  inputs: [
-    'hideMainContent',
-    'hideSideContent',
-    'sideContentPosition',
-    'sideContentVisibility',
-    'sideContentFallDown',
-    'equalSplit',
-    'accessibilityAttributes',
-  ],
-  outputs: ['ui5LayoutChange'],
-  exportAs: 'ui5DynamicSideContent',
-})
-class DynamicSideContentComponent {
-  /**
-        Defines the visibility of the main content.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  hideMainContent!: boolean;
-  /**
-        Defines the visibility of the side content.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  hideSideContent!: boolean;
-  /**
-        Defines whether the side content is positioned before the main content (left side
-in LTR mode), or after the the main content (right side in LTR mode).
-        */
-  sideContentPosition!: 'End' | 'Start';
-  /**
-        Defines on which breakpoints the side content is visible.
-        */
-  sideContentVisibility!:
-    | 'AlwaysShow'
-    | 'ShowAboveL'
-    | 'ShowAboveM'
-    | 'ShowAboveS'
-    | 'NeverShow';
-  /**
-        Defines on which breakpoints the side content falls down below the main content.
-        */
-  sideContentFallDown!: 'BelowXL' | 'BelowL' | 'BelowM' | 'OnMinimumWidth';
-  /**
-        Defines whether the component is in equal split mode. In this mode, the side and
-the main content take 50:50 percent of the container on all screen sizes
-except for phone, where the main and side contents are switching visibility
-using the toggle method.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  equalSplit!: boolean;
-  /**
-        Defines additional accessibility attributes on different areas of the component.
-
-The accessibilityAttributes object has the following fields:
-
- - **mainContent**: `mainContent.ariaLabel` defines the aria-label of the main content area. Accepts any string.
- - **sideContent**: `sideContent.ariaLabel` defines the aria-label of the side content area. Accepts any string.
-        */
-  accessibilityAttributes!: DynamicSideContentAccessibilityAttributes;
-
-  /**
-     Fires when the current breakpoint has been changed.
-    */
-  ui5LayoutChange!: EventEmitter<DynamicSideContentLayoutChangeEventDetail>;
-
-  private elementRef: ElementRef<DynamicSideContent> = inject(ElementRef);
-  private zone = inject(NgZone);
-  private cdr = inject(ChangeDetectorRef);
-
-  get element(): DynamicSideContent {
-    return this.elementRef.nativeElement;
-  }
-
-  constructor() {
-    this.cdr.detach();
-  }
-}
-export { DynamicSideContentComponent };

package/fiori/dynamic-side-content/ng-package.json

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

package/fiori/filter-item/index.ts

@@ -1,42 +0,0 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  NgZone,
-  inject,
-} from '@angular/core';
-import '@ui5/webcomponents-fiori/dist/FilterItem.js';
-import FilterItem from '@ui5/webcomponents-fiori/dist/FilterItem.js';
-import { ProxyInputs } from '@ui5/webcomponents-ngx/utils';
-@ProxyInputs(['text', 'additionalText'])
-@Component({
-  standalone: true,
-  selector: 'ui5-filter-item',
-  template: '<ng-content></ng-content>',
-  inputs: ['text', 'additionalText'],
-  exportAs: 'ui5FilterItem',
-})
-class FilterItemComponent {
-  /**
-        Defines the text of the filter item.
-        */
-  text!: string | undefined;
-  /**
-        Defines the additional text of the filter item.
-This text is typically used to show the number of selected filter options within this category.
-        */
-  additionalText!: string | undefined;
-
-  private elementRef: ElementRef<FilterItem> = inject(ElementRef);
-  private zone = inject(NgZone);
-  private cdr = inject(ChangeDetectorRef);
-
-  get element(): FilterItem {
-    return this.elementRef.nativeElement;
-  }
-
-  constructor() {
-    this.cdr.detach();
-  }
-}
-export { FilterItemComponent };

package/fiori/filter-item/ng-package.json

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

package/fiori/filter-item-option/index.ts

@@ -1,44 +0,0 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  Input as InputDecorator,
-  NgZone,
-  booleanAttribute,
-  inject,
-} from '@angular/core';
-import '@ui5/webcomponents-fiori/dist/FilterItemOption.js';
-import FilterItemOption from '@ui5/webcomponents-fiori/dist/FilterItemOption.js';
-import { ProxyInputs } from '@ui5/webcomponents-ngx/utils';
-@ProxyInputs(['text', 'selected'])
-@Component({
-  standalone: true,
-  selector: 'ui5-filter-item-option',
-  template: '<ng-content></ng-content>',
-  inputs: ['text', 'selected'],
-  exportAs: 'ui5FilterItemOption',
-})
-class FilterItemOptionComponent {
-  /**
-        Defines the text of the filter option.
-        */
-  text!: string | undefined;
-  /**
-        Defines if the filter option is selected.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  selected!: boolean;
-
-  private elementRef: ElementRef<FilterItemOption> = inject(ElementRef);
-  private zone = inject(NgZone);
-  private cdr = inject(ChangeDetectorRef);
-
-  get element(): FilterItemOption {
-    return this.elementRef.nativeElement;
-  }
-
-  constructor() {
-    this.cdr.detach();
-  }
-}
-export { FilterItemOptionComponent };

package/fiori/filter-item-option/ng-package.json

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

package/fiori/flexible-column-layout/index.ts

@@ -1,128 +0,0 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input as InputDecorator,
-  NgZone,
-  booleanAttribute,
-  inject,
-} from '@angular/core';
-import '@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js';
-import {
-  FCLAccessibilityAttributes,
-  default as FlexibleColumnLayout,
-  FlexibleColumnLayoutLayoutChangeEventDetail,
-  FlexibleColumnLayoutLayoutConfigurationChangeEventDetail,
-  LayoutConfiguration,
-} from '@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js';
-import { ProxyInputs, ProxyOutputs } from '@ui5/webcomponents-ngx/utils';
-@ProxyInputs([
-  'layout',
-  'disableResizing',
-  'accessibilityAttributes',
-  'layoutsConfiguration',
-])
-@ProxyOutputs([
-  'layout-change: ui5LayoutChange',
-  'layout-configuration-change: ui5LayoutConfigurationChange',
-])
-@Component({
-  standalone: true,
-  selector: 'ui5-flexible-column-layout',
-  template: '<ng-content></ng-content>',
-  inputs: [
-    'layout',
-    'disableResizing',
-    'accessibilityAttributes',
-    'layoutsConfiguration',
-  ],
-  outputs: ['ui5LayoutChange', 'ui5LayoutConfigurationChange'],
-  exportAs: 'ui5FlexibleColumnLayout',
-})
-class FlexibleColumnLayoutComponent {
-  /**
-        Defines the columns layout and their proportion.
-
-**Note:** The layout also depends on the screen size - one column for screens smaller than 599px,
-two columns between 599px and 1023px and three columns for sizes bigger than 1023px.
-
-**For example:** layout=`TwoColumnsStartExpanded` means the layout will display up to two columns
-in 67%/33% proportion.
-        */
-  layout!:
-    | 'OneColumn'
-    | 'TwoColumnsStartExpanded'
-    | 'TwoColumnsMidExpanded'
-    | 'ThreeColumnsMidExpanded'
-    | 'ThreeColumnsEndExpanded'
-    | 'ThreeColumnsStartExpandedEndHidden'
-    | 'ThreeColumnsMidExpandedEndHidden'
-    | 'ThreeColumnsStartHiddenMidExpanded'
-    | 'ThreeColumnsStartHiddenEndExpanded'
-    | 'MidColumnFullScreen'
-    | 'EndColumnFullScreen';
-  /**
-        Specifies if the user is allowed to change the columns layout by dragging the separator between the columns.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  disableResizing!: boolean;
-  /**
-        Defines additional accessibility attributes on different areas of the component.
-
-The accessibilityAttributes object has the following fields,
-where each field is an object supporting one or more accessibility attributes:
-
- - **startColumn**: `startColumn.role` and `startColumn.name`.
- - **midColumn**: `midColumn.role` and `midColumn.name`.
- - **endColumn**: `endColumn.role` and `endColumn.name`.
- - **startSeparator**: `startSeparator.role` and `startSeparator.name`.
- - **endSeparator**: `endSeparator.role` and `endSeparator.name`.
-
-The accessibility attributes support the following values:
-
-- **role**: Defines the accessible ARIA landmark role of the area.
-Accepts the following values: `none`, `complementary`, `contentinfo`, `main` or `region`.
-
-- **name**: Defines the accessible ARIA name of the area.
-Accepts any string.
-        */
-  accessibilityAttributes!: FCLAccessibilityAttributes;
-  /**
-        Allows to customize the column proportions per screen size and layout.
-If no custom proportion provided for a specific layout, the default will be used.
-
-**Notes:**
-
-- The proportions should be given in percentages. For example ["30%", "40%", "30%"], ["70%", "30%", 0], etc.
-- The proportions should add up to 100%.
-- Hidden columns are marked as "0px", e.g. ["0px", "70%", "30%"]. Specifying 0 or "0%" for hidden columns is also valid.
-- If the proportions do not match the layout (e.g. if provided proportions ["70%", "30%", "0px"] for "OneColumn" layout), then the default proportions will be used instead.
-- Whenever the user drags the columns separator to resize the columns, the `layoutsConfiguration` object will be updated with the user-specified proportions for the given layout (and the `layout-configuration-change` event will be fired).
-- No custom configuration available for the phone screen size, as the default of 100% column width is always used there.
-        */
-  layoutsConfiguration!: LayoutConfiguration;
-
-  /**
-     Fired when the layout changes via user interaction by dragging the separators
-or by changing the component size due to resizing.
-    */
-  ui5LayoutChange!: EventEmitter<FlexibleColumnLayoutLayoutChangeEventDetail>;
-  /**
-     Fired when the `layoutsConfiguration` changes via user interaction by dragging the separators.
-    */
-  ui5LayoutConfigurationChange!: EventEmitter<FlexibleColumnLayoutLayoutConfigurationChangeEventDetail>;
-
-  private elementRef: ElementRef<FlexibleColumnLayout> = inject(ElementRef);
-  private zone = inject(NgZone);
-  private cdr = inject(ChangeDetectorRef);
-
-  get element(): FlexibleColumnLayout {
-    return this.elementRef.nativeElement;
-  }
-
-  constructor() {
-    this.cdr.detach();
-  }
-}
-export { FlexibleColumnLayoutComponent };

package/fiori/flexible-column-layout/ng-package.json

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

package/fiori/group-item/index.ts

@@ -1,44 +0,0 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  Input as InputDecorator,
-  NgZone,
-  booleanAttribute,
-  inject,
-} from '@angular/core';
-import '@ui5/webcomponents-fiori/dist/GroupItem.js';
-import GroupItem from '@ui5/webcomponents-fiori/dist/GroupItem.js';
-import { ProxyInputs } from '@ui5/webcomponents-ngx/utils';
-@ProxyInputs(['text', 'selected'])
-@Component({
-  standalone: true,
-  selector: 'ui5-group-item',
-  template: '<ng-content></ng-content>',
-  inputs: ['text', 'selected'],
-  exportAs: 'ui5GroupItem',
-})
-class GroupItemComponent {
-  /**
-        Defines the text of the group item.
-        */
-  text!: string | undefined;
-  /**
-        Defines if the group item is selected.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  selected!: boolean;
-
-  private elementRef: ElementRef<GroupItem> = inject(ElementRef);
-  private zone = inject(NgZone);
-  private cdr = inject(ChangeDetectorRef);
-
-  get element(): GroupItem {
-    return this.elementRef.nativeElement;
-  }
-
-  constructor() {
-    this.cdr.detach();
-  }
-}
-export { GroupItemComponent };

package/fiori/group-item/ng-package.json

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

package/fiori/illustrated-message/index.ts

@@ -1,115 +0,0 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  Input as InputDecorator,
-  NgZone,
-  booleanAttribute,
-  inject,
-} from '@angular/core';
-import '@ui5/webcomponents-fiori/dist/IllustratedMessage.js';
-import IllustratedMessage from '@ui5/webcomponents-fiori/dist/IllustratedMessage.js';
-import { ProxyInputs } from '@ui5/webcomponents-ngx/utils';
-@ProxyInputs([
-  'name',
-  'design',
-  'subtitleText',
-  'titleText',
-  'accessibleNameRef',
-  'decorative',
-])
-@Component({
-  standalone: true,
-  selector: 'ui5-illustrated-message',
-  template: '<ng-content></ng-content>',
-  inputs: [
-    'name',
-    'design',
-    'subtitleText',
-    'titleText',
-    'accessibleNameRef',
-    'decorative',
-  ],
-  exportAs: 'ui5IllustratedMessage',
-})
-class IllustratedMessageComponent {
-  /**
-        Defines the illustration name that will be displayed in the component.
-
-Example:
-
-`name='BeforeSearch'`, `name='UnableToUpload'`, etc..
-
-**Note:** To use the TNT illustrations,
-you need to set the `tnt` or `Tnt` prefix in front of the icon's name.
-
-Example:
-
-`name='tnt/Avatar'` or `name='TntAvatar'`.
-
-**Note:** By default the `BeforeSearch` illustration is loaded.
-When using an illustration type, other than the default, it should be loaded in addition:
-
-`import "@ui5/webcomponents-fiori/dist/illustrations/NoData.js";`
-
-For TNT illustrations:
-
-`import "@ui5/webcomponents-fiori/dist/illustrations/tnt/SessionExpired.js";`
-        */
-  name!: string;
-  /**
-        Determines which illustration breakpoint variant is used.
-
-As `IllustratedMessage` adapts itself around the `Illustration`, the other
-elements of the component are displayed differently on the different breakpoints/illustration designs.
-        */
-  design!:
-    | 'Auto'
-    | 'Base'
-    | 'Dot'
-    | 'Spot'
-    | 'Dialog'
-    | 'Scene'
-    | 'ExtraSmall'
-    | 'Small'
-    | 'Medium'
-    | 'Large';
-  /**
-        Defines the subtitle of the component.
-
-**Note:** Using this property, the default subtitle text of illustration will be overwritten.
-
-**Note:** Using `subtitle` slot, the default of this property will be overwritten.
-        */
-  subtitleText!: string | undefined;
-  /**
-        Defines the title of the component.
-
-**Note:** Using this property, the default title text of illustration will be overwritten.
-        */
-  titleText!: string | undefined;
-  /**
-        Receives id(or many ids) of the elements that label the component.
-        */
-  accessibleNameRef!: string | undefined;
-  /**
-        Defines whether the illustration is decorative.
-
-When set to `true`, the attributes `role="presentation"` and `aria-hidden="true"` are applied to the SVG element.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  decorative!: boolean;
-
-  private elementRef: ElementRef<IllustratedMessage> = inject(ElementRef);
-  private zone = inject(NgZone);
-  private cdr = inject(ChangeDetectorRef);
-
-  get element(): IllustratedMessage {
-    return this.elementRef.nativeElement;
-  }
-
-  constructor() {
-    this.cdr.detach();
-  }
-}
-export { IllustratedMessageComponent };

package/fiori/illustrated-message/ng-package.json

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

package/fiori/index.ts

@@ -1 +0,0 @@
-export { Ui5FioriModule } from './ui5-fiori.module';

package/fiori/media-gallery/index.ts

@@ -1,102 +0,0 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input as InputDecorator,
-  NgZone,
-  booleanAttribute,
-  inject,
-} from '@angular/core';
-import '@ui5/webcomponents-fiori/dist/MediaGallery.js';
-import {
-  default as MediaGallery,
-  MediaGallerySelectionChangeEventDetail,
-} from '@ui5/webcomponents-fiori/dist/MediaGallery.js';
-import { ProxyInputs, ProxyOutputs } from '@ui5/webcomponents-ngx/utils';
-@ProxyInputs([
-  'showAllThumbnails',
-  'interactiveDisplayArea',
-  'layout',
-  'menuHorizontalAlign',
-  'menuVerticalAlign',
-])
-@ProxyOutputs([
-  'selection-change: ui5SelectionChange',
-  'overflow-click: ui5OverflowClick',
-  'display-area-click: ui5DisplayAreaClick',
-])
-@Component({
-  standalone: true,
-  selector: 'ui5-media-gallery',
-  template: '<ng-content></ng-content>',
-  inputs: [
-    'showAllThumbnails',
-    'interactiveDisplayArea',
-    'layout',
-    'menuHorizontalAlign',
-    'menuVerticalAlign',
-  ],
-  outputs: ['ui5SelectionChange', 'ui5OverflowClick', 'ui5DisplayAreaClick'],
-  exportAs: 'ui5MediaGallery',
-})
-class MediaGalleryComponent {
-  /**
-        If set to `true`, all thumbnails are rendered in a scrollable container.
-If `false`, only up to five thumbnails are rendered, followed by
-an overflow button that shows the count of the remaining thumbnails.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  showAllThumbnails!: boolean;
-  /**
-        If enabled, a `display-area-click` event is fired
-when the user clicks or taps on the display area.
-
-The display area is the central area that contains
-the enlarged content of the currently selected item.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  interactiveDisplayArea!: boolean;
-  /**
-        Determines the layout of the component.
-        */
-  layout!: 'Auto' | 'Vertical' | 'Horizontal';
-  /**
-        Determines the horizontal alignment of the thumbnails menu
-vs. the central display area.
-        */
-  menuHorizontalAlign!: 'Left' | 'Right';
-  /**
-        Determines the vertical alignment of the thumbnails menu
-vs. the central display area.
-        */
-  menuVerticalAlign!: 'Top' | 'Bottom';
-
-  /**
-     Fired when selection is changed by user interaction.
-    */
-  ui5SelectionChange!: EventEmitter<MediaGallerySelectionChangeEventDetail>;
-  /**
-     Fired when the thumbnails overflow button is clicked.
-    */
-  ui5OverflowClick!: EventEmitter<void>;
-  /**
-     Fired when the display area is clicked.
-The display area is the central area that contains
-the enlarged content of the currently selected item.
-    */
-  ui5DisplayAreaClick!: EventEmitter<void>;
-
-  private elementRef: ElementRef<MediaGallery> = inject(ElementRef);
-  private zone = inject(NgZone);
-  private cdr = inject(ChangeDetectorRef);
-
-  get element(): MediaGallery {
-    return this.elementRef.nativeElement;
-  }
-
-  constructor() {
-    this.cdr.detach();
-  }
-}
-export { MediaGalleryComponent };

package/fiori/media-gallery/ng-package.json

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

package/fiori/media-gallery-item/index.ts

@@ -1,49 +0,0 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  Input as InputDecorator,
-  NgZone,
-  booleanAttribute,
-  inject,
-} from '@angular/core';
-import '@ui5/webcomponents-fiori/dist/MediaGalleryItem.js';
-import MediaGalleryItem from '@ui5/webcomponents-fiori/dist/MediaGalleryItem.js';
-import { ProxyInputs } from '@ui5/webcomponents-ngx/utils';
-@ProxyInputs(['selected', 'disabled', 'layout'])
-@Component({
-  standalone: true,
-  selector: 'ui5-media-gallery-item',
-  template: '<ng-content></ng-content>',
-  inputs: ['selected', 'disabled', 'layout'],
-  exportAs: 'ui5MediaGalleryItem',
-})
-class MediaGalleryItemComponent {
-  /**
-        Defines the selected state of the component.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  selected!: boolean;
-  /**
-        Defines whether the component is in disabled state.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  disabled!: boolean;
-  /**
-        Determines the layout of the item container.
-        */
-  layout!: 'Square' | 'Wide';
-
-  private elementRef: ElementRef<MediaGalleryItem> = inject(ElementRef);
-  private zone = inject(NgZone);
-  private cdr = inject(ChangeDetectorRef);
-
-  get element(): MediaGalleryItem {
-    return this.elementRef.nativeElement;
-  }
-
-  constructor() {
-    this.cdr.detach();
-  }
-}
-export { MediaGalleryItemComponent };

package/fiori/media-gallery-item/ng-package.json

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