@designcrowd/library.brand-page 5.19.0 → 5.19.1-error-html2canvas-2

package/src/metadata-builder/builders/footer-builder.test.ts

@@ -74,3 +74,140 @@ describe('FooterBuilder — copyright font vs global style', () => {
     expect(style.textAlign).toBe('center');
   });
 });
+
+type Link = { imageUrl: string; url: string };
+
+const link = (imageUrl: string): Link => ({
+  imageUrl,
+  url: `https://${imageUrl}.com`,
+});
+
+/**
+ * Footers migrated from the legacy single `footerStyles` model
+ * (migration-01) split into desktop + mobile via a shallow spread, leaving
+ * both viewports' `socialLinks` pointing at ONE shared array. `cloneDeep`
+ * preserves that shared reference. This factory reproduces that shape.
+ */
+const makeSharedSocialModel = (links: Link[]): BrandPageModel => {
+  const shared = links.map((l) => ({ ...l }));
+
+  return {
+    styles: { textStyles: { textStyleOptions } },
+    pageFooterDesktop: { socialLinks: shared },
+    pageFooterMobile: { socialLinks: shared },
+  } as unknown as BrandPageModel;
+};
+
+const makeIndependentSocialModel = (links: Link[]): BrandPageModel =>
+  ({
+    styles: { textStyles: { textStyleOptions } },
+    pageFooterDesktop: { socialLinks: links.map((l) => ({ ...l })) },
+    pageFooterMobile: { socialLinks: links.map((l) => ({ ...l })) },
+  }) as unknown as BrandPageModel;
+
+const socialIcons = (footer: { socialLinks?: Link[] } | undefined) =>
+  (footer?.socialLinks ?? []).map((l) => l.imageUrl);
+
+describe('FooterBuilder — social link removal (shared-array regression)', () => {
+  // Reproduces the bug: a single requested removal index dropped TWO links
+  // because both viewports shared one array and the builder spliced it twice.
+  it('removes exactly one link per requested index even when viewports share the array', async () => {
+    const model = makeSharedSocialModel([
+      link('facebook'),
+      link('instagram'),
+      link('x'),
+      link('youtube'),
+    ]);
+
+    const { model: out } = await run(
+      { _remove_social_link_indices: [2] },
+      model,
+    );
+
+    expect(socialIcons(out.pageFooterDesktop)).toEqual([
+      'facebook',
+      'instagram',
+      'youtube',
+    ]);
+    expect(socialIcons(out.pageFooterMobile)).toEqual([
+      'facebook',
+      'instagram',
+      'youtube',
+    ]);
+  });
+
+  it('un-shares the viewport arrays so later in-place edits cannot cross-corrupt', async () => {
+    const model = makeSharedSocialModel([
+      link('facebook'),
+      link('instagram'),
+      link('x'),
+    ]);
+
+    const { model: out } = await run(
+      { _remove_social_link_indices: [0] },
+      model,
+    );
+
+    expect(out.pageFooterDesktop!.socialLinks).not.toBe(
+      out.pageFooterMobile!.socialLinks,
+    );
+  });
+
+  it('handles multiple removal indices on a shared array (descending splice)', async () => {
+    const model = makeSharedSocialModel([
+      link('facebook'),
+      link('instagram'),
+      link('x'),
+      link('youtube'),
+    ]);
+
+    const { model: out } = await run(
+      { _remove_social_link_indices: [0, 2] },
+      model,
+    );
+
+    expect(socialIcons(out.pageFooterDesktop)).toEqual([
+      'instagram',
+      'youtube',
+    ]);
+    expect(socialIcons(out.pageFooterMobile)).toEqual(['instagram', 'youtube']);
+  });
+
+  it('removes one link per index for independent viewport arrays (no regression)', async () => {
+    const model = makeIndependentSocialModel([
+      link('facebook'),
+      link('instagram'),
+      link('x'),
+    ]);
+
+    const { model: out } = await run(
+      { _remove_social_link_indices: [1] },
+      model,
+    );
+
+    expect(socialIcons(out.pageFooterDesktop)).toEqual(['facebook', 'x']);
+    expect(socialIcons(out.pageFooterMobile)).toEqual(['facebook', 'x']);
+  });
+
+  it('inserts exactly one link on a shared array (symmetric add guard)', async () => {
+    const model = makeSharedSocialModel([link('facebook'), link('instagram')]);
+
+    const { model: out } = await run(
+      {
+        social_links: [{ insert_at: 1, social_link_icon: 'x', url: 'x.com' }],
+      },
+      model,
+    );
+
+    expect(socialIcons(out.pageFooterDesktop)).toEqual([
+      'facebook',
+      'x',
+      'instagram',
+    ]);
+    expect(socialIcons(out.pageFooterMobile)).toEqual([
+      'facebook',
+      'x',
+      'instagram',
+    ]);
+  });
+});

