Merge branch 'master' into bpachilova/feat-14011

Author: ddaribo

.github/CONTRIBUTING.md

@@ -12,7 +12,7 @@ In order to perform all the necessary checks before pulling your changes in, you
     npm install
     npm test
 
-[Naming Convention](../../../wiki/General-Naming-Guidelines-for-Ignite-UI-for-Angular)  
+[General Naming and Coding Guidelines](../../../wiki/General-Naming-and-Coding-Guidelines-for-Ignite-UI-for-Angular)  
 [CSS Naming Convention](../css-naming-convention.md)  
 
 # Workflow
@@ -101,7 +101,7 @@ https://github.com/IgniteUI/igniteui-angular-i18n
 
 **NOTE** The localization repo has been moved to live inside the `igniteui-angular` repository under `./projects/igniteui-angular-i18n`  
 
-A npm package should be published each time we release new version of IgniteUI for Angular. Its version should correspond to the version of the igniteui-angular npm package.
+A npm package should be published each time we release new version of Ignite UI for Angular. Its version should correspond to the version of the igniteui-angular npm package.
 One could localize an application by importing the corresponding localized resource strings from the localization package (`igniteui-angular-i18n`) and use the methods described in the previous bullet to localize the whole application or part of it.
 Example:
 Inside app.module you can perform:
