@yoobic/yobi 8.7.3 → 8.7.5

package/dist/collection/components/entities/entity/entity.js

@@ -664,207 +664,214 @@ export class YooEntityComponent {
     const heading = translateMulti(this.item.title);
     const session = getSession();
     const randomColor = getRandomSwatchColor(this.index);
-    const CONFIG = {
-      missions: (item) => {
-        var _a, _b;
-        const address = this.getMissionLocation(item);
-        const tags = getMissionStateTags(item, session, true) || [];
-        const processIcon = (_a = item === null || item === void 0 ? void 0 : item.description) === null || _a === void 0 ? void 0 : _a.processIcon;
-        const iconTopLeft = (processIcon === null || processIcon === void 0 ? void 0 : processIcon.substring(0, 3)) === 'yo-' ? processIcon.substring(3, processIcon.length) : processIcon;
-        color = ((_b = item.description) === null || _b === void 0 ? void 0 : _b.color) || getCssColor('app-color');
-        return {
-          items: [
-            {
-              placement: 'header',
-              heading,
-              color,
-              icons: [
-                {
-                  place: 'left',
-                  name: iconTopLeft || 'request'
-                },
-                {
-                  place: 'right',
-                  name: 'circle-plus'
-                }
-              ]
-            },
-            {
-              placement: 'body',
-              progress: item.hasWorkflow ? getWorkflowProgress(item).value : null,
-              subHeadingDescription: address || ''
-            },
-            {
-              placement: 'footer',
-              tagElements: tags.map((tag) => {
-                return { ...tag, customColor: getCssColor(color) };
-              })
-            }
-          ]
-        };
-      },
-      missiondatas: (item) => {
-        var _a, _b;
-        item = this.item.mission;
-        item.description = this.item.missiondescription;
-        const address = this.getMissionLocation(item);
-        const tags = getMissionStateTags(item, session, true) || [];
-        const processIcon = (_a = item === null || item === void 0 ? void 0 : item.description) === null || _a === void 0 ? void 0 : _a.processIcon;
-        const iconTopLeft = (processIcon === null || processIcon === void 0 ? void 0 : processIcon.substring(0, 3)) === 'yo-' ? processIcon.substring(3, processIcon.length) : processIcon;
-        color = ((_b = item.description) === null || _b === void 0 ? void 0 : _b.color) || getCssColor('app-color');
-        return {
-          items: [
-            {
-              placement: 'header',
-              heading,
-              color,
-              icons: [
-                {
-                  place: 'left',
-                  name: iconTopLeft || 'request'
-                },
-                {
-                  place: 'right',
-                  name: 'circle-plus'
-                }
-              ]
-            },
-            {
-              placement: 'body',
-              progress: item.hasWorkflow ? getWorkflowProgress(item).value : null,
-              subHeadingDescription: address || ''
-            },
-            {
-              placement: 'footer',
-              tagElements: tags.map((tag) => {
-                return { ...tag, customColor: getCssColor(color) };
-              })
-            }
-          ]
-        };
-      },
-      missiondescriptions: (item) => {
-        var _a;
-        const colorDefault = item.type === 'poll' ? getCssColor('success') : item.type === 'service' ? getCssColor('app-color') : randomColor;
-        const iconTopLeftDefault = item.type === 'poll' ? 'poll' : 'request';
-        const iconTopLeft = ((_a = item.processIcon) === null || _a === void 0 ? void 0 : _a.substring(0, 3)) === 'yo-' ? item.processIcon.substring(3, item.processIcon.length) : item.processIcon;
-        size = ['large', 'small'].includes(this.extraClass) ? this.extraClass : 'medium';
-        return {
-          items: [
-            {
-              placement: 'header',
-              heading,
-              icons: [
-                {
-                  place: 'left',
-                  name: iconTopLeft || iconTopLeftDefault,
-                  customColor: item.color || colorDefault
-                }
-              ]
-            },
-            {
-              placement: 'body',
-              ...(this.direction === 'horizontal' ? {} : { subHeadingDescription: item.text }),
-              tagElements: item.category ? [{ innerHTML: translateMulti(item.category.title), customColor: getCssColor(item.category.color) }] : null
-            }
-          ]
-        };
-      },
-      dashboards: () => {
-        size = 'medium';
-        return {
-          items: [
-            {
-              placement: 'header',
-              heading,
-              icons: [
-                {
-                  place: 'left',
-                  name: 'analytics-boost',
-                  color: 'app-color'
-                },
-                {
-                  place: 'right',
-                  name: 'big-arrow-right',
-                  color: 'stable-alt'
-                }
-              ]
-            }
-          ]
-        };
-      },
-      creationtypes: (item) => {
-        return {
-          tooltip: item.needsUpgrade ? item.tooltip : null,
-          items: [
-            {
-              placement: 'header',
-              heading,
-              icons: [
-                {
-                  place: 'left',
-                  name: item.topLeftIcon,
-                  color: item.color,
-                  size: 'large'
-                }
-              ],
-              tagDefaultSize: 'small',
-              tagElements: compact([
-                item.isBeta ? { innerHTML: translate('BETA'), customColor: getCssColor(item.color) } : null,
-                item.needsUpgrade ? { innerHTML: translate('NEEDSUPGRADE'), customColor: getCssColor(item.color) } : null
-              ])
-            },
-            {
-              placement: 'body',
-              subheading: translateMulti(item.subtitle),
-              imgSrc: item.imgSrc
-            }
-          ]
-        };
-      },
-      missiondescriptiontemplates: (item) => {
-        return {
-          items: [
-            {
-              placement: 'header',
-              icons: [
-                {
-                  place: 'left',
-                  name: getCampaignIcon(item),
-                  color: getCampaignColor(item),
-                  size: 'large'
-                }
-              ]
-            },
-            {
-              placement: 'body',
-              tagDefaultSize: 'extra-small',
-              ...(item.category ? { tagElements: [{ innerHTML: item.category.title, customColor: getCssColor(item.category.color), size: 'extra-small' }] } : {}),
-              heading,
-              subHeadingDescription: translateMulti(item.text)
-            }
-          ]
-        };
-      },
-      coursecategories: (item) => {
-        return {
-          items: [
-            {
-              placement: 'header',
-              heading,
-              icons: [
-                {
-                  ...(item.color ? { customColor: item.color } : {}),
-                  place: 'middle',
-                  name: item.icon || 'catalogue'
-                }
-              ]
-            }
-          ]
-        };
-      }
-    };
-    return (h("yoo-card-list-color", { style: { '--fill': color }, entry: CONFIG[this.entityType](this.item), size: size, class: {
+    let entry;
+    if (this.entityMapping) {
+      entry = this.entityMapping(this.item, this.entityType, this.displayType);
+    }
+    else {
+      const CONFIG = {
+        missions: (item) => {
+          var _a, _b;
+          const address = this.getMissionLocation(item);
+          const tags = getMissionStateTags(item, session, true) || [];
+          const processIcon = (_a = item === null || item === void 0 ? void 0 : item.description) === null || _a === void 0 ? void 0 : _a.processIcon;
+          const iconTopLeft = (processIcon === null || processIcon === void 0 ? void 0 : processIcon.substring(0, 3)) === 'yo-' ? processIcon.substring(3, processIcon.length) : processIcon;
+          color = ((_b = item.description) === null || _b === void 0 ? void 0 : _b.color) || getCssColor('app-color');
+          return {
+            items: [
+              {
+                placement: 'header',
+                heading,
+                color,
+                icons: [
+                  {
+                    place: 'left',
+                    name: iconTopLeft || 'request'
+                  },
+                  {
+                    place: 'right',
+                    name: 'circle-plus'
+                  }
+                ]
+              },
+              {
+                placement: 'body',
+                progress: item.hasWorkflow ? getWorkflowProgress(item).value : null,
+                subHeadingDescription: address || ''
+              },
+              {
+                placement: 'footer',
+                tagElements: tags.map((tag) => {
+                  return { ...tag, customColor: getCssColor(color) };
+                })
+              }
+            ]
+          };
+        },
+        missiondatas: (item) => {
+          var _a, _b;
+          item = this.item.mission;
+          item.description = this.item.missiondescription;
+          const address = this.getMissionLocation(item);
+          const tags = getMissionStateTags(item, session, true) || [];
+          const processIcon = (_a = item === null || item === void 0 ? void 0 : item.description) === null || _a === void 0 ? void 0 : _a.processIcon;
+          const iconTopLeft = (processIcon === null || processIcon === void 0 ? void 0 : processIcon.substring(0, 3)) === 'yo-' ? processIcon.substring(3, processIcon.length) : processIcon;
+          color = ((_b = item.description) === null || _b === void 0 ? void 0 : _b.color) || getCssColor('app-color');
+          return {
+            items: [
+              {
+                placement: 'header',
+                heading,
+                color,
+                icons: [
+                  {
+                    place: 'left',
+                    name: iconTopLeft || 'request'
+                  },
+                  {
+                    place: 'right',
+                    name: 'circle-plus'
+                  }
+                ]
+              },
+              {
+                placement: 'body',
+                progress: item.hasWorkflow ? getWorkflowProgress(item).value : null,
+                subHeadingDescription: address || ''
+              },
+              {
+                placement: 'footer',
+                tagElements: tags.map((tag) => {
+                  return { ...tag, customColor: getCssColor(color) };
+                })
+              }
+            ]
+          };
+        },
+        missiondescriptions: (item) => {
+          var _a;
+          const colorDefault = item.type === 'poll' ? getCssColor('success') : item.type === 'service' ? getCssColor('app-color') : randomColor;
+          const iconTopLeftDefault = item.type === 'poll' ? 'poll' : 'request';
+          const iconTopLeft = ((_a = item.processIcon) === null || _a === void 0 ? void 0 : _a.substring(0, 3)) === 'yo-' ? item.processIcon.substring(3, item.processIcon.length) : item.processIcon;
+          size = ['large', 'small'].includes(this.extraClass) ? this.extraClass : 'medium';
+          return {
+            items: [
+              {
+                placement: 'header',
+                heading,
+                icons: [
+                  {
+                    place: 'left',
+                    name: iconTopLeft || iconTopLeftDefault,
+                    customColor: item.color || colorDefault
+                  }
+                ]
+              },
+              {
+                placement: 'body',
+                ...(this.direction === 'horizontal' ? {} : { subHeadingDescription: item.text }),
+                tagElements: item.category ? [{ innerHTML: translateMulti(item.category.title), customColor: getCssColor(item.category.color) }] : null
+              }
+            ]
+          };
+        },
+        dashboards: () => {
+          size = 'medium';
+          return {
+            items: [
+              {
+                placement: 'header',
+                heading,
+                icons: [
+                  {
+                    place: 'left',
+                    name: 'analytics-boost',
+                    color: 'app-color'
+                  },
+                  {
+                    place: 'right',
+                    name: 'big-arrow-right',
+                    color: 'stable-alt'
+                  }
+                ]
+              }
+            ]
+          };
+        },
+        creationtypes: (item) => {
+          return {
+            tooltip: item.needsUpgrade ? item.tooltip : null,
+            items: [
+              {
+                placement: 'header',
+                heading,
+                icons: [
+                  {
+                    place: 'left',
+                    name: item.topLeftIcon,
+                    color: item.color,
+                    size: 'large'
+                  }
+                ],
+                tagDefaultSize: 'small',
+                tagElements: compact([
+                  item.isBeta ? { innerHTML: translate('BETA'), customColor: getCssColor(item.color) } : null,
+                  item.needsUpgrade ? { innerHTML: translate('NEEDSUPGRADE'), customColor: getCssColor(item.color) } : null
+                ])
+              },
+              {
+                placement: 'body',
+                subheading: translateMulti(item.subtitle),
+                imgSrc: item.imgSrc
+              }
+            ]
+          };
+        },
+        missiondescriptiontemplates: (item) => {
+          return {
+            items: [
+              {
+                placement: 'header',
+                icons: [
+                  {
+                    place: 'left',
+                    name: getCampaignIcon(item),
+                    color: getCampaignColor(item),
+                    size: 'large'
+                  }
+                ]
+              },
+              {
+                placement: 'body',
+                tagDefaultSize: 'extra-small',
+                ...(item.category ? { tagElements: [{ innerHTML: item.category.title, customColor: getCssColor(item.category.color), size: 'extra-small' }] } : {}),
+                heading,
+                subHeadingDescription: translateMulti(item.text)
+              }
+            ]
+          };
+        },
+        coursecategories: (item) => {
+          return {
+            items: [
+              {
+                placement: 'header',
+                heading,
+                icons: [
+                  {
+                    ...(item.color ? { customColor: item.color } : {}),
+                    place: 'middle',
+                    name: item.icon || 'catalogue'
+                  }
+                ]
+              }
+            ]
+          };
+        }
+      };
+      entry = CONFIG[this.entityType](this.item);
+    }
+    return (h("yoo-card-list-color", { style: { '--fill': color }, entry: entry, size: size, class: {
         [extraClasses]: true,
         [this.entityType]: this.entityType !== undefined,
         cell: this.displayType === 'card-cell-color',
@@ -3400,7 +3407,7 @@ export class YooEntityComponent {
         "mutable": false,
         "complexType": {
           "original": "TEntityMapping",
-          "resolved": "(item: IEntity, entityType: EntityType, displayType: CardType, displaySize?: TSize, useCellOverlay?: boolean) => string | ICardListEntry | ICardMediaEntry",
+          "resolved": "(item: IEntity, entityType: EntityType, displayType: CardType, displaySize?: TSize, useCellOverlay?: boolean) => string | ICardListEntry | ICardListColorEntry | ICardMediaEntry",
           "references": {
             "TEntityMapping": {
               "location": "import",

package/dist/collection/components/entities/entity-query-builder/entity-query-builder.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/entities/entity-search/entity-search.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/entities/entity-search-dialog/entity-search-dialog.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/entities/entity-search-filters/entity-search-filters.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/entities/entity-search-recent/entity-search-recent.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/entities/entity-search-sorts/entity-search-sorts.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/entities/entity-search-tags/entity-search-tags.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/form/camera-preview-dialog/camera-preview-dialog.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/form/form-audience/form-audience.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/form/form-autocomplete/form-autocomplete.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/form/form-autocomplete/form-autocomplete.js

@@ -1678,7 +1678,7 @@ export class YooFormAutocompleteComponent {
       },
       "animatedIllustration": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "TAnimatedIllustrationType",
           "resolved": "\"aisles\" | \"battle\" | \"calendar\" | \"campaign\" | \"chart\" | \"chat\" | \"check\" | \"comment\" | \"contact\" | \"courses\" | \"database\" | \"feed\" | \"file\" | \"folder\" | \"group\" | \"heart\" | \"hourglass\" | \"journey\" | \"map\" | \"medal\" | \"mission\" | \"note\" | \"offline\" | \"password\" | \"plugin\" | \"poll\" | \"post\" | \"publish\" | \"questions\" | \"rejected\" | \"request\" | \"scoring\" | \"search\" | \"settings\" | \"store\" | \"tag\" | \"user\" | \"visit\" | \"workflow\" | \"campaignfilters\" | \"communities\" | \"custommodels\" | \"files\" | \"geofilters\" | \"groups\" | \"htmltemplates\" | \"incentives\" | \"lessons\" | \"locations\" | \"locationtypes\" | \"missiondescriptions\" | \"missiondescriptiontemplates\" | \"missions\" | \"notes\" | \"photos\" | \"plans\" | \"reject\" | \"success\" | \"login\" | \"learning\" | \"question\" | \"field\" | \"tags\" | \"dashboard\" | \"score\" | \"todo\" | \"videocall\" | \"virtualshopping\" | \"time\" | \"zones\" | \"allowcamera\" | \"areamanager\" | \"barcodescan\" | \"brainentering\" | \"brainfail\" | \"brainloading\" | \"brainsleeping\" | \"brainsuccess\" | \"builder\" | \"builtin\" | \"category\" | \"geographicfilter\" | \"companies\" | \"confetti\" | \"copy\" | \"coursemanager\" | \"downloading\" | \"emptyfeed\" | \"empty\" | \"error\" | \"faceid\" | \"fail\" | \"form\" | \"groupchat\" | \"template\" | \"location\" | \"locker\" | \"magiclink\" | \"nouser\" | \"newsletter\" | \"nocommunity\" | \"nodata\" | \"notification\" | \"notquite\" | \"offlinemode\" | \"rating\" | \"requestraised\" | \"robot\" | \"robotdone\" | \"robotfailed\" | \"robotgenerating\" | \"robotsleeping\" | \"role\" | \"startfromscratch\" | \"storemanager\" | \"syncing\" | \"thankyou\" | \"thumbsup\" | \"touchid\" | \"translation\" | \"trophy\" | \"uploadfile\" | \"usertrial\" | \"waiting\" | \"hq\" | \"missionstovalidate\" | \"wiki\"",
@@ -2610,7 +2610,7 @@ export class YooFormAutocompleteComponent {
         "mutable": false,
         "complexType": {
           "original": "TEntityMapping",
-          "resolved": "(item: IEntity, entityType: EntityType, displayType: CardType, displaySize?: TSize, useCellOverlay?: boolean) => string | ICardListEntry | ICardMediaEntry",
+          "resolved": "(item: IEntity, entityType: EntityType, displayType: CardType, displaySize?: TSize, useCellOverlay?: boolean) => string | ICardListEntry | ICardListColorEntry | ICardMediaEntry",
           "references": {
             "TEntityMapping": {
               "location": "import",

package/dist/collection/components/form/form-autocomplete-dialog/form-autocomplete-dialog.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/form/form-banner/form-banner.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.
@@ -206,7 +204,7 @@ svg:not(:root) {
 }
 
 yoo-banner {
-  margin: var(--spacing-08, 0.5rem);
+  margin: var(--spacing-08, 0.5rem) 0;
 }
 yoo-banner.mobile {
   --font-size: var(--font-size-16, 1rem);

package/dist/collection/components/form/form-barcode/form-barcode.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/form/form-barcode-dialog/form-barcode-dialog.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/form/form-capture/form-capture.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.
@@ -424,9 +422,12 @@ svg:not(:root) {
 :host .outer-container .multiple .camera-containers {
   display: inline-flex;
   flex-wrap: wrap;
-  gap: var(--spacing-08, 0.5rem);
   align-items: center;
-  margin-bottom: var(--spacing-08, 0.5rem);
+  padding-bottom: var(--spacing-08, 0.5rem);
+  margin: calc(var(--spacing-08, 0.5rem) / -2);
+}
+:host .outer-container .multiple .camera-containers > * {
+  margin: calc(var(--spacing-08, 0.5rem) / 2);
 }
 :host .outer-container .multiple .camera-containers:not(.no-padding) {
   padding-top: var(--spacing-08, 0.5rem);