package/src/metadata-builder/builders/footer-builder.ts

@@ -17,6 +17,10 @@ import type { TextStyleOptions } from '../../brand-page/models/styles.model';
 import { FOOTER_CHECKS } from './section-rules/footer.rules';
 import { applyDetachedStyleOverride } from './section-field-utils';
 
+type FooterSocialLink = NonNullable<
+  AbstractPageFooterStyles['socialLinks']
+>[number];
+
 const normaliseSocialUrl = (url: string): string => {
   for (const prefix of ['mailto:', 'tel:']) {
     if (url.startsWith(prefix)) return url.slice(prefix.length);
@@ -25,108 +29,127 @@ const normaliseSocialUrl = (url: string): string => {
   return url;
 };
 
-const applyGlobalFooterChanges = (
-  footer: AbstractPageFooterStyles,
+const makeSocialLink = (
+  icon: string | undefined,
+  url: string | undefined,
+): FooterSocialLink =>
+  ({
+    imageUrl: icon || '',
+    url: normaliseSocialUrl(url || ''),
+    imageTitle: '',
+    width: 0,
+    height: 0,
+    imageLink: '',
+  }) as FooterSocialLink;
+
+const hasSocialLinkMutation = (args: UpdateFooterArguments): boolean =>
+  args._replace_social_links === true ||
+  (args._remove_social_link_indices?.length ?? 0) > 0 ||
+  (args._reorder_social_links?.length ?? 0) > 0 ||
+  (args.social_links?.length ?? 0) > 0;
+
+/**
+ * Social links are a GLOBAL footer concern — one logical list that both
+ * viewports render identically. Derive the new list ONCE from the current one
+ * WITHOUT mutating the input, so the caller can assign an independent copy to
+ * each viewport.
+ *
+ * Why this can't mutate per-viewport in place: footers migrated from the legacy
+ * single `footerStyles` model (migration-01) share ONE `socialLinks` array
+ * reference across pageFooterDesktop and pageFooterMobile, and `cloneDeep`
+ * preserves that shared reference. Running an in-place `splice` once per
+ * viewport therefore applies it TWICE to the same array — e.g. one requested
+ * removal index drops two links. Compute-once + assign-fresh is correct for
+ * both shared (legacy) and independent (new-model) footers.
+ */
+const computeSocialLinks = (
+  current: FooterSocialLink[] | undefined,
   args: UpdateFooterArguments,
-  textStyleOptions: TextStyleOptions | undefined,
-): void => {
-  if (args.copyright_text !== undefined)
-    footer.copyrightText = args.copyright_text;
-
-  if (args.copyright_text_font_family !== undefined)
-    footer.copyrightStyle = applyDetachedStyleOverride(
-      footer.copyrightStyle,
-      { fontFamily: args.copyright_text_font_family },
-      textStyleOptions,
+): FooterSocialLink[] => {
+  // _replace_social_links: replace entire list (empty/absent social_links = clear all).
+  // A replacement supersedes every other social link mutation.
+  if (args._replace_social_links) {
+    return (args.social_links ?? []).map((l) =>
+      makeSocialLink(l.social_link_icon, l.url),
     );
+  }
 
-  const links = args.social_links;
+  const links: FooterSocialLink[] = [...(current ?? [])];
 
-  // _replace_social_links: replace entire list (empty/absent social_links = clear all).
-  // When replacing, all other social link mutations (remove, insert, reorder) are skipped —
-  // they are superseded by the replacement and running them would cause duplicates.
-  if (args._replace_social_links) {
-    footer.socialLinks = (links ?? []).map((l) => ({
-      imageUrl: l.social_link_icon || '',
-      url: normaliseSocialUrl(l.url || ''),
-      imageTitle: '',
-      width: 0,
-      height: 0,
-      imageLink: '',
-    }));
-  } else {
-    // Targeted mutations — only run when NOT replacing the entire list.
-
-    // item_index-based updates for existing links
-    if (links?.length) {
-      for (const link of links) {
-        if (link.item_index === undefined) continue;
-
-        const existing = footer.socialLinks?.[link.item_index];
-
-        if (!existing) continue;
-
-        if (link.social_link_icon !== undefined)
-          existing.imageUrl = link.social_link_icon;
-
-        if (link.url !== undefined) existing.url = normaliseSocialUrl(link.url);
-      }
-    }
+  // item_index-based updates for existing links — replace the item reference
+  // (never mutate the original object, which may be shared across viewports).
+  for (const link of args.social_links ?? []) {
+    if (link.item_index === undefined) continue;
 
-    // Remove by index (descending order to preserve indices during splice)
-    if (args._remove_social_link_indices?.length && footer.socialLinks) {
-      const sorted = [...args._remove_social_link_indices].sort(
-        (a, b) => b - a,
-      );
+    const existing = links[link.item_index];
 
-      for (const idx of sorted) {
-        if (idx >= 0 && idx < footer.socialLinks.length)
-          footer.socialLinks.splice(idx, 1);
-      }
-    }
+    if (!existing) continue;
 
-    // Insert new links (descending insert_at order to preserve positions during splice)
-    const insertLinks = (links ?? []).filter(
-      (l): l is FooterSocialLinkItem & { insert_at: number } =>
-        l.insert_at !== undefined && l.item_index === undefined,
-    );
-    const sortedInserts = [...insertLinks].sort(
-      (a, b) => b.insert_at - a.insert_at,
-    );
+    links[link.item_index] = {
+      ...existing,
+      ...(link.social_link_icon !== undefined
+        ? { imageUrl: link.social_link_icon }
+        : {}),
+      ...(link.url !== undefined ? { url: normaliseSocialUrl(link.url) } : {}),
+    };
+  }
 
-    for (const link of sortedInserts) {
-      const pos = Math.max(
-        0,
-        Math.min(link.insert_at, footer.socialLinks?.length ?? 0),
-      );
-
-      footer.socialLinks = footer.socialLinks ?? [];
-      footer.socialLinks.splice(pos, 0, {
-        imageUrl: link.social_link_icon || '',
-        url: normaliseSocialUrl(link.url || ''),
-        imageTitle: '',
-        width: 0,
-        height: 0,
-        imageLink: '',
-      });
+  // Remove by index (descending order to preserve indices during splice).
+  if (args._remove_social_link_indices?.length) {
+    const sorted = [...args._remove_social_link_indices].sort((a, b) => b - a);
+
+    for (const idx of sorted) {
+      if (idx >= 0 && idx < links.length) links.splice(idx, 1);
     }
+  }
+
+  // Insert new links (descending insert_at order to preserve positions).
+  const insertLinks = (args.social_links ?? []).filter(
+    (l): l is FooterSocialLinkItem & { insert_at: number } =>
+      l.insert_at !== undefined && l.item_index === undefined,
+  );
+  const sortedInserts = [...insertLinks].sort(
+    (a, b) => b.insert_at - a.insert_at,
+  );
 
-    // Reorder (requires ALL indices — partial reorder is not supported)
-    if (args._reorder_social_links?.length && footer.socialLinks) {
-      const newOrder = args._reorder_social_links;
-      const unique = new Set(newOrder);
+  for (const link of sortedInserts) {
+    const pos = Math.max(0, Math.min(link.insert_at, links.length));
+
+    links.splice(pos, 0, makeSocialLink(link.social_link_icon, link.url));
+  }
 
-      if (
-        unique.size === newOrder.length &&
-        newOrder.every((idx) => idx >= 0 && idx < footer.socialLinks!.length)
-      ) {
-        const reordered = newOrder.map((idx) => footer.socialLinks![idx]);
+  // Reorder (requires ALL indices — partial reorder is not supported).
+  if (args._reorder_social_links?.length) {
+    const newOrder = args._reorder_social_links;
+    const unique = new Set(newOrder);
 
-        if (reordered.length === footer.socialLinks.length)
-          footer.socialLinks = reordered;
-      }
+    if (
+      unique.size === newOrder.length &&
+      newOrder.every((idx) => idx >= 0 && idx < links.length)
+    ) {
+      const reordered = newOrder.map((idx) => links[idx]);
+
+      if (reordered.length === links.length) return reordered;
     }
   }
+
+  return links;
+};
+
+const applyGlobalFooterChanges = (
+  footer: AbstractPageFooterStyles,
+  args: UpdateFooterArguments,
+  textStyleOptions: TextStyleOptions | undefined,
+): void => {
+  if (args.copyright_text !== undefined)
+    footer.copyrightText = args.copyright_text;
+
+  if (args.copyright_text_font_family !== undefined)
+    footer.copyrightStyle = applyDetachedStyleOverride(
+      footer.copyrightStyle,
+      { fontFamily: args.copyright_text_font_family },
+      textStyleOptions,
+    );
 };
 
 const applyViewportFooterChanges = (
@@ -207,13 +230,30 @@ export class FooterBuilder extends BaseMetadataBuilder<UpdateFooterArguments> {
     const args = this.request.payload ?? {};
     const textStyleOptions = model.styles?.textStyles?.textStyleOptions;
 
-    // Global fields (copyright_text, social links) always apply to both viewports.
+    // Global scalar/style fields (copyright text + font) apply to both
+    // viewports. These are idempotent assignments, safe to run per-viewport.
     if (model.pageFooterDesktop)
       applyGlobalFooterChanges(model.pageFooterDesktop, args, textStyleOptions);
 
     if (model.pageFooterMobile)
       applyGlobalFooterChanges(model.pageFooterMobile, args, textStyleOptions);
 
+    // Social links are a single global list. Derive the new list ONCE, then
+    // assign an INDEPENDENT copy to each viewport — never mutate a (possibly
+    // shared) viewport array in place. See computeSocialLinks.
+    if (hasSocialLinkMutation(args)) {
+      const current =
+        model.pageFooterDesktop?.socialLinks ??
+        model.pageFooterMobile?.socialLinks;
+      const updated = computeSocialLinks(current, args);
+
+      if (model.pageFooterDesktop)
+        model.pageFooterDesktop.socialLinks = updated.map((l) => ({ ...l }));
+
+      if (model.pageFooterMobile)
+        model.pageFooterMobile.socialLinks = updated.map((l) => ({ ...l }));
+    }
+
     // Viewport-specific styling via explicit sub-objects.
     if (args.desktop && model.pageFooterDesktop)
       applyViewportFooterChanges(model.pageFooterDesktop, args.desktop);

package/src/metadata-builder/builders/section-builders/image-gallery-builder.ts

@@ -46,7 +46,7 @@ const mergeGalleryImages = (
     const existing = content.images?.[index];
     const imageUrl = isValidUrl(img.image_url)
       ? img.image_url!
-      : existing?.imageUrl ?? '';
+      : (existing?.imageUrl ?? '');
 
     return {
       ...(existing || {}),

package/src/metadata-builder/builders/section-builders/images-section-builder.ts

@@ -80,7 +80,7 @@ const mergeImageItems = (
       ...(existing || {}),
       imageUrl: isValidUrl(item.image_url)
         ? item.image_url!
-        : existing?.imageUrl ?? '',
+        : (existing?.imageUrl ?? ''),
       imageTitle: existing?.imageTitle ?? '',
       width: existing?.width ?? 0,
       height: existing?.height ?? 0,

package/src/metadata-builder/builders/section-builders/testimonial-section-builder.ts

@@ -128,7 +128,7 @@ const mergeTestimonialItemsAsync = async (
         ? 'shape'
         : item.avatar_image_url
           ? 'image'
-          : existing?.mediaType ?? 'image';
+          : (existing?.mediaType ?? 'image');
 
       return {
         ...(existing || {}),

package/src/metadata-builder/builders/section-builders/text-section-builder.ts

@@ -128,7 +128,7 @@ const mergeTextItems = (
     ) as TextStyleDeclaration;
 
     const resolved = item.text !== undefined ? resolveText(item.text) : null;
-    const text = resolved ? resolved.html : existing?.text ?? '';
+    const text = resolved ? resolved.html : (existing?.text ?? '');
 
     return {
       text,

package/src/metadata-builder/builders/shape-color-utils.ts

@@ -68,8 +68,8 @@ export const applyColorThemeToReplacements = (
     replacementColor:
       replacements.length === 1
         ? colorTheme
-        : getNewColorBasedOnTargetColorTheme(
+        : (getNewColorBasedOnTargetColorTheme(
             r.originalColor,
             colorTheme,
-          )?.toString() ?? colorTheme,
+          )?.toString() ?? colorTheme),
   }));

package/src/plugins/google-maps-plugin/google-maps-plugin.ts

@@ -31,10 +31,10 @@ export interface AddressDetails {
 export class GoogleMapsPlugin {
   private initialised = false;
   private initialising = false;
-  private readonly _options: GoogleMapsPluginOptions;
+  private readonly options: GoogleMapsPluginOptions;
 
   constructor(options: GoogleMapsPluginOptions) {
-    this._options = options;
+    this.options = options;
   }
 
   private async initialise(): Promise<void> {
@@ -111,7 +111,7 @@ export class GoogleMapsPlugin {
     const { PlaceAutocompleteElement } = await this.getPlacesLibrary();
 
     return new PlaceAutocompleteElement({
-      requestedLanguage: this._options.locale,
+      requestedLanguage: this.options.locale,
       ...options,
     });
   }
@@ -149,17 +149,17 @@ export class GoogleMapsPlugin {
   }
 
   private getGoogleScriptUrl(): string {
-    const baseUrl = `https://maps.googleapis.com/maps/api/js?key=${this._options.apiKey}&libraries=places&loading=async`;
+    const baseUrl = `https://maps.googleapis.com/maps/api/js?key=${this.options.apiKey}&libraries=places&loading=async`;
 
-    return this._options.locale
-      ? `${baseUrl}&language=${this._options.locale}`
+    return this.options.locale
+      ? `${baseUrl}&language=${this.options.locale}`
       : baseUrl;
   }
 
   getEmbedGoogleMapsSrc(options: GetEmbedGoogleMapsOptions): string {
     const mapMode = options.mapMode || MAP_MODE_PLACE;
-    const locale = options.locale || this._options.locale;
-    const baseUrl = `https://www.google.com/maps/embed/v1/${mapMode}?key=${this._options.apiKey}&q=${options.query}`;
+    const locale = options.locale || this.options.locale;
+    const baseUrl = `https://www.google.com/maps/embed/v1/${mapMode}?key=${this.options.apiKey}&q=${options.query}`;
 
     return locale ? `${baseUrl}&language=${locale}` : baseUrl;
   }

package/src/shared/background-settings/components/BackgroundSettings.vue

@@ -174,7 +174,7 @@ const isPersonalisationEnabled = computed(
 );
 const isDesignCom = computed(() => containerStore.isDesignCom);
 
-const emit = defineEmits(['on-intent-image-replace']);
+defineEmits(['on-intent-image-replace']);
 
 const shapeTabs = [
   backgroundSettingsTr(`background`),

package/src/shared/background-settings/components/background-color/BackgroundColorSettings.vue

@@ -22,7 +22,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { computed, type PropType } from 'vue';
+import { computed } from 'vue';
 import { HelloBar } from '@designcrowd/fe-shared-lib';
 import { useUiBackgroundSettingsStore } from '../../store';
 import ColorField from '../../../content-settings/components/color-field/ColorField.vue';

package/src/shared/color-picker/components/ColorPicker.mixin.ts

@@ -3,15 +3,9 @@ import { Icon } from '@designcrowd/fe-shared-lib';
 import ColorPickerSwatch from './ColorPickerSwatch.vue';
 import type { ColorValue, ColorGroupItem, ColorGroup } from '../models';
 import { DEFAULT_COLORS, DEFAULT_GRADIENT_COLORS } from '../constants';
-import {
-  RGBAtoHex,
-  hexToRGB,
-  arrayToLinearGradient,
-  isRgbColor,
-} from '@utils/helpers';
+import { RGBAtoHex, arrayToLinearGradient, isRgbColor } from '@utils/helpers';
 import { normalizeColorToHex, colorsMatch } from '@brand-page/utils/style.util';
 import { colorPickerTr } from '@src/composables/useTranslate';
-import { useUiStyleSettingsStore } from '../../style-settings/store';
 
 // Simple session storage for newColors (persists during browser session, clears on refresh)
 let sessionNewColors: ColorGroupItem[] = [];
@@ -53,6 +47,7 @@ export default defineComponent({
       default: () => false,
     },
   },
+  emits: ['on-color-select'],
   data() {
     const groups: ColorGroup[] = [];
     const newColors: ColorGroupItem[] = [];

package/src/shared/color-picker/components/ColorPickerSwatch.mixin.ts

@@ -7,6 +7,7 @@ export default defineComponent({
       required: true,
     },
   },
+  emits: ['click'],
   data() {
     const styles: BrandPageCssStyle = this.color.styles;
 

package/src/shared/common/NumberInput.vue

@@ -53,6 +53,7 @@ export default {
       default: 1,
     },
   },
+  emits: ['update:model-value'],
   data() {
     return {
       priceValue: this.modelValue,

package/src/shared/common/SideBarSettingsHeader.vue

@@ -33,9 +33,9 @@
 </template>
 <script setup lang="ts">
 import { Button } from '@designcrowd/fe-shared-lib';
-import { tr, commonTr } from '@src/composables/useTranslate';
+import { commonTr } from '@src/composables/useTranslate';
 
-const props = defineProps({
+defineProps({
   showBackButton: {
     type: Boolean,
     required: false,

package/src/shared/confirm-modal/ConfirmModal.mixin.ts

@@ -14,6 +14,7 @@ export default defineComponent({
       required: false,
     },
   },
+  emits: ['confirm', 'cancel'],
   setup() {
     const containerStore = useBrandPageContainerStore();
 

package/src/shared/content-settings/components/booking-url-field/BookingUrlField.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-v-html -->
 <template>
   <div data-component="booking-url-field">
     <div

package/src/shared/content-settings/components/button-configuration-field/ButtonConfigurationField.vue

@@ -137,6 +137,7 @@ const props = withDefaults(defineProps<Props>(), {
   titleLength: MAX_TITLE_LENGTH,
   descriptionLength: MAX_DESCRIPTION_LENGTH,
   isAdmin: false,
+  pages: undefined,
 });
 
 const pageSettingsStore = useUiPageSettingsStore();

package/src/shared/content-settings/components/color-field/ColorField.vue

@@ -70,14 +70,7 @@
 </template>
 
 <script setup lang="ts">
-import {
-  ref,
-  computed,
-  watch,
-  onMounted,
-  onBeforeMount,
-  type PropType,
-} from 'vue';
+import { ref, computed, watch, onMounted, onBeforeMount } from 'vue';
 import { Toggle } from '@designcrowd/fe-shared-lib';
 import {
   addTransparentAlphaChannelToHex,
@@ -320,8 +313,8 @@ onBeforeMount(() => {
 onMounted(() => {
   const toggleState = Boolean(
     color.value &&
-      typeof color.value === 'string' &&
-      !isHexTransparent(color.value),
+    typeof color.value === 'string' &&
+    !isHexTransparent(color.value),
   );
 
   emit('on-toggle-state-change', toggleState);

package/src/shared/content-settings/components/content-settings/ContentSettings.mixin.ts

@@ -17,7 +17,6 @@ import {
 import { SIDE_BAR_CONTENT_ID } from '../../constants';
 import type { ComponentPublicInstance } from '@vue/runtime-core';
 import {
-  EVENTS,
   SELECT_LOCATIONS,
   useEventTracker,
 } from '@brand-page-maker/composables/useEventTracker';
@@ -37,6 +36,7 @@ interface CategoryTab {
 }
 
 export default defineComponent({
+  emits: ['capture-preview-snapshot'],
   setup() {
     const brandPageMakerStore = useBrandPageMakerStore();
     const contentSettingsStore = useUiContentSettingsStore();

package/src/shared/content-settings/components/content-settings/ContentSettingsLockedButton.vue

@@ -41,6 +41,7 @@ export default {
       required: true,
     },
   },
+  emits: ['on-click'],
   methods: {
     onClick(ev) {
       this.$emit('on-click', ev);

package/src/shared/content-settings/components/content-settings/i18n/content-settings.de-DE.json

@@ -113,6 +113,8 @@
     "iconFillColorTitle": "Farbe der Symbolfüllung",
     "iconBackgroundColorTitle": "Symbolhintergrundfarbe",
     "paddingTitle": "Polsterung",
+    "topPaddingTitle": "Polsterung oben",
+    "bottomPaddingTitle": "Polsterung unten",
     "dividerStyleTitle": "Trennlinienstil",
     "dividerColorTitle": "Trennlinienfarbe",
     "addItemTitle": "Artikel hinzufügen",