@fluentui/web-components 3.0.0-beta.121 → 3.0.0-beta.122

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Wed, 03 Sep 2025 04:08:27 GMT and should not be manually modified.
+This log was last generated on Thu, 04 Sep 2025 04:06:55 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0-beta.122](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.122)
+
+Thu, 04 Sep 2025 04:06:55 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.121..@fluentui/web-components_v3.0.0-beta.122)
+
+### Changes
+
+- feat: enable SSR for rating-display ([PR #35126](https://github.com/microsoft/fluentui/pull/35126) by machi@microsoft.com)
+
 ## [3.0.0-beta.121](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.121)
 
-Wed, 03 Sep 2025 04:08:27 GMT 
+Wed, 03 Sep 2025 04:08:39 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.120..@fluentui/web-components_v3.0.0-beta.121)
 
 ### Changes

package/custom-elements.json

@@ -19563,6 +19563,18 @@
       "kind": "javascript-module",
       "path": "./dist/esm/rating-display/rating-display.base.js",
       "declarations": [
+        {
+          "kind": "function",
+          "name": "svgToDataURI",
+          "parameters": [
+            {
+              "name": "svg",
+              "type": {
+                "text": "string"
+              }
+            }
+          ]
+        },
         {
           "kind": "class",
           "description": "The base class used for constructing a fluent-rating-display custom element",
@@ -19574,6 +19586,24 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "numberFormatter",
+              "type": {
+                "text": "Intl.NumberFormat"
+              },
+              "privacy": "private",
+              "default": "new Intl.NumberFormat()"
+            },
+            {
+              "kind": "field",
+              "name": "defaultCustomIconViewBox",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "protected",
+              "default": "'0 0 20 20'"
+            },
             {
               "kind": "field",
               "name": "count",
@@ -19591,7 +19621,7 @@
               },
               "description": "The `viewBox` attribute of the icon <svg> element.",
               "privacy": "public",
-              "default": "`0 0 20 20`"
+              "deprecated": "Add `viewBox` attribute on the custom SVG directly."
             },
             {
               "kind": "field",
@@ -19602,6 +19632,11 @@
               "privacy": "public",
               "description": "The maximum possible value of the rating.\nThis attribute determines the number of icons displayed.\nMust be a whole number greater than 1."
             },
+            {
+              "kind": "method",
+              "name": "maxChanged",
+              "privacy": "protected"
+            },
             {
               "kind": "field",
               "name": "value",
@@ -19612,32 +19647,35 @@
               "description": "The value of the rating."
             },
             {
-              "kind": "field",
-              "name": "intlNumberFormatter",
-              "privacy": "private",
-              "default": "new Intl.NumberFormat()"
+              "kind": "method",
+              "name": "valueChanged",
+              "privacy": "protected"
             },
             {
               "kind": "method",
-              "name": "getSelectedValue",
+              "name": "renderSlottedIcon",
               "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "number"
+              "parameters": [
+                {
+                  "name": "svg",
+                  "type": {
+                    "text": "SVGSVGElement | null"
+                  }
                 }
-              },
-              "description": "Gets the selected value"
+              ]
             },
             {
               "kind": "method",
-              "name": "getMaxIcons",
+              "name": "setCustomPropertyValue",
               "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "number"
+              "parameters": [
+                {
+                  "name": "propertyName",
+                  "type": {
+                    "text": "PropertyNameForCalculation"
+                  }
                 }
-              },
-              "description": "Gets the maximum icons to render"
+              ]
             },
             {
               "kind": "field",
@@ -19662,7 +19700,7 @@
                 "text": "string | undefined"
               },
               "description": "The `viewBox` attribute of the icon <svg> element.",
