npm - @yoobic/yobi - Versions diffs - 8.2.0-3 → 8.2.0-6 - Mend

@yoobic/yobi 8.2.0-3 → 8.2.0-6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1299) hide show

package/dist/collection/components/2.molecules/banner/banner.js CHANGED Viewed

@@ -1,97 +1,34 @@
-import { isIphoneX, isWeb, setAnimation, translate } from '@shared/utils';
 import { Component, Element, Event, h, Host, Method, Prop, State } from '@stencil/core';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
 export class YooBannerComponent {
   constructor() {
     /**
-     * The app currently used.
+     * Size of the banner
      */
-    this.currentApp = 'operations';
-    /**
-     * Class of the footer button.
-     */
-    this.footerBtnColor = 'app-color';
-    /**
-     * Text of the footer button.
-     */
-    this.footerBtnText = '';
-    this.footerBtnFill = 'solid';
-    /**
-     * Mode of the banner : `simple` or `card`.
-     */
-    this.mode = 'simple';
-    /**
-     * Text of the banner.
-     */
-    this.text = '';
+    this.size = 'medium';
     this.closed = false;
-    this.onBannerButtonClicked = () => {
-      this.bannerButtonClicked.emit(true);
-    };
   }
-  async close() {
-    this.alertClosed.emit(true);
+  async close(event) {
+    event.preventDefault();
+    this.closeClick.emit();
     this.closed = true;
   }
-  componentDidLoad() {
-    if (this.animationName) {
-      setAnimation(this.animationName, this.host, { open: true });
-    }
-  }
-  onActionTextClick() {
-    this.alertActionSelected.emit(true);
-  }
-  renderSimpleMode() {
-    var _a;
-    const isUpdateBanner = this.host.classList.contains('update-banner');
-    return (h("div", { class: {
-        container: true,
-        closed: this.closed,
-        'iphone-x': isIphoneX()
-      } },
-      this.link && (h("div", { class: "link", onClick: () => this.onActionTextClick() }, translate(this.link))),
-      h("div", { class: "inner-container" },
-        this.icon && (h("span", { class: "icon" },
-          h("yoo-icon", { color: this.host.classList.contains('light') ? 'app-color' : 'light', name: this.icon }))),
-        h("div", { class: "text-container" },
-          this.heading && h("span", { class: "heading" }, this.heading),
-          h("span", { class: "value" }, translate(this.text)),
-          ((_a = this.subHeadings) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.subHeadings.map((subHeading) => {
-            return h("span", { class: "sub-heading" }, translate(subHeading));
-          }))),
-      this.footerBtnText && (h("div", { class: "button-container" },
-        h("yoo-button", { class: { expanded: !isUpdateBanner }, fill: this.footerBtnFill, color: this.footerBtnColor, onClick: this.onBannerButtonClicked }, translate(this.footerBtnText)))),
-      h("div", { class: "close-container" }, this.closable ? (h("span", { class: "close", onClick: () => this.close() },
-        ' ',
-        h("yoo-icon", { color: this.host.classList.contains('form-creator') ? 'stable' : 'light', name: this.host.classList.contains('form-creator') ? 'cross' : 'close' }))) : null)));
-  }
-  renderCardMode() {
-    const hasHeader = this.icon || this.closable;
-    const isUpdateBanner = this.host.classList.contains('update-banner');
-    return (!this.closed && (h("div", { class: "outer-container" },
-      h("div", { class: "left-container" }, this.leftIcon && h("yoo-icon", { color: this.leftIconColor || 'app-color', name: this.leftIcon, size: this.leftIconSize })),
-      h("div", { class: { 'content-container': true, 'columns': isWeb(this.host) && !this.closable } },
-        hasHeader && h("div", { class: "header-container" },
-          this.icon && (h("span", { class: "icon" },
-            h("yoo-icon", { color: this.iconColor || 'app-color', name: this.icon }))),
-          this.closable && (h("div", { class: "cross-container", onClick: () => this.close() },
-            h("yoo-icon", { name: "cross", color: "stable-alt" })))),
-        h("div", { class: "body-container" },
-          h("div", { class: "text-container" },
-            h("span", { class: "text-content" }, translate(this.heading))),
-          h("div", { class: "subtext-container" },
-            h("span", { class: "subtext-content" }, translate(this.text, { appName: this.currentApp })))),
-        this.footerBtnText && (h("div", { class: "button-container" },
-          h("yoo-button", { class: { expanded: !isUpdateBanner }, fill: this.footerBtnFill, color: this.footerBtnColor, onClick: this.onBannerButtonClicked }, translate(this.footerBtnText.toUpperCase()))))),
-      h("div", { class: "right-container" },
-        h("slot", { name: "right" })))));
+  get iconName() {
+    return this.size === 'large' ? 'close' : 'cross';
   }
   render() {
-    return (h(Host, { class: {
-        closed: this.closed,
-        [this.mode]: true,
-        ...getAppContext(this.host)
-      } }, this.mode === 'simple' ? this.renderSimpleMode() : this.renderCardMode()));
+    var _a;
+    return !this.closed && (h(Host, { class: { ...getAppContext(this.host) } },
+      h("div", { class: "flex" },
+        !!this.leftIcon && h("yoo-icon", { color: "light", ...this.leftIcon, class: "left-icon" }),
+        (this.link || this.linkText) && h("a", { href: this.link, target: this.target, onClick: () => this.linkClick.emit(), class: "link" }, this.linkText),
+        h("slot", { name: "content" }),
+        this.size !== 'large' && h("slot", { name: "action" }),
+        this.closable && this.size !== 'large' && h("hr", null),
+        this.closable && h("yoo-icon", { name: this.iconName, onClick: event => this.close(event) })),
+      this.size === 'large' &&
+        h("div", { class: { 'action-container': true, 'hasLeftIcon': !!this.leftIcon, [(_a = this.leftIcon) === null || _a === void 0 ? void 0 : _a.size]: true } },
+          h("slot", { name: "action" }))));
   }
   static get is() { return "yoo-banner"; }
   static get encapsulation() { return "shadow"; }
@@ -102,22 +39,28 @@ export class YooBannerComponent {
     "$": ["banner.css"]
   }; }
   static get properties() { return {
-    "animationName": {
-      "type": "string",
+    "leftIcon": {
+      "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        "original": "Partial<YooIconComponent>",
+        "resolved": "{ size?: TIconSize; name?: TIconName; color?: TColor; customColor?: string; render?: () => any; }",
+        "references": {
+          "Partial": {
+            "location": "global"
+          },
+          "YooIconComponent": {
+            "location": "import",
+            "path": "src/components/1.atoms/icon/icon"
+          }
+        }
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Animation name for the banner."
-      },
-      "attribute": "animation-name",
-      "reflect": false
+        "text": "Left icon props"
+      }
     },
     "closable": {
       "type": "boolean",
@@ -128,237 +71,53 @@ export class YooBannerComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": "If `true`, a close button will appear on the banner."
+        "text": "If `true`, a close button is displayed"
       },
       "attribute": "closable",
-      "reflect": false
-    },
-    "currentApp": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The app currently used."
-      },
-      "attribute": "current-app",
-      "reflect": false,
-      "defaultValue": "'operations'"
-    },
-    "footerBtnColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "TColor",
-        "resolved": "\"accent\" | \"anthracite\" | \"app-color\" | \"danger\" | \"dark\" | \"energized\" | \"info\" | \"light\" | \"stable\" | \"stable-alt\" | \"stable-light\" | \"stable-ultralight\" | \"success\" | \"text-color\" | \"warning\" | \"wood\" | \"accent-10\" | \"accent-20\" | \"accent-40\" | \"accent-60\" | \"accent-80\" | \"anthracite-10\" | \"anthracite-20\" | \"anthracite-40\" | \"anthracite-60\" | \"anthracite-80\" | \"app-color-10\" | \"app-color-20\" | \"app-color-40\" | \"app-color-60\" | \"app-color-80\" | \"danger-10\" | \"danger-20\" | \"danger-40\" | \"danger-60\" | \"danger-80\" | \"dark-10\" | \"dark-20\" | \"dark-40\" | \"dark-60\" | \"dark-80\" | \"energized-10\" | \"energized-20\" | \"energized-40\" | \"energized-60\" | \"energized-80\" | \"info-10\" | \"info-20\" | \"info-40\" | \"info-60\" | \"info-80\" | \"light-10\" | \"light-20\" | \"light-40\" | \"light-60\" | \"light-80\" | \"stable-10\" | \"stable-20\" | \"stable-40\" | \"stable-60\" | \"stable-80\" | \"stable-alt-10\" | \"stable-alt-20\" | \"stable-alt-40\" | \"stable-alt-60\" | \"stable-alt-80\" | \"stable-light-10\" | \"stable-light-20\" | \"stable-light-40\" | \"stable-light-60\" | \"stable-light-80\" | \"stable-ultralight-10\" | \"stable-ultralight-20\" | \"stable-ultralight-40\" | \"stable-ultralight-60\" | \"stable-ultralight-80\" | \"success-10\" | \"success-20\" | \"success-40\" | \"success-60\" | \"success-80\" | \"text-color-10\" | \"text-color-20\" | \"text-color-40\" | \"text-color-60\" | \"text-color-80\" | \"warning-10\" | \"warning-20\" | \"warning-40\" | \"warning-60\" | \"warning-80\" | \"wood-10\" | \"wood-20\" | \"wood-40\" | \"wood-60\" | \"wood-80\" | \"transparent\"",
-        "references": {
-          "TColor": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Class of the footer button."
-      },
-      "attribute": "footer-btn-color",
-      "reflect": false,
-      "defaultValue": "'app-color'"
-    },
-    "footerBtnText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Text of the footer button."
-      },
-      "attribute": "footer-btn-text",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "footerBtnFill": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "TButtonFill",
-        "resolved": "\"solid\" | \"transparent\"",
-        "references": {
-          "TButtonFill": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "footer-btn-fill",
-      "reflect": false,
-      "defaultValue": "'solid'"
-    },
-    "heading": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Heading of the banner."
-      },
-      "attribute": "heading",
-      "reflect": false
+      "reflect": true
     },
