Merge branch 'master' into sboykova/calendar-views-docs

en/components/autocomplete.md

@@ -7,9 +7,9 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI
 ## Autocomplete
 <p class="highlight">
 
-The [**igxAutocomplete**]({environment:angularApiUrl}/classes/igxautocompletedirective.html) directive provides a way to enhance a text input by showing a [igxDropDown]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) with suggested options, provided by the developer. The suggestions will show once you start typing in the text input or use the `Arrow Up`/`Arrow Down` keys.
+The [`igxAutocomplete`]({environment:angularApiUrl}/classes/igxautocompletedirective.html) directive provides a way to enhance a text input by showing a [`igxDropDown`]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) with suggested options, provided by the developer. The suggestions will show once you start typing in the text input or use the `Arrow Up`/`Arrow Down` keys.
 
-By default, the first item is always highlighted, which provides an easy way to select it using the `Enter` key. Clicking on the item from the list will select it too, and the input value will be automatically updated, which will result closing of the dropdown. When an item is selected, the `onItemSelected` event is fired. If this event is canceled, the item will not be selected and the drop-down will not close. The [**igxAutocomplete**]({environment:angularApiUrl}/classes/igxautocompletedirective.html) directive allows you to navigate through items and at the same time to have focus always on the input. The latter will allow you to continue typing in the input. You can use the `ESC` key to close the drop-down list.
+By default, the first item is always highlighted, which provides an easy way to select it using the `Enter` key. Clicking on the item from the list will select it too, and the input value will be automatically updated, which will result closing of the dropdown. When an item is selected, the `onItemSelected` event is fired. If this event is canceled, the item will not be selected and the drop-down will not close. The [`igxAutocomplete`]({environment:angularApiUrl}/classes/igxautocompletedirective.html) directive allows you to navigate through items and at the same time to have focus always on the input. The latter will allow you to continue typing in the input. You can use the `ESC` key to close the drop-down list.
 
 The [`igx-autocomplete`]({environment:angularApiUrl}/classes/igxautocompletedirective.html) uses the [`igx-drop-down`]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) as a provider for the available options, which means the available capabilities of the drop-down component can be used, these include grouping, templates and disabling of items and groups.
 </p>
@@ -238,22 +238,20 @@ For the purpose of the sample there is a delay in the data loading, in order to
 </div>
 <div class="divider--half"></div>
 
-## API
+## API Reference
 <div class="divider--half"></div>
 
 * [IgxAutocompleteDirective]({environment:angularApiUrl}/classes/igxautocompletedirective.html)
 * [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html)
 * [IgxInputGroup]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html)
 
-## Known Issues
-
 ### Additional Resources
 <div class="divider--half"></div>
 
 * [IgxDropDownComponent](drop_down.md)
 * [IgxInputGroup](input_group.md)
 * [Template Driven Forms Integration](input_group.md)
-[Reactive Forms Integration](input_group_reactive_forms.md)
+* [Reactive Forms Integration](input_group_reactive_forms.md)
 
 Our community is active and always welcoming to new ideas.
 

en/components/avatar.md

@@ -22,7 +22,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI
 
 ### Usage
 
-To get started with the Ignite UI for Angular Avatar, let's first import the [`IgxAvatarModule`]({environment:angularApiUrl}/classes/igxavatarmodule.html) in the **app.module.ts** file:
+To get started with the Ignite UI for Angular Avatar, let's first import the `IgxAvatarModule` in the **app.module.ts** file:
 
 ```typescript
 // app.module.ts

en/components/badge.md

@@ -21,7 +21,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI
 > To start using Ignite UI for Angular components in your own projects, make sure you have configured all necessary dependencies and have performed the proper setup of your project. You can learn how to do this in the [**installation**](https://www.infragistics.com/products/ignite-ui-angular/getting-started#installation) topic.
 
 ###Usage
-To get started with the Ignite UI for Angular Badge, let's first import the [`IgxBadgeModule`]({environment:angularApiUrl}/classes/igxbadgemodule.html) in the **app.module.ts** file:
+To get started with the Ignite UI for Angular Badge, let's first import the `IgxBadgeModule` in the **app.module.ts** file:
 
 ```typescript
 // app.module.ts

en/components/button.md

@@ -6,7 +6,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI
 
 ## Button
 
