refactor(ui5-carousel): rename pageIndicatorStyle to pageIndicatorType

packages/main/src/Carousel.ts

@@ -29,7 +29,7 @@ import {
 	CAROUSEL_NEXT_ARROW_TEXT,
 } from "./generated/i18n/i18n-defaults.js";
 import CarouselArrowsPlacement from "./types/CarouselArrowsPlacement.js";
-import CarouselPageIndicatorStyle from "./types/CarouselPageIndicatorStyle.js";
+import CarouselPageIndicatorType from "./types/CarouselPageIndicatorType.js";
 import BackgroundDesign from "./types/BackgroundDesign.js";
 import BorderDesign from "./types/BorderDesign.js";
 import CarouselTemplate from "./generated/templates/CarouselTemplate.lit.js";
@@ -189,8 +189,8 @@ class Carousel extends UI5Element {
 	 * @default "Default"
 	 * @public
 	 */
-	@property({ type: CarouselPageIndicatorStyle, defaultValue: CarouselPageIndicatorStyle.Default })
-	pageIndicatorStyle!: `${CarouselPageIndicatorStyle}`;
+	@property({ type: CarouselPageIndicatorType, defaultValue: CarouselPageIndicatorType.Default })
+	pageIndicatorType!: `${CarouselPageIndicatorType}`;
 
 	/**
 	 * Defines the carousel's background design.
@@ -615,7 +615,7 @@ class Carousel extends UI5Element {
 	}
 
 	get isPageTypeDots() {
-		if (this.pageIndicatorStyle === CarouselPageIndicatorStyle.Numeric) {
+		if (this.pageIndicatorType === CarouselPageIndicatorType.Numeric) {
 			return false;
 		}
 

packages/main/src/types/CarouselPageIndicatorStyle.ts → packages/main/src/types/CarouselPageIndicatorType.ts

@@ -1,8 +1,8 @@
 /**
- * Different Carousel page indicator styles.
+ * Different Carousel page indicator types.
  * @public
  */
-enum CarouselPageIndicatorStyle {
+enum CarouselPageIndicatorType {
 	/**
 	 * The page indicator will be visualized as dots if there are fewer than 9 pages.
 	 * If there are more pages, the page indicator will switch to displaying the current page and the total number of pages. (e.g. X of Y)
@@ -17,4 +17,4 @@ enum CarouselPageIndicatorStyle {
 	Numeric = "Numeric",
 }
 
-export default CarouselPageIndicatorStyle;
+export default CarouselPageIndicatorType;

packages/main/test/pages/Carousel.html

@@ -448,8 +448,8 @@
 	</ui5-carousel>
 	<ui5-input id="visible-items" value="0"></ui5-input>
 
-	<ui5-title class="carousel2auto">Carousel with Numeric style page indicator</ui5-title>
-	<ui5-carousel id="carouselNumericPageIndicator" page-indicator-style="Numeric">
+	<ui5-title class="carousel2auto">Carousel with Numeric type page indicator</ui5-title>
+	<ui5-carousel id="carouselNumericPageIndicator" page-indicator-type="Numeric">
 		<ui5-button>Button 1</ui5-button>
 		<ui5-button>Button 2</ui5-button>
 	</ui5-carousel>

packages/main/test/specs/Carousel.spec.js

@@ -191,7 +191,7 @@ describe("Carousel general interaction", () => {
 		assert.strictEqual(await eventCounter.getProperty("value"), "6", "The navigate event is not fired as no previous item.");
 	});
 
-	it("page-indicator-style property", async () => {
+	it("page-indicator-type property", async () => {
 		const carousel = await browser.$("#carouselNumericPageIndicator");
 		await carousel.scrollIntoView();
 

packages/playground/_stories/main/Carousel/Carousel.stories.ts

@@ -25,7 +25,7 @@ const Template: UI5StoryArgs<Carousel, StoryArgsSlots> = (args) => {
 	items-per-page-l="${ifDefined(args.itemsPerPageL)}"
 	?hide-navigation-arrows="${ifDefined(args.hideNavigationArrows)}"
 	?hide-page-indicator="${ifDefined(args.hidePageIndicator)}"
-	page-indicator-style="${ifDefined(args.pageIndicatorStyle)}"
+	page-indicator-type="${ifDefined(args.pageIndicatorType)}"
 	arrows-placement="${ifDefined(args.arrowsPlacement)}"
 >
 	${unsafeHTML(args.default)}

packages/website/docs/_components_pages/main/Carousel.mdx

@@ -23,14 +23,14 @@ When the first page is reached, pressing "Backward" will navigate to the last pa
 <Cyclic />
 
 ### Arrows Placement
-When **pageIndicatorStyle** is set to **"Content"**, the arrows are placed on the sides of the current page.
-When **pageIndicatorStyle** is set to **"Navigation"**, the arrows are placed on the sides of the page indicator.
+When **arrowsPlacement** is set to **"Content"**, the arrows are placed on the sides of the current page.
+When **arrowsPlacement** is set to **"Navigation"**, the arrows are placed on the sides of the page indicator.
 
 <ArrowsPlacement />
 
 ### Page Indicator
-When **pageIndicatorStyle** is set to **"Default"**, the page indicator appear as dots.
-When **pageIndicatorStyle** is set to **"Numeric"** - as numbers.
+When **pageIndicatorType** is set to **"Default"**, the page indicator appear as dots.
+When **pageIndicatorType** is set to **"Numeric"** - as numbers.
 
 <PageIndicatorType />
 

packages/website/docs/_samples/main/Carousel/PageIndicatorType/sample.html

@@ -12,7 +12,7 @@
 <body style="background-color: var(--sapBackgroundColor)">
     <!-- playground-fold-end -->
 
-    <ui5-carousel page-indicator-style="Numeric">
+    <ui5-carousel page-indicator-type="Numeric">
         <img src="../assets/images/sample1.jpg" alt="Landscape 1">
         <img src="../assets/images/sample2.jpg" alt="Landscape 2">
         <img src="../assets/images/sample3.jpg" alt="Bulb">