@designcrowd/library.brand-page 5.14.11 → 5.14.12

package/src/shared/content-settings/components/text-image-field/i18n/text-image-field.fr-FR.json

@@ -4,13 +4,28 @@
     "shapeColor" : "Couleur de forme",
     "imageCaptionPlaceholder" : "Ajouter une légende d'image",
     "imageLink" : "Lien d'image",
-    "imageCaption" : "Légende d'image",
+    "imageCaption" : "Légende du pop-up des images",
+    "imageCaptionSub" : "Cette légende n'apparaît que dans le pop-up des images",
     "addTitlePlaceholder" : "Ajouter un titre",
     "title" : "Titre",
     "addParagraphPlaceholder" : "Ajouter un paragraphe",
     "paragraph" : "Paragraphe",
     "addItemLabel" : "Ajouter un élément",
     "image" : "Image",
-    "shape" : "Forme"
+    "shape" : "Forme",
+    "none" : "Aucune",
+    "popup" : "Pop-up",
+    "openLink" : "Ouvrir le lien",
+    "imageBehaviour" : "Comportement de l’image",
+    "button" : "Bouton",
+    "buttonText" : "Texte du bouton",
+    "getStarted" : "Commencez",
+    "buttonLink" : "Lien de bouton",
+    "url" : "Url",
+    "email" : "Adresse e-mail",
+    "telephone" : "Numéro de téléphone",
+    "buttonTextStyleLabel" : "Style de texte des boutons",
+    "selectPage" : "Sélectionnez une page",
+    "page" : "Page"
   }
-}
+}

package/src/shared/content-settings/components/text-image-field/i18n/text-image-field.json

@@ -4,13 +4,29 @@
     "shapeColor": "Shape Color",
     "imageCaptionPlaceholder": "Add image caption",
     "imageLink": "Image link",
-    "imageCaption": "Image caption",
+    "imageCaption": "Image pop-up caption",
+    "imageCaptionSub": "This caption only appears in the image pop-up",
     "addTitlePlaceholder": "Add title",
     "title": "Title",
     "addParagraphPlaceholder": "Add paragraph",
     "paragraph": "Paragraph",
     "addItemLabel": "Add Item",
     "image": "Image",
-    "shape": "Shape"
+    "shape": "Shape",
+    "none": "None",
+    "popup": "Pop-up",
+    "openLink": "Open Link",
+    "imageBehaviour": "Image behaviour",
+    "button": "Button",
+    "buttonText": "Button text",
+    "getStarted": "Get Started",
+    "buttonLink": "Button Link",
+    "url": "Url",
+    "email": "Email Address",
+    "telephone": "Phone Number",
+    "buttonTextStyleLabel": "Button text Style",
+    "selectPage": "Select a page",
+    "page": "Page"
   }
 }
+  

package/src/shared/content-settings/components/text-image-field/i18n/text-image-field.pt-BR.json

@@ -4,13 +4,28 @@
     "shapeColor" : "Cor da forma",
     "imageCaptionPlaceholder" : "Adicionar legenda à imagem",
     "imageLink" : "Link da imagem",
-    "imageCaption" : "Legenda da imagem",
+    "imageCaption" : "Legenda da imagem pop-up",
+    "imageCaptionSub" : "Esta legenda só aparece no pop-up da imagem",
     "addTitlePlaceholder" : "Adicionar título",
     "title" : "Título",
     "addParagraphPlaceholder" : "Adicionar parágrafo",
     "paragraph" : "Parágrafo",
     "addItemLabel" : "Adicionar item",
     "image" : "Imagem",
-    "shape" : "Forma"
+    "shape" : "Forma",
+    "none" : "Nenhum",
+    "popup" : "Pop-up",
+    "openLink" : "Abrir link",
+    "imageBehaviour" : "Comportamento da imagem",
+    "button" : "Botão",
+    "buttonText" : "Texto do botão",
+    "getStarted" : "Começar",
+    "buttonLink" : "Link do botão",
+    "url" : "URL",
+    "email" : "Endereço de e-mail",
+    "telephone" : "Número de telefone",
+    "buttonTextStyleLabel" : "Estilo do texto do botão",
+    "selectPage" : "Selecione uma página",
+    "page" : "Página"
   }
