@ui5/webcomponents-ngx 0.3.0-rc.2 → 0.3.0-rc.4

package/main/date-range-picker/index.d.ts

@@ -23,13 +23,13 @@ declare class DateRangePickerComponent {
     /**
        Determines the minimum date available for selection.
   
-  <b>Note:</b> If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).
+  **Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).
       */
     minDate: string;
     /**
        Determines the maximum date available for selection.
   
-  <b>Note:</b> If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).
+  **Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).
       */
     maxDate: string;
     /**
@@ -39,7 +39,7 @@ declare class DateRangePickerComponent {
     /**
        Defines the value state of the component.
       */
-    valueState: 'None' | 'Success' | 'Warning' | 'Error' | 'Information';
+    valueState: 'None' | 'Positive' | 'Critical' | 'Negative' | 'Information';
     /**
        Defines whether the component is required.
       */
@@ -56,32 +56,27 @@ declare class DateRangePickerComponent {
        Defines a short hint, intended to aid the user with data entry when the
   component has no value.
   
-  <br><br>
-  <b>Note:</b> When no placeholder is set, the format pattern is displayed as a placeholder.
+  **Note:** When no placeholder is set, the format pattern is displayed as a placeholder.
   Passing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.
       */
     placeholder: string | undefined;
     /**
-       Determines the name with which the component will be submitted in an HTML form.
+       Determines the name by which the component will be identified upon submission in an HTML form.
   
-  <br><br>
-  <b>Important:</b> For the <code>name</code> property to have effect, you must add the following import to your project:
-  <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
-  
-  <br><br>
-  <b>Note:</b> When set, a native <code>input</code> HTML element
-  will be created inside the component so that it can be submitted as
-  part of an HTML form. Do not use this property unless you need to submit a form.
+  **Note:** This property is only applicable within the context of an HTML Form element.
       */
     name: string;
     /**
        Defines the visibility of the week numbers column.
-  <br><br>
   
-  <b>Note:</b> For calendars other than Gregorian,
+  **Note:** For calendars other than Gregorian,
   the week numbers are not displayed regardless of what is set.
       */
     hideWeekNumbers: boolean;
+    /**
+       Defines the open or closed state of the popover.
+      */
+    open: boolean;
     /**
        Defines the aria-label attribute for the component.
       */
@@ -118,6 +113,6 @@ declare class DateRangePickerComponent {
     get cvaValue(): string;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<DateRangePickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DateRangePickerComponent, "ui5-daterange-picker", never, { "primaryCalendarType": { "alias": "primaryCalendarType"; "required": false; }; "secondaryCalendarType": { "alias": "secondaryCalendarType"; "required": false; }; "formatPattern": { "alias": "formatPattern"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "value": { "alias": "value"; "required": false; }; "valueState": { "alias": "valueState"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "name": { "alias": "name"; "required": false; }; "hideWeekNumbers": { "alias": "hideWeekNumbers"; "required": false; }; "accessibleName": { "alias": "accessibleName"; "required": false; }; "accessibleNameRef": { "alias": "accessibleNameRef"; "required": false; }; "delimiter": { "alias": "delimiter"; "required": false; }; }, { "ui5Change": "ui5Change"; "ui5Input": "ui5Input"; "ui5ValueStateChange": "ui5ValueStateChange"; }, never, ["*"], true, [{ directive: typeof i1.GenericControlValueAccessor; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DateRangePickerComponent, "ui5-daterange-picker", ["ui5DaterangePicker"], { "primaryCalendarType": { "alias": "primaryCalendarType"; "required": false; }; "secondaryCalendarType": { "alias": "secondaryCalendarType"; "required": false; }; "formatPattern": { "alias": "formatPattern"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "value": { "alias": "value"; "required": false; }; "valueState": { "alias": "valueState"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "name": { "alias": "name"; "required": false; }; "hideWeekNumbers": { "alias": "hideWeekNumbers"; "required": false; }; "open": { "alias": "open"; "required": false; }; "accessibleName": { "alias": "accessibleName"; "required": false; }; "accessibleNameRef": { "alias": "accessibleNameRef"; "required": false; }; "delimiter": { "alias": "delimiter"; "required": false; }; }, { "ui5Change": "ui5Change"; "ui5Input": "ui5Input"; "ui5ValueStateChange": "ui5ValueStateChange"; }, never, ["*"], true, [{ directive: typeof i1.GenericControlValueAccessor; inputs: {}; outputs: {}; }]>;
 }
 export { DateRangePickerComponent };

package/main/date-time-picker/index.d.ts

@@ -23,13 +23,13 @@ declare class DateTimePickerComponent {
     /**
        Determines the minimum date available for selection.
   
-  <b>Note:</b> If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).
+  **Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).
       */
     minDate: string;
     /**
        Determines the maximum date available for selection.
   
-  <b>Note:</b> If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).
+  **Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).
       */
     maxDate: string;
     /**
@@ -39,7 +39,7 @@ declare class DateTimePickerComponent {
     /**
        Defines the value state of the component.
       */
-    valueState: 'None' | 'Success' | 'Warning' | 'Error' | 'Information';
+    valueState: 'None' | 'Positive' | 'Critical' | 'Negative' | 'Information';
     /**
        Defines whether the component is required.
       */
@@ -56,32 +56,27 @@ declare class DateTimePickerComponent {
        Defines a short hint, intended to aid the user with data entry when the
   component has no value.
   
-  <br><br>
-  <b>Note:</b> When no placeholder is set, the format pattern is displayed as a placeholder.
+  **Note:** When no placeholder is set, the format pattern is displayed as a placeholder.
   Passing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.
       */
     placeholder: string | undefined;
     /**
-       Determines the name with which the component will be submitted in an HTML form.
+       Determines the name by which the component will be identified upon submission in an HTML form.
   
-  <br><br>
-  <b>Important:</b> For the <code>name</code> property to have effect, you must add the following import to your project:
-  <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
-  
-  <br><br>
-  <b>Note:</b> When set, a native <code>input</code> HTML element
-  will be created inside the component so that it can be submitted as
-  part of an HTML form. Do not use this property unless you need to submit a form.
+  **Note:** This property is only applicable within the context of an HTML Form element.
       */
     name: string;
     /**
        Defines the visibility of the week numbers column.
-  <br><br>
   
-  <b>Note:</b> For calendars other than Gregorian,
+  **Note:** For calendars other than Gregorian,
   the week numbers are not displayed regardless of what is set.
       */
     hideWeekNumbers: boolean;
+    /**
+       Defines the open or closed state of the popover.
+      */
+    open: boolean;
     /**
        Defines the aria-label attribute for the component.
       */
@@ -113,6 +108,6 @@ declare class DateTimePickerComponent {
     get cvaValue(): string;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<DateTimePickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DateTimePickerComponent, "ui5-datetime-picker", never, { "primaryCalendarType": { "alias": "primaryCalendarType"; "required": false; }; "secondaryCalendarType": { "alias": "secondaryCalendarType"; "required": false; }; "formatPattern": { "alias": "formatPattern"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "value": { "alias": "value"; "required": false; }; "valueState": { "alias": "valueState"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "name": { "alias": "name"; "required": false; }; "hideWeekNumbers": { "alias": "hideWeekNumbers"; "required": false; }; "accessibleName": { "alias": "accessibleName"; "required": false; }; "accessibleNameRef": { "alias": "accessibleNameRef"; "required": false; }; }, { "ui5Change": "ui5Change"; "ui5Input": "ui5Input"; "ui5ValueStateChange": "ui5ValueStateChange"; }, never, ["*"], true, [{ directive: typeof i1.GenericControlValueAccessor; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DateTimePickerComponent, "ui5-datetime-picker", ["ui5DatetimePicker"], { "primaryCalendarType": { "alias": "primaryCalendarType"; "required": false; }; "secondaryCalendarType": { "alias": "secondaryCalendarType"; "required": false; }; "formatPattern": { "alias": "formatPattern"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "value": { "alias": "value"; "required": false; }; "valueState": { "alias": "valueState"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "name": { "alias": "name"; "required": false; }; "hideWeekNumbers": { "alias": "hideWeekNumbers"; "required": false; }; "open": { "alias": "open"; "required": false; }; "accessibleName": { "alias": "accessibleName"; "required": false; }; "accessibleNameRef": { "alias": "accessibleNameRef"; "required": false; }; }, { "ui5Change": "ui5Change"; "ui5Input": "ui5Input"; "ui5ValueStateChange": "ui5ValueStateChange"; }, never, ["*"], true, [{ directive: typeof i1.GenericControlValueAccessor; inputs: {}; outputs: {}; }]>;
 }
 export { DateTimePickerComponent };

package/main/dialog/index.d.ts

@@ -6,6 +6,9 @@ import * as i0 from "@angular/core";
 declare class DialogComponent {
     /**
        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;
     /**
@@ -13,10 +16,6 @@ declare class DialogComponent {
   when the popup closes.
       */
     preventFocusRestore: boolean;
-    /**
-       Indicates if the element is open
-      */
-    open: boolean;
     /**
        Defines the accessible name of the component.
       */
@@ -29,26 +28,34 @@ declare class DialogComponent {
        Allows setting a custom role.
       */
     accessibleRole: 'None' | 'Dialog' | 'AlertDialog';
+    /**
+       Indicates whether initial focus should be prevented.
+      */
+    preventInitialFocus: boolean;
+    /**
+       Indicates if the element is open
+      */
+    open: boolean;
     /**
        Defines the header text.
-  <br><br>
-  <b>Note:</b> If <code>header</code> slot is provided, the <code>headerText</code> is ignored.
+  
+  **Note:** If `header` slot is provided, the `headerText` is ignored.
       */
     headerText: string;
     /**
        Determines whether the component should be stretched to fullscreen.
-  <br><br>
-  <b>Note:</b> The component will be stretched to approximately
+  
+  **Note:** The component will be stretched to approximately
   90% of the viewport.
       */
     stretch: boolean;
     /**
        Determines whether the component is draggable.
   If this property is set to true, the Dialog will be draggable by its header.
-  <br><br>
-  <b>Note:</b> The component can be draggable only in desktop mode.
-  <br><br>
-  <b>Note:</b> This property overrides the default HTML "draggable" attribute native behavior.
+  
+  **Note:** The component can be draggable only in desktop mode.
+  
+  **Note:** This property overrides the default HTML "draggable" attribute native behavior.
   When "draggable" is set to true, the native browser "draggable"
   behavior is prevented and only the Dialog custom logic ("draggable by its header") works.
       */
@@ -57,40 +64,41 @@ declare class DialogComponent {
        Configures the component to be resizable.
   If this property is set to true, the Dialog will have a resize handle in its bottom right corner in LTR languages.
   In RTL languages, the resize handle will be placed in the bottom left corner.
-  <br><br>
-  <b>Note:</b> The component can be resizable only in desktop mode.
-  <br>
-  <b>Note:</b> Upon resizing, externally defined height and width styling will be ignored.
+  
+  **Note:** The component can be resizable only in desktop mode.
+  
+  **Note:** Upon resizing, externally defined height and width styling will be ignored.
       */
     resizable: boolean;
     /**
-       Defines the state of the <code>Dialog</code>.
-  <br><b>Note:</b> If <code>"Error"</code> and <code>"Warning"</code> state is set, it will change the
-  accessibility role to "alertdialog", if the accessibleRole property is set to <code>"Dialog"</code>.
+       Defines the state of the `Dialog`.
+  
+  **Note:** If `"Negative"` and `"Critical"` states is set, it will change the
+  accessibility role to "alertdialog", if the accessibleRole property is set to `"Dialog"`.
       */
-    state: 'None' | 'Success' | 'Warning' | 'Error' | 'Information';
+    state: 'None' | 'Positive' | 'Critical' | 'Negative' | 'Information';
     /**
-       Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. <b>This event does not bubble.</b>
+       Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**
       */
     ui5BeforeOpen: EventEmitter<void>;
     /**
-       Fired after the component is opened. <b>This event does not bubble.</b>
+       Fired after the component is opened. **This event does not bubble.**
       */
-    ui5AfterOpen: EventEmitter<void>;
+    ui5Open: EventEmitter<void>;
     /**
-       Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. <b>This event does not bubble.</b>
+       Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**
       */
     ui5BeforeClose: EventEmitter<PopupBeforeCloseEventDetail>;
     /**
-       Fired after the component is closed. <b>This event does not bubble.</b>
+       Fired after the component is closed. **This event does not bubble.**
       */
-    ui5AfterClose: EventEmitter<void>;
+    ui5Close: EventEmitter<void>;
     private elementRef;
     private zone;
     private cdr;
     get element(): Dialog;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<DialogComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DialogComponent, "ui5-dialog", never, { "initialFocus": { "alias": "initialFocus"; "required": false; }; "preventFocusRestore": { "alias": "preventFocusRestore"; "required": false; }; "open": { "alias": "open"; "required": false; }; "accessibleName": { "alias": "accessibleName"; "required": false; }; "accessibleNameRef": { "alias": "accessibleNameRef"; "required": false; }; "accessibleRole": { "alias": "accessibleRole"; "required": false; }; "headerText": { "alias": "headerText"; "required": false; }; "stretch": { "alias": "stretch"; "required": false; }; "draggable": { "alias": "draggable"; "required": false; }; "resizable": { "alias": "resizable"; "required": false; }; "state": { "alias": "state"; "required": false; }; }, { "ui5BeforeOpen": "ui5BeforeOpen"; "ui5AfterOpen": "ui5AfterOpen"; "ui5BeforeClose": "ui5BeforeClose"; "ui5AfterClose": "ui5AfterClose"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DialogComponent, "ui5-dialog", ["ui5Dialog"], { "initialFocus": { "alias": "initialFocus"; "required": false; }; "preventFocusRestore": { "alias": "preventFocusRestore"; "required": false; }; "accessibleName": { "alias": "accessibleName"; "required": false; }; "accessibleNameRef": { "alias": "accessibleNameRef"; "required": false; }; "accessibleRole": { "alias": "accessibleRole"; "required": false; }; "preventInitialFocus": { "alias": "preventInitialFocus"; "required": false; }; "open": { "alias": "open"; "required": false; }; "headerText": { "alias": "headerText"; "required": false; }; "stretch": { "alias": "stretch"; "required": false; }; "draggable": { "alias": "draggable"; "required": false; }; "resizable": { "alias": "resizable"; "required": false; }; "state": { "alias": "state"; "required": false; }; }, { "ui5BeforeOpen": "ui5BeforeOpen"; "ui5Open": "ui5Open"; "ui5BeforeClose": "ui5BeforeClose"; "ui5Close": "ui5Close"; }, never, ["*"], true, never>;
 }
 export { DialogComponent };

package/main/file-uploader/index.d.ts

@@ -7,8 +7,8 @@ import * as i1 from "@ui5/webcomponents-ngx/generic-cva";
 declare class FileUploaderComponent {
     /**
        Comma-separated list of file types that the component should accept.
-  <br><br>
-  <b>Note:</b> Please make sure you are adding the <code>.</code> in front on the file type, e.g. <code>.png</code> in case you want to accept png's only.
+  
+  **Note:** Please make sure you are adding the `.` in front on the file type, e.g. `.png` in case you want to accept png's only.
       */
     accept: string;
     /**
@@ -17,8 +17,8 @@ declare class FileUploaderComponent {
     hideInput: boolean;
     /**
        Defines whether the component is in disabled state.
-  <br><br>
-  <b>Note:</b> A disabled component is completely noninteractive.
+  
+  **Note:** A disabled component is completely noninteractive.
       */
     disabled: boolean;
     /**
@@ -26,16 +26,9 @@ declare class FileUploaderComponent {
       */
     multiple: boolean;
     /**
-       Determines the name with which the component will be submitted in an HTML form.
+       Determines the name by which the component will be identified upon submission in an HTML form.
   
-  <br><br>
-  <b>Important:</b> For the <code>name</code> property to have effect, you must add the following import to your project:
-  <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
-  
-  <br><br>
-  <b>Note:</b> When set, a native <code>input</code> HTML element
-  will be created inside the component so that it can be submitted as
-  part of an HTML form. Do not use this property unless you need to submit a form.
+  **Note:** This property is only applicable within the context of an HTML Form element.
       */
     name: string;
     /**
@@ -49,10 +42,11 @@ declare class FileUploaderComponent {
     /**
        Defines the value state of the component.
       */
-    valueState: 'None' | 'Success' | 'Warning' | 'Error' | 'Information';
+    valueState: 'None' | 'Positive' | 'Critical' | 'Negative' | 'Information';
     /**
        Event is fired when the value of the file path has been changed.
-  <b>Note:</b> Keep in mind that because of the HTML input element of type file, the event is also fired in Chrome browser when the Cancel button of the uploads window is pressed.
+  
+  **Note:** Keep in mind that because of the HTML input element of type file, the event is also fired in Chrome browser when the Cancel button of the uploads window is pressed.
       */
     ui5Change: EventEmitter<FileUploaderChangeEventDetail>;
     private elementRef;
@@ -64,6 +58,6 @@ declare class FileUploaderComponent {
     get cvaValue(): string;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<FileUploaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FileUploaderComponent, "ui5-file-uploader", never, { "accept": { "alias": "accept"; "required": false; }; "hideInput": { "alias": "hideInput"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "name": { "alias": "name"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "valueState": { "alias": "valueState"; "required": false; }; }, { "ui5Change": "ui5Change"; }, never, ["*"], true, [{ directive: typeof i1.GenericControlValueAccessor; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FileUploaderComponent, "ui5-file-uploader", ["ui5FileUploader"], { "accept": { "alias": "accept"; "required": false; }; "hideInput": { "alias": "hideInput"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "name": { "alias": "name"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "valueState": { "alias": "valueState"; "required": false; }; }, { "ui5Change": "ui5Change"; }, never, ["*"], true, [{ directive: typeof i1.GenericControlValueAccessor; inputs: {}; outputs: {}; }]>;
 }
 export { FileUploaderComponent };

package/main/form/index.d.ts

@@ -0,0 +1,48 @@
+import '@ui5/webcomponents/dist/Form.js';
+import Form from '@ui5/webcomponents/dist/Form.js';
+import * as i0 from "@angular/core";
+declare class FormComponent {
+    /**
+       Defines the number of columns to distribute the form content by breakpoint.
+  
+  Supported values:
+  - `S` - 1 column by default (1 column is recommended)
+  - `M` - 1 column by default (up to 2 columns are recommended)
+  - `L` - 2 columns by default (up to 3 columns are recommended)
+  - `XL` - 2 columns by default (up to 6 columns  are recommended)
+      */
+    layout: string;
+    /**
+       Defines the width proportion of the labels and fields of a FormItem by breakpoint.
+  
+  By default, the labels take 4/12 (or 1/3) of the form item in M,L and XL sizes,
+  and 12/12 in S size, e.g in S the label is on top of its associated field.
+  
+  The supported values are between 1 and 12. Greater the number, more space the label will use.
+  
+  **Note:** If "12" is set, the label will be displayed on top of its assosiated field.
+      */
+    labelSpan: string;
+    /**
+       Defines the header text of the component.
+  
+  **Note:** The property gets overridden by the `header` slot.
+      */
+    headerText: string;
+    /**
+       Defines the vertical spacing between form items.
+  
+  **Note:** If the Form is meant to be switched between "non-edit" and "edit" modes,
+  we recommend using "Large" item spacing in "non-edit" mode, and "Normal" - for "edit" mode,
+  to avoid "jumping" effect, caused by the hight difference between texts in "non-edit" mode and the input fields in "edit" mode.
+      */
+    itemSpacing: 'Normal' | 'Large';
+    private elementRef;
+    private zone;
+    private cdr;
+    get element(): Form;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormComponent, "ui5-form", ["ui5Form"], { "layout": { "alias": "layout"; "required": false; }; "labelSpan": { "alias": "labelSpan"; "required": false; }; "headerText": { "alias": "headerText"; "required": false; }; "itemSpacing": { "alias": "itemSpacing"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+export { FormComponent };

package/main/form-group/index.d.ts

@@ -0,0 +1,22 @@
+import '@ui5/webcomponents/dist/FormGroup.js';
+import FormGroup from '@ui5/webcomponents/dist/FormGroup.js';
+import * as i0 from "@angular/core";
+declare class FormGroupComponent {
+    /**
+       Defines header text of the component.
+      */
+    headerText: string;
+    /**
+       Defines column span of the component,
+  e.g how many columns the group should span to.
+      */
+    columnSpan: number | undefined;
+    private elementRef;
+    private zone;
+    private cdr;
+    get element(): FormGroup;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormGroupComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormGroupComponent, "ui5-form-group", ["ui5FormGroup"], { "headerText": { "alias": "headerText"; "required": false; }; "columnSpan": { "alias": "columnSpan"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+export { FormGroupComponent };

package/main/form-item/index.d.ts

@@ -0,0 +1,22 @@
+import '@ui5/webcomponents/dist/FormItem.js';
+import FormItem from '@ui5/webcomponents/dist/FormItem.js';
+import * as i0 from "@angular/core";
+declare class FormItemComponent {
+    /**
+       Defines the column span of the component,
+  e.g how many columns the component should span to.
+  
+  **Note:** The column span should be a number between 1 and the available columns of the FormGroup (when items are placed in a group)
+  or the Form. The available columns can be affected by the FormGroup#columnSpan and/or the Form#layout.
+  A number bigger than the available columns won't take effect.
+      */
+    columnSpan: number | undefined;
+    private elementRef;
+    private zone;
+    private cdr;
+    get element(): FormItem;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormItemComponent, "ui5-form-item", ["ui5FormItem"], { "columnSpan": { "alias": "columnSpan"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+export { FormItemComponent };

package/main/icon/index.d.ts

@@ -6,67 +6,54 @@ declare class IconComponent {
        Defines the component semantic design.
       */
     design: 'Contrast' | 'Critical' | 'Default' | 'Information' | 'Negative' | 'Neutral' | 'NonInteractive' | 'Positive';
-    /**
-       Defines if the icon is interactive (focusable and pressable)
-      */
-    interactive: boolean;
     /**
        Defines the unique identifier (icon name) of the component.
-  <br>
   
   To browse all available icons, see the
-  <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html">SAP Icons</ui5-link>,
-  <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT">SAP Fiori Tools</ui5-link> and
-  <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html">SAP Business Suite</ui5-link> collections.
-  <br>
+  [SAP Icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html),
+  [SAP Fiori Tools](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT) and
+  [SAP Business Suite](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html)
   
   Example:
-  <br>
-  <code>name='add'</code>, <code>name='delete'</code>, <code>name='employee'</code>.
-  <br><br>
+  `name='add'`, `name='delete'`, `name='employee'`.
   
-  <b>Note:</b> To use the SAP Fiori Tools icons,
-  you need to set the <code>tnt</code> prefix in front of the icon's name.
-  <br>
+  **Note:** To use the SAP Fiori Tools icons,
+  you need to set the `tnt` prefix in front of the icon's name.
   
   Example:
-  <br>
-  <code>name='tnt/antenna'</code>, <code>name='tnt/actor'</code>, <code>name='tnt/api'</code>.
-  <br><br>
+  `name='tnt/antenna'`, `name='tnt/actor'`, `name='tnt/api'`.
   
-  <b>Note:</b> To use the SAP Business Suite icons,
-  you need to set the <code>business-suite</code> prefix in front of the icon's name.
-  <br>
+  **Note:** To use the SAP Business Suite icons,
+  you need to set the `business-suite` prefix in front of the icon's name.
   
   Example:
-  <br>
-  <code>name='business-suite/3d'</code>, <code>name='business-suite/1x2-grid-layout'</code>, <code>name='business-suite/4x4-grid-layout'</code>.
+  `name='business-suite/3d'`, `name='business-suite/1x2-grid-layout'`, `name='business-suite/4x4-grid-layout'`.
       */
     name: string;
     /**
        Defines the text alternative of the component.
   If not provided a default text alternative will be set, if present.
-  <br><br>
-  <b>Note:</b> Every icon should have a text alternative in order to
+  
+  **Note:** Every icon should have a text alternative in order to
   calculate its accessible name.
       */
     accessibleName: string;
     /**
        Defines whether the component should have a tooltip.
-  <br><br>
-  <b>Note:</b> The tooltip text should be provided via the <code>accessible-name</code> property.
+  
+  **Note:** The tooltip text should be provided via the `accessible-name` property.
       */
     showTooltip: boolean;
     /**
-       Defines the accessibility role of the component.
+       Defines the mode of the component.
       */
-    accessibleRole: string;
+    mode: 'Image' | 'Decorative' | 'Interactive';
     private elementRef;
     private zone;
     private cdr;
     get element(): Icon;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<IconComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IconComponent, "ui5-icon", never, { "design": { "alias": "design"; "required": false; }; "interactive": { "alias": "interactive"; "required": false; }; "name": { "alias": "name"; "required": false; }; "accessibleName": { "alias": "accessibleName"; "required": false; }; "showTooltip": { "alias": "showTooltip"; "required": false; }; "accessibleRole": { "alias": "accessibleRole"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IconComponent, "ui5-icon", ["ui5Icon"], { "design": { "alias": "design"; "required": false; }; "name": { "alias": "name"; "required": false; }; "accessibleName": { "alias": "accessibleName"; "required": false; }; "showTooltip": { "alias": "showTooltip"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
 export { IconComponent };