@progress/sitefinity-nextjs-sdk/widgets/styling/style-generator.service.js

Provides OOB widgets developed using the Next.js framework, which includes an abstraction layer for Sitefinity communication. Additionally, it offers an expanded API, typings, and tools for further development and integration.

import { StylingConfig } from './styling-config';
export class StyleGenerator {
    static getPaddingClasses(offsetStyle) {
        const topPaddingKey = `PaddingTop${(offsetStyle.Top || StylingConfig.DefaultPadding).toUpperCase()}`;
        const bottomPaddingKey = `PaddingBottom${(offsetStyle.Bottom || StylingConfig.DefaultPadding).toUpperCase()}`;
        const leftPaddingKey = `PaddingLeft${(offsetStyle.Left || StylingConfig.DefaultPadding).toUpperCase()}`;
        const rightPaddingKey = `PaddingRight${(offsetStyle.Right || StylingConfig.DefaultPadding).toUpperCase()}`;
        const allKeys = [topPaddingKey, bottomPaddingKey, leftPaddingKey, rightPaddingKey];
        const allClassNames = allKeys.map((key) => {
            const className = StylingConfig.OffsetClasses[key];
            return className;
        });
        const joinedClasses = allClassNames.filter(x => x).join(' ');
        return joinedClasses;
    }
    static getMarginClasses(offsetStyle) {
        const topMarginKey = `MarginTop${(offsetStyle.Top || StylingConfig.DefaultMargin).toUpperCase()}`;
        const bottomMarginKey = `MarginBottom${(offsetStyle.Bottom || StylingConfig.DefaultMargin).toUpperCase()}`;
        const leftMarginKey = `MarginLeft${(offsetStyle.Left || StylingConfig.DefaultMargin).toUpperCase()}`;
        const rightMarginKey = `MarginRight${(offsetStyle.Right || StylingConfig.DefaultMargin).toUpperCase()}`;
        const allKeys = [topMarginKey, bottomMarginKey, leftMarginKey, rightMarginKey];
        const allClassNames = allKeys.map((key) => {
            const className = StylingConfig.OffsetClasses[key];
            return className;
        });
        const joinedClasses = allClassNames.filter(x => x).join(' ');
        return joinedClasses;
    }
    static getAlignmentClasses(alignment) {
        const className = StylingConfig.AlignmentClasses[alignment];
        return className;
    }
    static getButtonClasses(buttonType) {
        const className = (StylingConfig.ButtonClasses)[buttonType]?.Value || buttonType;
        return className;
    }
}