feat(rating): add aria-label attribute (#5607)

Add aria label attribute
Add RatingConfig class

Close #5579

Co-authored-by: Dmitriy Danilov <daniloff200@gmail.com>

demo/src/app/components/+rating/demos/config/config.html

@@ -0,0 +1,4 @@
+<rating [(ngModel)]="rate" [max]="max"></rating>
+<div class="card">
+  <pre class="card-block card-header" style="margin:15px 0;">Rate: <b>{{rate}}</b> </pre>
+</div>

demo/src/app/components/+rating/demos/config/config.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { RatingConfig } from 'ngx-bootstrap/rating';
+
+// such override allows to keep some initial values
+export function getRatingConfig(): RatingConfig {
+  return Object.assign(new RatingConfig(), { ariaLabel: 'My Rating' });
+}
+
+@Component({
+  selector: 'demo-rating-config',
+  templateUrl: './config.html',
+  providers: [{ provide: RatingConfig, useFactory: getRatingConfig }]
+})
+export class DemoRatingConfigComponent {
+  max = 10;
+  rate = 7;
+}

demo/src/app/components/+rating/demos/index.ts

@@ -2,10 +2,12 @@ import { DemoRatingBasicComponent } from './basic/basic';
 import { DemoRatingCustomComponent } from './custom/custom';
 import { DemoRatingDynamicComponent } from './dynamic/dynamic';
 import { DemoRatingSelectOnEnterComponent } from './select-on-enter/select-on-enter';
+import { DemoRatingConfigComponent } from './config/config';
 
 export const DEMO_COMPONENTS = [
   DemoRatingBasicComponent,
   DemoRatingCustomComponent,
   DemoRatingDynamicComponent,
-  DemoRatingSelectOnEnterComponent
+  DemoRatingSelectOnEnterComponent,
+  DemoRatingConfigComponent
 ];

demo/src/app/components/+rating/rating-section.list.ts

@@ -2,13 +2,14 @@ import { DemoRatingBasicComponent } from './demos/basic/basic';
 import { DemoRatingCustomComponent } from './demos/custom/custom';
 import { DemoRatingDynamicComponent } from './demos/dynamic/dynamic';
 import { DemoRatingSelectOnEnterComponent } from './demos/select-on-enter/select-on-enter';
+import { DemoRatingConfigComponent } from './demos/config/config';
 
 import { ContentSection } from '../../docs/models/content-section.model';
 import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo-top-section/index';
 import { ExamplesComponent } from '../../docs/demo-section-components/demo-examples-section/index';
 import { ApiSectionsComponent } from '../../docs/demo-section-components/demo-api-section/index';
 
-import { NgApiDocComponent } from '../../docs/api-docs';
+import { NgApiDocComponent, NgApiDocConfigComponent } from '../../docs/api-docs';
 
 export const demoComponentContent: ContentSection[] = [
   {
@@ -53,6 +54,13 @@ export const demoComponentContent: ContentSection[] = [
         component: require('!!raw-loader!./demos/select-on-enter/select-on-enter'),
         html: require('!!raw-loader!./demos/select-on-enter/select-on-enter.html'),
         outlet: DemoRatingSelectOnEnterComponent
+      },
+      {
+        title: 'Configuring defaults',
+        anchor: 'demo-rating-config',
+        component: require('!!raw-loader!./demos/config/config'),
+        html: require('!!raw-loader!./demos/config/config.html'),
+        outlet: DemoRatingConfigComponent
       }
     ]
   },
@@ -65,6 +73,11 @@ export const demoComponentContent: ContentSection[] = [
         title: 'RatingComponent',
         anchor: 'rating-component',
         outlet: NgApiDocComponent
+      },
+      {
+        title: 'RatingConfig',
+        anchor: 'rating-config',
+        outlet: NgApiDocConfigComponent
       }
     ]
   }