-}
+}

package/src/shared/content-settings/components/text-image-field/i18n/text-image-field.pt-PT.json

@@ -4,13 +4,28 @@
     "shapeColor" : "Cor da Forma",
     "imageCaptionPlaceholder" : "Incluir legenda da imagem",
     "imageLink" : "Link da imagem",
-    "imageCaption" : "Legenda da imagem",
+    "imageCaption" : "Legenda pop-up da imagem",
+    "imageCaptionSub" : "Esta legenda só aparece no pop-up da imagem",
     "addTitlePlaceholder" : "Adicionar título",
     "title" : "Título",
     "addParagraphPlaceholder" : "Adicionar parágrafo",
     "paragraph" : "Parágrafo",
     "addItemLabel" : "Adicionar Item",
     "image" : "Imagem",
-    "shape" : "Forma"
+    "shape" : "Forma",
+    "none" : "Nenhum",
+    "popup" : "Pop-up",
+    "openLink" : "Abrir link",
+    "imageBehaviour" : "Comportamento da imagem",
+    "button" : "Botão",
+    "buttonText" : "Texto do botão",
+    "getStarted" : "Comece",
+    "buttonLink" : "Link de botão",
+    "url" : "URL",
+    "email" : "Endereço de email",
+    "telephone" : "Número de telefone",
+    "buttonTextStyleLabel" : "Estilo do texto do botão",
+    "selectPage" : "Selecione uma página",
+    "page" : "Página"
   }
-}
+}

package/lib/src/brand-page/components/images-section/ImagesSection.mixin.d.ts

