Merge branch 'master' into apetrov/new-desing-system-samples

Author: simeonoff

en/components/autocomplete.md

@@ -268,8 +268,8 @@ Take a look at the [`igxInputGroup`](input-group.md#styling) and the [`igxDropdo
 
 
 ## Theming Dependencies
-* [IgxDropDown Theme]({environment:sassApiUrl}/index.html#function-drop-down-theme)
-* [IgxInputGroup Theme]({environment:sassApiUrl}/index.html#function-input-group-theme)
+* [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-drop-down-theme)
+* [IgxInputGroup Theme]({environment:sassApiUrl}/themes#function-input-group-theme)
 
 ## Additional Resources
 <div class="divider--half"></div>

en/components/carousel.md

@@ -6,7 +6,7 @@ mentionedTypes: ["DomainChart", "CategoryChart", "CrosshairLayer", "FinalValueLa
 namespace: Infragistics.Controls.Charts
 ---
 
-# Angular Chart Data Annotations (Beta)
+# Angular Chart Data Annotations <label class="badge badge--preview">PREVIEW</label>
 
 In the Angular chart, the data annotation layers allow you to annotate data plotted in Data Chart with sloped lines, vertical/horizontal lines (aka axis slices), vertical/horizontal strips (targeting specific axis), rectangles, and even parallelograms (aka bands). With data-binding supported, you can create as many annotations as you want to customize your charts. Also, you can combine different annotation layers and you can overlay text inside of plot area to annotated important events, patterns, and regions in your data.
 
@@ -38,9 +38,9 @@ For example, you can use DataAnnotationSliceLayer to annotate stock prices with
 
 ## Angular Data Annotation Strip Layer Example
 
-In Angular, the `DataAnnotationStripLayer` renders multiple vertical or horizontal strips between 2 values on an axis in the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) component. This data annotation layer can be used to annotate duration of events (e.g. stock market crash) on x-axis or important range of values on y-axis. Setting the TargetAxis property to y-axis will render data annotation layer as horizontal strips or setting TargetAxis property to x-axis will render data annotation layer as vertical strips. Similarly to all series, the `DataAnnotationStripLayer` also supports data binding via the `DataSource` property that can be set to a collection of data items which should have at least 1 numeric data column mapped to the AnnotationValueMemberPath property.
+In Angular, the [`IgxDataAnnotationStripLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationstriplayercomponent.html) renders multiple vertical or horizontal strips between 2 values on an axis in the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) component. This data annotation layer can be used to annotate duration of events (e.g. stock market crash) on x-axis or important range of values on y-axis. Setting the TargetAxis property to y-axis will render data annotation layer as horizontal strips or setting TargetAxis property to x-axis will render data annotation layer as vertical strips. Similarly to all series, the [`IgxDataAnnotationStripLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationstriplayercomponent.html) also supports data binding via the `DataSource` property that can be set to a collection of data items which should have at least 1 numeric data column mapped to the AnnotationValueMemberPath property.
 
-For example, you can use `DataAnnotationStripLayer` to annotate chart with stock market crashes and changes in federal interest rates.
+For example, you can use [`IgxDataAnnotationStripLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationstriplayercomponent.html) to annotate chart with stock market crashes and changes in federal interest rates.
 
 <code-view style="height: 500px" alt="Angular Data Annotation Strip Layer Example"
            data-demos-base-url="{environment:dvDemosBaseUrl}"
@@ -53,7 +53,7 @@ For example, you can use `DataAnnotationStripLayer` to annotate chart with stock
 
 ## Angular Data Annotation Line Layer Example
 
-In Angular, `DataAnnotationLineLayer` renders multiple lines between 2 points in plot area of the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) component. This data annotation layer can be used to annotate stock chart with growth and decline in stock prices. Similarly to all series, the DataAnnotationLineLayer also supports data binding via the `DataSource` property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the lines. The starting points should be mapped using using `StartValueXMemberPath` and `StartValueYMemberPath` properties and the ending points should be mapped using `EndValueXMemberPath` and `EndValueYMemberPath`  properties.
+In Angular, [`IgxDataAnnotationLineLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationlinelayercomponent.html) renders multiple lines between 2 points in plot area of the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) component. This data annotation layer can be used to annotate stock chart with growth and decline in stock prices. Similarly to all series, the DataAnnotationLineLayer also supports data binding via the `DataSource` property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the lines. The starting points should be mapped using using `StartValueXMemberPath` and `StartValueYMemberPath` properties and the ending points should be mapped using `EndValueXMemberPath` and `EndValueYMemberPath`  properties.
 
 For example, you can use DataAnnotationLineLayer to annotate growth and decline patterns in stock prices and 52-week high and low of stock prices on y-axis.
 
@@ -68,7 +68,7 @@ For example, you can use DataAnnotationLineLayer to annotate growth and decline
 
 ## Angular Data Annotation Rect Layer Example
 
-In Angular, the `DataAnnotationRectLayer` renders multiple rectangles defined by starting and ending points in plot area of the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) component. This data annotation layer can be used to annotate region of plot area such as bearish patterns in stock prices. Similarly to all series, the DataAnnotationRectLayer also supports data binding via the `DataSource` property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the rectangles. The starting points should be mapped using using `StartValueXMemberPath` and `StartValueYMemberPath` properties and the ending points should be mapped using `EndValueXMemberPath` and `EndValueYMemberPath` properties.
+In Angular, the [`IgxDataAnnotationRectLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationrectlayercomponent.html) renders multiple rectangles defined by starting and ending points in plot area of the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) component. This data annotation layer can be used to annotate region of plot area such as bearish patterns in stock prices. Similarly to all series, the DataAnnotationRectLayer also supports data binding via the `DataSource` property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the rectangles. The starting points should be mapped using using `StartValueXMemberPath` and `StartValueYMemberPath` properties and the ending points should be mapped using `EndValueXMemberPath` and `EndValueYMemberPath` properties.
 
 For example, you can use DataAnnotationRectLayer to annotate bearish patterns and gaps in stock prices on y-axis.
 
@@ -83,7 +83,7 @@ For example, you can use DataAnnotationRectLayer to annotate bearish patterns an
 
 ## Angular Data Annotation Band Layer Example
 
-In Angular, the `DataAnnotationBandLayer` renders multiple skewed rectangles (free-form parallelogram) between 2 points in plot area of the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) component. This data annotation layer can be used to annotate range of growth and decline in stock prices. Similarly to all series, the DataAnnotationBandLayer also supports data binding via the `DataSource` property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the lines. The starting points should be mapped using `StartValueXMemberPath` and `StartValueYMemberPath` properties and the ending points should be mapped using `EndValueXMemberPath` and `EndValueYMemberPath` properties. In addition, you can specify thickness/size of the skewed rectangle by binding numeric data column to the AnnotationBreadthMemberPath property.
+In Angular, the [`IgxDataAnnotationBandLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationbandlayercomponent.html) renders multiple skewed rectangles (free-form parallelogram) between 2 points in plot area of the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) component. This data annotation layer can be used to annotate range of growth and decline in stock prices. Similarly to all series, the DataAnnotationBandLayer also supports data binding via the `DataSource` property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the lines. The starting points should be mapped using `StartValueXMemberPath` and `StartValueYMemberPath` properties and the ending points should be mapped using `EndValueXMemberPath` and `EndValueYMemberPath` properties. In addition, you can specify thickness/size of the skewed rectangle by binding numeric data column to the AnnotationBreadthMemberPath property.
 
 For example, you can use DataAnnotationBandLayer to annotate range of growth in stock prices.
 
@@ -108,5 +108,5 @@ The following is a list of API members mentioned in the above sections:
 *   `EndValueYMemberPath`: This property is a mapping to the data column with y-positions for end of the DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer.
 *   `StartLabelXMemberPath`: This property is a mapping to the data column representing the overlay label for the starting position of the xAxis along the axis.
 *   `StartLabelXDisplayMode` | `StartLabelYDisplayMode` | `EndLabelXDisplayMode` | `EndLabelYDisplayMode` | `CenterLabelXDisplayMode`: These properties specify what should annotation labels display on starting, ending, or center of the annotation shape, e.g. mapped data value, mapped data label, axis value, or hide a given annotation label.
-*   `StartLabelYMemberPath`: This property is a mapping to the data column representing the axis label for the starting position of `DataAnnotationBandLayer`, `DataAnnotationLineLayer`, `DataAnnotationRectLayer` on the y-axis.
-*   `EndLabelYMemberPath`: This property is a mapping to the data column representing the axis label for the ending position of `DataAnnotationBandLayer`, `DataAnnotationLineLayer`, `DataAnnotationRectLayer` on the y-axis.
+*   `StartLabelYMemberPath`: This property is a mapping to the data column representing the axis label for the starting position of [`IgxDataAnnotationBandLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationbandlayercomponent.html), [`IgxDataAnnotationLineLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationlinelayercomponent.html), [`IgxDataAnnotationRectLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationrectlayercomponent.html) on the y-axis.
+*   `EndLabelYMemberPath`: This property is a mapping to the data column representing the axis label for the ending position of [`IgxDataAnnotationBandLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationbandlayercomponent.html), [`IgxDataAnnotationLineLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationlinelayercomponent.html), [`IgxDataAnnotationRectLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationrectlayercomponent.html) on the y-axis.

en/components/charts/features/chart-data-annotations.md

@@ -35,20 +35,20 @@ It is also possible to zoom or pan simply by clicking the mouse or using touch.
 
 Navigation in the Angular data chart can happen with either touch, the mouse or the keyboard. The following operations can be invoked using touch, mouse or keyboard operations by default:
 
-*   **Panning**: Using <kbd>🡐</kbd> <kbd>🡒</kbd> <kbd>🡑</kbd> <kbd>🡓</kbd> arrow keys on the keyboard or holding the <kbd>Shift</kbd> key, clicking and dragging with the mouse or pressing and moving your finger via touch.
-*   **Zoom In**: Using the <kbd>Page Up</kbd> key on the keyboard, rolling the mouse wheel up, or pinching to zoom in via touch.
-*   **Zoom Out**: Using the <kbd>Page Down</kbd> key on the keyboard, rolling the mouse wheel down, or pinching to zoom out via touch.
-*   **Fit to Chart Plot Area**: Using the <kbd>Home</kbd> key on the keyboard. There is no mouse or touch operation for this.
+*   **Panning**: Using <kbd>🡐</kbd> <kbd>🡒</kbd> <kbd>🡑</kbd> <kbd>🡓</kbd> arrow keys on the keyboard or holding the <kbd>SHIFT</kbd> key, clicking and dragging with the mouse or pressing and moving your finger via touch.
+*   **Zoom In**: Using the <kbd>PAGE UP</kbd> key on the keyboard, rolling the mouse wheel up, or pinching to zoom in via touch.
+*   **Zoom Out**: Using the <kbd>PAGE DOWN</kbd> key on the keyboard, rolling the mouse wheel down, or pinching to zoom out via touch.
+*   **Fit to Chart Plot Area**: Using the <kbd>HOME</kbd> key on the keyboard. There is no mouse or touch operation for this.
 *   **Area Zoom**: Click and drag the mouse within the plot area with the [`defaultInteraction`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#defaultInteraction) property set to its default - `DragZoom`.
 
 The zoom and pan operations can also be enabled by using modifier keys by setting the [`dragModifier`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#dragModifier) and [`panModifier`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#panModifier) properties, respectively. These properties can be set to the following modifier keys, and when pressed, the corresponding operation will be executed:
 
 | Modifier Value | Corresponding Key |
 | ---------------|------------------ |
-| `Shift`        | <kbd>Shift</kbd> |
-| `Control`      | <kbd>Ctrl</kbd> |
-| `Windows`      | <kbd>Win</kbd> |
-| `Apple`        | <kbd>Apple</kbd> |
+| `Shift`        | <kbd>SHIFT</kbd> |
+| `Control`      | <kbd>CTRL</kbd> |
+| `Windows`      | <kbd>WIN</kbd> |
+| `Apple`        | <kbd>APPLE</kbd> |
 | `None`         | no keys |
 
 ## Chart Navigation with Scrollbars