@yoobic/yobi 8.7.2 → 8.7.4

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/form/form-autocomplete/form-autocomplete.js

@@ -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-banner/form-banner.css

@@ -206,7 +206,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-capture/form-capture.css

@@ -424,9 +424,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);

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

@@ -299,7 +299,7 @@ export class YooFormCatalogComponent {
           const price = product.price * quantity;
           return [
             h("div", { class: "entity" }, h("yoo-entity", { onClick: () => this.onOpenCatalogDialog(product), class: "catalog-display no-border", isHistory: this.isHistory, displayType: "card-list", entityType: "products", item: product }), !readonly && (h("div", { class: "remove", onClick: () => this.clearProduct(product) }, h("yoo-icon", { name: "cross" })))),
-            !this.isPresence && (h("div", { class: { toolbar: true, history: this.isHistory, wrap: ((_a = this.host) === null || _a === void 0 ? void 0 : _a.offsetWidth) < 305 && !readonly } }, h("div", { class: "title" }, ((_b = this.host) === null || _b === void 0 ? void 0 : _b.offsetWidth) < 350 && ((_c = this.host) === null || _c === void 0 ? void 0 : _c.offsetWidth) > 305 && !readonly ? translate('QUANTITYABBREVATION') : translate('QUANTITY'), ": "), readonly ? (quantity) : (h("yoo-form-number-picker", { key: ref, min: 1, stepAmount: product.step, value: quantity, required: true, clearable: false, useButtons: true, invalidMessage: product.step ? 'MIN_AND_STEP_VALUES' : null, onInputChanged: (ev) => {
+            !this.isPresence && (h("div", { class: { toolbar: true, history: this.isHistory, wrap: ((_a = this.host) === null || _a === void 0 ? void 0 : _a.offsetWidth) < 305 && !readonly } }, h("div", { class: "title" }, ((_b = this.host) === null || _b === void 0 ? void 0 : _b.offsetWidth) < 350 && ((_c = this.host) === null || _c === void 0 ? void 0 : _c.offsetWidth) > 305 && !readonly ? translate('QUANTITYABBREVATION') : translate('QUANTITY'), ": "), readonly ? (quantity) : (h("yoo-form-number-picker", { key: ref, min: product.step || 1, stepAmount: product.step, value: quantity, required: true, clearable: false, useButtons: true, invalidMessage: product.step ? 'MIN_AND_STEP_VALUES' : null, onInputChanged: (ev) => {
                 ev.stopPropagation();
                 if (isNumber(ev.detail)) {
                   this.setProduct(product, ev.detail);

package/dist/collection/components/form/form-categorize-words/form-categorize-words.js

@@ -75,6 +75,10 @@ export class YooFormCategorizeWordsComponent {
   componentDidLoad() {
     this.init();
   }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.tags) === null || _a === void 0 ? void 0 : _a.destroy();
+  }
   init() {
     var _a;
     let initialWidth = (_a = this.host) === null || _a === void 0 ? void 0 : _a.clientWidth;

package/dist/collection/components/form/form-choice/button/form-choice-button.css

@@ -260,8 +260,6 @@ svg:not(:root) {
 }
 :host([is-pdf]) .image-container .content {
   max-width: 22.5rem;
-}
-:host([is-pdf]) .image-container .content yoo-img {
   border: none;
   border-radius: 0;
 }

package/dist/collection/components/form/form-choice/card/form-choice-card.css

@@ -260,8 +260,6 @@ svg:not(:root) {
 }
 :host([is-pdf]) .image-container .content {
   max-width: 22.5rem;
-}
-:host([is-pdf]) .image-container .content yoo-img {
   border: none;
   border-radius: 0;
 }

package/dist/collection/components/form/form-choice/chat/form-choice-chat.css

@@ -260,8 +260,6 @@ svg:not(:root) {
 }
 :host([is-pdf]) .image-container .content {
   max-width: 22.5rem;
-}
-:host([is-pdf]) .image-container .content yoo-img {
   border: none;
   border-radius: 0;
 }

package/dist/collection/components/form/form-choice/image/form-choice-image.css

@@ -260,8 +260,6 @@ svg:not(:root) {
 }
 :host([is-pdf]) .image-container .content {
   max-width: 22.5rem;
-}
-:host([is-pdf]) .image-container .content yoo-img {
   border: none;
   border-radius: 0;
 }
@@ -332,10 +330,11 @@ svg:not(:root) {
 }
 :host .content {
   position: relative;
+  border: var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);
+  border-radius: var(--border-radius-08, 0.5rem);
 }
 :host .content yoo-img {
-  border: solid var(--border-width-01, 0.0625rem) var(--stable-alt, #d0d0d0);
-  border-radius: var(--border-radius-08, 0.5rem);
+  border-radius: inherit;
 }
 :host .content yoo-form-checkbox {
   position: absolute;

package/dist/collection/components/form/form-choice/radio/form-choice-radio.css

@@ -260,8 +260,6 @@ svg:not(:root) {
 }
 :host([is-pdf]) .image-container .content {
   max-width: 22.5rem;
-}
-:host([is-pdf]) .image-container .content yoo-img {
   border: none;
   border-radius: 0;
 }