@saasbase-io/core-elements 1.16.0 → 1.18.0

package/dist/components/renderers/_updated/form/_form-switch.d.ts

@@ -1,61 +1,77 @@
 import { LitElement } from '../../../../../node_modules/lit';
-import { FormSwitchButtonSize, FormSwitchButtonVariant, FormSwitchVariant, SbFormSwitchProps } from './form.types';
+import { FormSwitchProps, FormSwitchSize, FormSwitchType, FormSwitchVariant } from './form.types';
 /**
- * Clickable element for switching between auth widgets.
+ * A button for switching between auth widgets.
  * @element sb-form-switch
  *
- * @slot form-switch (rtg-field-description/rtg-button)
- * @slot form-switch-link (a): 'clickable' part when variant is `"default"`
+ * @part form-switch (rtg-button)
+ * @part form-switch-wrapper (div): contains root and optional prompt
+ * @part form-switch-prompt (p): prompt text for `"default"` form switches
+ * @part form-swith-spinner (rtg-spinner): loading indicator
+ *
+ * @fires sb-form-switch:click { id, event }
  */
-export declare class SbFormSwitch extends LitElement implements SbFormSwitchProps {
+export declare class SbFormSwitch extends LitElement implements FormSwitchProps {
     private static readonly _ROOT;
-    private static readonly _LINK;
+    private static readonly _WRAPPER;
+    private static readonly _PROMPT;
+    private static readonly _SPINNER;
+    static readonly TAG: string;
+    static readonly CLICK_EVENT: string;
     /**
      * The stable CSS part names exposed for external targeting.
      */
     static get parts(): {
         root: string;
-        link: string;
+        wrapper: string;
+        prompt: string;
+        spinner: string;
     };
     /**
-     * A unique value used as a substring in the generated part/child IDs, when
-     * the `child-id` prop is not provided.
+     * A unique substring for fallback part IDs generated.
      */
     seed: string;
     /**
-     * The `id` value given to the root child/part and used as the base of other
-     * child/part IDs.
+     * The `id` of the root part and the base of sub-part IDs.
      */
     childId?: string;
     /**
-     * The variant of the form switch, determining whether a text-based link or
-     * button element is rendered.
+     * Whether the form switch is a link button with optional prompt text, or a
+     * configurable button element.
+     */
+    type: FormSwitchType;
+    /**
+     * The visual variant of the (button) form switch.
      */
     variant: FormSwitchVariant;
     /**
-     * The text used as the form switch link/button label.
+     * The size of the (button) form switch.
+     */
+    size: FormSwitchSize;
+    /**
+     * The text used as the form switch button label.
      */
     label: string;
     /**
-     * Optional text which precedes the switch link in a `"default"` form switch.
+     * Optional text which precedes the button in a `"default"` form switch.
      */
     prompt?: string;
     /**
-     * When provided, the switch element reflects a disabled state.
+     * When provided, the switch reflects a disabled state.
      */
     disabled?: boolean;
     /**
-     * The visual variant of the form switch button.
+     * When provided, the switch reflects a loading state.
      */
-    buttonVariant: FormSwitchButtonVariant;
+    loading?: boolean;
     /**
-     * The size of the form switch button.
+     * The event name as defined in the loginflow auth service.
      */
-    buttonSize: FormSwitchButtonSize;
+    event?: string;
     /**
-     * The event identifier/name as defined in `auth-svc`.
+     * Whether the switch is in a loading state.
      */
-    event?: string;
+    private _loading;
     /**
      * Overrides default behavior to render into light DOM.
      */
@@ -66,13 +82,41 @@ export declare class SbFormSwitch extends LitElement implements SbFormSwitchProp
      */
     get rootId(): string;
     /**
-     * The `id` of the link anchor element. Always derived from `rootId` with the
-     * link part segment appended.
+     * The `id` of the wrapper element, derived from `rootId` and the part name.
+     */
+    get wrapperId(): string;
+    /**
+     * The `id` of the prompt element, derived from `rootId` and the part name.
+     */
+    get promptId(): string;
+    /**
+     * The `id` of the spinner element, derived from `rootId` and the part name.
+     */
+    get spinnerId(): string;
+    /**
+     * The loading state, derived from the private `_loading` and `loading` prop.
+     */
+    get isLoading(): boolean | undefined;
+    /**
+     * Adds the click event listener.
+     */
+    connectedCallback(): void;
+    /**
+     * Removes the click event listener.
+     */
+    disconnectedCallback(): void;
+    /**
+     * Handles the click event, preventing execution when disabled/loading, firing
+     * the click event, and emitting to auth service.
+     */
+    private _handleClick;
+    /**
+     * Returns the prompt paragraph template for `"default"` form switches.
      */
-    get linkId(): string;
+    private _renderPrompt;
     /**
-     * Returns the link template for a `"default"` form switch.
+     * Returns the loading spinner template.
      */
-    private _renderLink;
+    private _renderSpinner;
     render(): import('../../../../../node_modules/lit-html').TemplateResult<1>;
 }

package/dist/components/renderers/_updated/form/form.stories/form-switch.stories.d.ts

@@ -3,8 +3,9 @@ declare const meta: Meta;
 export default meta;
 type Story = StoryObj;
 export declare const Basic: Story;
-export declare const Variant: Story;
+export declare const Type: Story;
 export declare const Label: Story;
 export declare const Prompt: Story;
 export declare const Disabled: Story;
+export declare const Loading: Story;
 export declare const Button: Story;

package/dist/components/renderers/_updated/form/form.types.d.ts

@@ -28,17 +28,18 @@ export type SbFormSeparatorProps = {
     childId?: string;
     content?: string;
 };
-export type FormSwitchVariant = "default" | "button";
-export type FormSwitchButtonVariant = RtgButtonBasicVariant;
-export type FormSwitchButtonSize = RtgButtonBasicSize;
-export type SbFormSwitchProps = {
+export type FormSwitchType = "default" | "button";
+export type FormSwitchVariant = RtgButtonBasicVariant;
+export type FormSwitchSize = RtgButtonBasicSize;
+export type FormSwitchProps = {
     seed: string;
     childId?: string;
+    type: FormSwitchType;
     variant: FormSwitchVariant;
+    size: FormSwitchSize;
     label: string;
     prompt?: string;
     disabled?: boolean;
-    buttonVariant: FormSwitchButtonVariant;
-    buttonSize: FormSwitchButtonSize;
+    loading?: boolean;
     event?: string;
 };