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

package/main/list/index.ts

@@ -1,249 +0,0 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input as InputDecorator,
-  NgZone,
-  booleanAttribute,
-  inject,
-} from '@angular/core';
-import { ProxyInputs, ProxyOutputs } from '@ui5/webcomponents-ngx/utils';
-import '@ui5/webcomponents/dist/List.js';
-import {
-  default as List,
-  ListAccessibilityAttributes,
-  ListItemClickEventDetail,
-  ListItemCloseEventDetail,
-  ListItemDeleteEventDetail,
-  ListItemToggleEventDetail,
-  ListMoveEventDetail,
-  ListSelectionChangeEventDetail,
-} from '@ui5/webcomponents/dist/List.js';
-@ProxyInputs([
-  'headerText',
-  'footerText',
-  'indent',
-  'selectionMode',
-  'noDataText',
-  'separators',
-  'growing',
-  'growingButtonText',
-  'loading',
-  'loadingDelay',
-  'accessibleName',
-  'accessibilityAttributes',
-  'accessibleNameRef',
-  'accessibleDescription',
-  'accessibleDescriptionRef',
-  'accessibleRole',
-])
-@ProxyOutputs([
-  'item-click: ui5ItemClick',
-  'item-close: ui5ItemClose',
-  'item-toggle: ui5ItemToggle',
-  'item-delete: ui5ItemDelete',
-  'selection-change: ui5SelectionChange',
-  'load-more: ui5LoadMore',
-  'move-over: ui5MoveOver',
-  'move: ui5Move',
-])
-@Component({
-  standalone: true,
-  selector: 'ui5-list',
-  template: '<ng-content></ng-content>',
-  inputs: [
-    'headerText',
-    'footerText',
-    'indent',
-    'selectionMode',
-    'noDataText',
-    'separators',
-    'growing',
-    'growingButtonText',
-    'loading',
-    'loadingDelay',
-    'accessibleName',
-    'accessibilityAttributes',
-    'accessibleNameRef',
-    'accessibleDescription',
-    'accessibleDescriptionRef',
-    'accessibleRole',
-  ],
-  outputs: [
-    'ui5ItemClick',
-    'ui5ItemClose',
-    'ui5ItemToggle',
-    'ui5ItemDelete',
-    'ui5SelectionChange',
-    'ui5LoadMore',
-    'ui5MoveOver',
-    'ui5Move',
-  ],
-  exportAs: 'ui5List',
-})
-class ListComponent {
-  /**
-        Defines the component header text.
-
-**Note:** If `header` is set this property is ignored.
-        */
-  headerText!: string | undefined;
-  /**
-        Defines the footer text.
-        */
-  footerText!: string | undefined;
-  /**
-        Determines whether the component is indented.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  indent!: boolean;
-  /**
-        Defines the selection mode of the component.
-        */
-  selectionMode!:
-    | 'None'
-    | 'Single'
-    | 'SingleStart'
-    | 'SingleEnd'
-    | 'SingleAuto'
-    | 'Multiple'
-    | 'Delete';
-  /**
-        Defines the text that is displayed when the component contains no items.
-        */
-  noDataText!: string | undefined;
-  /**
-        Defines the item separator style that is used.
-        */
-  separators!: 'All' | 'Inner' | 'None';
-  /**
-        Defines whether the component will have growing capability either by pressing a `More` button,
-or via user scroll. In both cases `load-more` event is fired.
-
-**Restrictions:** `growing="Scroll"` is not supported for Internet Explorer,
-on IE the component will fallback to `growing="Button"`.
-        */
-  growing!: 'Button' | 'Scroll' | 'None';
-  /**
-        Defines the text that will be displayed inside the growing button.
-
-**Note:** If not specified a built-in text will be displayed.
-
-**Note:** This property takes effect if the `growing` property is set to the `Button`.
-        */
-  growingButtonText!: string | undefined;
-  /**
-        Defines if the component would display a loading indicator over the list.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  loading!: boolean;
-  /**
-        Defines the delay in milliseconds, after which the loading indicator will show up for this component.
-        */
-  loadingDelay!: number;
-  /**
-        Defines the accessible name of the component.
-        */
-  accessibleName!: string | undefined;
-  /**
-        Defines additional accessibility attributes on different areas of the component.
-
-The accessibilityAttributes object has the following field:
-
- - **growingButton**: `growingButton.name`, `growingButton.description`.
-
- The accessibility attributes support the following values:
-
-- **name**: Defines the accessible ARIA name of the growing button.
-Accepts any string.
-
-- **description**: Defines the accessible ARIA description of the growing button.
-Accepts any string.
-
- **Note:** The `accessibilityAttributes` property is in an experimental state and is a subject to change.
-        */
-  accessibilityAttributes!: ListAccessibilityAttributes;
-  /**
-        Defines the IDs of the elements that label the component.
-        */
-  accessibleNameRef!: string | undefined;
-  /**
-        Defines the accessible description of the component.
-        */
-  accessibleDescription!: string | undefined;
-  /**
-        Defines the IDs of the elements that describe the component.
-        */
-  accessibleDescriptionRef!: string | undefined;
-  /**
-        Defines the accessible role of the component.
-        */
-  accessibleRole!: 'List' | 'Menu' | 'Tree' | 'ListBox';
-
-  /**
-     Fired when an item is activated, unless the item's `type` property
-is set to `Inactive`.
-
-**Note**: This event is not triggered by interactions with selection components such as the checkboxes and radio buttons,
-associated with non-default `selectionMode` values, or if any other **interactive** component
-(such as a button or input) within the list item is directly clicked.
-    */
-  ui5ItemClick!: EventEmitter<ListItemClickEventDetail>;
-  /**
-     Fired when the `Close` button of any item is clicked
-
-**Note:** This event is only applicable to list items that can be closed (such as notification list items),
-not to be confused with `item-delete`.
-    */
-  ui5ItemClose!: EventEmitter<ListItemCloseEventDetail>;
-  /**
-     Fired when the `Toggle` button of any item is clicked.
-
-**Note:** This event is only applicable to list items that can be toggled (such as notification group list items).
-    */
-  ui5ItemToggle!: EventEmitter<ListItemToggleEventDetail>;
-  /**
-     Fired when the Delete button of any item is pressed.
-
-**Note:** A Delete button is displayed on each item,
-when the component `selectionMode` property is set to `Delete`.
-    */
-  ui5ItemDelete!: EventEmitter<ListItemDeleteEventDetail>;
-  /**
-     Fired when selection is changed by user interaction
-in `Single`, `SingleStart`, `SingleEnd` and `Multiple` selection modes.
-    */
-  ui5SelectionChange!: EventEmitter<ListSelectionChangeEventDetail>;
-  /**
-     Fired when the user scrolls to the bottom of the list.
-
-**Note:** The event is fired when the `growing='Scroll'` property is enabled.
-    */
-  ui5LoadMore!: EventEmitter<void>;
-  /**
-     Fired when a movable list item is moved over a potential drop target during a dragging operation.
-
-If the new position is valid, prevent the default action of the event using `preventDefault()`.
-    */
-  ui5MoveOver!: EventEmitter<ListMoveEventDetail>;
-  /**
-     Fired when a movable list item is dropped onto a drop target.
-
-**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.
-    */
-  ui5Move!: EventEmitter<ListMoveEventDetail>;
-
-  private elementRef: ElementRef<List> = inject(ElementRef);
-  private zone = inject(NgZone);
-  private cdr = inject(ChangeDetectorRef);
-
-  get element(): List {
-    return this.elementRef.nativeElement;
-  }
-
-  constructor() {
-    this.cdr.detach();
-  }
-}
-export { ListComponent };

