refactor(ui5-carousel): rename pageIndicatorStyle to pageIndicatorType (

#8511)

Renames the property `pageIndicatorStyle` to `pageIndicatorType` and enumeration `PageIndicatorStyle` to `PageIndicatorType`.

BREAKING CHANGE: The `pageIndicatorStyle` no longer exists. If you previously used it like:
```html
<ui5-carousel page-indicator-style="Numeric"></ui5-carousel>
```
Now you should use `pageIndicatorType` instead:
```html
<ui5-carousel page-indicator-type="Numeric"></ui5-carousel>
```

Related to #8461

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">