@fluentui/web-components 3.0.0-alpha.9 → 3.0.0-beta.2

package/dist/esm/toggle-button/toggle-button.js

@@ -0,0 +1,107 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { attr, observable } from '@microsoft/fast-element';
+import { Button } from '../button/button.js';
+/**
+ * The base class used for constructing a fluent-toggle-button custom element
+ * @public
+ */
+export class ToggleButton extends Button {
+    constructor() {
+        super();
+        /**
+         * Tracks whether the "checked" property has been changed.
+         * This is necessary to provide consistent behavior with
+         * normal input checkboxes
+         */
+        this.dirtyChecked = false;
+        /**
+         * Provides the default checkedness of the input element
+         * Passed down to proxy
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: checked
+         */
+        this.checkedAttribute = false;
+        this.defaultChecked = false;
+        /**
+         * The checked state of the control.
+         *
+         * @public
+         */
+        this.checked = false;
+        /**
+         * The current checkedness of the element. This property serves as a mechanism
+         * to set the `checked` property through both property assignment and the
+         * .setAttribute() method. This is useful for setting the field's checkedness
+         * in UI libraries that bind data through the .setAttribute() API
+         * and don't support IDL attribute binding.
+         */
+        this.currentChecked = false;
+        /**
+         * @internal
+         */
+        this.handleToggleButtonClick = (e) => {
+            if (!this.disabled && !this.disabledFocusable) {
+                this.checked = !this.checked;
+            }
+        };
+        // Re-initialize dirtyChecked because initialization of other values
+        // causes it to become true
+        this.dirtyChecked = false;
+    }
+    checkedAttributeChanged() {
+        this.defaultChecked = this.checkedAttribute;
+    }
+    defaultCheckedChanged() {
+        if (!this.dirtyChecked) {
+            // Setting this.checked will cause us to enter a dirty state,
+            // but if we are clean when defaultChecked is changed, we want to stay
+            // in a clean state, so reset this.dirtyChecked
+            this.checked = this.defaultChecked;
+            this.dirtyChecked = false;
+        }
+    }
+    checkedChanged(prev, next) {
+        if (!this.$fastController.isConnected) {
+            return;
+        }
+        if (!this.dirtyChecked) {
+            this.dirtyChecked = true;
+        }
+        this.currentChecked = this.checked;
+        this.setAttribute('aria-pressed', `${this.currentChecked}`);
+        if (prev !== undefined) {
+            this.$emit('change');
+        }
+    }
+    currentCheckedChanged(prev, next) {
+        this.checked = this.currentChecked;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this.handleToggleButtonClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', this.handleToggleButtonClick);
+    }
+}
+__decorate([
+    attr({ attribute: 'checked', mode: 'boolean' })
+], ToggleButton.prototype, "checkedAttribute", void 0);
+__decorate([
+    observable
+], ToggleButton.prototype, "defaultChecked", void 0);
+__decorate([
+    observable
+], ToggleButton.prototype, "checked", void 0);
+__decorate([
+    attr({ attribute: 'current-checked', mode: 'boolean' })
+], ToggleButton.prototype, "currentChecked", void 0);
+//# sourceMappingURL=toggle-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-button.js","sourceRoot":"","sources":["../../../src/toggle-button/toggle-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C;;;GAGG;AACH,MAAM,OAAO,YAAa,SAAQ,MAAM;IAwEtC;QACE,KAAK,EAAE,CAAC;QAxEV;;;;WAIG;QACO,iBAAY,GAAY,KAAK,CAAC;QAExC;;;;;;;WAOG;QAEI,qBAAgB,GAAY,KAAK,CAAC;QAMlC,mBAAc,GAAY,KAAK,CAAC;QAWvC;;;;WAIG;QAEI,YAAO,GAAY,KAAK,CAAC;QAmBhC;;;;;;WAMG;QAEI,mBAAc,GAAY,KAAK,CAAC;QAyBvC;;WAEG;QACO,4BAAuB,GAAG,CAAC,CAAa,EAAQ,EAAE;YAC1D,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;gBAC7C,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;aAC9B;QACH,CAAC,CAAC;QAxBA,oEAAoE;QACpE,2BAA2B;QAC3B,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;IAC5B,CAAC;IA5DS,uBAAuB;QAC/B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,gBAAgB,CAAC;IAC9C,CAAC;IAIS,qBAAqB;QAC7B,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,6DAA6D;YAC7D,sEAAsE;YACtE,+CAA+C;YAC/C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;YACnC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;SAC3B;IACH,CAAC;IASS,cAAc,CAAC,IAAyB,EAAE,IAAa;QAC/D,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE;YACrC,OAAO;SACR;QAED,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;SAC1B;QAED,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC;QAEjC,IAAgC,CAAC,YAAY,CAAC,cAAc,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;QAE1F,IAAI,IAAI,KAAK,SAAS,EAAE;YACtB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;SACtB;IACH,CAAC;IAWM,qBAAqB,CAAC,IAAyB,EAAE,IAAa;QACnE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;IACrC,CAAC;IAUM,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAExB,IAAgC,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;IAC7F,CAAC;IAEM,oBAAoB;QACzB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE3B,IAAgC,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;IAChG,CAAC;CAUF;AAnFC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;sDACP;AAMzC;IADC,UAAU;oDAC4B;AAiBvC;IADC,UAAU;6CACqB;AA2BhC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oDACjB"}

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