-    "subHeadings": {
-      "type": "unknown",
+    "fill": {
+      "type": "boolean",
       "mutable": false,
       "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
+        "original": "boolean",
+        "resolved": "boolean",
         "references": {}
       },
       "required": false,
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Sub headings of the banner"
-      }
-    },
-    "leftIcon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "TIconName",
-        "resolved": "\"number\" | \"calendar\" | \"toggle\" | \"info\" | \"warning\" | \"right\" | \"left\" | \"circle\" | \"1x\" | \"2x\" | \"3x\" | \"4x\" | \"5x\" | \"achievement\" | \"action-plan\" | \"action-plan-create\" | \"activity\" | \"activity-history\" | \"aggregation\" | \"aisles\" | \"alarm\" | \"align-center\" | \"align-left\" | \"align-right\" | \"analysis\" | \"analytics-board-bars\" | \"analytics-boost\" | \"analytics-graph-line\" | \"answer\" | \"app-creator\" | \"apple-pay\" | \"archive\" | \"arrow-down\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrows-up-down\" | \"assign\" | \"assign-group\" | \"assigned\" | \"attach-file\" | \"attachment\" | \"audio-offline\" | \"audit\" | \"author\" | \"auto-flash\" | \"autocomplete\" | \"automotive-airplane\" | \"automotive-bus\" | \"automotive-car\" | \"automotive-cycle\" | \"automotive-gas\" | \"automotive-road\" | \"automotive-route\" | \"automotive-route-sign\" | \"automotive-scooter\" | \"automotive-shipping\" | \"award-trophy-star\" | \"background-off\" | \"background-on\" | \"badge\" | \"badge-book\" | \"badge-brain\" | \"badge-crown\" | \"badge-makeup-1\" | \"badge-stats\" | \"barcode\" | \"battery-status-bar\" | \"battle\" | \"beverages-beer\" | \"beverages-bottle\" | \"beverages-champagne\" | \"beverages-cocktail\" | \"beverages-coffee\" | \"beverages-drink\" | \"beverages-hot-drink\" | \"beverages-tropical-cocktail\" | \"beverages-water\" | \"beverages-wine\" | \"big-arrow-down\" | \"big-arrow-left\" | \"big-arrow-right\" | \"big-arrow-up\" | \"bigfont\" | \"blocks\" | \"bluetooth\" | \"bookmark\" | \"boost\" | \"branch\" | \"brush\" | \"buttons-single-choice\" | \"calendar-date\" | \"calendar-end-date\" | \"calendar-error\" | \"calendar-new-event\" | \"calendar-received\" | \"calendar-sent\" | \"calendar-warning\" | \"camera\" | \"campaign\" | \"campaign-create\" | \"campaign-filter\" | \"catalogue\" | \"catch-them\" | \"categories\" | \"chart\" | \"chat\" | \"chat-new\" | \"check\" | \"check-product\" | \"circle-minor\" | \"circle-plus\" | \"circle1\" | \"circle2\" | \"close\" | \"color-picker\" | \"column\" | \"comment\" | \"community\" | \"company\" | \"compass-direction\" | \"condition\" | \"connect\" | \"contact\" | \"cosmetics-brush\" | \"cosmetics-brush-scissors\" | \"cosmetics-brush-set\" | \"cosmetics-comb\" | \"cosmetics-hairdryer\" | \"cosmetics-lips\" | \"cosmetics-lipstick\" | \"cosmetics-mirror\" | \"cosmetics-nail-polish\" | \"courses\" | \"create-chat\" | \"cross\" | \"custom\" | \"cut\" | \"daily\" | \"darkmode\" | \"dashboards\" | \"dashboards-new\" | \"data-file-add\" | \"database\" | \"database-add\" | \"database-check\" | \"database-download\" | \"database-edit\" | \"database-history\" | \"database-import\" | \"database-lock\" | \"database-question\" | \"database-refresh\" | \"database-remove\" | \"database-search\" | \"database-settings\" | \"database-star\" | \"database-subtract\" | \"database-sync\" | \"database-warning\" | \"date-time\" | \"day-view\" | \"delete\" | \"desktop\" | \"diagram-arrow-right\" | \"diploma\" | \"diploma-history\" | \"diploma-manager\" | \"diploma-new\" | \"dislike\" | \"dot\" | \"double-tick\" | \"down\" | \"down-circle\" | \"download\" | \"downloaded\" | \"draggable\" | \"duplicate\" | \"email\" | \"emoji\" | \"end-call\" | \"expand-chart\" | \"explore\" | \"export\" | \"eye\" | \"facebook\" | \"fashion-boot\" | \"fashion-bra\" | \"fashion-coat\" | \"fashion-dress\" | \"fashion-perfume\" | \"fashion-pump\" | \"fashion-shoe\" | \"fashion-t-shirt\" | \"fashion-trousers\" | \"fashion-women\" | \"feed\" | \"feed-create-post\" | \"feedback\" | \"feedback-neutral\" | \"feedback-sad\" | \"file\" | \"file-add\" | \"file-csv\" | \"file-download\" | \"file-excel\" | \"file-pdf\" | \"file-powerpoint\" | \"file-upload\" | \"file-word\" | \"filter\" | \"first\" | \"fixed\" | \"flag\" | \"flash-off\" | \"flash-on\" | \"flip\" | \"folder\" | \"folder-add\" | \"folder-download\" | \"folder-edit\" | \"folder-remove\" | \"folder-upload\" | \"food-apple\" | \"food-banana\" | \"food-bowl\" | \"food-carrot\" | \"food-cherry\" | \"food-egg\" | \"food-orange\" | \"food-pear\" | \"food-pineapple\" | \"food-strawberry\" | \"formula\" | \"forward\" | \"frame\" | \"full-height\" | \"furniture\" | \"geo-filter\" | \"gif\" | \"go-to\" | \"gps\" | \"grid-phone\" | \"grid-view\" | \"group\" | \"hashtag\" | \"heart\" | \"help\" | \"history\" | \"home\" | \"hotel-award\" | \"hotel-award-book\" | \"hotel-bed\" | \"hotel-bell\" | \"hotel-bellhop\" | \"hotel-building\" | \"hotel-dnd\" | \"hotel-room-service-1\" | \"hotel-room-service-2\" | \"hotel-room-service-3\" | \"hotzone\" | \"hourglass\" | \"hr\" | \"image\" | \"image-map\" | \"image-offline\" | \"import\" | \"inbox\" | \"incentive-manager\" | \"incentive-manager1\" | \"indeterminate\" | \"inquiry\" | \"instagram\" | \"instant-play\" | \"iphone\" | \"journey\" | \"keyboard\" | \"large-with-info\" | \"large-without-info\" | \"last\" | \"layout\" | \"leaderboard\" | \"learning-path\" | \"left-circle\" | \"left-web\" | \"lesson\" | \"like\" | \"link\" | \"link-broken\" | \"linkedin\" | \"list-view\" | \"livestream\" | \"loading\" | \"lock\" | \"logic\" | \"logic-visible\" | \"low-power\" | \"luxury-bag\" | \"luxury-bottle\" | \"luxury-gift\" | \"luxury-glasses\" | \"luxury-handbag\" | \"luxury-necklace\" | \"luxury-necklace-2\" | \"luxury-necklace-3\" | \"luxury-stars\" | \"luxury-watch\" | \"mandatory\" | \"map\" | \"maximize\" | \"maximize-web\" | \"medal\" | \"mention\" | \"menu\" | \"microphone\" | \"minimize\" | \"minimize-web\" | \"minus\" | \"missing-word\" | \"mission\" | \"mission-data\" | \"mission-download\" | \"month-view\" | \"monthly\" | \"more\" | \"more-2\" | \"more-circle\" | \"more-shapes\" | \"move\" | \"move-down\" | \"move-up\" | \"multiple-photos\" | \"mute-microphone\" | \"new-lesson\" | \"new-rectangle\" | \"new-section\" | \"new-task\" | \"news\" | \"next-photo\" | \"no-data\" | \"no-video\" | \"not-allowed\" | \"note\" | \"offline\" | \"offline-play\" | \"ongoing\" | \"operations\" | \"out-of-stock-product\" | \"pages\" | \"password\" | \"paste\" | \"pause\" | \"pause-audio\" | \"pen\" | \"personal-development\" | \"pharma-drug-box\" | \"pharma-first-aid\" | \"pharma-first-aid-kit\" | \"pharma-heartrate\" | \"pharma-hospital\" | \"pharma-iv-bag\" | \"pharma-medication\" | \"pharma-pill\" | \"pharma-pills-box\" | \"pharma-syringe\" | \"phone\" | \"phone-action-camera\" | \"photo-annotated\" | \"photo-library\" | \"photo-mandatory\" | \"pin\" | \"pin-new-site\" | \"pin-selected\" | \"pivot\" | \"play\" | \"play-audio\" | \"plugin\" | \"plus\" | \"podcast\" | \"poll\" | \"price-dollar\" | \"price-euro\" | \"price-sterling\" | \"print\" | \"priority\" | \"product\" | \"product-briefcase\" | \"profile\" | \"publish\" | \"pull-to-refresh\" | \"qr-code\" | \"question-new\" | \"questions\" | \"radio-button-off\" | \"radio-button-on\" | \"ranking\" | \"ranking-toggle\" | \"read\" | \"reason\" | \"recent\" | \"redo\" | \"refresh\" | \"rejected\" | \"rejector\" | \"repeat\" | \"request\" | \"restart\" | \"restaurant-bread\" | \"restaurant-chef\" | \"restaurant-croissant\" | \"restaurant-flatware\" | \"restaurant-grocery\" | \"restaurant-kitchen-bell\" | \"restaurant-knife-board\" | \"restaurant-menu\" | \"restaurant-platware-2\" | \"restaurant-vegetables-plate\" | \"restriction\" | \"right-circle\" | \"right-web\" | \"rotate-camera\" | \"rubber\" | \"sales\" | \"save\" | \"scale-rating\" | \"scan\" | \"schedule-user\" | \"schedule-view\" | \"scoring\" | \"scoring-visible\" | \"scratch\" | \"screenshare\" | \"search\" | \"search-product\" | \"security\" | \"select\" | \"select-all\" | \"send\" | \"send-story\" | \"settings\" | \"share\" | \"share-file\" | \"shipment-smartphone-arrive\" | \"shopping-basket\" | \"side-menu-collapse\" | \"side-menu-expand\" | \"sidebar-left\" | \"sidebar-right\" | \"signal-status-bar\" | \"signature\" | \"single-choice\" | \"single-view\" | \"slider\" | \"small-with-info\" | \"small-without-info\" | \"sms\" | \"sort-down\" | \"sort-up\" | \"sort-up-and-down\" | \"star\" | \"start-recording\" | \"start-rectangle\" | \"stats\" | \"step\" | \"stop-watch\" | \"store\" | \"store-archived\" | \"support\" | \"swipe-detail\" | \"swipe-explanation\" | \"sync-product\" | \"tab\" | \"table\" | \"tableau\" | \"tablet\" | \"tag\" | \"tags-settings\" | \"task\" | \"text-predefined\" | \"theme\" | \"tick\" | \"to-do\" | \"todo-boost\" | \"toggle-off-video\" | \"transaction\" | \"translate\" | \"translation-check\" | \"translation-warning\" | \"triangle\" | \"twitter\" | \"type-tool\" | \"unarchive\" | \"unassign\" | \"unassign-group\" | \"unbook\" | \"undo\" | \"unlocked\" | \"unread\" | \"up\" | \"up-circle\" | \"upgrade\" | \"upload\" | \"user\" | \"user-block\" | \"user-live\" | \"user-lock\" | \"user-new\" | \"validate\" | \"validation-date\" | \"validator\" | \"value\" | \"variable\" | \"verified\" | \"videocamera\" | \"view\" | \"virtual-queuing\" | \"visit\" | \"visual-merchandising\" | \"volume-off\" | \"volume-on\" | \"waiting-list\" | \"warning-2\" | \"warning-product\" | \"webcam\" | \"week-view\" | \"weekdays\" | \"weekly\" | \"weeks\" | \"wifi-status-bar\" | \"word-search\" | \"workflow\" | \"yearly\" | \"yoobic\" | \"zip-file\" | \"zoom-in\" | \"zoom-out\"",
-        "references": {
-          "TIconName": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "left-icon",
-      "reflect": false
-    },
-    "leftIconColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "TColor",
-        "resolved": "\"accent\" | \"anthracite\" | \"app-color\" | \"danger\" | \"dark\" | \"energized\" | \"info\" | \"light\" | \"stable\" | \"stable-alt\" | \"stable-light\" | \"stable-ultralight\" | \"success\" | \"text-color\" | \"warning\" | \"wood\" | \"accent-10\" | \"accent-20\" | \"accent-40\" | \"accent-60\" | \"accent-80\" | \"anthracite-10\" | \"anthracite-20\" | \"anthracite-40\" | \"anthracite-60\" | \"anthracite-80\" | \"app-color-10\" | \"app-color-20\" | \"app-color-40\" | \"app-color-60\" | \"app-color-80\" | \"danger-10\" | \"danger-20\" | \"danger-40\" | \"danger-60\" | \"danger-80\" | \"dark-10\" | \"dark-20\" | \"dark-40\" | \"dark-60\" | \"dark-80\" | \"energized-10\" | \"energized-20\" | \"energized-40\" | \"energized-60\" | \"energized-80\" | \"info-10\" | \"info-20\" | \"info-40\" | \"info-60\" | \"info-80\" | \"light-10\" | \"light-20\" | \"light-40\" | \"light-60\" | \"light-80\" | \"stable-10\" | \"stable-20\" | \"stable-40\" | \"stable-60\" | \"stable-80\" | \"stable-alt-10\" | \"stable-alt-20\" | \"stable-alt-40\" | \"stable-alt-60\" | \"stable-alt-80\" | \"stable-light-10\" | \"stable-light-20\" | \"stable-light-40\" | \"stable-light-60\" | \"stable-light-80\" | \"stable-ultralight-10\" | \"stable-ultralight-20\" | \"stable-ultralight-40\" | \"stable-ultralight-60\" | \"stable-ultralight-80\" | \"success-10\" | \"success-20\" | \"success-40\" | \"success-60\" | \"success-80\" | \"text-color-10\" | \"text-color-20\" | \"text-color-40\" | \"text-color-60\" | \"text-color-80\" | \"warning-10\" | \"warning-20\" | \"warning-40\" | \"warning-60\" | \"warning-80\" | \"wood-10\" | \"wood-20\" | \"wood-40\" | \"wood-60\" | \"wood-80\" | \"transparent\"",
-        "references": {
-          "TColor": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+        "text": "If `true`, the banner will be filled of the type color"
       },
