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

package/main/toggle-button/index.ts

@@ -1,191 +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 {
-  ButtonAccessibilityAttributes,
-  ButtonClickEventDetail,
-} from '@ui5/webcomponents/dist/Button.js';
-import '@ui5/webcomponents/dist/ToggleButton.js';
-import ToggleButton from '@ui5/webcomponents/dist/ToggleButton.js';
-@ProxyInputs([
-  'design',
-  'disabled',
-  'icon',
-  'endIcon',
-  'submits',
-  'tooltip',
-  'accessibleName',
-  'accessibleNameRef',
-  'accessibilityAttributes',
-  'accessibleDescription',
-  'type',
-  'accessibleRole',
-  'loading',
-  'loadingDelay',
-  'pressed',
-])
-@ProxyOutputs(['click: ui5Click'])
-@Component({
-  standalone: true,
-  selector: 'ui5-toggle-button',
-  template: '<ng-content></ng-content>',
-  inputs: [
-    'design',
-    'disabled',
-    'icon',
-    'endIcon',
-    'submits',
-    'tooltip',
-    'accessibleName',
-    'accessibleNameRef',
-    'accessibilityAttributes',
-    'accessibleDescription',
-    'type',
-    'accessibleRole',
-    'loading',
-    'loadingDelay',
-    'pressed',
-  ],
-  outputs: ['ui5Click'],
-  exportAs: 'ui5ToggleButton',
-})
-class ToggleButtonComponent {
-  /**
-        Defines the component design.
-        */
-  design!:
-    | 'Default'
-    | 'Positive'
-    | 'Negative'
-    | 'Transparent'
-    | 'Emphasized'
-    | 'Attention';
-  /**
-        Defines whether the component is disabled.
-A disabled component can't be pressed or
-focused, and it is not in the tab chain.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  disabled!: boolean;
-  /**
-        Defines the icon, displayed as graphical element within the component.
-The SAP-icons font provides numerous options.
-
-Example:
-See all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
-        */
-  icon!: string | undefined;
-  /**
-        Defines the icon, displayed as graphical element within the component after the button text.
-
-**Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.
-Usage of `endIcon` only should be avoided.
-
-The SAP-icons font provides numerous options.
-
-Example:
-See all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
-        */
-  endIcon!: string | undefined;
-  /**
-        When set to `true`, the component will
-automatically submit the nearest HTML form element on `press`.
-
-**Note:** This property is only applicable within the context of an HTML Form element.`
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  submits!: boolean;
-  /**
-        Defines the tooltip of the component.
-
-**Note:** A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.
-        */
-  tooltip!: string | undefined;
-  /**
-        Defines the accessible ARIA name of the component.
-        */
-  accessibleName!: string | undefined;
-  /**
-        Receives id(or many ids) of the elements that label the component.
-        */
-  accessibleNameRef!: string | undefined;
-  /**
-        Defines the additional accessibility attributes that will be applied to the component.
-The following fields are supported:
-
-- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.
-Accepts the following string values: `true` or `false`
-
-- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.
-Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.
-
-- **ariaLabel**: Defines the accessible ARIA name of the component.
-Accepts any string value.
-
- - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.
-
-- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.
-Accepts a lowercase string value.
-        */
-  accessibilityAttributes!: ButtonAccessibilityAttributes;
-  /**
-        Defines the accessible description of the component.
-        */
-  accessibleDescription!: string | undefined;
-  /**
-        Defines whether the button has special form-related functionality.
-
-**Note:** This property is only applicable within the context of an HTML Form element.
-        */
-  type!: 'Button' | 'Submit' | 'Reset';
-  /**
-        Describes the accessibility role of the button.
-
-**Note:** Use <code>ButtonAccessibleRole.Link</code> role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.
-        */
-  accessibleRole!: 'Button' | 'Link';
-  /**
-        Defines whether the button shows a loading indicator.
-
-**Note:** If set to `true`, a busy indicator component will be displayed on the related button.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  loading!: boolean;
-  /**
-        Specifies the delay in milliseconds before the loading indicator appears within the associated button.
-        */
-  loadingDelay!: number;
-  /**
-        Determines whether the component is displayed as pressed.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  pressed!: boolean;
-
-  /**
-     Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.
-
-**Note:** The event will not be fired if the `disabled` property is set to `true`.
-    */
-  ui5Click!: EventEmitter<ButtonClickEventDetail>;
-
-  private elementRef: ElementRef<ToggleButton> = inject(ElementRef);
-  private zone = inject(NgZone);
-  private cdr = inject(ChangeDetectorRef);
-
-  get element(): ToggleButton {
-    return this.elementRef.nativeElement;
-  }
-
-  constructor() {
-    this.cdr.detach();
-  }
-}
-export { ToggleButtonComponent };