@@ -0,0 +1,17 @@
+import { ButtonAppearance, ButtonShape, ButtonSize } from '../button/button.options.js';
+/**
+ * Toggle Button Appearance constants
+ * @public
+ */
+export const ToggleButtonAppearance = ButtonAppearance;
+/**
+ * A Toggle Button can be square, circular or rounded.
+ * @public
+ */
+export const ToggleButtonShape = ButtonShape;
+/**
+ * A Toggle Button can be a size of small, medium or large.
+ * @public
+ */
+export const ToggleButtonSize = ButtonSize;
+//# sourceMappingURL=toggle-button.options.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-button.options.js","sourceRoot":"","sources":["../../../src/toggle-button/toggle-button.options.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAExF;;;GAGG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,gBAAgB,CAAC;AAOvD;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,WAAW,CAAC;AAQ7C;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,UAAU,CAAC"}

package/dist/esm/toggle-button/toggle-button.styles.js

@@ -0,0 +1,94 @@
+import { css } from '@microsoft/fast-element';
+import { forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation/utilities.js';
+import { styles as ButtonStyles } from '../button/button.styles.js';
+import { colorBrandBackgroundHover, colorBrandBackgroundPressed, colorBrandBackgroundSelected, colorNeutralBackground1Hover, colorNeutralBackground1Pressed, colorNeutralBackground1Selected, colorNeutralForeground1, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorNeutralForeground2BrandSelected, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, colorNeutralForeground2Selected, colorNeutralForegroundOnBrand, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorSubtleBackgroundHover, colorSubtleBackgroundPressed, colorSubtleBackgroundSelected, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, colorTransparentBackgroundSelected, strokeWidthThin, } from '../theme/design-tokens.js';
+// Need to support icon hover styles
+export const styles = css `
+  ${ButtonStyles}
+
+  :host([aria-pressed="true"]) .control {
+    border-color: ${colorNeutralStroke1};
+    background-color: ${colorNeutralBackground1Selected};
+    color: ${colorNeutralForeground1};
+    border-width: ${strokeWidthThin};
+  }
+
+  :host([aria-pressed='true']:hover) .control {
+    border-color: ${colorNeutralStroke1Hover};
+    background-color: ${colorNeutralBackground1Hover};
+  }
+
+  :host([aria-pressed='true']:active) .control {
+    border-color: ${colorNeutralStroke1Pressed};
+    background-color: ${colorNeutralBackground1Pressed};
+  }
+
+  :host([aria-pressed='true'][appearance='primary']) .control {
+    border-color: transparent;
+    background-color: ${colorBrandBackgroundSelected};
+    color: ${colorNeutralForegroundOnBrand};
+  }
+
+  :host([aria-pressed='true'][appearance='primary']:hover) .control {
+    background-color: ${colorBrandBackgroundHover};
+  }
+
+  :host([aria-pressed='true'][appearance='primary']:active) .control {
+    background-color: ${colorBrandBackgroundPressed};
+  }
+
+  :host([aria-pressed='true'][appearance='subtle']) .control {
+    border-color: transparent;
+    background-color: ${colorSubtleBackgroundSelected};
+    color: ${colorNeutralForeground2Selected};
+  }
+
+  :host([aria-pressed='true'][appearance='subtle']:hover) .control {
+    background-color: ${colorSubtleBackgroundHover};
+    color: ${colorNeutralForeground2Hover};
+  }
+
+  :host([aria-pressed='true'][appearance='subtle']:active) .control {
+    background-color: ${colorSubtleBackgroundPressed};
+    color: ${colorNeutralForeground2Pressed};
+  }
+
+  :host([aria-pressed='true'][appearance='outline']) .control,
+  :host([aria-pressed='true'][appearance='transparent']) .control {
+    background-color: ${colorTransparentBackgroundSelected};
+  }
+
+  :host([aria-pressed='true'][appearance='outline']:hover) .control,
+  :host([aria-pressed='true'][appearance='transparent']:hover) .control {
+    background-color: ${colorTransparentBackgroundHover};
+  }
+
+  :host([aria-pressed='true'][appearance='outline']:active) .control,
+  :host([aria-pressed='true'][appearance='transparent']:active) .control {
+    background-color: ${colorTransparentBackgroundPressed};
+  }
+
+  :host([aria-pressed='true'][appearance='transparent']) .control {
+    border-color: transparent;
+    color: ${colorNeutralForeground2BrandSelected};
+  }
+
+  :host([aria-pressed='true'][appearance='transparent']:hover) .control {
+    color: ${colorNeutralForeground2BrandHover};
+  }
+
+  :host([aria-pressed='true'][appearance='transparent']:active) .control {
+    color: ${colorNeutralForeground2BrandPressed};
+  }
+`.withBehaviors(forcedColorsStylesheetBehavior(css `
+    :host([aria-pressed='true']) .control,
+    :host([aria-pressed='true'][appearance='primary']) .control,
+    :host([aria-pressed='true'][appearance='subtle']) .control,
+    :host([aria-pressed='true'][appearance='outline']) .control,
+    :host([aria-pressed='true'][appearance='transparent']) .control,
+    :host([aria-pressed='true'][appearance='transparent']) .control {
+      background: SelectedItem;
+      color: SelectedItemText;
+    }
+  `));
+//# sourceMappingURL=toggle-button.styles.js.map

package/dist/esm/toggle-button/toggle-button.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-button.styles.js","sourceRoot":"","sources":["../../../src/toggle-button/toggle-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,8BAA8B,EAAE,MAAM,yCAAyC,CAAC;AACzF,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EACL,yBAAyB,EACzB,2BAA2B,EAC3B,4BAA4B,EAC5B,4BAA4B,EAC5B,8BAA8B,EAC9B,+BAA+B,EAC/B,uBAAuB,EACvB,iCAAiC,EACjC,mCAAmC,EACnC,oCAAoC,EACpC,4BAA4B,EAC5B,8BAA8B,EAC9B,+BAA+B,EAC/B,6BAA6B,EAC7B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,0BAA0B,EAC1B,4BAA4B,EAC5B,6BAA6B,EAC7B,+BAA+B,EAC/B,iCAAiC,EACjC,kCAAkC,EAClC,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC,oCAAoC;AACpC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,YAAY;;;oBAGI,mBAAmB;wBACf,+BAA+B;aAC1C,uBAAuB;oBAChB,eAAe;;;;oBAIf,wBAAwB;wBACpB,4BAA4B;;;;oBAIhC,0BAA0B;wBACtB,8BAA8B;;;;;wBAK9B,4BAA4B;aACvC,6BAA6B;;;;wBAIlB,yBAAyB;;;;wBAIzB,2BAA2B;;;;;wBAK3B,6BAA6B;aACxC,+BAA+B;;;;wBAIpB,0BAA0B;aACrC,4BAA4B;;;;wBAIjB,4BAA4B;aACvC,8BAA8B;;;;;wBAKnB,kCAAkC;;;;;wBAKlC,+BAA+B;;;;;wBAK/B,iCAAiC;;;;;aAK5C,oCAAoC;;;;aAIpC,iCAAiC;;;;aAIjC,mCAAmC;;CAE/C,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;GAUjC,CAAC,CACH,CAAC"}

package/dist/esm/toggle-button/toggle-button.template.js

@@ -0,0 +1,7 @@
+import { buttonTemplate } from '@microsoft/fast-foundation/button.js';
+/**
+ * The template for the ToggleButton component.
+ * @public
+ */
+export const template = buttonTemplate();
+//# sourceMappingURL=toggle-button.template.js.map

package/dist/esm/toggle-button/toggle-button.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-button.template.js","sourceRoot":"","sources":["../../../src/toggle-button/toggle-button.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAGtE;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAsC,cAAc,EAAE,CAAC"}

package/dist/esm/utils/apply-mixins.js

@@ -0,0 +1,26 @@
+import { AttributeConfiguration } from '@microsoft/fast-element';
+/**
+ * Apply mixins to a constructor.
+ * Sourced from {@link https://www.typescriptlang.org/docs/handbook/mixins.html | TypeScript Documentation }.
+ *
+ * TODO: Remove with https://github.com/microsoft/fast/pull/6797
+ * This was used for Badge where start/end was not yet implemented.
+ * The method itself was deprecated as it was largely intended to be "internals" for Fast Foundation.
+ * Adding here to avoid breaking of the existing API.
+ * @internal
+ */
+export function applyMixins(derivedCtor, ...baseCtors) {
+    const derivedAttributes = AttributeConfiguration.locate(derivedCtor);
+    baseCtors.forEach(baseCtor => {
+        Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
+            if (name !== 'constructor') {
+                Object.defineProperty(derivedCtor.prototype, name, 
+                /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
+                Object.getOwnPropertyDescriptor(baseCtor.prototype, name));
+            }
+        });
+        const baseAttributes = AttributeConfiguration.locate(baseCtor);
+        baseAttributes.forEach(x => derivedAttributes.push(x));
+    });
+}
+//# sourceMappingURL=apply-mixins.js.map

package/dist/esm/utils/apply-mixins.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"apply-mixins.js","sourceRoot":"","sources":["../../../src/utils/apply-mixins.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAEjE;;;;;;;;;GASG;AACH,MAAM,UAAU,WAAW,CAAC,WAAgB,EAAE,GAAG,SAAgB;IAC/D,MAAM,iBAAiB,GAAG,sBAAsB,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IAErE,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;QAC3B,MAAM,CAAC,mBAAmB,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YAC5D,IAAI,IAAI,KAAK,aAAa,EAAE;gBAC1B,MAAM,CAAC,cAAc,CACnB,WAAW,CAAC,SAAS,EACrB,IAAI;gBACJ,uEAAuE;gBACvE,MAAM,CAAC,wBAAwB,CAAC,QAAQ,CAAC,SAAS,EAAE,IAAI,CAAE,CAC3D,CAAC;aACH;QACH,CAAC,CAAC,CAAC;QAEH,MAAM,cAAc,GAAG,sBAAsB,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAC/D,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IACzD,CAAC,CAAC,CAAC;AACL,CAAC"}