-The Button directive within Ignite UI for Angular is intended to be used on any button, span, div, or anchor element to turn it into a fully functional button. 
+The Button directive within Ignite UI for Angular is intended to be used on any button, span, div, or anchor element to turn it into a fully functional button.
 
 ### Button Demo
 
@@ -20,7 +20,7 @@ The Button directive within Ignite UI for Angular is intended to be used on any
 
 ### Dependencies
 
-The Button Directive is exported as an `NgModule`, thus all you need to do in your application is to import the [`IgxButtonModule`]({environment:angularApiUrl}/classes/igxbuttonmodule.html) inside your `AppModule`:
+The Button Directive is exported as an `NgModule`, thus all you need to do in your application is to import the `IgxButtonModule` inside your `AppModule`:
 
 ```typescript
 // app.module.ts
@@ -47,7 +47,7 @@ Setting a simple [`igxButton`]({environment:angularApiUrl}/classes/igxbuttondire
 
 Result:
 <div class="sample-container loading" style="height: 48px">
-    <iframe class="lazyload" seamless width="100%" height="100%" frameborder="0" data-src="{environment:demosBaseUrl}/data-entries/buttons-sample-2">
+    <iframe class="lazyload" seamless width="100%" height="100%" frameborder="0" src="{environment:demosBaseUrl}/data-entries/buttons-sample-2" onload="onSampleIframeContentLoaded(this);">
 </div>
 
 You can add a Ripple effect. And also set its color `igxRipple="blue"`.
@@ -58,7 +58,18 @@ You can add a Ripple effect. And also set its color `igxRipple="blue"`.
 
 Default ripple color. Custom ripple color:
 <div class="sample-container loading" style="height: 48px">
-    <iframe class="lazyload" seamless width="100%" height="100%" frameborder="0" data-src="{environment:demosBaseUrl}/data-entries/buttons-sample-3">
+    <iframe class="lazyload" seamless width="100%" height="100%" frameborder="0" src="{environment:demosBaseUrl}/data-entries/buttons-sample-3" onload="onSampleIframeContentLoaded(this);">
+</div>
+
+Outlined button style:
+
+```html
+<button igxButton="outlined">Outlined</button>
+```
+
+Result:
+<div class="sample-container loading" style="height: 48px">
+    <iframe class="lazyload" seamless width="100%" height="100%" frameborder="0" src="{environment:demosBaseUrl}/data-entries/buttons-sample-8" onload="onSampleIframeContentLoaded(this);">
 </div>
 
 Using [`igxButton`]({environment:angularApiUrl}/classes/igxbuttondirective.html) to turn a `span` element into a Ignite UI for Angular styled button.
@@ -69,17 +80,17 @@ Using [`igxButton`]({environment:angularApiUrl}/classes/igxbuttondirective.html)
 
 The span now looks like:
 <div class="sample-container loading" style="height: 54px">
-    <iframe class="lazyload" seamless width="100%" height="100%" frameborder="0" data-src="{environment:demosBaseUrl}/data-entries/buttons-sample-4">
+    <iframe class="lazyload" seamless width="100%" height="100%" frameborder="0" src="{environment:demosBaseUrl}/data-entries/buttons-sample-4" onload="onSampleIframeContentLoaded(this);">
 </div>
 
-You can create a rased button.
+You can create a raised button.
 
 ```html
 <button igxButton="raised" igxRipple="white">Raised</button>
 ```
 
 <div class="sample-container loading" style="height: 54px">
-    <iframe class="lazyload" seamless width="100%" height="100%" frameborder="0" data-src="{environment:demosBaseUrl}/data-entries/buttons-sample-5">
+    <iframe class="lazyload" seamless width="100%" height="100%" frameborder="0" src="{environment:demosBaseUrl}/data-entries/buttons-sample-5" onload="onSampleIframeContentLoaded(this);">
 </div>
 
 A floating action button and use an icon to display:
@@ -90,7 +101,7 @@ A floating action button and use an icon to display:
 </button>
 ```
 <div class="sample-container loading" style="height: 74px">
-    <iframe class="lazyload" seamless width="100%" height="100%" frameborder="0" data-src="{environment:demosBaseUrl}/data-entries/buttons-sample-6">
+    <iframe class="lazyload" seamless width="100%" height="100%" frameborder="0" src="{environment:demosBaseUrl}/data-entries/buttons-sample-6" onload="onSampleIframeContentLoaded(this);">
 </div>
 
 Or use icons as buttons:
@@ -107,21 +118,19 @@ Or use icons as buttons:
 ```
 Icon results:
 <div class="sample-container loading" style="height: 54px">
-    <iframe class="lazyload" seamless width="100%" height="100%" frameborder="0" data-src="{environment:demosBaseUrl}/data-entries/buttons-sample-7">
+    <iframe class="lazyload" seamless width="100%" height="100%" frameborder="0" src="{environment:demosBaseUrl}/data-entries/buttons-sample-7" onload="onSampleIframeContentLoaded(this);">
 </div>
 
 <div class="divider--half"></div>
 
-### Button Types
+### Button types
 | Name   | Description |
 |:----------|:-------------:|
-| `flat` | The default button type. Transparent background and primary theme color for text. |
-| `raised` | As the name implies, this button type uses subtle box-shadow. Primary theme color for background and white for text color. |
-| `gradient` | Same as the raised button type. Additionally you can specify a gradient value for background color. |
-| `fab` | Floating action button type. Circular with primary theme color for background and white text. |
+| `flat` | The default button type. Uses transparent background and the secondary theme color from the palette color for the text. |
+| `outlined` |  Very similar to the flat button type but with a thin outline around the edges of the button. |
+| `raised` | As the name implies, this button type features a subtle shadow. Uses the secondary theme color from the palette for background. |
+| `fab` | Floating action button type. Circular with secondary theme color for background. |
 | `icon` | This is the simplest of button types. Use it whenever you need to use an icon as button. |
-| `navbar` | Same as the icon button type, albeit optimized for use with the igx-navbar component. |
-
 
 ### API References
 <div class="divider--half"></div>

en/components/buttonGroup.md

@@ -20,7 +20,7 @@ The [**igx-buttongroup**]({environment:angularApiUrl}/classes/igxbuttongroupcomp
 
 ### Dependencies
 
-The Button Group is exported as an `NgModule`, thus you will need to import the [`IgxButtonGroupModule`]({environment:angularApiUrl}/classes/igxbuttongroupmodule.html) inside your `AppModule`:
+The Button Group is exported as an `NgModule`, thus you will need to import the `IgxButtonGroupModule` inside your `AppModule`:
 
 ```typescript
 // app.module.ts

en/components/calendar.md

@@ -16,7 +16,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI
 </div>
 
 ### Usage
-To get started with the **Ignite UI for Angular Calendar**, let's first import the [**IgxCalendarModule**]({environment:angularApiUrl}/classes/igxcalendarmodule.html) in the application's AppModule, typically this is the **app.module.ts** file. Note that the [**IgxCalendar**]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) is also dependent on the **BrowserAnimationsModule**, so it needs to be added to the AppModule as well:
+To get started with the **Ignite UI for Angular Calendar**, let's first import the `IgxCalendarModule` in the application's AppModule, typically this is the **app.module.ts** file. Note that the [**IgxCalendar**]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) is also dependent on the **BrowserAnimationsModule**, so it needs to be added to the AppModule as well:
 
 ```typescript
 // app.module.ts
@@ -67,11 +67,11 @@ Notice that the calendar header is not rendered when the selection is either `mu
 
 #### Localization and formatting
 
