refactor(switch)!: Remove deprecated property and event payload. (#5921)

BREAKING CHANGE: Removed deprecated `switched` property and
`calciteSwitchChange` event payload.

- Removed the property `switched`, use `checked` instead.
- Removed the `event.detail` from `calciteSwitchChange`, use
`event.target.checked` instead.

src/components/switch/switch.e2e.ts

@@ -59,16 +59,6 @@ describe("calcite-switch", () => {
     expect(await calciteSwitch.getProperty("checked")).toBe(false);
   });
 
-  it("can be checked via the switched property (deprecated)", async () => {
-    const page = await newE2EPage();
-    await page.setContent("<calcite-switch switched></calcite-switch>");
-
-    const calciteSwitch = await page.find("calcite-switch");
-
-    expect(await calciteSwitch.getProperty("checked")).toBe(true);
-    expect(await calciteSwitch.getProperty("switched")).toBe(true);
-  });
-
   it("appropriately triggers the custom change event", async () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-switch></calcite-switch>`);
@@ -82,7 +72,6 @@ describe("calcite-switch", () => {
     await calciteSwitch.click();
 
     expect(changeEvent).toHaveReceivedEventTimes(1);
-    expect(changeEvent).toHaveFirstReceivedEventDetail({ switched: true });
   });
 
   it("doesn't emit when controlling checked attribute", async () => {

src/components/switch/switch.tsx

@@ -7,11 +7,10 @@ import {
   Host,
   Method,
   Prop,
-  VNode,
-  Watch
+  VNode
 } from "@stencil/core";
 import { focusElement, toAriaBoolean } from "../../utils/dom";
-import { DeprecatedEventPayload, Scale } from "../interfaces";
+import { Scale } from "../interfaces";
 import { LabelableComponent, connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import {
   connectForm,
@@ -62,18 +61,6 @@ export class Switch
   /** Specifies the size of the component. */
   @Prop({ reflect: true }) scale: Scale = "m";
 
-  /**
-   * When `true`, the component is checked.
-   *
-   * @deprecated use `checked` instead.
-   */
-  @Prop({ mutable: true, reflect: true }) switched = false;
-
-  @Watch("switched")
-  switchedWatcher(switched: boolean): void {
-    this.checked = switched;
-  }
-
   /** When `true`, the component is checked. */
   @Prop({ reflect: true, mutable: true }) checked = false;
 
@@ -132,9 +119,7 @@ export class Switch
 
   private toggle(): void {
     this.checked = !this.checked;
-    this.calciteSwitchChange.emit({
-      switched: this.checked
-    });
+    this.calciteSwitchChange.emit();
   }
 
   private clickHandler = (): void => {
@@ -156,7 +141,7 @@ export class Switch
    *
    * **Note:** The event payload is deprecated, use the component's `checked` property instead.
    */
-  @Event({ cancelable: false }) calciteSwitchChange: EventEmitter<DeprecatedEventPayload>;
+  @Event({ cancelable: false }) calciteSwitchChange: EventEmitter<void>;
 
   //--------------------------------------------------------------------------
   //
@@ -165,13 +150,6 @@ export class Switch
   //--------------------------------------------------------------------------
 
   connectedCallback(): void {
-    const initiallyChecked = this.checked || this.switched;
-
-    if (initiallyChecked) {
-      // if either prop is set, we ensure both are synced initially
-      this.switched = this.checked = initiallyChecked;
-    }
-
     connectLabel(this);
     connectForm(this);
   }

src/demos/switch.html

@@ -152,7 +152,7 @@ <h1 style="margin: 0 auto; text-align: center">Switch</h1>
       <script>
         const basicSwitch = document.getElementById("basicSwitch");
         basicSwitch.addEventListener("calciteSwitchChange", function (e) {
-          console.log("Basic switch changed by <calcite-switch>", e.detail.switched);
+          console.log("Basic switch changed by <calcite-switch>", e.target.checked);
         });
       </script>
     </demo-dom-swapper>