fix: standardization and refactor

packages/web-components/fast-components/ACKNOWLEDGEMENTS.md

@@ -0,0 +1,3 @@
+# Acknowledgements
+
+* A huge thank-you to [TypeScript](www.typescriptlang.org/) for providing an amazing language, build tools, and at least one [code sample](./src/utilities/apply-mixins.ts) we've shamelessly stolen.

packages/web-components/fast-components/src/anchor/anchor.template.ts

@@ -1,34 +1,25 @@
 import { html, ref } from "@microsoft/fast-element";
+import { endTemplate, startTemplate } from "../patterns/start-end";
 import { Anchor } from "./anchor";
 
 export const AnchorTemplate = html<Anchor>`
-    <a
-        class="control"
-        download="${x => x.download}"
-        href="${x => x.href}"
-        hreflang="${x => x.hreflang}"
-        ping="${x => x.ping}"
-        referrerpolicy="${x => x.referrerpolicy}"
-        rel="${x => x.rel}"
-        target="${x => x.target}"
-        type="${x => x.type}"
-    >
-        <span name="start" part="start" ${ref("startContainer")}>
-            <slot
-                name="start"
-                ${ref("start")}
-                @slotchange=${x => x.handleStartContentChange()}
-            ></slot>
-        </span>
-        <span class="content" part="content">
-            <slot></slot>
-        </span>
-        <span name="end" part="end" ${ref("endContainer")}>
-            <slot
-                name="end"
-                ${ref("end")}
-                @slotchange=${x => x.handleEndContentChange()}
-            ></slot>
-        </span>
-    </a>
+    <template class="${x => x.appearance}">
+        <a
+            class="control"
+            download="${x => x.download}"
+            href="${x => x.href}"
+            hreflang="${x => x.hreflang}"
+            ping="${x => x.ping}"
+            referrerpolicy="${x => x.referrerpolicy}"
+            rel="${x => x.rel}"
+            target="${x => x.target}"
+            type="${x => x.type}"
+        >
+            ${startTemplate}
+            <span class="content" part="content">
+                <slot></slot>
+            </span>
+            ${endTemplate}
+        </a>
+    </template>
 `;

packages/web-components/fast-components/src/anchor/anchor.ts

@@ -1,20 +1,12 @@
 import { attr, FASTElement } from "@microsoft/fast-element";
 import { ButtonAppearance } from "../button";
+import { StartEnd } from "../patterns/start-end";
+import { applyMixins } from "../utilities/apply-mixins";
 
 export type AnchorAppearance = ButtonAppearance | "hypertext";
-
 export class Anchor extends FASTElement {
     @attr
     public appearance: AnchorAppearance = "neutral";
-    public appearanceChanged(
-        oldValue: AnchorAppearance,
-        newValue: AnchorAppearance
-    ): void {
-        if (oldValue !== newValue) {
-            this.classList.add(newValue);
-            this.classList.remove(oldValue);
-        }
-    }
 
     @attr
     public download: string;
@@ -39,20 +31,8 @@ export class Anchor extends FASTElement {
 
     @attr
     public type: string;
-
-    public start: HTMLSlotElement;
-    public startContainer: HTMLSpanElement;
-    public handleStartContentChange(): void {
-        this.start.assignedNodes().length > 0
-            ? this.startContainer.classList.add("start")
-            : this.startContainer.classList.remove("start");
-    }
-
-    public end: HTMLSlotElement;
-    public endContainer: HTMLSpanElement;
-    public handleEndContentChange(): void {
-        this.end.assignedNodes().length > 0
-            ? this.endContainer.classList.add("end")
-            : this.endContainer.classList.remove("end");
-    }
 }
+
+/* eslint-disable-next-line */
+export interface Anchor extends StartEnd {}
+applyMixins(Anchor, StartEnd);

packages/web-components/fast-components/src/badge/badge.template.ts

@@ -2,7 +2,7 @@ import { html } from "@microsoft/fast-element";
 import { Badge } from "./badge";
 
 export const BadgeTemplate = html<Badge>`
-    <template>
+    <template class="${x => (x.circular ? "circular" : "")}">
         <div
             class="badge"
             style="background-color: var(--badge-fill-${x =>

packages/web-components/fast-components/src/badge/badge.ts

@@ -12,9 +12,4 @@ export class Badge extends FASTElement {
 
     @attr({ mode: "boolean" })
     public circular: boolean;
-    private circularChanged(): void {
-        this.circular
-            ? this.classList.add("circular")
-            : this.classList.remove("circular");
-    }
 }

packages/web-components/fast-components/src/button/button.template.ts

@@ -1,4 +1,5 @@
 import { html, ref } from "@microsoft/fast-element";
+import { endTemplate, startTemplate } from "../patterns/start-end";
 import { Button } from "./";
 
 export const ButtonTemplate = html<Button>`
@@ -16,22 +17,10 @@ export const ButtonTemplate = html<Button>`
         type=${x => x.type}
         value=${x => x.value}
     >
-        <span part="start" ${ref("startContainer")}>
-            <slot
-                name="start"
-                ${ref("start")}
-                @slotchange=${x => x.handleStartContentChange()}
-            ></slot>
-        </span>
+        ${startTemplate}
         <span class="content" part="content">
             <slot></slot>
         </span>
-        <span part="end" ${ref("endContainer")}>
-            <slot
-                name="end"
-                ${ref("end")}
-                @slotchange=${x => x.handleEndContentChange()}
-            ></slot>
-        </span>
+        ${endTemplate}
     </button>
 `;

packages/web-components/fast-components/src/button/button.ts

@@ -1,5 +1,7 @@
 import { attr } from "@microsoft/fast-element";
 import { FormAssociated } from "../form-associated";
+import { StartEnd } from "../patterns/start-end";
+import { applyMixins } from "../utilities/apply-mixins";
 
 export type ButtonAppearance =
     | "accent"
@@ -85,22 +87,6 @@ export class Button extends FormAssociated<HTMLInputElement> {
         }
     }
 
