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

package/main/responsive-popover/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 { PopupBeforeCloseEventDetail } from '@ui5/webcomponents/dist/Popup.js';
-import '@ui5/webcomponents/dist/ResponsivePopover.js';
-import ResponsivePopover from '@ui5/webcomponents/dist/ResponsivePopover.js';
-@ProxyInputs([
-  'initialFocus',
-  'preventFocusRestore',
-  'accessibleName',
-  'accessibleNameRef',
-  'accessibleRole',
-  'accessibleDescription',
-  'accessibleDescriptionRef',
-  'preventInitialFocus',
-  'open',
-  'headerText',
-  'placement',
-  'horizontalAlign',
-  'verticalAlign',
-  'modal',
-  'hideArrow',
-  'allowTargetOverlap',
-  'opener',
-])
-@ProxyOutputs([
-  'before-open: ui5BeforeOpen',
-  'open: ui5Open',
-  'before-close: ui5BeforeClose',
-  'close: ui5Close',
-])
-@Component({
-  standalone: true,
-  selector: 'ui5-responsive-popover',
-  template: '<ng-content></ng-content>',
-  inputs: [
-    'initialFocus',
-    'preventFocusRestore',
-    'accessibleName',
-    'accessibleNameRef',
-    'accessibleRole',
-    'accessibleDescription',
-    'accessibleDescriptionRef',
-    'preventInitialFocus',
-    'open',
-    'headerText',
-    'placement',
-    'horizontalAlign',
-    'verticalAlign',
-    'modal',
-    'hideArrow',
-    'allowTargetOverlap',
-    'opener',
-  ],
-  outputs: ['ui5BeforeOpen', 'ui5Open', 'ui5BeforeClose', 'ui5Close'],
-  exportAs: 'ui5ResponsivePopover',
-})
-class ResponsivePopoverComponent {
-  /**
-        Defines the ID of the HTML Element, which will get the initial focus.
-
-**Note:** If an element with `autofocus` attribute is added inside the component,
-`initialFocus` won't take effect.
-        */
-  initialFocus!: string | undefined;
-  /**
-        Defines if the focus should be returned to the previously focused element,
-when the popup closes.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  preventFocusRestore!: boolean;
-  /**
-        Defines the accessible name of the component.
-        */
-  accessibleName!: string | undefined;
-  /**
-        Defines the IDs of the elements that label the component.
-        */
-  accessibleNameRef!: string | undefined;
-  /**
-        Allows setting a custom role.
-        */
-  accessibleRole!: 'None' | 'Dialog' | 'AlertDialog';
-  /**
-        Defines the accessible description of the component.
-        */
-  accessibleDescription!: string | undefined;
-  /**
-        Receives id(or many ids) of the elements that describe the component.
-        */
-  accessibleDescriptionRef!: string | undefined;
-  /**
-        Indicates whether initial focus should be prevented.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  preventInitialFocus!: boolean;
-  /**
-        Indicates if the element is open
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  open!: boolean;
-  /**
-        Defines the header text.
-
-**Note:** If `header` slot is provided, the `headerText` is ignored.
-        */
-  headerText!: string | undefined;
-  /**
-        Determines on which side the component is placed at.
-        */
-  placement!: 'Start' | 'End' | 'Top' | 'Bottom';
-  /**
-        Determines the horizontal alignment of the component.
-        */
-  horizontalAlign!: 'Center' | 'Start' | 'End' | 'Stretch';
-  /**
-        Determines the vertical alignment of the component.
-        */
-  verticalAlign!: 'Center' | 'Top' | 'Bottom' | 'Stretch';
-  /**
-        Defines whether the component should close when
-clicking/tapping outside of the popover.
-If enabled, it blocks any interaction with the background.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  modal!: boolean;
-  /**
-        Determines whether the component arrow is hidden.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  hideArrow!: boolean;
-  /**
-        Determines if there is no enough space, the component can be placed
-over the target.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  allowTargetOverlap!: boolean;
-  /**
-        Defines the ID or DOM Reference of the element at which the popover is shown.
-When using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.
-You can only set the `opener` attribute to a DOM Reference when using JavaScript.
-        */
-  opener!: HTMLElement | string | null | undefined;
-
-  /**
-     Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.
-    */
-  ui5BeforeOpen!: EventEmitter<void>;
-  /**
-     Fired after the component is opened.
-    */
-  ui5Open!: EventEmitter<void>;
-  /**
-     Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.
-    */
-  ui5BeforeClose!: EventEmitter<PopupBeforeCloseEventDetail>;
-  /**
-     Fired after the component is closed.
-    */
-  ui5Close!: EventEmitter<void>;
-
-  private elementRef: ElementRef<ResponsivePopover> = inject(ElementRef);
-  private zone = inject(NgZone);
-  private cdr = inject(ChangeDetectorRef);
-
-  get element(): ResponsivePopover {
-    return this.elementRef.nativeElement;
-  }
-
-  constructor() {
-    this.cdr.detach();
-  }
-}
-export { ResponsivePopoverComponent };