package/main/list/ng-package.json

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

package/main/list-item-custom/index.ts

@@ -1,112 +0,0 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input as InputDecorator,
-  NgZone,
-  booleanAttribute,
-  inject,
-} from '@angular/core';
-import { ProxyInputs, ProxyOutputs } from '@ui5/webcomponents-ngx/utils';
-import { ListItemAccessibilityAttributes } from '@ui5/webcomponents/dist/ListItem.js';
-import '@ui5/webcomponents/dist/ListItemCustom.js';
-import ListItemCustom from '@ui5/webcomponents/dist/ListItemCustom.js';
-@ProxyInputs([
-  'type',
-  'accessibilityAttributes',
-  'navigated',
-  'tooltip',
-  'highlight',
-  'selected',
-  'movable',
-  'accessibleName',
-])
-@ProxyOutputs(['detail-click: ui5DetailClick'])
-@Component({
-  standalone: true,
-  selector: 'ui5-li-custom',
-  template: '<ng-content></ng-content>',
-  inputs: [
-    'type',
-    'accessibilityAttributes',
-    'navigated',
-    'tooltip',
-    'highlight',
-    'selected',
-    'movable',
-    'accessibleName',
-  ],
-  outputs: ['ui5DetailClick'],
-  exportAs: 'ui5LiCustom',
-})
-class ListItemCustomComponent {
-  /**
-        Defines the visual indication and behavior of the list items.
-Available options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.
-
-**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,
-while with type `Inactive` and `Detail` - will not.
-        */
-  type!: 'Inactive' | 'Active' | 'Detail' | 'Navigation';
-  /**
-        Defines the additional accessibility attributes that will be applied to the component.
-The following fields are supported:
-
-- **ariaSetsize**: Defines the number of items in the current set  when not all items in the set are present in the DOM.
-**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.
-
-	- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.
-	**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.
-        */
-  accessibilityAttributes!: ListItemAccessibilityAttributes;
-  /**
-        The navigated state of the list item.
-If set to `true`, a navigation indicator is displayed at the end of the list item.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  navigated!: boolean;
-  /**
-        Defines the text of the tooltip that would be displayed for the list item.
-        */
-  tooltip!: string | undefined;
-  /**
-        Defines the highlight state of the list items.
-Available options are: `"None"` (by default), `"Positive"`, `"Critical"`, `"Information"` and `"Negative"`.
-        */
-  highlight!: 'None' | 'Positive' | 'Critical' | 'Negative' | 'Information';
-  /**
-        Defines the selected state of the component.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  selected!: boolean;
-  /**
-        Defines whether the item is movable.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  movable!: boolean;
-  /**
-        Defines the text alternative of the component.
-
-**Note**: If not provided a default text alternative will be set, if present.
-        */
-  accessibleName!: string | undefined;
-
-  /**
-     Fired when the user clicks on the detail button when type is `Detail`.
-    */
-  ui5DetailClick!: EventEmitter<void>;
-
-  private elementRef: ElementRef<ListItemCustom> = inject(ElementRef);
-  private zone = inject(NgZone);
-  private cdr = inject(ChangeDetectorRef);
-
-  get element(): ListItemCustom {
-    return this.elementRef.nativeElement;
-  }
-
-  constructor() {
-    this.cdr.detach();
-  }
-}
-export { ListItemCustomComponent };

