diff --git a/web-components/src/[sandbox]/examples/toggle-switch.ts b/web-components/src/[sandbox]/examples/toggle-switch.ts
index b1b9836987..d84d95c59c 100644
--- a/web-components/src/[sandbox]/examples/toggle-switch.ts
+++ b/web-components/src/[sandbox]/examples/toggle-switch.ts
@@ -26,4 +26,10 @@ export const toggleSwitchTemplate = html`
Checked Smaller Toggle Switch
+
+ Toggle Switch with label right aligned
+
+
+ Toggle Switch with label left aligned
+
`;
diff --git a/web-components/src/components/dropdown/Dropdown.test.ts b/web-components/src/components/dropdown/Dropdown.test.ts
index d2d3d9c356..c6d15bbab6 100644
--- a/web-components/src/components/dropdown/Dropdown.test.ts
+++ b/web-components/src/components/dropdown/Dropdown.test.ts
@@ -234,6 +234,25 @@ describe("Dropdown Component", () => {
it("should render correct icon name", () => {
expect(dropdown.shadowRoot!.querySelector("md-icon")!.getAttribute("name")).toEqual("icon-arrow-down_16");
});
+
+ it("should change selectedKey on update of default option", async () => {
+ const dropdown = await fixture(
+ html`
+
+ `
+ );
+ expect(dropdown["selectedKey"]).toEqual(dropdownObjectLongOptions[10].id);
+
+ dropdown["defaultOption"] = dropdownObjectLongOptions[1];
+ await elementUpdated(dropdown);
+
+ expect(dropdown["selectedKey"]).toEqual(dropdownObjectLongOptions[1].id);
+ });
});
describe("List", () => {
diff --git a/web-components/src/components/dropdown/Dropdown.ts b/web-components/src/components/dropdown/Dropdown.ts
index 7c3153415c..1c54259425 100644
--- a/web-components/src/components/dropdown/Dropdown.ts
+++ b/web-components/src/components/dropdown/Dropdown.ts
@@ -104,6 +104,13 @@ export namespace Dropdown {
if (name === "disabled") {
this.setAttribute("tabindex", !this.disabled ? "0" : "-1");
}
+ if (name === "defaultOption") {
+ if (this.defaultOption) {
+ const { key } = this.getOptionKeyValuePair(this.defaultOption);
+
+ this.selectedKey = key;
+ }
+ }
});
}
diff --git a/web-components/src/components/label/scss/label.scss b/web-components/src/components/label/scss/label.scss
index df7fa3ff74..e742ab8bdc 100644
--- a/web-components/src/components/label/scss/label.scss
+++ b/web-components/src/components/label/scss/label.scss
@@ -2,6 +2,7 @@
.md-label {
@include form-label;
display: flex;
+ align-items: center;
&.right {
@include form-label(right, false);
diff --git a/web-components/src/components/toggle-switch/ToggleSwitch.stories.ts b/web-components/src/components/toggle-switch/ToggleSwitch.stories.ts
index f67b891b33..d76f9ee53a 100644
--- a/web-components/src/components/toggle-switch/ToggleSwitch.stories.ts
+++ b/web-components/src/components/toggle-switch/ToggleSwitch.stories.ts
@@ -8,8 +8,9 @@
import "@/components/toggle-switch/ToggleSwitch";
import "@/components/theme/Theme";
+import { alignLabel } from "@/components/toggle-switch/ToggleSwitch";
import { withA11y } from "@storybook/addon-a11y";
-import { boolean, withKnobs } from "@storybook/addon-knobs";
+import { boolean, withKnobs, select } from "@storybook/addon-knobs";
import { html } from "lit-element";
export default {
@@ -33,11 +34,20 @@ export const ToggleSwitch = () => {
const checked = boolean("Checked", false);
const disabled = boolean("Disabled", false);
const smaller = boolean("Smaller", false);
+ const align = select("Align Label", alignLabel, "right");
return html`
-
- Label Toggle Switch
-
+
+
+ Label Toggle Switch
+
+
`;
};
diff --git a/web-components/src/components/toggle-switch/ToggleSwitch.test.ts b/web-components/src/components/toggle-switch/ToggleSwitch.test.ts
index bb70da7ba4..b029341e0f 100644
--- a/web-components/src/components/toggle-switch/ToggleSwitch.test.ts
+++ b/web-components/src/components/toggle-switch/ToggleSwitch.test.ts
@@ -57,4 +57,22 @@ describe("Toggle Switch Component", () => {
expect(element.checked).toBeTruthy();
});
+
+ test("should add class md-toggle-switch__label__container__left on align label left", async () => {
+ const div = element.shadowRoot!.querySelector(".md-toggle-switch") as HTMLInputElement;
+ element.alignLabel = "left";
+ await elementUpdated(element);
+ const span = div.querySelector("span") as HTMLSpanElement;
+
+ expect(span.classList.contains("md-toggle-switch__label__container__left")).toBeTruthy();
+ });
+
+ test("should not add class md-toggle-switch__label__container__left on align label right", async () => {
+ const div = element.shadowRoot!.querySelector(".md-toggle-switch") as HTMLInputElement;
+ element.alignLabel = "right";
+ await elementUpdated(element);
+ const span = div.querySelector("span") as HTMLSpanElement;
+
+ expect(span.classList.contains("md-toggle-switch__label__container__left")).toBeFalsy();
+ });
});
diff --git a/web-components/src/components/toggle-switch/ToggleSwitch.ts b/web-components/src/components/toggle-switch/ToggleSwitch.ts
index 81d820d4e1..6ecb9e86e1 100644
--- a/web-components/src/components/toggle-switch/ToggleSwitch.ts
+++ b/web-components/src/components/toggle-switch/ToggleSwitch.ts
@@ -13,7 +13,10 @@ import { html, LitElement, property } from "lit-element";
import { classMap } from "lit-html/directives/class-map";
import styles from "./scss/module.scss";
+export const alignLabel = ["left", "right"] as const;
+
export namespace ToggleSwitch {
+ export type alignLabel = typeof alignLabel[number];
@customElementWithCheck("md-toggle-switch")
export class ELEMENT extends FocusMixin(LitElement) {
@property({ type: String }) htmlId = "";
@@ -22,6 +25,7 @@ export namespace ToggleSwitch {
@property({ type: Boolean }) disabled = false;
@property({ type: Boolean }) small = false;
@property({ type: Boolean }) smaller = false;
+ @property({ type: String }) alignLabel: ToggleSwitch.alignLabel = "right";
@property({ type: Boolean, reflect: true }) autofocus = false;
handleClick() {
@@ -37,6 +41,20 @@ export namespace ToggleSwitch {
};
}
+ switchTemplate() {
+ if (this.alignLabel === "left") {
+ return html`
+
+
+ `;
+ } else {
+ return html`
+
+
+ `;
+ }
+ }
+
render() {
return html`
-
-
+ ${this.switchTemplate()}
`;
diff --git a/web-components/src/components/toggle-switch/scss/toggle-switch.scss b/web-components/src/components/toggle-switch/scss/toggle-switch.scss
index 9bc4840ec5..2f8c3070d7 100644
--- a/web-components/src/components/toggle-switch/scss/toggle-switch.scss
+++ b/web-components/src/components/toggle-switch/scss/toggle-switch.scss
@@ -47,6 +47,11 @@
transition: background 350ms;
width: $toggle-switch__width;
+ &__left {
+ margin-right: 0;
+ margin-left: 0.75rem;
+ }
+
@media screen and (-ms-high-contrast: active) {
filter: brightness(1) contrast(1) saturate(1.5);
}