package/main/responsive-popover/ng-package.json

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

package/main/segmented-button/index.ts

@@ -1,88 +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/SegmentedButton.js';
-import {
-  default as SegmentedButton,
-  SegmentedButtonSelectionChangeEventDetail,
-} from '@ui5/webcomponents/dist/SegmentedButton.js';
-@ProxyInputs([
-  'accessibleName',
-  'accessibleNameRef',
-  'accessibleDescription',
-  'accessibleDescriptionRef',
-  'selectionMode',
-  'itemsFitContent',
-])
-@ProxyOutputs(['selection-change: ui5SelectionChange'])
-@Component({
-  standalone: true,
-  selector: 'ui5-segmented-button',
-  template: '<ng-content></ng-content>',
-  inputs: [
-    'accessibleName',
-    'accessibleNameRef',
-    'accessibleDescription',
-    'accessibleDescriptionRef',
-    'selectionMode',
-    'itemsFitContent',
-  ],
-  outputs: ['ui5SelectionChange'],
-  exportAs: 'ui5SegmentedButton',
-})
-class SegmentedButtonComponent {
-  /**
-        Defines the accessible ARIA name of the component.
-        */
-  accessibleName!: string | undefined;
-  /**
-        Defines the IDs of the HTML Elements that label the component.
-        */
-  accessibleNameRef!: string | undefined;
-  /**
-        Defines the accessible description of the component.
-        */
-  accessibleDescription!: string | undefined;
-  /**
-        Defines the IDs of the HTML Elements that describe the component.
-        */
-  accessibleDescriptionRef!: string | undefined;
-  /**
-        Defines the component selection mode.
-        */
-  selectionMode!: 'Single' | 'Multiple';
-  /**
-        Determines whether the segmented button items should be sized to fit their content.
-
-If set to `true`, each item will be sized to fit its content, with any extra space distributed after the last item.
-If set to `false` (the default), all items will be equally sized to fill the available space.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  itemsFitContent!: boolean;
-
-  /**
-     Fired when the selected item changes.
-    */
-  ui5SelectionChange!: EventEmitter<SegmentedButtonSelectionChangeEventDetail>;
-
-  private elementRef: ElementRef<SegmentedButton> = inject(ElementRef);
-  private zone = inject(NgZone);
-  private cdr = inject(ChangeDetectorRef);
-
-  get element(): SegmentedButton {
-    return this.elementRef.nativeElement;
-  }
-
-  constructor() {
-    this.cdr.detach();
-  }
-}
-export { SegmentedButtonComponent };

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

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

package/main/segmented-button-item/index.ts

