@saasbase-io/core-elements 1.9.0 → 1.10.0

package/dist/components/renderers/_updated/provider/_provider-field.d.ts

@@ -0,0 +1,111 @@
+import { LitElement } from '../../../../../node_modules/lit';
+import { Provider, ProviderButtonContent, ProviderButtonIconAlign, ProviderButtonSize, ProviderButtonVariant, ProviderFieldOverride, ProviderFieldProps } from './provider.types';
+/**
+ * A wrapper field, containing and styling auth provider buttons.
+ * @element sb-provider-field
+ *
+ * @part provider-field (rtg-field)
+ * @part provider-field-button (sb-provider-button)
+ */
+export declare class SbProviderField extends LitElement implements ProviderFieldProps {
+    private static readonly _ROOT;
+    private static readonly _BUTTON;
+    /**
+     * The stable CSS part names exposed for external targeting.
+     */
+    static get parts(): {
+        root: string;
+        button: string;
+    };
+    /**
+     * A unique value used as a substring in the generated part/child IDs, when
+     * the `child-id` prop is not provided.
+     */
+    seed: string;
+    /**
+     * The `id` value given to the root child/part and used as the base of other
+     * child/part IDs.
+     */
+    childId?: string;
+    /**
+     * The providers included as provider buttons in this field.
+     */
+    providers: Provider[];
+    /**
+     * The `content` prop passed to each of the provider buttons.
+     */
+    content?: ProviderButtonContent;
+    /**
+     * The `variant` prop passed to each of the provider buttons.
+     */
+    variant?: ProviderButtonVariant;
+    /**
+     * The `size` prop passed to each of the provider buttons.
+     */
+    size?: ProviderButtonSize;
+    /**
+     * The `prompt` prop passed to each of the provider buttons.
+     */
+    prompt?: string;
+    /**
+     * The `icon-align` prop passed to each of the provider buttons.
+     */
+    iconAlign?: ProviderButtonIconAlign;
+    /**
+     * The `label` prop passed to each of the provider buttons.
+     */
+    label?: string;
+    /**
+     * The `disabled` prop passed to each of the provider buttons.
+     */
+    disabled?: boolean;
+    /**
+     * The `loading` prop passed to each of the provider buttons.
+     */
+    loading?: boolean;
+    /**
+     * The `event` prop passed to each of the provider buttons.
+     */
+    event?: string;
+    /**
+     * A list of provider-specific prop overrides.
+     */
+    overrides: ProviderFieldOverride[];
+    /**
+     * Overrides default behavior to render into light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The `id` of the root element. Equal to `childId` when provided, otherwise
+     * derived from the component's part name and `seed`.
+     */
+    get rootId(): string;
+    /**
+     * The `id` of the provider button element, derived from `rootId` with the
+     * button part name appended.
+     */
+    get buttonId(): string;
+    /**
+     * The number of columns within the field, given to the root element via its
+     * `data-columns` attribute. In hyphenated values (e.g. `"two-three"`), the
+     * first part is the number of columns in the first row, and the second part
+     * is the number of columns in the second row.
+     */
+    get columns(): "one" | "three" | "two-three" | "three-four" | "four";
+    /**
+     * The `providers` array without any duplicates.
+     */
+    private get _providers();
+    /**
+     * The `overrides` array without any duplicate `provider` entries (i.e. no
+     * two override items have the same `provider` value).
+     */
+    private get _overrides();
+    /**
+     * Returns the template for the button part, specifically an
+     * `sb-provider-button` element with props originating from `overrides` if
+     * given, otherwise the general prop given to this field component.
+     */
+    private _renderButton;
+    render(): import('../../../../../node_modules/lit-html').TemplateResult<1>;
+}

package/dist/components/renderers/_updated/provider/index.d.ts

@@ -1,7 +1,9 @@
 import { SbProviderButton } from './_provider-button';
-export { SbProviderButton };
+import { SbProviderField } from './_provider-field';
+export { SbProviderButton, SbProviderField };
 declare global {
     interface HTMLElementTagNameMap {
         "sb-provider-button": SbProviderButton;
+        "sb-provider-field": SbProviderField;
     }
 }

package/dist/components/renderers/_updated/provider/provider.stories/provider-field.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Basic: Story;
+export declare const Content: Story;
+export declare const Variant: Story;
+export declare const Size: Story;
+export declare const Prompt: Story;
+export declare const IconAlign: Story;
+export declare const Label: Story;
+export declare const Disabled: Story;
+export declare const Loading: Story;
+export declare const Overrides: Story;

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

@@ -4,17 +4,32 @@ export type ProviderButtonContent = "icon" | "icon-label" | "label";
 export type ProviderButtonVariant = RtgButtonBasicVariant;
 export type ProviderButtonSize = RtgButtonBasicSize;
 export type ProviderButtonIconAlign = IconAlign;
-export type ProviderButtonProps = {
-    seed: string;
+type BaseProviderButtonProps = {
+    seed?: string;
     childId?: string;
     provider: Provider;
+    content?: ProviderButtonContent;
+    variant?: ProviderButtonVariant;
+    size?: ProviderButtonSize;
+    prompt?: string;
+    iconAlign?: ProviderButtonIconAlign;
+    label?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    event?: string;
+};
+export type ProviderButtonProps = Omit<BaseProviderButtonProps, "seed" | "content" | "variant" | "size" | "prompt" | "iconAlign"> & {
+    seed: string;
     content: ProviderButtonContent;
     variant: ProviderButtonVariant;
     size: ProviderButtonSize;
     prompt: string;
     iconAlign: ProviderButtonIconAlign;
-    label?: string;
-    disabled?: boolean;
-    loading?: boolean;
-    event?: string;
 };
+export type ProviderFieldOverride = BaseProviderButtonProps;
+export type ProviderFieldProps = Omit<BaseProviderButtonProps, "seed" | "provider"> & {
+    seed: string;
+    providers: Provider[];
+    overrides: ProviderFieldOverride[];
+};
+export {};