@fluentui/web-components 2.5.0 → 2.5.3

package/CHANGELOG.json

@@ -2,7 +2,82 @@
   "name": "@fluentui/web-components",
   "entries": [
     {
-      "date": "Fri, 06 May 2022 07:36:21 GMT",
+      "date": "Thu, 16 Jun 2022 23:03:03 GMT",
+      "tag": "@fluentui/web-components_v2.5.3",
+      "version": "2.5.3",
+      "comments": {
+        "patch": [
+          {
+            "author": "chhol@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "5d8b70afcccb439ffb41c4442860b61212da2492",
+            "comment": "update to latest stable versions of FAST packages"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 14 Jun 2022 07:52:10 GMT",
+      "tag": "@fluentui/web-components_v2.5.2",
+      "version": "2.5.2",
+      "comments": {
+        "none": [
+          {
+            "author": "47367562+bheston@users.noreply.github.com",
+            "package": "@fluentui/web-components",
+            "commit": "71cf20976f873e7aed3abd2aa3daf953d06941f9",
+            "comment": "Fixed Storybook loading page name check"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 07 Jun 2022 07:48:04 GMT",
+      "tag": "@fluentui/web-components_v2.5.2",
+      "version": "2.5.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "47367562+bheston@users.noreply.github.com",
+            "package": "@fluentui/web-components",
+            "commit": "8949b3e8dcdb3dcb4b987fcb08ff48e549133828",
+            "comment": "(web-components) Fix issue loading Color Explorer values"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 02 Jun 2022 07:38:04 GMT",
+      "tag": "@fluentui/web-components_v2.5.1",
+      "version": "2.5.1",
+      "comments": {
+        "none": [
+          {
+            "author": "mgodbolt@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "d989caf6db389bb92221f372c8028cf7a85210b4",
+            "comment": "upgrade storybook to 6.5"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 17 May 2022 07:45:01 GMT",
+      "tag": "@fluentui/web-components_v2.5.1",
+      "version": "2.5.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "47367562+bheston@users.noreply.github.com",
+            "package": "@fluentui/web-components",
+            "commit": "d5706692da2077930b084bff166d0981c058eb7e",
+            "comment": "Added the Color Explorer as a web components Storybook page"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 06 May 2022 07:36:53 GMT",
       "tag": "@fluentui/web-components_v2.5.0",
       "version": "2.5.0",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,39 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Fri, 06 May 2022 07:36:21 GMT and should not be manually modified.
+This log was last generated on Thu, 16 Jun 2022 23:03:03 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [2.5.3](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.5.3)
+
+Thu, 16 Jun 2022 23:03:03 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.5.2..@fluentui/web-components_v2.5.3)
+
+### Patches
+
+- update to latest stable versions of FAST packages ([PR #23585](https://github.com/microsoft/fluentui/pull/23585) by chhol@microsoft.com)
+
+## [2.5.2](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.5.2)
+
+Tue, 07 Jun 2022 07:48:04 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.5.1..@fluentui/web-components_v2.5.2)
+
+### Patches
+
+- (web-components) Fix issue loading Color Explorer values ([PR #23392](https://github.com/microsoft/fluentui/pull/23392) by 47367562+bheston@users.noreply.github.com)
+
+## [2.5.1](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.5.1)
+
+Tue, 17 May 2022 07:45:01 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.5.0..@fluentui/web-components_v2.5.1)
+
+### Patches
+
+- Added the Color Explorer as a web components Storybook page ([PR #22918](https://github.com/microsoft/fluentui/pull/22918) by 47367562+bheston@users.noreply.github.com)
+
 ## [2.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.5.0)
 
-Fri, 06 May 2022 07:36:21 GMT 
+Fri, 06 May 2022 07:36:53 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.4.0..@fluentui/web-components_v2.5.0)
 
 ### Minor changes

package/dist/dts/_docs/design-system/color-explorer/app.d.ts

@@ -0,0 +1,25 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { ComponentTypes } from './component-types';
+export interface SwatchInfo {
+    index: number;
+    color: string;
+    title?: string;
+}
+export declare class App extends FASTElement {
+    canvasElement: HTMLDivElement;
+    componentType: ComponentTypes;
+    neutralColor: string;
+    private neutralColorChanged;
+    neutralPalette: string[];
+    accentColor: string;
+    private accentColorChanged;
+    accentPalette: string[];
+    showOnlyLayerBackgrounds: boolean;
+    connectedCallback(): void;
+    backgrounds(): Array<SwatchInfo>;
+    private layerRecipes;
+    private resolveLayerRecipes;
+    private get lightModeLayers();
+    private get darkModeLayers();
+    controlPaneHandler(e: CustomEvent): void;
+}

package/dist/dts/_docs/design-system/color-explorer/colors.d.ts

@@ -0,0 +1,13 @@
+export declare enum AccentColors {
+    black = "#000000",
+    white = "#FFFFFF",
+    magenta = "#DA1A5F",
+    blue = "#0078D4",
+    green = "#107C10",
+    purple = "#5C2D91",
+    orange = "#D83B01",
+    yellow = "#F2C812"
+}
+export declare const neutralColors: string[];
+export declare const defaultAccentColor: string;
+export declare const defaultNeutralColor: string;

package/dist/dts/_docs/design-system/color-explorer/component-types.d.ts

@@ -0,0 +1,6 @@
+export declare enum ComponentTypes {
+    backplate = "backplate",
+    text = "text",
+    form = "form",
+    sample = "sample"
+}

package/dist/dts/_docs/design-system/color-explorer/components/color-block.d.ts

@@ -0,0 +1,10 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { ComponentTypes } from '../component-types';
+export declare class AppColorBlock extends FASTElement {
+    index: number;
+    component: ComponentTypes;
+    color: string;
+    private colorChanged;
+    layerName?: string;
+    private updateColor;
+}

package/dist/dts/_docs/design-system/color-explorer/components/color-picker/color-picker.d.ts

@@ -0,0 +1,190 @@
+import { ColorHSV, ColorRGBA64 } from '@microsoft/fast-colors';
+import { FormAssociatedColorPicker } from './color-picker.form-associated';
+/**
+ * This is currently experimental, any use of the color picker must include the following
+ * imports and register with the DesignSystem
+ *
+ * import { fastTextField } from "@microsoft/fast-components";
+ * import { DesignSystem } from "@microsoft/fast-foundation";
+ * DesignSystem.getOrCreate().register(fastTextField());
+ */
+/**
+ * Simple class for storing all of the color picker UI observable values.
+ */
+declare class ColorPickerUI {
+    RGBColor: ColorRGBA64;
+    HSVColor: ColorHSV;
+    HueCSSColor: string;
+    HuePosition: number;
+    SatValTopPos: number;
+    SatValLeftPos: number;
+    AlphaPos: number;
+    constructor(rgbColor: ColorRGBA64, hsvColor: ColorHSV);
+}
+/**
+ * A Color Picker Custom HTML Element.
+ *
+ * @public
+ */
+export declare class ColorPicker extends FormAssociatedColorPicker {
+    /**
+     * 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.
+     * @public
+     * @remarks
+     * HTML Attribute: readonly
+     */
+    readOnly: boolean;
+    private readOnlyChanged;
+    /**
+     * Indicates that this element should get focus after the page finishes loading. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus | autofocus HTML attribute} for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: autofocus
+     */
+    autofocus: boolean;
+    private autofocusChanged;
+    /**
+     * Sets the placeholder value of the element, generally used to provide a hint to the user.
+     * @public
+     * @remarks
+     * HTML Attribute: placeholder
+     * Using this attribute does is not a valid substitute for a labeling element.
+     */
+    placeholder: string;
+    private placeholderChanged;
+    /**
+     * Flag indicating that the color UI is visible.
+     */
+    open: boolean;
+    /**
+     * Flag indicating that the color UI is activily listening for mouse move and up events.
+     */
+    mouseActive: boolean;
+    /**
+     * Object containing all of the properties displayed in the color picker UI.
+     */
+    uiValues: ColorPickerUI;
+    /**
+     * A reference to the internal input element
+     * @internal
+     */
+    control: HTMLInputElement;
+    /**
+     * A reference to the HTMLElement that is the current target of mouse move events.
+     */
+    private currentMouseTarget;
+    /**
+     * A string indicating which of the three graphical elements is the current mouse target. ['sv','h','a']
+     */
+    private currentMouseParam;
+    /**
+     * The ColorRGBA64 representation of the current color value.
+     */
+    private currentRGBColor;
+    /**
+     * The ColorHSV representation of the current color value.
+     */
+    private currentHSVColor;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * Handles the focus event. When the template has focus the color UI will be visable.
+     * @internal
+     */
+    handleFocus(): void;
+    /**
+     * Handles the blur event. Hides the color UI when the template loses focus.
+     * @internal
+     */
+    handleBlur(): void;
+    /**
+     * Handles the internal control's `input` event. This event is fired whenever a user types directly into the primary text field.
+     * @internal
+     */
+    handleTextInput(): void;
+    /**
+     * Handles the mouse down event on the Sat/Val square and Hue and Alpha sliders. Sets the current targeted element and begins listening for mouse move events.
+     * @param param ['sv','h','a'] - string specifying which color property is being modified with the mouse.
+     * @param e - A reference to the mouse event.
+     */
+    handleMouseDown(param: string, e: MouseEvent): void;
+    /**
+     * Handles the mouse move event within the color UI. Is only called once the mouseActive is set to true.
+     * @param e - Reference to the Mouse Event
+     */
+    handleMouseMove(e: MouseEvent): void;
+    /**
+     * Handles the mouse up event within the color UI. Disables listening for mouse move events.
+     * @param e - Reference to the Mouse Event
+     */
+    handleMouseUp(e: MouseEvent): void;
+    /**
+     * Handles changes to any of the color property text inputs typed by the user.
+     * @param param ['r','g','b','a','h','s','v'] - String specifying which color value is being modified.
+     * @param e - Reference to the event.
+     */
+    handleTextValueInput(param: string, e: Event): void;
+    /**
+     * Change event handler for inner control.
+     * @remarks
+     * "Change" events are not `composable` so they will not
+     * permeate the shadow DOM boundary. This fn effectively proxies
+     * the change event, emitting a `change` event whenever the internal
+     * control emits a `change` event
+     * @internal
+     */
+    handleChange(): void;
+    /**
+     * Initialize internal color values based on input value and set the UI elements
+     * to the correct positions / values.
+     */
+    private initColorValues;
+    /**
+     * Determines if a number value is within the valid range for an R, G, or B color channel.
+     * @param val - Number to be evaluated.
+     */
+    private isValidRGB;
+    /**
+     * Determines if a number value is within the valid range for the alpha channel.
+     * @param val - Number to be evaluated.
+     */
+    private isValidAlpha;
+    /**
+     * Determines if a number value is within the valid range for the saturation or value color channels.
+     * @param val - Number to be evaluated.
+     */
+    private isValidSaturationValue;
+    /**
+     * Determines if a number value is within the valid range for the hue color channel.
+     * @param val - Number to be evaluated.
+     */
+    private isValidHue;
+    /**
+     * Checks if input is a valid CSS color.
+     * After placing an invalid css color value into a color style property the value will be an empty string when read back.
+     * @internal
+     */
+    private isValideCSSColor;
+    /**
+     * Update the current color values to a new HSV color.
+     * @param hue The new Hue value.
+     * @param sat The new saturation value.
+     * @param val The new Value value.
+     */
+    private updateHSV;
+    /**
+     * Update the current color values based on the mouse position over one of the three UI elements (hue, saturation/value, or alpha).
+     * @param pageX The pageX position of the mouse.
+     * @param pageY The pageY position of the mouse.
+     */
+    private updateFromMouseEvent;
+    /**
+     * Update the UI values with the current color. This updates the position of the indicators over the Sat/Val, Hue and Alpha elements
+     * and the values in all of the text fields at once.
+     * @param updateValue - Flag to trigger updating of the main text field value and emitting the change event.
+     */
+    private updateUIValues;
+}
+export {};

package/dist/dts/_docs/design-system/color-explorer/components/color-picker/color-picker.form-associated.d.ts

@@ -0,0 +1,15 @@
+import { FormAssociated, FoundationElement } from '@microsoft/fast-foundation';
+declare class _ColorPicker extends FoundationElement {
+}
+interface _ColorPicker extends FormAssociated {
+}
+declare const FormAssociatedColorPicker_base: typeof _ColorPicker;
+/**
+ * A form-associated base class for the component.
+ *
+ * @internal
+ */
+export declare class FormAssociatedColorPicker extends FormAssociatedColorPicker_base {
+    proxy: HTMLInputElement;
+}
+export {};

package/dist/dts/_docs/design-system/color-explorer/components/color-picker/color-picker.styles.d.ts

@@ -0,0 +1,3 @@
+import { ElementStyles } from "@microsoft/fast-element";
+import { ElementDefinitionContext, FoundationElementDefinition } from "@microsoft/fast-foundation";
+export declare const colorPickerStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;

package/dist/dts/_docs/design-system/color-explorer/components/color-picker/color-picker.template.d.ts

@@ -0,0 +1,8 @@
+import { ViewTemplate } from '@microsoft/fast-element';
+import { ElementDefinitionContext } from '@microsoft/fast-foundation';
+import { ColorPicker } from './color-picker';
+/**
+ * The template for the color picker component.
+ * @public
+ */
+export declare const colorPickerTemplate: (context: ElementDefinitionContext) => ViewTemplate<ColorPicker>;

package/dist/dts/_docs/design-system/color-explorer/components/color-picker/index.d.ts

@@ -0,0 +1,9 @@
+import { ColorPicker } from './color-picker';
+/**
+ * A web component used for updating color values.
+ *
+ * @alpha
+ * @remarks
+ * HTML Element: \<color-picker\>
+ */
+export declare const fastToolingColorPicker: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof ColorPicker>;

package/dist/dts/_docs/design-system/color-explorer/components/control-pane/control-pane.d.ts

@@ -0,0 +1,8 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+export declare class ControlPane extends FoundationElement {
+    componentType: string;
+    accentColor: string;
+    neutralColor: string;
+    showOnlyLayerBackgrounds: boolean;
+    updateFormValue(field: string, value: any): void;
+}

package/dist/dts/_docs/design-system/color-explorer/components/control-pane/control-pane.styles.d.ts

@@ -0,0 +1 @@
+export declare const controlPaneStyles: import("@microsoft/fast-element").ElementStyles;

package/dist/dts/_docs/design-system/color-explorer/components/control-pane/control-pane.template.d.ts

@@ -0,0 +1,2 @@
+import { ControlPane } from './control-pane';
+export declare const controlPaneTemplate: import("@microsoft/fast-element").ViewTemplate<ControlPane, any>;

package/dist/dts/_docs/design-system/color-explorer/components/control-pane/index.d.ts

@@ -0,0 +1,6 @@
+import { ControlPane } from './control-pane';
+export declare class AppControlPane extends ControlPane {
+}
+export * from './control-pane.template';
+export * from './control-pane.styles';
+export * from './control-pane';

package/dist/dts/_docs/design-system/color-explorer/components/gradient/gradient.d.ts

@@ -0,0 +1,5 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+export declare class Gradient extends FoundationElement {
+    colors: string[];
+    markedColor: string;
+}

package/dist/dts/_docs/design-system/color-explorer/components/gradient/gradient.styles.d.ts

@@ -0,0 +1 @@
+export declare const gradientStyles: import("@microsoft/fast-element").ElementStyles;

package/dist/dts/_docs/design-system/color-explorer/components/gradient/gradient.template.d.ts

@@ -0,0 +1,2 @@
+import { Gradient } from './gradient';
+export declare const gradientTemplate: import("@microsoft/fast-element").ViewTemplate<Gradient, any>;

package/dist/dts/_docs/design-system/color-explorer/components/gradient/index.d.ts

@@ -0,0 +1,6 @@
+import { Gradient } from './gradient';
+export declare class AppGradient extends Gradient {
+}
+export * from './gradient.template';
+export * from './gradient.styles';
+export * from './gradient';

package/dist/dts/_docs/design-system/color-explorer/components/layer-background/index.d.ts

@@ -0,0 +1,21 @@
+import { DesignToken, DesignTokenChangeRecord, FoundationElement } from '@microsoft/fast-foundation';
+export declare class LayerBackground extends FoundationElement {
+    baseLayerLuminance: number;
+    private baseLayerLuminanceChanged;
+    backgroundLayerRecipe: string;
+    private backgroundLayerRecipeChanged;
+    private updateBackgroundColor;
+    handleChange(record: DesignTokenChangeRecord<DesignToken<any>>): void;
+    connectedCallback(): void;
+}
+export declare const layerBackgroundTemplate: import("@microsoft/fast-element").ViewTemplate<any, any>;
+export declare const layerBackgroundStyles: import("@microsoft/fast-element").ElementStyles;
+export declare const layerBackground: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
+    baseName: string;
+    template: import("@microsoft/fast-element").ViewTemplate<any, any>;
+    styles: import("@microsoft/fast-element").ElementStyles;
+}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
+    baseName: string;
+    template: import("@microsoft/fast-element").ViewTemplate<any, any>;
+    styles: import("@microsoft/fast-element").ElementStyles;
+}, typeof LayerBackground>;

package/dist/dts/_docs/design-system/color-explorer/components/sample-app/index.d.ts

@@ -0,0 +1,6 @@
+import { SampleApp } from './sample-app';
+export declare class AppSampleApp extends SampleApp {
+}
+export * from './sample-app.template';
+export * from './sample-app.styles';
+export * from './sample-app';

package/dist/dts/_docs/design-system/color-explorer/components/sample-app/sample-app.d.ts

@@ -0,0 +1,3 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+export declare class SampleApp extends FoundationElement {
+}

package/dist/dts/_docs/design-system/color-explorer/components/sample-app/sample-app.styles.d.ts

@@ -0,0 +1 @@
+export declare const sampleAppStyles: import("@microsoft/fast-element").ElementStyles;

package/dist/dts/_docs/design-system/color-explorer/components/sample-app/sample-app.template.d.ts

@@ -0,0 +1 @@
+export declare const sampleAppTemplate: import("@microsoft/fast-element").ViewTemplate<any, any>;

package/dist/dts/_docs/design-system/color-explorer/components/sample-page/index.d.ts

@@ -0,0 +1,6 @@
+import { SamplePage } from './sample-page';
+export declare class AppSamplePage extends SamplePage {
+}
+export * from './sample-page.template';
+export * from './sample-page.styles';
+export * from './sample-page';

package/dist/dts/_docs/design-system/color-explorer/components/sample-page/sample-page.d.ts

@@ -0,0 +1,3 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+export declare class SamplePage extends FoundationElement {
+}

package/dist/dts/_docs/design-system/color-explorer/components/sample-page/sample-page.styles.d.ts

@@ -0,0 +1 @@
+export declare const samplePageStyles: import("@microsoft/fast-element").ElementStyles;

package/dist/dts/_docs/design-system/color-explorer/components/sample-page/sample-page.template.d.ts

@@ -0,0 +1 @@
+export declare const samplePageTemplate: import("@microsoft/fast-element").ViewTemplate<any, any>;

package/dist/dts/_docs/design-system/color-explorer/components/swatch.d.ts

@@ -0,0 +1,30 @@
+import { DesignToken, FoundationElement } from '@microsoft/fast-foundation';
+import { Swatch } from '../../../../index-rollup';
+export declare enum SwatchTypes {
+    fill = "fill",
+    foreground = "foreground",
+    outline = "outline"
+}
+export declare class AppSwatch extends FoundationElement {
+    type: SwatchTypes;
+    recipeName: string;
+    foregroundRecipe?: DesignToken<Swatch>;
+    foregroundRecipeChanged(): void;
+    fillRecipe?: DesignToken<Swatch>;
+    fillRecipeChanged(): void;
+    outlineRecipe?: DesignToken<Swatch>;
+    outlineRecipeChanged(): void;
+    iconStyle: string;
+    contrastMessage: string;
+    colorValue: string;
+    connectedCallback(): void;
+    private updateObservables;
+    private tokenCSS;
+    private evaluateToken;
+    private updateIconStyle;
+    private formatContrast;
+    private formatBackgroundContrast;
+    private formatForegroundContrast;
+    private updateContrastMessage;
+    private updateColorValue;
+}

package/dist/dts/_docs/design-system/color-explorer/custom-elements.d.ts

@@ -0,0 +1,7 @@
+import { layerBackground } from './components/layer-background';
+export { layerBackground };
+export declare const appComponents: import("@microsoft/fast-foundation").FoundationElementRegistry<{
+    baseName: string;
+    template: import("@microsoft/fast-element").ViewTemplate<any, any>;
+    styles: import("@microsoft/fast-element").ElementStyles;
+}, typeof import("./components/layer-background").LayerBackground>[];

package/dist/dts/_docs/design-system/color-explorer/index.d.ts

@@ -0,0 +1,2 @@
+export declare function init(): void;
+export { App } from './app';