@fluentui/web-components 3.0.0-beta.54 → 3.0.0-beta.55

package/dist/web-components.js

@@ -8685,7 +8685,7 @@ var __decorateClass$8 = (decorators, target, key, kind) => {
   if (kind && result) __defProp$8(target, key, result);
   return result;
 };
-class RatingDisplay extends FASTElement {
+class BaseRatingDisplay extends FASTElement {
   constructor() {
     super();
     /**
@@ -8694,10 +8694,62 @@ class RatingDisplay extends FASTElement {
      * @internal
      */
     this.elementInternals = this.attachInternals();
-    this.compact = false;
     this.intlNumberFormatter = new Intl.NumberFormat();
     this.elementInternals.role = "img";
   }
+  /**
+   * Returns "count" as string, formatted according to the locale.
+   *
+   * @internal
+   */
+  get formattedCount() {
+    return this.count ? this.intlNumberFormatter.format(this.count) : "";
+  }
+  /**
+   * Gets the selected value
+   *
+   * @protected
+   */
+  getSelectedValue() {
+    return Math.round((this.value ?? 0) * 2) / 2;
+  }
+  /**
+   * Gets the maximum icons to render
+   *
+   * @protected
+   */
+  getMaxIcons() {
+    return (this.max ?? 5) * 2;
+  }
+  /**
+   * Generates the icon SVG elements based on the "max" attribute.
+   *
+   * @internal
+   */
+  generateIcons() {
+    let htmlString = "";
+    const selectedValue = this.getSelectedValue();
+    for (let i = 0; i < this.getMaxIcons(); i++) {
+      const iconValue = (i + 1) / 2;
+      htmlString += `<svg aria-hidden="true" ${iconValue === selectedValue ? "selected" : ""}><use href="#star"></use></svg>`;
+    }
+    return htmlString;
+  }
+}
+__decorateClass$8([attr({
+  converter: nullableNumberConverter
+})], BaseRatingDisplay.prototype, "count", 2);
+__decorateClass$8([attr({
+  converter: nullableNumberConverter
+})], BaseRatingDisplay.prototype, "max", 2);
+__decorateClass$8([attr({
+  converter: nullableNumberConverter
+})], BaseRatingDisplay.prototype, "value", 2);
+class RatingDisplay extends BaseRatingDisplay {
+  constructor() {
+    super(...arguments);
+    this.compact = false;
+  }
   /**
    * Handles changes to the color attribute.
    *
@@ -8719,42 +8771,27 @@ class RatingDisplay extends FASTElement {
     if (next) toggleState(this.elementInternals, next, true);
   }
   /**
-   * Returns "count" as string, formatted according to the locale.
+   * Overrides the selected value and returns 1 if compact is true.
    *
-   * @internal
+   * @override
    */
-  get formattedCount() {
-    return this.count ? this.intlNumberFormatter.format(this.count) : "";
+  getSelectedValue() {
+    return Math.round((this.compact ? 1 : this.value ?? 0) * 2) / 2;
   }
   /**
-   * Generates the icon SVG elements based on the "max" attribute.
+   * Overrides the maximum icons and returns a max of 1 if compact is true.
    *
-   * @internal
+   * @override
    */
-  generateIcons() {
-    let htmlString = "";
-    const selectedValue = Math.round((this.compact ? 1 : this.value ?? 0) * 2) / 2;
-    for (let i = 0; i < (this.compact ? 1 : this.max ?? 5) * 2; i++) {
-      const iconValue = (i + 1) / 2;
-      htmlString += `<svg aria-hidden="true" ${iconValue === selectedValue ? "selected" : ""}><use href="#star"></use></svg>`;
-    }
-    return htmlString;
+  getMaxIcons() {
+    return (this.compact ? 1 : this.max ?? 5) * 2;
   }
 }
 __decorateClass$8([attr], RatingDisplay.prototype, "color", 2);
+__decorateClass$8([attr], RatingDisplay.prototype, "size", 2);
 __decorateClass$8([attr({
   mode: "boolean"
 })], RatingDisplay.prototype, "compact", 2);
-__decorateClass$8([attr({
-  converter: nullableNumberConverter
-})], RatingDisplay.prototype, "count", 2);
-__decorateClass$8([attr({
-  converter: nullableNumberConverter
-})], RatingDisplay.prototype, "max", 2);
-__decorateClass$8([attr], RatingDisplay.prototype, "size", 2);
-__decorateClass$8([attr({
-  converter: nullableNumberConverter
-})], RatingDisplay.prototype, "value", 2);
 
 const styles$a = css`
   ${display("inline-flex")}