@designcrowd/library.brand-page 5.14.11 → 5.14.12

package/lib/src/shared/content-settings/components/text-image-field/TextImageField.mixin.d.ts

@@ -1,126 +0,0 @@
-/// <reference types="types/lodash-shims" />
-import type { PropType } from 'vue';
-import type { ColorReplacement, LogoTheme, TextMediaItem, TextShapeItem, Content } from '../../../../brand-page';
-import type { DebounceHandle } from 'lodash.debounce';
-import type { UpdateItemValuePayload } from '../../models';
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    id: {
-        type: StringConstructor;
-        required: true;
-    };
-    name: {
-        type: StringConstructor;
-        required: true;
-    };
-    content: {
-        type: PropType<Content>;
-        required: true;
-    };
-    value: {
-        type: PropType<TextMediaItem[]>;
-        required: true;
-    };
-    maxLength: {
-        type: NumberConstructor;
-        required: false;
-        default: undefined;
-    };
-    logoTheme: {
-        type: PropType<LogoTheme>;
-        required: true;
-    };
-    settings: {
-        type: ObjectConstructor;
-        required: true;
-    };
-    isAdmin: {
-        type: BooleanConstructor;
-        required: true;
-    };
-    brandPageType: {
-        type: StringConstructor;
-        required: true;
-        default: "brandSite";
-    };
-}>, {}, {
-    changeDebounce: DebounceHandle | undefined;
-    options: (TextMediaItem | TextShapeItem)[];
-    maxLengthError: any;
-    invalidUrlError: any;
-    titleLength: number;
-    urlError: {};
-    mediaType: undefined;
-    descriptionLength: number;
-    schema: string;
-    maxItemsLength: number;
-}, {
-    items(): any;
-}, {
-    setMaxLayoutLength(value: number): void;
-    onItemsDelete(index: number): void;
-    onAddNewItem(): void;
-    addOption(): void;
-    emitChange(): void;
-    onItemsChange(items: TextMediaItem[]): void;
-    onReplaceImage(index: number, imageUrl: string): void;
-    onRemoveImage(index: number): void;
-    onColorReplacementsChange(payload: UpdateItemValuePayload<ColorReplacement[]>, index: number): void;
-    onValueChange(value: string, index: number): void;
-    checkUrl(index: number): any;
-    onTextAreaTextChange(payload: {
-        id: string;
-        name: string;
-        value: string;
-    }, index: number): void;
-    onPersonalisationOverrideChange(payload: {
-        id: string;
-        name: string;
-        value: string;
-    }, index: number): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "on-intent-image-replace")[], "update:modelValue" | "on-intent-image-replace", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    id: {
-        type: StringConstructor;
-        required: true;
-    };
-    name: {
-        type: StringConstructor;
-        required: true;
-    };
-    content: {
-        type: PropType<Content>;
-        required: true;
-    };
-    value: {
-        type: PropType<TextMediaItem[]>;
-        required: true;
-    };
-    maxLength: {
-        type: NumberConstructor;
-        required: false;
-        default: undefined;
-    };
-    logoTheme: {
-        type: PropType<LogoTheme>;
-        required: true;
-    };
-    settings: {
-        type: ObjectConstructor;
-        required: true;
-    };
-    isAdmin: {
-        type: BooleanConstructor;
-        required: true;
-    };
-    brandPageType: {
-        type: StringConstructor;
-        required: true;
-        default: "brandSite";
-    };
-}>> & Readonly<{
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    "onOn-intent-image-replace"?: ((...args: any[]) => any) | undefined;
-}>, {
-    maxLength: number;
-    brandPageType: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/lib/src/shared/content-settings/components/text-image-field/TextImageField.mixin.js

@@ -1,192 +0,0 @@
-import { defineComponent } from 'vue';
-import { MAX_DESCRIPTION_LENGTH, MAX_LENGTH_ERROR_MESSAGE, MAX_TITLE_LENGTH, INVALID_URL_MESSAGE, BRAND_PAGE_TYPES, ALIGN_LEFT_ALIGNED, ALIGN_RIGHT_ALIGNED, CONTENT_TYPES, MAX_IMAGES_SECTION_ALIGNMENT_ITEMS_LENGTH, } from '../../../../brand-page';
-import debounce from 'lodash.debounce';
-import cloneDeep from 'lodash.clonedeep';
-import { isURL } from '../../../../utils/validator.util';
-const DEBOUNCE_IN_MS = 250;
-export default defineComponent({
-    props: {
-        id: {
-            type: String,
-            required: true,
-        },
-        name: {
-            type: String,
-            required: true,
-        },
-        content: {
-            type: Object,
-            required: true,
-        },
-        value: {
-            type: Array,
-            required: true,
-        },
-        maxLength: {
-            type: Number,
-            required: false,
-            default: undefined,
-        },
-        logoTheme: {
-            type: Object,
-            required: true,
-        },
-        settings: {
-            type: Object,
-            required: true,
-        },
-        isAdmin: {
-            type: Boolean,
-            required: true,
-        },
-        brandPageType: {
-            type: String,
-            required: true,
-            default: BRAND_PAGE_TYPES.brandSite,
-        },
-    },
-    emits: ['update:modelValue', 'on-intent-image-replace'],
-    data: () => ({
-        changeDebounce: undefined,
-        options: [],
-        maxLengthError: MAX_LENGTH_ERROR_MESSAGE(),
-        invalidUrlError: INVALID_URL_MESSAGE(),
-        titleLength: MAX_TITLE_LENGTH,
-        urlError: {},
-        mediaType: undefined,
-        descriptionLength: MAX_DESCRIPTION_LENGTH,
-        schema: 'https',
-        maxItemsLength: 0,
-    }),
-    watch: {
-        options: {
-            handler() {
-                if (this.changeDebounce) {
-                    this.changeDebounce();
-                }
-            },
-            deep: true,
-        },
-    },
-    created() {
-        this.options = cloneDeep(this.value);
-        this.mediaType = this.settings.replaceImageSettings.mediaType;
-        this.options = this.options.map((o) => ({
-            ...o,
-            mediaType: this.mediaType,
-            imageLink: o.imageLink || '',
-        }));
-        if (!this.changeDebounce) {
-            this.changeDebounce = debounce(this.emitChange, DEBOUNCE_IN_MS);
-        }
-    },
-    computed: {
-        items() {
-            if (this.maxLength &&
-                this.maxLength > 2 &&
-                this.content.type === CONTENT_TYPES['images-section']) {
-                const imagesSectionContent = this.content;
-                if ([ALIGN_LEFT_ALIGNED, ALIGN_RIGHT_ALIGNED].some((s) => imagesSectionContent.displayStyle === s)) {
-                    this.setMaxLayoutLength(MAX_IMAGES_SECTION_ALIGNMENT_ITEMS_LENGTH);
-                    return this.value.length > 3
-                        ? this.value.slice(0, MAX_IMAGES_SECTION_ALIGNMENT_ITEMS_LENGTH)
-                        : this.value;
-                }
-            }
-            if (this.maxLength) {
-                this.setMaxLayoutLength(this.maxLength);
-            }
-            return this.value;
-        },
-    },
-    methods: {
-        setMaxLayoutLength(value) {
-            this.maxItemsLength = value;
-        },
-        onItemsDelete(index) {
-            this.options = this.options.filter((_o, i) => i !== index);
-            if (this.changeDebounce) {
-                this.changeDebounce();
-            }
-            const payload = {
-                id: this.id,
-                name: this.name,
-                value: cloneDeep(this.options),
-            };
-            this.$emit('update:modelValue', payload);
-        },
-        onAddNewItem() {
-            this.addOption();
-        },
-        addOption() {
-            this.options.push({
-                paragraph: '',
-                title: '',
-                imageUrl: '',
-                imageTitle: '',
-                height: -1,
-                width: -1,
-                mediaType: this.mediaType,
-                imageLink: '',
-                itemsId: -1,
-            });
-            if (this.changeDebounce) {
-                this.changeDebounce();
-            }
-        },
-        emitChange() {
-            const payload = {
-                id: this.id,
-                name: this.name,
-                value: this.options,
-            };
-            this.$emit('update:modelValue', payload);
-        },
-        onItemsChange(items) {
-            this.options = items;
-            if (this.changeDebounce) {
-                this.changeDebounce();
-            }
-            const payload = {
-                id: this.id,
-                name: this.name,
-                value: cloneDeep(items),
-            };
-            this.$emit('update:modelValue', payload);
-        },
-        onReplaceImage(index, imageUrl) {
-            this.$emit('on-intent-image-replace', {
-                id: this.id,
-                name: this.name,
-                index,
-                value: imageUrl,
-            });
-        },
-        onRemoveImage(index) {
-            this.options[index].imageUrl = '';
-            this.options[index].colorReplacements =
-                [];
-            this.emitChange();
-        },
-        onColorReplacementsChange(payload, index) {
-            this.options[index].colorReplacements = payload.value;
-            this.emitChange();
-        },
-        onValueChange(value, index) {
-            if (!value.includes(this.schema)) {
-                this.options[index].imageLink = `${this.schema}://${value}`;
-            }
-            this.urlError[index] = isURL(value);
-        },
-        checkUrl(index) {
-            return this.urlError[index] !== undefined ? this.urlError[index] : true;
-        },
-        onTextAreaTextChange(payload, index) {
-            this.options[index].paragraph = payload.value;
-        },
-        onPersonalisationOverrideChange(payload, index) {
-            this.options[index][payload.name] = payload.value;
-            this.emitChange();
-        },
-    },
-});

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

@@ -1,183 +0,0 @@
-import { defineComponent } from 'vue';
-import type { PropType } from 'vue';
-import ComponentCommonMixin from '../mixins/component-common.mixin';
-import type {
-  ImageViewModel,
-  TextImageSectionViewModel,
-} from '../../view-models';
-import type { BrandPageContext, ImageItem, TextMediaItem } from '../../models';
-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 as PropType<TextImageSectionViewModel>,
-      required: true,
-    },
-    context: {
-      type: Object as PropType<BrandPageContext>,
-      required: true,
-    },
-    contentIndex: {
-      type: Number,
-      required: false,
-      default: undefined,
-    },
-  },
-  data() {
-    return {
-      imageModalSelectedImageIndex: undefined as number | 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(): BrandPageCssStyle {
-      return getImagesSectionAspectRatioByDisplayStyle(
-        this.viewModel.items.length,
-        this.viewModel.displayStyle,
-        this.viewModel.aspectRatio,
-      );
-    },
-
-    placeHolderStyles(): BrandPageCssStyle {
-      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(): ImageItem[] {
-      return this.viewModel.items || [];
-    },
-    isPreview(): boolean {
-      return this.context.isPreview;
-    },
-    shouldLimitHeight(): boolean {
-      return (
-        this.viewModel.displayStyle === MEDIA_ONLY &&
-        this.viewModel.items.length === 1
-      );
-    },
-
-    shouldLimitHeightForPlaceHolder(): boolean {
-      return this.viewModel.items.length === 1;
-    },
-
-    hasAspectRatio(): boolean {
-      return ASPECT_RATIOS[this.viewModel.aspectRatio as string] !== '';
-    },
-
-    itemImageAltText(): (item: TextMediaItem) => string {
-      return (item) => getImageAltText(item, this.context);
-    },
-
-    imageViewModel(): ImageViewModel | undefined {
-      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(): boolean {
-      return (
-        this.context.isBrandPageOrIsBrandContact &&
-        this.images.length === 1 &&
-        this.viewModel.displayStyle === MEDIA_ONLY
-      );
-    },
-
-    hasBottomMargin(): boolean {
-      return this.context.isBrandPageOrIsBrandContact;
-    },
-
-    showDisplayImageInFullWidth(): boolean {
-      return this.images.length == 1 || !this.shouldLimitHeight;
-    },
-  },
-  methods: {
-    onSelectImage(item: ImageItem) {
-      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: number) {
-      this.imagesBroken[index] = true;
-    },
-    hasImageError(index: number) {
-      return this.imagesBroken[index] || false;
-    },
-    resetImageBrokenList() {
-      this.imagesBroken = {};
-    },
-    showPlaceholder(item: TextMediaItem) {
-      return (
-        this.context.isPreview &&
-        (!item.imageUrl || this.hasImageError(item.itemsId))
-      );
-    },
-  },
-});

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

@@ -1,29 +0,0 @@
-import { defineComponent } from 'vue';
-import type { PropType } from 'vue';
-import ComponentCommonMixin from '../mixins/component-common.mixin';
-import type { TextImageSectionViewModel } from '../../view-models';
-import type { BrandPageContext } from '../../models';
-
-export default defineComponent({
-  mixins: [ComponentCommonMixin],
-  props: {
-    viewModel: {
-      type: Object as PropType<TextImageSectionViewModel>,
-      required: true,
-    },
-    context: {
-      type: Object as PropType<BrandPageContext>,
-      required: true,
-    },
-    contentIndex: {
-      type: Number,
-      required: false,
-      default: undefined,
-    },
-  },
-  data() {
-    return {
-      imageModalSelectedImageIndex: undefined as number | undefined,
-    };
-  },
-});

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

@@ -1,124 +0,0 @@
-import { defineComponent } from 'vue';
-import type { PropType } from 'vue';
-import ComponentCommonMixin from '../mixins/component-common.mixin';
-import type { TextImageSectionViewModel } from '../../view-models';
-import type { BrandPageContext } from '../../models';
-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 as PropType<TextImageSectionViewModel /* | TextShapeSectionViewModel, | TextIllustrationViewModel */>,
-      required: true,
-    },
-    context: {
-      type: Object as PropType<BrandPageContext>,
-      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(): boolean {
-      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): string {
-      if (!paragraph) {
-        return '';
-      }
-
-      return getRenderText(paragraph);
-    },
-  },
-});