@yoobic/yobi 8.2.0-3 → 8.2.0-32

package/dist/collection/components/1.atoms/tabs/tabs.css

@@ -203,7 +203,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* shadow */
 :host {
   --justify-tabs: flex-start;
-  --height-tabs: 2.5rem;
+  --height-tabs: var(--spacing-40, 2.5rem);
   --opacity-tabs: 1;
   --active-tab-background: none;
   --active-text-color: var(--text-color, #807f83);
@@ -380,16 +380,15 @@ yoo-tag {
 yoo-badge.margin-right {
   margin-right: var(--spacing-08, 0.5rem);
 }
+yoo-badge[shape=dot] {
+  align-self: flex-start;
+}
 
 yoo-badge:not([shape=dot]),
 yoo-tag {
   align-self: center;
 }
 
-yoo-badge[shape=dot] {
-  align-self: flex-start;
-}
-
 .outer-container {
   position: relative;
   height: var(--height-tabs);
@@ -401,7 +400,10 @@ yoo-badge[shape=dot] {
 }
 .outer-container-vertical .tab-container {
   justify-content: left;
+  box-sizing: border-box;
+  width: 100%;
   height: 2.5rem;
+  height: var(--height-tabs);
   padding: var(--spacing-08, 0.5rem);
   color: var(--dark, #000000);
   text-align: left;
@@ -412,6 +414,9 @@ yoo-badge[shape=dot] {
 .outer-container-vertical .tab-container .flex {
   flex: 1;
 }
+.outer-container-vertical .tab-container .full-width {
+  width: 100%;
+}
 .outer-container-vertical .tab-container yoo-icon {
   margin-right: var(--spacing-08, 0.5rem);
   fill: var(--text-color, #807f83);
@@ -422,13 +427,20 @@ yoo-badge[shape=dot] {
 .outer-container-vertical .tab-container.active yoo-icon {
   fill: var(--app-color, #5a30f4);
 }
+.outer-container-vertical .tab-container .tab-title {
+  width: 100%;
+}
+.outer-container-vertical .tab-container .tab-title.plus-one {
+  width: calc(100% - var(--spacing-32, 2rem));
+}
+.outer-container-vertical .tab-container .tab-title.sandwich {
+  width: calc(100% - var(--spacing-64, 4rem));
+}
 .outer-container-vertical .tab-container + .tab-container {
   margin-top: var(--vertical-tab-gap);
 }
 .outer-container-vertical .tab-description {
-  padding-right: var(--spacing-16, 1rem);
-  padding-bottom: var(--spacing-08, 0.5rem);
-  padding-left: var(--spacing-32, 2rem);
+  padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
   color: var(--text-color);
   font-size: var(--font-size-14, 0.875rem);
   border-bottom: var(--tab-border-width) solid var(--tab-border-color);
@@ -474,21 +486,25 @@ yoo-badge[shape=dot] {
   color: var(--app-color, #5a30f4);
 }
 
-:host(.community-editor) .tab-container {
-  padding-bottom: 0px;
+:host(.tabs-padding-top) .outer-container-vertical {
+  padding-top: 4rem;
+}
+
+:host(.big-tabs) .tab-container {
+  padding-bottom: 0;
   border: none;
   transition: color 0.3s ease;
 }
-:host(.community-editor) .tab-container:not(.active) {
+:host(.big-tabs) .tab-container:not(.active) {
   padding-bottom: var(--spacing-08, 0.5rem);
   border-bottom: var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);
 }
-:host(.community-editor) .tab-container.active {
+:host(.big-tabs) .tab-container.active {
   background-color: transparent;
 }
-:host(.community-editor) .tab-container + .tab-container {
+:host(.big-tabs) .tab-container + .tab-container {
   margin: 0;
 }
-:host(.community-editor) .tab-description {
+:host(.big-tabs) .tab-description {
   border-bottom: var(--tab-border-width) solid var(--active-tab-border-color);
 }

package/dist/collection/components/1.atoms/tabs/tabs.js

@@ -41,10 +41,6 @@ export class YooTabsComponent {
      * Initial index when the tabs is loaded.
      */
     this.initialIndex = 0;
-    /**
-     * Maximum amount of title characters before truncating it
-     */
-    this.maxTitleCharacters = 18;
     this.currentIndex = 0;
     this.tabElements = [];
     this.notifElements = [];
@@ -113,18 +109,23 @@ export class YooTabsComponent {
     }
   }
   renderTab(tab, index) {
-    var _a;
     const isActive = this.initialIndex === index;
     const icon = tab.icon;
     const tagColor = isActive ? 'app-color-10' : 'text-color-10';
     return [
       h("div", { key: 'tab_' + index, class: { 'tab-container': true, extra: index >= this.tabs.length, active: isActive }, onClick: (event) => this.tabClicked(index, event), ref: (el) => (this.tabElements[index] = el) },
-        h("span", { class: "flex" },
+        h("span", { class: "full-width" },
           this.showBadges && h("yoo-badge", { class: "margin-right", color: this.getBadgeColor(tab, index, isActive), shape: "circle", text: (index + 1).toLocaleString() }),
           icon && h("yoo-icon", { class: tab.iconColor, name: icon, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small') }),
-          this.vertical && ((_a = tab.title) === null || _a === void 0 ? void 0 : _a.length) > this.maxTitleCharacters ? (h("yoo-tooltip", { content: translateMulti(tab.title) },
-            h("yoo-truncate", { content: translateMulti(tab.title), maxLength: this.maxTitleCharacters }))) : (h("span", { class: "flex", innerHTML: translateMulti(tab.title) })),
-          this.isEditable && this.editableOptions && this.tabs.length > index && isWeb(this.host) && (h("yoo-context-menu", { class: "flex editable", contentButtons: this.editableOptions(index) },
+          this.vertical
+            ? h("div", { class: `full-width tab-title ${this.isEditable && this.editableOptions && this.tabs.length > index && icon
+                ? 'sandwich'
+                : this.isEditable && this.editableOptions && this.tabs.length > index || icon
+                  ? 'plus-one'
+                  : ''}` },
+              h("yoo-truncated-line", { tooltipPlacement: "right", content: translateMulti(tab.title) }))
+            : h("span", null, translateMulti(tab.title)),
+          this.isEditable && this.editableOptions && this.tabs.length > index && isWeb(this.host) && (h("yoo-context-menu", { class: "full-width editable", contentButtons: this.editableOptions(index) },
             h("yoo-icon", { class: tab.iconColor, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small'), name: "more" }))),
           this.isEditable && this.editableOptions && this.tabs.length > index && !isWeb(this.host) && (h("yoo-icon", { class: tab.iconColor, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small'), name: "more", onClick: () => this.onShowOptions(index) })),
           isNumber(tab.notif) && tab.notif > 0 && !this.isEditable && (h("yoo-badge", { ref: (el) => (this.notifElements[index] = el), color: tagColor, shape: "oval", text: pipes.number.transform(tab.notif, '', 0) })),
@@ -166,7 +167,7 @@ export class YooTabsComponent {
       "mutable": false,
       "complexType": {
         "original": "ITab[]",
-        "resolved": "ITab[]",
+        "resolved": "ITab<string>[]",
         "references": {
           "ITab": {
             "location": "import",
@@ -261,7 +262,7 @@ export class YooTabsComponent {
       "mutable": false,
       "complexType": {
         "original": "ITab[]",
-        "resolved": "ITab[]",
+        "resolved": "ITab<string>[]",
         "references": {
           "ITab": {
             "location": "import",
@@ -331,24 +332,6 @@ export class YooTabsComponent {
       "reflect": false,
       "defaultValue": "0"
     },
-    "maxTitleCharacters": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Maximum amount of title characters before truncating it"
-      },
-      "attribute": "max-title-characters",
-      "reflect": false,
-      "defaultValue": "18"
-    },
     "showBadges": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/1.atoms/tabs-slides/tabs-slides.js

@@ -82,7 +82,7 @@ export class YooTabsSlidesComponent {
       "mutable": false,
       "complexType": {
         "original": "ITab[]",
-        "resolved": "ITab[]",
+        "resolved": "ITab<string>[]",
         "references": {
           "ITab": {
             "location": "import",

package/dist/collection/components/1.atoms/tag/tag.js

@@ -133,7 +133,7 @@ export class YooTagComponent {
       "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\"",
+        "resolved": "\"number\" | \"calendar\" | \"toggle\" | \"info\" | \"warning\" | \"right\" | \"left\" | \"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\" | \"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",

package/dist/collection/components/1.atoms/tooltip/tooltip.js

@@ -26,10 +26,6 @@ export class YooTooltipComponent {
      * This props set the maxwidth of the tooltip content, from 0 to 1
      */
     this.coeffMaxWidth = 0.8;
-    /**
-     * Size.
-     */
-    this.size = 'small';
     /**
      * This prop will check whether the tooltip refers to requesting access
      */
@@ -81,6 +77,10 @@ export class YooTooltipComponent {
       this.saveTooltip.emit({ value: (_a = this.contentEditableElement) === null || _a === void 0 ? void 0 : _a.innerHTML, refTooltip: reference });
     }
   }
+  async toggleHoverable(isEnable = !this.hoverable) {
+    this.hoverable = isEnable;
+    this.reconfigureTooltip();
+  }
   onEditableChanged(newState, oldState) {
     this.hasModeChanged = newState !== oldState;
   }
@@ -90,9 +90,8 @@ export class YooTooltipComponent {
     }
   }
   onTextChange() {
-    var _a, _b;
-    if (!((_a = this.tippyInstance) === null || _a === void 0 ? void 0 : _a.state.isDestroyed) && !this.requestAccess) {
-      this.editable ? this.contentEditableElement.innerHTML = this.content : (_b = this.tippyInstance) === null || _b === void 0 ? void 0 : _b.setContent(this.content);
+    if (this.tippyInstance && !this.tippyInstance.state.isDestroyed && !this.requestAccess) {
+      this.editable ? this.contentEditableElement.innerHTML = this.content : this.tippyInstance.setContent(this.content);
     }
     else {
       this.configureTooltip();
@@ -106,6 +105,7 @@ export class YooTooltipComponent {
   }
   connectedCallback() {
     const isweb = isWeb(this.host);
+    this.size = this.size || isweb ? 'medium' : 'large';
     if (isNullOrUndefined(this.clickable)) {
       this.clickable = !isweb;
     }
@@ -201,7 +201,7 @@ export class YooTooltipComponent {
     let dynamicOptions = Object.assign(defaultOption, {
       trigger: this.hoverable ? 'mouseenter focus' : this.clickable ? 'click' : '',
       theme: `${this.name} ${this.theme} ${this.size}`,
-      maxWidth: window.innerWidth * this.coeffMaxWidth,
+      maxWidth: this.maxWidth || window.innerWidth * this.coeffMaxWidth,
       placement: this.placement,
       showOnCreate: this.showOnCreate,
       hideOnClick: this.hideOnClick,
@@ -462,6 +462,23 @@ export class YooTooltipComponent {
       "reflect": false,
       "defaultValue": "0.8"
     },
+    "maxWidth": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "max-width",
+      "reflect": false
+    },
     "hoverable": {
       "type": "boolean",
       "mutable": true,
@@ -518,10 +535,10 @@ export class YooTooltipComponent {
     },
     "size": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
-        "original": "'small' | 'large'",
-        "resolved": "\"large\" | \"small\"",
+        "original": "'small' | 'medium' | 'large'",
+        "resolved": "\"large\" | \"medium\" | \"small\"",
         "references": {}
       },
       "required": false,
@@ -531,8 +548,7 @@ export class YooTooltipComponent {
         "text": "Size."
       },
       "attribute": "size",
-      "reflect": true,
-      "defaultValue": "'small'"
+      "reflect": true
     },
     "requestAccess": {
       "type": "boolean",
@@ -797,6 +813,25 @@ export class YooTooltipComponent {
         "text": "",
         "tags": []
       }
+    },
+    "toggleHoverable": {
+      "complexType": {
+        "signature": "(isEnable?: boolean) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
     }
   }; }
   static get elementRef() { return "host"; }

package/dist/collection/components/1.atoms/truncated-line/truncated-line.css

@@ -0,0 +1,219 @@
+/* app direction */
+/* border-radius */
+/* border-width */
+/* font family */
+/* font-size */
+/* font weights */
+/* icon size */
+/* used for logos */
+/* spacing for padding, margin, etc... */
+/* shadow */
+/* Z-Index (Ionic)
+--------------------------------------------------
+Grouped by elements which would be siblings */
+/* Hairlines width */
+/* Default Colors
+---------------------------------- */
+/* Private color variables */
+/* #3880ff; */
+/* #3880ff; */
+/* #3880ff; */
+/* #3880ff; */
+/* #3880ff;*/
+/* #3880ff; */
+/* #3880ff; */
+/* #3880ff; */
+/* #3880ff; */
+/* Color map should provide
+- base: main color to be used.
+- contrast: Color that will provide readable text against the base color
+- shade: 12% darker version of the base color (mix with black)
+- tint: 10% lighter version of the base color (mix with white) */
+/* Themed Colors
+
+ Default Foreground and Background Colors values
+ Allows users to override an foreground / background colors
+ $background-color-value:            $light !default;
+ $background-color-rgb:              255, 255, 255 !default; */
+/* Default Foreground and Background Colors
+-------------------------------------------------- */
+/* Default General Colors
+-------------------------------------------------- */
+/* Default List & List Items
+-------------------------------------------------- */
+/* Item Divider */
+/* iOS List & List Items
+-------------------------------------------------- */
+/* Default Toolbar
+--------------------------------------------------*/
+/* iOS Toolbar
+--------------------------------------------------*/
+/* Default Tabs & Tab bar
+--------------------------------------------------*/
+/* iOS Tabs & Tab bar
+--------------------------------------------------*/
+/* Function related variables
+--------------------------------------------------*/
+/* Gets the active color's css variable from a variation. Alpha is optional.
+--------------------------------------------------------------------------------------------
+Example usage:
+current-color(base) => var(--ion-color-base)
+current-color(contrast, 0.1) => rgba(var(--ion-color-contrast-rgb), 0.1)
+--------------------------------------------------------------------------------------------*/
+/* Gets the specific color's css variable from the name and variation. Alpha/rgb are optional.
+--------------------------------------------------------------------------------------------
+Example usage:
+ion-color(primary, base) => var(--ion-color-primary, #3880ff)
+ion-color(secondary, contrast) => var(--ion-color-secondary-contrast)
+ion-color(primary, base, 0.5) => rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5)
+--------------------------------------------------------------------------------------------*/
+/* Mixes a color with black to create its shade.
+--------------------------------------------------------------------------------------------*/
+/*Mixes a color with white to create its tint.
+--------------------------------------------------------------------------------------------*/
+/* Converts a color to a comma separated rgb.
+--------------------------------------------------------------------------------------------*/
+/* Str functions.
+___________________________________________________________________________________________*/
+/* Creates a pulse animation.
+  @param {color} $begin-color [stable-20] - starting color for pulse.
+  @param {color} $end-color [stable-20] - ending color for pulse.
+  @author Ben Morgan
+  @author Damien Arondel 
+*/
+/* Execute a content if the hover state is supported.
+
+ @content the content to execute if relevant
+ @author Ben Morgan
+ @author Damien Arondel
+*/
+/* Properly hide overflow on rounded corner elements for Webkit based browsers.
+ This mixin must be used at the same level as `overflow: hidden` and `border-radius: ...`.
+
+ @link https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7
+ @author Ben Morgan
+ @author Damien Arondel
+*/
+/* Truncate every overflown elements with an ellipsis.
+ This mixin does not work with flex box on the same level.
+
+ @author Ben Morgan
+ @author Damien Arondel
+*/
+/* Truncate text at a specific number of lines.
+ */
+/* app direction */
+/* border-radius */
+/* border-width */
+/* font family */
+/* font-size */
+/* font weights */
+/* icon size */
+/* 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.
+rtl: Always assumes rtl and only includes rtl css. No [dir] selectors.
+ltr: Always assumes ltr and only includes ltr css. No [dir] selectors.
+null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override ltr defaults.
+---------------------------------------------------------- */
+/* Add property horizontal
+ @param {string} $start
+ @param {string} $end
+----------------------------------------------------------*/
+/* Add property for all directions
+  @param {string} $prop
+  @param {string} $top
+  @param {string} $end
+  @param {string} $bottom
+  @param {string} $start
+  @param {boolean} $content include content or use default
+----------------------------------------------------------*/
+/* Add margin for all directions
+  @param {string} $top
+  @param {string} $end
+  @param {string} $bottom
+  @param {string} $start
+----------------------------------------------------------*/
+/* Add padding for all directions
+  @param {string} $top
+  @param {string} $end
+  @param {string} $bottom
+  @param {string} $start
+----------------------------------------------------------*/
+/*Font smoothing
+--------------------------------------------------*/
+/* SVG Background Image Mixin
+  @param {string} $svg
+----------------------------------------------------------*/
+/* Add padding horizontal
+  @param {string} $start
+  @param {string} $end
+----------------------------------------------------------*/
+/* Add margin horizontal
+ @param {string} $start
+ @param {string} $end
+----------------------------------------------------------*/
+/* Add safe area padding horizontal
+  @param {string} $start
+  @param {string} $end
+----------------------------------------------------------*/
+/* Add border radius for all directions
+  @param {string} $top-start
+  @param {string} $top-end
+  @param {string} $bottom-end
+  @param {string} $bottom-start
+----------------------------------------------------------*/
+/* Sets correct text align with support for old browsers
+  @param {string} $direction - text direction
+  @param {string} $decorator - !important
+----------------------------------------------------------*/
+/* Add position for all directions
+  @param {string} $top
+  @param {string} $end
+  @param {string} $bottom
+  @param {string} $start
+----------------------------------------------------------*/
+/* Add position horizontal
+  @param {string} $start - amount to position start
+  @param {string} $end - amount to left: 0; end
+----------------------------------------------------------*/
+/**
+ * NOTE DO NOT USE FOR NEW COMPONENTS
+ * LEGACY CODE -- Styles maintained only to prevent breaking changes
+ * For all Font Sizes please use the appropreate font-size-XX Variables.
+ */
+/**
+* Global style mixin for being able to change the background / font-color and border-color
+* programmatically using global classes
+*/
+/* app direction */
+/* border-radius */
+/* border-width */
+/* font family */
+/* font-size */
+/* font weights */
+/* icon size */
+/* used for logos */
+/* spacing for padding, margin, etc... */
+/* shadow */
+:host {
+  display: block;
+  width: 100%;
+}
+:host .content {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+:host ::slotted(*) {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}