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

package/main/input/index.ts

@@ -1,230 +0,0 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input as InputDecorator,
-  NgZone,
-  booleanAttribute,
-  inject,
-} from '@angular/core';
-import { GenericControlValueAccessor } from '@ui5/webcomponents-ngx/generic-cva';
-import { ProxyInputs, ProxyOutputs } from '@ui5/webcomponents-ngx/utils';
-import '@ui5/webcomponents/dist/Input.js';
-import {
-  default as Input,
-  InputSelectionChangeEventDetail,
-} from '@ui5/webcomponents/dist/Input.js';
-@ProxyInputs([
-  'disabled',
-  'placeholder',
-  'readonly',
-  'required',
-  'noTypeahead',
-  'type',
-  'value',
-  'valueState',
-  'name',
-  'showSuggestions',
-  'maxlength',
-  'accessibleName',
-  'accessibleNameRef',
-  'accessibleDescription',
-  'accessibleDescriptionRef',
-  'showClearIcon',
-  'open',
-])
-@ProxyOutputs([
-  'change: ui5Change',
-  'input: ui5Input',
-  'select: ui5Select',
-  'selection-change: ui5SelectionChange',
-  'open: ui5Open',
-  'close: ui5Close',
-])
-@Component({
-  standalone: true,
-  selector: 'ui5-input',
-  template: '<ng-content></ng-content>',
-  inputs: [
-    'disabled',
-    'placeholder',
-    'readonly',
-    'required',
-    'noTypeahead',
-    'type',
-    'value',
-    'valueState',
-    'name',
-    'showSuggestions',
-    'maxlength',
-    'accessibleName',
-    'accessibleNameRef',
-    'accessibleDescription',
-    'accessibleDescriptionRef',
-    'showClearIcon',
-    'open',
-  ],
-  outputs: [
-    'ui5Change',
-    'ui5Input',
-    'ui5Select',
-    'ui5SelectionChange',
-    'ui5Open',
-    'ui5Close',
-  ],
-  exportAs: 'ui5Input',
-  hostDirectives: [GenericControlValueAccessor],
-  host: {
-    '(change)': '_cva?.onChange?.(cvaValue);',
-    '(input)': '_cva?.onChange?.(cvaValue);',
-  },
-})
-class InputComponent {
-  /**
-        Defines whether the component is in disabled state.
-
-**Note:** A disabled component is completely noninteractive.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  disabled!: boolean;
-  /**
-        Defines a short hint intended to aid the user with data entry when the
-component has no value.
-        */
-  placeholder!: string | undefined;
-  /**
-        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 the component is required.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  required!: boolean;
-  /**
-        Defines whether the value will be autcompleted to match an item
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  noTypeahead!: boolean;
-  /**
-        Defines the HTML type of the component.
-
-**Notes:**
-
-- The particular effect of this property differs depending on the browser
-and the current language settings, especially for type `Number`.
-- The property is mostly intended to be used with touch devices
-that use different soft keyboard layouts depending on the given input type.
-        */
-  type!: 'Text' | 'Email' | 'Number' | 'Password' | 'Tel' | 'URL' | 'Search';
-  /**
-        Defines the value of the component.
-
-**Note:** The property is updated upon typing.
-        */
-  value!: string;
-  /**
-        Defines the value state of the component.
-        */
-  valueState!: 'None' | 'Positive' | 'Critical' | 'Negative' | 'Information';
-  /**
-        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.
-        */
-  name!: string | undefined;
-  /**
-        Defines whether the component should show suggestions, if such are present.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  showSuggestions!: boolean;
-  /**
-        Sets the maximum number of characters available in the input field.
-
-**Note:** This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored.
-        */
-  maxlength!: number | undefined;
-  /**
-        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 accessible description of the component.
-        */
-  accessibleDescription!: string | undefined;
-  /**
-        Receives id(or many ids) of the elements that describe the input.
-        */
-  accessibleDescriptionRef!: string | undefined;
-  /**
-        Defines whether the clear icon of the input will be shown.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  showClearIcon!: boolean;
-  /**
-        Defines whether the suggestions picker is open.
-The picker will not open if the `showSuggestions` property is set to `false`, the input is disabled or the input is readonly.
-The picker will close automatically and `close` event will be fired if the input is not in the viewport.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  open!: boolean;
-
-  /**
-     Fired when the input operation has finished by pressing Enter or on focusout.
-    */
-  ui5Change!: EventEmitter<void>;
-  /**
-     Fired when the value of the component changes at each keystroke,
-and when a suggestion item has been selected.
-    */
-  ui5Input!: EventEmitter<void>;
-  /**
-     Fired when some text has been selected.
-    */
-  ui5Select!: EventEmitter<void>;
-  /**
-     Fired when the user navigates to a suggestion item via the ARROW keys,
-as a preview, before the final selection.
-    */
-  ui5SelectionChange!: EventEmitter<InputSelectionChangeEventDetail>;
-  /**
-     Fired when the suggestions picker is open.
-    */
-  ui5Open!: EventEmitter<void>;
-  /**
-     Fired when the suggestions picker is closed.
-    */
-  ui5Close!: EventEmitter<void>;
-
-  private elementRef: ElementRef<Input> = inject(ElementRef);
-  private zone = inject(NgZone);
-  private cdr = inject(ChangeDetectorRef);
-  protected _cva = inject(GenericControlValueAccessor);
-
-  get element(): Input {
-    return this.elementRef.nativeElement;
-  }
-
-  set cvaValue(val) {
-    this.element.value = val;
-    this.cdr.detectChanges();
-  }
-  get cvaValue() {
-    return this.element.value;
-  }
-
-  constructor() {
-    this.cdr.detach();
-    this._cva.host = this;
-  }
-}
-export { InputComponent };