-      "attribute": "left-icon-color",
-      "reflect": false
+      "attribute": "fill",
+      "reflect": true
     },
-    "leftIconSize": {
+    "size": {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "TIconSize",
-        "resolved": "\"extra-extra-extra-large\" | \"extra-extra-large\" | \"extra-large\" | \"extra-small\" | \"large\" | \"medium\" | \"small\"",
+        "original": "TSize",
+        "resolved": "\"extra-extra-large\" | \"extra-large\" | \"extra-small\" | \"large\" | \"medium\" | \"small\"",
         "references": {
-          "TIconSize": {
+          "TSize": {
             "location": "import",
             "path": "@shared/interfaces"
           }
         }
       },
       "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "left-icon-size",
-      "reflect": false
-    },
-    "icon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "TIconName",
-        "resolved": "\"number\" | \"calendar\" | \"toggle\" | \"info\" | \"warning\" | \"right\" | \"left\" | \"circle\" | \"1x\" | \"2x\" | \"3x\" | \"4x\" | \"5x\" | \"achievement\" | \"action-plan\" | \"action-plan-create\" | \"activity\" | \"activity-history\" | \"aggregation\" | \"aisles\" | \"alarm\" | \"align-center\" | \"align-left\" | \"align-right\" | \"analysis\" | \"analytics-board-bars\" | \"analytics-boost\" | \"analytics-graph-line\" | \"answer\" | \"app-creator\" | \"apple-pay\" | \"archive\" | \"arrow-down\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrows-up-down\" | \"assign\" | \"assign-group\" | \"assigned\" | \"attach-file\" | \"attachment\" | \"audio-offline\" | \"audit\" | \"author\" | \"auto-flash\" | \"autocomplete\" | \"automotive-airplane\" | \"automotive-bus\" | \"automotive-car\" | \"automotive-cycle\" | \"automotive-gas\" | \"automotive-road\" | \"automotive-route\" | \"automotive-route-sign\" | \"automotive-scooter\" | \"automotive-shipping\" | \"award-trophy-star\" | \"background-off\" | \"background-on\" | \"badge\" | \"badge-book\" | \"badge-brain\" | \"badge-crown\" | \"badge-makeup-1\" | \"badge-stats\" | \"barcode\" | \"battery-status-bar\" | \"battle\" | \"beverages-beer\" | \"beverages-bottle\" | \"beverages-champagne\" | \"beverages-cocktail\" | \"beverages-coffee\" | \"beverages-drink\" | \"beverages-hot-drink\" | \"beverages-tropical-cocktail\" | \"beverages-water\" | \"beverages-wine\" | \"big-arrow-down\" | \"big-arrow-left\" | \"big-arrow-right\" | \"big-arrow-up\" | \"bigfont\" | \"blocks\" | \"bluetooth\" | \"bookmark\" | \"boost\" | \"branch\" | \"brush\" | \"buttons-single-choice\" | \"calendar-date\" | \"calendar-end-date\" | \"calendar-error\" | \"calendar-new-event\" | \"calendar-received\" | \"calendar-sent\" | \"calendar-warning\" | \"camera\" | \"campaign\" | \"campaign-create\" | \"campaign-filter\" | \"catalogue\" | \"catch-them\" | \"categories\" | \"chart\" | \"chat\" | \"chat-new\" | \"check\" | \"check-product\" | \"circle-minor\" | \"circle-plus\" | \"circle1\" | \"circle2\" | \"close\" | \"color-picker\" | \"column\" | \"comment\" | \"community\" | \"company\" | \"compass-direction\" | \"condition\" | \"connect\" | \"contact\" | \"cosmetics-brush\" | \"cosmetics-brush-scissors\" | \"cosmetics-brush-set\" | \"cosmetics-comb\" | \"cosmetics-hairdryer\" | \"cosmetics-lips\" | \"cosmetics-lipstick\" | \"cosmetics-mirror\" | \"cosmetics-nail-polish\" | \"courses\" | \"create-chat\" | \"cross\" | \"custom\" | \"cut\" | \"daily\" | \"darkmode\" | \"dashboards\" | \"dashboards-new\" | \"data-file-add\" | \"database\" | \"database-add\" | \"database-check\" | \"database-download\" | \"database-edit\" | \"database-history\" | \"database-import\" | \"database-lock\" | \"database-question\" | \"database-refresh\" | \"database-remove\" | \"database-search\" | \"database-settings\" | \"database-star\" | \"database-subtract\" | \"database-sync\" | \"database-warning\" | \"date-time\" | \"day-view\" | \"delete\" | \"desktop\" | \"diagram-arrow-right\" | \"diploma\" | \"diploma-history\" | \"diploma-manager\" | \"diploma-new\" | \"dislike\" | \"dot\" | \"double-tick\" | \"down\" | \"down-circle\" | \"download\" | \"downloaded\" | \"draggable\" | \"duplicate\" | \"email\" | \"emoji\" | \"end-call\" | \"expand-chart\" | \"explore\" | \"export\" | \"eye\" | \"facebook\" | \"fashion-boot\" | \"fashion-bra\" | \"fashion-coat\" | \"fashion-dress\" | \"fashion-perfume\" | \"fashion-pump\" | \"fashion-shoe\" | \"fashion-t-shirt\" | \"fashion-trousers\" | \"fashion-women\" | \"feed\" | \"feed-create-post\" | \"feedback\" | \"feedback-neutral\" | \"feedback-sad\" | \"file\" | \"file-add\" | \"file-csv\" | \"file-download\" | \"file-excel\" | \"file-pdf\" | \"file-powerpoint\" | \"file-upload\" | \"file-word\" | \"filter\" | \"first\" | \"fixed\" | \"flag\" | \"flash-off\" | \"flash-on\" | \"flip\" | \"folder\" | \"folder-add\" | \"folder-download\" | \"folder-edit\" | \"folder-remove\" | \"folder-upload\" | \"food-apple\" | \"food-banana\" | \"food-bowl\" | \"food-carrot\" | \"food-cherry\" | \"food-egg\" | \"food-orange\" | \"food-pear\" | \"food-pineapple\" | \"food-strawberry\" | \"formula\" | \"forward\" | \"frame\" | \"full-height\" | \"furniture\" | \"geo-filter\" | \"gif\" | \"go-to\" | \"gps\" | \"grid-phone\" | \"grid-view\" | \"group\" | \"hashtag\" | \"heart\" | \"help\" | \"history\" | \"home\" | \"hotel-award\" | \"hotel-award-book\" | \"hotel-bed\" | \"hotel-bell\" | \"hotel-bellhop\" | \"hotel-building\" | \"hotel-dnd\" | \"hotel-room-service-1\" | \"hotel-room-service-2\" | \"hotel-room-service-3\" | \"hotzone\" | \"hourglass\" | \"hr\" | \"image\" | \"image-map\" | \"image-offline\" | \"import\" | \"inbox\" | \"incentive-manager\" | \"incentive-manager1\" | \"indeterminate\" | \"inquiry\" | \"instagram\" | \"instant-play\" | \"iphone\" | \"journey\" | \"keyboard\" | \"large-with-info\" | \"large-without-info\" | \"last\" | \"layout\" | \"leaderboard\" | \"learning-path\" | \"left-circle\" | \"left-web\" | \"lesson\" | \"like\" | \"link\" | \"link-broken\" | \"linkedin\" | \"list-view\" | \"livestream\" | \"loading\" | \"lock\" | \"logic\" | \"logic-visible\" | \"low-power\" | \"luxury-bag\" | \"luxury-bottle\" | \"luxury-gift\" | \"luxury-glasses\" | \"luxury-handbag\" | \"luxury-necklace\" | \"luxury-necklace-2\" | \"luxury-necklace-3\" | \"luxury-stars\" | \"luxury-watch\" | \"mandatory\" | \"map\" | \"maximize\" | \"maximize-web\" | \"medal\" | \"mention\" | \"menu\" | \"microphone\" | \"minimize\" | \"minimize-web\" | \"minus\" | \"missing-word\" | \"mission\" | \"mission-data\" | \"mission-download\" | \"month-view\" | \"monthly\" | \"more\" | \"more-2\" | \"more-circle\" | \"more-shapes\" | \"move\" | \"move-down\" | \"move-up\" | \"multiple-photos\" | \"mute-microphone\" | \"new-lesson\" | \"new-rectangle\" | \"new-section\" | \"new-task\" | \"news\" | \"next-photo\" | \"no-data\" | \"no-video\" | \"not-allowed\" | \"note\" | \"offline\" | \"offline-play\" | \"ongoing\" | \"operations\" | \"out-of-stock-product\" | \"pages\" | \"password\" | \"paste\" | \"pause\" | \"pause-audio\" | \"pen\" | \"personal-development\" | \"pharma-drug-box\" | \"pharma-first-aid\" | \"pharma-first-aid-kit\" | \"pharma-heartrate\" | \"pharma-hospital\" | \"pharma-iv-bag\" | \"pharma-medication\" | \"pharma-pill\" | \"pharma-pills-box\" | \"pharma-syringe\" | \"phone\" | \"phone-action-camera\" | \"photo-annotated\" | \"photo-library\" | \"photo-mandatory\" | \"pin\" | \"pin-new-site\" | \"pin-selected\" | \"pivot\" | \"play\" | \"play-audio\" | \"plugin\" | \"plus\" | \"podcast\" | \"poll\" | \"price-dollar\" | \"price-euro\" | \"price-sterling\" | \"print\" | \"priority\" | \"product\" | \"product-briefcase\" | \"profile\" | \"publish\" | \"pull-to-refresh\" | \"qr-code\" | \"question-new\" | \"questions\" | \"radio-button-off\" | \"radio-button-on\" | \"ranking\" | \"ranking-toggle\" | \"read\" | \"reason\" | \"recent\" | \"redo\" | \"refresh\" | \"rejected\" | \"rejector\" | \"repeat\" | \"request\" | \"restart\" | \"restaurant-bread\" | \"restaurant-chef\" | \"restaurant-croissant\" | \"restaurant-flatware\" | \"restaurant-grocery\" | \"restaurant-kitchen-bell\" | \"restaurant-knife-board\" | \"restaurant-menu\" | \"restaurant-platware-2\" | \"restaurant-vegetables-plate\" | \"restriction\" | \"right-circle\" | \"right-web\" | \"rotate-camera\" | \"rubber\" | \"sales\" | \"save\" | \"scale-rating\" | \"scan\" | \"schedule-user\" | \"schedule-view\" | \"scoring\" | \"scoring-visible\" | \"scratch\" | \"screenshare\" | \"search\" | \"search-product\" | \"security\" | \"select\" | \"select-all\" | \"send\" | \"send-story\" | \"settings\" | \"share\" | \"share-file\" | \"shipment-smartphone-arrive\" | \"shopping-basket\" | \"side-menu-collapse\" | \"side-menu-expand\" | \"sidebar-left\" | \"sidebar-right\" | \"signal-status-bar\" | \"signature\" | \"single-choice\" | \"single-view\" | \"slider\" | \"small-with-info\" | \"small-without-info\" | \"sms\" | \"sort-down\" | \"sort-up\" | \"sort-up-and-down\" | \"star\" | \"start-recording\" | \"start-rectangle\" | \"stats\" | \"step\" | \"stop-watch\" | \"store\" | \"store-archived\" | \"support\" | \"swipe-detail\" | \"swipe-explanation\" | \"sync-product\" | \"tab\" | \"table\" | \"tableau\" | \"tablet\" | \"tag\" | \"tags-settings\" | \"task\" | \"text-predefined\" | \"theme\" | \"tick\" | \"to-do\" | \"todo-boost\" | \"toggle-off-video\" | \"transaction\" | \"translate\" | \"translation-check\" | \"translation-warning\" | \"triangle\" | \"twitter\" | \"type-tool\" | \"unarchive\" | \"unassign\" | \"unassign-group\" | \"unbook\" | \"undo\" | \"unlocked\" | \"unread\" | \"up\" | \"up-circle\" | \"upgrade\" | \"upload\" | \"user\" | \"user-block\" | \"user-live\" | \"user-lock\" | \"user-new\" | \"validate\" | \"validation-date\" | \"validator\" | \"value\" | \"variable\" | \"verified\" | \"videocamera\" | \"view\" | \"virtual-queuing\" | \"visit\" | \"visual-merchandising\" | \"volume-off\" | \"volume-on\" | \"waiting-list\" | \"warning-2\" | \"warning-product\" | \"webcam\" | \"week-view\" | \"weekdays\" | \"weekly\" | \"weeks\" | \"wifi-status-bar\" | \"word-search\" | \"workflow\" | \"yearly\" | \"yoobic\" | \"zip-file\" | \"zoom-in\" | \"zoom-out\"",
-        "references": {
-          "TIconName": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Icon of the banner."
-      },
-      "attribute": "icon",
-      "reflect": false
-    },
-    "iconColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "TColor",
-        "resolved": "\"accent\" | \"anthracite\" | \"app-color\" | \"danger\" | \"dark\" | \"energized\" | \"info\" | \"light\" | \"stable\" | \"stable-alt\" | \"stable-light\" | \"stable-ultralight\" | \"success\" | \"text-color\" | \"warning\" | \"wood\" | \"accent-10\" | \"accent-20\" | \"accent-40\" | \"accent-60\" | \"accent-80\" | \"anthracite-10\" | \"anthracite-20\" | \"anthracite-40\" | \"anthracite-60\" | \"anthracite-80\" | \"app-color-10\" | \"app-color-20\" | \"app-color-40\" | \"app-color-60\" | \"app-color-80\" | \"danger-10\" | \"danger-20\" | \"danger-40\" | \"danger-60\" | \"danger-80\" | \"dark-10\" | \"dark-20\" | \"dark-40\" | \"dark-60\" | \"dark-80\" | \"energized-10\" | \"energized-20\" | \"energized-40\" | \"energized-60\" | \"energized-80\" | \"info-10\" | \"info-20\" | \"info-40\" | \"info-60\" | \"info-80\" | \"light-10\" | \"light-20\" | \"light-40\" | \"light-60\" | \"light-80\" | \"stable-10\" | \"stable-20\" | \"stable-40\" | \"stable-60\" | \"stable-80\" | \"stable-alt-10\" | \"stable-alt-20\" | \"stable-alt-40\" | \"stable-alt-60\" | \"stable-alt-80\" | \"stable-light-10\" | \"stable-light-20\" | \"stable-light-40\" | \"stable-light-60\" | \"stable-light-80\" | \"stable-ultralight-10\" | \"stable-ultralight-20\" | \"stable-ultralight-40\" | \"stable-ultralight-60\" | \"stable-ultralight-80\" | \"success-10\" | \"success-20\" | \"success-40\" | \"success-60\" | \"success-80\" | \"text-color-10\" | \"text-color-20\" | \"text-color-40\" | \"text-color-60\" | \"text-color-80\" | \"warning-10\" | \"warning-20\" | \"warning-40\" | \"warning-60\" | \"warning-80\" | \"wood-10\" | \"wood-20\" | \"wood-40\" | \"wood-60\" | \"wood-80\" | \"transparent\"",
-        "references": {
-          "TColor": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Size of the banner"
       },
