Fixed #10207 - IndicatorStyle and IndicatorStyleClass support for Car…

…ousel
primefaces · May 6, 2021 · 4d54b74 · 4d54b74
1 parent c2d51e9
commit 4d54b74
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 5 deletions.
diff --git a/src/app/components/carousel/carousel.ts b/src/app/components/carousel/carousel.ts
@@ -43,9 +43,9 @@ import { UniqueComponentId } from 'primeng/utils';
 						<span [ngClass]="{'p-carousel-prev-icon pi': true, 'pi-chevron-right': !isVertical(), 'pi-chevron-down': isVertical()}"></span>
 					</button>
 				</div>
-				<ul [ngClass]="'p-carousel-indicators p-reset'" [class]="indicatorsContentClass">
+				<ul [ngClass]="'p-carousel-indicators p-reset'" [class]="indicatorsContentClass" [ngStyle]="indicatorsContentStyle">
 					<li *ngFor="let totalDot of totalDotsArray(); let i = index" [ngClass]="{'p-carousel-indicator':true,'p-highlight': _page === i}">
-						<button type="button" class="p-link" (click)="onDotClick($event, i)"></button>
+						<button type="button" class="p-link" (click)="onDotClick($event, i)" [class]="indicatorStyleClass" [ngStyle]="indicatorStyle"></button>
 					</li>
 				</ul>
 			</div>
@@ -102,9 +102,15 @@ export class Carousel implements AfterContentInit {
 
 	@Input() verticalViewPortHeight = "300px";
 
-	@Input() contentClass: String = "";
+	@Input() contentClass: string = "";
 
-	@Input() indicatorsContentClass: String = "";
+	@Input() indicatorsContentClass: string = "";
+
+	@Input() indicatorsContentStyle: any;
+
+	@Input() indicatorStyleClass: string = "";
+
+	@Input() indicatorStyle: any;
 
 	@Input() get value() :any[] {
 		return this._value;

diff --git a/src/app/showcase/components/carousel/carouseldemo.html b/src/app/showcase/components/carousel/carouseldemo.html
@@ -215,7 +215,7 @@ <h5>Properties</h5>
                         </tr>
                         <tr>
                             <td>style</td>
-                            <td>string</td>
+                            <td>object</td>
                             <td>null</td>
                             <td>Inline style of the component.</td>
                         </tr>
@@ -279,6 +279,24 @@ <h5>Properties</h5>
                             <td>null</td>
                             <td>Style class of the paginator items.</td>
                         </tr>
+                        <tr>
+                            <td>indicatorsContentStyle</td>
+                            <td>object</td>
+                            <td>null</td>
+                            <td>Style of the paginator items.</td>
+                        </tr>
+                        <tr>
+                            <td>indicatorStyleClass</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Style class of the indicators.</td>
+                        </tr>
+                        <tr>
+                            <td>indicatorStyle</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Style of the indicators.</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>