Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@frontegg/types
Advanced tools
@frontegg/types - npm Package Compare versions
Comparing version 4.39.1 to 4.39.2-dashboard
| import * as CSS from 'csstype'; | ||
| export declare type CSSProperties = CSS.Properties; | ||
| export declare type Color = CSSProperties['color']; | ||
| export declare type ExtendedCSSProperties = CSSProperties | { | ||
| [k in string]?: CSSProperties; | ||
| }; |
@@ -1,2 +0,2 @@ | ||
| import { KeyValuePair, LogLevel } from '@frontegg/rest-api/src/interfaces'; | ||
| import { KeyValuePair, LogLevel } from '@frontegg/rest-api'; | ||
| export interface ContextOptions { | ||
@@ -8,2 +8,6 @@ /** | ||
| /** | ||
| * Frontegg clientId. Identifier from your Frontegg workspace account. | ||
| */ | ||
| clientId?: string; | ||
| /** | ||
| * Whether or not to send Fetch request with Credentials to the Backend | ||
@@ -10,0 +14,0 @@ * default: 'include' |
@@ -5,2 +5,3 @@ import { EnhancedStore } from '@frontegg/redux-store'; | ||
| name: string; | ||
| iframeRendering: boolean; | ||
| loading: boolean; | ||
@@ -7,0 +8,0 @@ customElementName: string; |
@@ -12,6 +12,2 @@ import { RedirectOptions } from '@frontegg/rest-api'; | ||
| themeOptions?: FronteggThemeOptions; | ||
| /** | ||
| * Authentication header logo image | ||
| * @deprecated, use components.authPage.headerImage | ||
| */ | ||
| headerImage?: string; | ||
@@ -65,2 +61,6 @@ /** | ||
| /** | ||
| * Option to display login box as Preview mode without HTTP requests for builder customization mode purpose | ||
| */ | ||
| builderMode?: boolean; | ||
| /** | ||
| * Connect AdminPortal redirects with the wrapper application router | ||
@@ -67,0 +67,0 @@ */ |
| import { PaletteColorOptions, PaletteGreyOptions } from './ThemeOptions/Palette'; | ||
| import { FronteggThemeOptions } from './ThemeOptions'; | ||
| declare type PageMetadata = { | ||
@@ -75,2 +76,3 @@ visibility: 'hidden' | 'always' | 'byPermissions'; | ||
| theme?: ThemeMetadata; | ||
| themeV2?: FronteggThemeOptions; | ||
| navigation?: NavigationMetadata; | ||
@@ -77,0 +79,0 @@ }; |
203
index.js
@@ -135,197 +135,5 @@ var isMergeableObject = function isMergeableObject(value) { | ||
| /** | ||
| * Returns a number whose value is limited to the given range. | ||
| * @param {number} value The value to be clamped | ||
| * @param {number} min The lower boundary of the output range | ||
| * @param {number} max The upper boundary of the output range | ||
| * @returns {number} A number in the range [min, max] | ||
| */ | ||
| function clamp(value, min = 0, max = 1) { | ||
| return Math.min(Math.max(min, value), max); | ||
| } | ||
| /** | ||
| * Converts a color from CSS hex format to CSS rgb format. | ||
| * @param {string} color - Hex color, i.e. #nnn or #nnnnnn | ||
| * @returns {string} A CSS rgb color string | ||
| */ | ||
| function hexToRgb(color) { | ||
| color = color.substr(1); | ||
| const re = new RegExp(`.{1,${color.length >= 6 ? 2 : 1}}`, 'g'); | ||
| let colors = color.match(re); | ||
| if (colors && colors[0].length === 1) { | ||
| colors = colors.map((n) => n + n); | ||
| } | ||
| return colors | ||
| ? `rgb${colors.length === 4 ? 'a' : ''}(${colors | ||
| .map((n, index) => { | ||
| return index < 3 ? parseInt(n, 16) : Math.round((parseInt(n, 16) / 255) * 1000) / 1000; | ||
| }) | ||
| .join(', ')})` | ||
| : ''; | ||
| } | ||
| function intToHex(int) { | ||
| const hex = int.toString(16); | ||
| return hex.length === 1 ? `0${hex}` : hex; | ||
| } | ||
| /** | ||
| * Returns an object with the type and values of a color. | ||
| * | ||
| * Note: Does not support rgb % values. | ||
| * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla() | ||
| * @returns {object} - A MUI color object: {type: string, values: number[]} | ||
| */ | ||
| function decomposeColor(color) { | ||
| // Idempotent | ||
| if (color.type) { | ||
| return color; | ||
| } | ||
| if (color.charAt(0) === '#') { | ||
| return decomposeColor(hexToRgb(color)); | ||
| } | ||
| const marker = color.indexOf('('); | ||
| const type = color.substring(0, marker); | ||
| if (['rgb', 'rgba', 'hsl', 'hsla', 'color'].indexOf(type) === -1) { | ||
| throw new Error('MUI: Unsupported `%s` color.\n' + | ||
| 'The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color(). ' + color); | ||
| } | ||
| let values = color.substring(marker + 1, color.length - 1); | ||
| let colorSpace; | ||
| if (type === 'color') { | ||
| values = values.split(' '); | ||
| colorSpace = values.shift(); | ||
| if (values.length === 4 && values[3].charAt(0) === '/') { | ||
| values[3] = values[3].substr(1); | ||
| } | ||
| if (['srgb', 'display-p3', 'a98-rgb', 'prophoto-rgb', 'rec-2020'].indexOf(colorSpace) === -1) { | ||
| throw new Error('MUI: unsupported `%s` color space.\n' + | ||
| 'The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.' + colorSpace); | ||
| } | ||
| } | ||
| else { | ||
| values = values.split(','); | ||
| } | ||
| values = values.map((value) => parseFloat(value)); | ||
| return { type, values, colorSpace }; | ||
| } | ||
| /** | ||
| * Converts a color object with type and values to a string. | ||
| * @param {object} color - Decomposed color | ||
| * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla' | ||
| * @param {array} color.values - [n,n,n] or [n,n,n,n] | ||
| * @returns {string} A CSS color string | ||
| */ | ||
| function recomposeColor(color) { | ||
| const { type, colorSpace } = color; | ||
| let { values } = color; | ||
| if (type.indexOf('rgb') !== -1) { | ||
| // Only convert the first 3 values to int (i.e. not alpha) | ||
| values = values.map((n, i) => (i < 3 ? parseInt(n, 10) : n)); | ||
| } | ||
| else if (type.indexOf('hsl') !== -1) { | ||
| values[1] = `${values[1]}%`; | ||
| values[2] = `${values[2]}%`; | ||
| } | ||
| if (type.indexOf('color') !== -1) { | ||
| values = `${colorSpace} ${values.join(' ')}`; | ||
| } | ||
| else { | ||
| values = `${values.join(', ')}`; | ||
| } | ||
| return `${type}(${values})`; | ||
| } | ||
| /** | ||
| * Converts a color from CSS rgb format to CSS hex format. | ||
| * @param {string} color - RGB color, i.e. rgb(n, n, n) | ||
| * @returns {string} A CSS rgb color string, i.e. #nnnnnn | ||
| */ | ||
| function rgbToHex(color) { | ||
| // Idempotent | ||
| if (color.indexOf('#') === 0) { | ||
| return color; | ||
| } | ||
| const { values } = decomposeColor(color); | ||
| return `#${values.map((n, i) => intToHex(i === 3 ? Math.round(255 * n) : n)).join('')}`; | ||
| } | ||
| /** | ||
| * Darkens a color. | ||
| * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color() | ||
| * @param {number} coefficient - multiplier in the range 0 - 1 | ||
| * @returns {string} A CSS color string. Hex input values are returned as rgb | ||
| */ | ||
| function darken(color, coefficient) { | ||
| color = decomposeColor(color); | ||
| coefficient = clamp(coefficient); | ||
| if (color.type.indexOf('hsl') !== -1) { | ||
| color.values[2] *= 1 - coefficient; | ||
| } | ||
| else if (color.type.indexOf('rgb') !== -1 || color.type.indexOf('color') !== -1) { | ||
| for (let i = 0; i < 3; i += 1) { | ||
| color.values[i] *= 1 - coefficient; | ||
| } | ||
| } | ||
| return recomposeColor(color); | ||
| } | ||
| /** | ||
| * Lightens a color. | ||
| * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color() | ||
| * @param {number} coefficient - multiplier in the range 0 - 1 | ||
| * @returns {string} A CSS color string. Hex input values are returned as rgb | ||
| */ | ||
| function lighten(color, coefficient) { | ||
| color = decomposeColor(color); | ||
| coefficient = clamp(coefficient); | ||
| if (color.type.indexOf('hsl') !== -1) { | ||
| color.values[2] += (100 - color.values[2]) * coefficient; | ||
| } | ||
| else if (color.type.indexOf('rgb') !== -1) { | ||
| for (let i = 0; i < 3; i += 1) { | ||
| color.values[i] += (255 - color.values[i]) * coefficient; | ||
| } | ||
| } | ||
| else if (color.type.indexOf('color') !== -1) { | ||
| for (let i = 0; i < 3; i += 1) { | ||
| color.values[i] += (1 - color.values[i]) * coefficient; | ||
| } | ||
| } | ||
| return recomposeColor(color); | ||
| } | ||
| const generateMainColorObject = (color) => { | ||
| if (!!color) { | ||
| return { | ||
| main: color, | ||
| light: rgbToHex(lighten(color, 0.4)), | ||
| dark: rgbToHex(darken(color, 0.15)), | ||
| hover: rgbToHex(darken(color, 0.15)), | ||
| active: rgbToHex(darken(color, 0.20)), | ||
| }; | ||
| } | ||
| }; | ||
| const generateSubColorObject = (color) => { | ||
| if (!!color) { | ||
| return { | ||
| main: color, | ||
| light: lighten(color, 0.7), | ||
| dark: darken(color, 0.2), | ||
| }; | ||
| } | ||
| }; | ||
| const getPalette = (theme, defaultTheme) => { | ||
| var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m; | ||
| if (!(theme === null || theme === void 0 ? void 0 : theme.palette) || typeof ((_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.primary) !== 'string') { | ||
| return {}; | ||
| } | ||
| return Object.assign(Object.assign({}, defaultTheme), { palette: { | ||
| primary: Object.assign(Object.assign({}, generateMainColorObject((_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.primary)), { contrastText: (_d = (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c.primaryText) !== null && _d !== void 0 ? _d : '#000000' }), | ||
| secondary: Object.assign(Object.assign({}, generateMainColorObject((_e = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _e === void 0 ? void 0 : _e.secondary)), { contrastText: (_g = (_f = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _f === void 0 ? void 0 : _f.secondaryText) !== null && _g !== void 0 ? _g : '#000000' }), | ||
| danger: Object.assign(Object.assign({}, generateMainColorObject((_h = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _h === void 0 ? void 0 : _h.error)), { contrastText: '#FFF' }), | ||
| success: Object.assign(Object.assign({}, generateSubColorObject((_j = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _j === void 0 ? void 0 : _j.success)), { contrastText: '#FFF' }), | ||
| error: Object.assign(Object.assign({}, generateSubColorObject((_k = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _k === void 0 ? void 0 : _k.error)), { contrastText: '#FFF' }), | ||
| warning: Object.assign(Object.assign({}, generateSubColorObject((_l = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _l === void 0 ? void 0 : _l.warning)), { contrastText: '#FFF' }), | ||
| info: Object.assign(Object.assign({}, generateSubColorObject((_m = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _m === void 0 ? void 0 : _m.info)), { contrastText: '#FFF' }), | ||
| } }); | ||
| }; | ||
| const defaultMetadata = { | ||
| theme: {}, | ||
| themeV2: {}, | ||
| navigation: { | ||
@@ -389,3 +197,3 @@ usage: { | ||
| constructor() { | ||
| this._theme = defaultMetadata.theme; | ||
| this._theme = defaultMetadata.themeV2; | ||
| this._navigation = defaultMetadata.navigation; | ||
@@ -413,10 +221,11 @@ } | ||
| set(metadata) { | ||
| var _a, _b, _c; | ||
| var _a, _b, _c, _d; | ||
| try { | ||
| this._navigation = deepMerge.all([(_a = defaultMetadata.navigation) !== null && _a !== void 0 ? _a : {}, (_b = metadata === null || metadata === void 0 ? void 0 : metadata.navigation) !== null && _b !== void 0 ? _b : {}]); | ||
| this._theme = deepMerge.all([(_c = defaultMetadata.theme) !== null && _c !== void 0 ? _c : {}, getPalette(metadata === null || metadata === void 0 ? void 0 : metadata.theme, defaultMetadata.theme)]); | ||
| this._theme = deepMerge.all([(_c = defaultMetadata.themeV2) !== null && _c !== void 0 ? _c : {}, (_d = metadata === null || metadata === void 0 ? void 0 : metadata.themeV2) !== null && _d !== void 0 ? _d : {}]); | ||
| debugger; | ||
| } | ||
| catch (e) { | ||
| this._navigation = defaultMetadata.navigation; | ||
| this._theme = defaultMetadata.theme; | ||
| this._theme = defaultMetadata.themeV2; | ||
| } | ||
@@ -423,0 +232,0 @@ } |
@@ -129,2 +129,6 @@ export interface SecurityLocalization { | ||
| /** | ||
| * Max attempts before lockout user input error message | ||
| */ | ||
| attemptsInputErrorMessage: string; | ||
| /** | ||
| * Cancel editing lockout policy button text | ||
@@ -131,0 +135,0 @@ */ |
@@ -19,3 +19,4 @@ import { ValidationLocalization } from './LocalizationType'; | ||
| adminPortal?: AdminPortalLocalizationOverrides; | ||
| custom?: Record<string, string>; | ||
| } | ||
| export {}; |
@@ -43,3 +43,4 @@ import { AdminPortalLocalization } from './AdminPortalLocalizations'; | ||
| adminPortal: AdminPortalLocalization; | ||
| custom: Record<string, string>; | ||
| } | ||
| export {}; |
@@ -7,2 +7,6 @@ export interface AcceptInvitationLocalization { | ||
| /** | ||
| * Accept invitation page title | ||
| */ | ||
| title: string; | ||
| /** | ||
| * Title to be displayed if accept invitation succeeded | ||
@@ -9,0 +13,0 @@ */ |
@@ -7,2 +7,6 @@ export interface ActivateAccountLocalization { | ||
| /** | ||
| * Activate account page title | ||
| */ | ||
| title: string; | ||
| /** | ||
| * New password input label | ||
@@ -9,0 +13,0 @@ */ |
@@ -7,2 +7,10 @@ export interface ForgetPasswordLocalization { | ||
| /** | ||
| * Forget password page title | ||
| */ | ||
| title: string; | ||
| /** | ||
| * Text displayed in forget password form before email input | ||
| */ | ||
| description: string; | ||
| /** | ||
| * Forget password form email input label | ||
@@ -9,0 +17,0 @@ */ |
@@ -9,2 +9,10 @@ import { LoginLocalization } from './login'; | ||
| import { RecoveryMfaLocalization } from './recoveryMfa'; | ||
| export * from './login'; | ||
| export * from './signup'; | ||
| export * from './forgetPassword'; | ||
| export * from './resetPassword'; | ||
| export * from './socialLogins'; | ||
| export * from './acceptInvitation'; | ||
| export * from './activateAccount'; | ||
| export * from './recoveryMfa'; | ||
| export declare type LoginBoxLocalization = LoginLocalization & SignupLocalization & ForgetPasswordLocalization & ResetPasswordLocalization & SocialLoginsLocalization & AcceptInvitationLocalization & ActivateAccountLocalization & RecoveryMfaLocalization; |
@@ -7,2 +7,6 @@ export interface LoginLocalization { | ||
| /** | ||
| * Login page title | ||
| */ | ||
| title: string; | ||
| /** | ||
| * Go to signup message in Login page header | ||
@@ -61,2 +65,6 @@ */ | ||
| /** | ||
| * String displayed as separator for sign in with social login | ||
| */ | ||
| signInWithSocialLogin: string; | ||
| /** | ||
| * Button text to return to main login page | ||
@@ -66,2 +74,6 @@ */ | ||
| /** | ||
| * Login with MFA title | ||
| */ | ||
| mfaTitle: string; | ||
| /** | ||
| * Login with MFA six digits input label If MFA is enabled | ||
@@ -79,2 +91,10 @@ */ | ||
| /** | ||
| * Error displayed if two factor code input is empty | ||
| */ | ||
| twoFactorCodeIsRequired: string; | ||
| /** | ||
| * Error displayed if two code length less than 8 characters | ||
| */ | ||
| twoFactorCodeLengthAtLeast8: string; | ||
| /** | ||
| * text of remember device CheckBox If MFA is enabled | ||
@@ -93,2 +113,6 @@ * EX: "Don't ask again on this device for {{count}} day" | ||
| /** | ||
| * Disable MFA page title after choose to recover mfa from login screen | ||
| */ | ||
| recoverMfaTitle: string; | ||
| /** | ||
| * Disable MFA button click here text in MFA section if it's enabled | ||
@@ -106,2 +130,6 @@ */ | ||
| /** | ||
| * Error message shown when trying to login without public policy | ||
| */ | ||
| missingPolicyErrorMessage: string; | ||
| /** | ||
| * Magic link title if login strategy is MagicLink | ||
@@ -108,0 +136,0 @@ */ |
@@ -7,2 +7,10 @@ export interface ResetPasswordLocalization { | ||
| /** | ||
| * Reset password page title | ||
| */ | ||
| title: string; | ||
| /** | ||
| * Text displayed in reset password form before password inputs | ||
| */ | ||
| description: string; | ||
| /** | ||
| * New password input label | ||
@@ -9,0 +17,0 @@ */ |
@@ -7,2 +7,6 @@ export interface SignupLocalization { | ||
| /** | ||
| * Sign up page title | ||
| */ | ||
| title: string; | ||
| /** | ||
| * Signup name input label | ||
@@ -70,2 +74,6 @@ */ | ||
| /** | ||
| * String displayed as separator for sign up with social login | ||
| */ | ||
| signUpWithSocialLogin: string; | ||
| /** | ||
| * Go to login message in signup page header | ||
@@ -72,0 +80,0 @@ */ |
@@ -8,5 +8,5 @@ import { FronteggMetadata } from '../FronteggMetadata'; | ||
| static set(metadata?: FronteggMetadata, name?: string): Metadata; | ||
| get theme(): Required<FronteggMetadata>['theme']; | ||
| get theme(): Required<FronteggMetadata>['themeV2']; | ||
| get navigation(): Required<FronteggMetadata>['navigation']; | ||
| set(metadata?: FronteggMetadata): void; | ||
| } |
@@ -137,197 +137,5 @@ 'use strict'; | ||
| /** | ||
| * Returns a number whose value is limited to the given range. | ||
| * @param {number} value The value to be clamped | ||
| * @param {number} min The lower boundary of the output range | ||
| * @param {number} max The upper boundary of the output range | ||
| * @returns {number} A number in the range [min, max] | ||
| */ | ||
| function clamp(value, min = 0, max = 1) { | ||
| return Math.min(Math.max(min, value), max); | ||
| } | ||
| /** | ||
| * Converts a color from CSS hex format to CSS rgb format. | ||
| * @param {string} color - Hex color, i.e. #nnn or #nnnnnn | ||
| * @returns {string} A CSS rgb color string | ||
| */ | ||
| function hexToRgb(color) { | ||
| color = color.substr(1); | ||
| const re = new RegExp(`.{1,${color.length >= 6 ? 2 : 1}}`, 'g'); | ||
| let colors = color.match(re); | ||
| if (colors && colors[0].length === 1) { | ||
| colors = colors.map((n) => n + n); | ||
| } | ||
| return colors | ||
| ? `rgb${colors.length === 4 ? 'a' : ''}(${colors | ||
| .map((n, index) => { | ||
| return index < 3 ? parseInt(n, 16) : Math.round((parseInt(n, 16) / 255) * 1000) / 1000; | ||
| }) | ||
| .join(', ')})` | ||
| : ''; | ||
| } | ||
| function intToHex(int) { | ||
| const hex = int.toString(16); | ||
| return hex.length === 1 ? `0${hex}` : hex; | ||
| } | ||
| /** | ||
| * Returns an object with the type and values of a color. | ||
| * | ||
| * Note: Does not support rgb % values. | ||
| * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla() | ||
| * @returns {object} - A MUI color object: {type: string, values: number[]} | ||
| */ | ||
| function decomposeColor(color) { | ||
| // Idempotent | ||
| if (color.type) { | ||
| return color; | ||
| } | ||
| if (color.charAt(0) === '#') { | ||
| return decomposeColor(hexToRgb(color)); | ||
| } | ||
| const marker = color.indexOf('('); | ||
| const type = color.substring(0, marker); | ||
| if (['rgb', 'rgba', 'hsl', 'hsla', 'color'].indexOf(type) === -1) { | ||
| throw new Error('MUI: Unsupported `%s` color.\n' + | ||
| 'The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color(). ' + color); | ||
| } | ||
| let values = color.substring(marker + 1, color.length - 1); | ||
| let colorSpace; | ||
| if (type === 'color') { | ||
| values = values.split(' '); | ||
| colorSpace = values.shift(); | ||
| if (values.length === 4 && values[3].charAt(0) === '/') { | ||
| values[3] = values[3].substr(1); | ||
| } | ||
| if (['srgb', 'display-p3', 'a98-rgb', 'prophoto-rgb', 'rec-2020'].indexOf(colorSpace) === -1) { | ||
| throw new Error('MUI: unsupported `%s` color space.\n' + | ||
| 'The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.' + colorSpace); | ||
| } | ||
| } | ||
| else { | ||
| values = values.split(','); | ||
| } | ||
| values = values.map((value) => parseFloat(value)); | ||
| return { type, values, colorSpace }; | ||
| } | ||
| /** | ||
| * Converts a color object with type and values to a string. | ||
| * @param {object} color - Decomposed color | ||
| * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla' | ||
| * @param {array} color.values - [n,n,n] or [n,n,n,n] | ||
| * @returns {string} A CSS color string | ||
| */ | ||
| function recomposeColor(color) { | ||
| const { type, colorSpace } = color; | ||
| let { values } = color; | ||
| if (type.indexOf('rgb') !== -1) { | ||
| // Only convert the first 3 values to int (i.e. not alpha) | ||
| values = values.map((n, i) => (i < 3 ? parseInt(n, 10) : n)); | ||
| } | ||
| else if (type.indexOf('hsl') !== -1) { | ||
| values[1] = `${values[1]}%`; | ||
| values[2] = `${values[2]}%`; | ||
| } | ||
| if (type.indexOf('color') !== -1) { | ||
| values = `${colorSpace} ${values.join(' ')}`; | ||
| } | ||
| else { | ||
| values = `${values.join(', ')}`; | ||
| } | ||
| return `${type}(${values})`; | ||
| } | ||
| /** | ||
| * Converts a color from CSS rgb format to CSS hex format. | ||
| * @param {string} color - RGB color, i.e. rgb(n, n, n) | ||
| * @returns {string} A CSS rgb color string, i.e. #nnnnnn | ||
| */ | ||
| function rgbToHex(color) { | ||
| // Idempotent | ||
| if (color.indexOf('#') === 0) { | ||
| return color; | ||
| } | ||
| const { values } = decomposeColor(color); | ||
| return `#${values.map((n, i) => intToHex(i === 3 ? Math.round(255 * n) : n)).join('')}`; | ||
| } | ||
| /** | ||
| * Darkens a color. | ||
| * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color() | ||
| * @param {number} coefficient - multiplier in the range 0 - 1 | ||
| * @returns {string} A CSS color string. Hex input values are returned as rgb | ||
| */ | ||
| function darken(color, coefficient) { | ||
| color = decomposeColor(color); | ||
| coefficient = clamp(coefficient); | ||
| if (color.type.indexOf('hsl') !== -1) { | ||
| color.values[2] *= 1 - coefficient; | ||
| } | ||
| else if (color.type.indexOf('rgb') !== -1 || color.type.indexOf('color') !== -1) { | ||
| for (let i = 0; i < 3; i += 1) { | ||
| color.values[i] *= 1 - coefficient; | ||
| } | ||
| } | ||
| return recomposeColor(color); | ||
| } | ||
| /** | ||
| * Lightens a color. | ||
| * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color() | ||
| * @param {number} coefficient - multiplier in the range 0 - 1 | ||
| * @returns {string} A CSS color string. Hex input values are returned as rgb | ||
| */ | ||
| function lighten(color, coefficient) { | ||
| color = decomposeColor(color); | ||
| coefficient = clamp(coefficient); | ||
| if (color.type.indexOf('hsl') !== -1) { | ||
| color.values[2] += (100 - color.values[2]) * coefficient; | ||
| } | ||
| else if (color.type.indexOf('rgb') !== -1) { | ||
| for (let i = 0; i < 3; i += 1) { | ||
| color.values[i] += (255 - color.values[i]) * coefficient; | ||
| } | ||
| } | ||
| else if (color.type.indexOf('color') !== -1) { | ||
| for (let i = 0; i < 3; i += 1) { | ||
| color.values[i] += (1 - color.values[i]) * coefficient; | ||
| } | ||
| } | ||
| return recomposeColor(color); | ||
| } | ||
| const generateMainColorObject = (color) => { | ||
| if (!!color) { | ||
| return { | ||
| main: color, | ||
| light: rgbToHex(lighten(color, 0.4)), | ||
| dark: rgbToHex(darken(color, 0.15)), | ||
| hover: rgbToHex(darken(color, 0.15)), | ||
| active: rgbToHex(darken(color, 0.20)), | ||
| }; | ||
| } | ||
| }; | ||
| const generateSubColorObject = (color) => { | ||
| if (!!color) { | ||
| return { | ||
| main: color, | ||
| light: lighten(color, 0.7), | ||
| dark: darken(color, 0.2), | ||
| }; | ||
| } | ||
| }; | ||
| const getPalette = (theme, defaultTheme) => { | ||
| var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m; | ||
| if (!(theme === null || theme === void 0 ? void 0 : theme.palette) || typeof ((_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.primary) !== 'string') { | ||
| return {}; | ||
| } | ||
| return Object.assign(Object.assign({}, defaultTheme), { palette: { | ||
| primary: Object.assign(Object.assign({}, generateMainColorObject((_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.primary)), { contrastText: (_d = (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c.primaryText) !== null && _d !== void 0 ? _d : '#000000' }), | ||
| secondary: Object.assign(Object.assign({}, generateMainColorObject((_e = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _e === void 0 ? void 0 : _e.secondary)), { contrastText: (_g = (_f = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _f === void 0 ? void 0 : _f.secondaryText) !== null && _g !== void 0 ? _g : '#000000' }), | ||
| danger: Object.assign(Object.assign({}, generateMainColorObject((_h = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _h === void 0 ? void 0 : _h.error)), { contrastText: '#FFF' }), | ||
| success: Object.assign(Object.assign({}, generateSubColorObject((_j = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _j === void 0 ? void 0 : _j.success)), { contrastText: '#FFF' }), | ||
| error: Object.assign(Object.assign({}, generateSubColorObject((_k = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _k === void 0 ? void 0 : _k.error)), { contrastText: '#FFF' }), | ||
| warning: Object.assign(Object.assign({}, generateSubColorObject((_l = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _l === void 0 ? void 0 : _l.warning)), { contrastText: '#FFF' }), | ||
| info: Object.assign(Object.assign({}, generateSubColorObject((_m = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _m === void 0 ? void 0 : _m.info)), { contrastText: '#FFF' }), | ||
| } }); | ||
| }; | ||
| const defaultMetadata = { | ||
| theme: {}, | ||
| themeV2: {}, | ||
| navigation: { | ||
@@ -391,3 +199,3 @@ usage: { | ||
| constructor() { | ||
| this._theme = defaultMetadata.theme; | ||
| this._theme = defaultMetadata.themeV2; | ||
| this._navigation = defaultMetadata.navigation; | ||
@@ -415,10 +223,11 @@ } | ||
| set(metadata) { | ||
| var _a, _b, _c; | ||
| var _a, _b, _c, _d; | ||
| try { | ||
| this._navigation = cjs.all([(_a = defaultMetadata.navigation) !== null && _a !== void 0 ? _a : {}, (_b = metadata === null || metadata === void 0 ? void 0 : metadata.navigation) !== null && _b !== void 0 ? _b : {}]); | ||
| this._theme = cjs.all([(_c = defaultMetadata.theme) !== null && _c !== void 0 ? _c : {}, getPalette(metadata === null || metadata === void 0 ? void 0 : metadata.theme, defaultMetadata.theme)]); | ||
| this._theme = cjs.all([(_c = defaultMetadata.themeV2) !== null && _c !== void 0 ? _c : {}, (_d = metadata === null || metadata === void 0 ? void 0 : metadata.themeV2) !== null && _d !== void 0 ? _d : {}]); | ||
| debugger; | ||
| } | ||
| catch (e) { | ||
| this._navigation = defaultMetadata.navigation; | ||
| this._theme = defaultMetadata.theme; | ||
| this._theme = defaultMetadata.themeV2; | ||
| } | ||
@@ -425,0 +234,0 @@ } |
| { | ||
| "name": "@frontegg/types", | ||
| "version": "4.39.1", | ||
| "version": "4.39.2-dashboard", | ||
| "main": "./node/index.js", | ||
@@ -12,2 +12,2 @@ "module": "./index.js", | ||
| } | ||
| } | ||
| } |
@@ -0,1 +1,64 @@ | ||
| import { CSSProperties, ExtendedCSSProperties } from '../Common'; | ||
| export declare type CustomComponent<T = {}> = null | string | ((props: T) => string | any); | ||
| export interface InputThemeOptions { | ||
| /** | ||
| * Input label style | ||
| */ | ||
| label?: ExtendedCSSProperties; | ||
| /** | ||
| * Input base style for standard state | ||
| */ | ||
| base?: ExtendedCSSProperties & { | ||
| placeholderColor?: string; | ||
| }; | ||
| /** | ||
| * Input style for hover state | ||
| */ | ||
| hover?: ExtendedCSSProperties; | ||
| /** | ||
| * Input style for active state | ||
| */ | ||
| active?: ExtendedCSSProperties; | ||
| /** | ||
| * Input style for focus state | ||
| */ | ||
| focus?: ExtendedCSSProperties; | ||
| /** | ||
| * Input style for disabled state | ||
| */ | ||
| disabled?: ExtendedCSSProperties; | ||
| } | ||
| export interface ButtonThemeOptions { | ||
| /** | ||
| * Button base style for standard state | ||
| */ | ||
| base?: ExtendedCSSProperties; | ||
| /** | ||
| * Button style for hover state | ||
| */ | ||
| hover?: ExtendedCSSProperties; | ||
| /** | ||
| * Button style for active state | ||
| */ | ||
| active?: ExtendedCSSProperties; | ||
| /** | ||
| * Button style for focus state | ||
| */ | ||
| focus?: ExtendedCSSProperties; | ||
| /** | ||
| * Button style for disabled state | ||
| */ | ||
| disabled?: ExtendedCSSProperties; | ||
| /** | ||
| * Icon style displayed inside the button element | ||
| */ | ||
| icon?: ExtendedCSSProperties; | ||
| } | ||
| export interface LoginBoxBackgroundTheme { | ||
| backgroundColor?: CSSProperties['backgroundColor']; | ||
| backgroundImage?: CSSProperties['backgroundImage']; | ||
| backgroundSize?: CSSProperties['backgroundSize']; | ||
| backgroundRepeat?: CSSProperties['backgroundRepeat']; | ||
| backgroundPosition?: CSSProperties['backgroundPosition']; | ||
| } | ||
| export interface ComponentsOptions { | ||
@@ -2,0 +65,0 @@ /** |
@@ -9,4 +9,6 @@ import { CSSProperties } from '../Common'; | ||
| import { TypographyOptions, Typography } from './TypographyOptions'; | ||
| import { AdminPortalThemeOptions } from './AdminPortalThemeOptions'; | ||
| import { LoginBoxThemeOptions } from './LoginBoxThemeOptions'; | ||
| import { AdminPortalTheme, AdminPortalThemeOptions } from './AdminPortalThemeOptions'; | ||
| import { LoginBoxTheme, LoginBoxThemeOptions } from './LoginBoxTheme'; | ||
| export * from './LoginBoxTheme'; | ||
| export * from './ComponentsOptions'; | ||
| export declare type Direction = 'ltr' | 'rtl'; | ||
@@ -25,103 +27,3 @@ export interface FronteggThemeOptions { | ||
| loginBox?: LoginBoxThemeOptions; | ||
| navigation?: { | ||
| groupTitleColor?: CSSProperties['color']; | ||
| groupTitleSize?: CSSProperties['fontSize']; | ||
| headerColor?: CSSProperties['color']; | ||
| subHeaderColor?: CSSProperties['color']; | ||
| background?: CSSProperties['background']; | ||
| default: { | ||
| color?: CSSProperties['color']; | ||
| borderColor?: CSSProperties['borderColor']; | ||
| avatarBgColor?: CSSProperties['background']; | ||
| avatarColor?: CSSProperties['color']; | ||
| }; | ||
| hover: { | ||
| color?: CSSProperties['color']; | ||
| background?: CSSProperties['background']; | ||
| borderColor?: CSSProperties['borderColor']; | ||
| avatarColor?: CSSProperties['color']; | ||
| avatarBgColor?: CSSProperties['backgroundColor']; | ||
| }; | ||
| selected: { | ||
| color?: CSSProperties['color']; | ||
| background?: CSSProperties['background']; | ||
| borderColor?: CSSProperties['borderColor']; | ||
| avatarColor?: CSSProperties['color']; | ||
| avatarBgColor?: CSSProperties['backgroundColor']; | ||
| }; | ||
| }; | ||
| dialog?: { | ||
| headerBackground?: CSSProperties['background']; | ||
| headerTextColor?: CSSProperties['color']; | ||
| bodyBackground?: CSSProperties['background']; | ||
| footerBackground?: CSSProperties['background']; | ||
| }; | ||
| socialLogins?: { | ||
| rowLayout?: boolean; | ||
| google?: socialLogin; | ||
| github?: socialLogin; | ||
| facebook?: socialLogin; | ||
| microsoft?: socialLogin; | ||
| }; | ||
| rightPanel?: { | ||
| headerBackground?: CSSProperties['background']; | ||
| pageBackground?: CSSProperties['background']; | ||
| elementBackground?: CSSProperties['color']; | ||
| profileHeader?: CSSProperties['background']; | ||
| tableHeaderBackground?: CSSProperties['background']; | ||
| tableBodyBackground?: CSSProperties['background']; | ||
| }; | ||
| authPage?: { | ||
| loginBox: { | ||
| width?: CSSProperties['width']; | ||
| padding?: CSSProperties['padding']; | ||
| border?: CSSProperties['border']; | ||
| borderRadius?: CSSProperties['borderRadius']; | ||
| boxShadow?: CSSProperties['boxShadow']; | ||
| backgroundCard?: CSSProperties['background']; | ||
| }; | ||
| loginSignupSwitch?: { | ||
| color?: CSSProperties['color']; | ||
| fontSize?: CSSProperties['fontSize']; | ||
| fontFamily?: CSSProperties['fontFamily']; | ||
| textAlign?: CSSProperties['textAlign']; | ||
| padding?: CSSProperties['padding']; | ||
| margin?: CSSProperties['margin']; | ||
| link?: { | ||
| color?: CSSProperties['color']; | ||
| decoration?: CSSProperties['textDecoration']; | ||
| fontWeight?: CSSProperties['fontWeight']; | ||
| }; | ||
| }; | ||
| inputError: { | ||
| fontFamily?: CSSProperties['fontFamily']; | ||
| fontSize?: CSSProperties['fontSize']; | ||
| fontWeight?: CSSProperties['fontWeight']; | ||
| padding?: CSSProperties['padding']; | ||
| }; | ||
| }; | ||
| subHeaderMsg?: { | ||
| color?: CSSProperties['color']; | ||
| fontSize?: CSSProperties['fontSize']; | ||
| fontFamily?: CSSProperties['fontFamily']; | ||
| textAlign?: CSSProperties['textAlign']; | ||
| padding?: CSSProperties['padding']; | ||
| margin?: CSSProperties['margin']; | ||
| textDecoration?: CSSProperties['textDecoration']; | ||
| }; | ||
| } | ||
| export declare type socialLogin = { | ||
| background?: CSSProperties['background']; | ||
| default: { | ||
| color?: CSSProperties['color']; | ||
| }; | ||
| hover: { | ||
| color?: CSSProperties['color']; | ||
| background?: CSSProperties['background']; | ||
| }; | ||
| selected: { | ||
| color?: CSSProperties['color']; | ||
| background?: CSSProperties['background']; | ||
| }; | ||
| }; | ||
| export interface FronteggTheme { | ||
@@ -137,92 +39,6 @@ palette: ThemePalette; | ||
| typography: Typography; | ||
| adminPortal?: AdminPortalThemeOptions; | ||
| loginBox?: LoginBoxThemeOptions; | ||
| navigation: { | ||
| groupTitleColor: CSSProperties['color']; | ||
| groupTitleSize: CSSProperties['fontSize']; | ||
| headerColor: CSSProperties['color']; | ||
| subHeaderColor: CSSProperties['color']; | ||
| background: CSSProperties['background']; | ||
| default: { | ||
| color?: CSSProperties['color']; | ||
| borderColor?: CSSProperties['borderColor']; | ||
| avatarBgColor?: CSSProperties['background']; | ||
| avatarColor?: CSSProperties['color']; | ||
| }; | ||
| hover: { | ||
| color?: CSSProperties['color']; | ||
| background?: CSSProperties['background']; | ||
| borderColor?: CSSProperties['borderColor']; | ||
| avatarColor?: CSSProperties['color']; | ||
| avatarBgColor?: CSSProperties['backgroundColor']; | ||
| }; | ||
| selected: { | ||
| color?: CSSProperties['color']; | ||
| background?: CSSProperties['background']; | ||
| borderColor?: CSSProperties['borderColor']; | ||
| avatarColor?: CSSProperties['color']; | ||
| avatarBgColor?: CSSProperties['backgroundColor']; | ||
| }; | ||
| }; | ||
| dialog: { | ||
| headerBackground?: CSSProperties['background']; | ||
| headerTextColor?: CSSProperties['color']; | ||
| bodyBackground?: CSSProperties['background']; | ||
| footerBackground?: CSSProperties['background']; | ||
| }; | ||
| socialLogins: { | ||
| rowLayout?: boolean; | ||
| google?: socialLogin; | ||
| github?: socialLogin; | ||
| facebook?: socialLogin; | ||
| microsoft?: socialLogin; | ||
| }; | ||
| rightPanel: { | ||
| headerBackground?: CSSProperties['background']; | ||
| pageBackground?: CSSProperties['background']; | ||
| elementBackground?: CSSProperties['color']; | ||
| profileHeader?: CSSProperties['background']; | ||
| tableHeaderBackground?: CSSProperties['background']; | ||
| tableBodyBackground?: CSSProperties['background']; | ||
| }; | ||
| authPage: { | ||
| loginBox: { | ||
| width?: CSSProperties['width']; | ||
| padding?: CSSProperties['padding']; | ||
| border?: CSSProperties['border']; | ||
| borderRadius?: CSSProperties['borderRadius']; | ||
| boxShadow?: CSSProperties['boxShadow']; | ||
| backgroundCard?: CSSProperties['background']; | ||
| }; | ||
| loginSignupSwitch?: { | ||
| color?: CSSProperties['color']; | ||
| fontSize?: CSSProperties['fontSize']; | ||
| fontFamily?: CSSProperties['fontFamily']; | ||
| textAlign?: CSSProperties['textAlign']; | ||
| padding?: CSSProperties['padding']; | ||
| margin?: CSSProperties['margin']; | ||
| link?: { | ||
| color?: CSSProperties['color']; | ||
| decoration?: CSSProperties['textDecoration']; | ||
| fontWeight?: CSSProperties['fontWeight']; | ||
| }; | ||
| }; | ||
| inputError: { | ||
| fontFamily?: CSSProperties['fontFamily']; | ||
| fontSize?: CSSProperties['fontSize']; | ||
| fontWeight?: CSSProperties['fontWeight']; | ||
| padding?: CSSProperties['padding']; | ||
| }; | ||
| }; | ||
| subHeaderMsg: { | ||
| color?: CSSProperties['color']; | ||
| fontSize?: CSSProperties['fontSize']; | ||
| fontFamily?: CSSProperties['fontFamily']; | ||
| textAlign?: CSSProperties['textAlign']; | ||
| padding?: CSSProperties['padding']; | ||
| margin?: CSSProperties['margin']; | ||
| textDecoration?: CSSProperties['textDecoration']; | ||
| }; | ||
| adminPortal: AdminPortalTheme; | ||
| loginBox: LoginBoxTheme; | ||
| } | ||
| export declare type BaseThemeOptions = Omit<FronteggThemeOptions, 'adminPortal' | 'loginBox'>; | ||
| export declare type BaseTheme = Omit<FronteggTheme, 'adminPortal' | 'loginBox'>; |
@@ -25,2 +25,5 @@ import { BaseThemeOptions } from './index'; | ||
| export interface AuthPageThemeOptions extends BaseThemeOptions, AuthPageCustomComponents { | ||
| style?: CSSProperties & { | ||
| [k in string]: CSSProperties; | ||
| }; | ||
| layout?: { | ||
@@ -45,9 +48,1 @@ width?: CSSProperties['width']; | ||
| } | ||
| export interface LoginBoxThemeOptions extends AuthPageThemeOptions { | ||
| login?: LoginFormThemeOptions; | ||
| signup?: AuthPageThemeOptions; | ||
| acceptInvitation?: AuthPageThemeOptions; | ||
| activateAccount?: AuthPageThemeOptions; | ||
| forgetPassword?: AuthPageThemeOptions; | ||
| resetPassword?: AuthPageThemeOptions; | ||
| } |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.7%
182114
- Number of package files
- increased by24%
62
- Lines of code
- increased by3.08%
5426
Worsened metrics
- Number of low quality alerts
- increased by100%
2
No dependency changes