@fluentui/web-components 3.0.0-beta.7 → 3.0.0-beta.71

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

@@ -0,0 +1,150 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { RatingDisplayColor, RatingDisplaySize } from './rating-display.options.js';
+/**
+ * The base class used for constructing a fluent-rating-display custom element
+ *
+ * @slot icon - SVG element used as the rating icon
+ *
+ * @public
+ */
+export declare class BaseRatingDisplay extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * The number of ratings.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `count`
+     */
+    count?: number;
+    /**
+     * The `viewBox` attribute of the icon <svg> element.
+     *
+     * @public
+     * @default `0 0 20 20`
+     * @remarks
+     * HTML Attribute: `icon-view-box`
+     */
+    iconViewBox?: string;
+    /**
+     * The maximum possible value of the rating.
+     * This attribute determines the number of icons displayed.
+     * Must be a whole number greater than 1.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `max`
+     */
+    max?: number;
+    /**
+     * The value of the rating.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `value`
+     */
+    value?: number;
+    /**
+     * @internal
+     */
+    slottedIcon: HTMLElement[];
+    /**
+     * @internal
+     */
+    slottedIconChanged(): void;
+    /**
+     * @internal
+     */
+    private customIcon?;
+    private intlNumberFormatter;
+    constructor();
+    /**
+     * 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;
+}
+/**
+ * A Rating Display Custom HTML Element.
+ * Based on BaseRatingDisplay and includes style and layout specific attributes
+ *
+ * @public
+ */
+export declare class RatingDisplay extends BaseRatingDisplay {
+    /**
+     * The color of the rating display icons.
+     *
+     * @public
+     * @default `marigold`
+     * @remarks
+     * HTML Attribute: `color`
+     */
+    color?: RatingDisplayColor;
+    /**
+     * Handles changes to the color attribute.
+     *
+     * @param prev - The previous state
+     * @param next - The next state
+     */
+    colorChanged(prev: RatingDisplayColor | undefined, next: RatingDisplayColor | undefined): void;
+    /**
+     * The size of the component.
+     *
+     * @public
+     * @default 'medium'
+     * @remarks
+     * HTML Attribute: `size`
+     */
+    size?: RatingDisplaySize;
+    /**
+     * Handles changes to the size attribute.
+     *
+     * @param prev - The previous state
+     * @param next - The next state
+     */
+    sizeChanged(prev: RatingDisplaySize | undefined, next: RatingDisplaySize | undefined): void;
+    /**
+     * Renders a single filled icon with a label next to it.
+     *
+     * @public
+     * @remarks
+     * 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/dts/rating-display/rating-display.definition.d.ts

@@ -0,0 +1,9 @@
+import { RatingDisplay } from './rating-display.js';
+/**
+ * The definition for the Fluent Rating Display component.
+ *
+ * @public
+ * @remarks
+ * HTML Element: `<fluent-rating-display>`
+ */
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof RatingDisplay>;

package/dist/dts/rating-display/rating-display.options.d.ts

@@ -0,0 +1,29 @@
+import type { ValuesOf } from '../utils/index.js';
+/**
+ * The color of the Rating Display items can be `neutral`, `brand`, or `marigold`.
+ * @public
+ */
+export declare const RatingDisplayColor: {
+    readonly neutral: "neutral";
+    readonly brand: "brand";
+    readonly marigold: "marigold";
+};
+/**
+ * The size of a Rating Display can be `small`, `medium`, or `large`.
+ * @public
+ */
+export declare const RatingDisplaySize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+/**
+ * The Rating Display items can be one of several colors.
+ * @public
+ */
+export type RatingDisplayColor = ValuesOf<typeof RatingDisplayColor>;
+/**
+ * A Rating Display can be one of several preset sizes.
+ * @public
+ */
+export type RatingDisplaySize = ValuesOf<typeof RatingDisplaySize>;

package/dist/dts/rating-display/rating-display.styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The styles for the Rating Display component.
+ *
+ * @public
+ */
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

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

@@ -0,0 +1,14 @@
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import type { RatingDisplay } from './rating-display.js';
+/**
+ * Generates a template for the Rating Display component.
+ *
+ * @public
+ */
+export declare function ratingDisplayTemplate<T extends RatingDisplay>(): ElementViewTemplate<T>;
+/**
+ * The template for the Rating Display component.
+ *
+ * @public
+ */
+export declare const template: ElementViewTemplate<RatingDisplay>;

package/dist/dts/slider/index.d.ts

@@ -1,5 +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 type { SliderConfiguration, SliderOptions } from './slider.options.js';
 export { styles as SliderStyles } from './slider.styles.js';
 export { template as SliderTemplate } from './slider.template.js';

package/dist/dts/slider/slider-utilities.d.ts

@@ -0,0 +1,5 @@
+import { Direction } from '@microsoft/fast-web-utilities';
+/**
+ * Converts a pixel coordinate on the track to a percent of the track's range
+ */
+export declare function convertPixelToPercent(pixelPos: number, minPosition: number, maxPosition: number, direction?: Direction): number;

package/dist/dts/slider/slider.bench.d.ts

@@ -0,0 +1,3 @@
+declare const itemRenderer: () => HTMLElement;
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';

package/dist/dts/slider/slider.d.ts

@@ -1,10 +1,36 @@
-import { FASTSlider } from '@microsoft/fast-foundation/slider.js';
-import type { SliderSize } from './slider.options.js';
+import { FASTElement } from '@microsoft/fast-element';
+import { Direction, Orientation } from '@microsoft/fast-web-utilities';
+import { SliderConfiguration, SliderMode, SliderSize } from './slider.options.js';
 /**
  * The base class used for constructing a fluent-slider custom element
+ *
+ * @slot thumb - The slot for a custom thumb element.
+ * @csspart thumb-container - The container element of the thumb.
+ * @csspart track-container - The container element of the track.
+ * @fires change - Fires a custom 'change' event when the value changes.
+ *
  * @public
  */
-export declare class Slider extends FASTSlider {
+export declare class Slider extends FASTElement implements SliderConfiguration {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * The form-associated flag.
+     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+     *
+     * @public
+     */
+    static formAssociated: boolean;
+    /**
+     * A reference to all associated `<label>` elements.
+     *
+     * @public
+     */
+    get labels(): ReadonlyArray<Node>;
     /**
      * The size of the slider
      * @public
@@ -12,13 +38,322 @@ export declare class Slider extends FASTSlider {
      * HTML Attribute: size
      */
     size?: SliderSize;
-    handleChange(source: any, propertyName: string): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
+    protected sizeChanged(prev: string, next: string): void;
+    handleChange(_: any, propertyName: string): void;
     private stepStyles?;
     /**
      * Handles changes to step styling based on the step value
      * NOTE: This function is not a changed callback, stepStyles is not observable
      */
     private handleStepStyles;
+    /**
+     * The initial value of the input.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `value`
+     */
+    initialValue: string;
+    /**
+     * Sets the value of the input when the value attribute changes.
+     *
+     * @param prev - The previous value
+     * @param next - The current value
+     * @internal
+     */
+    protected initialValueChanged(_: string, next: string): void;
+    /**
+     * The element's validity state.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validity | `ElementInternals.validity`} property.
+     */
+    get validity(): ValidityState;
+    /**
+     * The element's validation message.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/validationMessage | `ElemenentInternals.validationMessage`} property.
+     */
+    get validationMessage(): string;
+    /**
+     * Whether the element is a candidate for its owning form's constraint validation.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate | `ElemenentInternals.willValidate`} property.
+     */
+    get willValidate(): boolean;
+    /**
+     * Checks the element's validity.
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/checkValidity | `ElemenentInternals.checkValidity`} method.
+     */
+    checkValidity(): boolean;
+    /**
+     * Reports the element's validity.
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/reportValidity | `ElemenentInternals.reportValidity`} method.
+     */
+    reportValidity(): boolean;
+    /**
+     * Sets a custom validity message.
+     * @public
+     */
+    setCustomValidity(message: string): void;
+    /**
+     * Sets the validity of the control.
+     *
+     * @param flags - Validity flags to set.
+     * @param message - Optional message to supply. If not provided, the control's `validationMessage` will be used.
+     * @param anchor - Optional anchor to use for the validation message.
+     *
+     * @internal
+     */
+    setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
+    /**
+     * The internal value of the input.
+     *
+     * @internal
+     */
+    private _value;
+    /**
+     * The current value of the input.
+     *
+     * @public
+     */
+    get value(): string;
+    set value(value: string);
+    /**
+     * Resets the form value to its initial value when the form is reset.
+     *
+     * @internal
+     */
+    formResetCallback(): void;
+    /**
+     * Disabled the component when its associated form is disabled.
+     *
+     * @internal
+     *
+     * @privateRemarks
+     * DO NOT change the `disabled` property or attribute here, because if the
+     * `disabled` attribute is present, reenabling an ancestor `<fieldset>`
+     * element will not reenabling this component.
+     */
+    formDisabledCallback(disabled: boolean): void;
+    /**
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
+     *
+     * @internal
+     */
+    setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
+    /**
+     * @internal
+     */
+    track: HTMLDivElement;
+    /**
+     * @internal
+     */
+    thumb: HTMLDivElement;
+    /**
+     * @internal
+     */
+    stepMultiplier: number;
+    /**
+     * @internal
+     */
+    direction: Direction;
+    /**
+     * @internal
+     */
+    isDragging: boolean;
+    /**
+     * @internal
+     */
+    position: string;
+    /**
+     * @internal
+     */
+    trackWidth: number;
+    /**
+     * @internal
+     */
+    trackMinWidth: number;
+    /**
+     * @internal
+     */
+    trackHeight: number;
+    /**
+     * @internal
+     */
+    trackLeft: number;
+    /**
+     * @internal
+     */
+    trackMinHeight: number;
+    /**
+     * The value property, typed as a number.
+     *
+     * @public
+     */
+    get valueAsNumber(): number;
+    set valueAsNumber(next: number);
+    /**
+     * Custom function that generates a string for the component's "ariaValueText" on element internals based on the current value.
+     *
+     * @public
+     */
+    valueTextFormatter: (value: string) => string;
+    protected valueTextFormatterChanged(): void;
+    /**
+     * The element's disabled state.
+     * @public
+     * @remarks
+     * HTML Attribute: `disabled`
+     */
+    disabled: boolean;
+    protected disabledChanged(): void;
+    /**
+     * The minimum allowed value.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: min
+     */
+    min: string;
+    protected minChanged(): void;
+    /**
+     * Returns the min property or the default value
+     *
+     * @internal
+     */
+    private get minAsNumber();
+    /**
+     * The maximum allowed value.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: max
+     */
+    max: string;
+    protected maxChanged(): void;
+    /**
+     * Returns the max property or the default value
+     *
+     * @internal
+     */
+    private get maxAsNumber();
+    /**
+     * Value to increment or decrement via arrow keys, mouse click or drag.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: step
+     */
+    step: string;
+    protected stepChanged(): void;
+    /**
+     * Returns the step property as a number.
+     *
+     * @internal
+     */
+    private get stepAsNumber();
+    /**
+     * The orientation of the slider.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: orientation
+     *
+     * @privateRemarks
+     * When checking the value of `this.orientation`, always compare it to
+     * `Orientation.vertical`, never to `Orientation.horizontal`, it’s because
+     * this property is optional, so it could be `undefined`. So any
+     * orientation-related behavior should consider horizontal as default, and
+     * apply different behavior when it’s vertical.
+     */
+    orientation?: Orientation;
+    protected orientationChanged(prev: string | undefined, next: string | undefined): void;
+    /**
+     * The selection mode.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: mode
+     */
+    mode: SliderMode;
+    constructor();
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    disconnectedCallback(): void;
+    /**
+     * Increment the value by the step
+     *
+     * @public
+     */
+    increment(): void;
+    /**
+     * Decrement the value by the step
+     *
+     * @public
+     */
+    decrement(): void;
+    keypressHandler: (event: KeyboardEvent) => void;
+    /**
+     * Places the thumb based on the current value
+     *
+     * @param direction - writing mode
+     */
+    private setSliderPosition;
+    /**
+     * Update the step multiplier used to ensure rounding errors from steps that
+     * are not whole numbers
+     */
+    private updateStepMultiplier;
+    private setupTrackConstraints;
+    private setupListeners;
+    private get midpoint();
+    private setupDefaultValue;
+    /**
+     *  Handle mouse moves during a thumb drag operation
+     *  If the event handler is null it removes the events
+     */
+    handleThumbPointerDown: (event: PointerEvent | null) => void;
+    /**
+     *  Handle mouse moves during a thumb drag operation
+     */
+    private handlePointerMove;
+    /**
+     * Calculate the new value based on the given raw pixel value.
+     *
+     * @param rawValue - the value to be converted to a constrained value
+     * @returns the constrained value
+     *
+     * @internal
+     */
+    calculateNewValue(rawValue: number): number;
+    /**
+     * Handle a window mouse up during a drag operation
+     */
+    private handleWindowPointerUp;
+    private stopDragging;
+    /**
+     *
+     * @param event - PointerEvent or null. If there is no event handler it will remove the events
+     */
+    handlePointerDown: (event: PointerEvent | null) => void;
+    private convertToConstrainedValue;
+    /**
+     * Makes sure the side effects of set up when the disabled state changes.
+     */
+    private setDisabledSideEffect;
 }

package/dist/dts/slider/slider.form-associated.d.ts

@@ -0,0 +1,14 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { FormAssociated } from '../form-associated/form-associated.js';
+declare class _Slider extends FASTElement {
+}
+interface _Slider extends FormAssociated {
+}
+declare const FormAssociatedSlider_base: typeof _Slider;
+/**
+ * @beta
+ */
+export declare class FormAssociatedSlider extends FormAssociatedSlider_base {
+    proxy: HTMLInputElement;
+}
+export {};

package/dist/dts/slider/slider.options.d.ts

@@ -1,5 +1,6 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
-export { SliderOrientation } from '@microsoft/fast-foundation/slider.js';
+import type { Direction } from '@microsoft/fast-web-utilities';
+import type { StaticallyComposableHTML, ValuesOf } from '../utils/index.js';
+import type { Slider } from './slider.js';
 /**
  * SliderSize Constants
  * @public
@@ -12,4 +13,44 @@ export declare const SliderSize: {
  * Applies bar height to the slider rail and diameter to the slider thumbs
  * @public
  */
-export declare type SliderSize = ValuesOf<typeof SliderSize>;
+export type SliderSize = ValuesOf<typeof SliderSize>;
+/**
+ * @public
+ */
+export declare const SliderOrientation: {
+    readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
+};
+/**
+ * The types for the orientation of the slider
+ * @public
+ */
+export type SliderOrientation = ValuesOf<typeof SliderOrientation>;
+/**
+ * @public
+ */
+export declare const SliderMode: {
+    readonly singleValue: "single-value";
+};
+/**
+ * The types for the selection mode of the slider
+ * @public
+ */
+export type SliderMode = ValuesOf<typeof SliderMode>;
+/**
+ * @public
+ */
+export interface SliderConfiguration {
+    max?: string;
+    min?: string;
+    orientation?: SliderOrientation;
+    direction?: Direction;
+    disabled?: boolean;
+}
+/**
+ * Slider configuration options
+ * @public
+ */
+export type SliderOptions = {
+    thumb?: StaticallyComposableHTML<Slider>;
+};

package/dist/dts/slider/slider.template.d.ts

@@ -1,3 +1,5 @@
 import type { ElementViewTemplate } from '@microsoft/fast-element';
-import { FASTSlider } from '@microsoft/fast-foundation/slider.js';
-export declare const template: ElementViewTemplate<FASTSlider>;
+import type { SliderOptions } from './slider.options.js';
+import type { Slider } from './slider.js';
+export declare function sliderTemplate<T extends Slider>(options?: SliderOptions): ElementViewTemplate<T>;
+export declare const template: ElementViewTemplate<Slider>;

package/dist/dts/spinner/index.d.ts

@@ -1,5 +1,5 @@
-export * from './spinner.js';
-export * from './spinner.options.js';
+export { BaseSpinner, Spinner } from './spinner.js';
+export { SpinnerAppearance, SpinnerSize } from './spinner.options.js';
 export { template as SpinnerTemplate } from './spinner.template.js';
 export { styles as SpinnerStyles } from './spinner.styles.js';
 export { definition as SpinnerDefinition } from './spinner.definition.js';

package/dist/dts/spinner/spinner.bench.d.ts

@@ -0,0 +1,3 @@
+declare const itemRenderer: () => HTMLElement;
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';