@fluentui/web-components 3.0.0-alpha.11 → 3.0.0-alpha.13

package/CHANGELOG.json

@@ -2,7 +2,43 @@
   "name": "@fluentui/web-components",
   "entries": [
     {
-      "date": "Tue, 14 Mar 2023 04:21:16 GMT",
+      "date": "Fri, 31 Mar 2023 04:19:36 GMT",
+      "tag": "@fluentui/web-components_v3.0.0-alpha.13",
+      "version": "3.0.0-alpha.13",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "chhol@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "7f5a5e507a3902a9703d5198a13cc96335c82eaa",
+            "comment": "update fast-element and fast-foundation dependencies"
+          },
+          {
+            "author": "chhol@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "d901fa95e8f90c1b5dabda8602a72ecb77288f0c",
+            "comment": "feat(button): add button web component"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 28 Mar 2023 04:20:01 GMT",
+      "tag": "@fluentui/web-components_v3.0.0-alpha.12",
+      "version": "3.0.0-alpha.12",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "ryan@ryanmerrill.net",
+            "package": "@fluentui/web-components",
+            "commit": "d63779409cf8b7565b415fdac51e09cf4dbc6e08",
+            "comment": "Adds Slider as a web component"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 14 Mar 2023 04:21:22 GMT",
       "tag": "@fluentui/web-components_v3.0.0-alpha.11",
       "version": "3.0.0-alpha.11",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,31 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Tue, 14 Mar 2023 04:21:16 GMT and should not be manually modified.
+This log was last generated on Fri, 31 Mar 2023 04:19:36 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0-alpha.13](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.13)
+
+Fri, 31 Mar 2023 04:19:36 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.12..@fluentui/web-components_v3.0.0-alpha.13)
+
+### Changes
+
+- update fast-element and fast-foundation dependencies ([PR #27392](https://github.com/microsoft/fluentui/pull/27392) by chhol@microsoft.com)
+- feat(button): add button web component ([PR #27278](https://github.com/microsoft/fluentui/pull/27278) by chhol@microsoft.com)
+
+## [3.0.0-alpha.12](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.12)
+
+Tue, 28 Mar 2023 04:20:01 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.11..@fluentui/web-components_v3.0.0-alpha.12)
+
+### Changes
+
+- Adds Slider as a web component ([PR #27165](https://github.com/microsoft/fluentui/pull/27165) by ryan@ryanmerrill.net)
+
 ## [3.0.0-alpha.11](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.11)
 
-Tue, 14 Mar 2023 04:21:16 GMT 
+Tue, 14 Mar 2023 04:21:22 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.10..@fluentui/web-components_v3.0.0-alpha.11)
 
 ### Changes

package/dist/dts/button/button.d.ts

@@ -0,0 +1,55 @@
+import { FASTButton } from '@microsoft/fast-foundation';
+import { ButtonAppearance, ButtonShape, ButtonSize } from './button.options.js';
+/**
+ * The base class used for constructing a fluent-button custom element
+ * @public
+ */
+export declare class Button extends FASTButton {
+    /**
+     * The appearance the button should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance?: ButtonAppearance | undefined;
+    /**
+     * The shape the button should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: shape
+     */
+    shape?: ButtonShape | undefined;
+    /**
+     * The size the button should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: size
+     */
+    size?: ButtonSize;
+    /**
+     * The button has an icon only, no text content
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: icon-only
+     */
+    iconOnly: boolean;
+    /**
+     * The button is disabled but focusable
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: disabled-focusable
+     */
+    disabledFocusable?: boolean;
+    protected disabledFocusableChanged(prev: boolean, next: boolean): void;
+    /**
+     * Prevents disabledFocusable click events
+     */
+    private handleDisabledFocusableClick;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}

package/dist/dts/button/button.definition.d.ts

@@ -0,0 +1,10 @@
+import { Button } from './button.js';
+/**
+ * The Fluent Button Element. Implements {@link @microsoft/fast-foundation#Button },
+ * {@link @microsoft/fast-foundation#buttonTemplate}
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-button\>
+ */
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof Button>;

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

@@ -0,0 +1,46 @@
+import { ButtonOptions, ValuesOf } from '@microsoft/fast-foundation';
+/**
+ * ButtonAppearance constants
+ * @public
+ */
+export declare const ButtonAppearance: {
+    readonly primary: "primary";
+    readonly outline: "outline";
+    readonly subtle: "subtle";
+    readonly secondary: "secondary";
+    readonly transparent: "transparent";
+};
+/**
+ * A Button can be secondary, primary, outline, subtle, transparent
+ * @public
+ */
+export declare type ButtonAppearance = ValuesOf<typeof ButtonAppearance>;
+/**
+ * A Button can be square, circular or rounded.
+ * @public
+ */
+export declare const ButtonShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+/**
+ * A Button can be square, circular or rounded
+ * @public
+ */
+export declare type ButtonShape = ValuesOf<typeof ButtonShape>;
+/**
+ * A Button can be a size of small, medium or large.
+ * @public
+ */
+export declare const ButtonSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+/**
+ * A Button can be on of several preset sizes.
+ * @public
+ */
+export declare type ButtonSize = ValuesOf<typeof ButtonSize>;
+export { ButtonOptions };

package/dist/dts/button/button.styles.d.ts

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

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

@@ -0,0 +1,7 @@
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import type { Button } from './button.js';
+/**
+ * The template for the Button component.
+ * @public
+ */
+export declare const template: ElementViewTemplate<Button>;

package/dist/dts/button/define.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,5 @@
+export * from './button.js';
+export * from './button.options.js';
+export { template as ButtonTemplate } from './button.template.js';
+export { styles as ButtonStyles } from './button.styles.js';
+export { definition as ButtonDefinition } from './button.definition.js';

package/dist/dts/index.d.ts

@@ -2,10 +2,12 @@ export * from './accordion/index.js';
 export * from './accordion-item/index.js';
 export * from './avatar/index.js';
 export * from './badge/index.js';
+export * from './button/index.js';
 export * from './counter-badge/index.js';
 export * from './divider/index.js';
 export * from './image/index.js';
 export * from './progress-bar/index.js';
+export * from './slider/index.js';
 export * from './spinner/index.js';
 export * from './switch/index.js';
 export * from './text/index.js';

package/dist/dts/progress-bar/progress-bar.styles.d.ts

@@ -1,4 +1,4 @@
-/** Text styles
+/** ProgressBar styles
  * @public
  */
 export declare const styles: import("@microsoft/fast-element").ElementStyles;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,5 @@
+export * from './slider.js';
+export * from './slider.options.js';
+export { definition as SliderDefinition } from './slider.definition.js';
+export { styles as SliderStyles } from './slider.styles.js';
+export { template as SliderTemplate } from './slider.template.js';

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

@@ -0,0 +1,24 @@
+import { FASTSlider } from '@microsoft/fast-foundation';
+import type { SliderSize } from './slider.options.js';
+/**
+ * The base class used for constructing a fluent-slider custom element
+ * @public
+ */
+export declare class Slider extends FASTSlider {
+    /**
+     * The size of the slider
+     * @public
+     * @remarks
+     * HTML Attribute: size
+     */
+    size?: SliderSize;
+    handleChange(source: any, propertyName: string): void;
+    connectedCallback(): void;
+    disconnectedCallback(): 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;
+}

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

@@ -0,0 +1,10 @@
+import { Slider } from './slider.js';
+/**
+ * The Fluent Slider Element.
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-slider\>
+ */
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof Slider>;

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

@@ -0,0 +1,15 @@
+import { ValuesOf } from '@microsoft/fast-foundation';
+export { SliderOrientation } from '@microsoft/fast-foundation';
+/**
+ * SliderSize Constants
+ * @public
+ */
+export declare const SliderSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+};
+/**
+ * Applies bar height to the slider rail and diameter to the slider thumbs
+ * @public
+ */
+export declare type SliderSize = ValuesOf<typeof SliderSize>;

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

@@ -0,0 +1,4 @@
+/** Text styles
+ * @public
+ */
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

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

@@ -0,0 +1,3 @@
+import type { ElementViewTemplate } from '@microsoft/fast-element';
+import { FASTSlider } from '@microsoft/fast-foundation';
+export declare const template: ElementViewTemplate<FASTSlider>;

package/dist/esm/button/button.definition.js

@@ -0,0 +1,21 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { Button } from './button.js';
+import { styles } from './button.styles.js';
+import { template } from './button.template.js';
+/**
+ * The Fluent Button Element. Implements {@link @microsoft/fast-foundation#Button },
+ * {@link @microsoft/fast-foundation#buttonTemplate}
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-button\>
+ */
+export const definition = Button.compose({
+    name: `${FluentDesignSystem.prefix}-button`,
+    template,
+    styles,
+    shadowOptions: {
+        delegatesFocus: true,
+    },
+});
+//# sourceMappingURL=button.definition.js.map

package/dist/esm/button/button.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.definition.js","sourceRoot":"","sources":["../../../src/button/button.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC;IACvC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,SAAS;IAC3C,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;KACrB;CACF,CAAC,CAAC"}

package/dist/esm/button/button.js

@@ -0,0 +1,72 @@
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
+import { FASTButton } from '@microsoft/fast-foundation';
+/**
+ * The base class used for constructing a fluent-button custom element
+ * @public
+ */
+export class Button extends FASTButton {
+    constructor() {
+        super(...arguments);
+        /**
+         * The button has an icon only, no text content
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: icon-only
+         */
+        this.iconOnly = false;
+        /**
+         * The button is disabled but focusable
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: disabled-focusable
+         */
+        this.disabledFocusable = false;
+        /**
+         * Prevents disabledFocusable click events
+         */
+        this.handleDisabledFocusableClick = (e) => {
+            if (e && this.disabledFocusable) {
+                e.stopImmediatePropagation();
+                return;
+            }
+        };
+    }
+    disabledFocusableChanged(prev, next) {
+        if (!this.$fastController.isConnected) {
+            return;
+        }
+        if (this.disabledFocusable) {
+            this.setAttribute('aria-disabled', 'true');
+        }
+        else {
+            this.removeAttribute('aria-disabled');
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this.handleDisabledFocusableClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', this.handleDisabledFocusableClick);
+    }
+}
+__decorate([
+    attr
+], Button.prototype, "appearance", void 0);
+__decorate([
+    attr
+], Button.prototype, "shape", void 0);
+__decorate([
+    attr
+], Button.prototype, "size", void 0);
+__decorate([
+    attr({ attribute: 'icon-only', mode: 'boolean' })
+], Button.prototype, "iconOnly", void 0);
+__decorate([
+    attr({ attribute: 'disabled-focusable', mode: 'boolean' })
+], Button.prototype, "disabledFocusable", void 0);
+//# sourceMappingURL=button.js.map

package/dist/esm/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/button/button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAGxD;;;GAGG;AACH,MAAM,OAAO,MAAO,SAAQ,UAAU;IAAtC;;QA+BE;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;QAEjC;;;;;;WAMG;QAEI,sBAAiB,GAAa,KAAK,CAAC;QAa3C;;WAEG;QACK,iCAA4B,GAAG,CAAC,CAAa,EAAQ,EAAE;YAC7D,IAAI,CAAC,IAAI,IAAI,CAAC,iBAAiB,EAAE;gBAC/B,CAAC,CAAC,wBAAwB,EAAE,CAAC;gBAC7B,OAAO;aACR;QACH,CAAC,CAAC;IAaJ,CAAC;IAjCW,wBAAwB,CAAC,IAAa,EAAE,IAAa;QAC7D,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE;YACrC,OAAO;SACR;QAED,IAAI,IAAI,CAAC,iBAAiB,EAAE;YACxB,IAAgC,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;SAC1E;aAAM;YACH,IAAgC,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;SACrE;IACH,CAAC;IAYM,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAExB,IAAgC,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,4BAA4B,CAAC,CAAC;IAClG,CAAC;IAEM,oBAAoB;QACzB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE3B,IAAgC,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,4BAA4B,CAAC,CAAC;IACrG,CAAC;CACF;AA1EC;IADC,IAAI;0CAC4C;AAUjD;IADC,IAAI;qCACkC;AAUvC;IADC,IAAI;oCACoB;AAUzB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;wCACjB;AAUjC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,oBAAoB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;iDAChB"}

package/dist/esm/button/button.options.js

@@ -0,0 +1,30 @@
+/**
+ * ButtonAppearance constants
+ * @public
+ */
+export const ButtonAppearance = {
+    primary: 'primary',
+    outline: 'outline',
+    subtle: 'subtle',
+    secondary: 'secondary',
+    transparent: 'transparent',
+};
+/**
+ * A Button can be square, circular or rounded.
+ * @public
+ */
+export const ButtonShape = {
+    circular: 'circular',
+    rounded: 'rounded',
+    square: 'square',
+};
+/**
+ * A Button can be a size of small, medium or large.
+ * @public
+ */
+export const ButtonSize = {
+    small: 'small',
+    medium: 'medium',
+    large: 'large',
+};
+//# sourceMappingURL=button.options.js.map

package/dist/esm/button/button.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.options.js","sourceRoot":"","sources":["../../../src/button/button.options.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;IAChB,SAAS,EAAE,WAAW;IACtB,WAAW,EAAE,aAAa;CAClB,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACR,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC"}