-      "attribute": "icon-color",
-      "reflect": false
+      "attribute": "size",
+      "reflect": true,
+      "defaultValue": "'medium'"
     },
     "link": {
       "type": "string",
@@ -369,33 +128,32 @@ export class YooBannerComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": "Link of the banner."
       },
       "attribute": "link",
-      "reflect": false
+      "reflect": true
     },
-    "mode": {
+    "linkText": {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'simple' | 'card'",
-        "resolved": "\"card\" | \"simple\"",
+        "original": "string",
+        "resolved": "string",
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": "Mode of the banner : `simple` or `card`."
+        "text": "Text of the link"
       },
-      "attribute": "mode",
-      "reflect": false,
-      "defaultValue": "'simple'"
+      "attribute": "link-text",
+      "reflect": true
     },
-    "text": {
+    "target": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -404,73 +162,63 @@ export class YooBannerComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": "Text of the banner."
+        "text": "Name of the browsing context where to display the linked URL:\n- `_self`: the current browsing context. (Default)\n- `_blank`: usually a new tab, but users can configure browsers to open a new window instead.\n- `_parent`: the parent browsing context of the current one. If no parent, behaves as `_self`.\n- `_top`: the topmost browsing context (the \"highest\" context that\u2019s an ancestor of the current one). If no ancestors, behaves as `_self`."
       },
