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

package/dist/esm/utils/converters.js

@@ -0,0 +1,26 @@
+/**
+ * A {@link ValueConverter} that makes sure the attribute and property values
+ * are a string representation of a number, e.g. `'10'` instead of `10`.
+ *
+ * @remarks
+ * This converter allows any data type, but if the data is evaluated as `NaN`
+ * by `Number.isNaN()`, it’d be converted to an empty string. Otherwise, the
+ * converted value is a string of number.
+ *
+ * It is useful for somm  custom element’s attributes and properties, e.g.
+ * `min`, `max`, `step` on an `<input type=range>`-like element, to align with
+ * the built-in HTML element behavior, those property values should be strings.
+ *
+ * @public
+ */
+export const numberLikeStringConverter = {
+    fromView(value) {
+        const valueAsNumber = parseFloat(value);
+        return Number.isNaN(valueAsNumber) ? '' : valueAsNumber.toString();
+    },
+    toView(value) {
+        const valueAsNumber = parseFloat(value);
+        return Number.isNaN(valueAsNumber) ? undefined : valueAsNumber.toString();
+    },
+};
+//# sourceMappingURL=converters.js.map

package/dist/esm/utils/converters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"converters.js","sourceRoot":"","sources":["../../../src/utils/converters.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAmB;IACvD,QAAQ,CAAC,KAAa;QACpB,MAAM,aAAa,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;QACxC,OAAO,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,EAAE,CAAC;IACrE,CAAC;IACD,MAAM,CAAC,KAAU;QACf,MAAM,aAAa,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;QACxC,OAAO,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,EAAE,CAAC;IAC5E,CAAC;CACF,CAAC"}

package/dist/esm/utils/index.js

@@ -1,3 +1,4 @@
+export * from './converters.js';
 export * from './direction.js';
 export * from './typings.js';
 export * from './template-helpers.js';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,gDAAgD,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,gDAAgD,CAAC"}

package/dist/web-components.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="web" />
 
-import type { Constructable } from '@microsoft/fast-element';
 import { CSSDirective } from '@microsoft/fast-element';
 import { Direction } from '@microsoft/fast-web-utilities';
 import { ElementStyles } from '@microsoft/fast-element';
@@ -4142,13 +4141,6 @@ export declare const CompoundButtonStyles: ElementStyles;
  */
 export declare const CompoundButtonTemplate: ElementViewTemplate<CompoundButton>;
 
-/**
- * Combined type to describe a Constructable Form-Associated type.
- *
- * @beta
- */
-declare type ConstructableFormAssociated = Constructable<HTMLElement & FASTElement>;
-
 /**
  * The base class used for constructing a fluent-badge custom element
  * @public
@@ -5237,57 +5229,6 @@ export declare const fontWeightSemibold = "var(--fontWeightSemibold)";
  */
 export declare const forcedColorsStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
 
-/**
- * Base function for providing Custom Element Form Association.
- *
- * @beta
- */
-declare function FormAssociated<T extends ConstructableFormAssociated>(BaseCtor: T): T;
-
-/**
- * Base class for providing Custom Element Form Association.
- *
- * @beta
- */
-declare interface FormAssociated extends Omit<ElementInternals, 'labels'> {
-    dirtyValue: boolean;
-    disabled: boolean;
-    readonly elementInternals: ElementInternals | null;
-    readonly formAssociated: boolean;
-    initialValue: string;
-    readonly labels: ReadonlyArray<Node[]>;
-    name: string;
-    required: boolean;
-    value: string;
-    currentValue: string;
-    attachProxy(): void;
-    detachProxy(): void;
-    disabledChanged?(previous: boolean, next: boolean): void;
-    formDisabledCallback?(disabled: boolean): void;
-    formResetCallback(): void;
-    initialValueChanged?(previous: string, next: string): void;
-    nameChanged?(previous: string, next: string): void;
-    requiredChanged(prev: boolean, next: boolean): void;
-    stopPropagation(e: Event): void;
-    /**
-     * Sets the validity of the custom element. By default this uses the proxy element to determine
-     * validity, but this can be extended or replaced in implementation.
-     *
-     * @param anchor - The anchor element to provide to ElementInternals.setValidity for surfacing the browser's constraint validation UI
-     */
-    validate(anchor?: HTMLElement): void;
-    valueChanged(previous: string, next: string): void;
-}
-
-/**
- * @beta
- */
-declare class FormAssociatedSlider extends FormAssociatedSlider_base {
-    proxy: HTMLInputElement;
-}
-
-declare const FormAssociatedSlider_base: typeof _Slider;
-
 /**
  * Determines the current localization direction of an element.
  *
@@ -7174,9 +7115,34 @@ export declare const shadow8Brand = "var(--shadow8Brand)";
 
 /**
  * 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.
+ * @fire change - Fires a custom 'change' event when the value changes.
+ *
  * @public
  */
