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

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

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

@@ -1,6 +1,8 @@
 import { css } from '@microsoft/fast-element';
 import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
 import { colorBrandBackground2, colorBrandForeground1, colorNeutralBackground6, colorNeutralForeground1, colorPaletteMarigoldBackground2, colorPaletteMarigoldBorderActive, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontWeightSemibold, lineHeightBase200, lineHeightBase300, spacingHorizontalSNudge, spacingHorizontalXS, spacingHorizontalXXS, } from '../theme/design-tokens.js';
+import { svgToDataURI } from './rating-display.base.js';
+import { defaultIconFilled, defaultIconOutlined } from './rating-display.template.js';
 /**
  * The styles for the Rating Display component.
  *
@@ -10,9 +12,16 @@ export const styles = css `
   ${display('inline-flex')}
 
   :host {
-    --icon-size: 16px;
-    --icon-color-filled: ${colorPaletteMarigoldBorderActive};
-    --icon-color-empty: ${colorPaletteMarigoldBackground2};
+    --_icon-size: 16px;
+    --_icon-gradient-degree: 90deg;
+    --_icon-color-value: ${colorPaletteMarigoldBorderActive};
+    --_icon-color-empty: ${colorPaletteMarigoldBackground2};
+    --_default-value: 0;
+    --_default-max: 5;
+    --_mask-image-filled: url(${svgToDataURI(defaultIconFilled)});
+    --_mask-image-outlined: url(${svgToDataURI(defaultIconOutlined)});
+    --_mask-position-x: left;
+
     align-items: center;
     color: ${colorNeutralForeground1};
     font-family: ${fontFamilyBase};
@@ -22,12 +31,17 @@ export const styles = css `
     user-select: none;
   }
 
+  :host(:dir(rtl)) {
+    --_icon-gradient-degree: -90deg;
+    --_mask-position-x: right;
+  }
+
   :host([size='small']) {
-    --icon-size: 12px;
+    --_icon-size: 12px;
   }
 
   :host([size='large']) {
-    --icon-size: 20px;
+    --_icon-size: 20px;
     font-size: ${fontSizeBase300};
     line-height: ${lineHeightBase300};
   }
@@ -36,40 +50,48 @@ export const styles = css `
     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([color='neutral']) {
+    --_icon-color-value: ${colorNeutralForeground1};
+    --_icon-color-empty: ${colorNeutralBackground6};
   }
 
-  :host([color='neutral']) svg {
-    --icon-color-filled: ${colorNeutralForeground1};
+  :host([color='brand']) {
+    --_icon-color-value: ${colorBrandForeground1};
+    --_icon-color-empty: ${colorBrandBackground2};
   }
 
-  :host([color='brand']) svg {
-    --icon-color-filled: ${colorBrandForeground1};
+  @supports (width: attr(value type(<number>))) {
+    :host {
+      --_attr-value: attr(value type(<number>));
+      --_attr-max: attr(max type(<number>));
+    }
   }
 
-  :host(:is([value^='-'], [value='0'])) svg,
-  :host(:not([value])) svg,
-  svg[selected] ~ svg {
-    fill: var(--icon-color-empty);
+  :host([compact]) .display {
+    --_max: 1;
   }
 
-  :host([color='neutral']:is([value^='-'], [value='0'], :not([value]))) svg,
-  :host([color='neutral']) svg[selected] ~ svg {
-    --icon-color-empty: ${colorNeutralBackground6};
-  }
+  .display {
+    --_value: max(0, round(var(--_attr-value, var(--_default-value)) * 2) / 2);
+    --_max: max(1, var(--_attr-max, var(--_default-max)));
+    --_mask-inline-size: calc(var(--_icon-size) + ${spacingHorizontalXXS});
+    --_icon-gradient-stop-visual-adjustment: 0px;
+    --_icon-gradient-stop: calc(
+      var(--_mask-inline-size) * var(--_value) - var(--_icon-gradient-stop-visual-adjustment)
+    );
 
-  :host([color='brand']:is([value^='-'], [value='0'], :not([value]))) svg,
-  :host([color='brand']) svg[selected] ~ svg {
-    --icon-color-empty: ${colorBrandBackground2};
+    background-image: linear-gradient(
+      var(--_icon-gradient-degree),
+      var(--_icon-color-value) var(--_icon-gradient-stop),
+      var(--_icon-color-empty) calc(var(--_icon-gradient-stop) + 0.5px)
+    );
+    block-size: var(--_icon-size);
+    display: grid;
+    inline-size: calc(var(--_max) * var(--_mask-inline-size) - ${spacingHorizontalXXS} / 2);
+    mask-image: var(--_mask-image-filled);
+    mask-repeat: repeat no-repeat;
+    mask-size: var(--_mask-inline-size) var(--_icon-size);
+    mask-position: var(--_mask-position-x) center;
   }
 
   .value-label,
@@ -109,15 +131,20 @@ export const styles = css `
     margin-inline: ${spacingHorizontalSNudge};
   }
 `.withBehaviors(forcedColorsStylesheetBehavior(css `
-    :host([color]) svg {
-      fill: CanvasText;
+    .display {
+      --_icon-color-value: CanvasText;
+      --_icon-color-empty: Canvas;
+      --_icon-gradient-stop-visual-adjustment: 0.5px;
+
+      forced-color-adjust: none;
     }
 
-    :host([color]:is([value^='-'], [value='0'])) svg,
-    :host(:not([value])) svg,
-    :host([color]) svg[selected] ~ svg {
-      fill: Canvas;
-      stroke: CanvasText;
+    .display::before {
+      background-color: var(--_icon-color-value);
+      content: '';
+      grid-area: 1 / 1 / -1 / -1;
+      mask: inherit;
+      mask-image: var(--_mask-image-outlined);
     }
   `));
 //# sourceMappingURL=rating-display.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"rating-display.styles.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EACL,qBAAqB,EACrB,qBAAqB,EACrB,uBAAuB,EACvB,uBAAuB,EACvB,+BAA+B,EAC/B,gCAAgC,EAChC,cAAc,EACd,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,2BAA2B,CAAC;AAEnC;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;2BAIC,gCAAgC;0BACjC,+BAA+B;;aAE5C,uBAAuB;mBACjB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;;;;;;;;;;iBAWnB,eAAe;mBACb,iBAAiB;;;;;;;;;;;yBAWX,oBAAoB;;;;;;;;;2BASlB,uBAAuB;;;;2BAIvB,qBAAqB;;;;;;;;;;;0BAWtB,uBAAuB;;;;;0BAKvB,qBAAqB;;;;;;2BAMpB,mBAAmB;mBAC3B,kBAAkB;;;;;2BAKV,oBAAoB;;;;;2BAKpB,uBAAuB;;;;;;;;;;qBAU7B,mBAAmB;;;;;qBAKnB,oBAAoB;;;;;qBAKpB,uBAAuB;;CAE3C,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;;GAWjC,CAAC,CACH,CAAC"}
+{"version":3,"file":"rating-display.styles.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EACL,qBAAqB,EACrB,qBAAqB,EACrB,uBAAuB,EACvB,uBAAuB,EACvB,+BAA+B,EAC/B,gCAAgC,EAChC,cAAc,EACd,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAEtF;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;2BAKC,gCAAgC;2BAChC,+BAA+B;;;gCAG1B,YAAY,CAAC,iBAAiB,CAAC;kCAC7B,YAAY,CAAC,mBAAmB,CAAC;;;;aAItD,uBAAuB;mBACjB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;;;;;;;;;;;;;;;iBAgBnB,eAAe;mBACb,iBAAiB;;;;;;;;2BAQT,uBAAuB;2BACvB,uBAAuB;;;;2BAIvB,qBAAqB;2BACrB,qBAAqB;;;;;;;;;;;;;;;;;oDAiBI,oBAAoB;;;;;;;;;;;;;iEAaP,oBAAoB;;;;;;;;;;2BAU1D,mBAAmB;mBAC3B,kBAAkB;;;;;2BAKV,oBAAoB;;;;;2BAKpB,uBAAuB;;;;;;;;;;qBAU7B,mBAAmB;;;;;qBAKnB,oBAAoB;;;;;qBAKpB,uBAAuB;;CAE3C,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;GAgBjC,CAAC,CACH,CAAC"}

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

@@ -1,5 +1,8 @@
 import { type ElementViewTemplate } from '@microsoft/fast-element';
 import type { RatingDisplay } from './rating-display.js';
+export declare const defaultIconPath = "<path d=\"M5.28347 1.54605C5.57692 0.951448 6.42479 0.951449 6.71825 1.54605L7.82997 3.79866L10.3159 4.15988C10.9721 4.25523 11.2341 5.0616 10.7592 5.52443L8.96043 7.27785L9.38507 9.7537C9.49716 10.4072 8.81122 10.9056 8.22431 10.597L6.00086 9.4281L3.7774 10.597C3.19049 10.9056 2.50455 10.4072 2.61664 9.7537L3.04128 7.27784L1.24246 5.52443C0.767651 5.0616 1.02966 4.25523 1.68584 4.15988L4.17174 3.79865L5.28347 1.54605Z\" />";
+export declare const defaultIconFilled = "\n<svg viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.28347 1.54605C5.57692 0.951448 6.42479 0.951449 6.71825 1.54605L7.82997 3.79866L10.3159 4.15988C10.9721 4.25523 11.2341 5.0616 10.7592 5.52443L8.96043 7.27785L9.38507 9.7537C9.49716 10.4072 8.81122 10.9056 8.22431 10.597L6.00086 9.4281L3.7774 10.597C3.19049 10.9056 2.50455 10.4072 2.61664 9.7537L3.04128 7.27784L1.24246 5.52443C0.767651 5.0616 1.02966 4.25523 1.68584 4.15988L4.17174 3.79865L5.28347 1.54605Z\" /></svg>\n";
+export declare const defaultIconOutlined = "\n<svg viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\" stroke=\"black\" stroke-width=\"2\"\n><path d=\"M5.28347 1.54605C5.57692 0.951448 6.42479 0.951449 6.71825 1.54605L7.82997 3.79866L10.3159 4.15988C10.9721 4.25523 11.2341 5.0616 10.7592 5.52443L8.96043 7.27785L9.38507 9.7537C9.49716 10.4072 8.81122 10.9056 8.22431 10.597L6.00086 9.4281L3.7774 10.597C3.19049 10.9056 2.50455 10.4072 2.61664 9.7537L3.04128 7.27784L1.24246 5.52443C0.767651 5.0616 1.02966 4.25523 1.68584 4.15988L4.17174 3.79865L5.28347 1.54605Z\" /></svg>\n";
 /**
  * Generates a template for the Rating Display component.
  *

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

@@ -1,16 +1,12 @@
-import { elements, html, slotted } from '@microsoft/fast-element';
-import { staticallyCompose } from '../utils/template-helpers.js';
-/**
- * Reusable star icon symbol
- */
-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>
+import { html, ref } from '@microsoft/fast-element';
+export const defaultIconPath = `<path d="M5.28347 1.54605C5.57692 0.951448 6.42479 0.951449 6.71825 1.54605L7.82997 3.79866L10.3159 4.15988C10.9721 4.25523 11.2341 5.0616 10.7592 5.52443L8.96043 7.27785L9.38507 9.7537C9.49716 10.4072 8.81122 10.9056 8.22431 10.597L6.00086 9.4281L3.7774 10.597C3.19049 10.9056 2.50455 10.4072 2.61664 9.7537L3.04128 7.27784L1.24246 5.52443C0.767651 5.0616 1.02966 4.25523 1.68584 4.15988L4.17174 3.79865L5.28347 1.54605Z" />`;
+export const defaultIconFilled = `
+<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">${defaultIconPath}</svg>
+`;
+export const defaultIconOutlined = `
+<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"
+    fill="none" stroke="black" stroke-width="2"
+>${defaultIconPath}</svg>
 `;
 /**
  * Generates a template for the Rating Display component.
@@ -19,8 +15,8 @@ const star = html `
  */
 export function ratingDisplayTemplate() {
     return html `
-    ${x => html `${staticallyCompose(x.generateIcons())}`}
-    <slot name="icon" ${slotted({ property: 'slottedIcon', filter: elements('svg') })}>${star}</slot>
+    <div ${ref('display')} class="display" aria-hidden="true"></div>
+    <slot name="icon" ${ref('iconSlot')} @slotchange="${x => x.handleSlotChange()}"></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>
   `;

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

@@ -1 +1 @@
-{"version":3,"file":"rating-display.template.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAA4B,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAC5F,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAGjE;;GAEG;AACH,MAAM,IAAI,GAAG,IAAI,CAAA;;;;;;;;CAQhB,CAAC;AAEF;;;;GAIG;AACH,MAAM,UAAU,qBAAqB;IACnC,OAAO,IAAI,CAAG;MACV,CAAC,CAAC,EAAE,CAAC,IAAI,CAAA,GAAG,iBAAiB,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,EAAE;wBAChC,OAAO,CAAC,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,IAAI;sEACvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;sEACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;GACxF,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAuC,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"rating-display.template.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAG9E,MAAM,CAAC,MAAM,eAAe,GAAG,2aAA2a,CAAC;AAE3c,MAAM,CAAC,MAAM,iBAAiB,GAAG;8DAC6B,eAAe;CAC5E,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;GAGhC,eAAe;CACjB,CAAC;AAEF;;;;GAIG;AACH,MAAM,UAAU,qBAAqB;IACnC,OAAO,IAAI,CAAG;WACL,GAAG,CAAC,SAAS,CAAC;wBACD,GAAG,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB,EAAE;sEACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;sEACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;GACxF,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAuC,qBAAqB,EAAE,CAAC"}

package/dist/esm/utils/request-idle-callback.d.ts

@@ -7,9 +7,7 @@
  * @returns An ID that can be used to cancel the callback.
  * @public
  */
-export declare function requestIdleCallback(callback: (args: {
-    didTimeout: boolean;
-}) => void, options?: {
+export declare function requestIdleCallback(callback: (deadline: IdleDeadline) => void, options?: {
     timeout: number;
 }): ReturnType<typeof globalThis.requestIdleCallback | typeof setTimeout>;
 /**
@@ -38,6 +36,6 @@ export declare function cancelIdleCallback(id: ReturnType<typeof globalThis.requ
  * @public
  */
 export declare function waitForConnectedDescendants(target: HTMLElement, callback: () => void, options?: {
-    shallow: boolean;
-    timeout: number;
+    shallow?: boolean;
+    timeout?: number;
 }): void;

package/dist/esm/utils/request-idle-callback.js

@@ -15,6 +15,7 @@ export function requestIdleCallback(callback, options) {
     return setTimeout(() => {
         callback({
             didTimeout: options?.timeout ? Date.now() - start >= options.timeout : false,
+            timeRemaining: () => 0,
         });
     }, 1);
 }
@@ -50,23 +51,21 @@ export function cancelIdleCallback(id) {
  *
  * @public
  */
-export function waitForConnectedDescendants(target, callback, options = { shallow: false, timeout: 50 }) {
+export function waitForConnectedDescendants(target, callback, options) {
     let idleCallbackId;
-    const query = options.shallow ? ':scope > *' : '*';
-    if (!target.isConnected) {
-        return;
-    }
-    const scheduleCheck = () => {
+    const shallow = options?.shallow ?? false;
+    const query = `${shallow ? ':scope > ' : ''}:not(:defined)`;
+    const timeout = options?.timeout ?? 50;
+    const scheduleCheck = (deadline) => {
         if (idleCallbackId) {
-            idleCallbackId = cancelIdleCallback(idleCallbackId);
+            cancelIdleCallback(idleCallbackId);
+            idleCallbackId = undefined;
         }
-        if (Array.from(target.querySelectorAll(query))
-            .filter(el => el.tagName.includes('-'))
-            .every(el => el.isConnected)) {
+        if (!target.querySelector(query) || (deadline && deadline.timeRemaining() <= 0)) {
             callback();
             return;
         }
-        idleCallbackId = requestIdleCallback(scheduleCheck, { timeout: options.timeout });
+        idleCallbackId = requestIdleCallback(scheduleCheck, { timeout });
     };
     scheduleCheck();
 }

package/dist/esm/utils/request-idle-callback.js.map

@@ -1 +1 @@
-{"version":3,"file":"request-idle-callback.js","sourceRoot":"","sources":["../../../src/utils/request-idle-callback.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,MAAM,UAAU,mBAAmB,CACjC,QAAiD,EACjD,OAA6B;IAE7B,IAAI,qBAAqB,IAAI,UAAU,EAAE,CAAC;QACxC,OAAO,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IAC3D,CAAC;IAED,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;IACzB,OAAO,UAAU,CAAC,GAAG,EAAE;QACrB,QAAQ,CAAC;YACP,UAAU,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK;SAC7E,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,CAAC,CAAC;AACR,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAAyE;IAC1G,IAAI,oBAAoB,IAAI,UAAU,EAAE,CAAC;QACtC,UAAgC,CAAC,kBAAkB,CAAC,EAAY,CAAC,CAAC;IACrE,CAAC;SAAM,CAAC;QACN,YAAY,CAAC,EAAE,CAAC,CAAC;IACnB,CAAC;AACH,CAAC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,2BAA2B,CACzC,MAAmB,EACnB,QAAoB,EACpB,OAAO,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IAEzC,IAAI,cAA6D,CAAC;IAClE,MAAM,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC;IAEnD,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC;QACxB,OAAO;IACT,CAAC;IAED,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,cAAc,EAAE,CAAC;YACnB,cAAc,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC;QACtD,CAAC;QAED,IACE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;aACvC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;aACtC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,EAC9B,CAAC;YACD,QAAQ,EAAE,CAAC;YACX,OAAO;QACT,CAAC;QAED,cAAc,GAAG,mBAAmB,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC;IACpF,CAAC,CAAC;IAEF,aAAa,EAAE,CAAC;AAClB,CAAC"}
+{"version":3,"file":"request-idle-callback.js","sourceRoot":"","sources":["../../../src/utils/request-idle-callback.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,MAAM,UAAU,mBAAmB,CACjC,QAA0C,EAC1C,OAA6B;IAE7B,IAAI,qBAAqB,IAAI,UAAU,EAAE,CAAC;QACxC,OAAO,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IAC3D,CAAC;IAED,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;IACzB,OAAO,UAAU,CAAC,GAAG,EAAE;QACrB,QAAQ,CAAC;YACP,UAAU,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK;YAC5E,aAAa,EAAE,GAAG,EAAE,CAAC,CAAC;SACvB,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,CAAC,CAAC;AACR,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAAyE;IAC1G,IAAI,oBAAoB,IAAI,UAAU,EAAE,CAAC;QACtC,UAAgC,CAAC,kBAAkB,CAAC,EAAY,CAAC,CAAC;IACrE,CAAC;SAAM,CAAC;QACN,YAAY,CAAC,EAAE,CAAC,CAAC;IACnB,CAAC;AACH,CAAC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,2BAA2B,CACzC,MAAmB,EACnB,QAAoB,EACpB,OAAiD;IAEjD,IAAI,cAAkE,CAAC;IACvE,MAAM,OAAO,GAAG,OAAO,EAAE,OAAO,IAAI,KAAK,CAAC;IAC1C,MAAM,KAAK,GAAG,GAAG,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,gBAAgB,CAAC;IAC5D,MAAM,OAAO,GAAG,OAAO,EAAE,OAAO,IAAI,EAAE,CAAC;IAEvC,MAAM,aAAa,GAAG,CAAC,QAAuB,EAAE,EAAE;QAChD,IAAI,cAAc,EAAE,CAAC;YACnB,kBAAkB,CAAC,cAAc,CAAC,CAAC;YACnC,cAAc,GAAG,SAAS,CAAC;QAC7B,CAAC;QAED,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,EAAE,CAAC;YAChF,QAAQ,EAAE,CAAC;YACX,OAAO;QACT,CAAC;QAED,cAAc,GAAG,mBAAmB,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC;IACnE,CAAC,CAAC;IAEF,aAAa,EAAE,CAAC;AAClB,CAAC"}

package/dist/web-components.d.ts

@@ -2274,12 +2274,21 @@ export declare class BaseProgressBar extends FASTElement {
  * @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.
      *
@@ -2292,9 +2301,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;
     /**
@@ -2307,6 +2316,7 @@ export declare class BaseRatingDisplay extends FASTElement {
      * HTML Attribute: `max`
      */
     max?: number;
+    protected maxChanged(): void;
     /**
      * The value of the rating.
      *
@@ -2315,44 +2325,19 @@ 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;
 }
 
 /**
@@ -8776,6 +8761,8 @@ export declare const ProgressBarValidationState: {
  */
 export declare type ProgressBarValidationState = ValuesOf<typeof ProgressBarValidationState>;
 
+declare type PropertyNameForCalculation = 'max' | 'value';
+
 /**
  * A Radio Custom HTML Element.
  * Implements the {@link https://w3c.github.io/aria/#radio | ARIA `radio` role}.
@@ -9208,18 +9195,6 @@ 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;
 }
 
 /**