-              "default": "`0 0 20 20`",
+              "deprecated": "Add `viewBox` attribute on the custom SVG directly.",
               "fieldName": "iconViewBox"
             },
             {
@@ -19690,6 +19728,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "svgToDataURI",
+          "declaration": {
+            "name": "svgToDataURI",
+            "module": "src/rating-display/rating-display.base.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "BaseRatingDisplay",
@@ -19740,30 +19786,26 @@
               "description": "Renders a single filled icon with a label next to it."
             },
             {
-              "kind": "method",
-              "name": "getSelectedValue",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "number"
-                }
+              "kind": "field",
+              "name": "numberFormatter",
+              "type": {
+                "text": "Intl.NumberFormat"
               },
-              "description": "Overrides the selected value and returns 1 if compact is true.",
+              "privacy": "private",
+              "default": "new Intl.NumberFormat()",
               "inheritedFrom": {
                 "name": "BaseRatingDisplay",
                 "module": "src/rating-display/rating-display.base.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "getMaxIcons",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "number"
-                }
+              "kind": "field",
+              "name": "defaultCustomIconViewBox",
+              "type": {
+                "text": "string"
               },
-              "description": "Overrides the maximum icons and returns a max of 1 if compact is true.",
+              "privacy": "protected",
+              "default": "'0 0 20 20'",
               "inheritedFrom": {
                 "name": "BaseRatingDisplay",
                 "module": "src/rating-display/rating-display.base.ts"
@@ -19790,7 +19832,7 @@
               },
               "description": "The `viewBox` attribute of the icon <svg> element.",
               "privacy": "public",
-              "default": "`0 0 20 20`",
+              "deprecated": "Add `viewBox` attribute on the custom SVG directly.",
               "inheritedFrom": {
                 "name": "BaseRatingDisplay",
                 "module": "src/rating-display/rating-display.base.ts"
@@ -19809,6 +19851,15 @@
                 "module": "src/rating-display/rating-display.base.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "maxChanged",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "BaseRatingDisplay",
+                "module": "src/rating-display/rating-display.base.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "value",
@@ -19823,10 +19874,43 @@
               }
             },
             {
-              "kind": "field",
-              "name": "intlNumberFormatter",
-              "privacy": "private",
-              "default": "new Intl.NumberFormat()",
+              "kind": "method",
+              "name": "valueChanged",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "BaseRatingDisplay",
+                "module": "src/rating-display/rating-display.base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderSlottedIcon",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "svg",
+                  "type": {
+                    "text": "SVGSVGElement | null"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "BaseRatingDisplay",
+                "module": "src/rating-display/rating-display.base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setCustomPropertyValue",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "propertyName",
+                  "type": {
+                    "text": "PropertyNameForCalculation"
+                  }
+                }
+              ],
               "inheritedFrom": {
                 "name": "BaseRatingDisplay",
                 "module": "src/rating-display/rating-display.base.ts"
@@ -19864,7 +19948,7 @@
                 "text": "string | undefined"
               },
               "description": "The `viewBox` attribute of the icon <svg> element.",
