@designcrowd/library.brand-page 5.18.6 → 5.18.7-ast-padding-1

package/lib/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.d.ts

@@ -3445,6 +3445,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         id: string;
                         type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
+                        topPadding?: number | undefined;
+                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;
@@ -3494,6 +3496,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         id: string;
                         type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
+                        topPadding?: number | undefined;
+                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;
@@ -3543,6 +3547,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         id: string;
                         type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
+                        topPadding?: number | undefined;
+                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;
@@ -3592,6 +3598,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         id: string;
                         type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
+                        topPadding?: number | undefined;
+                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;
@@ -3641,6 +3649,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         id: string;
                         type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
+                        topPadding?: number | undefined;
+                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;
@@ -3690,6 +3700,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         id: string;
                         type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
+                        topPadding?: number | undefined;
+                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;
@@ -4269,6 +4281,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             logoTemplateMetadata: string;
             isLogoDraftSaved: boolean;
             isTextOnlyLogo: boolean;
+            variationsByDraftToken: Record<string, import("@shared/logo-settings/store").EditableLogoVariation[]>;
         } & import("pinia").PiniaCustomStateProperties<import("@shared/logo-settings/store").EditableLogoState>) => () => string | undefined;
     }, {
         setStateAsync(payload: {
@@ -4286,6 +4299,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         getEditableLogoVariationByVariationId(id: number): any;
         getEditableLogoVariationByBase64(base64: string): any;
         updateEditableLogoImageUrlAsync(defaultPrimaryText?: string | undefined, overrideLogoVariation?: number | undefined, layout?: string | undefined): Promise<void>;
+        stampLogoBase64IntoBrandPageData(overrideLogoVariation?: number | undefined): void;
+        restoreVariationsForDraftToken(logoDraftToken: string): boolean;
         updateMetadataAsync(defaultPrimaryText?: string | undefined, resetLogoTemplateMetadata?: boolean, layout?: string | undefined): Promise<void>;
         updateEditableLogoImageByVariationAsync(editableLogoVariation: import("@shared/logo-settings/store").EditableLogoVariation, defaultPrimaryText?: string | undefined, layout?: string | undefined): Promise<import("../../../../clients/fabric-render-client").ModifyLogoDataResponse | null>;
         getDraftMetadata(logoDraftToken: string): string | undefined;
@@ -4393,16 +4408,21 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         hideChangeTemplateConfirmModal(): void;
         onBackgroundChanged(): void;
         onChangeTemplateConfirmModalCancel(): void;
-        onChangeTemplateConfirmModalConfirm(): void;
+        onChangeTemplateConfirmModalConfirm(): Promise<void>;
         onContentChanged(): void;
         onStyleChanged(): void;
-        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): void;
+        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): Promise<void>;
         setSelectedTabName(payload: any): void;
         showNextNotificationMessage(): Promise<void>;
         updateContent<TContent extends import("@brand-page").Content, P extends {
             id: string;
             content: TContent;
         }>(payload: P): Promise<void>;
+        _captureTemplateSwitchIfEnabled(): void;
+        applyHistorySnapshot(snapshot: import("@brand-page").BrandPageModel, activePageId?: string | undefined, logoEditsStr?: string | undefined): Promise<void>;
+        _syncLogoSettingsFromSnapshot(snapshot: import("@brand-page").BrandPageModel, logoEditsStr?: string | undefined): Promise<void>;
+        _navigateToActivePage(activePageId?: string | undefined): void;
+        _fallbackSidebarIfSelectedContentMissing(snapshot: import("@brand-page").BrandPageModel): void;
         export(): import("@brand-page").BrandPageModel;
         setBrandPageType({ brandPageType }: {
             brandPageType: "default" | "brandSite" | "brandContact";
@@ -4450,6 +4470,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     id: string;
                     type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                     personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
+                    topPadding?: number | undefined;
+                    bottomPadding?: number | undefined;
                     imageUrlOverride?: string | undefined;
                     imageUrlsOverride?: string | undefined;
                     avatarImageUrlOverride?: string | undefined;

package/lib/src/shared/publish-brand-page-with-state/PublishBrandPageModalWithState.mixin.d.ts

@@ -173,16 +173,21 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         hideChangeTemplateConfirmModal(): void;
         onBackgroundChanged(): void;
         onChangeTemplateConfirmModalCancel(): void;
-        onChangeTemplateConfirmModalConfirm(): void;
+        onChangeTemplateConfirmModalConfirm(): Promise<void>;
         onContentChanged(): void;
         onStyleChanged(): void;
-        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): void;
+        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): Promise<void>;
         setSelectedTabName(payload: any): void;
         showNextNotificationMessage(): Promise<void>;
         updateContent<TContent extends import("@brand-page/models").Content, P extends {
             id: string;
             content: TContent;
         }>(payload: P): Promise<void>;
+        _captureTemplateSwitchIfEnabled(): void;
+        applyHistorySnapshot(snapshot: import("@brand-page/models").BrandPageModel, activePageId?: string | undefined, logoEditsStr?: string | undefined): Promise<void>;
+        _syncLogoSettingsFromSnapshot(snapshot: import("@brand-page/models").BrandPageModel, logoEditsStr?: string | undefined): Promise<void>;
+        _navigateToActivePage(activePageId?: string | undefined): void;
+        _fallbackSidebarIfSelectedContentMissing(snapshot: import("@brand-page/models").BrandPageModel): void;
         export(): import("@brand-page/models").BrandPageModel;
         setBrandPageType({ brandPageType }: {
             brandPageType: "default" | "brandSite" | "brandContact";
@@ -479,6 +484,22 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }>;
     eventTracker: {
         sendShippingToggleEvent: (isEnabled: boolean) => void;
+        sendUndoEvent: (props: {
+            entries_count: number;
+            actor: string | undefined;
+        }) => void;
+        sendRedoEvent: (props: {
+            entries_count: number;
+            actor: string | undefined;
+        }) => void;
+        sendHistoryCappedEvent: (props: {
+            entries_count: number;
+            size_bytes: number;
+        }) => void;
+        sendHistoryOversizedEvent: (props: {
+            attempted_bytes: number;
+            source: string;
+        }) => void;
         sendSaveContactEvent: () => void;
         sendStartForFreeEvent: () => void;
         sendFooterLinkClickEvent: (linkType: "watermark_logo" | "create_your_website") => void;

package/lib/src/shared/side-bar/components/SideBarTabButton.mixin.d.ts

@@ -17,6 +17,22 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isDesignCom: import("vue").ComputedRef<boolean>;
     eventTracker: {
         sendShippingToggleEvent: (isEnabled: boolean) => void;
+        sendUndoEvent: (props: {
+            entries_count: number;
+            actor: string | undefined;
+        }) => void;
+        sendRedoEvent: (props: {
+            entries_count: number;
+            actor: string | undefined;
+        }) => void;
+        sendHistoryCappedEvent: (props: {
+            entries_count: number;
+            size_bytes: number;
+        }) => void;
+        sendHistoryOversizedEvent: (props: {
+            attempted_bytes: number;
+            source: string;
+        }) => void;
         sendSaveContactEvent: () => void;
         sendStartForFreeEvent: () => void;
         sendFooterLinkClickEvent: (linkType: "watermark_logo" | "create_your_website") => void;

package/lib/src/shared/style-settings/components/StyleSettings.mixin.d.ts

@@ -565,16 +565,21 @@ declare const _default: import("vue").DefineComponent<{}, {
         hideChangeTemplateConfirmModal(): void;
         onBackgroundChanged(): void;
         onChangeTemplateConfirmModalCancel(): void;
-        onChangeTemplateConfirmModalConfirm(): void;
+        onChangeTemplateConfirmModalConfirm(): Promise<void>;
         onContentChanged(): void;
         onStyleChanged(): void;
-        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): void;
+        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): Promise<void>;
         setSelectedTabName(payload: any): void;
         showNextNotificationMessage(): Promise<void>;
         updateContent<TContent extends import("@brand-page").Content, P extends {
             id: string;
             content: TContent;
         }>(payload: P): Promise<void>;
+        _captureTemplateSwitchIfEnabled(): void;
+        applyHistorySnapshot(snapshot: import("@brand-page").BrandPageModel, activePageId?: string | undefined, logoEditsStr?: string | undefined): Promise<void>;
+        _syncLogoSettingsFromSnapshot(snapshot: import("@brand-page").BrandPageModel, logoEditsStr?: string | undefined): Promise<void>;
+        _navigateToActivePage(activePageId?: string | undefined): void;
+        _fallbackSidebarIfSelectedContentMissing(snapshot: import("@brand-page").BrandPageModel): void;
         export(): import("@brand-page").BrandPageModel;
         setBrandPageType({ brandPageType }: {
             brandPageType: "default" | "brandSite" | "brandContact";
@@ -915,6 +920,22 @@ declare const _default: import("vue").DefineComponent<{}, {
     }>;
     eventTracker: {
         sendShippingToggleEvent: (isEnabled: boolean) => void;
+        sendUndoEvent: (props: {
+            entries_count: number;
+            actor: string | undefined;
+        }) => void;
+        sendRedoEvent: (props: {
+            entries_count: number;
+            actor: string | undefined;
+        }) => void;
+        sendHistoryCappedEvent: (props: {
+            entries_count: number;
+            size_bytes: number;
+        }) => void;
+        sendHistoryOversizedEvent: (props: {
+            attempted_bytes: number;
+            source: string;
+        }) => void;
         sendSaveContactEvent: () => void;
         sendStartForFreeEvent: () => void;
         sendFooterLinkClickEvent: (linkType: "watermark_logo" | "create_your_website") => void;

package/lib/src/shared/template-settings/components/TemplatesSettings.mixin.d.ts

@@ -565,6 +565,22 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isDesignCom: import("vue").ComputedRef<boolean>;
     eventTracker: {
         sendShippingToggleEvent: (isEnabled: boolean) => void;
+        sendUndoEvent: (props: {
+            entries_count: number;
+            actor: string | undefined;
+        }) => void;
+        sendRedoEvent: (props: {
+            entries_count: number;
+            actor: string | undefined;
+        }) => void;
+        sendHistoryCappedEvent: (props: {
+            entries_count: number;
+            size_bytes: number;
+        }) => void;
+        sendHistoryOversizedEvent: (props: {
+            attempted_bytes: number;
+            source: string;
+        }) => void;
         sendSaveContactEvent: () => void;
         sendStartForFreeEvent: () => void;
         sendFooterLinkClickEvent: (linkType: "watermark_logo" | "create_your_website") => void;

package/lib/src/utils/minify-brand-page-metadata.js

@@ -87,7 +87,17 @@ const findAssetKey = (assets, data) => {
     return assets.find((a) => a.data === data)?.key;
 };
 const minifyContent = (content, editor, assets) => {
-    const base = { id: content.id, type: content.type };
+    const base = {
+        id: content.id,
+        type: content.type,
+        // Padding Control (BP-5687) — shared across every block, persist when set.
+        ...(typeof content.topPadding === 'number' && {
+            topPadding: content.topPadding,
+        }),
+        ...(typeof content.bottomPadding === 'number' && {
+            bottomPadding: content.bottomPadding,
+        }),
+    };
     const c = content;
     // Helper: include imageUrl and its asset key if available
     const includeImageWithKey = (url, urlField = 'imageUrl', keyField = 'imageAssetKey') => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.18.6",
+  "version": "5.18.7-ast-padding-1",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page/components/about-section/AboutSection.vue

@@ -7,9 +7,10 @@
     <div
       :class="{
         'about-container': context.isBrandSite,
-        'about-container--padding tw-py-10': !isFullImage,
+        'about-container--padding': !isFullImage,
         'mobile-about-container--padding': isFullImage,
       }"
+      :style="contentPaddingStyle"
     >
       <Media
         v-if="
@@ -103,7 +104,10 @@
 import { computed } from 'vue';
 import type { AboutSectionViewModel } from '@brand-page/view-models';
 import type { BrandPageContext } from '@brand-page/models';
-import { getRenderText } from '@brand-page/utils';
+import {
+  getRenderText,
+  contentPaddingStyle as toContentPaddingStyle,
+} from '@brand-page/utils';
 import { hasRTEContent } from '@brand-page-maker/utils';
 import Media from '../media/Media.vue';
 import TextWrapper from '../text-wrapper/TextWrapper.vue';
@@ -123,6 +127,10 @@ const props = withDefaults(
   },
 );
 
+const contentPaddingStyle = computed(() =>
+  toContentPaddingStyle(props.viewModel),
+);
+
 const isFullImage = computed(
   () =>
     props.viewModel.displayStyle === 'right-aligned-full-image' ||
@@ -201,7 +209,6 @@ const renderText = computed((): string => {
 .device-wrapper--mobile .mobile-about-container--padding {
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
-  @apply tw-py-10;
 }
 .device-wrapper--mobile .text-grid-column {
   @apply container-grid-columns;
@@ -275,7 +282,6 @@ const renderText = computed((): string => {
   .mobile-about-container--padding {
     padding-left: var(--page-padding);
     padding-right: var(--page-padding);
-    @apply tw-py-10;
   }
   .about-container :deep(.container-image) {
     aspect-ratio: 1/1;

package/src/brand-page/components/banner-section/BannerSection.vue

@@ -7,9 +7,8 @@
           viewModel.isBigImageType,
         'c_banner--with-image-overlay tw-flex tw-flex-col': isDividedContent,
         'tw-px-6': !isDividedContent,
-        'tw-py-8': !isDividedContent && !isStackedFullWidth,
       }"
-      :style="viewModel.backgroundStyle"
+      :style="[viewModel.backgroundStyle, contentPaddingStyle]"
       style="container-type: inline-size"
     >
       <Media
@@ -201,7 +200,7 @@
             <div
               class="!tw-text-center tw-flex tw-flex-col tw-gap-5"
               :class="{
-                'tw-px-6 tw-py-8': isDividedContent,
+                'tw-px-6': isDividedContent,
               }"
             >
               <TextWrapper
@@ -332,7 +331,11 @@ import type {
 } from '@brand-page/view-models';
 import type { BrandPageContext } from '@brand-page/models';
 import { hasValidButton } from '../../../utils/validator.util';
-import { getRenderText, escapeContentText } from '@brand-page/utils';
+import {
+  getRenderText,
+  escapeContentText,
+  contentPaddingStyle as toContentPaddingStyle,
+} from '@brand-page/utils';
 import { hasRTEContent } from '@brand-page-maker/utils';
 import {
   ALIGN_CENTERED,
@@ -490,6 +493,10 @@ const layout = computed<BannerLayoutConfig>(
   () => BANNER_LAYOUTS[props.viewModel.displayStyle] ?? DEFAULT_LAYOUT,
 );
 
+const contentPaddingStyle = computed(() =>
+  toContentPaddingStyle(props.viewModel),
+);
+
 const displayAlignClass = computed(() => layout.value.alignClass);
 const isHorizontalAligned = computed(() => !!layout.value.hasSideImage);
 const isDividedContent = computed(() => layout.value.layout === 'divided');

package/src/brand-page/components/booking-section/BookingSection.vue

@@ -1,8 +1,8 @@
 <template>
   <section data-component="booking-section">
     <div
-      class="tw-relative tw-px-6 tw-py-8"
-      :style="viewModel.backgroundStyle"
+      class="tw-relative tw-px-6"
+      :style="[viewModel.backgroundStyle, contentPaddingStyle]"
       style="container-type: inline-size"
     >
       <div
@@ -45,7 +45,11 @@ import type {
   ButtonViewModel,
 } from '@brand-page/view-models';
 import type { BrandPageContext } from '@brand-page/models';
-import { getRenderText, escapeContentText } from '@brand-page/utils';
+import {
+  getRenderText,
+  escapeContentText,
+  contentPaddingStyle as toContentPaddingStyle,
+} from '@brand-page/utils';
 import { hasRTEContent } from '@brand-page-maker/utils';
 import { hasValidButton as shouldShowButtonUtil } from '../../../utils/validator.util';
 import Button from '../button/Button.vue';
@@ -71,6 +75,10 @@ const props = defineProps({
   },
 });
 
+const contentPaddingStyle = computed(() =>
+  toContentPaddingStyle(props.viewModel),
+);
+
 const renderText = computed((): string => {
   if (!props.viewModel.description) {
     return '';

package/src/brand-page/components/contact-form/ContactForm.mixin.ts

@@ -25,7 +25,10 @@ import {
   RECAPTCHA_ACTION_CONTACT_FORM,
   TEXT_ONLY,
 } from '../../constants';
-import { getRenderText } from '@brand-page/utils';
+import {
+  getRenderText,
+  contentPaddingStyle as toContentPaddingStyle,
+} from '@brand-page/utils';
 import { hasRTEContent } from '@brand-page-maker/utils';
 import { useReCaptcha } from '../../composables/recaptcha.composable';
 
@@ -97,6 +100,10 @@ export default defineComponent({
       return buttonTextStyle;
     },
 
+    contentPaddingStyle(): { paddingTop: string; paddingBottom: string } {
+      return toContentPaddingStyle(this.viewModel);
+    },
+
     hasCard(): boolean {
       return (
         this.viewModel.layoutStyle === ALIGN_CARD_CENTER ||
@@ -109,11 +116,10 @@ export default defineComponent({
     },
 
     hasBgColor(): boolean {
-      return (
-        this.viewModel.layoutStyle === ALIGN_CARD_CENTER ||
-        this.viewModel.layoutStyle === TEXT_ONLY ||
-        this.viewModel.layoutStyle === ALIGN_CENTERED
-      );
+      // Every brandSite layout applies the background colour on the section
+      // root (banner-style) so the padding control reveals it; for the image
+      // layouts it only shows in the padding bands around the image block.
+      return Boolean(this.viewModel.layoutStyle);
     },
 
     isCenteredLayout(): boolean {