@@ -1,86 +0,0 @@
-import type { PropType } from 'vue';
-import type { ImageViewModel, TextImageSectionViewModel } from '../../view-models';
-import type { BrandPageContext, ImageItem, TextMediaItem } from '../../models';
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    viewModel: {
-        type: PropType<TextImageSectionViewModel>;
-        required: true;
-    };
-    context: {
-        type: PropType<BrandPageContext>;
-        required: true;
-    };
-    contentIndex: {
-        type: NumberConstructor;
-        required: false;
-        default: undefined;
-    };
-}>, {}, {
-    imageModalSelectedImageIndex: number | undefined;
-    imagesBroken: {};
-    height: number;
-    width: number;
-}, {
-    textAlignClass(): "tw-items-center" | "tw-items-start";
-    imgStyles(): BrandPageCssStyle;
-    placeHolderStyles(): BrandPageCssStyle;
-    images(): ImageItem[];
-    isPreview(): boolean;
-    shouldLimitHeight(): boolean;
-    shouldLimitHeightForPlaceHolder(): boolean;
-    hasAspectRatio(): boolean;
-    itemImageAltText(): (item: TextMediaItem) => string;
-    imageViewModel(): ImageViewModel | undefined;
-    shouldRenderImage(): boolean;
-    hasBottomMargin(): boolean;
-    showDisplayImageInFullWidth(): boolean;
-}, {
-    onSelectImage(item: ImageItem): void;
-    onImageModalClose(): void;
-    onImageError(index: number): void;
-    hasImageError(index: number): any;
-    resetImageBrokenList(): void;
-    showPlaceholder(item: TextMediaItem): any;
-}, import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    isPreview: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-    isMobileDevice: {
-        type: BooleanConstructor;
-        required: false;
-        default: undefined;
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    isPreview: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-    isMobileDevice: {
-        type: BooleanConstructor;
-        required: false;
-        default: undefined;
-    };
-}>> & Readonly<{}>, {
-    isPreview: boolean;
-    isMobileDevice: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    viewModel: {
-        type: PropType<TextImageSectionViewModel>;
-        required: true;
-    };
-    context: {
-        type: PropType<BrandPageContext>;
-        required: true;
-    };
-    contentIndex: {
-        type: NumberConstructor;
-        required: false;
-        default: undefined;
-    };
-}>> & Readonly<{}>, {
-    contentIndex: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/lib/src/brand-page/components/images-section/ImagesSection.mixin.js

@@ -1,149 +0,0 @@
-import { defineComponent } from 'vue';
-import ComponentCommonMixin from '../mixins/component-common.mixin';
-import { ASPECT_RATIOS } from '../../models';
-import { ALIGN_CENTERED, MEDIA_ONLY } from '../../constants';
-import { getImageAltText, getImagesSectionAspectRatioByDisplayStyle, } from '../../utils';
-import isURL from 'validator/lib/isURL';
-const DEFAULT_CENTERED_ASPECT_RATIO = '2/1';
-export default defineComponent({
-    mixins: [ComponentCommonMixin],
-    props: {
-        viewModel: {
-            type: Object,
-            required: true,
-        },
-        context: {
-            type: Object,
-            required: true,
-        },
-        contentIndex: {
-            type: Number,
-            required: false,
-            default: undefined,
-        },
-    },
-    data() {
-        return {
-            imageModalSelectedImageIndex: undefined,
-            imagesBroken: {},
-            height: 0,
-            width: 0,
-        };
-    },
-    watch: {
-        viewModel: {
-            handler(newVal, oldVal) {
-                if (newVal.items !== oldVal.items) {
-                    this.resetImageBrokenList();
-                }
-            },
-            deep: true,
-        },
-    },
-    computed: {
-        textAlignClass() {
-            return this.viewModel.displayStyle === ALIGN_CENTERED
-                ? 'tw-items-center'
-                : 'tw-items-start';
-        },
-        imgStyles() {
-            return getImagesSectionAspectRatioByDisplayStyle(this.viewModel.items.length, this.viewModel.displayStyle, this.viewModel.aspectRatio);
-        },
-        placeHolderStyles() {
-            const aspectRatio = ASPECT_RATIOS[this.viewModel.aspectRatio];
-            if (aspectRatio) {
-                if (this.viewModel.aspectRatio === 'circle') {
-                    return {
-                        aspectRatio: '1/1',
-                        borderRadius: aspectRatio,
-                        overflow: 'hidden',
-                    };
-                }
-                else {
-                    return {
-                        aspectRatio: aspectRatio,
-                    };
-                }
-            }
-            else {
-                return {
-                    aspectRatio: DEFAULT_CENTERED_ASPECT_RATIO,
-                };
-            }
-        },
-        images() {
-            return this.viewModel.items || [];
-        },
-        isPreview() {
-            return this.context.isPreview;
-        },
-        shouldLimitHeight() {
-            return (this.viewModel.displayStyle === MEDIA_ONLY &&
-                this.viewModel.items.length === 1);
-        },
-        shouldLimitHeightForPlaceHolder() {
-            return this.viewModel.items.length === 1;
-        },
-        hasAspectRatio() {
-            return ASPECT_RATIOS[this.viewModel.aspectRatio] !== '';
-        },
-        itemImageAltText() {
-            return (item) => getImageAltText(item, this.context);
-        },
-        imageViewModel() {
-            const image = this.images[0];
-            if (!image) {
-                return;
-            }
-            return {
-                id: this.viewModel.id,
-                type: 'image',
-                role: 'image',
-                imageUrl: image.imageUrl,
-                imageTitle: image.imageTitle,
-                isFullWidth: this.viewModel.areImagesFullWidth,
-                aspectRatio: this.viewModel.aspectRatio,
-                height: image.height,
-                width: image.width,
-            };
-        },
-        shouldRenderImage() {
-            return (this.context.isBrandPageOrIsBrandContact &&
-                this.images.length === 1 &&
-                this.viewModel.displayStyle === MEDIA_ONLY);
-        },
-        hasBottomMargin() {
-            return this.context.isBrandPageOrIsBrandContact;
-        },
-        showDisplayImageInFullWidth() {
-            return this.images.length == 1 || !this.shouldLimitHeight;
-        },
-    },
-    methods: {
-        onSelectImage(item) {
-            if (item.imageLink && isURL(item.imageLink)) {
-                window.open(item.imageLink, '_blank');
-            }
-            else {
-                const index = this.images.findIndex((i) => i.imageUrl === item.imageUrl);
-                this.imageModalSelectedImageIndex = index;
-            }
-        },
-        onImageModalClose() {
-            this.imageModalSelectedImageIndex = undefined;
-        },
-        onImageError(index) {
-            this.imagesBroken[index] = true;
-        },
-        hasImageError(index) {
-            return this.imagesBroken[index] || false;
-        },
-        resetImageBrokenList() {
-            this.imagesBroken = {};
-        },
-        showPlaceholder(item) {
-            return (this.context.isPreview &&
-                (!item.imageUrl || this.hasImageError(item.itemsId)));
-        },
-    },
-});

package/lib/src/brand-page/components/shapes-section/ShapesSection.mixin.d.ts

@@ -1,62 +0,0 @@
-import type { PropType } from 'vue';
-import type { TextImageSectionViewModel } from '../../view-models';
-import type { BrandPageContext } from '../../models';
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    viewModel: {
-        type: PropType<TextImageSectionViewModel>;
-        required: true;
-    };
-    context: {
-        type: PropType<BrandPageContext>;
-        required: true;
-    };
-    contentIndex: {
-        type: NumberConstructor;
-        required: false;
-        default: undefined;
-    };
-}>, {}, {
-    imageModalSelectedImageIndex: number | undefined;
-}, {}, {}, import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    isPreview: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-    isMobileDevice: {
-        type: BooleanConstructor;
-        required: false;
-        default: undefined;
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    isPreview: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-    isMobileDevice: {
-        type: BooleanConstructor;
-        required: false;
-        default: undefined;
-    };
-}>> & Readonly<{}>, {
-    isPreview: boolean;
-    isMobileDevice: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    viewModel: {
-        type: PropType<TextImageSectionViewModel>;
-        required: true;
-    };
-    context: {
-        type: PropType<BrandPageContext>;
-        required: true;
-    };
-    contentIndex: {
-        type: NumberConstructor;
-        required: false;
-        default: undefined;
-    };
-}>> & Readonly<{}>, {
-    contentIndex: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/lib/src/brand-page/components/shapes-section/ShapesSection.mixin.js

@@ -1,25 +0,0 @@
-import { defineComponent } from 'vue';
-import ComponentCommonMixin from '../mixins/component-common.mixin';
-export default defineComponent({
-    mixins: [ComponentCommonMixin],
-    props: {
-        viewModel: {
-            type: Object,
-            required: true,
-        },
-        context: {
-            type: Object,
-            required: true,
-        },
-        contentIndex: {
-            type: Number,
-            required: false,
-            default: undefined,
-        },
-    },
-    data() {
-        return {
-            imageModalSelectedImageIndex: undefined,
-        };
-    },
-});

package/lib/src/brand-page/components/text-media-section/TextMediaSection.mixin.d.ts

@@ -1,66 +0,0 @@
-import type { PropType } from 'vue';
-import type { TextImageSectionViewModel } from '../../view-models';
-import type { BrandPageContext } from '../../models';
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    viewModel: {
-        type: PropType<TextImageSectionViewModel>;
-        required: true;
-    };
-    context: {
-        type: PropType<BrandPageContext>;
-        required: true;
-    };
-}>, {}, {}, {
-    items(): any;
-    shouldDisplayText(): boolean;
-    isFullWidth(): any;
-    hasTitle(): boolean;
-    hasDescription(): boolean;
-    shouldHorizontalAlign(): boolean;
-    shouldCenterAlign(): boolean;
-    isCardCenteredAlign(): boolean;
-    isCardCenteredWithShapes(): any;
-    isAlternateRow(): boolean;
-    hasBackground(): boolean;
-    hasNoPadding(): any;
-    hasBrandSitePadding(): any;
-    hasRoundedCorners(): boolean;
-    shouldDisplayOnFullWidth(): boolean;
-}, {
-    renderText(paragraph: any): string;
-}, import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    isPreview: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-    isMobileDevice: {
-        type: BooleanConstructor;
-        required: false;
-        default: undefined;
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    isPreview: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-    isMobileDevice: {
-        type: BooleanConstructor;
-        required: false;
-        default: undefined;
-    };
-}>> & Readonly<{}>, {
-    isPreview: boolean;
-    isMobileDevice: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    viewModel: {
-        type: PropType<TextImageSectionViewModel>;
-        required: true;
-    };
-    context: {
-        type: PropType<BrandPageContext>;
-        required: true;
-    };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/lib/src/brand-page/components/text-media-section/TextMediaSection.mixin.js

@@ -1,90 +0,0 @@
-import { defineComponent } from 'vue';
-import ComponentCommonMixin from '../mixins/component-common.mixin';
-import { ALIGN_CARD_CENTER_IMAGE, ALIGN_CENTERED, ALIGN_LEFT_ALIGNED, ALIGN_RIGHT_ALIGNED, ALTERNATE_IMAGE, MEDIA_ONLY, } from '../../constants';
-import { isHexTransparent } from '../../utils/color.util';
-import { escapeContentText, getRenderText } from '../../utils';
-export default defineComponent({
-    mixins: [ComponentCommonMixin],
-    props: {
-        viewModel: {
-            type: Object,
-            required: true,
-        },
-        context: {
-            type: Object,
-            required: true,
-        },
-    },
-    computed: {
-        items() {
-            return this.viewModel.items;
-        },
-        shouldDisplayText() {
-            return this.viewModel.displayStyle !== MEDIA_ONLY;
-        },
-        isFullWidth() {
-            return this.context.isBrandSite && this.viewModel.areImagesFullWidth;
-        },
-        hasTitle() {
-            const sanitizedTitle = escapeContentText(this.viewModel.title) || '';
-            return sanitizedTitle.length > 0;
-        },
-        hasDescription() {
-            const sanitizedDescription = escapeContentText(this.viewModel.description) || '';
-            return sanitizedDescription.length > 0;
-        },
-        shouldHorizontalAlign() {
-            return (this.viewModel.displayStyle === ALIGN_LEFT_ALIGNED ||
-                this.viewModel.displayStyle === ALIGN_RIGHT_ALIGNED);
-        },
-        shouldCenterAlign() {
-            return (this.viewModel.displayStyle === ALIGN_CENTERED ||
-                this.viewModel.displayStyle === MEDIA_ONLY ||
-                this.viewModel.displayStyle === ALIGN_CARD_CENTER_IMAGE);
-        },
-        isCardCenteredAlign() {
-            return this.viewModel.displayStyle === ALIGN_CARD_CENTER_IMAGE;
-        },
-        isCardCenteredWithShapes() {
-            return (this.isCardCenteredAlign &&
-                this.viewModel.role === 'shapes-section' &&
-                !this.context.isTemplate &&
-                !this.context.isBrandSite);
-        },
-        isAlternateRow() {
-            return this.viewModel.displayStyle === ALTERNATE_IMAGE;
-        },
-        hasBackground() {
-            if (!this.viewModel.backgroundStyle.backgroundColor) {
-                return false;
-            }
-            return !isHexTransparent(this.viewModel.backgroundStyle.backgroundColor);
-        },
-        hasNoPadding() {
-            if (this.context.isBrandPageOrIsBrandContact) {
-                return !this.hasBackground;
-            }
-            return this.viewModel.areImagesFullWidth;
-        },
-        hasBrandSitePadding() {
-            return this.context.isBrandSite && !this.viewModel.areImagesFullWidth;
-        },
-        hasRoundedCorners() {
-            if (this.context.isBrandPageOrIsBrandContact) {
-                return !this.viewModel.areImagesFullWidth;
-            }
-            return !this.hasNoPadding;
-        },
-        shouldDisplayOnFullWidth() {
-            return !this.context.isMobile;
-        },
-    },
-    methods: {
-        renderText(paragraph) {
-            if (!paragraph) {
-                return '';
-            }
-            return getRenderText(paragraph);
-        },
-    },
-});