package/main/input/ng-package.json

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

package/main/label/index.ts

@@ -1,63 +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/Label.js';
-import Label from '@ui5/webcomponents/dist/Label.js';
-@ProxyInputs(['for', 'showColon', 'required', 'wrappingType'])
-@Component({
-  standalone: true,
-  selector: 'ui5-label',
-  template: '<ng-content></ng-content>',
-  inputs: ['for', 'showColon', 'required', 'wrappingType'],
-  exportAs: 'ui5Label',
-})
-class LabelComponent {
-  /**
-        Defines the labeled input by providing its ID.
-
-**Note:** Can be used with both `ui5-input` and native input.
-        */
-  for!: string | undefined;
-  /**
-        Defines whether colon is added to the component text.
-
-**Note:** Usually used in forms.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  showColon!: boolean;
-  /**
-        Defines whether an asterisk character is added to the component text.
-
-**Note:** Usually indicates that user input (bound with the `for` property) is required.
-In that case the `required` property of
-the corresponding input should also be set.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  required!: boolean;
-  /**
-        Defines how the text of a component will be displayed when there is not enough space.
-
-**Note:** for option "Normal" the text will wrap and the words will not be broken based on hyphenation.
-        */
-  wrappingType!: 'None' | 'Normal';
-
-  private elementRef: ElementRef<Label> = inject(ElementRef);
-  private zone = inject(NgZone);
-  private cdr = inject(ChangeDetectorRef);
-
-  get element(): Label {
-    return this.elementRef.nativeElement;
-  }
-
-  constructor() {
-    this.cdr.detach();
-  }
-}
-export { LabelComponent };

package/main/label/ng-package.json

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

package/main/link/index.ts

