@fluentui/web-components 3.0.0-beta.35 → 3.0.0-beta.37

package/dist/esm/message-bar/message-bar.bench.js

@@ -0,0 +1,56 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition as buttonDefinition } from '../button/button.definition.js';
+import { definition } from './message-bar.definition.js';
+definition.define(FluentDesignSystem.registry);
+buttonDefinition.define(FluentDesignSystem.registry);
+const dismissed20Regular = `
+  <svg
+    fill="currentColor"
+    aria-hidden="true"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"
+      fill="currentColor"
+    ></path>
+  </svg>
+`;
+const infoIcon = `
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10ZM9.50806 8.91012C9.55039 8.67687 9.75454 8.49999 10 8.49999C10.2455 8.49999 10.4496 8.67687 10.4919 8.91012L10.5 8.99999V13.5021L10.4919 13.592C10.4496 13.8253 10.2455 14.0021 10 14.0021C9.75454 14.0021 9.55039 13.8253 9.50806 13.592L9.5 13.5021V8.99999L9.50806 8.91012ZM9.25 6.74999C9.25 6.33578 9.58579 5.99999 10 5.99999C10.4142 5.99999 10.75 6.33578 10.75 6.74999C10.75 7.16421 10.4142 7.49999 10 7.49999C9.58579 7.49999 9.25 7.16421 9.25 6.74999Z"
+      fill="#616161"
+    />
+  </svg>
+`;
+const itemRenderer = () => {
+    const messageBar = document.createElement('fluent-message-bar');
+    messageBar.appendChild(document.createTextNode('message-bar'));
+    // Create and append icon slot
+    const icon = document.createElement('span');
+    icon.setAttribute('slot', 'icon');
+    icon.innerHTML = infoIcon;
+    messageBar.appendChild(icon);
+    // Create and append content slot
+    const content = document.createElement('span');
+    content.setAttribute('slot', 'content');
+    content.appendChild(document.createTextNode('Accordion item'));
+    messageBar.appendChild(content);
+    // Create and append dismiss slot
+    const dismiss = document.createElement('span');
+    dismiss.setAttribute('slot', 'dismiss');
+    dismiss.innerHTML = dismissed20Regular; // replace with your SVG content
+    messageBar.appendChild(dismiss);
+    // Create and append actions slot
+    const actions = document.createElement('fluent-button');
+    actions.setAttribute('slot', 'actions');
+    actions.appendChild(document.createTextNode('Button'));
+    messageBar.appendChild(actions);
+    return messageBar;
+};
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';
+//# sourceMappingURL=message-bar.bench.js.map

package/dist/esm/message-bar/message-bar.bench.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-bar.bench.js","sourceRoot":"","sources":["../../../src/message-bar/message-bar.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAChF,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAEzD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAC/C,gBAAgB,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAErD,MAAM,kBAAkB,GAAG;;;;;;;;;;;;;;CAc1B,CAAC;AAEF,MAAM,QAAQ,GAAG;;;;;;;CAOhB,CAAC;AAEF,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAChE,UAAU,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC;IAE/D,8BAA8B;IAC9B,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC5C,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;IAC1B,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAE7B,iCAAiC;IACjC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACxC,OAAO,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAC/D,UAAU,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAEhC,iCAAiC;IACjC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACxC,OAAO,CAAC,SAAS,GAAG,kBAAkB,CAAC,CAAC,gCAAgC;IACxE,UAAU,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAEhC,iCAAiC;IACjC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACxD,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACxC,OAAO,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC;IACvD,UAAU,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAEhC,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/message-bar/message-bar.definition.js

@@ -0,0 +1,20 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { MessageBar } from './message-bar.js';
+import { styles } from './message-bar.styles.js';
+import { template } from './message-bar.template.js';
+/**
+ * The Fluent MessageBar Element definition.
+ *
+ * @public
+ * @remarks
+ * HTML Element: `<fluent-message-bar>`
+ */
+export const definition = MessageBar.compose({
+    name: `${FluentDesignSystem.prefix}-message-bar`,
+    template,
+    styles,
+    shadowOptions: {
+        mode: FluentDesignSystem.shadowRootMode,
+    },
+});
+//# sourceMappingURL=message-bar.definition.js.map