@@ -178,30 +178,32 @@ if (isDevMode()) {
 `
 Write migrations.
 
-## Deprecating methods
-When a method is deprecated a few steps have to be done:
-1. Add the `@deprecated` tag at the begging of the method description followed by the version in which the method has been deprecated and what can be used instead. Example:
-```ts
-/**
- * @deprecated in version 12.1.0. Use 'data' instead
- *
- * The data record that populates the row
- */
-public getRowData(): any {
-    return this.data;
-}
-```
-2. Ensure that the deprecated method is no longer used in IgniteUI for Angular codebase, samples and documentation snippets.
-3. Write migrations.
-
-## Deprecating class properties
-When a class property is deprecated a few steps have to be done:
-1. Add the `@deprecated` tag at the begging of the property description followed by the version in which the property has been deprecated and what can be used instead.
-2. Ensure that the deprecated property is no longer used in IgniteUI for Angular codebase, samples and documentation snippets.
+## Deprecating members
+When a property or method is deprecated a few steps have to be done:
+1. Add the `@deprecated` tag after the member description (since it's a block tag), followed by the version in which the member has been deprecated and what can be used instead. Example:
+    ```ts
+    /**
+     * Enables selecting multiple buttons.
+     *
+     * @deprecated in version 16.1.0. Use the `selectionMode` property instead.
+     */
+    @Input()
+    public get multiSelection() { /* ... */ }
+    public set multiSelection(value: boolean) { /* ... */ }
+
+    /**
+     * The data record that populates the row
+     *
+     * @deprecated in version 12.1.0. Use the `data` property instead.
+     */
+    public getRowData(): any {
+        return this.data;
+    }
+    ```
+    Note: Use full specific version followed by full stop and if possible keep the alternative use short and in the same line.
+2. Ensure that the deprecated member is no longer used in Ignite UI for Angular codebase, samples and documentation snippets.
 3. Write migrations.
 
-NOTE: TypeScript disallows adding descriptions to both the get and set accessor for a single member. Instead, the description for the member must be applied to the first accessor specified in document order. Having this in mind the `@deprecated` tag is applied only once.
-
 # Testing a PR
 In order to test a pull request that is awaiting test, perform the following actions.
 

.vscode/extensions.json

@@ -0,0 +1,13 @@
+{
+    // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+    // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+    // List of extensions which should be recommended for users of this workspace.
+    "recommendations": [
+        "editorconfig.editorconfig",
+        "dbaeumer.vscode-eslint",
+        "angular.ng-template",
+        "streetsidesoftware.code-spell-checker"
+    ],
+    // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
+    "unwantedRecommendations": []
+}

projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts

@@ -116,7 +116,7 @@ export class IgxActionStripComponent extends DisplayDensityBase implements IgxAc
     public actionButtons: QueryList<IgxGridActionsBaseDirective>;
 
     /**
-     * An @Input property that set the visibility of the Action Strip.
+     * Gets/Sets the visibility of the Action Strip.
      * Could be used to set if the Action Strip will be initially hidden.
      *
      * @example

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

@@ -118,16 +118,16 @@ export class IgxAvatarComponent implements OnInit {
     public id = `igx-avatar-${NEXT_ID++}`;
 
     /**
-     * @deprecated in version 15.1.0.
      * Sets a circular shape to the avatar, if `[roundShape]` is set to `true`.
      * By default the shape of the avatar is a square.
      *
      * @example
      * ```html
      * <igx-avatar [roundShape]="true" ></igx-avatar>
      * ```
+     * @deprecated in version 15.1.0.
+     * @hidden
      */
-    /** @hidden @internal */
     @Input()
     @HostBinding('class.igx-avatar--circle')
     public get roundShape() {

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

@@ -74,7 +74,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
     }
 
     /**
-     * An @Input property that sets the value of the `id` attribute. If not set it will be automatically generated.
+     * Gets/Sets the value of the `id` attribute. If not set it will be automatically generated.
      * ```html
      *  <igx-buttongroup [id]="'igx-dialog-56'" [selectionMode]="'multi'" [values]="alignOptions">
      * ```
@@ -120,9 +120,9 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
     }
 
     /**
-     * @deprecated in version 16.1.0. Set/Use selectionMode property instead.
-     *
      * Enables selecting multiple buttons. By default, multi-selection is false.
+     *
+     * @deprecated in version 16.1.0. Use the `selectionMode` property instead.
      */
     @Input()
     public get multiSelection() {
@@ -141,7 +141,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
     }
 
     /**
-     * An @Input property that get/set the selection mode 'single', 'singleRequired' or 'multi' of the buttons. By default, the selection mode is 'single'.
+     * Gets/Sets the selection mode to 'single', 'singleRequired' or 'multi' of the buttons. By default, the selection mode is 'single'.
      * ```html
      * <igx-buttongroup [selectionMode]="'multi'" [alignment]="alignment"></igx-buttongroup>
      * ```
@@ -162,7 +162,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
     }
 
     /**
-     * An @Input property that allows setting the buttons in the button group.
+     * Property that configures the buttons in the button group using a collection of `Button` objects.
      * ```typescript
      *  public ngOnInit() {
      *      this.cities = [
@@ -190,7 +190,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
     @Input() public values: any;
 
     /**
-     * An @Input property that allows you to disable the `igx-buttongroup` component. By default it's false.
+     * Disables the `igx-buttongroup` component. By default it's false.
      * ```html
      * <igx-buttongroup [disabled]="true" [selectionMode]="'multi'" [values]="fontOptions"></igx-buttongroup>
      * ```

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

@@ -30,7 +30,7 @@ export class IgxCardMediaDirective {
     public cssClass = 'igx-card__media';
 
     /**
-     * An @Input property that sets the `width` and `min-width` style property
+     * Sets the `width` and `min-width` style property
      * of the media container. If not provided it will be set to `auto`.
      *
      * @example
@@ -44,7 +44,7 @@ export class IgxCardMediaDirective {
     public width = 'auto';
 
     /**
-     * An @Input property that sets the `height` style property of the media container.
+     * Sets the `height` style property of the media container.
      * If not provided it will be set to `auto`.
      *
      * @example
@@ -57,7 +57,7 @@ export class IgxCardMediaDirective {
     public height = 'auto';
 
     /**
-     * An @Input property that sets the `role` attribute of the media container.
+     * Sets the `role` attribute of the media container.
      */
     @HostBinding('attr.role')
     @Input()
@@ -78,7 +78,7 @@ export class IgxCardHeaderComponent {
     public cssClass = 'igx-card-header';
 
     /**
-     * An @Input property that sets the layout style of the header.
+     * Sets the layout style of the header.
      * By default the header elements(thumbnail and title/subtitle) are aligned horizontally.
      *
      * @example
@@ -152,7 +152,7 @@ export class IgxCardContentDirective {
 })
 export class IgxCardFooterDirective {
     /**
-     * An @Input property that sets the value of the `role` attribute of the card footer.
+     * Sets the value of the `role` attribute of the card footer.
      * By default the value is set to `footer`.
      *
      * @example
@@ -196,7 +196,7 @@ export class IgxCardFooterDirective {
  */
 
 /**
- * @deprecated in 17.0.0. To switch betweet `outlined` and `elevated` card use the `elevated` property.
+ * @deprecated in 17.0.0. To switch between `outlined` and `elevated` card use the `elevated` property.
  * Since version 17.0.0 the card component is `outlined` by default.
  */
 export const IgxCardType = /*@__PURE__*/mkenum({
@@ -239,7 +239,7 @@ export class IgxCardComponent {
     public cssClass = 'igx-card';
 
     /**
-     * An @Input property that sets the value of the `role` attribute of the card.
+     * Sets the value of the `role` attribute of the card.
      * By default the value is set to `group`.
      *
      * @example
@@ -252,16 +252,11 @@ export class IgxCardComponent {
     public role = 'group';
 
     /**
-     * @deprecated in version 17.0.0. Use `elevated` property instead.
-     *
-     * An @Input property that sets the value of the `type` attribute of the card.
+     * Sets the value of the `type` attribute of the card.
      * By default the value is set to `outlined`. You can make the card use the
      * elevated style by setting the value to `elevated`.
      *
-     * @example
-     * ```html
-     * <igx-card type="elevated"></igx-card>
-     * ```
+     * @deprecated in version 17.0.0. Use `elevated` property instead.
      */
     @Input()
     public type: IgxCardType | string = IgxCardType.OUTLINED;
@@ -283,7 +278,7 @@ export class IgxCardComponent {
     }
 
     /**
-     * An @Input property that sets/gets whether the card is elevated.
+     * Sets/gets whether the card is elevated.
      * Default value is `false`.
      *
      * @example
@@ -304,7 +299,7 @@ export class IgxCardComponent {
     }
 
     /**
-     * An @Input property that sets the value of the `horizontal` attribute of the card.
+     * 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.
      *
@@ -341,7 +336,7 @@ export type IgxCardActionsLayout = (typeof IgxCardActionsLayout)[keyof typeof Ig
 })
 export class IgxCardActionsComponent implements OnInit, OnChanges {
     /**
-     * An @Input property that sets the layout style of the actions.
+     * Sets the layout style of the actions.
      * You can justify the elements slotted in the igx-card-action container
      * so that they are positioned equally from one another taking up all the
      * space available along the card actions axis.
@@ -356,7 +351,7 @@ export class IgxCardActionsComponent implements OnInit, OnChanges {
     public layout: IgxCardActionsLayout | string = IgxCardActionsLayout.START;
 
     /**
-     * An @Input property that sets the vertical attribute of the actions.
+     * Sets the vertical attribute of the actions.
      * When set to `true` the actions will be layed out vertically.
      */
     @HostBinding('class.igx-card-actions--vertical')
@@ -373,14 +368,9 @@ export class IgxCardActionsComponent implements OnInit, OnChanges {
     }
 
     /**
-     * @deprecated in version 15.1.0.
-     *
-     * An @Input property that reverses the order of the buttons in the actions area.
+     * Reverses the order of the buttons in the actions area.
      *
-     * @example
-     * ```html
-     * <igx-card-actions [reverse]="true"></igx-card-actions>
-     * ```
+     * @deprecated in version 15.1.0.
      */
     @HostBinding('class.igx-card-actions--reverse')
     @Input({ transform: booleanAttribute })