Merge branch '9.0.x' into astaev/issue1703-9.0.x

Author: DiyanDimitrov

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/card/card.component.ts

@@ -24,15 +24,15 @@ let NEXT_ID = 0;
     selector: 'igx-card-media'
 })
 export class IgxCardMediaDirective {
-    /**
-     * @hidden
-     */
+    /** @hidden @internal */
     @HostBinding('class.igx-card__media')
     public cssClass = 'igx-card__media';
 
     /**
      * An @Input property that sets the `width` and `min-width` style property
      * of the media container. If not provided it will be set to `auto`.
+     *
+     * @example
      * ```html
      * <igx-card-media width="300px"></igx-card-media>
      * ```
@@ -45,6 +45,8 @@ export class IgxCardMediaDirective {
     /**
      * An @Input property that sets the `height` style property of the media container.
      * If not provided it will be set to `auto`.
+     *
+     * @example
      * ```html
      * <igx-card-media height="50%"></igx-card-media>
      * ```
@@ -69,15 +71,15 @@ export class IgxCardMediaDirective {
     templateUrl: 'card-header.component.html'
 })
 export class IgxCardHeaderComponent {
-    /**
-     * @hidden
-     */
+    /** @hidden @internal */
     @HostBinding('class.igx-card-header')
     public cssClass = 'igx-card-header';
 
     /**
      * An @Input property that sets the layout style of the header.
      * By default the header elements(thumbnail and title/subtitle) are aligned horizontally.
+     *
+     * @example
      * ```html
      * <igx-card-header [vertical]="true"></igx-card-header>
      * ```
@@ -89,6 +91,8 @@ export class IgxCardHeaderComponent {
     /**
      * An @Input property that sets the value of the `role` attribute of the card header.
      * By default the value is set to `header`.
+     *
+     * @example
      * ```html
      * <igx-card-header role="header"></igx-card-header>
      * ```
@@ -114,9 +118,7 @@ export class IgxCardThumbnailDirective { }
     selector: '[igxCardHeaderTitle]'
 })
 export class IgxCardHeaderTitleDirective {
-    /**
-     * @hidden
-     */
+    /** @hidden @internal */
     @HostBinding('class.igx-card-header__title')
     public cssClass = 'igx-card__header__title';
 }
@@ -129,9 +131,7 @@ export class IgxCardHeaderTitleDirective {
     selector: '[igxCardHeaderSubtitle]'
 })
 export class IgxCardHeaderSubtitleDirective {
-    /**
-     * @hidden
-     */
+    /** @hidden @internal */
     @HostBinding('class.igx-card-header__subtitle')
     public cssClass = 'igx-card-header__subtitle';
 }
@@ -143,9 +143,7 @@ export class IgxCardHeaderSubtitleDirective {
     selector: 'igx-card-content'
 })
 export class IgxCardContentDirective {
-    /**
-     * @hidden
-     */
+    /** @hidden @internal */
     @HostBinding('class.igx-card-content')
     public cssClass = 'igx-card-content';
 }
@@ -161,6 +159,8 @@ export class IgxCardFooterDirective {
     /**
      * An @Input property that sets the value of the `role` attribute of the card footer.
      * By default the value is set to `footer`.
+     *
+     * @example
      * ```html
      * <igx-card-footer role="footer"></igx-card-footer>
      * ```
@@ -171,13 +171,21 @@ export class IgxCardFooterDirective {
 }
 
 /**
- * **Ignite UI for Angular Card** -
- * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/card.html)
+ * Card provides a way to display organized content in appealing way.
+ *
+ * @igxModule IgxCardModule
+ *
+ * @igxTheme igx-card-theme, igx-icon-theme, igx-button-theme
+ *
+ * @igxKeywords card, button, avatar, icon
+ *
+ * @igxGroup Layouts
  *
+ * @remarks
  * The Ignite UI Card serves as a container that allows custom content to be organized in an appealing way. There are
  * five sections in a card that you can use to organize your content. These are header, media, content, actions, and footer.
  *
- * Example:
+ * @example
  * ```html
  * <igx-card>
  *   <igx-card-header>
@@ -205,13 +213,14 @@ export class IgxCardComponent {
     /**
      * Sets/gets the `id` of the card.
      * If not set, `id` will have value `"igx-card-0"`;
+     *
+     * @example
      * ```html
      * <igx-card id = "my-first-card"></igx-card>
      * ```
      * ```typescript
      * let cardId =  this.card.id;
      * ```
-     * @memberof IgxCardComponent
      */
     @HostBinding('attr.id')
     @Input()
@@ -220,6 +229,8 @@ export class IgxCardComponent {
     /**
      * An @Input property that sets the value of the `role` attribute of the card.
      * By default the value is set to `group`.
+     *
+     * @example
      * ```html
      * <igx-card role="group"></igx-card>
      * ```
@@ -232,6 +243,8 @@ export class IgxCardComponent {
      * An @Input property that sets the value of the `type` attribute of the card.
      * By default the value is set to `default`. You can make the card use the
      * outlined style by setting the value to `outlined`.
+     *
+     * @example
      * ```html
      * <igx-card type="outlined"></igx-card>
      * ```
@@ -252,6 +265,8 @@ export class IgxCardComponent {
      * An @Input property that sets the value of the `horizontal` attribute of the card.
      * Setting this to `true` will make the different card sections align horizontally,
      * essentially flipping the card to the side.
+     *
+     * @example
      * ```html
      * <igx-card [horizontal]="true"></igx-card>
      * ```
@@ -286,6 +301,8 @@ export class IgxCardActionsComponent implements OnInit, OnChanges {
      * of the card-actions area.
      * You can justify the elements in those groups so they are positioned equally
      * from one another taking up all the space available along the card actions axis.
+     *
+     * @example
      * ```html
      * <igx-card-actions layout="justify"></igx-card-actions>
      * ```
@@ -318,6 +335,8 @@ export class IgxCardActionsComponent implements OnInit, OnChanges {
      * placed in the actions area.
      * If you want to reverse their positions so that icons appear first, use the `reverse`
      * attribute.
+     *
+     * @example
      * ```html
      * <igx-card-actions [reverse]="true"></igx-card-actions>
      * ```