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

package/main/avatar/index.d.ts

@@ -1,5 +1,5 @@
 import '@ui5/webcomponents/dist/Avatar.js';
-import Avatar from '@ui5/webcomponents/dist/Avatar.js';
+import { default as Avatar, AvatarAccessibilityAttributes } from '@ui5/webcomponents/dist/Avatar.js';
 import * as i0 from "@angular/core";
 declare class AvatarComponent {
     /**
@@ -10,50 +10,48 @@ declare class AvatarComponent {
     disabled: boolean;
     /**
        Defines if the avatar is interactive (focusable and pressable).
-  <b>Note:</b> This property won't have effect if the <code>disabled</code>
-  property is set to <code>true</code>.
+  
+  **Note:** This property won't have effect if the `disabled`
+  property is set to `true`.
       */
     interactive: boolean;
     /**
        Defines the name of the UI5 Icon, that will be displayed.
-  <br>
-  <b>Note:</b> If <code>image</code> slot is provided, the property will be ignored.
-  <br>
-  <b>Note:</b> You should import the desired icon first, then use its name as "icon".
-  <br><br>
-  import "@ui5/webcomponents-icons/dist/{icon_name}.js"
-  <br>
-  <pre>&lt;ui5-avatar icon="employee"></pre>
-  <br>
-  <b>Note:</b> If no icon or an empty one is provided, by default the "employee" icon should be displayed.
   
-  See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html">Icon Explorer</ui5-link>.
+  **Note:** If `image` slot is provided, the property will be ignored.
+  
+  **Note:** You should import the desired icon first, then use its name as "icon".
+  
+  `import "@ui5/webcomponents-icons/dist/{icon_name}.js"`
+  
+  `<ui5-avatar icon="employee">`
+  
+  **Note:** If no icon or an empty one is provided, by default the "employee" icon should be displayed.
+  
+  See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
       */
     icon: string;
     /**
        Defines the name of the fallback icon, which should be displayed in the following cases:
-  <ul>
-      <li>If the initials are not valid (more than 3 letters, unsupported languages or empty initials).</li>
-      <li>If there are three initials and they do not fit in the shape (e.g. WWW for some of the sizes).</li>
-      <li>If the image src is wrong.</li>
-  </ul>
   
-  <br>
-  <b>Note:</b> If not set, a default fallback icon "employee" is displayed.
-  <br>
-  <b>Note:</b> You should import the desired icon first, then use its name as "fallback-icon".
-  <br><br>
-  import "@ui5/webcomponents-icons/dist/{icon_name}.js"
-  <br>
-  <pre>&lt;ui5-avatar fallback-icon="alert"></pre>
-  <br>
+      - If the initials are not valid (more than 3 letters, unsupported languages or empty initials).
+      - If there are three initials and they do not fit in the shape (e.g. WWW for some of the sizes).
+      - If the image src is wrong.
+  
+  **Note:** If not set, a default fallback icon "employee" is displayed.
   
-  See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html">Icon Explorer</ui5-link>.
+  **Note:** You should import the desired icon first, then use its name as "fallback-icon".
+  
+  `import "@ui5/webcomponents-icons/dist/{icon_name}.js"`
+  
+  `<ui5-avatar fallback-icon="alert">`
+  
+  See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
       */
     fallbackIcon: string;
     /**
        Defines the displayed initials.
-  <br>
+  
   Up to three Latin letters can be displayed as initials.
       */
     initials: string;
@@ -74,12 +72,20 @@ declare class AvatarComponent {
   If not provided a default text alternative will be set, if present.
       */
     accessibleName: string;
+    /**
+       Defines the additional accessibility attributes that will be applied to the component.
+  The following field is supported:
+  
+  - **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: AvatarAccessibilityAttributes;
     private elementRef;
     private zone;
     private cdr;
     get element(): Avatar;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<AvatarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarComponent, "ui5-avatar", never, { "disabled": { "alias": "disabled"; "required": false; }; "interactive": { "alias": "interactive"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "fallbackIcon": { "alias": "fallbackIcon"; "required": false; }; "initials": { "alias": "initials"; "required": false; }; "shape": { "alias": "shape"; "required": false; }; "size": { "alias": "size"; "required": false; }; "colorScheme": { "alias": "colorScheme"; "required": false; }; "accessibleName": { "alias": "accessibleName"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarComponent, "ui5-avatar", ["ui5Avatar"], { "disabled": { "alias": "disabled"; "required": false; }; "interactive": { "alias": "interactive"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "fallbackIcon": { "alias": "fallbackIcon"; "required": false; }; "initials": { "alias": "initials"; "required": false; }; "shape": { "alias": "shape"; "required": false; }; "size": { "alias": "size"; "required": false; }; "colorScheme": { "alias": "colorScheme"; "required": false; }; "accessibleName": { "alias": "accessibleName"; "required": false; }; "accessibilityAttributes": { "alias": "accessibilityAttributes"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
 export { AvatarComponent };

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

@@ -1,19 +1,27 @@
 import { EventEmitter } from '@angular/core';
 import '@ui5/webcomponents/dist/AvatarGroup.js';
-import { default as AvatarGroup, AvatarGroupClickEventDetail } from '@ui5/webcomponents/dist/AvatarGroup.js';
+import { default as AvatarGroup, AvatarGroupAccessibilityAttributes, AvatarGroupClickEventDetail } from '@ui5/webcomponents/dist/AvatarGroup.js';
 import * as i0 from "@angular/core";
 declare class AvatarGroupComponent {
     /**
-       Defines the mode of the <code>AvatarGroup</code>.
+       Defines the mode of the `AvatarGroup`.
       */
     type: 'Group' | 'Individual';
+    /**
+       Defines the additional accessibility attributes that will be applied to the component.
+  The following field is supported:
+  
+  - **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: AvatarGroupAccessibilityAttributes;
     /**
        Fired when the component is activated either with a
   click/tap or by using the Enter or Space key.
       */
     ui5Click: EventEmitter<AvatarGroupClickEventDetail>;
     /**
-       Fired when the count of visible <code>ui5-avatar</code> elements in the
+       Fired when the count of visible `ui5-avatar` elements in the
   component has changed
       */
     ui5Overflow: EventEmitter<void>;
@@ -23,6 +31,6 @@ declare class AvatarGroupComponent {
     get element(): AvatarGroup;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<AvatarGroupComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarGroupComponent, "ui5-avatar-group", never, { "type": { "alias": "type"; "required": false; }; }, { "ui5Click": "ui5Click"; "ui5Overflow": "ui5Overflow"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarGroupComponent, "ui5-avatar-group", ["ui5AvatarGroup"], { "type": { "alias": "type"; "required": false; }; "accessibilityAttributes": { "alias": "accessibilityAttributes"; "required": false; }; }, { "ui5Click": "ui5Click"; "ui5Overflow": "ui5Overflow"; }, never, ["*"], true, never>;
 }
 export { AvatarGroupComponent };

package/{fiori → main}/bar/index.d.ts

@@ -1,5 +1,5 @@
-import '@ui5/webcomponents-fiori/dist/Bar.js';
-import Bar from '@ui5/webcomponents-fiori/dist/Bar.js';
+import '@ui5/webcomponents/dist/Bar.js';
+import Bar from '@ui5/webcomponents/dist/Bar.js';
 import * as i0 from "@angular/core";
 declare class BarComponent {
     /**
@@ -12,6 +12,6 @@ declare class BarComponent {
     get element(): Bar;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<BarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BarComponent, "ui5-bar", never, { "design": { "alias": "design"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BarComponent, "ui5-bar", ["ui5Bar"], { "design": { "alias": "design"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
 export { BarComponent };

package/main/breadcrumbs/index.d.ts

@@ -4,19 +4,21 @@ import { default as Breadcrumbs, BreadcrumbsItemClickEventDetail } from '@ui5/we
 import * as i0 from "@angular/core";
 declare class BreadcrumbsComponent {
     /**
-       Defines the visual indication and behavior of the breadcrumbs.
-  <br><br>
-  <b>Note:</b> The <code>Standard</code> breadcrumbs show the current page as the last item in the trail.
-  The last item contains only plain text and is not a link.
+       Defines the visual appearance of the last BreadcrumbsItem.
+  
+  The Breadcrumbs supports two visual appearances for the last BreadcrumbsItem:
+  - "Standard" - displaying the last item as "current page" (bold and without separator)
+  - "NoCurrentPage" - displaying the last item as a regular BreadcrumbsItem, followed by separator
       */
     design: 'Standard' | 'NoCurrentPage';
     /**
        Determines the visual style of the separator between the breadcrumb items.
       */
-    separatorStyle: 'Slash' | 'BackSlash' | 'DoubleBackSlash' | 'DoubleGreaterThan' | 'DoubleSlash' | 'GreaterThan';
+    separators: 'Slash' | 'BackSlash' | 'DoubleBackSlash' | 'DoubleGreaterThan' | 'DoubleSlash' | 'GreaterThan';
     /**
-       Fires when a <code>BreadcrumbsItem</code> is clicked.
-  <b>Note:</b> You can prevent browser location change by calling <code>event.preventDefault()</code>.
+       Fires when a `BreadcrumbsItem` is clicked.
+  
+  **Note:** You can prevent browser location change by calling `event.preventDefault()`.
       */
     ui5ItemClick: EventEmitter<BreadcrumbsItemClickEventDetail>;
     private elementRef;
@@ -25,6 +27,6 @@ declare class BreadcrumbsComponent {
     get element(): Breadcrumbs;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<BreadcrumbsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BreadcrumbsComponent, "ui5-breadcrumbs", never, { "design": { "alias": "design"; "required": false; }; "separatorStyle": { "alias": "separatorStyle"; "required": false; }; }, { "ui5ItemClick": "ui5ItemClick"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BreadcrumbsComponent, "ui5-breadcrumbs", ["ui5Breadcrumbs"], { "design": { "alias": "design"; "required": false; }; "separators": { "alias": "separators"; "required": false; }; }, { "ui5ItemClick": "ui5ItemClick"; }, never, ["*"], true, never>;
 }
 export { BreadcrumbsComponent };

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

@@ -4,23 +4,22 @@ import * as i0 from "@angular/core";
 declare class BreadcrumbsItemComponent {
     /**
        Defines the link href.
-  <br><br>
-  <b>Note:</b> Standard hyperlink behavior is supported.
+  
+  **Note:** Standard hyperlink behavior is supported.
       */
     href: string;
     /**
        Defines the link target.
-  <br><br>
+  
   Available options are:
-  <ul>
-  <li><code>_self</code></li>
-  <li><code>_top</code></li>
-  <li><code>_blank</code></li>
-  <li><code>_parent</code></li>
-  <li><code>_search</code></li>
-  </ul>
-  <br><br>
-  <b>Note:<b> This property must only be used when the <code>href</code> property is set.
+  
+  - `_self`
+  - `_top`
+  - `_blank`
+  - `_parent`
+  - `_search`
+  
+  **Note:** This property must only be used when the `href` property is set.
       */
     target: string | undefined;
     /**
@@ -33,6 +32,6 @@ declare class BreadcrumbsItemComponent {
     get element(): BreadcrumbsItem;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<BreadcrumbsItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BreadcrumbsItemComponent, "ui5-breadcrumbs-item", never, { "href": { "alias": "href"; "required": false; }; "target": { "alias": "target"; "required": false; }; "accessibleName": { "alias": "accessibleName"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BreadcrumbsItemComponent, "ui5-breadcrumbs-item", ["ui5BreadcrumbsItem"], { "href": { "alias": "href"; "required": false; }; "target": { "alias": "target"; "required": false; }; "accessibleName": { "alias": "accessibleName"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
 export { BreadcrumbsItemComponent };

package/main/busy-indicator/index.d.ts

@@ -9,7 +9,7 @@ declare class BusyIndicatorComponent {
     /**
        Defines the size of the component.
       */
-    size: 'Small' | 'Medium' | 'Large';
+    size: 'S' | 'M' | 'L';
     /**
        Defines if the busy indicator is visible on the screen. By default it is not.
       */
@@ -18,12 +18,16 @@ declare class BusyIndicatorComponent {
        Defines the delay in milliseconds, after which the busy indicator will be visible on the screen.
       */
     delay: number;
+    /**
+       Defines the placement of the text.
+      */
+    textPlacement: 'Top' | 'Bottom';
     private elementRef;
     private zone;
     private cdr;
     get element(): BusyIndicator;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<BusyIndicatorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BusyIndicatorComponent, "ui5-busy-indicator", never, { "text": { "alias": "text"; "required": false; }; "size": { "alias": "size"; "required": false; }; "active": { "alias": "active"; "required": false; }; "delay": { "alias": "delay"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BusyIndicatorComponent, "ui5-busy-indicator", ["ui5BusyIndicator"], { "text": { "alias": "text"; "required": false; }; "size": { "alias": "size"; "required": false; }; "active": { "alias": "active"; "required": false; }; "delay": { "alias": "delay"; "required": false; }; "textPlacement": { "alias": "textPlacement"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
 export { BusyIndicatorComponent };

package/main/button/index.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '@angular/core';
 import '@ui5/webcomponents/dist/Button.js';
-import { AccessibilityAttributes, default as Button } from '@ui5/webcomponents/dist/Button.js';
+import { default as Button, ButtonAccessibilityAttributes } from '@ui5/webcomponents/dist/Button.js';
 import * as i0 from "@angular/core";
 declare class ButtonComponent {
     /**
@@ -16,28 +16,34 @@ declare class ButtonComponent {
     /**
        Defines the icon, displayed as graphical element within the component.
   The SAP-icons font provides numerous options.
-  <br><br>
-  Example:
   
-  See all the available icons within the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html">Icon Explorer</ui5-link>.
+  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;
     /**
-       Defines whether the icon should be displayed after the component text.
+       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).
       */
-    iconEnd: boolean;
+    endIcon: string;
     /**
-       When set to <code>true</code>, the component will
-  automatically submit the nearest HTML form element on <code>press</code>.
-  <br><br>
-  <b>Note:</b> For the <code>submits</code> property to have effect, you must add the following import to your project:
-  <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
+       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.`
       */
     submits: boolean;
     /**
        Defines the tooltip of the component.
-  <br>
-  <b>Note:</b> A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.
+  
+  **Note:** A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.
       */
     tooltip: string;
     /**
@@ -49,45 +55,37 @@ declare class ButtonComponent {
       */
     accessibleNameRef: string;
     /**
-       An object of strings that defines several additional accessibility attribute values
-  for customization depending on the use case.
+       Defines the additional accessibility attributes that will be applied to the component.
+  The following fields are supported:
   
-  It supports the following fields:
+  - **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.
+  Accepts the following string values: `true` or `false`
   
-  <ul>
-          <li><code>expanded</code>: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values:
-          <ul>
-              <li><code>true</code></li>
-              <li><code>false</code></li>
-          </ul>
-          </li>
-          <li><code>hasPopup</code>: 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:
-              <ul>
-              <li><code>Dialog</code></li>
-              <li><code>Grid</code></li>
-              <li><code>Listbox</code></li>
-              <li><code>Menu</code></li>
-              <li><code>Tree</code></li>
-              </ul>
-          </li>
-          <li><code>controls</code>: Identifies the element (or elements) whose contents or presence are controlled by the button element. Accepts a string value.</li>
-  </ul>
+  - **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: AccessibilityAttributes;
+    accessibilityAttributes: ButtonAccessibilityAttributes;
     /**
        Defines whether the button has special form-related functionality.
   
-  <br><br>
-  <b>Note:</b> For the <code>type</code> property to have effect, you must add the following import to your project:
-  <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
+  **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';
     /**
        Fired when the component is activated either with a
   mouse/tap or by using the Enter or Space key.
-  <br><br>
-  <b>Note:</b> The event will not be fired if the <code>disabled</code>
-  property is set to <code>true</code>.
+  
+  **Note:** The event will not be fired if the `disabled`
+  property is set to `true`.
       */
     ui5Click: EventEmitter<Event>;
     private elementRef;
@@ -96,6 +94,6 @@ declare class ButtonComponent {
     get element(): Button;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "ui5-button", never, { "design": { "alias": "design"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconEnd": { "alias": "iconEnd"; "required": false; }; "submits": { "alias": "submits"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "accessibleName": { "alias": "accessibleName"; "required": false; }; "accessibleNameRef": { "alias": "accessibleNameRef"; "required": false; }; "accessibilityAttributes": { "alias": "accessibilityAttributes"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, { "ui5Click": "ui5Click"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "ui5-button", ["ui5Button"], { "design": { "alias": "design"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "endIcon": { "alias": "endIcon"; "required": false; }; "submits": { "alias": "submits"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "accessibleName": { "alias": "accessibleName"; "required": false; }; "accessibleNameRef": { "alias": "accessibleNameRef"; "required": false; }; "accessibilityAttributes": { "alias": "accessibilityAttributes"; "required": false; }; "type": { "alias": "type"; "required": false; }; "accessibleRole": { "alias": "accessibleRole"; "required": false; }; }, { "ui5Click": "ui5Click"; }, never, ["*"], true, never>;
 }
 export { ButtonComponent };

package/main/calendar/index.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '@angular/core';
 import '@ui5/webcomponents/dist/Calendar.js';
-import { default as Calendar, CalendarSelectedDatesChangeEventDetail } from '@ui5/webcomponents/dist/Calendar.js';
+import { default as Calendar, CalendarSelectionChangeEventDetail } from '@ui5/webcomponents/dist/Calendar.js';
 import * as i0 from "@angular/core";
 declare class CalendarComponent {
     /**
@@ -20,45 +20,44 @@ declare class CalendarComponent {
     /**
        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;
     /**
        Defines the type of selection used in the calendar component.
-  Accepted property values are:<br>
-  <ul>
-  <li><code>CalendarSelectionMode.Single</code> - enables a single date selection.(default value)</li>
-  <li><code>CalendarSelectionMode.Range</code> - enables selection of a date range.</li>
-  <li><code>CalendarSelectionMode.Multiple</code> - enables selection of multiple dates.</li>
-  </ul>
+  Accepted property values are:
+  
+  - `CalendarSelectionMode.Single` - enables a single date selection.(default value)
+  - `CalendarSelectionMode.Range` - enables selection of a date range.
+  - `CalendarSelectionMode.Multiple` - enables selection of multiple dates.
       */
     selectionMode: 'Single' | 'Multiple' | 'Range';
     /**
        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;
     /**
        Fired when the selected dates change.
-  <b>Note:</b> If you call <code>preventDefault()</code> for this event, the component will not
-  create instances of <code>ui5-date</code> for the newly selected dates. In that case you should do this manually.
+  
+  **Note:** If you call `preventDefault()` for this event, the component will not
+  create instances of `ui5-date` for the newly selected dates. In that case you should do this manually.
       */
-    ui5SelectedDatesChange: EventEmitter<CalendarSelectedDatesChangeEventDetail>;
+    ui5SelectionChange: EventEmitter<CalendarSelectionChangeEventDetail>;
     private elementRef;
     private zone;
     private cdr;
     get element(): Calendar;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<CalendarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarComponent, "ui5-calendar", 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; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "hideWeekNumbers": { "alias": "hideWeekNumbers"; "required": false; }; }, { "ui5SelectedDatesChange": "ui5SelectedDatesChange"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarComponent, "ui5-calendar", ["ui5Calendar"], { "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; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "hideWeekNumbers": { "alias": "hideWeekNumbers"; "required": false; }; }, { "ui5SelectionChange": "ui5SelectionChange"; }, never, ["*"], true, never>;
 }
 export { CalendarComponent };

package/main/calendar-date/index.d.ts

@@ -3,8 +3,8 @@ import CalendarDate from '@ui5/webcomponents/dist/CalendarDate.js';
 import * as i0 from "@angular/core";
 declare class CalendarDateComponent {
     /**
-       The date formatted according to the <code>formatPattern</code> property
-  of the <code>ui5-calendar</code> that hosts the component.
+       The date formatted according to the `formatPattern` property
+  of the `ui5-calendar` that hosts the component.
       */
     value: string;
     private elementRef;
@@ -13,6 +13,6 @@ declare class CalendarDateComponent {
     get element(): CalendarDate;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<CalendarDateComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarDateComponent, "ui5-date", never, { "value": { "alias": "value"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarDateComponent, "ui5-date", ["ui5Date"], { "value": { "alias": "value"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
 export { CalendarDateComponent };

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

@@ -0,0 +1,23 @@
+import '@ui5/webcomponents/dist/CalendarDateRange.js';
+import CalendarDateRange from '@ui5/webcomponents/dist/CalendarDateRange.js';
+import * as i0 from "@angular/core";
+declare class CalendarDateRangeComponent {
+    /**
+       Start of date range formatted according to the `formatPattern` property
+  of the `ui5-calendar` that hosts the component.
+      */
+    startValue: string;
+    /**
+       End of date range formatted according to the `formatPattern` property
+  of the `ui5-calendar` that hosts the component.
+      */
+    endValue: string;
+    private elementRef;
+    private zone;
+    private cdr;
+    get element(): CalendarDateRange;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<CalendarDateRangeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarDateRangeComponent, "ui5-date-range", ["ui5DateRange"], { "startValue": { "alias": "startValue"; "required": false; }; "endValue": { "alias": "endValue"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+export { CalendarDateRangeComponent };

package/main/calendar-legend/index.d.ts

@@ -0,0 +1,29 @@
+import '@ui5/webcomponents/dist/CalendarLegend.js';
+import CalendarLegend from '@ui5/webcomponents/dist/CalendarLegend.js';
+import * as i0 from "@angular/core";
+declare class CalendarLegendComponent {
+    /**
+       Hides the Today item in the legend.
+      */
+    hideToday: boolean;
+    /**
+       Hides the Selected day item in the legend.
+      */
+    hideSelectedDay: boolean;
+    /**
+       Hides the Non-Working day item in the legend.
+      */
+    hideNonWorkingDay: boolean;
+    /**
+       Hides the Working day item in the legend.
+      */
+    hideWorkingDay: boolean;
+    private elementRef;
+    private zone;
+    private cdr;
+    get element(): CalendarLegend;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<CalendarLegendComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarLegendComponent, "ui5-calendar-legend", ["ui5CalendarLegend"], { "hideToday": { "alias": "hideToday"; "required": false; }; "hideSelectedDay": { "alias": "hideSelectedDay"; "required": false; }; "hideNonWorkingDay": { "alias": "hideNonWorkingDay"; "required": false; }; "hideWorkingDay": { "alias": "hideWorkingDay"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+export { CalendarLegendComponent };

package/main/calendar-legend-item/index.d.ts

@@ -0,0 +1,21 @@
+import '@ui5/webcomponents/dist/CalendarLegendItem.js';
+import CalendarLegendItem from '@ui5/webcomponents/dist/CalendarLegendItem.js';
+import * as i0 from "@angular/core";
+declare class CalendarLegendItemComponent {
+    /**
+       Defines the text content of the Calendar Legend Item.
+      */
+    text: string;
+    /**
+       Defines the type of the Calendar Legend Item.
+      */
+    type: 'None' | 'Working' | 'NonWorking' | 'Type01' | 'Type02' | 'Type03' | 'Type04' | 'Type05' | 'Type06' | 'Type07' | 'Type08' | 'Type09' | 'Type10' | 'Type11' | 'Type12' | 'Type13' | 'Type14' | 'Type15' | 'Type16' | 'Type17' | 'Type18' | 'Type19' | 'Type20';
+    private elementRef;
+    private zone;
+    private cdr;
+    get element(): CalendarLegendItem;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<CalendarLegendItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarLegendItemComponent, "ui5-calendar-legend-item", ["ui5CalendarLegendItem"], { "text": { "alias": "text"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+export { CalendarLegendItemComponent };

package/main/card/index.d.ts

@@ -4,7 +4,8 @@ import * as i0 from "@angular/core";
 declare class CardComponent {
     /**
        Defines the accessible name of the component, which is used as the name of the card region and should be unique per card.
-  <b>Note:</b> <code>accessibleName</code> should be always set, unless <code>accessibleNameRef</code> is set.
+  
+  **Note:** `accessibleName` should be always set, unless `accessibleNameRef` is set.
       */
     accessibleName: string;
     /**
@@ -17,6 +18,6 @@ declare class CardComponent {
     get element(): Card;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<CardComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CardComponent, "ui5-card", never, { "accessibleName": { "alias": "accessibleName"; "required": false; }; "accessibleNameRef": { "alias": "accessibleNameRef"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CardComponent, "ui5-card", ["ui5Card"], { "accessibleName": { "alias": "accessibleName"; "required": false; }; "accessibleNameRef": { "alias": "accessibleNameRef"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
 export { CardComponent };

package/main/card-header/index.d.ts

@@ -12,18 +12,18 @@ declare class CardHeaderComponent {
       */
     subtitleText: string;
     /**
-       Defines the status text.
+       Defines the additional text.
       */
-    status: string;
+    additionalText: string;
     /**
        Defines if the component would be interactive,
-  e.g gets hover effect, gets focus outline and <code>click</code> event is fired, when pressed.
+  e.g gets hover effect, gets focus outline and `click` event is fired, when pressed.
       */
     interactive: boolean;
     /**
        Fired when the component is activated by mouse/tap or by using the Enter or Space key.
-  <br><br>
-  <b>Note:</b> The event would be fired only if the <code>interactive</code> property is set to true.
+  
+  **Note:** The event would be fired only if the `interactive` property is set to true.
       */
     ui5Click: EventEmitter<void>;
     private elementRef;
@@ -32,6 +32,6 @@ declare class CardHeaderComponent {
     get element(): CardHeader;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<CardHeaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CardHeaderComponent, "ui5-card-header", never, { "titleText": { "alias": "titleText"; "required": false; }; "subtitleText": { "alias": "subtitleText"; "required": false; }; "status": { "alias": "status"; "required": false; }; "interactive": { "alias": "interactive"; "required": false; }; }, { "ui5Click": "ui5Click"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CardHeaderComponent, "ui5-card-header", ["ui5CardHeader"], { "titleText": { "alias": "titleText"; "required": false; }; "subtitleText": { "alias": "subtitleText"; "required": false; }; "additionalText": { "alias": "additionalText"; "required": false; }; "interactive": { "alias": "interactive"; "required": false; }; }, { "ui5Click": "ui5Click"; }, never, ["*"], true, never>;
 }
 export { CardHeaderComponent };