@frontegg/types 5.57.0 → 5.57.3

package/Localizations/LoginBoxLocalization/SplitPageTypes/index.d.ts

@@ -0,0 +1,25 @@
+interface Testimonial {
+    label: string;
+    subtitle: string;
+    text: string;
+}
+export interface TitleDescriptionComponentLocalization {
+    description: string;
+    titleBeforeCompanyName: string;
+    companyName: string;
+    titleAfterCompanyName: string;
+}
+export interface ValuesComponentLocalization {
+    value1: string;
+    value2?: string;
+    value3?: string;
+    value4?: string;
+}
+export interface TestimonialComponentLocalization {
+    testimonial1: Testimonial;
+    testimonial2?: Testimonial;
+    testimonial3?: Testimonial;
+    testimonial4?: Testimonial;
+    testimonial5?: Testimonial;
+}
+export {};

package/Localizations/LoginBoxLocalization/index.d.ts

@@ -16,4 +16,5 @@ export * from './socialLogins';
 export * from './acceptInvitation';
 export * from './activateAccount';
 export * from './recoveryMfa';
+export * from './SplitPageTypes';
 export declare type LoginBoxLocalization = LoginLocalization & SignupLocalization & ForgetPasswordLocalization & ResetPhoneNumberLocalization & ResetPasswordLocalization & SocialLoginsLocalization & AcceptInvitationLocalization & ActivateAccountLocalization & RecoveryMfaLocalization;

package/Localizations/LoginBoxLocalization/login.d.ts

@@ -1,3 +1,4 @@
+import { TestimonialComponentLocalization, TitleDescriptionComponentLocalization, ValuesComponentLocalization } from "./SplitPageTypes";
 export interface LoginLocalization {
     /**
      * strings in login page
@@ -264,6 +265,14 @@ export interface LoginLocalization {
          * EX: "Don't ask again on this device for {{count}} day"
          */
         forceMfaRememberThisDevice: string;
+        /**
+         * Localizations for split login components
+         */
+        splitLogin?: {
+            valuesComponent?: ValuesComponentLocalization;
+            testimonialComponent?: TestimonialComponentLocalization;
+            titleDescriptionComponent?: TitleDescriptionComponentLocalization;
+        };
         /**
          * Login disclaimer text
          * this text is optional

package/Localizations/LoginBoxLocalization/signup.d.ts

@@ -1,3 +1,4 @@
+import { TestimonialComponentLocalization, TitleDescriptionComponentLocalization, ValuesComponentLocalization } from "./SplitPageTypes";
 export interface SignupLocalizationOptions {
     /**
      * Sign up page title
@@ -165,6 +166,14 @@ export interface SignupLocalizationOptions {
      * Go to login link button text in Signup page header
      */
     successGoToLoginButton: string;
+    /**
+     * Localizations for split login components
+     */
+    splitSignUp?: {
+        valuesComponent?: ValuesComponentLocalization;
+        testimonialComponent?: TestimonialComponentLocalization;
+        titleDescriptionComponent?: TitleDescriptionComponentLocalization;
+    };
 }
 export interface SignupLocalization {
     /**

package/ThemeOptions/ComponentsOptions.d.ts

@@ -1,5 +1,27 @@
 import { CSSProperties, ExtendedCSSProperties } from '../Common';
 export declare type CustomComponent<T = {}> = null | string | ((props: T) => string | any);
+export interface ITestimonial {
+    image: string;
+}
+export interface ITestimonialComponent {
+    testimonial1: ITestimonial;
+    testimonial2?: ITestimonial;
+    testimonial3?: ITestimonial;
+    testimonial4?: ITestimonial;
+    testimonial5?: ITestimonial;
+}
+export interface ILogosComponent {
+    layout?: 'horizontal' | 'vertical';
+    logos?: {
+        logo1: string;
+        logo2?: string;
+        logo3?: string;
+        logo4?: string;
+        logo5?: string;
+        logo6?: string;
+    };
+}
+export declare type SideElement = 'testimonials' | 'values' | 'logos';
 export interface InputThemeOptions {
     /**
      * Input label style

package/ThemeOptions/LoginBoxTheme/LoginBoxCommon.d.ts

@@ -1,6 +1,6 @@
 import { ExtendedCSSProperties } from '../../Common';
-import { BaseTheme, BaseThemeOptions } from '../index';
-import { ButtonThemeOptions, CustomComponent, InputThemeOptions } from '../ComponentsOptions';
+import { BaseTheme, BaseThemeOptions, SocialLoginsThemeOptions } from '../index';
+import { SideElement, ButtonThemeOptions, CustomComponent, InputThemeOptions, ILogosComponent, ITestimonialComponent } from '../ComponentsOptions';
 /**
  *   @RootElement
  *   - @WrapperElement
@@ -33,7 +33,7 @@ interface LogoComponent {
      */
     style?: ExtendedCSSProperties;
 }