package/main/list-item-custom/ng-package.json

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

package/main/list-item-group/index.ts

@@ -1,74 +0,0 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  NgZone,
-  inject,
-} from '@angular/core';
-import { ProxyInputs, ProxyOutputs } from '@ui5/webcomponents-ngx/utils';
-import '@ui5/webcomponents/dist/ListItemGroup.js';
-import {
-  default as ListItemGroup,
-  ListItemGroupMoveEventDetail,
-} from '@ui5/webcomponents/dist/ListItemGroup.js';
-@ProxyInputs(['headerText', 'headerAccessibleName', 'wrappingType'])
-@ProxyOutputs(['move-over: ui5MoveOver', 'move: ui5Move'])
-@Component({
-  standalone: true,
-  selector: 'ui5-li-group',
-  template: '<ng-content></ng-content>',
-  inputs: ['headerText', 'headerAccessibleName', 'wrappingType'],
-  outputs: ['ui5MoveOver', 'ui5Move'],
-  exportAs: 'ui5LiGroup',
-})
-class ListItemGroupComponent {
-  /**
-        Defines the header text of the <code>ui5-li-group</code>.
-        */
-  headerText!: string | undefined;
-  /**
-        Defines the accessible name of the header.
-        */
-  headerAccessibleName!: string | undefined;
-  /**
-        Defines if the text of the component should wrap when it's too long.
-When set to "Normal", the content (title, description) will be wrapped
-using the `ui5-expandable-text` component.<br/>
-
-The text can wrap up to 100 characters on small screens (size S) and
-up to 300 characters on larger screens (size M and above). When text exceeds
-these limits, it truncates with an ellipsis followed by a text expansion trigger.
-
-Available options are:
-- `None` (default) - The text will truncate with an ellipsis.
-- `Normal` - The text will wrap (without truncation).
-        */
-  wrappingType!: 'None' | 'Normal';
-
-  /**
-     Fired when a movable list item is moved over a potential drop target during a dragging operation.
-
-If the new position is valid, prevent the default action of the event using `preventDefault()`.
-    */
-  ui5MoveOver!: EventEmitter<ListItemGroupMoveEventDetail>;
-  /**
-     Fired when a movable list item is dropped onto a drop target.
-
-**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.
-    */
-  ui5Move!: EventEmitter<ListItemGroupMoveEventDetail>;
-
-  private elementRef: ElementRef<ListItemGroup> = inject(ElementRef);
-  private zone = inject(NgZone);
-  private cdr = inject(ChangeDetectorRef);
-
-  get element(): ListItemGroup {
-    return this.elementRef.nativeElement;
-  }
-
-  constructor() {
-    this.cdr.detach();
-  }
-}
-export { ListItemGroupComponent };

package/main/list-item-group/ng-package.json

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

package/main/list-item-standard/index.ts

