Merge branch '9.0.x' into mpopov/6720-9.0.x

Author: simeonoff

projects/igniteui-angular/src/lib/badge/badge.component.ts

@@ -4,6 +4,9 @@ import { IgxIconModule } from '../icon/index';
 
 let NEXT_ID = 0;
 
+/**
+ * Determines the igxBadge type
+ */
 export enum IgxBadgeType {
     PRIMARY = 'primary',
     INFO = 'info',
@@ -12,28 +15,26 @@ export enum IgxBadgeType {
     ERROR = 'error'
 }
 /**
- * **Ignite UI for Angular Badge** -
- * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/badge.html)
+ * Badge provides visual notifications used to decorate avatars, menus, etc.
+ *
+ * @igxModule IgxBadgeModule
+ *
+ * @igxTheme igx-badge-theme
  *
+ * @igxKeywords badge, icon, notification
+ *
+ * @igxGroup Data Entry & Display
+ *
+ * @remarks
  * The Ignite UI Badge is used to decorate avatars, navigation menus, or other components in the
  * application when visual notification is needed. They are usually designed as icons with a predefined
  * style to communicate information, success, warnings, or errors.
  *
- * Example:
+ * @example
  * ```html
- * <igx-avatar icon="person" roundShape="true" size="small">
- *   <igx-badge icon="check" type="success" class="badge-style">
- *   </igx-badge>
+ * <igx-avatar>
+ *   <igx-badge icon="check" type="success"></igx-badge>
  * </igx-avatar>
- * ```
- * The `badge-style` class is used to position the badge:
- * ```css
- * .badge-style {
- *   position: absolute;
- *   bottom: -6px;
- *   right:-50px;
- * }
- * ```
  */
 @Component({
     selector: 'igx-badge',
@@ -42,88 +43,113 @@ export enum IgxBadgeType {
 export class IgxBadgeComponent {
 
     /**
-    * An @Input property that sets the value of the `id` attribute.
+    * Sets/gets the `id` of the badge.
+    *
+    * @remarks
+    * If not set, the `id` will have value `"igx-badge-0"`.
+    *
+    * @example
     * ```html
-    *<igx-badge id="igx-badge-2" icon="check" type="success" class="badge-style"></igx-badge>
+    * <igx-badge id="igx-badge-2"></igx-badge>
     * ```
     */
     @HostBinding('attr.id')
     @Input()
     public id = `igx-badge-${NEXT_ID++}`;
 
     /**
-    * An @Input property controlling the type of the badge.
+    * Sets/gets the type of the badge.
+    *
+    * @remarks
     * Allowed values are `primary`, `info`, `success`, `warning`, `error`.
     * Providing an invalid value won't display a badge.
+    *
+    * @example
     * ```html
-    *<igx-badge type="success" icon="check" class="badge-style"></igx-badge>
+    * <igx-badge type="success"></igx-badge>
     * ```
     */
     @Input()
     public type: string | IgxBadgeType = IgxBadgeType.PRIMARY;
 
     /**
-    * An @Input property that sets the value to be displayed inside the badge.
+    * Sets/gets the value to be displayed inside the badge.
+    *
+    * @remarks
     * If an `icon` property is already set the `icon` will be displayed.
-    * If neither a `value` nor an `icon` is set the contentent of the badge will be empty.
+    * If neither a `value` nor an `icon` is set the content of the badge will be empty.
+    *
+    * @example
     * ```html
-    *<igx-badge value="11" type="success" class="badge-style"></igx-badge>
+    * <igx-badge value="11"></igx-badge>
     * ```
     */
     @Input()
     public value = '';
 
     /**
-     * Set an icon for the badge from the material icons set.
+     * Sets/gets an icon for the badge from the material icons set.
+     *
+     * @remarks
      * Has priority over the `value` property.
      * If neither a `value` nor an `icon` is set the content of the badge will be empty.
      * Providing an invalid value won't display anything.
+     *
+     * @example
      * ```html
-     *<igx-badge icon="check" type="success" class="badge-style" value="11"></igx-badge>
+     * <igx-badge icon="check"></igx-badge>
      * ```
      */
     @Input()
     public icon: string;
 
     /**
-     * This allows you to set value to role attribute.
-     *```html
-     *@ViewChild("MyBadge", { read: IgxBadgeComponent })
-     *public badge: IgxBadgeComponent;
-     * //...
-     *badge.label = "badge-status";
+     * Sets/gets the role attribute value.
+     *
+     * @example
+     * ```typescript
+     * @ViewChild("MyBadge", { read: IgxBadgeComponent })
+     * public badge: IgxBadgeComponent;
+     *
+     * badge.role = 'status';
      * ```
      */
     @HostBinding('attr.role')
     public role = 'status';
 
     /**
-     * This allows you to disable igx-badge class. The default it's applied.
-     *```html
-     *@ViewChild("MyBadge", { read: IgxBadgeComponent })
-     *public badge: IgxBadgeComponent;
-     * //...
-     *badge.cssClass = false;
+     * Sets/gets the the css class to use on the badge.
+     *
+     * @example
+     * ```typescript
+     * @ViewChild("MyBadge", { read: IgxBadgeComponent })
+     * public badge: IgxBadgeComponent;
+     *
+     * badge.cssClass = 'my-badge-class';
      * ```
      */
     @HostBinding('class.igx-badge')
     public cssClass = 'igx-badge';
 
     /**
-     * This allows you to set value to aria-label attribute.
-     *```html
-     *@ViewChild("MyBadge", { read: IgxBadgeComponent })
-     *public badge: IgxBadgeComponent;
-     * //...
-     *badge.label = "icon-badge";
+     * Sets/gets the aria-label attribute value.
+     *
+     * @example
+     * ```typescript
+     * @ViewChild("MyBadge", { read: IgxBadgeComponent })
+     * public badge: IgxBadgeComponent;
+     *
+     * badge.label = 'badge';
      * ```
      */
     @HostBinding('attr.aria-label')
     public label = 'badge';
 
     /**
+     * Defines a human-readable, accessor, author-localized description for
+     * the `type` and the `icon` or `value` of the element.
      * @hidden
-     * Defines a human-readable, accessor, author-localized description for the `type` and the `icon` or `value` of the element.
+     * @internal
      */
     get roleDescription() {
         let message: string;
@@ -141,9 +167,10 @@ export class IgxBadgeComponent {
     }
 
     /**
-     * @hidden
      * Method which makes the name of the class more descriptive.
      * This helps the styling of the badges.
+     * @hidden
+     * @internal
      */
     public setClasses() {
         let classes = {};

projects/igniteui-angular/src/lib/icon/icon.component.ts

@@ -2,14 +2,23 @@ import { Component, ElementRef, HostBinding, Input, OnInit, TemplateRef, ViewChi
 import { IgxIconService } from './icon.service';
 
 /**
- * **Ignite UI for Angular Icon** -
- * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/icon.html)
+ * Icon provides a way to include material icons to markup
+ *
+ * @igxModule IgxIconModule
+ *
+ * @igxTheme igx-icon-theme
+ *
+ * @igxKeywords icon, picture
+ *
+ * @igxGroup Display
+ *
+ * @remarks
  *
  * The Ignite UI Icon makes it easy for developers to include material design icons directly in their markup. The icons
  * support custom colors and can be marked as active or disabled using the `isActive` property. This will change the appearance
  * of the icon.
  *
- * Example:
+ * @example
  * ```html
  * <igx-icon color="#00ff00" isActive="true">home</igx-icon>
  * ```
@@ -33,20 +42,16 @@ export class IgxIconComponent implements OnInit {
 
     /**
      *  This allows you to change the value of `class.igx-icon`. By default it's `igx-icon`.
-     *```typescript
-     *@ViewChild("MyIcon") public icon: IgxIconComponent;
-     *constructor(private cdRef:ChangeDetectorRef) {}
-     *ngAfterViewInit() {
-     *    this.icon.cssClass = "";
-     *    this.cdRef.detectChanges();
-     *}
-     * ```
+     *
+     * @hidden
+     * @internal
      */
     @HostBinding('class.igx-icon')
     public cssClass = 'igx-icon';
 
     /**
      *  This allows you to disable the `aria-hidden` attribute. By default it's applied.
+     * @example
      *```typescript
      *@ViewChild("MyIcon") public icon: IgxIconComponent;
      *constructor(private cdRef:ChangeDetectorRef) {}
@@ -61,8 +66,9 @@ export class IgxIconComponent implements OnInit {
 
     /**
     *  An @Input property that sets the value of the `id` attribute.
+    * @example
     *```html
-    *<igx-icon id="igx-icon-1" fontSet="material" color="blue" [isActive]="false">settings</igx-icon>
+    *<igx-icon id="igx-icon-1" fontSet="material">settings</igx-icon>
     *```
     */
     @HostBinding('attr.id')
@@ -71,36 +77,39 @@ export class IgxIconComponent implements OnInit {
 
     /**
     *  An @Input property that sets the value of the `fontSet`. By default it's "material".
+    * @example
     *```html
-    *<igx-icon fontSet="material" color="blue" [isActive]="false">settings</igx-icon>
+    *<igx-icon fontSet="material">settings</igx-icon>
     *```
     */
     @Input('fontSet')
     public font: string;
 
     /**
     *  An @Input property that allows you to disable the `active` property. By default it's applied.
+    * @example
     *```html
-    *<igx-icon [isActive]="false" fontSet="material" color="blue">settings</igx-icon>
+    *<igx-icon [isActive]="false">settings</igx-icon>
     *```
     */
     @Input('isActive')
     public active = true;
 
     /**
     *  An @Input property that allows you to change the `iconColor` of the icon.
+    * @example
     *```html
-    *<igx-icon color="blue" [isActive]="true" fontSet="material">settings</igx-icon>
+    *<igx-icon color="blue">settings</igx-icon>
     *```
     */
     @Input('color')
     public iconColor: string;
 
     /**
     *  An @Input property that allows you to set the `iconName` of the icon.
-    *  The `iconName` can be set using the `name` property.
+    *  @example
     *```html
-    *<igx-icon color="blue" [isActive]="true" fontSet="material">question_answer</igx-icon>
+    *<igx-icon name="contains" fontSet="filter-icons"></igx-icon>
     *```
     */
     @Input('name')
@@ -119,13 +128,15 @@ export class IgxIconComponent implements OnInit {
 
     /**
      * @hidden
+     * @internal
      */
     ngOnInit() {
         this.updateIconClass();
     }
 
     /**
      *  An accessor that returns the value of the font property.
+     * @example
      *```typescript
      *@ViewChild("MyIcon")
      *public icon: IgxIconComponent;
@@ -140,6 +151,7 @@ export class IgxIconComponent implements OnInit {
 
     /**
      *  An accessor that returns the value of the active property.
+     * @example
      *```typescript
      *@ViewChild("MyIcon")
      *public icon: IgxIconComponent;
@@ -154,6 +166,7 @@ export class IgxIconComponent implements OnInit {
 
     /**
      *  An accessor that returns inactive property.
+     * @example
      *```typescript
      *@ViewChild("MyIcon")
      *public icon: IgxIconComponent;
@@ -169,6 +182,7 @@ export class IgxIconComponent implements OnInit {
 
     /**
      *  An accessor that returns the opposite value of the `iconColor` property.
+     * @example
      *```typescript
      *@ViewChild("MyIcon")
      *public icon: IgxIconComponent;
@@ -184,6 +198,7 @@ export class IgxIconComponent implements OnInit {
 
     /**
      *  An accessor that returns the value of the iconName property.
+     * @example
      *```typescript
      *@ViewChild("MyIcon")
      *public icon: IgxIconComponent;
@@ -199,6 +214,7 @@ export class IgxIconComponent implements OnInit {
     /**
      *  An accessor that returns the key of the SVG image.
      *  The key consists of the fontSet and the iconName separated by underscore.
+     * @example
      *```typescript
      *@ViewChild("MyIcon")
      *public icon: IgxIconComponent;
@@ -217,6 +233,7 @@ export class IgxIconComponent implements OnInit {
 
     /**
      *   An accessor that returns a TemplateRef to explicit, svg or no ligature.
+     * @example
      *```typescript
      *@ViewChild("MyIcon")
      *public icon: IgxIconComponent;
@@ -239,6 +256,7 @@ export class IgxIconComponent implements OnInit {
 
     /**
      * @hidden
+     * @internal
      */
     private updateIconClass() {
         const className = this.iconService.fontSetClassName(this.font);