-interface LayoutOptions {
+export interface LayoutOptions {
     /**
      * Layout type for login box page, Default is Center login box elements
      * By choosing Side type you can provide HTML element for the other
@@ -41,6 +41,11 @@ interface LayoutOptions {
      * with default width equal to 50% of the window width
      */
     type: 'float-right' | 'center' | 'float-left';
+    /**
+     * splitSize is for the side element to setup how much % of the window side elements wi'll take
+     * default is 50 = 50%;
+     */
+    splitSize: number;
     /**
      * Will be displayed if type is 'float-right' or 'float-left',
      * Accepts:
@@ -50,6 +55,52 @@ interface LayoutOptions {
      */
     sideElement?: CustomComponent;
     sideElementStyle?: ExtendedCSSProperties;
+    sideContainerStyle?: ExtendedCSSProperties;
+    /**
+     * Will be displayed if type is 'float-right' or 'float-left',
+     * Accepts:
+     *  - values, testimonials, titleDescription, logos
+     * only two elements can be active together
+     */
+    sideElements?: {
+        logos?: ILogosComponent;
+        testimonials?: ITestimonialComponent;
+        showDivider?: boolean;
+        showTitleDivider?: boolean;
+        activeElements?: {
+            titleDescription?: boolean;
+            element1: SideElement;
+            element2?: SideElement;
+        };
+    };
+    sideElementsStyle?: {
+        dividerStyle?: ExtendedCSSProperties;
+        mainSideContainerStyle?: ExtendedCSSProperties;
+        logos?: {
+            logoStyle?: ExtendedCSSProperties;
+            logosContainerStyle?: ExtendedCSSProperties;
+        };
+        values?: {
+            valuesIconStyle?: ExtendedCSSProperties;
+            valuesContainerStyle?: ExtendedCSSProperties;
+            valuesTextStyle?: ExtendedCSSProperties;
+        };
+        testimonials?: {
+            testimonialsContainerStyle?: ExtendedCSSProperties;
+            testimonialsTitleStyle?: ExtendedCSSProperties;
+            testtomonialsSubtitleStyle?: ExtendedCSSProperties;
+            testimonialsTextStyle?: ExtendedCSSProperties;
+            testimonialsIndicatorStyle?: ExtendedCSSProperties;
+            testimonialsActiveIndicatorStyle?: ExtendedCSSProperties;
+            testimonialsIndicatorContainerStyle?: ExtendedCSSProperties;
+        };
+        titleDescription?: {
+            titleDescriptionContainerStyle?: ExtendedCSSProperties;
+            titleDescriptionTitleStyle?: ExtendedCSSProperties;
+            titleDescriptionCompanyNameStyle?: ExtendedCSSProperties;
+            titleDescriptionDescriptionStyle?: ExtendedCSSProperties;
+        };
+    };
 }
 interface LoginBoxOptionalCommon {
     /**
@@ -84,7 +135,7 @@ interface LoginBoxOptionalCommon {
      * box = inside the login box element
      * page = displayed at the bottom of the page
      */
-    poweredByPlacement?: 'box' | 'page';
+    poweredByPlacement?: 'box' | 'page' | 'leftBottomCorner';
     /**
      * BoxElement
      * It is a Card component placed inside the [WrapperElement]{@link pageStyle}
@@ -137,6 +188,11 @@ interface LoginBoxOptionalCommon {
      * css style for every state (base, hover, focus, disabled, etc...)
      */
     submitButtonTheme?: ButtonThemeOptions;
+    /**
+     * Option to customize login box social logins buttons by providing
+     * layous options for every button and element
+     */
+    socialLogins?: SocialLoginsThemeOptions;
 }
 export interface LoginBoxCommonTheme extends BaseTheme, LoginBoxOptionalCommon {
     /**

package/ThemeOptions/LoginBoxTheme/LoginPageTheme.d.ts

@@ -19,6 +19,7 @@ export interface ResendOTCProps {
 }
 export interface LoginDisclaimerOptions {
     textStyle: ExtendedCSSProperties;
+    disclaimerContainerStyle?: ExtendedCSSProperties;
     terms: {
         enabled?: boolean;
         linkStyle?: ExtendedCSSProperties;
@@ -53,6 +54,7 @@ export interface LoginPageComponentsTheme {
      * passing 'null' will hide the signup message
      */
     signupMessage?: CustomComponent<GoToSignupMessageProps>;
+    signupMessagePlacement?: 'box' | 'page';
     /**
      * Direct css style for 'Go to signup component'
      */

package/ThemeOptions/LoginBoxTheme/SignupPageTheme.d.ts

@@ -11,6 +11,7 @@ export interface GoToLoginMessageProps {
 }
 export interface SignUpDisclaimerOptions {
     hasCheckbox: boolean;
+    disclaimerContainerStyle?: ExtendedCSSProperties;
     textStyle?: ExtendedCSSProperties;
     checkBoxStyle?: {
         unchecked?: {
@@ -85,6 +86,7 @@ export interface SignupPageComponentsTheme {
      * on sign page can be displayed as mandatory checkbox or text info
      */
     disclaimer?: SignUpDisclaimerOptions;
+    loginMessagePlacement?: 'box' | 'page';
 }
 export interface SignupPageThemeOptions extends LoginBoxCommonThemeOptions, SignupPageComponentsTheme {
 }

package/ThemeOptions/LoginBoxTheme/SocialLoginsTheme.d.ts

@@ -10,10 +10,28 @@ export interface SocialLoginComponentKeyRender {
     githubIcon: {};
 }
 export declare type SocialLoginCustomComponent<T extends keyof SocialLoginComponentKeyRender> = string | ((props?: SocialLoginComponentKeyRender[T]) => string | any);
-export interface SocialLoginsThemeOptions extends BaseThemeOptions {
+export interface SocialLoginsLayoutBase {
+    placement?: 'bottom' | 'top';
+    stackedContainerStyle?: ExtendedCSSProperties;
+    stackedButtonsStyle?: Omit<ButtonThemeOptions, 'disabled'>;
+    mainButtonStyle?: Omit<ButtonThemeOptions, 'disabled'>;
+}
+declare type SocialLoginTypes = 'google' | 'facebook' | 'microsoft' | 'github';
+export interface SocialLoginsLayoutStacked extends SocialLoginsLayoutBase {
+    mode: 'stack';
+    mainButton?: SocialLoginTypes;
+}
+export declare type SocialLoginsLayoutEventually = SocialLoginsLayoutBase & {
+    mode: 'eventually';
+};
+export declare type SocialLoginsLayout = SocialLoginsLayoutStacked | SocialLoginsLayoutEventually;
+export interface SocialLoginsCustomComponents {
     divider?: SocialLoginCustomComponent<'divider'>;
     dividerStyle?: ExtendedCSSProperties;
     dividerTextStyle?: ExtendedCSSProperties;
+}
+export interface SocialLoginsThemeOptions extends BaseThemeOptions, SocialLoginsCustomComponents {
+    socialLoginsLayout?: SocialLoginsLayout;
     containerStyle?: ExtendedCSSProperties;
     buttonStyle?: Omit<ButtonThemeOptions, 'disabled'>;
     iconsOnly?: boolean;
@@ -27,6 +45,7 @@ export interface SocialLoginsThemeOptions extends BaseThemeOptions {
     githubButtonStyle?: Omit<ButtonThemeOptions, 'disabled'>;
 }
 export interface SocialLoginsTheme extends BaseTheme {
+    socialLoginsLayout?: SocialLoginsLayout;
     dividerStyle?: ExtendedCSSProperties;
     dividerTextStyle?: ExtendedCSSProperties;
     divider?: SocialLoginCustomComponent<'divider'>;
@@ -42,3 +61,4 @@ export interface SocialLoginsTheme extends BaseTheme {
     githubIcon?: SocialLoginCustomComponent<'githubIcon'>;
     githubButtonStyle?: Omit<ButtonThemeOptions, 'disabled'>;
 }
+export {};

package/ThemeOptions/LoginBoxTheme/index.d.ts

@@ -29,8 +29,8 @@ export interface AuthPageThemeOptions extends BaseThemeOptions, AuthPageCustomCo
     };
 }
 export interface LoginBoxThemeOptions extends LoginBoxCommonThemeOptions {
-    themeName?: 'classic' | 'modern' | 'vivid' | 'dark';
-    poweredByPlacement?: 'box' | 'page';
+    themeName?: 'classic' | 'modern' | 'vivid' | 'dark' | 'modernV2' | 'darkV2' | 'classicV2' | 'vividV2';
+    poweredByPlacement?: 'box' | 'page' | 'leftBottomCorner';
     acceptInvitation?: AcceptInvitationPageThemeOptions;
     activateAccount?: ActivateAccountPageThemeOptions;
     forgotPassword?: ForgotPasswordPageThemeOptions;
@@ -42,7 +42,7 @@ export interface LoginBoxThemeOptions extends LoginBoxCommonThemeOptions {
     loader?: LoaderThemeOptions;
 }
 export interface LoginBoxTheme extends LoginBoxCommonTheme {
-    themeName: 'classic' | 'modern' | 'vivid' | 'dark';
+    themeName: 'classic' | 'modern' | 'vivid' | 'dark' | 'modernV2' | 'darkV2' | 'classicV2' | 'vividV2';
     acceptInvitation: AcceptInvitationPageTheme;
     activateAccount: ActivateAccountPageTheme;
     forgotPassword: ForgotPasswordPageTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frontegg/types",
-  "version": "5.57.0",
+  "version": "5.57.3",
   "main": "./node/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",