@@ -1,95 +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/SegmentedButtonItem.js';
-import SegmentedButtonItem from '@ui5/webcomponents/dist/SegmentedButtonItem.js';
-@ProxyInputs([
-  'disabled',
-  'selected',
-  'tooltip',
-  'accessibleName',
-  'accessibleNameRef',
-  'accessibleDescription',
-  'accessibleDescriptionRef',
-  'icon',
-])
-@Component({
-  standalone: true,
-  selector: 'ui5-segmented-button-item',
-  template: '<ng-content></ng-content>',
-  inputs: [
-    'disabled',
-    'selected',
-    'tooltip',
-    'accessibleName',
-    'accessibleNameRef',
-    'accessibleDescription',
-    'accessibleDescriptionRef',
-    'icon',
-  ],
-  exportAs: 'ui5SegmentedButtonItem',
-})
-class SegmentedButtonItemComponent {
-  /**
-        Defines whether the component is disabled.
-A disabled component can't be selected or
-focused, and it is not in the tab chain.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  disabled!: boolean;
-  /**
-        Determines whether the component is displayed as selected.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  selected!: 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 accessible description of the component.
-        */
-  accessibleDescription!: string | undefined;
-  /**
-        Defines the IDs of the HTML Elements that describe the component.
-        */
-  accessibleDescriptionRef!: string | undefined;
-  /**
-        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;
-
-  private elementRef: ElementRef<SegmentedButtonItem> = inject(ElementRef);
-  private zone = inject(NgZone);
-  private cdr = inject(ChangeDetectorRef);
-
-  get element(): SegmentedButtonItem {
-    return this.elementRef.nativeElement;
-  }
-
-  constructor() {
-    this.cdr.detach();
-  }
-}
-export { SegmentedButtonItemComponent };

package/main/segmented-button-item/ng-package.json

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

package/main/select/index.ts

@@ -1,171 +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/Select.js';
-import {
-  default as Select,
-  SelectChangeEventDetail,
-  SelectLiveChangeEventDetail,
-} from '@ui5/webcomponents/dist/Select.js';
-@ProxyInputs([
-  'disabled',
-  'name',
-  'valueState',
-  'required',
-  'readonly',
-  'accessibleName',
-  'accessibleNameRef',
-  'accessibleDescription',
-  'accessibleDescriptionRef',
-  'tooltip',
-  'textSeparator',
-  'value',
-])
-@ProxyOutputs([
-  'change: ui5Change',
-  'live-change: ui5LiveChange',
-  'open: ui5Open',
-  'close: ui5Close',
-])
-@Component({
-  standalone: true,
-  selector: 'ui5-select',
-  template: '<ng-content></ng-content>',
-  inputs: [
-    'disabled',
-    'name',
-    'valueState',
-    'required',
-    'readonly',
-    'accessibleName',
-    'accessibleNameRef',
-    'accessibleDescription',
-    'accessibleDescriptionRef',
-    'tooltip',
-    'textSeparator',
-    'value',
-  ],
-  outputs: ['ui5Change', 'ui5LiveChange', 'ui5Open', 'ui5Close'],
-  exportAs: 'ui5Select',
-  hostDirectives: [GenericControlValueAccessor],
-  host: { '(change)': '_cva?.onChange?.(cvaValue);' },
-})
-class SelectComponent {
-  /**
-        Defines whether the component is in disabled state.
-
-**Note:** A disabled component is noninteractive.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  disabled!: 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.
-        */
-  name!: string | undefined;
-  /**
-        Defines the value state of the component.
-        */
-  valueState!: 'None' | 'Positive' | 'Critical' | 'Negative' | 'Information';
-  /**
-        Defines whether the component is required.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  required!: boolean;
-  /**
-        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 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 accessible description of the component.
-        */
-  accessibleDescription!: string | undefined;
-  /**
-        Receives id(or many ids) of the elements that describe the select.
-        */
-  accessibleDescriptionRef!: string | undefined;
-  /**
-        Defines the tooltip of the select.
-        */
-  tooltip!: string | undefined;
-  /**
-        Defines the separator type for the two columns layout when Select is in read-only mode.
-        */
-  textSeparator!: 'Bullet' | 'Dash' | 'VerticalLine';
-  /**
-        Defines the value of the component:
-
-- when get - returns the value of the component or the value/text content of the selected option.
-- when set - selects the option with matching `value` property or text content.
-
-**Note:** Use either the Select's value or the Options' selected property.
-Mixed usage could result in unexpected behavior.
-
-**Note:** If the given value does not match any existing option,
-no option will be selected and the Select component will be displayed as empty.
-        */
-  value!: string;
-
-  /**
-     Fired when the selected option changes.
-    */
-  ui5Change!: EventEmitter<SelectChangeEventDetail>;
-  /**
-     Fired when the user navigates through the options, but the selection is not finalized,
-or when pressing the ESC key to revert the current selection.
-    */
-  ui5LiveChange!: EventEmitter<SelectLiveChangeEventDetail>;
-  /**
-     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<Select> = inject(ElementRef);
-  private zone = inject(NgZone);
-  private cdr = inject(ChangeDetectorRef);
-  protected _cva = inject(GenericControlValueAccessor);
-
-  get element(): Select {
-    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 { SelectComponent };

package/main/select/ng-package.json

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

package/main/slider/index.ts

@@ -1,149 +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/Slider.js';
-import Slider from '@ui5/webcomponents/dist/Slider.js';
-@ProxyInputs([
-  'min',
-  'max',
-  'name',
-  'step',
-  'labelInterval',
-  'showTickmarks',
-  'showTooltip',
-  'editableTooltip',
-  'disabled',
-  'accessibleName',
-  'value',
-])
-@ProxyOutputs(['change: ui5Change', 'input: ui5Input'])
-@Component({
-  standalone: true,
-  selector: 'ui5-slider',
-  template: '<ng-content></ng-content>',
-  inputs: [
-    'min',
-    'max',
-    'name',
-    'step',
-    'labelInterval',
-    'showTickmarks',
-    'showTooltip',
-    'editableTooltip',
-    'disabled',
-    'accessibleName',
-    'value',
-  ],
-  outputs: ['ui5Change', 'ui5Input'],
-  exportAs: 'ui5Slider',
-  hostDirectives: [GenericControlValueAccessor],
-  host: {
-    '(change)': '_cva?.onChange?.(cvaValue);',
-    '(input)': '_cva?.onChange?.(cvaValue);',
-  },
-})
-class SliderComponent {
-  /**
-        Defines the minimum value of the slider.
-        */
-  min!: number;
-  /**
-        Defines the maximum value of the slider.
-        */
-  max!: number;
-  /**
-        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 the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).
-
-**Note:** If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.
-        */
-  step!: number;
-  /**
-        Displays a label with a value on every N-th step.
-
-**Note:** The step and tickmarks properties must be enabled.
-Example - if the step value is set to 2 and the label interval is also specified to 2 - then every second
-tickmark will be labelled, which means every 4th value number.
-        */
-  labelInterval!: number;
-  /**
-        Enables tickmarks visualization for each step.
-
-**Note:** The step must be a positive number.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  showTickmarks!: boolean;
-  /**
-        Enables handle tooltip displaying the current value.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  showTooltip!: boolean;
-  /**
-        
-Indicates whether input fields should be used as tooltips for the handles.
-
-**Note:** Setting this option to true will only work if showTooltip is set to true.
-**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  editableTooltip!: boolean;
-  /**
-        Defines whether the slider is in disabled state.
-        */
-  @InputDecorator({ transform: booleanAttribute })
-  disabled!: boolean;
-  /**
-        Defines the accessible ARIA name of the component.
-        */
-  accessibleName!: string | undefined;
-  /**
-        Current value of the slider
-        */
-  value!: number;
-
-  /**
-     Fired when the value changes and the user has finished interacting with the slider.
-    */
-  ui5Change!: EventEmitter<void>;
-  /**
-     Fired when the value changes due to user interaction that is not yet finished - during mouse/touch dragging.
-    */
-  ui5Input!: EventEmitter<void>;
-
-  private elementRef: ElementRef<Slider> = inject(ElementRef);
-  private zone = inject(NgZone);
-  private cdr = inject(ChangeDetectorRef);
-  protected _cva = inject(GenericControlValueAccessor);
-
-  get element(): Slider {
-    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 { SliderComponent };

package/main/slider/ng-package.json

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