-export declare class Slider extends FormAssociatedSlider implements SliderConfiguration {
+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
@@ -7184,7 +7150,8 @@ export declare class Slider extends FormAssociatedSlider implements SliderConfig
      * HTML Attribute: size
      */
     size?: SliderSize;
-    handleChange(source: any, propertyName: string): 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
@@ -7192,14 +7159,110 @@ export declare class Slider extends FormAssociatedSlider implements SliderConfig
      */
     private handleStepStyles;
     /**
-     * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute} for more information.
+     * The initial value of the input.
      *
      * @public
      * @remarks
-     * HTML Attribute: readonly
+     * HTML Attribute: `value`
      */
-    readOnly: boolean;
-    protected readOnlyChanged(): void;
+    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
      */
@@ -7252,35 +7315,50 @@ export declare class Slider extends FormAssociatedSlider implements SliderConfig
     get valueAsNumber(): number;
     set valueAsNumber(next: number);
     /**
-     * Custom function that generates a string for the component's "aria-valuetext" attribute based on the current value.
+     * Custom function that generates a string for the component's "ariaValueText" on element internals based on the current value.
      *
      * @public
      */
-    valueTextFormatter: (value: string) => string | null;
+    valueTextFormatter: (value: string) => string;
+    protected valueTextFormatterChanged(): void;
     /**
-     * @internal
+     * The element's disabled state.
+     * @public
+     * @remarks
+     * HTML Attribute: `disabled`
      */
-    valueChanged(previous: string, next: string): void;
+    disabled: boolean;
+    protected disabledChanged(): void;
     /**
      * The minimum allowed value.
      *
-     * @defaultValue - 0
      * @public
      * @remarks
      * HTML Attribute: min
      */
-    min: number;
+    min: string;
     protected minChanged(): void;
+    /**
+     * Returns the min property or the default value
+     *
+     * @internal
+     */
+    private get minAsNumber();
     /**
      * The maximum allowed value.
      *
-     * @defaultValue - 10
      * @public
      * @remarks
      * HTML Attribute: max
      */
-    max: number;
+    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.
      *
@@ -7288,17 +7366,30 @@ export declare class Slider extends FormAssociatedSlider implements SliderConfig
      * @remarks
      * HTML Attribute: step
      */
-    step: number | undefined;
+    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(): void;
+    orientation?: Orientation;
+    protected orientationChanged(prev: string | undefined, next: string | undefined): void;
     /**
      * The selection mode.
      *
@@ -7307,6 +7398,7 @@ export declare class Slider extends FormAssociatedSlider implements SliderConfig
      * HTML Attribute: mode
      */
     mode: SliderMode;
+    constructor();
     /**
      * @internal
      */
@@ -7327,19 +7419,13 @@ export declare class Slider extends FormAssociatedSlider implements SliderConfig
      * @public
      */
     decrement(): void;
-    keypressHandler: (e: KeyboardEvent) => void;
-    /**
-     * Gets the actual step value for the slider
-     *
-     */
-    private get stepValue();
+    keypressHandler: (event: KeyboardEvent) => void;
     /**
      * Places the thumb based on the current value
      *
-     * @public
      * @param direction - writing mode
      */
-    private setThumbPositionForOrientation;
+    private setSliderPosition;
     /**
      * Update the step multiplier used to ensure rounding errors from steps that
      * are not whole numbers
@@ -7347,21 +7433,17 @@ export declare class Slider extends FormAssociatedSlider implements SliderConfig
     private updateStepMultiplier;
     private setupTrackConstraints;
     private setupListeners;
-    /**
-     * @internal
-     */
-    initialValue: string;
     private get midpoint();
     private setupDefaultValue;
     /**
      *  Handle mouse moves during a thumb drag operation
      *  If the event handler is null it removes the events
      */
-    handleThumbMouseDown: (event: MouseEvent | null) => void;
+    handleThumbPointerDown: (event: PointerEvent | null) => void;
     /**
      *  Handle mouse moves during a thumb drag operation
      */
-    private handleMouseMove;
+    private handlePointerMove;
     /**
      * Calculate the new value based on the given raw pixel value.
      *
@@ -7374,28 +7456,26 @@ export declare class Slider extends FormAssociatedSlider implements SliderConfig
     /**
      * Handle a window mouse up during a drag operation
      */
-    private handleWindowMouseUp;
+    private handleWindowPointerUp;
     private stopDragging;
     /**
      *
-     * @param e - MouseEvent or null. If there is no event handler it will remove the events
+     * @param event - PointerEvent or null. If there is no event handler it will remove the events
      */
-    handleMouseDown: (e: MouseEvent | null) => void;
+    handlePointerDown: (event: PointerEvent | null) => void;
     private convertToConstrainedValue;
-}
-
-declare class _Slider extends FASTElement {
-}
-
-declare interface _Slider extends FormAssociated {
+    /**
+     * Makes sure the side effects of set up when the disabled state changes.
+     */
+    private setDisabledSideEffect;
 }
 
 /**
  * @public
  */
 export declare interface SliderConfiguration {
-    max: number;
-    min: number;
+    max?: string;
+    min?: string;
     orientation?: SliderOrientation;
     direction?: Direction;
     disabled?: boolean;