-    public start: HTMLSlotElement;
-    public startContainer: HTMLSpanElement;
-    public handleStartContentChange(): void {
-        this.start.assignedNodes().length > 0
-            ? this.startContainer.classList.add("start")
-            : this.startContainer.classList.remove("start");
-    }
-
-    public end: HTMLSlotElement;
-    public endContainer: HTMLSpanElement;
-    public handleEndContentChange(): void {
-        this.end.assignedNodes().length > 0
-            ? this.endContainer.classList.add("end")
-            : this.endContainer.classList.remove("end");
-    }
-
     protected proxy: HTMLInputElement = document.createElement("input");
 
     constructor() {
@@ -115,3 +101,7 @@ export class Button extends FormAssociated<HTMLInputElement> {
         this.setFormValue(this.value, this.value);
     }
 }
+
+/* eslint-disable-next-line */
+export interface Button extends StartEnd {}
+applyMixins(Button, StartEnd);

packages/web-components/fast-components/src/card/card.template.ts

@@ -1,4 +1,4 @@
 import { html } from "@microsoft/fast-element";
 import { Card } from "./card";
 
-export const CardTemplate = html<Card>` <slot></slot> `;
+export const CardTemplate = html<Card>`<slot></slot>`;

packages/web-components/fast-components/src/checkbox/checkbox.template.ts