package/main/toggle-button/ng-package.json

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

package/main/token/index.ts

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

package/main/token/ng-package.json

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

package/main/tokenizer/index.ts

@@ -1,115 +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/Tokenizer.js';
-import {
-  default as Tokenizer,
-  TokenizerSelectionChangeEventDetail,
-  TokenizerTokenDeleteEventDetail,
-} from '@ui5/webcomponents/dist/Tokenizer.js';
-@ProxyInputs([
-  'readonly',
-  'multiLine',
-  'name',
-  'showClearAll',
-  'disabled',
-  'accessibleName',
-  'accessibleNameRef',
-])
-@ProxyOutputs([
-  'token-delete: ui5TokenDelete',
-  'selection-change: ui5SelectionChange',
-])
-@Component({
-  standalone: true,
-  selector: 'ui5-tokenizer',
-  template: '<ng-content></ng-content>',
-  inputs: [
-    'readonly',
-    'multiLine',
-    'name',
-    'showClearAll',
-    'disabled',
-    'accessibleName',
-    'accessibleNameRef',
-  ],
-  outputs: ['ui5TokenDelete', 'ui5SelectionChange'],
-  exportAs: 'ui5Tokenizer',
-})
-class TokenizerComponent {
-  /**
-        Defines whether the component is read-only.
-
-**Note:** A read-only component is not editable,
-but still provides visual feedback upon user interaction.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  readonly!: boolean;
-  /**
-        Defines whether tokens are displayed on multiple lines.
-
-**Note:** The `multiLine` property is in an experimental state and is a subject to change.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  multiLine!: boolean;
-  /**
-        Determines the name by which the component will be identified upon submission in an HTML form.
-
-**Note:** This property is only applicable within the context of an HTML Form element.
-**Note:** When the component is used inside a form element,
-the value is sent as the first element in the form data, even if it's empty.
-        */
-  name!: string | undefined;
-  /**
-        Defines whether "Clear All" button is present. Ensure `multiLine` is enabled, otherwise `showClearAll` will have no effect.
-
-**Note:** The `showClearAll` property is in an experimental state and is a subject to change.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  showClearAll!: boolean;
-  /**
-        Defines whether the component is disabled.
-
-**Note:** A disabled component is completely noninteractive.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  disabled!: boolean;
-  /**
-        Defines the accessible ARIA name of the component.
-        */
-  accessibleName!: string | undefined;
-  /**
-        Receives id(or many ids) of the elements that label the component.
-        */
-  accessibleNameRef!: string | undefined;
-
-  /**
-     Fired when tokens are being deleted (delete icon, delete or backspace is pressed)
-    */
-  ui5TokenDelete!: EventEmitter<TokenizerTokenDeleteEventDetail>;
-  /**
-     Fired when token selection is changed by user interaction
-    */
-  ui5SelectionChange!: EventEmitter<TokenizerSelectionChangeEventDetail>;
-
-  private elementRef: ElementRef<Tokenizer> = inject(ElementRef);
-  private zone = inject(NgZone);
-  private cdr = inject(ChangeDetectorRef);
-
-  get element(): Tokenizer {
-    return this.elementRef.nativeElement;
-  }
-
-  constructor() {
-    this.cdr.detach();
-  }
-}
-export { TokenizerComponent };

package/main/tokenizer/ng-package.json

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

package/main/toolbar/index.ts