-Due to their very nature, localization and formatting are essential to any calendar. In the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) those are controlled and customized through the following properties - [`locale`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#locale), [`formatOptions`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#formatoptions), [`formatViews`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#formatviews).
+Due to their very nature, localization and formatting are essential to any calendar. In the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) those are controlled and customized through the following properties - [`locale`]({environment:angularApiUrl}/classes/igxcalendarbase.html#locale), [`formatOptions`]({environment:angularApiUrl}/classes/igxcalendarbase.html#formatoptions), [`formatViews`]({environment:angularApiUrl}/classes/igxmonthpickerbase.html#formatviews).
 <br>
-Let's go ahead and try those along with other customizations from the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) API. Say we are having visitors on our page coming from countries from EFTA (European Free Trade Association) countries, so we need to display the calendar in the corresponding culture. First thing we need to set is the [`weekstart`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#weekstart), which controls the starting day of the week. It defaults to 0, which corresponds to Sunday, so we set a value of 1.
+Let's go ahead and try those along with other customizations from the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) API. Say we are having visitors on our page coming from countries from EFTA (European Free Trade Association) countries, so we need to display the calendar in the corresponding culture. First thing we need to set is the [`weekstart`]({environment:angularApiUrl}/classes/igxcalendarbase.html#weekstart), which controls the starting day of the week. It defaults to 0, which corresponds to Sunday, so we set a value of 1.
 
-In the markup below we are also binding the [`formatOptions`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#formatoptions) and [`formatViews`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#formatviews) properties to customize the display formatting. Finally we are binding the [`locale`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#locale) property to a value, based on the user's location choice:
+In the markup below we are also binding the [`formatOptions`]({environment:angularApiUrl}/classes/igxcalendarbase.html#formatoptions) and [`formatViews`]({environment:angularApiUrl}/classes/igxmonthpickerbase.html#formatviews) properties to customize the display formatting. Finally we are binding the [`locale`]({environment:angularApiUrl}/classes/igxcalendarbase.html#locale) property to a value, based on the user's location choice:
 
 ```html
 <!-- app.component.html -->
@@ -128,7 +128,7 @@ Let's build on top of that sample a bit. We will require the user to enter a dat
 </igx-calendar>
 ```
 
-The value passed in the [`onSelection`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#onselection) event is the collection of dates selected, so we can read its length to base our logic upon it. If we alert the user for the invalid selection, we also reset the selection to contain only the first date from the range using the [`selectDate`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#selectdate) method:
+The value passed in the [`onSelection`]({environment:angularApiUrl}/classes/igxcalendarbase.html#onselection) event is the collection of dates selected, so we can read its length to base our logic upon it. If we alert the user for the invalid selection, we also reset the selection to contain only the first date from the range using the [`selectDate`]({environment:angularApiUrl}/classes/igxcalendarbase.html#selectdate) method:
 
 ```typescript
 // app.component.ts
@@ -274,9 +274,9 @@ This is the result.
 
 #### Special dates
 
-[`Special dates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#specialdates) feature is using almost the same configuration principles as [`Disabled dates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#disableddates). The difference here is dates `styling` and `interaction`. You are able to select and focus [`Special dates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#specialdates).
+[`Special dates`]({environment:angularApiUrl}/classes/igxcalendarbase.html#specialdates) feature is using almost the same configuration principles as [`Disabled dates`]({environment:angularApiUrl}/classes/igxcalendarbase.html#disableddates). The difference here is dates `styling` and `interaction`. You are able to select and focus [`Special dates`]({environment:angularApiUrl}/classes/igxcalendarbase.html#specialdates).
 
-Lets add a [`Special dates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#specialdates) to our [`igxCalendar`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html), we are going to create a [`DateRangeDescriptor`]({environment:angularApiUrl}/interfaces/daterangedescriptor.html) item of type [`DateRangeType.Specific`]({environment:angularApiUrl}/enums/daterangetype.html#specific) and pass array of dates as [`dateRange`]({environment:angularApiUrl}/interfaces/daterangedescriptor.html#daterange):
+Lets add a [`Special dates`]({environment:angularApiUrl}/classes/igxcalendarbase.html#specialdates) to our [`igxCalendar`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html), we are going to create a [`DateRangeDescriptor`]({environment:angularApiUrl}/interfaces/daterangedescriptor.html) item of type [`DateRangeType.Specific`]({environment:angularApiUrl}/enums/daterangetype.html#specific) and pass array of dates as [`dateRange`]({environment:angularApiUrl}/interfaces/daterangedescriptor.html#daterange):
 
 ```typescript
 export class CalendarSample7Component {

en/components/card.md

@@ -23,7 +23,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI
 Cards allow you to easily display content composed of different types of objects or similar objects whose size and supported actions can vary.
 
 ####Getting Started
-To get started with the Ignite UI for Angular Card, let's first import the [`IgxCardModule`]({environment:angularApiUrl}/classes/igxcardmodule.html) inside our **app.module.ts** file:
+To get started with the Ignite UI for Angular Card, let's first import the `IgxCardModule` inside our **app.module.ts** file:
 
 ```typescript
 // app.module.ts

en/components/checkbox.md

@@ -20,7 +20,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI
 ### Usage
 At its core, the checkbox component allows for a choice between selected/unselected state. The default styling is done according to the selection controls specification as per the Material Design guidelines.
 
-To get started with the Ignite UI for Angular Checkbox import the [`IgxCheckboxModule`]({environment:angularApiUrl}/classes/igxcheckboxmodule.html) in the **app.module.ts** file:
+To get started with the Ignite UI for Angular Checkbox import the `IgxCheckboxModule` in the **app.module.ts** file:
 
 ```typescript
 // app.module.ts