package/dist/esm/message-bar/message-bar.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-bar.definition.js","sourceRoot":"","sources":["../../../src/message-bar/message-bar.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAC,OAAO,CAAC;IAC3C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,cAAc;IAChD,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,IAAI,EAAE,kBAAkB,CAAC,cAAc;KACxC;CACF,CAAC,CAAC"}

package/dist/esm/message-bar/message-bar.js

@@ -0,0 +1,79 @@
+import { __decorate } from "tslib";
+import { attr, FASTElement } from '@microsoft/fast-element';
+import { toggleState } from '../utils/element-internals.js';
+/**
+ * A Message Bar Custom HTML Element.
+ *
+ * @slot actions - Content that can be provided for the actions
+ * @slot dismiss - Content that can be provided for the dismiss button
+ * @slot - The default slot for the content
+ * @public
+ */
+export class MessageBar extends FASTElement {
+    constructor() {
+        super();
+        /**
+         * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+         *
+         * @internal
+         */
+        this.elementInternals = this.attachInternals();
+        /**
+         * @public
+         * Method to emit a `dismiss` event when the message bar is dismissed
+         */
+        this.dismissMessageBar = () => {
+            this.$emit('dismiss', {});
+        };
+        this.elementInternals.role = 'status';
+    }
+    /**
+     * Handles changes to shape attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    shapeChanged(prev, next) {
+        if (prev) {
+            toggleState(this.elementInternals, prev, false);
+        }
+        if (next) {
+            toggleState(this.elementInternals, next, true);
+        }
+    }
+    /**
+     * Handles changes to the layout attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    layoutChanged(prev, next) {
+        if (prev) {
+            toggleState(this.elementInternals, prev, false);
+        }
+        if (next) {
+            toggleState(this.elementInternals, next, true);
+        }
+    }
+    /**
+     * Handles changes to the intent attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    intentChanged(prev, next) {
+        if (prev) {
+            toggleState(this.elementInternals, prev, false);
+        }
+        if (next) {
+            toggleState(this.elementInternals, next, true);
+        }
+    }
+}
+__decorate([
+    attr
+], MessageBar.prototype, "shape", void 0);
+__decorate([
+    attr
+], MessageBar.prototype, "layout", void 0);
+__decorate([
+    attr
+], MessageBar.prototype, "intent", void 0);
+//# sourceMappingURL=message-bar.js.map

package/dist/esm/message-bar/message-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-bar.js","sourceRoot":"","sources":["../../../src/message-bar/message-bar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAG5D;;;;;;;GAOG;AACH,MAAM,OAAO,UAAW,SAAQ,WAAW;IAQzC;QACE,KAAK,EAAE,CAAC;QARV;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QA+EnE;;;WAGG;QACI,sBAAiB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;QAC5B,CAAC,CAAC;QAjFA,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,QAAQ,CAAC;IACxC,CAAC;IAYD;;;;OAIG;IACI,YAAY,CAAC,IAAiC,EAAE,IAAiC;QACtF,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;SACjD;QACD,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;SAChD;IACH,CAAC;IAYD;;;;OAIG;IACI,aAAa,CAAC,IAAkC,EAAE,IAAkC;QACzF,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;SACjD;QACD,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;SAChD;IACH,CAAC;IAYD;;;;OAIG;IACI,aAAa,CAAC,IAAkC,EAAE,IAAkC;QACzF,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;SACjD;QACD,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;SAChD;IACH,CAAC;CASF;AAvEC;IADC,IAAI;yCAC0B;AAwB/B;IADC,IAAI;0CAC4B;AAwBjC;IADC,IAAI;0CAC4B"}

package/dist/esm/message-bar/message-bar.options.js

@@ -0,0 +1,27 @@
+/**
+ * @public
+ * The `layout` variations for the MessageBar component.
+ */
+export const MessageBarLayout = {
+    multiline: 'multiline',
+    singleline: 'singleline',
+};
+/**
+ * @public
+ * The `shape` variations for the MessageBar component.
+ */
+export const MessageBarShape = {
+    rounded: 'rounded',
+    square: 'square',
+};
+/**
+ * @public
+ * The `intent` variations for the MessageBar component.
+ */
+export const MessageBarIntent = {
+    success: 'success',
+    warning: 'warning',
+    error: 'error',
+    info: 'info',
+};
+//# sourceMappingURL=message-bar.options.js.map

package/dist/esm/message-bar/message-bar.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-bar.options.js","sourceRoot":"","sources":["../../../src/message-bar/message-bar.options.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,SAAS,EAAE,WAAW;IACtB,UAAU,EAAE,YAAY;CAChB,CAAC;AAIX;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACR,CAAC;AAIX;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;CACJ,CAAC"}

package/dist/esm/message-bar/message-bar.styles.js

@@ -0,0 +1,108 @@
+import { css } from '@microsoft/fast-element';
+import { borderRadiusMedium, colorNeutralBackground3, colorNeutralForeground3, colorNeutralStroke1, colorPaletteDarkOrangeBackground1, colorPaletteDarkOrangeBorder1, colorPaletteGreenBackground1, colorPaletteGreenBorder1, colorPaletteRedBackground1, colorPaletteRedBorder1, fontFamilyBase, fontSizeBase200, lineHeightBase200, spacingHorizontalM, spacingHorizontalS, spacingVerticalMNudge, spacingVerticalS, } from '../theme/design-tokens.js';
+import { errorState, multiLineState, squareState, successState, warningState } from '../styles/states/index.js';
+/**
+ * Styles for the MessageBar component.
+ *
+ * @public
+ */
+export const styles = css `
+  :host {
+    display: grid;
+    box-sizing: border-box;
+    font-family: ${fontFamilyBase};
+    font-size: ${fontSizeBase200};
+    line-height: ${lineHeightBase200};
+    width: 100%;
+    background: ${colorNeutralBackground3};
+    border: 1px solid ${colorNeutralStroke1};
+    padding-inline: ${spacingHorizontalM};
+    border-radius: ${borderRadiusMedium};
+    min-height: 36px;
+    align-items: center;
+    grid-template: 'icon body actions dismiss' / auto 1fr auto auto;
+    contain: layout style paint;
+  }
+
+  :host(${squareState}) {
+    border-radius: 0;
+  }
+
+  :host(${successState}) {
+    background-color: ${colorPaletteGreenBackground1};
+    border-color: ${colorPaletteGreenBorder1};
+  }
+
+  :host(${warningState}) {
+    background-color: ${colorPaletteDarkOrangeBackground1};
+    border-color: ${colorPaletteDarkOrangeBorder1};
+  }
+
+  :host(${errorState}) {
+    background-color: ${colorPaletteRedBackground1};
+    border-color: ${colorPaletteRedBorder1};
+  }
+
+  :host(${multiLineState}) {
+    grid-template-areas:
+      'icon body dismiss'
+      'actions actions actions';
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto 1fr;
+    padding-block: ${spacingVerticalMNudge};
+    padding-inline: ${spacingHorizontalM};
+  }
+
+  .content {
+    grid-area: body;
+    max-width: 520px;
+    padding-block: ${spacingVerticalMNudge};
+    padding-inline: 0;
+  }
+
+  :host(${multiLineState}) .content {
+    padding: 0;
+  }
+
+  ::slotted([slot='icon']) {
+    display: flex;
+    grid-area: icon;
+    flex-direction: column;
+    align-items: center;
+    color: ${colorNeutralForeground3};
+    margin-inline-end: ${spacingHorizontalS};
+  }
+
+  :host(${multiLineState}) ::slotted([slot='icon']) {
+    align-items: start;
+    height: 100%;
+  }
+
+  ::slotted([slot='dismiss']) {
+    grid-area: dismiss;
+  }
+
+  .actions {
+    grid-area: actions;
+    display: flex;
+    justify-self: end;
+    margin-inline-end: ${spacingHorizontalS};
+    gap: ${spacingHorizontalS};
+  }
+
+  :host(${multiLineState}) .actions {
+    margin-block-start: ${spacingVerticalMNudge};
+    margin-inline-end: 0;
+  }
+
+  :host(${multiLineState}) ::slotted([slot='dismiss']) {
+    align-items: start;
+    height: 100%;
+    padding-block-start: ${spacingVerticalS};
+  }
+
+  ::slotted(*) {
+    font-size: inherit;
+  }
+`;
+//# sourceMappingURL=message-bar.styles.js.map

package/dist/esm/message-bar/message-bar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-bar.styles.js","sourceRoot":"","sources":["../../../src/message-bar/message-bar.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACnB,iCAAiC,EACjC,6BAA6B,EAC7B,4BAA4B,EAC5B,wBAAwB,EACxB,0BAA0B,EAC1B,sBAAsB,EACtB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEhH;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAkB,GAAG,CAAA;;;;mBAIrB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;kBAElB,uBAAuB;wBACjB,mBAAmB;sBACrB,kBAAkB;qBACnB,kBAAkB;;;;;;;UAO7B,WAAW;;;;UAIX,YAAY;wBACE,4BAA4B;oBAChC,wBAAwB;;;UAGlC,YAAY;wBACE,iCAAiC;oBACrC,6BAA6B;;;UAGvC,UAAU;wBACI,0BAA0B;oBAC9B,sBAAsB;;;UAGhC,cAAc;;;;;;qBAMH,qBAAqB;sBACpB,kBAAkB;;;;;;qBAMnB,qBAAqB;;;;UAIhC,cAAc;;;;;;;;;aASX,uBAAuB;yBACX,kBAAkB;;;UAGjC,cAAc;;;;;;;;;;;;;yBAaC,kBAAkB;WAChC,kBAAkB;;;UAGnB,cAAc;0BACE,qBAAqB;;;;UAIrC,cAAc;;;2BAGG,gBAAgB;;;;;;CAM1C,CAAC"}

package/dist/esm/message-bar/message-bar.template.js

@@ -0,0 +1,25 @@
+import { html } from '@microsoft/fast-element';
+/**
+ * Generates a template for the MessageBar component.
+ * @public
+ * @param {MessageBar} T - The type of the MessageBar.
+ * @returns {ElementViewTemplate<T>} - The template for the MessageBar component.
+ */
+export function messageBarTemplate() {
+    return html `
+    <slot name="icon"></slot>
+    <div class="content">
+      <slot></slot>
+    </div>
+    <div class="actions">
+      <slot name="actions"></slot>
+    </div>
+    <slot name="dismiss"></slot>
+  `;
+}
+/**
+ * The template for the MessageBar component.
+ * @type {ElementViewTemplate<MessageBar>}
+ */
+export const template = messageBarTemplate();
+//# sourceMappingURL=message-bar.template.js.map

package/dist/esm/message-bar/message-bar.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-bar.template.js","sourceRoot":"","sources":["../../../src/message-bar/message-bar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGpE;;;;;GAKG;AACH,MAAM,UAAU,kBAAkB;IAChC,OAAO,IAAI,CAAG;;;;;;;;;GASb,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAoC,kBAAkB,EAAE,CAAC"}

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

@@ -0,0 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './rating-display.definition.js';
+definition.define(FluentDesignSystem.registry);
+//# sourceMappingURL=define.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/rating-display/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAE5D,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}

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

@@ -0,0 +1,6 @@
+export { RatingDisplay } from './rating-display.js';
+export { RatingDisplayColor, RatingDisplaySize } from './rating-display.options.js';
+export { template as RatingDisplayTemplate } from './rating-display.template.js';
+export { styles as RatingDisplayStyles } from './rating-display.styles.js';
+export { definition as RatingDisplayDefinition } from './rating-display.definition.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/rating-display/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AACpF,OAAO,EAAE,QAAQ,IAAI,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACjF,OAAO,EAAE,MAAM,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAC3E,OAAO,EAAE,UAAU,IAAI,uBAAuB,EAAE,MAAM,gCAAgC,CAAC"}

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

@@ -0,0 +1,17 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { RatingDisplay } from './rating-display.js';
+import { styles } from './rating-display.styles.js';
+import { template } from './rating-display.template.js';
+/**
+ * The definition for the Fluent Rating Display component.
+ *
+ * @public
+ * @remarks
+ * HTML Element: `<fluent-rating-display>`
+ */
+export const definition = RatingDisplay.compose({
+    name: `${FluentDesignSystem.prefix}-rating-display`,
+    template,
+    styles,
+});
+//# sourceMappingURL=rating-display.definition.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rating-display.definition.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAExD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CAAC,OAAO,CAAC;IAC9C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,iBAAiB;IACnD,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}

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

@@ -0,0 +1,97 @@
+import { __decorate } from "tslib";
+import { attr, FASTElement, nullableNumberConverter } from '@microsoft/fast-element';
+import { toggleState } from '../utils/element-internals.js';
+/**
+ * The base class used for constructing a fluent-rating-display custom element
+ * @public
+ */
+export class RatingDisplay extends FASTElement {
+    /**
+     * Handles changes to the color attribute.
+     *
+     * @param prev - The previous state
+     * @param next - The next state
+     */
+    colorChanged(prev, next) {
+        if (prev)
+            toggleState(this.elementInternals, prev, false);
+        if (next)
+            toggleState(this.elementInternals, next, true);
+    }
+    /**
+     * Handles changes to the size attribute.
+     *
+     * @param prev - The previous state
+     * @param next - The next state
+     */
+    sizeChanged(prev, next) {
+        if (prev)
+            toggleState(this.elementInternals, prev, false);
+        if (next)
+            toggleState(this.elementInternals, next, true);
+    }
+    constructor() {
+        super();
+        /**
+         * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+         *
+         * @internal
+         */
+        this.elementInternals = this.attachInternals();
+        /**
+         * Renders a single filled icon with a label next to it.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: `compact`
+         */
+        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) : '';
+    }
+    /**
+     * Generates the icon SVG elements based on the "max" attribute.
+     *
+     * @internal
+     */
+    generateIcons() {
+        var _a, _b;
+        let htmlString = '';
+        // The value of the selected icon. Based on the "value" attribute, rounded to the nearest half.
+        const selectedValue = Math.round((this.compact ? 1 : (_a = this.value) !== null && _a !== void 0 ? _a : 0) * 2) / 2;
+        // Render the icons based on the "max" attribute. If "max" is not set, render 5 icons.
+        // If "compact" is true, only render one filled icon.
+        for (let i = 0; i < (this.compact ? 1 : (_b = this.max) !== null && _b !== void 0 ? _b : 5) * 2; i++) {
+            const iconValue = (i + 1) / 2;
+            htmlString += `<svg aria-hidden="true" ${iconValue === selectedValue ? 'selected' : ''}><use href="#star"></use></svg>`;
+        }
+        return htmlString;
+    }
+}
+__decorate([
+    attr
+], RatingDisplay.prototype, "color", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], RatingDisplay.prototype, "compact", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], RatingDisplay.prototype, "count", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], RatingDisplay.prototype, "max", void 0);
+__decorate([
+    attr
+], RatingDisplay.prototype, "size", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], RatingDisplay.prototype, "value", void 0);
+//# sourceMappingURL=rating-display.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rating-display.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAG5D;;;GAGG;AACH,MAAM,OAAO,aAAc,SAAQ,WAAW;IAmB5C;;;;;OAKG;IACI,YAAY,CAAC,IAAoC,EAAE,IAAoC;QAC5F,IAAI,IAAI;YAAE,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;QAC1D,IAAI,IAAI;YAAE,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IAC3D,CAAC;IA6CD;;;;;OAKG;IACI,WAAW,CAAC,IAAmC,EAAE,IAAmC;QACzF,IAAI,IAAI;YAAE,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;QAC1D,IAAI,IAAI;YAAE,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IAC3D,CAAC;IAcD;QACE,KAAK,EAAE,CAAC;QAhGV;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAwBnE;;;;;;WAMG;QAEI,YAAO,GAAY,KAAK,CAAC;QAwDxB,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;IACI,aAAa;;QAClB,IAAI,UAAU,GAAW,EAAE,CAAC;QAE5B,+FAA+F;QAC/F,MAAM,aAAa,GAAW,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAA,IAAI,CAAC,KAAK,mCAAI,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;QAEvF,sFAAsF;QACtF,qDAAqD;QACrD,KAAK,IAAI,CAAC,GAAW,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAA,IAAI,CAAC,GAAG,mCAAI,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE;YACvE,MAAM,SAAS,GAAW,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;YAEtC,UAAU,IAAI,2BACZ,SAAS,KAAK,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAC7C,iCAAiC,CAAC;SACnC;QAED,OAAO,UAAU,CAAC;IACpB,CAAC;CACF;AArHC;IADC,IAAI;4CAC6B;AAqBlC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CACM;AAUhC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;4CACvB;AAYtB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;0CACzB;AAWpB;IADC,IAAI;2CAC2B;AAqBhC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;4CACvB"}

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