@@ -1,49 +0,0 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  NgZone,
-  inject,
-} from '@angular/core';
-import { ProxyInputs } from '@ui5/webcomponents-ngx/utils';
-import '@ui5/webcomponents/dist/Toolbar.js';
-import Toolbar from '@ui5/webcomponents/dist/Toolbar.js';
-@ProxyInputs(['alignContent', 'accessibleName', 'accessibleNameRef', 'design'])
-@Component({
-  standalone: true,
-  selector: 'ui5-toolbar',
-  template: '<ng-content></ng-content>',
-  inputs: ['alignContent', 'accessibleName', 'accessibleNameRef', 'design'],
-  exportAs: 'ui5Toolbar',
-})
-class ToolbarComponent {
-  /**
-        Indicated the direction in which the Toolbar items will be aligned.
-        */
-  alignContent!: 'Start' | 'End';
-  /**
-        Defines the accessible ARIA name of the component.
-        */
-  accessibleName!: string | undefined;
-  /**
-        Receives id(or many ids) of the elements that label the input.
-        */
-  accessibleNameRef!: string | undefined;
-  /**
-        Defines the toolbar design.
-        */
-  design!: 'Solid' | 'Transparent';
-
-  private elementRef: ElementRef<Toolbar> = inject(ElementRef);
-  private zone = inject(NgZone);
-  private cdr = inject(ChangeDetectorRef);
-
-  get element(): Toolbar {
-    return this.elementRef.nativeElement;
-  }
-
-  constructor() {
-    this.cdr.detach();
-  }
-}
-export { ToolbarComponent };

package/main/toolbar/ng-package.json

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

package/main/toolbar-button/index.ts

@@ -1,174 +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/ToolbarButton.js';
-import {
-  default as ToolbarButton,
-  ToolbarButtonAccessibilityAttributes,
-} from '@ui5/webcomponents/dist/ToolbarButton.js';
-@ProxyInputs([
-  'overflowPriority',
-  'preventOverflowClosing',
-  'disabled',
-  'design',
-  'icon',
-  'endIcon',
-  'tooltip',
-  'accessibleName',
-  'accessibleNameRef',
-  'accessibilityAttributes',
-  'text',
-  'showOverflowText',
-  'width',
-])
-@ProxyOutputs(['click: ui5Click'])
-@Component({
-  standalone: true,
-  selector: 'ui5-toolbar-button',
-  template: '<ng-content></ng-content>',
-  inputs: [
-    'overflowPriority',
-    'preventOverflowClosing',
-    'disabled',
-    'design',
-    'icon',
-    'endIcon',
-    'tooltip',
-    'accessibleName',
-    'accessibleNameRef',
-    'accessibilityAttributes',
-    'text',
-    'showOverflowText',
-    'width',
-  ],
-  outputs: ['ui5Click'],
-  exportAs: 'ui5ToolbarButton',
-})
-class ToolbarButtonComponent {
-  /**
-        Property used to define the access of the item to the overflow Popover. If "NeverOverflow" option is set,
-the item never goes in the Popover, if "AlwaysOverflow" - it never comes out of it.
-        */
-  overflowPriority!: 'Default' | 'NeverOverflow' | 'AlwaysOverflow';
-  /**
-        Defines if the toolbar overflow popup should close upon intereaction with the item.
-It will close by default.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  preventOverflowClosing!: boolean;
-  /**
-        Defines if the action is disabled.
-
-**Note:** a disabled action can't be pressed or focused, and it is not in the tab chain.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  disabled!: boolean;
-  /**
-        Defines the action design.
-        */
-  design!:
-    | 'Default'
-    | 'Positive'
-    | 'Negative'
-    | 'Transparent'
-    | 'Emphasized'
-    | 'Attention';
-  /**
-        Defines the `icon` source URI.
-
-**Note:** SAP-icons font provides numerous buil-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 the icon, displayed as graphical element within the component after the button text.
-
-**Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.
-Usage of `endIcon` only should be avoided.
-
-The SAP-icons font provides numerous options.
-
-Example:
-See all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
-        */
-  endIcon!: string | undefined;
-  /**
-        Defines the tooltip of the component.
-
-**Note:** A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.
-        */
-  tooltip!: string | undefined;
-  /**
-        Defines the accessible ARIA name of the component.
-        */
-  accessibleName!: string | undefined;
-  /**
-        Receives id(or many ids) of the elements that label the component.
-        */
-  accessibleNameRef!: string | undefined;
-  /**
-        Defines the additional accessibility attributes that will be applied to the component.
-
-The following fields are supported:
-
-- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.
-Accepts the following string values: `true` or `false`
-
-- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.
-Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.
-
-- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.
-Accepts a lowercase string value.
-        */
-  accessibilityAttributes!: ToolbarButtonAccessibilityAttributes;
-  /**
-        Button text
-        */
-  text!: string | undefined;
-  /**
-        Defines whether the button text should only be displayed in the overflow popover.
-
-When set to `true`, the button appears as icon-only in the main toolbar,
-but shows both icon and text when moved to the overflow popover.
-
-**Note:** This property only takes effect when the `text` property is also set.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  showOverflowText!: boolean;
-  /**
-        Defines the width of the button.
-
-**Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.
-        */
-  width!: string | undefined;
-
-  /**
-     Fired when the component is activated either with a
-mouse/tap or by using the Enter or Space key.
-
-**Note:** The event will not be fired if the `disabled`
-property is set to `true`.
-    */
-  ui5Click!: EventEmitter<void>;
-
-  private elementRef: ElementRef<ToolbarButton> = inject(ElementRef);
-  private zone = inject(NgZone);
-  private cdr = inject(ChangeDetectorRef);
-
-  get element(): ToolbarButton {
-    return this.elementRef.nativeElement;
-  }
-
-  constructor() {
-    this.cdr.detach();
-  }
-}
-export { ToolbarButtonComponent };