-      "attribute": "text",
-      "reflect": false,
-      "defaultValue": "''"
+      "attribute": "target",
+      "reflect": true
     }
   }; }
   static get states() { return {
     "closed": {}
   }; }
   static get events() { return [{
-      "method": "alertClosed",
-      "name": "alertClosed",
+      "method": "closeClick",
+      "name": "closeClick",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the banner is closed."
+        "text": "Emitted when the close button is clicked"
       },
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }, {
-      "method": "alertActionSelected",
-      "name": "alertActionSelected",
+      "method": "linkClick",
+      "name": "linkClick",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the banner link is clicked."
+        "text": "Emitted when the link is clicked"
       },
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }, {
-      "method": "bannerButtonClicked",
-      "name": "bannerButtonClicked",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the footer button is clicked."
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }
   static get methods() { return {
     "close": {
       "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
+        "signature": "(event: MouseEvent) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
         "references": {
           "Promise": {
             "location": "global"
+          },
+          "MouseEvent": {
+            "location": "global"
           }
         },
         "return": "Promise<void>"

package/dist/collection/components/2.molecules/kpi-card/kpi-card.css CHANGED Viewed

@@ -254,9 +254,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   opacity: 1;
 }
 :host .kpi-container:not(:last-of-type) {
+  padding-right: var(--values-gap);
   border-right: var(--value-separator);
 }
 :host .kpi-container.hidden {
+  padding-right: 0;
   opacity: 0;
 }
 :host .kpi-number {

package/dist/collection/components/2.molecules/profile-list/profile-list.js CHANGED Viewed

@@ -121,11 +121,10 @@ export class YooProfileListComponent {
     }
   }
   renderTruncate(content, icon) {
-    const charLength = isWeb(this.host) ? 83 : 38;
     return (h("div", { class: "user-info-list" },
       h("div", { class: "start-container" },
         h("yoo-icon", { name: icon, color: "dark" }),
-        h("yoo-truncate", { content: content, maxLength: charLength, showEllipsisIcon: true }))));
+        h("yoo-truncated-line", { content: content }))));
   }
   renderCollapsible(header, content) {
     return (h("yoo-collapsible", { hasArrowIcon: !!content.length, icon: "tag", iconColor: "dark", iconSize: "medium", slotHeader: true },
@@ -152,7 +151,7 @@ export class YooProfileListComponent {
       return (h("yoo-grid", { ...attrs },
         h("div", { slot: "header", class: "profile-summary" },
           h("div", { class: "title" }, ((_b = this.recentItems) === null || _b === void 0 ? void 0 : _b.length) + ' ' + translate('LATESTTENANTS')),
-          h("div", { class: "action", onClick: () => this.onSeeAllClicked() }, translate('SEEALL')))));
+          h("div", { class: "action", onClick: () => this.onSeeAllClicked() }, translate('YOOBICSEEALL')))));
     }
   }
   renderAdminLinks() {