@fluentui/web-components 3.0.0-beta.65 → 3.0.0-beta.66

package/dist/web-components.js

@@ -9400,6 +9400,14 @@ class BaseRatingDisplay extends FASTElement {
     this.intlNumberFormatter = new Intl.NumberFormat();
     this.elementInternals.role = "img";
   }
+  /**
+   * @internal
+   */
+  slottedIconChanged() {
+    if (this.$fastController.isConnected) {
+      this.customIcon = this.slottedIcon[0]?.outerHTML;
+    }
+  }
   /**
    * Returns "count" as string, formatted according to the locale.
    *
@@ -9431,10 +9439,14 @@ class BaseRatingDisplay extends FASTElement {
    */
   generateIcons() {
     let htmlString = "";
+    let customIcon;
+    if (this.customIcon) {
+      customIcon = /<svg[^>]*>([\s\S]*?)<\/svg>/.exec(this.customIcon)?.[1] ?? "";
+    }
     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>`;
+      htmlString += `<svg aria-hidden="true" viewBox="${this.iconViewBox ?? "0 0 20 20"}" ${iconValue === selectedValue ? "selected" : ""}>${customIcon ?? '<use href="#star"></use>'}</svg>`;
     }
     return htmlString;
   }
@@ -9442,12 +9454,17 @@ class BaseRatingDisplay extends FASTElement {
 __decorateClass$9([attr({
   converter: nullableNumberConverter
 })], BaseRatingDisplay.prototype, "count", 2);
+__decorateClass$9([attr({
+  attribute: "icon-view-box"
+})], BaseRatingDisplay.prototype, "iconViewBox", 2);
 __decorateClass$9([attr({
   converter: nullableNumberConverter
 })], BaseRatingDisplay.prototype, "max", 2);
 __decorateClass$9([attr({
   converter: nullableNumberConverter
 })], BaseRatingDisplay.prototype, "value", 2);
+__decorateClass$9([observable], BaseRatingDisplay.prototype, "slottedIcon", 2);
+__decorateClass$9([observable], BaseRatingDisplay.prototype, "customIcon", 2);
 class RatingDisplay extends BaseRatingDisplay {
   constructor() {
     super(...arguments);
@@ -9499,12 +9516,15 @@ __decorateClass$9([attr({
 const styles$b = css`
   ${display("inline-flex")}
 
-  :host{--icon-size:16px;align-items:center;color:${colorNeutralForeground1};font-family:${fontFamilyBase};font-size:${fontSizeBase200};line-height:${lineHeightBase200};contain:layout style;user-select:none}:host(${smallState}){--icon-size:12px}:host(${largeState}){--icon-size:20px;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}svg{width:var(--icon-size);height:var(--icon-size);fill:${colorPaletteMarigoldBackground3};margin-inline-end:${spacingHorizontalXXS}}svg:nth-child(even){clip-path:inset(0 50% 0 0);margin-inline-end:calc(0px - var(--icon-size))}:host(${neutralState}) svg{fill:${colorNeutralForeground1}}:host(${brandState}) svg{fill:${colorBrandBackground}}:host(:is([value^='-'],[value='0'])) svg,:host(:not([value])) svg,svg[selected] ~ svg{fill:${colorPaletteMarigoldBackground2}}:host(${neutralState}:is([value^='-'],[value='0'])) svg,:host(${neutralState}:not([value])) svg,:host(${neutralState}) svg[selected] ~ svg{fill:${colorNeutralBackground1Pressed}}:host(${brandState}:is([value^='-'],[value='0'])) svg,:host(${brandState}:not([value])) svg,:host(${brandState}) svg[selected] ~ svg{fill:${colorBrandStroke2}}.value-label,::slotted([slot='value']){display:block;margin-inline-start:${spacingHorizontalXS};font-weight:${fontWeightSemibold}}:host(${smallState}) .value-label,:host(${smallState}) ::slotted([slot='value']){margin-inline-start:${spacingHorizontalXXS}}:host(${largeState}) .value-label,:host(${largeState}) ::slotted([slot='value']){margin-inline-start:${spacingHorizontalSNudge}}:host(:not([count])) .count-label{display:none}.count-label::before,::slotted([slot='count'])::before{content:'·';margin-inline:${spacingHorizontalXS}}:host(${smallState}) .count-label::before,:host(${smallState}) ::slotted([slot='count'])::before{margin-inline:${spacingHorizontalXXS}}:host(${largeState}) .count-label::before,:host(${largeState}) ::slotted([slot='count'])::before{margin-inline:${spacingHorizontalSNudge}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+  :host{--icon-size:16px;--icon-color-filled:${colorPaletteMarigoldBackground3};--icon-color-empty:${colorPaletteMarigoldBackground2};align-items:center;color:${colorNeutralForeground1};font-family:${fontFamilyBase};font-size:${fontSizeBase200};line-height:${lineHeightBase200};contain:layout style;user-select:none}:host(${smallState}){--icon-size:12px}:host(${largeState}){--icon-size:20px;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}::slotted([slot='icon']){display:none}svg{width:var(--icon-size);height:var(--icon-size);fill:var(--icon-color-filled);margin-inline-end:${spacingHorizontalXXS}}svg:nth-child(odd){clip-path:inset(0 50% 0 0);margin-inline-end:calc(0px - var(--icon-size))}:host(${neutralState}) svg{--icon-color-filled:${colorNeutralForeground1}}:host(${brandState}) svg{--icon-color-filled:${colorBrandBackground}}:host(:is([value^='-'],[value='0'])) svg,:host(:not([value])) svg,svg[selected] ~ svg{fill:var(--icon-color-empty)}:host(${neutralState}:is([value^='-'],[value='0'])) svg,:host(${neutralState}:not([value])) svg,:host(${neutralState}) svg[selected] ~ svg{--icon-color-empty:${colorNeutralBackground1Pressed}}:host(${brandState}:is([value^='-'],[value='0'])) svg,:host(${brandState}:not([value])) svg,:host(${brandState}) svg[selected] ~ svg{--icon-color-empty:${colorBrandStroke2}}.value-label,::slotted([slot='value']){display:block;margin-inline-start:${spacingHorizontalXS};font-weight:${fontWeightSemibold}}:host(${smallState}) .value-label,:host(${smallState}) ::slotted([slot='value']){margin-inline-start:${spacingHorizontalXXS}}:host(${largeState}) .value-label,:host(${largeState}) ::slotted([slot='value']){margin-inline-start:${spacingHorizontalSNudge}}:host(:not([count])) .count-label{display:none}.count-label::before,::slotted([slot='count'])::before{content:'·';margin-inline:${spacingHorizontalXS}}:host(${smallState}) .count-label::before,:host(${smallState}) ::slotted([slot='count'])::before{margin-inline:${spacingHorizontalXXS}}:host(${largeState}) .count-label::before,:host(${largeState}) ::slotted([slot='count'])::before{margin-inline:${spacingHorizontalSNudge}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host([color]) svg{fill:CanvasText}:host([color]:is([value^='-'],[value='0'])) svg,:host(:not([value])) svg,:host([color]) svg[selected] ~ svg{fill:Canvas;stroke:CanvasText}`));
 
-const star = html`<svg xmlns="http://www.w3.org/2000/svg" style="display: none"><symbol id="star" viewBox="0 0 12 12"><path d="M5.28347 1.54556C5.57692 0.95096 6.42479 0.950961 6.71825 1.54556L7.82997 3.79817L10.3159 4.15939C10.9721 4.25474 11.2341 5.06112 10.7592 5.52394L8.96043 7.27736L9.38507 9.75321C9.49716 10.4067 8.81122 10.9051 8.22431 10.5966L6.00086 9.42761L3.7774 10.5966C3.19049 10.9051 2.50455 10.4067 2.61664 9.75321L3.04128 7.27736L1.24246 5.52394C0.767651 5.06111 1.02966 4.25474 1.68584 4.15939L4.17174 3.79817L5.28347 1.54556Z" /></symbol></svg>`;
+const star = html`<svg xmlns="http://www.w3.org/2000/svg" style="display: none"><symbol id="star"><path d="M9.10433 2.89874C9.47114 2.15549 10.531 2.1555 10.8978 2.89874L12.8282 6.81024L17.1448 7.43748C17.9651 7.55666 18.2926 8.56464 17.699 9.14317L14.5755 12.1878L15.3129 16.487C15.453 17.3039 14.5956 17.9269 13.8619 17.5412L10.0011 15.5114L6.14018 17.5412C5.40655 17.9269 4.54913 17.3039 4.68924 16.487L5.4266 12.1878L2.30308 9.14317C1.70956 8.56463 2.03708 7.55666 2.8573 7.43748L7.17389 6.81024L9.10433 2.89874Z" /></symbol></svg>`;
 function ratingDisplayTemplate() {
-  return html` ${star} ${x => html`${html.partial(x.generateIcons())}`}<slot name="value"><span class="value-label" aria-hidden="true">${x => x.value}</span></slot><slot name="count"><span class="count-label" aria-hidden="true">${x => x.formattedCount}</span></slot>`;
+  return html` ${x => html`${staticallyCompose(x.generateIcons())}`}<slot name="icon" ${slotted({
+    property: "slottedIcon",
+    filter: elements("svg")
+  })}>${star}</slot><slot name="value"><span class="value-label" aria-hidden="true">${x => x.value}</span></slot><slot name="count"><span class="count-label" aria-hidden="true">${x => x.formattedCount}</span></slot>`;
 }
 const template$b = ratingDisplayTemplate();