@@ -1,175 +0,0 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input as InputDecorator,
-  NgZone,
-  booleanAttribute,
-  inject,
-} from '@angular/core';
-import { ProxyInputs, ProxyOutputs } from '@ui5/webcomponents-ngx/utils';
-import { ListItemAccessibilityAttributes } from '@ui5/webcomponents/dist/ListItem.js';
-import '@ui5/webcomponents/dist/ListItemStandard.js';
-import ListItemStandard from '@ui5/webcomponents/dist/ListItemStandard.js';
-@ProxyInputs([
-  'type',
-  'accessibilityAttributes',
-  'navigated',
-  'tooltip',
-  'highlight',
-  'selected',
-  'text',
-  'description',
-  'icon',
-  'iconEnd',
-  'additionalText',
-  'additionalTextState',
-  'movable',
-  'accessibleName',
-  'wrappingType',
-])
-@ProxyOutputs(['detail-click: ui5DetailClick'])
-@Component({
-  standalone: true,
-  selector: 'ui5-li',
-  template: '<ng-content></ng-content>',
-  inputs: [
-    'type',
-    'accessibilityAttributes',
-    'navigated',
-    'tooltip',
-    'highlight',
-    'selected',
-    'text',
-    'description',
-    'icon',
-    'iconEnd',
-    'additionalText',
-    'additionalTextState',
-    'movable',
-    'accessibleName',
-    'wrappingType',
-  ],
-  outputs: ['ui5DetailClick'],
-  exportAs: 'ui5Li',
-})
-class ListItemStandardComponent {
-  /**
-        Defines the visual indication and behavior of the list items.
-Available options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.
-
-**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,
-while with type `Inactive` and `Detail` - will not.
-        */
-  type!: 'Inactive' | 'Active' | 'Detail' | 'Navigation';
-  /**
-        Defines the additional accessibility attributes that will be applied to the component.
-The following fields are supported:
-
-- **ariaSetsize**: Defines the number of items in the current set  when not all items in the set are present in the DOM.
-**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.
-
-	- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.
-	**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.
-        */
-  accessibilityAttributes!: ListItemAccessibilityAttributes;
-  /**
-        The navigated state of the list item.
-If set to `true`, a navigation indicator is displayed at the end of the list item.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  navigated!: boolean;
-  /**
-        Defines the text of the tooltip that would be displayed for the list item.
-        */
-  tooltip!: string | undefined;
-  /**
-        Defines the highlight state of the list items.
-Available options are: `"None"` (by default), `"Positive"`, `"Critical"`, `"Information"` and `"Negative"`.
-        */
-  highlight!: 'None' | 'Positive' | 'Critical' | 'Negative' | 'Information';
-  /**
-        Defines the selected state of the component.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  selected!: boolean;
-  /**
-        Defines the text of the component.
-        */
-  text!: string | undefined;
-  /**
-        Defines the description displayed right under the item text, if such is present.
-        */
-  description!: string | undefined;
-  /**
-        Defines the `icon` source URI.
-
-**Note:**
-SAP-icons font provides numerous built-in icons. To find all the available icons, see the
-[Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
-        */
-  icon!: string | undefined;
-  /**
-        Defines whether the `icon` should be displayed in the beginning of the list item or in the end.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  iconEnd!: boolean;
-  /**
-        Defines the `additionalText`, displayed in the end of the list item.
-        */
-  additionalText!: string | undefined;
-  /**
-        Defines the state of the `additionalText`.
-
-Available options are: `"None"` (by default), `"Positive"`, `"Critical"`, `"Information"` and `"Negative"`.
-        */
-  additionalTextState!:
-    | 'None'
-    | 'Positive'
-    | 'Critical'
-    | 'Negative'
-    | 'Information';
-  /**
-        Defines whether the item is movable.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  movable!: boolean;
-  /**
-        Defines the text alternative of the component.
-Note: If not provided a default text alternative will be set, if present.
-        */
-  accessibleName!: string | undefined;
-  /**
-        Defines if the text of the component should wrap when it's too long.
-When set to "Normal", the content (title, description) will be wrapped
-using the `ui5-expandable-text` component.<br/>
-
-The text can wrap up to 100 characters on small screens (size S) and
-up to 300 characters on larger screens (size M and above). When text exceeds
-these limits, it truncates with an ellipsis followed by a text expansion trigger.
-
-Available options are:
-- `None` (default) - The text will truncate with an ellipsis.
-- `Normal` - The text will wrap (without truncation).
-        */
-  wrappingType!: 'None' | 'Normal';
-
-  /**
-     Fired when the user clicks on the detail button when type is `Detail`.
-    */
-  ui5DetailClick!: EventEmitter<void>;
-
-  private elementRef: ElementRef<ListItemStandard> = inject(ElementRef);
-  private zone = inject(NgZone);
-  private cdr = inject(ChangeDetectorRef);
-
-  get element(): ListItemStandard {
-    return this.elementRef.nativeElement;
-  }
-
-  constructor() {
-    this.cdr.detach();
-  }
-}
-export { ListItemStandardComponent };

package/main/list-item-standard/ng-package.json

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