@@ -11,6 +11,8 @@ export const CheckboxTemplate = html<Checkbox>`
         tabindex="${x => (x.disabled ? null : 0)}"
         @keypress="${(x, c) => x.keypressHandler(c.event as KeyboardEvent)}"
         @click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
+        class="${x => (x.readOnly ? "readonly" : "")} ${x =>
+            x.checked ? "checked" : ""} ${x => (x.indeterminate ? "indeterminate" : "")}"
     >
         <div part="control" class="control">
             <slot name="checked-indicator">

packages/web-components/fast-components/src/checkbox/checkbox.ts

@@ -9,10 +9,6 @@ export class Checkbox extends FormAssociated<HTMLInputElement> {
         if (this.proxy instanceof HTMLElement) {
             this.proxy.readOnly = this.readOnly;
         }
-
-        this.readOnly
-            ? this.classList.add("readonly")
-            : this.classList.remove("readonly");
     }
 
     /**
@@ -69,12 +65,8 @@ export class Checkbox extends FormAssociated<HTMLInputElement> {
         }
 
         if (this.constructed) {
-            this.dispatchEvent(
-                new CustomEvent("change", { bubbles: true, composed: true })
-            );
+            this.$emit("change");
         }
-
-        this.checked ? this.classList.add("checked") : this.classList.remove("checked");
     }
 
     protected proxy: HTMLInputElement = document.createElement("input");
@@ -84,11 +76,6 @@ export class Checkbox extends FormAssociated<HTMLInputElement> {
      */
     @observable
     public indeterminate: boolean = false;
-    private indeterminateChanged(): void {
-        this.indeterminate
-            ? this.classList.add("indeterminate")
-            : this.classList.remove("indeterminate");
-    }
 
     /**
      * Tracks whether the "checked" property has been changed.

packages/web-components/fast-components/src/dialog/dialog.ts

@@ -28,12 +28,7 @@ export class Dialog extends FASTElement {
     private observer: MutationObserver;
 
     public dismiss(): void {
-        this.dispatchEvent(
-            new CustomEvent("dismiss", {
-                bubbles: true,
-                composed: true,
-            })
-        );
+        this.$emit("dismiss");
     }
 
     public connectedCallback(): void {

packages/web-components/fast-components/src/divider/divider.template.ts

@@ -1,4 +1,4 @@
 import { html } from "@microsoft/fast-element";
 import { Divider } from "./divider";
 
-export const DividerTemplate = html<Divider>` <template role=${x => x.role}></template> `;
+export const DividerTemplate = html<Divider>`<template role=${x => x.role}></template>`;

packages/web-components/fast-components/src/form-associated/index.ts

@@ -1,4 +1,4 @@
-import { attr, emptyArray, FASTElement } from "@microsoft/fast-element";
+import { attr, DOM, emptyArray, FASTElement } from "@microsoft/fast-element";
 import { keyCodeEnter } from "@microsoft/fast-web-utilities";
 
 /**
@@ -182,9 +182,7 @@ export abstract class FormAssociated<
             this.proxy.disabled = this.disabled;
         }
 
-        this.disabled
-            ? this.classList.add("disabled")
-            : this.classList.remove("disabled");
+        DOM.queueUpdate(() => this.classList.toggle("disabled", this.disabled));
     }
 
     @attr
@@ -205,9 +203,7 @@ export abstract class FormAssociated<
             this.proxy.required = this.required;
         }
 
-        this.required
-            ? this.classList.add("required")
-            : this.classList.remove("required");
+        DOM.queueUpdate(() => this.classList.toggle("required", this.required));
     }
 
     /**

packages/web-components/fast-components/src/patterns/start-end.ts

@@ -0,0 +1,38 @@
+import { html, ref } from "@microsoft/fast-element";
+
+export class StartEnd {
+    public start: HTMLSlotElement;
+    public startContainer: HTMLSpanElement;
+    public handleStartContentChange(): void {
+        this.startContainer.classList.toggle(
+            "start",
+            this.start.assignedNodes().length > 0
+        );
+    }
+
+    public end: HTMLSlotElement;
+    public endContainer: HTMLSpanElement;
+    public handleEndContentChange(): void {
+        this.endContainer.classList.toggle("end", this.end.assignedNodes().length > 0);
+    }
+}
+
+export const endTemplate = html<StartEnd>`
+    <span name="end" part="end" ${ref("endContainer")}>
+        <slot
+            name="end"
+            ${ref("end")}
+            @slotchange=${x => x.handleEndContentChange()}
+        ></slot>
+    </span>
+`;
+
+export const startTemplate = html<StartEnd>`
+    <span name="start" part="start" ${ref("startContainer")}>
+        <slot
+            name="start"
+            ${ref("start")}
+            @slotchange=${x => x.handleStartContentChange()}
+        ></slot>
+    </span>
+`;

packages/web-components/fast-components/src/progress/base-progress.ts

@@ -12,7 +12,4 @@ export class BaseProgress extends FASTElement {
 
     @attr({ mode: "boolean" })
     public paused;
-    private pausedChanged(): void {
-        this.paused ? this.classList.add("paused") : this.classList.remove("paused");
-    }
 }

packages/web-components/fast-components/src/progress/progress-ring/progress-ring.template.ts

@@ -7,6 +7,7 @@ export const ProgressRingTemplate = html<BaseProgress>`
         aria-valuenow="${x => x.value}"
         aria-valuemin="${x => x.min}"
         aria-valuemax="${x => x.max}"
+        class="${x => (x.paused ? "paused" : "")}"
     >
         ${when(
             x => x.value,

packages/web-components/fast-components/src/progress/progress/progress.template.ts

@@ -7,6 +7,7 @@ export const ProgressTemplate = html<BaseProgress>`
         aria-valuenow="${x => x.value}"
         aria-valuemin="${x => x.min}"
         aria-valuemax="${x => x.max}"
+        class="${x => (x.paused ? "paused" : "")}"
     >
         ${when(
             x => x.value,

packages/web-components/fast-components/src/slider-label/slider-label.template.ts

@@ -2,7 +2,10 @@ import { html, ref, when } from "@microsoft/fast-element";
 import { SliderLabel } from "./slider-label";
 
 export const SliderLabelTemplate = html<SliderLabel>`
-    <template aria-disabled="${x => x.disabled}">
+    <template
+        aria-disabled="${x => x.disabled}"
+        class="${x => (x.disabled ? "disabled" : "")}"
+    >
         <div ${ref("root")} part="root" class="root" style=${x => x.positionStyle}>
             <div class="container">
                 ${when(x => !x.hideMark, html` <div class="mark"></div> `)}

packages/web-components/fast-components/src/slider-label/slider-label.ts

@@ -32,13 +32,8 @@ export class SliderLabel extends FASTElement {
         orientation: SliderOrientation.horizontal,
     };
 
-    @attr({ attribute: "disabled", mode: "boolean" })
-    public disabled: boolean; // Map to proxy element
-    private disabledChanged(): void {
-        this.disabled
-            ? this.classList.add("disabled")
-            : this.classList.remove("disabled");
-    }
+    @attr({ mode: "boolean" })
+    public disabled: boolean;
 
     public connectedCallback(): void {
         super.connectedCallback();

packages/web-components/fast-components/src/slider/slider.template.ts

@@ -12,6 +12,7 @@ export const SliderTemplate = html<Slider>`
         ?aria-disabled="${x => x.disabled}"
         ?aria-readonly="${x => x.readOnly}"
         aria-orientation="${x => x.orientation}"
+        class="${x => x.orientation}"
     >
         <div part="positioning-region" class="positioning-region">
             <div ${ref("track")} part="track-container" class="track">