@@ -1,182 +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/Link.js';
-import {
-  default as Link,
-  LinkAccessibilityAttributes,
-  LinkClickEventDetail,
-} from '@ui5/webcomponents/dist/Link.js';
-@ProxyInputs([
-  'disabled',
-  'tooltip',
-  'href',
-  'target',
-  'design',
-  'interactiveAreaSize',
-  'wrappingType',
-  'accessibleName',
-  'accessibleNameRef',
-  'accessibleRole',
-  'accessibilityAttributes',
-  'accessibleDescription',
-  'icon',
-  'endIcon',
-])
-@ProxyOutputs(['click: ui5Click'])
-@Component({
-  standalone: true,
-  selector: 'ui5-link',
-  template: '<ng-content></ng-content>',
-  inputs: [
-    'disabled',
-    'tooltip',
-    'href',
-    'target',
-    'design',
-    'interactiveAreaSize',
-    'wrappingType',
-    'accessibleName',
-    'accessibleNameRef',
-    'accessibleRole',
-    'accessibilityAttributes',
-    'accessibleDescription',
-    'icon',
-    'endIcon',
-  ],
-  outputs: ['ui5Click'],
-  exportAs: 'ui5Link',
-})
-class LinkComponent {
-  /**
-        Defines whether the component is disabled.
-
-**Note:** When disabled, the click event cannot be triggered by the user.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  disabled!: boolean;
-  /**
-        Defines the tooltip of the component.
-        */
-  tooltip!: string | undefined;
-  /**
-        Defines the component href.
-
-**Note:** Standard hyperlink behavior is supported.
-        */
-  href!: string | undefined;
-  /**
-        Defines the component target.
-
-**Notes:**
-
-- `_self`
-- `_top`
-- `_blank`
-- `_parent`
-- `_search`
-
-**This property must only be used when the `href` property is set.**
-        */
-  target!: string | undefined;
-  /**
-        Defines the component design.
-
-**Note:** Avaialble options are `Default`, `Subtle`, and `Emphasized`.
-        */
-  design!: 'Default' | 'Subtle' | 'Emphasized';
-  /**
-        Defines the target area size of the link:
-- **InteractiveAreaSize.Normal**: The default target area size.
-- **InteractiveAreaSize.Large**: The target area size is enlarged to 24px in height.
-
-**Note:**The property is designed to make links easier to activate and helps meet the WCAG 2.2 Target Size requirement. It is applicable only for the SAP Horizon themes.
-**Note:**To improve <code>ui5-link</code>'s reliability and usability, it is recommended to use the <code>InteractiveAreaSize.Large</code> value in scenarios where the <code>ui5-link</code> component is placed inside another interactive component, such as a list item or a table cell.
-Setting the <code>interactiveAreaSize</code> property to <code>InteractiveAreaSize.Large</code> increases the <code>ui5-link</code>'s invisible touch area. As a result, the user's intended one-time selection command is more likely to activate the desired <code>ui5-link</code>, with minimal chance of unintentionally activating the underlying component.
-        */
-  interactiveAreaSize!: 'Normal' | 'Large';
-  /**
-        Defines how the text of a component will be displayed when there is not enough space.
-
-**Note:** By default the text will wrap. If "None" is set - the text will truncate.
-        */
-  wrappingType!: 'None' | 'Normal';
-  /**
-        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 ARIA role of the component.
-
-**Note:** Use the <code>LinkAccessibleRole.Button</code> role in cases when navigation is not expected to occur and the href property is not defined.
-        */
-  accessibleRole!: 'Link' | 'Button';
-  /**
-        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`.
-        */
-  accessibilityAttributes!: LinkAccessibilityAttributes;
-  /**
-        Defines the accessible description of the component.
-        */
-  accessibleDescription!: string | undefined;
-  /**
-        Defines the icon, displayed as graphical element within the component before the link's text.
-The SAP-icons font provides numerous options.
-
-**Note:** Usage of icon-only link is not supported, the link must always have a text.
-
-**Note:** We recommend using аn icon in the beginning or the end only, and with text.
-
-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 link's text.
-The SAP-icons font provides numerous options.
-
-**Note:** Usage of icon-only link is not supported, the link must always have a text.
-
-**Note:** We recommend using аn icon in the beginning or the end only, and with text.
-
-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;
-
-  /**
-     Fired when the component is triggered either with a mouse/tap
-or by using the Enter key.
-    */
-  ui5Click!: EventEmitter<LinkClickEventDetail>;
-
-  private elementRef: ElementRef<Link> = inject(ElementRef);
-  private zone = inject(NgZone);
-  private cdr = inject(ChangeDetectorRef);
-
-  get element(): Link {
-    return this.elementRef.nativeElement;
-  }
-
-  constructor() {
-    this.cdr.detach();
-  }
-}
-export { LinkComponent };

package/main/link/ng-package.json

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