@pepperi/core

import { Injectable } from '@angular/core'; import { FormBuilder, Validators } from '@angular/forms'; import { BehaviorSubject } from 'rxjs'; export enum LAYOUT_TYPE { PepperiForm, PepperiCard, PepperiTable, // PepperiCampaign, Editmodal, } export enum STYLE_TYPE { Weak = 'weak', Regular = 'regular', Strong = 'strong', } export class PepperiOption { Key: string; Value: string; } export class PepperiFieldBase { value: any; formattedValue: any; additionalValue: string; notificationInfo: any = {}; key: string; label: string; accessory: string; required: boolean; readonly: boolean; disabled: boolean; order: number; type: string; controlType: string; placeholder: string; hidden: boolean; row: number; rowSpan: number; col: number; colSpan: number; xAlignment: number; yAlignment: number; groupFields: PepperiFieldBase[]; maxFieldCharacters: number; minValue: number; maxValue: number; textColor: string; updatedDataCount: number; lastFocusField: any; options: PepperiOption[]; constructor( options: { value?: any; formattedValue?: any; additionalValue?: string; notificationInfo?: any; key?: string; label?: string; accessory?: string; required?: boolean; readonly?: boolean; disabled?: boolean; order?: number; controlType?: string; type?: string; placeholder?: string; hidden?: string; row?: number; rowSpan?: number; col?: number; colSpan?: number; xAlignment?: number; yAlignment?: number; maxFieldCharacters?: number; minValue?: number; maxValue?: number; textColor?: string; lastFocusField?: any; } = {} ) { this.value = options.value; this.formattedValue = options.formattedValue; this.additionalValue = options.additionalValue; this.notificationInfo = options.notificationInfo; this.key = options.key || ''; this.label = options.label || ''; this.accessory = options.accessory || ''; this.required = !!options.required; this.readonly = !!options.readonly; this.disabled = !!options.disabled; this.order = options.order === undefined ? 1 : options.order; this.controlType = options.controlType || ''; this.type = options.type || ''; this.placeholder = options.placeholder || ''; this.hidden = !!options.hidden; this.row = options.row === undefined ? 1 : options.row; this.rowSpan = options.rowSpan === undefined ? 1 : options.rowSpan; this.col = options.col === undefined ? 1 : options.col; this.colSpan = options.colSpan === undefined ? 1 : options.colSpan; this.xAlignment = options.xAlignment === undefined ? 1 : options.xAlignment; this.yAlignment = options.yAlignment === undefined ? 1 : options.yAlignment; this.maxFieldCharacters = options.maxFieldCharacters === undefined ? 0 : options.maxFieldCharacters; this.minValue = options.minValue === undefined ? 0 : options.minValue; this.maxValue = options.maxValue === undefined ? 0 : options.maxValue; this.textColor = options.textColor || ''; this.lastFocusField = options.lastFocusField || null; this.updatedDataCount = 0; } public updateField(updatedField: any, canEditObject: boolean, lastFocusField: any = null): void { this.disabled = !updatedField.Enabled || !canEditObject; this.readonly = !updatedField.Enabled || !canEditObject; this.value = updatedField.Value; this.additionalValue = updatedField.AdditionalValue; this.formattedValue = updatedField.FormattedValue; this.notificationInfo = updatedField.NotificationInfo; this.textColor = updatedField.TextColor; this.lastFocusField = lastFocusField; if (this.controlType === 'qs') { this.updatedDataCount += 1; } if (this.type === 'link') { // DI-11292 - add changes for link field for the "Read Only display value" prop this.formattedValue = this.disabled && this.formattedValue !== null && this.value !== null ? this.formattedValue : this.value; } } } export class PepperiPlaceholderField extends PepperiFieldBase { controlType = 'placeholder'; constructor(options: {} = {}) { super(options); } } export class PepperiSeparatorField extends PepperiFieldBase { controlType = 'separator'; constructor(options: {} = {}) { super(options); } } export class PepperiButtonField extends PepperiFieldBase { controlType = 'button'; referenceObjectType; referenceObjectSubType = ''; referenceObjectInternalType = ''; constructor(options: {} = {}) { super(options); this.referenceObjectType = options['referenceObjectType'] || null; this.referenceObjectSubType = options['referenceObjectSubType'] || null; this.referenceObjectInternalType = options['referenceObjectInternalType'] || null; } } export class PepperiAttachmentField extends PepperiFieldBase { controlType = 'attachment'; constructor(options: {} = {}) { super(options); } } export class PepperiIndicatorsField extends PepperiFieldBase { controlType = 'indicators'; constructor(options: {} = {}) { super(options); } } export class PepperiTextboxField extends PepperiFieldBase { controlType = 'textbox'; constructor(options: {} = {}) { super(options); } } export class PepperiTextareaField extends PepperiFieldBase { controlType = 'textarea'; constructor(options: {} = {}) { super(options); this.type = 'textarea'; } } export class PepperiRichHtmlTextareaField extends PepperiFieldBase { controlType = 'richhtmltextarea'; constructor(options: {} = {}) { super(options); this.type = 'richhtmltextarea'; } } export class PepperiSignatureField extends PepperiFieldBase { controlType = 'signature'; options: PepperiOption[] = []; constructor(options: {} = {}) { super(options); this.options = options['options'] || []; } } export class PepperiImageField extends PepperiFieldBase { controlType = 'image'; indicatorsField = null; menuField = null; hasCampaignField = null; options: PepperiOption[] = []; constructor(options: {} = {}) { super(options); this.options = options['options'] || []; this.indicatorsField = options['indicatorsField']; this.menuField = options['menuField']; this.hasCampaignField = options['hasCampaignField']; } } export class PepperiImagesField extends PepperiFieldBase { controlType = 'images'; options: PepperiOption[] = []; constructor(options: {} = {}) { super(options); this.options = options['options'] || []; } } export class PepperiQuantitySelectorField extends PepperiFieldBase { controlType = 'qs'; alowDecimal: boolean; constructor(options: {} = {}) { super(options); this.alowDecimal = options['alowDecimal'] || false; } } export class PepperiDateField extends PepperiFieldBase { controlType = 'date'; constructor(options: {} = {}) { super(options); } } export class PepperiCheckboxField extends PepperiFieldBase { controlType = 'checkbox'; constructor(options: {} = {}) { super(options); } } export class PepperiSelectField extends PepperiFieldBase { controlType = 'select'; options: PepperiOption[] = []; constructor(options: {} = {}) { super(options); this.options = options['options'] || []; } public updateField(updatedField: any, canEditObject: boolean): void { super.updateField(updatedField, canEditObject); this.options = updatedField.OptionalValues; } } export class PepperiAddressField extends PepperiFieldBase { controlType = 'address'; groupFields: PepperiFieldBase[]; constructor(options: {} = {}) { super(options); this.groupFields = options['groupFields'] || null; } } export class PepperiInternalPageField extends PepperiFieldBase { controlType = 'internalPage'; objectId = ''; parentId = ''; searchCode = ''; constructor(options: {} = {}) { super(options); this.objectId = options['objectId'] || null; this.parentId = options['parentId'] || null; this.searchCode = options['searchCode'] || null; } } export class PepperiMenuField extends PepperiFieldBase { controlType = 'menu'; options: PepperiOption[] = []; // hasSubMenu: boolean = false; constructor(options: {} = {}) { super(options); this.options = options['options'] || []; // this.hasSubMenu = options['hasSubMenu']; } } @Injectable({ providedIn: 'any', }) export class CustomizationService { static STAND_ALONE_FIELD_CLASS_NAME = 'pepperi-field'; static REM_STRING = 'rem'; static PX_STRING = 'px'; static USER_THEME = 'user_theme'; static USER_COLOR = 'user_color'; static USER_THEME_VARIABLES = 'user_theme_variables'; // Header height static HEADER_HEIGHT_KEY = '--pep-header-height'; // Footer height static FOOTER_HEIGHT_KEY = '--pep-footer-bar-height'; // Main container height static MAIN_HEIGHT_KEY = '--pep-main-height'; // Colors variables keys static COLOR_USER_PRIMARY_KEY = '--pep-color-user-primary'; static COLOR_USER_SECONDARY_KEY = '--pep-color-user-secondary'; static COLOR_SYSTEM_PRIMARY_INVERT_KEY = '--pep-color-system-primary-invert'; static COLOR_SYSTEM_PRIMARY_KEY = '--pep-color-system-primary'; static COLOR_TEXT_LINK_KEY = '--pep-color-text-link'; static COLOR_SYSTEM_CAUTION_KEY = '--pep-color-system-caution'; static COLOR_SYSTEM_SUCCESS_KEY = '--pep-color-system-success'; static COLOR_STRONG_KEY = '--pep-color-strong'; static COLOR_REGULAR_KEY = '--pep-color-regular'; static COLOR_WEAK_KEY = '--pep-color-weak'; // Top header variables keys static COLOR_TOP_HEADER_KEY = '--pep-color-top-header'; static STYLE_TOP_HEADER_KEY = '--pep-style-top-header'; // QS variables keys static COLOR_QS_KEY = '--pep-color-qs'; static STYLE_QS_KEY = '--pep-style-qs'; // Fonts variables keys static FONT_FAMILY_TITLE_KEY = '--pep-font-family-title'; static FONT_FAMILY_BODY_KEY = '--pep-font-family-body'; // Border radius variables keys static BORDER_RADIUS_KEY = '--pep-border-radius'; static BORDER_RADIUS_SM_KEY = CustomizationService.BORDER_RADIUS_KEY + '-sm'; static BORDER_RADIUS_MD_KEY = CustomizationService.BORDER_RADIUS_KEY + '-md'; static BORDER_RADIUS_LG_KEY = CustomizationService.BORDER_RADIUS_KEY + '-lg'; // Fonts variables keys static FONT_SIZE_2XS_KEY = '--pep-font-size-2xs'; static FONT_SIZE_XS_KEY = '--pep-font-size-xs'; static FONT_SIZE_SM_KEY = '--pep-font-size-sm'; static FONT_SIZE_MD_KEY = '--pep-font-size-md'; static FONT_SIZE_LG_KEY = '--pep-font-size-lg'; static FONT_SIZE_XL_KEY = '--pep-font-size-xl'; static FONT_SIZE_2XL_KEY = '--pep-font-size-2xl'; // Line height variables keys static LINE_HEIGHT_2XS_KEY = '--pep-line-height-2xs'; static LINE_HEIGHT_XS_KEY = '--pep-line-height-xs'; static LINE_HEIGHT_SM_KEY = '--pep-line-height-sm'; static LINE_HEIGHT_MD_KEY = '--pep-line-height-md'; static LINE_HEIGHT_LG_KEY = '--pep-line-height-lg'; static LINE_HEIGHT_XL_KEY = '--pep-line-height-xl'; static LINE_HEIGHT_2XL_KEY = '--pep-line-height-2xl'; // Shadows offset variables keys static SHADOW_NONE_OFFSET_KEY = '--pep-shadow-none-offset'; static SHADOW_XS_OFFSET_KEY = '--pep-shadow-xs-offset'; static SHADOW_SM_OFFSET_KEY = '--pep-shadow-sm-offset'; static SHADOW_MD_OFFSET_KEY = '--pep-shadow-md-offset'; static SHADOW_LG_OFFSET_KEY = '--pep-shadow-lg-offset'; static SHADOW_XL_OFFSET_KEY = '--pep-shadow-xl-offset'; // Spacing variables keys static SPACING_SIZE_2XS_KEY = '--pep-spacing-2xs'; static SPACING_SIZE_XS_KEY = '--pep-spacing-xs'; static SPACING_SIZE_SM_KEY = '--pep-spacing-sm'; static SPACING_SIZE_MD_KEY = '--pep-spacing-md'; static SPACING_SIZE_LG_KEY = '--pep-spacing-lg'; static SPACING_SIZE_XL_KEY = '--pep-spacing-xl'; static SPACING_SIZE_2XL_KEY = '--pep-spacing-2xl'; // Side bar variables keys static SIDE_BAR_WIDTH_KEY = '--pep-side-bar-width'; // Top bar variables keys static TOP_BAR_SPACING_TOP_KEY = '--pep-top-bar-spacing-top'; static TOP_BAR_SPACING_BOTTOM_KEY = '--pep-top-bar-spacing-bottom'; static TOP_BAR_FIELD_HEIGHT_KEY = '--pep-top-bar-field-height'; // Footer variables keys static FOOTER_BAR_SPACING_TOP_KEY = '--pep-footer-bar-spacing-top'; static FOOTER_BAR_SPACING_BOTTOM_KEY = '--pep-footer-bar-spacing-bottom'; // Form variables keys static FORM_FIELD_HEIGHT_KEY = '--pep-form-field-height'; static FORM_FIELD_TITLE_HEIGHT_KEY = '--pep-form-field-title-height'; static FORM_FIELD_SPACEING_KEY = '--pep-form-field-spacing'; static FORM_SPACEING_KEY = '--pep-form-spacing'; // Card variables keys static CARD_FIELD_HEIGHT_KEY = '--pep-card-field-height'; static CARD_SPACEING_KEY = '--pep-card-spacing'; static CARD_SHADOW_OFFSET_KEY = '--pep-shadow-card-offset'; static CARD_BORDER_RADIUS_KEY = '--pep-card-border-radius'; // Table variables keys static TABLE_FIELD_HEIGHT_KEY = '--pep-table-field-height'; static TABLE_SPACEING_KEY = '--pep-table-spacing'; static TABLE_BORDER_RADIUS_KEY = '--pep-table-border-radius'; static DEFAULT_HEADER_HEIGHT = 64; // Default static DEFAULT_SPINNER_COLOR = '#78aa00'; static DEFAULT_BRANDING_COLOR = '#fff'; public hasCustomHomepage: Boolean = null; public hasCustomHeader: Boolean = null; public customHeaderHeight = CustomizationService.DEFAULT_HEADER_HEIGHT; public mainContHeight = 0; public footerHeight = new BehaviorSubject<number>(0); constructor(public fb: FormBuilder) { } getValidatorsForField(required: boolean, readonly: boolean, disabled: boolean, maxFieldCharacters: number, type: string, isCheckbox = false) { const validators = []; if (required && !readonly && !disabled) { if (isCheckbox) { validators.push(Validators.requiredTrue); } else { validators.push(Validators.required); } } else { validators.push(Validators.nullValidator); } if (maxFieldCharacters > 0) { validators.push(Validators.maxLength(maxFieldCharacters)); } if (type === 'email') { validators.push( Validators.pattern( /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ ) ); } else if (type === 'phone') { validators.push(Validators.pattern(/^[\d\.\-\+\*\#]+$/)); } else if (type === 'int' || type === 'real') { validators.push(Validators.pattern(/^[\.,\-\+\d]+$/)); } return validators; } getDefaultFromGroup( key: string, value: string, required: boolean, readonly: boolean, disabled: boolean, maxFieldCharacters: number = 0, type: string = '', isCheckbox = false, withValidators = true ) { const validators = withValidators ? this.getValidatorsForField(required, readonly, disabled, maxFieldCharacters, type, isCheckbox) : []; let group = {}; group[key] = [{ value: value, disabled: disabled }, validators]; return this.fb.group(group); } private getFormControl(form, fieldKey, parentField = null) { let formControl = null; if (form && form.controls) { if (parentField === null) { formControl = form.controls[fieldKey]; } else { formControl = form.controls[parentField.key].get(fieldKey); } } return formControl; } updateFormFieldValue(form, fieldKey, value = '', parentField = null) { const formControl = this.getFormControl(form, fieldKey, parentField); if (formControl) { formControl.setValue(value); } } calculateFormFieldHeight(withTitle = true, rowSpan = 1, standAlone = false) { const themeVars = this.getThemeVariables(); const rowFieldHeight = this.getNumberThemeVariable(themeVars, CustomizationService.FORM_FIELD_HEIGHT_KEY); const rowFieldTitleHeight = this.getNumberThemeVariable(themeVars, CustomizationService.FORM_FIELD_TITLE_HEIGHT_KEY); const rowFieldSpacingBottom = this.getNumberThemeVariable(themeVars, CustomizationService.FORM_SPACEING_KEY); let fieldHeight = 0; if (rowSpan === 1) { fieldHeight = (withTitle ? rowFieldTitleHeight : 0) + rowFieldHeight; } else { const rowSpanCalc = withTitle ? rowSpan : rowSpan - 1; fieldHeight = rowSpan * rowFieldHeight + rowSpanCalc * rowFieldTitleHeight + (standAlone ? 0 : rowSpanCalc * rowFieldSpacingBottom); } return fieldHeight; } calculateCardRowsHeight(rowsCount = 1, withSpacing = true) { const themeVars = this.getThemeVariables(); const cardFieldHeight = this.getNumberThemeVariable(themeVars, CustomizationService.CARD_FIELD_HEIGHT_KEY); const cardFieldSpacing = this.getNumberThemeVariable(themeVars, CustomizationService.CARD_SPACEING_KEY); const fieldHeight = rowsCount * cardFieldHeight + (rowsCount - 1) * (withSpacing ? cardFieldSpacing : 0); return fieldHeight; } calculateTableRowsHeight(rowsCount = 1, withSpacing = true) { const themeVars = this.getThemeVariables(); const tableFieldHeight = this.getNumberThemeVariable(themeVars, CustomizationService.TABLE_FIELD_HEIGHT_KEY); const tableFieldSpacing = this.getNumberThemeVariable(themeVars, CustomizationService.TABLE_SPACEING_KEY); const fieldHeight = rowsCount * (tableFieldHeight + (withSpacing ? tableFieldSpacing * 2 : 0)); return fieldHeight; } calculateFieldHeight(layoutType = LAYOUT_TYPE.PepperiForm, rowSpan, standAlone) { let fieldHeight = 'inherit'; // Default for card (with no title) if (layoutType === LAYOUT_TYPE.PepperiTable) { fieldHeight = this.getThemeVariable(CustomizationService.TABLE_FIELD_HEIGHT_KEY); } else if (layoutType === LAYOUT_TYPE.PepperiCard) { fieldHeight = this.calculateCardRowsHeight(rowSpan, !standAlone) + CustomizationService.REM_STRING; } else { // PepperiForm fieldHeight = this.calculateFormFieldHeight(false, rowSpan, standAlone) + CustomizationService.REM_STRING; } return fieldHeight; } getBrandingTheme() { const themeObj = JSON.parse(sessionStorage.getItem(CustomizationService.USER_THEME)); return (themeObj && themeObj.Theme) || 'default-theme'; //'light-theme'; } getDefaultThemeLayoutVariables(themeVars: any) { // Declare default screen sizes. themeVars['--pep-screen-max-size-2xs'] = '460' + CustomizationService.PX_STRING; themeVars['--pep-screen-max-size-xs'] = '767' + CustomizationService.PX_STRING; themeVars['--pep-screen-max-size-sm'] = '991' + CustomizationService.PX_STRING; themeVars['--pep-screen-max-size-md'] = '1199' + CustomizationService.PX_STRING; themeVars['--pep-screen-max-size-lg'] = '1366' + CustomizationService.PX_STRING; themeVars['--pep-screen-max-size-xl'] = '1920' + CustomizationService.PX_STRING; // Declare default top bar. themeVars[CustomizationService.SIDE_BAR_WIDTH_KEY] = '16' + CustomizationService.REM_STRING; // Declare default top bar. themeVars[CustomizationService.TOP_BAR_SPACING_TOP_KEY] = '1.5' + CustomizationService.REM_STRING; themeVars[CustomizationService.TOP_BAR_SPACING_BOTTOM_KEY] = '0.5' + CustomizationService.REM_STRING; themeVars[CustomizationService.TOP_BAR_FIELD_HEIGHT_KEY] = '2.5' + CustomizationService.REM_STRING; // Declare default footer. themeVars[CustomizationService.FOOTER_BAR_SPACING_TOP_KEY] = '0.75' + CustomizationService.REM_STRING; themeVars[CustomizationService.FOOTER_BAR_SPACING_BOTTOM_KEY] = '1.25' + CustomizationService.REM_STRING; } getDefaultThemeBorderRadiusVariables(themeVars: any) { themeVars[CustomizationService.BORDER_RADIUS_SM_KEY] = '0.125' + CustomizationService.REM_STRING; themeVars[CustomizationService.BORDER_RADIUS_MD_KEY] = '0.25' + CustomizationService.REM_STRING; themeVars[CustomizationService.BORDER_RADIUS_LG_KEY] = '0.5' + CustomizationService.REM_STRING; } getDefaultThemeSpacingVariables(themeVars: any) { themeVars[CustomizationService.SPACING_SIZE_2XS_KEY] = '0.125' + CustomizationService.REM_STRING; themeVars[CustomizationService.SPACING_SIZE_XS_KEY] = '0.25' + CustomizationService.REM_STRING; themeVars[CustomizationService.SPACING_SIZE_SM_KEY] = '0.5' + CustomizationService.REM_STRING; themeVars[CustomizationService.SPACING_SIZE_MD_KEY] = '0.75' + CustomizationService.REM_STRING; themeVars[CustomizationService.SPACING_SIZE_LG_KEY] = '1' + CustomizationService.REM_STRING; themeVars[CustomizationService.SPACING_SIZE_XL_KEY] = '1.5' + CustomizationService.REM_STRING; themeVars[CustomizationService.SPACING_SIZE_2XL_KEY] = '2' + CustomizationService.REM_STRING; } getDefaultThemeFontsVariables(themeVars: any) { // Title font family themeVars[CustomizationService.FONT_FAMILY_TITLE_KEY] = 'Nexa'; // Body font family themeVars[CustomizationService.FONT_FAMILY_BODY_KEY] = 'Inter'; // Font sizes themeVars[CustomizationService.FONT_SIZE_2XS_KEY] = '0.625' + CustomizationService.REM_STRING; themeVars[CustomizationService.FONT_SIZE_XS_KEY] = '0.75' + CustomizationService.REM_STRING; themeVars[CustomizationService.FONT_SIZE_SM_KEY] = '0.875' + CustomizationService.REM_STRING; themeVars[CustomizationService.FONT_SIZE_MD_KEY] = '1' + CustomizationService.REM_STRING; themeVars[CustomizationService.FONT_SIZE_LG_KEY] = '1.125' + CustomizationService.REM_STRING; themeVars[CustomizationService.FONT_SIZE_XL_KEY] = '1.25' + CustomizationService.REM_STRING; themeVars[CustomizationService.FONT_SIZE_2XL_KEY] = '1.5' + CustomizationService.REM_STRING; // Line height themeVars[CustomizationService.LINE_HEIGHT_2XS_KEY] = '0.75' + CustomizationService.REM_STRING; themeVars[CustomizationService.LINE_HEIGHT_XS_KEY] = '1' + CustomizationService.REM_STRING; themeVars[CustomizationService.LINE_HEIGHT_SM_KEY] = '1.25' + CustomizationService.REM_STRING; themeVars[CustomizationService.LINE_HEIGHT_MD_KEY] = '1.5' + CustomizationService.REM_STRING; themeVars[CustomizationService.LINE_HEIGHT_LG_KEY] = '1.75' + CustomizationService.REM_STRING; themeVars[CustomizationService.LINE_HEIGHT_XL_KEY] = '2' + CustomizationService.REM_STRING; themeVars[CustomizationService.LINE_HEIGHT_2XL_KEY] = '2.25' + CustomizationService.REM_STRING; // Font weight themeVars['--pep-font-weight-normal'] = 400; themeVars['--pep-font-weight-bold'] = 600; themeVars['--pep-font-weight-bolder'] = 800; } getDefaultThemeButtonsVariables(themeVars: any) { themeVars['--pep-button-2xs-horizontal-spacing'] = '0.25' + CustomizationService.REM_STRING; themeVars['--pep-button-2xs-min-width'] = '1' + CustomizationService.REM_STRING; themeVars['--pep-button-2xs-height'] = '1' + CustomizationService.REM_STRING; themeVars['--pep-button-2xs-font-size'] = 'var(' + CustomizationService.FONT_SIZE_2XS_KEY + ')'; // themeVars['--pep-button-2xs-icon-horizontal-spacing'] = '0.125' + CustomizationService.REM_STRING; themeVars['--pep-button-xs-horizontal-spacing'] = '0.5' + CustomizationService.REM_STRING; themeVars['--pep-button-xs-min-width'] = '2' + CustomizationService.REM_STRING; themeVars['--pep-button-xs-height'] = '1.5' + CustomizationService.REM_STRING; themeVars['--pep-button-xs-font-size'] = 'var(' + CustomizationService.FONT_SIZE_XS_KEY + ')'; // themeVars['--pep-button-xs-icon-horizontal-spacing'] = '0.25' + CustomizationService.REM_STRING; themeVars['--pep-button-sm-horizontal-spacing'] = '0.75' + CustomizationService.REM_STRING; themeVars['--pep-button-sm-min-width'] = '2' + CustomizationService.REM_STRING; themeVars['--pep-button-sm-height'] = '2' + CustomizationService.REM_STRING; themeVars['--pep-button-sm-font-size'] = 'var(' + CustomizationService.FONT_SIZE_SM_KEY + ')'; // themeVars['--pep-button-sm-icon-horizontal-spacing'] = '0.5' + CustomizationService.REM_STRING; themeVars['--pep-button-md-horizontal-spacing'] = '1' + CustomizationService.REM_STRING; themeVars['--pep-button-md-min-width'] = '2.5' + CustomizationService.REM_STRING; themeVars['--pep-button-md-height'] = '2.5' + CustomizationService.REM_STRING; themeVars['--pep-button-md-font-size'] = 'var(' + CustomizationService.FONT_SIZE_MD_KEY + ')'; // themeVars['--pep-button-md-icon-horizontal-spacing'] = '0.5' + CustomizationService.REM_STRING; themeVars['--pep-button-lg-horizontal-spacing'] = '1' + CustomizationService.REM_STRING; themeVars['--pep-button-lg-min-width'] = '3' + CustomizationService.REM_STRING; themeVars['--pep-button-lg-height'] = '3' + CustomizationService.REM_STRING; themeVars['--pep-button-lg-font-size'] = 'var(' + CustomizationService.FONT_SIZE_LG_KEY + ')'; // themeVars['--pep-button-lg-icon-horizontal-spacing'] = '0.75' + CustomizationService.REM_STRING; themeVars['--pep-button-xl-horizontal-spacing'] = '1.5' + CustomizationService.REM_STRING; themeVars['--pep-button-xl-min-width'] = '5' + CustomizationService.REM_STRING; themeVars['--pep-button-xl-height'] = '4' + CustomizationService.REM_STRING; themeVars['--pep-button-xl-font-size'] = 'var(' + CustomizationService.FONT_SIZE_XL_KEY + ')'; // themeVars['--pep-button-xl-icon-horizontal-spacing'] = '1' + CustomizationService.REM_STRING; } getSystemPrimaryInvertColorsVariables(themeVars: any) { themeVars[CustomizationService.COLOR_SYSTEM_PRIMARY_INVERT_KEY + '-h'] = '255'; themeVars[CustomizationService.COLOR_SYSTEM_PRIMARY_INVERT_KEY + '-s'] = '100%'; themeVars[CustomizationService.COLOR_SYSTEM_PRIMARY_INVERT_KEY + '-l'] = '100%'; } getSystemPrimaryColorsVariables(themeVars: any) { themeVars[CustomizationService.COLOR_SYSTEM_PRIMARY_KEY + '-h'] = '0'; themeVars[CustomizationService.COLOR_SYSTEM_PRIMARY_KEY + '-s'] = '0%'; themeVars[CustomizationService.COLOR_SYSTEM_PRIMARY_KEY + '-l'] = '10%'; } getSystemSuccessColorsVariables(themeVars: any) { themeVars[CustomizationService.COLOR_SYSTEM_SUCCESS_KEY + '-h'] = '100'; themeVars[CustomizationService.COLOR_SYSTEM_SUCCESS_KEY + '-s'] = '100%'; themeVars[CustomizationService.COLOR_SYSTEM_SUCCESS_KEY + '-l'] = '25%'; } getSystemCautionColorsVariables(themeVars: any) { themeVars[CustomizationService.COLOR_SYSTEM_CAUTION_KEY + '-h'] = '360'; themeVars[CustomizationService.COLOR_SYSTEM_CAUTION_KEY + '-s'] = '100%'; themeVars[CustomizationService.COLOR_SYSTEM_CAUTION_KEY + '-l'] = '40%'; } getUserPrimaryColorsVariables(themeVars: any) { themeVars[CustomizationService.COLOR_USER_PRIMARY_KEY + '-h'] = '78'; themeVars[CustomizationService.COLOR_USER_PRIMARY_KEY + '-s'] = '87%'; themeVars[CustomizationService.COLOR_USER_PRIMARY_KEY + '-l'] = '27%'; } getUserSecondaryColorsVariables(themeVars: any) { themeVars[CustomizationService.COLOR_USER_SECONDARY_KEY + '-h'] = '77'; themeVars[CustomizationService.COLOR_USER_SECONDARY_KEY + '-s'] = '87%'; themeVars[CustomizationService.COLOR_USER_SECONDARY_KEY + '-l'] = '42%'; } getWeakColorsVariables(themeVars: any) { themeVars[CustomizationService.COLOR_WEAK_KEY + '-h'] = 'var(' + CustomizationService.COLOR_SYSTEM_PRIMARY_KEY + '-h)'; themeVars[CustomizationService.COLOR_WEAK_KEY + '-s'] = 'var(' + CustomizationService.COLOR_SYSTEM_PRIMARY_KEY + '-s)'; themeVars[CustomizationService.COLOR_WEAK_KEY + '-l'] = 'var(' + CustomizationService.COLOR_SYSTEM_PRIMARY_KEY + '-l)'; } getRegularColorsVariables(themeVars: any) { themeVars[CustomizationService.COLOR_REGULAR_KEY + '-h'] = 'var(' + CustomizationService.COLOR_SYSTEM_PRIMARY_KEY + '-h)'; themeVars[CustomizationService.COLOR_REGULAR_KEY + '-s'] = 'var(' + CustomizationService.COLOR_SYSTEM_PRIMARY_KEY + '-s)'; themeVars[CustomizationService.COLOR_REGULAR_KEY + '-l'] = 'var(' + CustomizationService.COLOR_SYSTEM_PRIMARY_KEY + '-l)'; } getStrongColorsVariables(themeVars: any) { themeVars[CustomizationService.COLOR_STRONG_KEY + '-h'] = 'var(' + CustomizationService.COLOR_USER_PRIMARY_KEY + '-h)'; themeVars[CustomizationService.COLOR_STRONG_KEY + '-s'] = 'var(' + CustomizationService.COLOR_USER_PRIMARY_KEY + '-s)'; themeVars[CustomizationService.COLOR_STRONG_KEY + '-l'] = 'var(' + CustomizationService.COLOR_USER_PRIMARY_KEY + '-l)'; } getTextColorsVariables(themeVars: any) { themeVars[CustomizationService.COLOR_TEXT_LINK_KEY + '-h'] = '207'; themeVars[CustomizationService.COLOR_TEXT_LINK_KEY + '-s'] = '76%'; themeVars[CustomizationService.COLOR_TEXT_LINK_KEY + '-l'] = '37%'; } getDefaultThemeColorsVariables(themeVars: any) { // System primary invert colors. this.getSystemPrimaryInvertColorsVariables(themeVars); // System primary colors. this.getSystemPrimaryColorsVariables(themeVars); // System success colors. this.getSystemSuccessColorsVariables(themeVars); // System caution colors. this.getSystemCautionColorsVariables(themeVars); // User primary colors. this.getUserPrimaryColorsVariables(themeVars); // User secondary colors. this.getUserSecondaryColorsVariables(themeVars); // Weak colors. this.getWeakColorsVariables(themeVars); // Regular colors. this.getRegularColorsVariables(themeVars); // Strong colors. this.getStrongColorsVariables(themeVars); // Text colors. this.getTextColorsVariables(themeVars); } getDefaultThemeShadowsVariables(themeVars: any) { const noneOffset = '0'; themeVars[CustomizationService.SHADOW_NONE_OFFSET_KEY] = noneOffset; const xsOffset = '0 0.125rem 0.25rem 0'; themeVars[CustomizationService.SHADOW_XS_OFFSET_KEY] = xsOffset; const smOffset = '0 0.25rem 0.5rem 0'; themeVars[CustomizationService.SHADOW_SM_OFFSET_KEY] = smOffset; const mdOffset = '0 0.5rem 1rem 0'; themeVars[CustomizationService.SHADOW_MD_OFFSET_KEY] = mdOffset; const lgOffset = '0 1rem 2rem 0'; themeVars[CustomizationService.SHADOW_LG_OFFSET_KEY] = lgOffset; const xlOffset = '0 2rem 4rem 0'; themeVars[CustomizationService.SHADOW_XL_OFFSET_KEY] = xlOffset; } getDefaultThemeFormCustomizationVariables(themeVars: any) { const formFieldSpacing = 1; themeVars[CustomizationService.FORM_FIELD_HEIGHT_KEY] = '2.5' + CustomizationService.REM_STRING; themeVars[CustomizationService.FORM_FIELD_TITLE_HEIGHT_KEY] = '1.5' + CustomizationService.REM_STRING; themeVars[CustomizationService.FORM_SPACEING_KEY] = formFieldSpacing + CustomizationService.REM_STRING; themeVars[CustomizationService.FORM_FIELD_SPACEING_KEY] = formFieldSpacing + CustomizationService.REM_STRING; } getDefaultThemeCardCustomizationVariables(themeVars: any) { themeVars[CustomizationService.CARD_FIELD_HEIGHT_KEY] = '1.5' + CustomizationService.REM_STRING; themeVars[CustomizationService.CARD_SPACEING_KEY] = 'var(' + CustomizationService.SPACING_SIZE_XS_KEY + ')'; themeVars[CustomizationService.CARD_BORDER_RADIUS_KEY] = 'var(' + CustomizationService.BORDER_RADIUS_MD_KEY + ')'; themeVars[CustomizationService.CARD_SHADOW_OFFSET_KEY] = 'var(' + CustomizationService.SHADOW_MD_OFFSET_KEY + ')'; } getDefaultThemeTableCustomizationVariables(themeVars: any) { themeVars[CustomizationService.TABLE_FIELD_HEIGHT_KEY] = '2' + CustomizationService.REM_STRING; themeVars[CustomizationService.TABLE_SPACEING_KEY] = '0.5' + CustomizationService.REM_STRING; themeVars[CustomizationService.TABLE_BORDER_RADIUS_KEY] = 'var(' + CustomizationService.BORDER_RADIUS_MD_KEY + ')'; } getDefaultThemeQSCustomizationVariables(themeVars: any) { const qsState = STYLE_TYPE.Regular; themeVars[CustomizationService.STYLE_QS_KEY] = qsState; themeVars[CustomizationService.COLOR_QS_KEY + '-h'] = 'var(' + CustomizationService.COLOR_SYSTEM_PRIMARY_KEY + '-h)'; themeVars[CustomizationService.COLOR_QS_KEY + '-s'] = 'var(' + CustomizationService.COLOR_SYSTEM_PRIMARY_KEY + '-s)'; themeVars[CustomizationService.COLOR_QS_KEY + '-l'] = 'var(' + CustomizationService.COLOR_SYSTEM_PRIMARY_KEY + '-l)'; } getDefaultThemeTopHeaderCustomizationVariables(themeVars: any) { const topHeaderState = STYLE_TYPE.Strong; themeVars[CustomizationService.STYLE_TOP_HEADER_KEY] = topHeaderState; themeVars[CustomizationService.COLOR_TOP_HEADER_KEY + '-h'] = ''; themeVars[CustomizationService.COLOR_TOP_HEADER_KEY + '-s'] = ''; themeVars[CustomizationService.COLOR_TOP_HEADER_KEY + '-l'] = ''; } getDefaultThemeVariables() { const themeVars = {}; // Declare default layout. this.getDefaultThemeLayoutVariables(themeVars); // Declare default border radius. this.getDefaultThemeBorderRadiusVariables(themeVars); // Declare default spacing. this.getDefaultThemeSpacingVariables(themeVars); // Declare default fonts size & line height. this.getDefaultThemeFontsVariables(themeVars); // Declare default buttons. this.getDefaultThemeButtonsVariables(themeVars); // Declare default colors. this.getDefaultThemeColorsVariables(themeVars); // Declare default shadows. this.getDefaultThemeShadowsVariables(themeVars); // Declare default form customization. this.getDefaultThemeFormCustomizationVariables(themeVars); // Declare default card customization. this.getDefaultThemeCardCustomizationVariables(themeVars); // Declare default table customization. this.getDefaultThemeTableCustomizationVariables(themeVars); // Declare default qs customization. this.getDefaultThemeQSCustomizationVariables(themeVars); // Declare default top header customization. this.getDefaultThemeTopHeaderCustomizationVariables(themeVars); return themeVars; } getThemeVariables() { const ret = this.getDefaultThemeVariables(); const themeVars = JSON.parse(sessionStorage.getItem(CustomizationService.USER_THEME_VARIABLES)); // Override defaults. if (themeVars) { // tslint:disable-next-line: forin for (const key in themeVars) { ret[key] = themeVars[key]; } } return ret; } setThemeVariables(themeVariablesToSet = null) { const themeVariables = this.getThemeVariables(); // Override defaults. if (themeVariablesToSet) { // tslint:disable-next-line: forin for (const key in themeVariablesToSet) { themeVariables[key] = themeVariablesToSet[key]; } } sessionStorage.setItem(CustomizationService.USER_THEME_VARIABLES, JSON.stringify(themeVariables)); // tslint:disable-next-line: forin for (const key in themeVariables) { document.documentElement.style.setProperty(key, themeVariables[key]); } } getThemeVariable(key: string) { const themeVars = this.getThemeVariables(); if (themeVars.hasOwnProperty(key)) { return themeVars[key]; } else { return ''; } } getNumberThemeVariable(themeVars, key: string) { if (themeVars && themeVars.hasOwnProperty(key)) { // If it's reference to another key. if (themeVars[key].indexOf('var(') === 0) { key = themeVars[key].substr(4).split(')')[0]; } const tmp = Number(themeVars[key].replace(CustomizationService.REM_STRING, '')); return tmp; } else { return 0; } } setFooterHeight(height) { const self = this; if (this.footerHeight.getValue() !== height) { //it is publishing this value to all the subscribers that have already subscribed to this message setTimeout(() => self.footerHeight.next(height), 0); } document.documentElement.style.setProperty(CustomizationService.FOOTER_HEIGHT_KEY, height + CustomizationService.REM_STRING); } setDefaultFooterHeight() { const themeVars = this.getThemeVariables(); const res = this.getNumberThemeVariable(themeVars, CustomizationService.FOOTER_BAR_SPACING_TOP_KEY) + this.getNumberThemeVariable(themeVars, CustomizationService.FOOTER_BAR_SPACING_BOTTOM_KEY) + this.getNumberThemeVariable(themeVars, CustomizationService.TOP_BAR_FIELD_HEIGHT_KEY); this.setFooterHeight(res); } getTopBarHeight() { const themeVars = this.getThemeVariables(); const res = this.getNumberThemeVariable(themeVars, CustomizationService.TOP_BAR_SPACING_TOP_KEY) + this.getNumberThemeVariable(themeVars, CustomizationService.TOP_BAR_SPACING_BOTTOM_KEY) + this.getNumberThemeVariable(themeVars, CustomizationService.TOP_BAR_FIELD_HEIGHT_KEY); return res; } setOldUserTheme(res: any) { // Added user theme. const themeObj = { Theme: res.Theme || 'default-theme', }; sessionStorage.setItem(CustomizationService.USER_THEME, JSON.stringify(themeObj)); let spinnerColor; let brandingFontColor; if (this.isLightColor(res.BrandingMainColor)) { spinnerColor = CustomizationService.DEFAULT_SPINNER_COLOR; brandingFontColor = '#222'; } else { spinnerColor = res.BrandingMainColor; brandingFontColor = CustomizationService.DEFAULT_BRANDING_COLOR; } const color = { BrandingSecondaryColor: res.BrandingSecondaryColor, BrandingMainColor: res.BrandingMainColor, BrandingFontColor: brandingFontColor, SpinnerColor: spinnerColor, }; sessionStorage.setItem(CustomizationService.USER_COLOR, JSON.stringify(color)); this.hasCustomHeader = res.TopHeaderFiles && res.TopHeaderFiles.length > 0 && res.TopHeaderFiles[0] !== '' ? true : false; this.hasCustomHomepage = res.UserRole === 'Buyer' && res.TopHeaderFiles && res.TopHeaderFiles.length > 1 && res.TopHeaderFiles[1] !== ''; } isLegacyColor() { const h = document.documentElement.style.getPropertyValue(CustomizationService.COLOR_TOP_HEADER_KEY + '-h'); const s = document.documentElement.style.getPropertyValue(CustomizationService.COLOR_TOP_HEADER_KEY + '-s'); const l = document.documentElement.style.getPropertyValue(CustomizationService.COLOR_TOP_HEADER_KEY + '-l'); return !(h && s && l); } getLoadingSpinnerColor() { let spinnerColor = ''; if (this.isLegacyColor()) { const color = JSON.parse(sessionStorage.getItem(CustomizationService.USER_COLOR)); if (color && color.SpinnerColor) { spinnerColor = color.SpinnerColor; } else { spinnerColor = CustomizationService.DEFAULT_SPINNER_COLOR; } } return spinnerColor; } getBrandingMainColor() { let brandingMainColor = ''; if (this.isLegacyColor()) { const color = JSON.parse(sessionStorage.getItem(CustomizationService.USER_COLOR)); if (color && color.BrandingMainColor) { brandingMainColor = color.BrandingMainColor; } else { brandingMainColor = CustomizationService.DEFAULT_BRANDING_COLOR; } } return brandingMainColor; } isLightColor(hex_color) { if (!hex_color) { return; } let isBright = false, sum = 0, c = hex_color.replace(/^#/, ''); sum = parseInt(c[0] + c[1], 16); sum += parseInt(c[2] + c[3], 16); sum += parseInt(c[4] + c[5], 16); if (sum > 382.6) { // it's bright color isBright = true; } return isBright; } }