@fluentui/web-components 3.0.0-beta.4 → 3.0.0-beta.41

package/dist/esm/radio-group/radio-group.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.template.js","sourceRoot":"","sources":["../../../src/radio-group/radio-group.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AAG/E,MAAM,CAAC,MAAM,QAAQ,GAAoC,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"radio-group.template.js","sourceRoot":"","sources":["../../../src/radio-group/radio-group.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGpE,MAAM,UAAU,kBAAkB;IAChC,OAAO,IAAI,CAAG;;mBAEG,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,KAAoB,CAAC;iBAC1D,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAc,CAAC;gBAC5C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;kBAC7C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAmB,CAAC;mBAChD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAmB,CAAC;kBACnD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;;2BAE3C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAc,CAAC;;GAEvE,CAAC;AACJ,CAAC;AAED,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"}

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

@@ -0,0 +1,32 @@
+import { html } from '@microsoft/fast-element';
+/**
+ * Reusable star icon symbol
+ */
+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>
+`;
+/**
+ * Generates a template for the Rating Display component.
+ *
+ * @public
+ */
+export 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>
+  `;
+}
+/**
+ * The template for the Rating Display component.
+ *
+ * @public
+ */
+export const template = ratingDisplayTemplate();
+//# sourceMappingURL=rating-display.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rating-display.template.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGpE;;GAEG;AACH,MAAM,IAAI,GAAG,IAAI,CAAA;;;;;;;;CAQhB,CAAC;AAEF;;;;GAIG;AACH,MAAM,UAAU,qBAAqB;IACnC,OAAO,IAAI,CAAG;MACV,IAAI,IAAI,CAAC,CAAC,EAAE,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,EAAE;sEACW,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/slider/index.js

@@ -1,6 +1,6 @@
-export * from './slider.js';
-export * from './slider.options.js';
 export { definition as SliderDefinition } from './slider.definition.js';
+export { Slider } from './slider.js';
+export { SliderMode, SliderOrientation, SliderSize } from './slider.options.js';
 export { styles as SliderStyles } from './slider.styles.js';
 export { template as SliderTemplate } from './slider.template.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/slider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/slider/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/slider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEhF,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/esm/slider/slider-utilities.js

@@ -0,0 +1,12 @@
+import { Direction, limit } from '@microsoft/fast-web-utilities';
+/**
+ * Converts a pixel coordinate on the track to a percent of the track's range
+ */
+export function convertPixelToPercent(pixelPos, minPosition, maxPosition, direction) {
+    let pct = limit(0, 1, (pixelPos - minPosition) / (maxPosition - minPosition));
+    if (direction === Direction.rtl) {
+        pct = 1 - pct;
+    }
+    return pct;
+}
+//# sourceMappingURL=slider-utilities.js.map

package/dist/esm/slider/slider-utilities.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-utilities.js","sourceRoot":"","sources":["../../../src/slider/slider-utilities.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAEjE;;GAEG;AACH,MAAM,UAAU,qBAAqB,CACnC,QAAgB,EAChB,WAAmB,EACnB,WAAmB,EACnB,SAAqB;IAErB,IAAI,GAAG,GAAW,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,QAAQ,GAAG,WAAW,CAAC,GAAG,CAAC,WAAW,GAAG,WAAW,CAAC,CAAC,CAAC;IACtF,IAAI,SAAS,KAAK,SAAS,CAAC,GAAG,EAAE;QAC/B,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;KACf;IACD,OAAO,GAAG,CAAC;AACb,CAAC"}

package/dist/esm/slider/slider.bench.js

@@ -0,0 +1,10 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './slider.definition.js';
+definition.define(FluentDesignSystem.registry);
+const itemRenderer = () => {
+    const slider = document.createElement('fluent-slider');
+    return slider;
+};
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';
+//# sourceMappingURL=slider.bench.js.map

package/dist/esm/slider/slider.bench.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.bench.js","sourceRoot":"","sources":["../../../src/slider/slider.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACvD,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/slider/slider.form-associated.js

@@ -0,0 +1,14 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { FormAssociated } from '../form-associated/form-associated.js';
+class _Slider extends FASTElement {
+}
+/**
+ * @beta
+ */
+export class FormAssociatedSlider extends FormAssociated(_Slider) {
+    constructor() {
+        super(...arguments);
+        this.proxy = document.createElement('input');
+    }
+}
+//# sourceMappingURL=slider.form-associated.js.map

package/dist/esm/slider/slider.form-associated.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.form-associated.js","sourceRoot":"","sources":["../../../src/slider/slider.form-associated.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAEvE,MAAM,OAAQ,SAAQ,WAAW;CAAG;AAIpC;;GAEG;AACH,MAAM,OAAO,oBAAqB,SAAQ,cAAc,CAAC,OAAO,CAAC;IAAjE;;QACE,UAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC1C,CAAC;CAAA"}