package/main/toolbar-button/ng-package.json

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

package/main/toolbar-select/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 '@ui5/webcomponents/dist/ToolbarSelect.js';
-import {
-  default as ToolbarSelect,
-  ToolbarSelectChangeEventDetail,
-} from '@ui5/webcomponents/dist/ToolbarSelect.js';
-@ProxyInputs([
-  'overflowPriority',
-  'preventOverflowClosing',
-  'width',
-  'valueState',
-  'disabled',
-  'accessibleName',
-  'accessibleNameRef',
-  'value',
-])
-@ProxyOutputs(['change: ui5Change', 'open: ui5Open', 'close: ui5Close'])
-@Component({
-  standalone: true,
-  selector: 'ui5-toolbar-select',
-  template: '<ng-content></ng-content>',
-  inputs: [
-    'overflowPriority',
-    'preventOverflowClosing',
-    'width',
-    'valueState',
-    'disabled',
-    'accessibleName',
-    'accessibleNameRef',
-    'value',
-  ],
-  outputs: ['ui5Change', 'ui5Open', 'ui5Close'],
-  exportAs: 'ui5ToolbarSelect',
-})
-class ToolbarSelectComponent {
-  /**
-        Property used to define the access of the item to the overflow Popover. If "NeverOverflow" option is set,
-the item never goes in the Popover, if "AlwaysOverflow" - it never comes out of it.
-        */
-  overflowPriority!: 'Default' | 'NeverOverflow' | 'AlwaysOverflow';
-  /**
-        Defines if the toolbar overflow popup should close upon intereaction with the item.
-It will close by default.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  preventOverflowClosing!: boolean;
-  /**
-        Defines the width of the select.
-
-**Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.
-        */
-  width!: string | undefined;
-  /**
-        Defines the value state of the component.
-        */
-  valueState!: 'None' | 'Positive' | 'Critical' | 'Negative' | 'Information';
-  /**
-        Defines whether the component is in disabled state.
-
-**Note:** A disabled component is noninteractive.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  disabled!: boolean;
-  /**
-        Defines the accessible ARIA name of the component.
-        */
-  accessibleName!: string | undefined;
-  /**
-        Receives id(or many ids) of the elements that label the select.
-        */
-  accessibleNameRef!: string | undefined;
-  /**
-        Defines the value of the component:
-        */
-  value!: string | undefined;
-
-  /**
-     Fired when the selected option changes.
-    */
-  ui5Change!: EventEmitter<ToolbarSelectChangeEventDetail>;
-  /**
-     Fired after the component's dropdown menu opens.
-    */
-  ui5Open!: EventEmitter<void>;
-  /**
-     Fired after the component's dropdown menu closes.
-    */
-  ui5Close!: EventEmitter<void>;
-
-  private elementRef: ElementRef<ToolbarSelect> = inject(ElementRef);
-  private zone = inject(NgZone);
-  private cdr = inject(ChangeDetectorRef);
-
-  get element(): ToolbarSelect {
-    return this.elementRef.nativeElement;
-  }
-
-  constructor() {
-    this.cdr.detach();
-  }
-}
-export { ToolbarSelectComponent };