@@ -0,0 +1,19 @@
+/**
+ * The color of the Rating Display items can be `neutral`, `brand`, or `marigold`.
+ * @public
+ */
+export const RatingDisplayColor = {
+    neutral: 'neutral',
+    brand: 'brand',
+    marigold: 'marigold',
+};
+/**
+ * The size of a Rating Display can be `small`, `medium`, or `large`.
+ * @public
+ */
+export const RatingDisplaySize = {
+    small: 'small',
+    medium: 'medium',
+    large: 'large',
+};
+//# sourceMappingURL=rating-display.options.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rating-display.options.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.options.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,UAAU;CACZ,CAAC;AAEX;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC"}

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

@@ -0,0 +1,120 @@
+import { css } from '@microsoft/fast-element';
+import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
+import { colorBrandBackground, colorBrandStroke2, colorNeutralBackground1Pressed, colorNeutralForeground1, colorPaletteMarigoldBackground2, colorPaletteMarigoldBackground3, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontWeightSemibold, lineHeightBase200, lineHeightBase300, spacingHorizontalSNudge, spacingHorizontalXS, spacingHorizontalXXS, } from '../theme/design-tokens.js';
+import { brandState, largeState, neutralState, smallState } from '../styles/states/index.js';
+/**
+ * The styles for the Rating Display component.
+ *
+ * @public
+ */
+export const styles = 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([color]) svg {
+      fill: CanvasText;
+    }
+
+    :host([color]:is([value^='-'], [value='0'])) svg,
+    :host(:not([value])) svg,
+    :host([color]) svg[selected] ~ svg {
+      fill: Canvas;
+      stroke: CanvasText;
+    }
+  `));
+//# sourceMappingURL=rating-display.styles.js.map

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

@@ -0,0 +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,oBAAoB,EACpB,iBAAiB,EACjB,8BAA8B,EAC9B,uBAAuB,EACvB,+BAA+B,EAC/B,+BAA+B,EAC/B,cAAc,EACd,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE7F;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;aAKb,uBAAuB;mBACjB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;;;;UAK1B,UAAU;;;;UAIV,UAAU;;iBAEH,eAAe;mBACb,iBAAiB;;;;;;YAMxB,+BAA+B;yBAClB,oBAAoB;;;;;;;;UAQnC,YAAY;YACV,uBAAuB;;;UAGzB,UAAU;YACR,oBAAoB;;;;;;YAMpB,+BAA+B;;;UAGjC,YAAY;UACZ,YAAY;UACZ,YAAY;YACV,8BAA8B;;;UAGhC,UAAU;UACV,UAAU;UACV,UAAU;YACR,iBAAiB;;;;;;2BAMF,mBAAmB;mBAC3B,kBAAkB;;;UAG3B,UAAU;UACV,UAAU;2BACO,oBAAoB;;;UAGrC,UAAU;UACV,UAAU;2BACO,uBAAuB;;;;;;;;;;qBAU7B,mBAAmB;;;UAG9B,UAAU;UACV,UAAU;qBACC,oBAAoB;;;UAG/B,UAAU;UACV,UAAU;qBACC,uBAAuB;;CAE3C,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;;GAWjC,CAAC,CACH,CAAC"}