Updated builder with spread pattern; deleted unused interface declaration from component.

Author: kensternberg-authentik

src/ak-switch/ak-switch.builder.ts

@@ -1,29 +1,33 @@
+import type { ElementRest } from "../types.js";
 import { SwitchInput } from "./ak-switch.js";
 
+import { spread } from "@open-wc/lit-helpers";
+
 import { html, TemplateResult } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 
 /**
  * Configuration options for the akSwitch helper function
  */
-export type SwitchProps = Partial<
-    Pick<
-        SwitchInput,
-        | "name"
-        | "checked"
-        | "required"
-        | "disabled"
-        | "value"
-        | "useCheck"
-        | "showLabel"
-        | "ariaLabel"
-    >
-> & {
-    label?: TemplateResult | string;
-    labelOn?: TemplateResult | string;
-    icon?: TemplateResult | string;
-    reverse?: boolean;
-};
+export type SwitchProps = ElementRest &
+    Partial<
+        Pick<
+            SwitchInput,
+            | "name"
+            | "checked"
+            | "required"
+            | "disabled"
+            | "value"
+            | "useCheck"
+            | "showLabel"
+            | "ariaLabel"
+        >
+    > & {
+        label?: TemplateResult | string;
+        labelOn?: TemplateResult | string;
+        icon?: TemplateResult | string;
+        reverse?: boolean;
+    };
 
 /**
  * @summary Helper function to create a Switch component programmatically
@@ -46,6 +50,7 @@ export function akSwitch(options: SwitchProps = {}): TemplateResult {
         label,
         labelOn,
         icon,
+        ...rest
     } = options;
 
     const intoSlot = (slot: string, s?: TemplateResult | string) =>
@@ -60,6 +65,7 @@ export function akSwitch(options: SwitchProps = {}): TemplateResult {
     //
     return html`
         <ak-switch
+            ${spread(rest)}
             name=${ifDefined(name)}
             ?checked=${Boolean(checked)}
             ?required=${Boolean(required)}

src/ak-switch/ak-switch.component.ts

@@ -10,17 +10,6 @@ import { html, nothing, PropertyValues, TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-export interface ISwitchInput {
-    name?: string;
-    checked: boolean;
-    required: boolean;
-    disabled: boolean;
-    value?: string | null;
-    useCheck: boolean;
-    showLabel: boolean;
-    ariaLabel: string | null;
-}
-
 const CHECK_ICON = "fas fa-check";
 
 /**
@@ -63,7 +52,7 @@ const CHECK_ICON = "fas fa-check";
  * @cssprop --pf-v5-c-switch__icon--FontSize - Font size of the check icon
  * @cssprop --pf-v5-c-switch__icon--Color - Color of the check icon
  */
-export class SwitchInput extends FormAssociatedBooleanMixin(AkLitElement) implements ISwitchInput {
+export class SwitchInput extends FormAssociatedBooleanMixin(AkLitElement) {
     static readonly styles = [styles];
 
     @property({ type: Boolean, attribute: "use-check" })

src/ak-switch/ak-switch.ts

@@ -1,7 +1,7 @@
 import { akSwitch, type SwitchProps } from "./ak-switch.builder.js";
-import { type ISwitchInput, SwitchInput } from "./ak-switch.component.js";
+import { SwitchInput } from "./ak-switch.component.js";
 
-export { akSwitch, type ISwitchInput, SwitchInput, type SwitchProps };
+export { akSwitch, SwitchInput, type SwitchProps };
 
 window.customElements.define("ak-switch", SwitchInput);