-              "default": "`0 0 20 20`",
+              "deprecated": "Add `viewBox` attribute on the custom SVG directly.",
               "fieldName": "iconViewBox",
               "inheritedFrom": {
                 "name": "BaseRatingDisplay",

package/dist/esm/rating-display/rating-display.base.d.ts

@@ -1,4 +1,6 @@
 import { FASTElement } from '@microsoft/fast-element';
+type PropertyNameForCalculation = 'max' | 'value';
+export declare function svgToDataURI(svg: string): string;
 /**
  * The base class used for constructing a fluent-rating-display custom element
  *
@@ -7,12 +9,21 @@ import { FASTElement } from '@microsoft/fast-element';
  * @public
  */
 export declare class BaseRatingDisplay extends FASTElement {
+    private numberFormatter;
     /**
      * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
      * @internal
      */
     elementInternals: ElementInternals;
+    /** @internal */
+    iconSlot: HTMLSlotElement;
+    protected defaultCustomIconViewBox: string;
+    /**
+     * The element that displays the rating icons.
+     * @internal
+     */
+    display: HTMLElement;
     /**
      * The number of ratings.
      *
@@ -25,9 +36,9 @@ export declare class BaseRatingDisplay extends FASTElement {
      * The `viewBox` attribute of the icon <svg> element.
      *
      * @public
-     * @default `0 0 20 20`
      * @remarks
      * HTML Attribute: `icon-view-box`
+     * @deprecated Add `viewBox` attribute on the custom SVG directly.
      */
     iconViewBox?: string;
     /**
@@ -40,6 +51,7 @@ export declare class BaseRatingDisplay extends FASTElement {
      * HTML Attribute: `max`
      */
     max?: number;
+    protected maxChanged(): void;
     /**
      * The value of the rating.
      *
@@ -48,42 +60,18 @@ export declare class BaseRatingDisplay extends FASTElement {
      * HTML Attribute: `value`
      */
     value?: number;
-    /**
-     * @internal
-     */
-    slottedIcon: HTMLElement[];
-    /**
-     * @internal
-     */
-    slottedIconChanged(): void;
-    /**
-     * @internal
-     */
-    private customIcon?;
-    private intlNumberFormatter;
+    protected valueChanged(): void;
     constructor();
+    connectedCallback(): void;
     /**
      * Returns "count" as string, formatted according to the locale.
      *
      * @internal
      */
     get formattedCount(): string;
-    /**
-     * Gets the selected value
-     *
-     * @protected
-     */
-    protected getSelectedValue(): number;
-    /**
-     * Gets the maximum icons to render
-     *
-     * @protected
-     */
-    protected getMaxIcons(): number;
-    /**
-     * Generates the icon SVG elements based on the "max" attribute.
-     *
-     * @internal
-     */
-    generateIcons(): string;
+    /** @internal */
+    handleSlotChange(): void;
+    protected renderSlottedIcon(svg: SVGSVGElement | null): void;
+    protected setCustomPropertyValue(propertyName: PropertyNameForCalculation): void;
 }
+export {};

package/dist/esm/rating-display/rating-display.base.js

@@ -1,5 +1,18 @@
 import { __decorate } from "tslib";
-import { attr, FASTElement, nullableNumberConverter, observable } from '@microsoft/fast-element';
+import { attr, FASTElement, nullableNumberConverter } from '@microsoft/fast-element';
+const SUPPORTS_ATTR_TYPE = CSS.supports('width: attr(value type(<number>))');
+const CUSTOM_PROPERTY_NAME = {
+    max: '--_attr-max',
+    value: '--_attr-value',
+    maskImageFilled: '--_mask-image-filled',
+    maskImageOutlined: '--_mask-image-outlined',
+};
+export function svgToDataURI(svg) {
+    if (!svg) {
+        return '';
+    }
+    return ['data:image/svg+xml', encodeURIComponent(svg.replace(/\n/g, '').replace(/\s+/g, ' '))].join(',');
+}
 /**
  * The base class used for constructing a fluent-rating-display custom element
  *
@@ -8,13 +21,11 @@ import { attr, FASTElement, nullableNumberConverter, observable } from '@microso
  * @public
  */
 export class BaseRatingDisplay extends FASTElement {
-    /**
-     * @internal
-     */
-    slottedIconChanged() {
-        if (this.$fastController.isConnected) {
-            this.customIcon = this.slottedIcon[0]?.outerHTML;
-        }
+    maxChanged() {
+        this.setCustomPropertyValue('max');
+    }
+    valueChanged() {
+        this.setCustomPropertyValue('value');
     }
     constructor() {
         super();
@@ -24,8 +35,14 @@ export class BaseRatingDisplay extends FASTElement {
          * @internal
          */
         this.elementInternals = this.attachInternals();
-        this.intlNumberFormatter = new Intl.NumberFormat();
+        this.defaultCustomIconViewBox = '0 0 20 20';
         this.elementInternals.role = 'img';
+        this.numberFormatter = new Intl.NumberFormat();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setCustomPropertyValue('value');
+        this.setCustomPropertyValue('max');
     }
     /**
      * Returns "count" as string, formatted according to the locale.
@@ -33,44 +50,48 @@ export class BaseRatingDisplay extends FASTElement {
      * @internal
      */
     get formattedCount() {
-        return this.count ? this.intlNumberFormatter.format(this.count) : '';
+        return this.count ? this.numberFormatter.format(this.count) : '';
     }
-    /**
-     * Gets the selected value
-     *
-     * @protected
-     */
-    getSelectedValue() {
-        return Math.round((this.value ?? 0) * 2) / 2;
+    /** @internal */
+    handleSlotChange() {
+        const icon = this.iconSlot.assignedElements()?.find(el => el.nodeName.toLowerCase() === 'svg');
+        this.renderSlottedIcon(icon ?? null);
     }
-    /**
-     * Gets the maximum icons to render
-     *
-     * @protected
-     */
-    getMaxIcons() {
-        return (this.max ?? 5) * 2;
+    renderSlottedIcon(svg) {
+        if (!svg) {
+            this.display.style.removeProperty(CUSTOM_PROPERTY_NAME.maskImageFilled);
+            this.display.style.removeProperty(CUSTOM_PROPERTY_NAME.maskImageOutlined);
+            return;
+        }
+        const innerSvg = svg.innerHTML;
+        const viewBox = svg.getAttribute('viewBox') ?? this.iconViewBox ?? this.defaultCustomIconViewBox;
+        const customSvgFilled = `
+            <svg
+                viewBox="${viewBox}"
+                xmlns="http://www.w3.org/2000/svg"
+            >${innerSvg}</svg>`;
+        const customSvgOutlined = `
+            <svg
+                viewBox="${viewBox}"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                stroke="black"
+                stroke-width="2"
+            >${innerSvg}</svg>`;
+        this.display.style.setProperty(CUSTOM_PROPERTY_NAME.maskImageFilled, `url(${svgToDataURI(customSvgFilled)})`);
+        this.display.style.setProperty(CUSTOM_PROPERTY_NAME.maskImageOutlined, `url(${svgToDataURI(customSvgOutlined)})`);
     }
-    /**
-     * Generates the icon SVG elements based on the "max" attribute.
-     *
-     * @internal
-     */
-    generateIcons() {
-        let htmlString = '';
-        let customIcon;
-        if (this.customIcon) {
-            // Extract the SVG element content
-            customIcon = /<svg[^>]*>([\s\S]*?)<\/svg>/.exec(this.customIcon)?.[1] ?? '';
+    setCustomPropertyValue(propertyName) {
+        if (!this.display || SUPPORTS_ATTR_TYPE) {
+            return;
+        }
+        const propertyValue = this[propertyName];
+        if (typeof propertyValue !== 'number' || Number.isNaN(propertyValue)) {
+            this.display.style.removeProperty(CUSTOM_PROPERTY_NAME[propertyName]);
         }
-        // The value of the selected icon. Based on the "value" attribute, rounded to the nearest half.
-        const selectedValue = this.getSelectedValue();
-        // Render the icons based on the "max" attribute. If "max" is not set, render 5 icons.
-        for (let i = 0; i < this.getMaxIcons(); i++) {
-            const iconValue = (i + 1) / 2;
-            htmlString += `<svg aria-hidden="true" viewBox="${this.iconViewBox ?? '0 0 20 20'}" ${iconValue === selectedValue ? 'selected' : ''}>${customIcon ?? '<use href="#star"></use>'}</svg>`;
+        else {
+            this.display.style.setProperty(CUSTOM_PROPERTY_NAME[propertyName], `${propertyValue}`);
         }
-        return htmlString;
     }
 }
 __decorate([
@@ -85,10 +106,4 @@ __decorate([
 __decorate([
     attr({ converter: nullableNumberConverter })
 ], BaseRatingDisplay.prototype, "value", void 0);
-__decorate([
-    observable
-], BaseRatingDisplay.prototype, "slottedIcon", void 0);
-__decorate([
-    observable
-], BaseRatingDisplay.prototype, "customIcon", void 0);
 //# sourceMappingURL=rating-display.base.js.map

package/dist/esm/rating-display/rating-display.base.js.map

@@ -1 +1 @@
-{"version":3,"file":"rating-display.base.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.base.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAEjG;;;;;;GAMG;AACH,MAAM,OAAO,iBAAkB,SAAQ,WAAW;IAyDhD;;OAEG;IACI,kBAAkB;QACvB,IAAI,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,CAAC;YACrC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC;QACnD,CAAC;IACH,CAAC;IAUD;QACE,KAAK,EAAE,CAAC;QA1EV;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAkE3D,wBAAmB,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;QAKpD,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,KAAK,CAAC;IACrC,CAAC;IAED;;;;OAIG;IACH,IAAW,cAAc;QACvB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACvE,CAAC;IAED;;;;OAIG;IACO,gBAAgB;QACxB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;IAC/C,CAAC;IAED;;;;OAIG;IACO,WAAW;QACnB,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;IAC7B,CAAC;IAED;;;;OAIG;IACI,aAAa;QAClB,IAAI,UAAU,GAAW,EAAE,CAAC;QAC5B,IAAI,UAA8B,CAAC;QAEnC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,kCAAkC;YAClC,UAAU,GAAG,6BAA6B,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;QAC9E,CAAC;QAED,+FAA+F;QAC/F,MAAM,aAAa,GAAW,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAEtD,sFAAsF;QACtF,KAAK,IAAI,CAAC,GAAW,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC;YACpD,MAAM,SAAS,GAAW,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;YAEtC,UAAU,IAAI,oCAAoC,IAAI,CAAC,WAAW,IAAI,WAAW,KAC/E,SAAS,KAAK,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAC7C,IAAI,UAAU,IAAI,0BAA0B,QAAQ,CAAC;QACvD,CAAC;QAED,OAAO,UAAU,CAAC;IACpB,CAAC;CACF;AAvHQ;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;gDACvB;AAWtB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;sDAChB;AAYd;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;8CACzB;AAUb;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;gDACvB;AAMf;IADN,UAAU;sDACwB;AAe3B;IADP,UAAU;qDACiB"}
+{"version":3,"file":"rating-display.base.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.base.ts"],"names":[],"mappings":"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"}

package/dist/esm/rating-display/rating-display.d.ts

@@ -1,5 +1,5 @@
 import { BaseRatingDisplay } from './rating-display.base.js';
-import { RatingDisplayColor, RatingDisplaySize } from './rating-display.options.js';
+import type { RatingDisplayColor, RatingDisplaySize } from './rating-display.options.js';
 /**
  * A Rating Display Custom HTML Element.
  * Based on BaseRatingDisplay and includes style and layout specific attributes
@@ -35,16 +35,4 @@ export declare class RatingDisplay extends BaseRatingDisplay {
      * HTML Attribute: `compact`
      */
     compact: boolean;
-    /**
-     * Overrides the selected value and returns 1 if compact is true.
-     *
-     * @override
-     */
-    protected getSelectedValue(): number;
-    /**
-     * Overrides the maximum icons and returns a max of 1 if compact is true.
-     *
-     * @override
-     */
-    protected getMaxIcons(): number;
 }

package/dist/esm/rating-display/rating-display.js

@@ -21,22 +21,6 @@ export class RatingDisplay extends BaseRatingDisplay {
          */
         this.compact = false;
     }
-    /**
-     * Overrides the selected value and returns 1 if compact is true.
-     *
-     * @override
-     */
-    getSelectedValue() {
-        return Math.round((this.compact ? 1 : this.value ?? 0) * 2) / 2;
-    }
-    /**
-     * Overrides the maximum icons and returns a max of 1 if compact is true.
-     *
-     * @override
-     */
-    getMaxIcons() {
-        return (this.compact ? 1 : this.max ?? 5) * 2;
-    }
 }
 __decorate([
     attr

package/dist/esm/rating-display/rating-display.js.map

@@ -1 +1 @@
-{"version":3,"file":"rating-display.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAG7D;;;;;;;GAOG;AACH,MAAM,OAAO,aAAc,SAAQ,iBAAiB;IAApD;;QAuBE;;;;;;WAMG;QAEI,YAAO,GAAY,KAAK,CAAC;IAmBlC,CAAC;IAjBC;;;;OAIG;IACgB,gBAAgB;QACjC,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;IAClE,CAAC;IAED;;;;OAIG;IACgB,WAAW;QAC5B,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;IAChD,CAAC;CACF;AAxCQ;IADN,IAAI;4CAC6B;AAW3B;IADN,IAAI;2CAC2B;AAUzB;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CACM"}
+{"version":3,"file":"rating-display.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAG7D;;;;;;;GAOG;AACH,MAAM,OAAO,aAAc,SAAQ,iBAAiB;IAApD;;QAuBE;;;;;;WAMG;QAEI,YAAO,GAAY,KAAK,CAAC;IAClC,CAAC;CAAA;AAtBQ;IADN,IAAI;4CAC6B;AAW3B;IADN,IAAI;2CAC2B;AAUzB;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CACM"}