@yoobic/yobi 8.2.2 → 8.3.0-2

package/dist/cjs/yoo-text.cjs.entry.js

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
+const index = require('./index-e182c32d.js');
 const lodash = require('./lodash-597bda6d.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
-require('./index-f3d7c03d.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+require('./overlays-b6c94fc8.js');
+require('./index-de8540eb.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-1fdbd9b3.js');
 
 const YooTextComponent = class {
   constructor(hostRef) {

package/dist/cjs/yoo-toast.cjs.entry.js

@@ -2,13 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
-const overlays = require('./overlays-47adbee7.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+const overlays$1 = require('./overlays-40e17096.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const toastCss = ".bg-accent{background-color:var(--accent, #276ef1) !important}.accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}.bg-app-color{background-color:var(--app-color, #5a30f4) !important}.app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}.bg-danger{background-color:var(--danger, #d44333) !important}.danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}.bg-dark{background-color:var(--dark, #000000) !important}.dark{color:var(--dark, #000000);fill:var(--dark, #000000)}.bg-energized{background-color:var(--energized, #ffc043) !important}.energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}.bg-info{background-color:var(--info, #d84c96) !important}.info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}.bg-light{background-color:var(--light, #ffffff) !important}.light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}.bg-stable{background-color:var(--stable, #adadad) !important}.stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}.bg-stable-alt{background-color:var(--stable-alt, #d0d0d0) !important}.stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}.bg-stable-light{background-color:var(--stable-light, #f1f1f1) !important}.stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}.bg-stable-ultralight{background-color:var(--stable-ultralight, #fafafa) !important}.stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}.bg-success{background-color:var(--success, #3aa76d) !important}.success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}.bg-text-color{background-color:var(--text-color, #807f83) !important}.text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}.bg-warning{background-color:var(--warning, #ed6e33) !important}.warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}.bg-wood{background-color:var(--wood, #99644c) !important}.wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}:host{--media-size:48px}:host yoo-truncate{--max-lines:3}:host .outer-container{position:absolute;top:0;right:0;bottom:0;left:0;bottom:unset;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.25rem;padding:0.75rem 1rem;font-size:var(--font-size-16, 1rem);background:var(--stable-ultralight, #fafafa);border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-40, rgba(173, 173, 173, 0.4))}:host .outer-container .danger{color:var(--danger, #d44333)}:host .outer-container .warning{color:var(--warning, #ed6e33)}:host .outer-container .success{color:var(--success, #3aa76d)}:host .outer-container .app-color{color:var(--app-color, #5a30f4)}:host .outer-container .button-container{padding:0 1rem}:host .outer-container .button-container .danger{color:var(--danger, #d44333)}:host .outer-container .button-container .warning{color:var(--warning, #ed6e33)}:host .outer-container .button-container .success{color:var(--success, #3aa76d)}:host .outer-container .button-container .app-color{color:var(--app-color, #5a30f4)}:host .outer-container .text-container{-ms-flex:1;flex:1;margin-right:auto;padding-right:var(--spacing-08, 0.5rem);color:var(--dark, #000000)}:host .outer-container .text-container.sub-messages{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:unset !important}:host .outer-container .icon-container{padding-right:var(--spacing-08, 0.5rem)}:host .outer-container .icon-container yoo-icon{display:block}:host .outer-container .image-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding-right:var(--spacing-08, 0.5rem)}:host .outer-container .image-container yoo-img{--border-radius:50%;width:var(--media-size);height:var(--media-size)}:host .outer-container .extra-button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;min-width:55px;min-height:55px;margin-right:0.8rem;margin-bottom:0.5rem;line-height:55px;text-align:center;border-radius:50%}:host .outer-container .extra-button.bg-app-color{background:var(--app-color, #5a30f4)}:host .outer-container .extra-button.flex{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host .outer-container .extra-button.light{color:var(--light, #ffffff)}:host .overlay{position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--dark, #000000);opacity:0.4}:host(:not(.fullscreen):not(.progress):not(.form-creator.warning)) .outer-container .text-container{max-width:65%;max-height:unset;overflow-y:hidden;word-break:break-word}:host(:not(.fullscreen):not(.progress):not(.form-creator.warning)) .outer-container .text-container.full-width{max-width:100%}:host(.fullscreen) .outer-container{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100% !important;padding:3rem !important}:host(.fullscreen) .outer-container .image-container{-ms-flex:initial;flex:initial;width:100%;margin-bottom:1rem}:host(.fullscreen) .outer-container .image-container yoo-img{--border-radius:unset;width:100%;height:4rem}:host(.fullscreen) .outer-container .text-container{-ms-flex:initial;flex:initial;-ms-flex-pack:center;justify-content:center;width:100%;text-align:center}:host(.bg-stable-light) .outer-container{background:var(--stable-light, #f1f1f1)}:host(.global-actions){-webkit-box-shadow:var(--toast-shadow, 0 0.3125rem 1.875rem 0 rgba(40, 47, 54, 0.2));box-shadow:var(--toast-shadow, 0 0.3125rem 1.875rem 0 rgba(40, 47, 54, 0.2))}:host(.global-actions) .outer-container{height:2.75rem !important;margin-bottom:0 !important;overflow:hidden;border-radius:5px}:host(.global-actions) .outer-container .count-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:100%;line-height:44px}:host(.global-actions) .outer-container .text-container{-ms-flex:1;flex:1}:host(.global-actions) .outer-container .extra-button{width:2rem;min-width:initial;min-height:initial;margin:0;font-size:var(--font-size-18, 1.125rem);line-height:1rem}:host(.global-actions) .outer-container .extra-button:last-child:not(.context-menu){margin-right:1rem}:host(.bottom) .outer-container{top:unset;bottom:0;border-top:var(--border-width-01, 0.0625rem) solid var(--stable-40, rgba(173, 173, 173, 0.4));border-bottom:none}:host(.progress) .outer-container{-ms-flex-direction:column;flex-direction:column;padding:0.75rem 1rem}:host(.progress) .outer-container .text-container{display:-ms-flexbox;display:flex;width:100%;padding:0.5rem 0}:host(.progress) .outer-container .text-container .message,:host(.progress) .outer-container .text-container .icon-container{display:initial;margin:0}:host(.progress) .outer-container .text-container .button-container{margin-left:auto;padding-right:0}:host(.progress) .outer-container .progressbar-wrapper{width:100%}:host(.progress) .outer-container .progressbar-wrapper yoo-progress-bar{--progress-value-color:var(--app-color, #5a30f4)}:host(.header:not(.block)) .outer-container.iphone-x{padding-top:2.75rem !important}:host(.header.ios:not(.block)) .outer-container{padding-top:1.75rem}:host(.web:not(.rounded-rectangle)){display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;height:100%}:host(.web:not(.rounded-rectangle)) .outer-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:450px;min-height:60px;margin-top:4.25rem;border-radius:0.375rem;-webkit-box-shadow:var(--toast-shadow, 0 0.3125rem 1.875rem 0 rgba(40, 47, 54, 0.2));box-shadow:var(--toast-shadow, 0 0.3125rem 1.875rem 0 rgba(40, 47, 54, 0.2))}:host(.web:not(.rounded-rectangle)) .outer-container .message{margin:0 0 0 var(--spacing-16, 1rem)}:host(.web:not(.rounded-rectangle)) .outer-container .button{margin-bottom:0}:host(.web.global-actions) .outer-container{padding:0;color:var(--stable, #adadad)}:host(.web.global-actions) .outer-container .count-container{padding-left:var(--spacing-16, 1rem);color:var(--app-color, #5a30f4)}:host(.web.global-actions) .outer-container .text-container{padding:var(--spacing-08, 0.5rem);color:var(--app-color, #5a30f4)}:host(.web.global-actions) .outer-container .extra-button:last-child{margin-left:var(--spacing-08, 0.5rem);padding-left:var(--spacing-08, 0.5rem);border-left:solid var(--border-width-01, 0.0625rem) var(--stable-light, #f1f1f1);border-radius:0}:host(.web.top.progress) .outer-container .message{display:block;white-space:nowrap}:host(.web.top.header) .outer-container{border-bottom:none}:host(.web.top.header) .outer-container .icon-container{margin-bottom:0}:host(.web.bottom){border-radius:0.375rem}:host(.web.bottom) .outer-container{-ms-flex-item-align:end;align-self:flex-end;margin-top:0;margin-bottom:var(--spacing-16, 1rem);overflow:visible}:host(.web.bottom) .outer-container .count-container{border-radius:0.375rem 0 0 0.375rem}:host(.block) .outer-container{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;max-height:var(--spacing-48, 3rem);border-bottom:none}:host(.block.iphone-x){min-height:var(--spacing-64, 4rem)}:host(.form-creator) .outer-container{padding:0;background:var(--stable-light, #f1f1f1);border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0) !important}:host(.form-creator) .outer-container .text-container{padding-left:var(--spacing-16, 1rem)}:host(.form-creator) .outer-container .extra-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;line-height:0.5rem}:host(.form-creator) .outer-container .extra-button.context-menu:last-child{margin-left:0;padding-left:0}:host(.form-creator) .outer-container .icon-container{padding-left:var(--spacing-08, 0.5rem)}:host(.media){--media-size:48px}:host(.media) yoo-truncate{--max-lines:2}:host(.media) .right-media-container{width:var(--media-size);height:var(--media-size)}:host(.photo-actions) .outer-container{min-height:auto;margin-top:var(--spacing-08, 0.5rem);padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);color:var(--light, #ffffff);font-size:var(--font-size-14, 0.875rem);background-color:var(--app-color, #5a30f4)}:host(.photo-actions) .outer-container .text-container{color:var(--light, #ffffff)}:host(.photo-actions) .outer-container yoo-icon{font-size:var(--font-size-14, 0.875rem)}:host(.photo-actions) .outer-container yoo-icon.close{min-height:initial;padding:var(--spacing-02, 0.125rem);color:var(--app-color, #5a30f4);font-size:var(--font-size-14, 0.875rem);background:var(--light, #ffffff);border-radius:50%}:host(.photo-actions) .outer-container .button{padding:0 var(--spacing-16, 1rem)}:host(.photo-actions) .outer-container .button:not(:last-of-type){border-right:var(--border-width-01, 0.0625rem) solid var(--light-40, rgba(255, 255, 255, 0.4))}:host(.form-creator.warning) .outer-container{background:var(--warning, #ed6e33);border:none}:host(.form-creator.warning) .outer-container .text-container{padding-top:var(--spacing-16, 1rem);padding-bottom:var(--spacing-16, 1rem);color:var(--light, #ffffff);font-size:var(--font-size-14, 0.875rem)}:host(.form-creator.warning) .outer-container .button-container.close-icon-divider{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:3rem;border-left:var(--border-width-01, 0.0625rem) solid var(--light-40, rgba(255, 255, 255, 0.4))}:host(.form-creator.warning.web) .outer-container{width:37.5rem}:host(.form-creator.warning.translate){margin-top:var(--spacing-32, 2rem)}:host(.form-creator.warning.translate) .outer-container yoo-icon{margin:0 var(--spacing-16, 1rem);cursor:pointer}:host(.form-creator.warning.translate) .outer-container .light{cursor:pointer}:host(.form){display:block;overflow:hidden}:host(.form) .outer-container{position:initial;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;min-height:unset;padding:var(--spacing-04, 0.25rem);font-size:var(--font-size-12, 0.75rem);border:none;border-radius:0.375rem;-webkit-box-shadow:none !important;box-shadow:none !important}:host(.rounded-rectangle) .outer-container{margin:var(--spacing-16, 1rem) var(--spacing-16, 1rem) 0 var(--spacing-16, 1rem);border-radius:var(--border-radius-08, 0.5rem)}:host(.bg-app-color) .outer-container{background:var(--app-color, #5a30f4)}:host(.bg-app-color) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--light, #ffffff)}:host(.bg-app-color) .outer-container .button-container{padding:0 1rem}:host(.bg-app-color) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-app-color) .outer-container .button-container .success,:host(.bg-app-color) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-app-color-10) .outer-container{background:var(--app-color-10, rgba(90, 48, 244, 0.1))}:host(.bg-app-color-10) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--dark, #000000)}:host(.bg-app-color-10) .outer-container .button-container{padding:0 1rem}:host(.bg-app-color-10) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-app-color-10) .outer-container .button-container .success,:host(.bg-app-color-10) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-danger) .outer-container{background:var(--danger, #d44333)}:host(.bg-danger) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--light, #ffffff)}:host(.bg-danger) .outer-container .button-container{padding:0 1rem}:host(.bg-danger) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-danger) .outer-container .button-container .success,:host(.bg-danger) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-danger-10) .outer-container{background:var(--danger-10, rgba(212, 67, 51, 0.1))}:host(.bg-danger-10) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--dark, #000000)}:host(.bg-danger-10) .outer-container .button-container{padding:0 1rem}:host(.bg-danger-10) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-danger-10) .outer-container .button-container .success,:host(.bg-danger-10) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-energized) .outer-container{background:var(--energized, #ffc043)}:host(.bg-energized) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--light, #ffffff)}:host(.bg-energized) .outer-container .button-container{padding:0 1rem}:host(.bg-energized) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-energized) .outer-container .button-container .success,:host(.bg-energized) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-energized-10) .outer-container{background:var(--energized-10, rgba(255, 192, 67, 0.1))}:host(.bg-energized-10) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--dark, #000000)}:host(.bg-energized-10) .outer-container .button-container{padding:0 1rem}:host(.bg-energized-10) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-energized-10) .outer-container .button-container .success,:host(.bg-energized-10) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-warning) .outer-container{background:var(--warning, #ed6e33)}:host(.bg-warning) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--light, #ffffff)}:host(.bg-warning) .outer-container .button-container{padding:0 1rem}:host(.bg-warning) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-warning) .outer-container .button-container .success,:host(.bg-warning) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-warning-10) .outer-container{background:var(--warning-10, rgba(237, 110, 51, 0.1))}:host(.bg-warning-10) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--dark, #000000)}:host(.bg-warning-10) .outer-container .button-container{padding:0 1rem}:host(.bg-warning-10) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-warning-10) .outer-container .button-container .success,:host(.bg-warning-10) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-success) .outer-container{background:var(--success, #3aa76d)}:host(.bg-success) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--light, #ffffff)}:host(.bg-success) .outer-container .button-container{padding:0 1rem}:host(.bg-success) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-success) .outer-container .button-container .success,:host(.bg-success) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-success-10) .outer-container{background:var(--success-10, rgba(58, 167, 109, 0.1))}:host(.bg-success-10) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--dark, #000000)}:host(.bg-success-10) .outer-container .button-container{padding:0 1rem}:host(.bg-success-10) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-success-10) .outer-container .button-container .success,:host(.bg-success-10) .outer-container .button-container .app-color{color:var(--light, #ffffff)}";
 
@@ -35,12 +36,12 @@ const YooToastComponent = class {
     this.dismiss();
   }
   async present() {
-    await index$1.present(this, () => {
+    await overlays.present(this, () => {
       if (this.position === 'bottom') {
-        return index$1.setAnimation('slide_vertical', this.outerContainerDiv, { open: true, up: true }).finished;
+        return overlays.setAnimation('slide_vertical', this.outerContainerDiv, { open: true, up: true }).finished;
       }
       else if (this.position === 'top') {
-        return index$1.setAnimation('slide_vertical', this.outerContainerDiv, { open: true }).finished;
+        return overlays.setAnimation('slide_vertical', this.outerContainerDiv, { open: true }).finished;
       }
     });
     if (this.duration) {
@@ -51,26 +52,26 @@ const YooToastComponent = class {
     if (this.durationTimeout) {
       clearTimeout(this.durationTimeout);
     }
-    return index$1.dismiss(this, data, role, overlayDismiss, () => {
+    return overlays.dismiss(this, data, role, overlayDismiss, () => {
       if (this.position === 'bottom') {
-        return index$1.setAnimation('slide_vertical', this.outerContainerDiv, { open: false, up: true }).finished;
+        return overlays.setAnimation('slide_vertical', this.outerContainerDiv, { open: false, up: true }).finished;
       }
       else if (this.position === 'top') {
-        return index$1.setAnimation('slide_vertical', this.outerContainerDiv, { open: false }).finished;
+        return overlays.setAnimation('slide_vertical', this.outerContainerDiv, { open: false }).finished;
       }
     });
   }
   async onWillPresent(callback) {
-    return overlays.eventMethod(this.host, 'ionToastWillPresent', callback);
+    return overlays$1.eventMethod(this.host, 'ionToastWillPresent', callback);
   }
   async onDidPresent(callback) {
-    return overlays.eventMethod(this.host, 'ionToastDidPresent', callback);
+    return overlays$1.eventMethod(this.host, 'ionToastDidPresent', callback);
   }
   async onWillDismiss(callback) {
-    return overlays.eventMethod(this.host, 'ionToastWillDismiss', callback);
+    return overlays$1.eventMethod(this.host, 'ionToastWillDismiss', callback);
   }
   async onDidDismiss(callback) {
-    return overlays.eventMethod(this.host, 'ionToastDidDismiss', callback);
+    return overlays$1.eventMethod(this.host, 'ionToastDidDismiss', callback);
   }
   componentWillLoad() {
     if (this.progressEvent) {
@@ -79,7 +80,7 @@ const YooToastComponent = class {
       });
     }
     // If we are on web and the position is not specified, we default to showing the toast at the bottom
-    if (index$1.isWeb(this.host) && this.position !== 'top') {
+    if (overlays.isWeb(this.host) && this.position !== 'top') {
       this.position = 'bottom';
     }
   }
@@ -123,7 +124,7 @@ const YooToastComponent = class {
       button = index.h("yoo-icon", { size: "medium", name: extraButton.icon(), color: extraButton.color ? extraButton.color() : 'stable' });
     }
     if (extraButton === null || extraButton === void 0 ? void 0 : extraButton.text) {
-      const text = index$1.translate(extraButton.text());
+      const text = overlays.translate(extraButton.text());
       if (this.disableTooltip) {
         button = text;
       }
@@ -144,8 +145,8 @@ const YooToastComponent = class {
   renderCloseButton() {
     return (index.h("div", { class: { 'button-container': true, 'close-icon-divider': this.closeButtonIcon } }, this.closeButtonIcon ? index.h("yoo-icon", { onClick: () => this.onButtonClick(), color: this.iconColor, name: "cross" })
       : index.h("span", { class: {
-          danger: this.closeButtonText === index$1.translate('CANCEL'),
-          'app-color': this.closeButtonText === index$1.translate('YOOBICVIEW')
+          danger: this.closeButtonText === overlays.translate('CANCEL'),
+          'app-color': this.closeButtonText === overlays.translate('YOOBICVIEW')
         }, onClick: () => this.onButtonClick() }, this.closeButtonText)));
   }
   render() {
@@ -157,10 +158,10 @@ const YooToastComponent = class {
         header: this.position !== 'bottom' && !this.isFormField,
         fullscreen: this.fullscreen,
         ...commonHelpers.getAppContext(this.host)
-      } }, index.h("yoo-swipe-container", { onSwipedUp: () => this.onSwipeUp(), onClick: () => this.onClosableSwipeClick() }, index.h("div", { ref: (el) => (this.outerContainerDiv = el), class: { 'outer-container': true, 'iphone-x': index$1.isIphoneX() }, style: { 'z-index': (20000 + this.overlayId).toString() } }, this.count > -1 && this.renderCount(), this.image && this.renderImage(), this.icon && !this.image && this.renderIcon(), index.h("div", { class: { 'text-container': true, 'full-width': !this.closable, 'sub-messages': ((_a = this.subMessages) === null || _a === void 0 ? void 0 : _a.length) > 0 } }, index.h("yoo-truncate", { maxLength: this.maxLength, content: index$1.translateMulti(this.message) }), (_b = this.subMessages) === null || _b === void 0 ? void 0 :
+      } }, index.h("yoo-swipe-container", { onSwipedUp: () => this.onSwipeUp(), onClick: () => this.onClosableSwipeClick() }, index.h("div", { ref: (el) => (this.outerContainerDiv = el), class: { 'outer-container': true, 'iphone-x': overlays.isIphoneX() }, style: { 'z-index': (20000 + this.overlayId).toString() } }, this.count > -1 && this.renderCount(), this.image && this.renderImage(), this.icon && !this.image && this.renderIcon(), index.h("div", { class: { 'text-container': true, 'full-width': !this.closable, 'sub-messages': ((_a = this.subMessages) === null || _a === void 0 ? void 0 : _a.length) > 0 } }, index.h("yoo-truncate", { maxLength: this.maxLength, content: overlays.translateMulti(this.message) }), (_b = this.subMessages) === null || _b === void 0 ? void 0 :
       _b.map((subMessage) => {
-        return index.h("yoo-truncate", { maxLength: this.maxLength, content: index$1.translateMulti(subMessage) });
-      }), this.link && index.h("span", { class: "link", innerHTML: index$1.translateMulti(this.link) }), this.progressEvent && (this.closable !== false || this.showCloseButton) && this.renderCloseButton()), this.rightMediaSrc && this.rendeMediaImage(), this.extraButtons &&
+        return index.h("yoo-truncate", { maxLength: this.maxLength, content: overlays.translateMulti(subMessage) });
+      }), this.link && index.h("span", { class: "link", innerHTML: overlays.translateMulti(this.link) }), this.progressEvent && (this.closable !== false || this.showCloseButton) && this.renderCloseButton()), this.rightMediaSrc && this.rendeMediaImage(), this.extraButtons &&
       this.extraButtons
         .filter((b) => (b.isVisible ? b.isVisible(this.selection) : true))
         .map((extraButton) => (extraButton.contextMenuActions ? this.renderContextMenu(extraButton) : this.renderExtraButtons(extraButton))), this.closable !== false &&

package/dist/cjs/yoo-tooltip.cjs.entry.js

@@ -2,14 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
-const tippy_esm = require('./tippy.esm-b96d95b7.js');
-const formInputHelpers = require('./form-input-helpers-a04f76d2.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const tippy_esm = require('./tippy.esm-7519a1a1.js');
+const formInputHelpers = require('./form-input-helpers-a2843dc0.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
-require('./common-helpers-6970c46c.js');
+require('./index-de8540eb.js');
+require('./common-helpers-a4efe957.js');
 
 const tooltipCss = ".tippy-box[data-placement^=top]>.tippy-svg-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-svg-arrow:after,.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg{top:16px;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}.tippy-box[data-placement^=left]>.tippy-svg-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-svg-arrow:after,.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg{-webkit-transform:rotate(90deg);transform:rotate(90deg);top:calc(50% - 3px);left:11px}.tippy-box[data-placement^=right]>.tippy-svg-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-svg-arrow:after,.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);top:calc(50% - 3px);right:11px}.tippy-svg-arrow{width:16px;height:16px;fill:#333;text-align:initial}.tippy-svg-arrow,.tippy-svg-arrow>svg{position:absolute}.hidden{display:none !important}.flex{display:-ms-flexbox !important;display:flex !important}.block{display:block !important}:host{display:block}:host .editable-content,:host .request-access{display:none}";
 
@@ -113,12 +114,12 @@ const YooTooltipComponent = class {
     }
   }
   connectedCallback() {
-    const isweb = index$1.isWeb(this.host);
+    const isweb = overlays.isWeb(this.host);
     this.size = this.size || isweb ? 'medium' : 'large';
-    if (index$1.isNullOrUndefined(this.clickable)) {
+    if (overlays.isNullOrUndefined(this.clickable)) {
       this.clickable = !isweb;
     }
-    if (index$1.isNullOrUndefined(this.hoverable)) {
+    if (overlays.isNullOrUndefined(this.hoverable)) {
       this.hoverable = isweb;
     }
     if (this.hoverable !== false && isweb) {
@@ -134,7 +135,7 @@ const YooTooltipComponent = class {
   }
   get tZIndex() {
     //If the tooltip is not inside a modal, we set its zIndex to be lower than the modal
-    return index$1.findParent(this.host, 'yoo-ion-modal') || index$1.findParent(this.host, 'yoo-alert') ? 22000 : 1800;
+    return overlays.findParent(this.host, 'yoo-ion-modal') || overlays.findParent(this.host, 'yoo-alert') ? 22000 : 1800;
   }
   get remainingCharacters() {
     const result = this.maxCharacters - this.editableContent.length;
@@ -280,7 +281,7 @@ const YooTooltipComponent = class {
         }
       }, onFocus: () => {
         formInputHelpers.focusContentEditable(this.contentEditableElement);
-        index$1.enableKeyboardResize();
+        overlays.enableKeyboardResize();
       }, onPaste: (ev) => {
         if (!this.maxCharacters || (this.maxCharacters && this.editableContent.length + ev.clipboardData.getData('Text').length <= this.maxCharacters)) {
           this.onContentChange();
@@ -292,12 +293,12 @@ const YooTooltipComponent = class {
         if (!this.maxCharacters || (this.maxCharacters && this.editableContent.length <= this.maxCharacters)) {
           this.onContentChange();
         }
-      }, ref: (el) => (this.contentEditableElement = el) }), this.maxCharacters && (index.h("div", { class: "maxchar-content" }, index.h("span", { ref: (el) => (this.maxCharactersIndicator = el) }, this.remainingCharacters))), index.h("div", { class: { 'edit-content': true, ...this.getDisplayState(!this.isReadonly) } }, index.h("yoo-icon", { size: "small", name: "delete", color: "stable-alt", onClick: (ev) => this.onClear(ev) }), index.h("yoo-icon", { size: "small", name: "pen", color: "stable-alt", onClick: (ev) => this.onEdit(ev) })), index.h("yoo-button", { disabled: !this.content, size: this.size === 'small' ? 'small' : 'medium', color: this.color || 'app-color', class: { ...this.getDisplayState(this.isReadonly) }, onClick: () => this.saveContent(), ref: (el) => (this.saveButtonElement = el) }, index$1.translate('YOOBICSAVE'))));
+      }, ref: (el) => (this.contentEditableElement = el) }), this.maxCharacters && (index.h("div", { class: "maxchar-content" }, index.h("span", { ref: (el) => (this.maxCharactersIndicator = el) }, this.remainingCharacters))), index.h("div", { class: { 'edit-content': true, ...this.getDisplayState(!this.isReadonly) } }, index.h("yoo-icon", { size: "small", name: "delete", color: "stable-alt", onClick: (ev) => this.onClear(ev) }), index.h("yoo-icon", { size: "small", name: "pen", color: "stable-alt", onClick: (ev) => this.onEdit(ev) })), index.h("yoo-button", { disabled: !this.content, size: this.size === 'small' ? 'small' : 'medium', color: this.color || 'app-color', class: { ...this.getDisplayState(this.isReadonly) }, onClick: () => this.saveContent(), ref: (el) => (this.saveButtonElement = el) }, overlays.translate('YOOBICSAVE'))));
   }
   renderRequestAccess() {
     return (index.h("div", { ref: (el) => (this.editTemplateElement = el), class: {
         'request-access': true
-      } }, index.h("div", { class: "title" }, this.isPublisher ? index$1.translate('YOUAREAPUBLISHER') : index$1.translate('YOUAREAVIEWER')), index.h("div", { class: "sub-title" }, index$1.translate('ASKOWNERACCESS')), this.owner && (index.h("div", { class: "sub-title" }, index$1.translate('OWNER'), ":", index.h("yoo-avatar", { size: "small", imgSrc: this.owner.imageData }), `${this.owner.firstName} ${this.owner.lastName}`))));
+      } }, index.h("div", { class: "title" }, this.isPublisher ? overlays.translate('YOUAREAPUBLISHER') : overlays.translate('YOUAREAVIEWER')), index.h("div", { class: "sub-title" }, overlays.translate('ASKOWNERACCESS')), this.owner && (index.h("div", { class: "sub-title" }, overlays.translate('OWNER'), ":", index.h("yoo-avatar", { size: "small", imgSrc: this.owner.imageData }), `${this.owner.firstName} ${this.owner.lastName}`))));
   }
   render() {
     return (index.h(index.Host, null, index.h("slot", null), this.editable && this.renderEditable(), this.requestAccess && this.renderRequestAccess()));

package/dist/cjs/yoo-truncate.cjs.entry.js

@@ -2,14 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
-const truncateCss = "/*!\n * froala_editor v4.0.11 (https://www.froala.com/wysiwyg-editor)\n * License https://froala.com/wysiwyg-editor/terms/\n * Copyright 2014-2022 Froala Labs\n */.fr-clearfix::after{clear:both;display:block;content:\"\";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.fr-view img.fr-rounded,.fr-view .fr-img-caption.fr-rounded img{border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-view img.fr-shadow,.fr-view .fr-img-caption.fr-shadow img{-webkit-box-shadow:10px 10px 5px 0px #cccccc;-moz-box-shadow:10px 10px 5px 0px #cccccc;box-shadow:10px 10px 5px 0px #cccccc}.fr-view img.fr-bordered,.fr-view .fr-img-caption.fr-bordered img{border:solid 5px #CCC}.fr-view img.fr-bordered{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.fr-view .fr-img-caption.fr-bordered img{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.fr-view{word-wrap:break-word}.fr-view span[style~=\"color:\"] a{color:inherit}.fr-view strong{font-weight:700}.fr-view table[border='0'] td:not([class]),.fr-view table[border='0'] th:not([class]),.fr-view table[border='0'] td[class=\"\"],.fr-view table[border='0'] th[class=\"\"]{border-width:0px}.fr-view table{border:none;border-collapse:collapse;empty-cells:show;max-width:100%}.fr-view table td{min-width:5px}.fr-view table.fr-dashed-borders td,.fr-view table.fr-dashed-borders th{border-style:dashed}.fr-view table.fr-alternate-rows tbody tr:nth-child(2n){background:whitesmoke}.fr-view table td,.fr-view table th{border:1px solid #DDD}.fr-view table td:empty,.fr-view table th:empty{height:20px}.fr-view table td.fr-highlighted,.fr-view table th.fr-highlighted{border:1px double red}.fr-view table td.fr-thick,.fr-view table th.fr-thick{border-width:2px}.fr-view table th{background:#ececec}.fr-view table tfoot td{background:#ececec}.fr-view hr{clear:both;user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;-webkit-column-break-after:always;-moz-column-break-after:always;break-after:always;page-break-after:always}.fr-view .fr-file{position:relative}.fr-view .fr-file::after{position:relative;content:\"\\1F4CE\";font-weight:normal}.fr-view pre{white-space:pre-wrap;word-wrap:break-word;overflow:visible}.fr-view[dir=\"rtl\"] blockquote{border-left:none;border-right:solid 2px #5E35B1;margin-right:0;padding-right:5px;padding-left:0}.fr-view[dir=\"rtl\"] blockquote blockquote{border-color:#00BCD4}.fr-view[dir=\"rtl\"] blockquote blockquote blockquote{border-color:#43A047}.fr-view blockquote{border-left:solid 2px #5E35B1;margin-left:0;padding-left:5px;color:#5E35B1}.fr-view blockquote blockquote{border-color:#00BCD4;color:#00BCD4}.fr-view blockquote blockquote blockquote{border-color:#43A047;color:#43A047}.fr-view span.fr-emoticon{font-weight:normal;font-family:\"Apple Color Emoji\",\"Segoe UI Emoji\",\"NotoColorEmoji\",\"Segoe UI Symbol\",\"Android Emoji\",\"EmojiSymbols\";display:inline;line-height:0}.fr-view span.fr-emoticon.fr-emoticon-img{background-repeat:no-repeat !important;font-size:inherit;height:1em;width:1em;min-height:20px;min-width:20px;display:inline-block;margin:-.1em .1em .1em;line-height:1;vertical-align:middle}.fr-view .fr-text-gray{color:#AAA !important}.fr-view .fr-text-bordered{border-top:solid 1px #222;border-bottom:solid 1px #222;padding:10px 0}.fr-view .fr-text-spaced{letter-spacing:1px}.fr-view .fr-text-uppercase{text-transform:uppercase}.fr-view .fr-class-highlighted{background-color:#ffff00}.fr-view .fr-class-code{border-color:#cccccc;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;background:#f5f5f5;padding:10px;font-family:\"Courier New\", Courier, monospace}.fr-view .fr-class-transparency{opacity:0.5}.fr-view img{position:relative;max-width:100%}.fr-view img.fr-dib{margin:5px auto;display:block;float:none;vertical-align:top}.fr-view img.fr-dib.fr-fil{margin-left:0;text-align:left}.fr-view img.fr-dib.fr-fir{margin-right:0;text-align:right}.fr-view img.fr-dii{display:inline-block;float:none;vertical-align:bottom;margin-left:5px;margin-right:5px;max-width:calc(100% - (2 * 5px))}.fr-view img.fr-dii.fr-fil{float:left;margin:5px 5px 5px 0;max-width:calc(100% - 5px)}.fr-view img.fr-dii.fr-fir{float:right;margin:5px 0 5px 5px;max-width:calc(100% - 5px)}.fr-view span.fr-img-caption{position:relative;max-width:100%}.fr-view span.fr-img-caption.fr-dib{margin:5px auto;display:block;float:none;vertical-align:top}.fr-view span.fr-img-caption.fr-dib.fr-fil{margin-left:0;text-align:left}.fr-view span.fr-img-caption.fr-dib.fr-fir{margin-right:0;text-align:right}.fr-view span.fr-img-caption.fr-dii{display:inline-block;float:none;vertical-align:bottom;margin-left:5px;margin-right:5px;max-width:calc(100% - (2 * 5px))}.fr-view span.fr-img-caption.fr-dii.fr-fil{float:left;margin:5px 5px 5px 0;max-width:calc(100% - 5px)}.fr-view span.fr-img-caption.fr-dii.fr-fir{float:right;margin:5px 0 5px 5px;max-width:calc(100% - 5px)}.fr-view .fr-video{text-align:center;position:relative}.fr-view .fr-video.fr-rv{padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden}.fr-view .fr-video.fr-rv>iframe,.fr-view .fr-video.fr-rv object,.fr-view .fr-video.fr-rv embed{position:absolute !important;top:0;left:0;width:100%;height:100%}.fr-view .fr-video>*{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;max-width:100%;border:none}.fr-view .fr-video.fr-dvb{display:block;clear:both}.fr-view .fr-video.fr-dvb.fr-fvl{text-align:left}.fr-view .fr-video.fr-dvb.fr-fvr{text-align:right}.fr-view .fr-video.fr-dvi{display:inline-block}.fr-view .fr-video.fr-dvi.fr-fvl{float:left}.fr-view .fr-video.fr-dvi.fr-fvr{float:right}.fr-view a.fr-strong{font-weight:700}.fr-view a.fr-green{color:green}.fr-view .fr-img-caption{text-align:center}.fr-view .fr-img-caption .fr-img-wrap{padding:0;margin:auto;text-align:center;width:100%}.fr-view .fr-img-caption .fr-img-wrap a{display:block}.fr-view .fr-img-caption .fr-img-wrap img{display:block;margin:auto;width:100%}.fr-view .fr-img-caption .fr-img-wrap>span{margin:auto;display:block;padding:5px 5px 10px;font-size:14px;font-weight:initial;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-opacity:0.9;-moz-opacity:0.9;opacity:0.9;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";width:100%;text-align:center}.fr-view button.fr-rounded,.fr-view input.fr-rounded,.fr-view textarea.fr-rounded{border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-view button.fr-large,.fr-view input.fr-large,.fr-view textarea.fr-large{font-size:24px}a.fr-view.fr-strong{font-weight:700}a.fr-view.fr-green{color:green}img.fr-view{position:relative;max-width:100%}img.fr-view.fr-dib{margin:5px auto;display:block;float:none;vertical-align:top}img.fr-view.fr-dib.fr-fil{margin-left:0;text-align:left}img.fr-view.fr-dib.fr-fir{margin-right:0;text-align:right}img.fr-view.fr-dii{display:inline-block;float:none;vertical-align:bottom;margin-left:5px;margin-right:5px;max-width:calc(100% - (2 * 5px))}img.fr-view.fr-dii.fr-fil{float:left;margin:5px 5px 5px 0;max-width:calc(100% - 5px)}img.fr-view.fr-dii.fr-fir{float:right;margin:5px 0 5px 5px;max-width:calc(100% - 5px)}span.fr-img-caption.fr-view{position:relative;max-width:100%}span.fr-img-caption.fr-view.fr-dib{margin:5px auto;display:block;float:none;vertical-align:top}span.fr-img-caption.fr-view.fr-dib.fr-fil{margin-left:0;text-align:left}span.fr-img-caption.fr-view.fr-dib.fr-fir{margin-right:0;text-align:right}span.fr-img-caption.fr-view.fr-dii{display:inline-block;float:none;vertical-align:bottom;margin-left:5px;margin-right:5px;max-width:calc(100% - (2 * 5px))}span.fr-img-caption.fr-view.fr-dii.fr-fil{float:left;margin:5px 5px 5px 0;max-width:calc(100% - 5px)}span.fr-img-caption.fr-view.fr-dii.fr-fir{float:right;margin:5px 0 5px 5px;max-width:calc(100% - 5px)}.hidden{display:none !important}.flex{display:-ms-flexbox !important;display:flex !important}.block{display:block !important}:host{--max-lines:1;--line-height:var(--spacing-24, 1.5rem);display:block}.outer-container{position:relative}.fr-view blockquote{color:var(--dark, #000000) !important}.classic-truncate{overflow:hidden;line-height:var(--line-height);visibility:visible}@supports (display: -webkit-box){.classic-truncate{display:-webkit-box;-webkit-line-clamp:var(--max-lines);-webkit-box-orient:vertical}}@supports not (display: -webkit-box){.classic-truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-height:calc(var(--line-height) * var(--max-lines))}}.markdown-truncate{width:100%;overflow:hidden}.markdown-truncate html,.markdown-truncate body,.markdown-truncate div:not([class^=fr-]),.markdown-truncate span:not([class^=fr-]),.markdown-truncate img:not([class^=fr-]),.markdown-truncate applet,.markdown-truncate object,.markdown-truncate iframe,.markdown-truncate h1,.markdown-truncate h2,.markdown-truncate h3,.markdown-truncate h4,.markdown-truncate h5,.markdown-truncate h6,.markdown-truncate p,.markdown-truncate blockquote,.markdown-truncate pre,.markdown-truncate a,.markdown-truncate abbr,.markdown-truncate acronym,.markdown-truncate address,.markdown-truncate big,.markdown-truncate cite,.markdown-truncate code,.markdown-truncate del,.markdown-truncate dfn,.markdown-truncate em,.markdown-truncate font,.markdown-truncate ins,.markdown-truncate kbd,.markdown-truncate q,.markdown-truncate s,.markdown-truncate samp,.markdown-truncate small,.markdown-truncate strike,.markdown-truncate strong,.markdown-truncate sub,.markdown-truncate sup,.markdown-truncate tt,.markdown-truncate var,.markdown-truncate dl,.markdown-truncate dt,.markdown-truncate dd,.markdown-truncate ol,.markdown-truncate ul,.markdown-truncate li,.markdown-truncate fieldset,.markdown-truncate form,.markdown-truncate label,.markdown-truncate legend,.markdown-truncate table,.markdown-truncate caption,.markdown-truncate tbody,.markdown-truncate tfoot,.markdown-truncate thead,.markdown-truncate tr,.markdown-truncate th{margin:0;padding:0;font-weight:inherit;font-size:100%;font-family:inherit;font-style:inherit;vertical-align:baseline;border:0;outline:0;-webkit-margin-before:0;-webkit-margin-after:0;-webkit-margin-start:0;-webkit-margin-end:0}.markdown-truncate blockquote{padding-left:1rem;border-left:var(--border-width-04, 0.25rem) solid var(--stable, #adadad)}.markdown-truncate blockquote:last-of-type blockquote p:last-of-type,.markdown-truncate p:last-of-type{padding-top:0;padding-bottom:0}.markdown-truncate ol,.markdown-truncate ul{margin:revert;padding:revert}.markdown-truncate h1{display:block;margin-top:0.67em;margin-right:0;margin-bottom:0.67em;margin-left:0;font-weight:bold;font-size:2em}.markdown-truncate h2{display:block;margin-top:0.83em;margin-right:0;margin-bottom:0.83em;margin-left:0;font-weight:bold;font-size:1.5em}.markdown-truncate h3{display:block;margin-top:1em;margin-right:0;margin-bottom:1em;margin-left:0;font-weight:bold;font-size:1.17em}.markdown-truncate h4{display:block;margin-top:1.33em;margin-right:0;margin-bottom:1.33em;margin-left:0;font-weight:bold}.markdown-truncate h5{display:block;margin-top:1.67em;margin-right:0;margin-bottom:1.67em;margin-left:0;font-weight:bold;font-size:0.83em}.markdown-truncate h6{display:block;margin-top:2.33em;margin-right:0;margin-bottom:2.33em;margin-left:0;font-weight:bold;font-size:0.67em}.markdown-truncate strong{font-weight:bold}.markdown-truncate em{font-style:italic}.more-button{color:var(--stable, #adadad);font-size:var(--font-size-14, 0.875rem) !important;font-family:var(--font-family, \"Lato\") !important;white-space:nowrap;cursor:pointer}:host(.grid) .classic-truncate{white-space:normal}:host(.expanded) .more-button{display:-ms-flexbox;display:flex}:host([show-ellipsis-icon]) .outer-container{position:relative}:host([show-ellipsis-icon]) .outer-container p{display:-ms-flexbox;display:flex}:host([show-ellipsis-icon]) .outer-container p span{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host([show-ellipsis-icon]) .outer-container p span yoo-icon{margin-left:var(--spacing-08, 0.5rem)}:host(.app-color) .more-button{color:var(--app-color, #5a30f4)}:host(.force-more){display:-ms-flexbox;display:flex}:host(.force-more) .more-button{margin-right:var(--spacing-08, 0.5rem);color:var(--app-color, #5a30f4);text-decoration:underline}:host(.force-more.expanded) .more-button{-ms-flex-item-align:end;align-self:flex-end}:host(.card-feeds) .more-button{color:var(--stable, #adadad)}.fr-view h1,.fr-view h2,.fr-view h3,.fr-view h4,.fr-view h5,.fr-view h6{margin:0;padding:0;border:0}";
+const truncateCss = "/*!\n * froala_editor v4.0.12 (https://www.froala.com/wysiwyg-editor)\n * License https://froala.com/wysiwyg-editor/terms/\n * Copyright 2014-2022 Froala Labs\n */.fr-clearfix::after{clear:both;display:block;content:\"\";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.fr-view img.fr-rounded,.fr-view .fr-img-caption.fr-rounded img{border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-view img.fr-shadow,.fr-view .fr-img-caption.fr-shadow img{-webkit-box-shadow:10px 10px 5px 0px #cccccc;-moz-box-shadow:10px 10px 5px 0px #cccccc;box-shadow:10px 10px 5px 0px #cccccc}.fr-view img.fr-bordered,.fr-view .fr-img-caption.fr-bordered img{border:solid 5px #CCC}.fr-view img.fr-bordered{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.fr-view .fr-img-caption.fr-bordered img{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.fr-view{word-wrap:break-word}.fr-view span[style~=\"color:\"] a{color:inherit}.fr-view strong{font-weight:700}.fr-view table[border='0'] td:not([class]),.fr-view table[border='0'] th:not([class]),.fr-view table[border='0'] td[class=\"\"],.fr-view table[border='0'] th[class=\"\"]{border-width:0px}.fr-view table{border:none;border-collapse:collapse;empty-cells:show;max-width:100%}.fr-view table td{min-width:5px}.fr-view table.fr-dashed-borders td,.fr-view table.fr-dashed-borders th{border-style:dashed}.fr-view table.fr-alternate-rows tbody tr:nth-child(2n){background:whitesmoke}.fr-view table td,.fr-view table th{border:1px solid #DDD}.fr-view table td:empty,.fr-view table th:empty{height:20px}.fr-view table td.fr-highlighted,.fr-view table th.fr-highlighted{border:1px double red}.fr-view table td.fr-thick,.fr-view table th.fr-thick{border-width:2px}.fr-view table th{background:#ececec}.fr-view table tfoot td{background:#ececec}.fr-view hr{clear:both;user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;-webkit-column-break-after:always;-moz-column-break-after:always;break-after:always;page-break-after:always}.fr-view .fr-file{position:relative}.fr-view .fr-file::after{position:relative;content:\"\\1F4CE\";font-weight:normal}.fr-view pre{white-space:pre-wrap;word-wrap:break-word;overflow:visible}.fr-view[dir=\"rtl\"] blockquote{border-left:none;border-right:solid 2px #5E35B1;margin-right:0;padding-right:5px;padding-left:0}.fr-view[dir=\"rtl\"] blockquote blockquote{border-color:#00BCD4}.fr-view[dir=\"rtl\"] blockquote blockquote blockquote{border-color:#43A047}.fr-view blockquote{border-left:solid 2px #5E35B1;margin-left:0;padding-left:5px;color:#5E35B1}.fr-view blockquote blockquote{border-color:#00BCD4;color:#00BCD4}.fr-view blockquote blockquote blockquote{border-color:#43A047;color:#43A047}.fr-view span.fr-emoticon{font-weight:normal;font-family:\"Apple Color Emoji\",\"Segoe UI Emoji\",\"NotoColorEmoji\",\"Segoe UI Symbol\",\"Android Emoji\",\"EmojiSymbols\";display:inline;line-height:0}.fr-view span.fr-emoticon.fr-emoticon-img{background-repeat:no-repeat !important;font-size:inherit;height:1em;width:1em;min-height:20px;min-width:20px;display:inline-block;margin:-.1em .1em .1em;line-height:1;vertical-align:middle}.fr-view .fr-text-gray{color:#AAA !important}.fr-view .fr-text-bordered{border-top:solid 1px #222;border-bottom:solid 1px #222;padding:10px 0}.fr-view .fr-text-spaced{letter-spacing:1px}.fr-view .fr-text-uppercase{text-transform:uppercase}.fr-view .fr-class-highlighted{background-color:#ffff00}.fr-view .fr-class-code{border-color:#cccccc;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;background:#f5f5f5;padding:10px;font-family:\"Courier New\", Courier, monospace}.fr-view .fr-class-transparency{opacity:0.5}.fr-view img{position:relative;max-width:100%}.fr-view img.fr-dib{margin:5px auto;display:block;float:none;vertical-align:top}.fr-view img.fr-dib.fr-fil{margin-left:0;text-align:left}.fr-view img.fr-dib.fr-fir{margin-right:0;text-align:right}.fr-view img.fr-dii{display:inline-block;float:none;vertical-align:bottom;margin-left:5px;margin-right:5px;max-width:calc(100% - (2 * 5px))}.fr-view img.fr-dii.fr-fil{float:left;margin:5px 5px 5px 0;max-width:calc(100% - 5px)}.fr-view img.fr-dii.fr-fir{float:right;margin:5px 0 5px 5px;max-width:calc(100% - 5px)}.fr-view span.fr-img-caption{position:relative;max-width:100%}.fr-view span.fr-img-caption.fr-dib{margin:5px auto;display:block;float:none;vertical-align:top}.fr-view span.fr-img-caption.fr-dib.fr-fil{margin-left:0;text-align:left}.fr-view span.fr-img-caption.fr-dib.fr-fir{margin-right:0;text-align:right}.fr-view span.fr-img-caption.fr-dii{display:inline-block;float:none;vertical-align:bottom;margin-left:5px;margin-right:5px;max-width:calc(100% - (2 * 5px))}.fr-view span.fr-img-caption.fr-dii.fr-fil{float:left;margin:5px 5px 5px 0;max-width:calc(100% - 5px)}.fr-view span.fr-img-caption.fr-dii.fr-fir{float:right;margin:5px 0 5px 5px;max-width:calc(100% - 5px)}.fr-view .fr-video{text-align:center;position:relative}.fr-view .fr-video.fr-rv{padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden}.fr-view .fr-video.fr-rv>iframe,.fr-view .fr-video.fr-rv object,.fr-view .fr-video.fr-rv embed{position:absolute !important;top:0;left:0;width:100%;height:100%}.fr-view .fr-video>*{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;max-width:100%;border:none}.fr-view .fr-video.fr-dvb{display:block;clear:both}.fr-view .fr-video.fr-dvb.fr-fvl{text-align:left}.fr-view .fr-video.fr-dvb.fr-fvr{text-align:right}.fr-view .fr-video.fr-dvi{display:inline-block}.fr-view .fr-video.fr-dvi.fr-fvl{float:left}.fr-view .fr-video.fr-dvi.fr-fvr{float:right}.fr-view a.fr-strong{font-weight:700}.fr-view a.fr-green{color:green}.fr-view .fr-img-caption{text-align:center}.fr-view .fr-img-caption .fr-img-wrap{padding:0;margin:auto;text-align:center;width:100%}.fr-view .fr-img-caption .fr-img-wrap a{display:block}.fr-view .fr-img-caption .fr-img-wrap img{display:block;margin:auto;width:100%}.fr-view .fr-img-caption .fr-img-wrap>span{margin:auto;display:block;padding:5px 5px 10px;font-size:14px;font-weight:initial;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-opacity:0.9;-moz-opacity:0.9;opacity:0.9;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";width:100%;text-align:center}.fr-view button.fr-rounded,.fr-view input.fr-rounded,.fr-view textarea.fr-rounded{border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-view button.fr-large,.fr-view input.fr-large,.fr-view textarea.fr-large{font-size:24px}a.fr-view.fr-strong{font-weight:700}a.fr-view.fr-green{color:green}img.fr-view{position:relative;max-width:100%}img.fr-view.fr-dib{margin:5px auto;display:block;float:none;vertical-align:top}img.fr-view.fr-dib.fr-fil{margin-left:0;text-align:left}img.fr-view.fr-dib.fr-fir{margin-right:0;text-align:right}img.fr-view.fr-dii{display:inline-block;float:none;vertical-align:bottom;margin-left:5px;margin-right:5px;max-width:calc(100% - (2 * 5px))}img.fr-view.fr-dii.fr-fil{float:left;margin:5px 5px 5px 0;max-width:calc(100% - 5px)}img.fr-view.fr-dii.fr-fir{float:right;margin:5px 0 5px 5px;max-width:calc(100% - 5px)}span.fr-img-caption.fr-view{position:relative;max-width:100%}span.fr-img-caption.fr-view.fr-dib{margin:5px auto;display:block;float:none;vertical-align:top}span.fr-img-caption.fr-view.fr-dib.fr-fil{margin-left:0;text-align:left}span.fr-img-caption.fr-view.fr-dib.fr-fir{margin-right:0;text-align:right}span.fr-img-caption.fr-view.fr-dii{display:inline-block;float:none;vertical-align:bottom;margin-left:5px;margin-right:5px;max-width:calc(100% - (2 * 5px))}span.fr-img-caption.fr-view.fr-dii.fr-fil{float:left;margin:5px 5px 5px 0;max-width:calc(100% - 5px)}span.fr-img-caption.fr-view.fr-dii.fr-fir{float:right;margin:5px 0 5px 5px;max-width:calc(100% - 5px)}.hidden{display:none !important}.flex{display:-ms-flexbox !important;display:flex !important}.block{display:block !important}:host{--max-lines:1;--line-height:var(--spacing-24, 1.5rem);display:block}.outer-container{position:relative}.fr-view blockquote{color:var(--dark, #000000) !important}.classic-truncate{overflow:hidden;line-height:var(--line-height);visibility:visible}@supports (display: -webkit-box){.classic-truncate{display:-webkit-box;-webkit-line-clamp:var(--max-lines);-webkit-box-orient:vertical}}@supports not (display: -webkit-box){.classic-truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-height:calc(var(--line-height) * var(--max-lines))}}.markdown-truncate{width:100%;overflow:hidden}.markdown-truncate html,.markdown-truncate body,.markdown-truncate div:not([class^=fr-]),.markdown-truncate span:not([class^=fr-]),.markdown-truncate img:not([class^=fr-]),.markdown-truncate applet,.markdown-truncate object,.markdown-truncate iframe,.markdown-truncate h1,.markdown-truncate h2,.markdown-truncate h3,.markdown-truncate h4,.markdown-truncate h5,.markdown-truncate h6,.markdown-truncate p,.markdown-truncate blockquote,.markdown-truncate pre,.markdown-truncate a,.markdown-truncate abbr,.markdown-truncate acronym,.markdown-truncate address,.markdown-truncate big,.markdown-truncate cite,.markdown-truncate code,.markdown-truncate del,.markdown-truncate dfn,.markdown-truncate em,.markdown-truncate font,.markdown-truncate ins,.markdown-truncate kbd,.markdown-truncate q,.markdown-truncate s,.markdown-truncate samp,.markdown-truncate small,.markdown-truncate strike,.markdown-truncate strong,.markdown-truncate sub,.markdown-truncate sup,.markdown-truncate tt,.markdown-truncate var,.markdown-truncate dl,.markdown-truncate dt,.markdown-truncate dd,.markdown-truncate ol,.markdown-truncate ul,.markdown-truncate li,.markdown-truncate fieldset,.markdown-truncate form,.markdown-truncate label,.markdown-truncate legend,.markdown-truncate table,.markdown-truncate caption,.markdown-truncate tbody,.markdown-truncate tfoot,.markdown-truncate thead,.markdown-truncate tr,.markdown-truncate th{margin:0;padding:0;font-weight:inherit;font-size:100%;font-family:inherit;font-style:inherit;vertical-align:baseline;border:0;outline:0;-webkit-margin-before:0;-webkit-margin-after:0;-webkit-margin-start:0;-webkit-margin-end:0}.markdown-truncate blockquote{padding-left:1rem;border-left:var(--border-width-04, 0.25rem) solid var(--stable, #adadad)}.markdown-truncate blockquote:last-of-type blockquote p:last-of-type,.markdown-truncate p:last-of-type{padding-top:0;padding-bottom:0}.markdown-truncate ol,.markdown-truncate ul{margin:revert;padding:revert}.markdown-truncate h1{display:block;margin-top:0.67em;margin-right:0;margin-bottom:0.67em;margin-left:0;font-weight:bold;font-size:2em}.markdown-truncate h2{display:block;margin-top:0.83em;margin-right:0;margin-bottom:0.83em;margin-left:0;font-weight:bold;font-size:1.5em}.markdown-truncate h3{display:block;margin-top:1em;margin-right:0;margin-bottom:1em;margin-left:0;font-weight:bold;font-size:1.17em}.markdown-truncate h4{display:block;margin-top:1.33em;margin-right:0;margin-bottom:1.33em;margin-left:0;font-weight:bold}.markdown-truncate h5{display:block;margin-top:1.67em;margin-right:0;margin-bottom:1.67em;margin-left:0;font-weight:bold;font-size:0.83em}.markdown-truncate h6{display:block;margin-top:2.33em;margin-right:0;margin-bottom:2.33em;margin-left:0;font-weight:bold;font-size:0.67em}.markdown-truncate strong{font-weight:bold}.markdown-truncate em{font-style:italic}.more-button{color:var(--stable, #adadad);font-size:var(--font-size-14, 0.875rem) !important;font-family:var(--font-family, \"Lato\") !important;white-space:nowrap;cursor:pointer}:host(.grid) .classic-truncate{white-space:normal}:host(.expanded) .more-button{display:-ms-flexbox;display:flex}:host([show-ellipsis-icon]) .outer-container{position:relative}:host([show-ellipsis-icon]) .outer-container p{display:-ms-flexbox;display:flex}:host([show-ellipsis-icon]) .outer-container p span{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host([show-ellipsis-icon]) .outer-container p span yoo-icon{margin-left:var(--spacing-08, 0.5rem)}:host(.app-color) .more-button{color:var(--app-color, #5a30f4)}:host(.force-more){display:-ms-flexbox;display:flex}:host(.force-more) .more-button{margin-right:var(--spacing-08, 0.5rem);color:var(--app-color, #5a30f4);text-decoration:underline}:host(.force-more.expanded) .more-button{-ms-flex-item-align:end;align-self:flex-end}:host(.card-feeds) .more-button{color:var(--stable, #adadad)}.fr-view h1,.fr-view h2,.fr-view h3,.fr-view h4,.fr-view h5,.fr-view h6{margin:0;padding:0;border:0}";
 
 const YooTruncateComponent = class {
   constructor(hostRef) {
@@ -59,10 +60,10 @@ const YooTruncateComponent = class {
     };
     this.truncateContentCollapsed = (text) => {
       const ellipsis = this.getEllipsisContent();
-      return index$1.truncateMarkdown(text, this.maxLength, ellipsis, this.byWords, this.replaceBreakWithClosed);
+      return overlays.truncateMarkdown(text, this.maxLength, ellipsis, this.byWords, this.replaceBreakWithClosed);
     };
     this.getMoreButtonHtml = () => {
-      return `<span class="more-button"> ${this.collapsed ? `... ${index$1.translate('MORE2')}` : index$1.translate('VIEWLESS')}</span>`;
+      return `<span class="more-button"> ${this.collapsed ? `... ${overlays.translate('MORE2')}` : overlays.translate('VIEWLESS')}</span>`;
     };
     this.getMoreIconHtml = () => {
       return `<span><span>${this.collapsed ? '...' : ''}</span><yoo-icon class="more-button" name=${this.collapsed ? 'arrow-down' : 'arrow-up'} size="${this.ellipsisIconSize}" /></span>`;
@@ -74,7 +75,7 @@ const YooTruncateComponent = class {
   onForceMoreButtonDisplayContentChanged() {
     this.showEllipsisButtonInternal = this.isEllipsisActive();
     if (!this.resizeListener) {
-      this.resizeListener = index$1.debounce(this.updateShowEllipsisButton, 500).bind(this);
+      this.resizeListener = overlays.debounce(this.updateShowEllipsisButton, 500).bind(this);
       window.addEventListener('resize', this.resizeListener);
       window.addEventListener('screenSizeWillChange', this.resizeListener);
     }
@@ -132,7 +133,7 @@ const YooTruncateComponent = class {
       truncateContent = this.truncateContentCollapsed(content);
     }
     else {
-      truncateContent = index$1.parseMarkDown(content + this.getEllipsisContent(), this.replaceBreakWithClosed);
+      truncateContent = overlays.parseMarkDown(content + this.getEllipsisContent(), this.replaceBreakWithClosed);
     }
     return truncateContent;
   }
@@ -141,7 +142,7 @@ const YooTruncateComponent = class {
     return (index.h("span", { class: hostClass, innerHTML: this.content ? this.truncateContent : '', ref: (el) => (this.textContainer = el) }, !this.content && index.h("slot", null)));
   }
   render() {
-    return (index.h(index.Host, { class: { expanded: !this.collapsed, 'force-more': this.showEllipsisButtonInternal && (this.forceMoreButtonDisplayContent !== undefined || this.forceMoreButtonDisplayContent !== null) } }, this.renderTruncate(), !this.content && this.showEllipsisButtonInternal && index.h("span", { onClick: (e) => this.toggleCollapse(e), class: "more-button" }, this.collapsed ? index$1.translate('MARKAS') : index$1.translate('VIEWLESS'))));
+    return (index.h(index.Host, { class: { expanded: !this.collapsed, 'force-more': this.showEllipsisButtonInternal && (this.forceMoreButtonDisplayContent !== undefined || this.forceMoreButtonDisplayContent !== null) } }, this.renderTruncate(), !this.content && this.showEllipsisButtonInternal && index.h("span", { onClick: (e) => this.toggleCollapse(e), class: "more-button" }, this.collapsed ? overlays.translate('MARKAS') : overlays.translate('VIEWLESS'))));
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/yoo-truncated-line.cjs.entry.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const truncatedLineCss = ":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}";
 
@@ -23,7 +24,7 @@ const YooTruncatedLineComponent = class {
       return (index.h("yoo-tooltip", { ref: (el) => this.tooltipElement = el, content: this.content, placement: this.tooltipPlacement }, this.renderContent()));
     };
     this.renderContent = () => {
-      return (index.h("div", { class: "content", ref: (el) => this.contentElement = el }, index$1.translateMulti(this.content), index.h("slot", null)));
+      return (index.h("div", { class: "content", ref: (el) => this.contentElement = el }, overlays.translateMulti(this.content), index.h("slot", null)));
     };
     this.toggleTooltip = (isEnabled) => {
       if (this.tooltipElement) {
@@ -32,7 +33,7 @@ const YooTruncatedLineComponent = class {
     };
   }
   componentDidLoad() {
-    this.contentElement && this.toggleTooltip(index$1.isTruncated(this.contentElement));
+    this.contentElement && this.toggleTooltip(overlays.isTruncated(this.contentElement));
   }
   render() {
     return (index.h(index.Host, null, !this.withTooltip ? this.renderContent() : this.renderContentWithTooltip()));

package/dist/cjs/yoo-user-detail.cjs.entry.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const userDetailCss = ".text-extra-small{font-size:var(--font-size-12, 0.75rem) !important}.text-small{font-size:var(--font-size-14, 0.875rem) !important}.text-medium{font-size:var(--font-size-16, 1rem) !important}.text-large{font-size:var(--font-size-18, 1.125rem) !important}.text-extra-large{font-size:var(--font-size-36, 2.25rem) !important}.text-extra-extra-large{font-size:var(--font-size-54, 3.375rem) !important}:host yoo-grid div[slot=header]{display:-ms-flexbox;display:flex;min-height:var(--spacing-40, 2.5rem)}:host yoo-grid div[slot=header] .title{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}:host yoo-grid div[slot=header] .action{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;margin-left:auto;padding-right:1rem;color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);cursor:pointer}:host yoo-grid div[slot=header] .total-number{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;padding-left:0.2rem;color:var(--stable, #adadad)}:host yoo-grid div[slot=header].profile-summary{padding-left:var(--spacing-16, 1rem);font-size:14px}:host yoo-grid div[slot=header].profile-summary .title{font-weight:var(--font-weight-700, 700);text-transform:uppercase}:host yoo-grid div[slot=header].profile-summary .total-number{color:var(--dark, #000000)}:host yoo-grid div[slot=header].profile-summary .action{font-size:var(--font-size-16, 1rem)}:host yoo-grid div[slot=header].profile-summary.web{padding-left:0}:host yoo-grid.badges{margin-bottom:var(--spacing-16, 1rem)}:host .courses-empty{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;margin:var(--spacing-16, 1rem);padding:var(--spacing-32, 2rem);background:var(--light, #ffffff);border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1))}:host .courses-empty .empty-text{padding:var(--spacing-16, 1rem) 0;color:var(--text-color, #807f83)}:host .courses-empty yoo-empty-state{height:10rem}";
 
@@ -39,7 +40,7 @@ const YooUserDetailComponent = class {
       return this.renderGrid(this.courses, 'card-course', 'medium', 'courses', (ev) => this.onSelectCourse(ev), () => this.onSeeAllCourses(), className, true);
     }
     else if (this.showEmptyState) {
-      return index.h("div", { class: "courses-empty" }, index.h("yoo-empty-state", { type: "courses" }), index.h("div", { class: "empty-text" }, index$1.translate('NOONGOINGCOURSES')), index.h("yoo-button", { class: "auto", color: "app-color", onClick: () => this.onSeeAllCourses() }, index$1.translate('SEEALLCOURSES')));
+      return index.h("div", { class: "courses-empty" }, index.h("yoo-empty-state", { type: "courses" }), index.h("div", { class: "empty-text" }, overlays.translate('NOONGOINGCOURSES')), index.h("yoo-button", { class: "auto", color: "app-color", onClick: () => this.onSeeAllCourses() }, overlays.translate('SEEALLCOURSES')));
     }
   }
   renderUserBadges() {
@@ -64,7 +65,7 @@ const YooUserDetailComponent = class {
         hideHeader: true,
         withoutGradient: this.withoutGradient
       };
-      return (index.h("yoo-grid", { ...attrs, class: "profile" }, index.h("div", { slot: "header", class: { 'profile-summary': true, 'web': index$1.isWeb(this.host) } }, index.h("div", { class: "title" }, index$1.translate(entityType.toLocaleUpperCase())), entityType === 'badges' && index.h("div", { class: "total-number" }, items === null || items === void 0 ? void 0 : items.length), index.h("div", { class: "action", onClick: () => gridHandler() }, index$1.translate('YOOBICSEEALL')))));
+      return (index.h("yoo-grid", { ...attrs, class: "profile" }, index.h("div", { slot: "header", class: { 'profile-summary': true, 'web': overlays.isWeb(this.host) } }, index.h("div", { class: "title" }, overlays.translate(entityType.toLocaleUpperCase())), entityType === 'badges' && index.h("div", { class: "total-number" }, items === null || items === void 0 ? void 0 : items.length), index.h("div", { class: "action", onClick: () => gridHandler() }, overlays.translate('YOOBICSEEALL')))));
     }
   }
   render() {

package/dist/cjs/yoo-user-profile.cjs.entry.js

@@ -2,13 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
-const entitiesHelpers = require('./entities-helpers-66375a12.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+const entitiesHelpers = require('./entities-helpers-2edf446a.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const userProfileCss = ":host{height:100%;font-weight:var(--font-weight-400, 400);font-size:var(--font-size-18, 1.125rem)}:host .profile-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between}:host .profile-content .profile-user{margin-top:0.5rem;margin-bottom:3rem;text-align:center}:host .profile-content .profile-user .profile-user-name{line-height:1.3125rem}:host .profile-content .profile-user .profile-user-role{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-14, 0.875rem);line-height:1rem}:host .profile-content .profile-user yoo-avatar{margin:auto}:host .profile-content .profile-links{padding-left:1rem}:host .profile-content .profile-links .profile-links-title{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;height:1.875rem;color:var(--stable, #adadad)}:host .profile-content .profile-links .profile-links-menu{margin:0;padding:0;font-size:100%;vertical-align:baseline;list-style:none outside none;background:none repeat scroll 0 0 transparent;border:0 none;outline:0 none;-webkit-tap-highlight-color:transparent;margin:0;padding:0;list-style:none;cursor:pointer}:host .profile-content .profile-links .profile-links-menu .profile-links-menu-item{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:auto;min-height:2.6875rem;font-weight:var(--font-weight-400, 400);line-height:36px;border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);cursor:pointer}:host .profile-content .profile-links .profile-links-menu .profile-links-menu-item>div{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .profile-content .profile-links .profile-links-menu .profile-links-menu-item:last-child{margin-bottom:0.5rem;border-bottom:none}:host .profile-content.advanced{-ms-flex-pack:left;justify-content:left}:host .profile-content.advanced .profile-title{padding:var(--spacing-16, 1rem) var(--spacing-16, 1rem) 0 var(--spacing-16, 1rem);font-weight:var(--font-weight-700, 700)}:host .profile-content.advanced .profile-links .profile-links-menu .border-bottom{border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);cursor:auto}:host .profile-content.advanced .profile-links .profile-links-menu .border-bottom>div{display:-ms-flexbox;display:flex}:host .profile-content.advanced .profile-links .profile-links-menu .profile-links-menu-item{-ms-flex-pack:left;justify-content:left;margin-right:var(--spacing-16, 1rem);margin-bottom:var(--spacing-04, 0.25rem);font-size:var(--font-size-16, 1rem);cursor:auto}:host .profile-content.advanced .profile-links .profile-links-menu .multiple-items-margin{margin-right:var(--spacing-16, 1rem);line-height:1.5}:host .profile-content.advanced .profile-links .profile-links-menu yoo-avatar{margin-right:var(--spacing-08, 0.5rem)}:host .profile-content.advanced .profile-links .profile-links-menu .profile-links-menu-title{padding-top:var(--spacing-16, 1rem);font-size:var(--font-size-12, 0.75rem);text-transform:uppercase}";
 
@@ -21,14 +22,14 @@ const YooUserProfileComponent = class {
     this.clicked.emit(item);
   }
   renderItem(itemName, itemData, avatarData) {
-    return (!!itemData && (index.h("li", { class: "border-bottom" }, index.h("div", { class: "profile-links-menu-title" }, index$1.translate(itemName)), index.h("div", { class: "profile-links-menu-item" }, !!avatarData && index.h("yoo-avatar", { size: "small", imgSrc: avatarData }), index.h("span", null, itemData)))));
+    return (!!itemData && (index.h("li", { class: "border-bottom" }, index.h("div", { class: "profile-links-menu-title" }, overlays.translate(itemName)), index.h("div", { class: "profile-links-menu-item" }, !!avatarData && index.h("yoo-avatar", { size: "small", imgSrc: avatarData }), index.h("span", null, itemData)))));
   }
   renderGroups() {
     var _a, _b, _c;
     const groupIds = (_c = (_b = (_a = this.user) === null || _a === void 0 ? void 0 : _a._acl) === null || _b === void 0 ? void 0 : _b.groups) === null || _c === void 0 ? void 0 : _c.r;
     if ((groupIds === null || groupIds === void 0 ? void 0 : groupIds.length) > 0) {
       const groups = entitiesHelpers.groupsFullResolver(groupIds);
-      return (index.h("li", { class: "border-bottom" }, index.h("div", { class: "profile-links-menu-title" }, index$1.translate('TEAMS')), index.h("div", { class: "profile-links-menu-item" }, groups === null || groups === void 0 ? void 0 : groups.map((group) => {
+      return (index.h("li", { class: "border-bottom" }, index.h("div", { class: "profile-links-menu-title" }, overlays.translate('TEAMS')), index.h("div", { class: "profile-links-menu-item" }, groups === null || groups === void 0 ? void 0 : groups.map((group) => {
         var _a;
         const groupTitleOrId = group.title || group._id;
         return (index.h("div", { class: "multiple-items-margin" }, index.h("yoo-avatar", { size: "small", imgSrc: (_a = group.icon) === null || _a === void 0 ? void 0 : _a._downloadURL, iconText: groupTitleOrId }), groupTitleOrId));
@@ -37,11 +38,11 @@ const YooUserProfileComponent = class {
   }
   tagString() {
     var _a, _b;
-    return (_b = (_a = this.user) === null || _a === void 0 ? void 0 : _a.tags) === null || _b === void 0 ? void 0 : _b.map((tag) => index$1.translate(tag)).join(',  ');
+    return (_b = (_a = this.user) === null || _a === void 0 ? void 0 : _a.tags) === null || _b === void 0 ? void 0 : _b.map((tag) => overlays.translate(tag)).join(',  ');
   }
   renderAdvancedLayout() {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
-    return (index.h("div", { class: "profile-content advanced" }, index.h("div", { class: "profile-title" }, index$1.translate('BASICS')), index.h("div", { class: "profile-links" }, index.h("ul", { class: "profile-links-menu" }, this.renderItem('PHOTOANDNAME', `${(_a = this.user) === null || _a === void 0 ? void 0 : _a.firstName} ${(_b = this.user) === null || _b === void 0 ? void 0 : _b.lastName}`.trim(), (_c = this.user) === null || _c === void 0 ? void 0 : _c.imageData), this.renderItem('USERNAME', (_d = this.user) === null || _d === void 0 ? void 0 : _d.username), this.renderItem('YOOBICSTORE', (_f = (_e = this.user) === null || _e === void 0 ? void 0 : _e.location) === null || _f === void 0 ? void 0 : _f.title, (_h = (_g = this.user) === null || _g === void 0 ? void 0 : _g.location) === null || _h === void 0 ? void 0 : _h.imageData), this.renderItem('YOOBICBIO', (_j = this.user) === null || _j === void 0 ? void 0 : _j.description), ((_k = this.user) === null || _k === void 0 ? void 0 : _k.position) && this.renderItem('POSITION', index$1.translate((_l = this.user) === null || _l === void 0 ? void 0 : _l.position)), this.renderGroups(), this.renderItem('WORKEMAIL', (_m = this.user) === null || _m === void 0 ? void 0 : _m.email), this.renderItem('PHONENUMBER', (_o = this.user) === null || _o === void 0 ? void 0 : _o.telephone), ((_p = this.user) === null || _p === void 0 ? void 0 : _p.dateOfBirth) && this.renderItem('DATEOFBIRTH', index$1.pipes.dateFormat.transform((_q = this.user) === null || _q === void 0 ? void 0 : _q.dateOfBirth, 'L')), ((_r = this.user) === null || _r === void 0 ? void 0 : _r.hiringDate) && this.renderItem('WORKANNIVERSARY', index$1.pipes.dateFormat.transform((_s = this.user) === null || _s === void 0 ? void 0 : _s.hiringDate, 'L'))))));
+    return (index.h("div", { class: "profile-content advanced" }, index.h("div", { class: "profile-title" }, overlays.translate('BASICS')), index.h("div", { class: "profile-links" }, index.h("ul", { class: "profile-links-menu" }, this.renderItem('PHOTOANDNAME', `${(_a = this.user) === null || _a === void 0 ? void 0 : _a.firstName} ${(_b = this.user) === null || _b === void 0 ? void 0 : _b.lastName}`.trim(), (_c = this.user) === null || _c === void 0 ? void 0 : _c.imageData), this.renderItem('USERNAME', (_d = this.user) === null || _d === void 0 ? void 0 : _d.username), this.renderItem('YOOBICSTORE', (_f = (_e = this.user) === null || _e === void 0 ? void 0 : _e.location) === null || _f === void 0 ? void 0 : _f.title, (_h = (_g = this.user) === null || _g === void 0 ? void 0 : _g.location) === null || _h === void 0 ? void 0 : _h.imageData), this.renderItem('YOOBICBIO', (_j = this.user) === null || _j === void 0 ? void 0 : _j.description), ((_k = this.user) === null || _k === void 0 ? void 0 : _k.position) && this.renderItem('POSITION', overlays.translate((_l = this.user) === null || _l === void 0 ? void 0 : _l.position)), this.renderGroups(), this.renderItem('WORKEMAIL', (_m = this.user) === null || _m === void 0 ? void 0 : _m.email), this.renderItem('PHONENUMBER', (_o = this.user) === null || _o === void 0 ? void 0 : _o.telephone), ((_p = this.user) === null || _p === void 0 ? void 0 : _p.dateOfBirth) && this.renderItem('DATEOFBIRTH', overlays.pipes.dateFormat.transform((_q = this.user) === null || _q === void 0 ? void 0 : _q.dateOfBirth, 'L')), ((_r = this.user) === null || _r === void 0 ? void 0 : _r.hiringDate) && this.renderItem('WORKANNIVERSARY', overlays.pipes.dateFormat.transform((_s = this.user) === null || _s === void 0 ? void 0 : _s.hiringDate, 'L'))))));
   }
   render() {
     return index.h(index.Host, { class: { ...commonHelpers.getAppContext(this.host) } }, this.renderAdvancedLayout());

package/dist/cjs/yoo-user-wizard.cjs.entry.js

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const userWizardCss = ":host{--card-chat-height:7rem;display:block;max-width:100%;overflow:hidden;--gutter:var(--spacing-16, 1rem);--item-size:6rem}:host>main{grid-column:1/-1}:host .truncate{overflow:hidden;max-width:4rem;padding-top:var(--spacing-04, 0.25rem);font-size:var(--font-size-12, 0.75rem);text-align:center}@supports (display: -webkit-box){:host .truncate{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}:host header{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;padding:var(--spacing-08, 0.5rem) 0}:host header #title{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-weight:var(--font-weight-700, 700);font-size:var(--font-size-18, 1.125rem)}:host header #title yoo-tag{padding-left:var(--spacing-08, 0.5rem)}:host header #action{color:var(--app-color, #5a30f4);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem);cursor:pointer}:host main{display:grid;grid-gap:calc(var(--gutter) / 2);grid-template-columns:var(--spacing-08, 0.5rem) repeat(var(--number-items), calc(var(--item-size) - var(--gutter) * 2)) var(--item-size)}:host main::before,:host main::after{content:\"\"}:host main:hover{cursor:pointer}:host main .item{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:start;scroll-snap-align:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host main .item#add-avatar{color:var(--app-color, #5a30f4)}:host main .item#add-avatar yoo-icon{width:var(--spacing-64, 4rem);height:var(--spacing-64, 4rem);background-color:var(--app-color-10, rgba(90, 48, 244, 0.1));border-radius:50%}:host main yoo-card-image{--description-align-items:flex-start;--description-justify-content:flex-end;--description-text-align:start;--inner-spacing:var(--spacing-08, 0.5rem);--image-overlay:linear-gradient(to bottom, var(--transparent-linear-gradient, rgba(255, 255, 255, 0)) -73%, var(--dark-40, rgba(0, 0, 0, 0.4)));--title-line-height:var(--font-size-32, 2rem);--title-font-weight:normal}:host(.mobile) header{width:calc(100% - var(--spacing-32, 2rem));margin-left:var(--spacing-16, 1rem)}:host(.mobile) main{margin-right:calc(var(--spacing-16, 1rem) * -1);overflow-x:auto}:host(.mobile) main::-webkit-scrollbar{display:none}:host(.mobile) main yoo-card-image{width:6.5rem;height:11.25rem;--subtitle-line-height:var(--font-size-14, 0.875rem);--title-font-size:var(--font-size-14, 0.875rem)}:host(.web) main{margin-left:calc(var(--spacing-16, 1rem) * -1)}:host(.web) main yoo-card-image{width:5.375rem;height:9.25rem;--subtitle-line-height:var(--font-size-12, 0.75rem);--title-font-size:var(--font-size-12, 0.75rem)}:host(.empty){--card-chat-height:auto;max-width:initial}:host(.live-video){--card-chat-height:9.25rem}:host(.web.live-video){--item-size:7.5rem}:host(.mobile.live-video){--item-size:8.5rem}:host(.mobile.live-video) main{margin-left:inherit}";
 
@@ -32,7 +33,7 @@ const YooUserWizardComponent = class {
   componentWillRender() {
     var _a;
     const MAX_ITEMS = this.isImageCard ? 5 : 7;
-    if (index$1.isWeb(this.host) && ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > MAX_ITEMS) {
+    if (overlays.isWeb(this.host) && ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > MAX_ITEMS) {
       this.clampedItems = this.items.slice(0, MAX_ITEMS) || [];
     }
     else {
@@ -44,11 +45,11 @@ const YooUserWizardComponent = class {
     this.host.style.setProperty('--number-items', (((_a = this.clampedItems) === null || _a === void 0 ? void 0 : _a.length) || 1).toString());
   }
   renderAddAvatar() {
-    return index.h("section", { id: "add-avatar", class: "item", onClick: () => this.onItemSelected() }, index.h("yoo-icon", { name: this.addIcon, size: this.addIconSize, color: "app-color" }), index.h("div", { class: "truncate" }, " ", index$1.translate(this.addText)));
+    return index.h("section", { id: "add-avatar", class: "item", onClick: () => this.onItemSelected() }, index.h("yoo-icon", { name: this.addIcon, size: this.addIconSize, color: "app-color" }), index.h("div", { class: "truncate" }, " ", overlays.translate(this.addText)));
   }
   renderAddImageCard() {
     var _a;
-    return index.h("yoo-card-image", { class: "item", onClick: () => this.onItemSelected(), heading: this.addText, headingPosition: "below", icon: this.addIcon, image: { instant: false, src: (_a = index$1.getSession().user) === null || _a === void 0 ? void 0 : _a.imageData } });
+    return index.h("yoo-card-image", { class: "item", onClick: () => this.onItemSelected(), heading: this.addText, headingPosition: "below", icon: this.addIcon, image: { instant: false, src: (_a = overlays.getSession().user) === null || _a === void 0 ? void 0 : _a.imageData } });
   }
   renderAddButton() {
     return this.isImageCard ? this.renderAddImageCard() : this.renderAddAvatar();
@@ -69,7 +70,7 @@ const YooUserWizardComponent = class {
     return index.h("main", null, this.showAdd && this.renderAddButton(), this.renderItems());
   }
   renderHeader() {
-    return this.titleText && index.h("header", null, index.h("div", { id: "title" }, index$1.translate(this.titleText), this.tag && index.h("yoo-tag", { color: "energized-10" }, this.tag)), this.showAllText && index.h("span", { id: "action", onClick: () => this.showAllSelected.emit() }, index$1.translate(this.showAllText)));
+    return this.titleText && index.h("header", null, index.h("div", { id: "title" }, overlays.translate(this.titleText), this.tag && index.h("yoo-tag", { color: "energized-10" }, this.tag)), this.showAllText && index.h("span", { id: "action", onClick: () => this.showAllSelected.emit() }, overlays.translate(this.showAllText)));
   }
   render() {
     return index.h(index.Host, { class: { ...commonHelpers.getAppContext(this.host), empty: !this.hasItems } }, (this.addText || this.hasItems) && [this.renderHeader(), this.renderBody()]);