@yoobic/yobi 8.2.2 → 8.3.0-2

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

@@ -2,15 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$2 = require('./index-fc264952.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+const index$1 = require('./index-de8540eb.js');
+require('./index-1fdbd9b3.js');
 const lodash = require('./lodash-597bda6d.js');
-const button_factory = require('./button.factory-0133597a.js');
-const chatHelpers = require('./chat-helpers-1bfebfef.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
+const button_factory = require('./button.factory-a01664d3.js');
+const chatHelpers = require('./chat-helpers-643f748a.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-1ff4deca.js');
+require('./index-933cab98.js');
 
 const chatCss = ":host{--typing-username-padding-left:45px;--gradient-background-image:linear-gradient(transparent 60%, var(--dark-80, rgba(0, 0, 0, 0.8))100%);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%}:host .bg-accent{background-color:var(--accent, #276ef1) !important}:host .accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}:host .bg-app-color{background-color:var(--app-color, #5a30f4) !important}:host .app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}:host .bg-danger{background-color:var(--danger, #d44333) !important}:host .danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}:host .bg-dark{background-color:var(--dark, #000000) !important}:host .dark{color:var(--dark, #000000);fill:var(--dark, #000000)}:host .bg-energized{background-color:var(--energized, #ffc043) !important}:host .energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}:host .bg-info{background-color:var(--info, #d84c96) !important}:host .info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}:host .bg-light{background-color:var(--light, #ffffff) !important}:host .light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}:host .bg-stable{background-color:var(--stable, #adadad) !important}:host .stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}:host .bg-stable-alt{background-color:var(--stable-alt, #d0d0d0) !important}:host .stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}:host .bg-stable-light{background-color:var(--stable-light, #f1f1f1) !important}:host .stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}:host .bg-stable-ultralight{background-color:var(--stable-ultralight, #fafafa) !important}:host .stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}:host .bg-success{background-color:var(--success, #3aa76d) !important}:host .success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}:host .bg-text-color{background-color:var(--text-color, #807f83) !important}:host .text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}:host .bg-warning{background-color:var(--warning, #ed6e33) !important}:host .warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}:host .bg-wood{background-color:var(--wood, #99644c) !important}:host .wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}@-webkit-keyframes slide-up{0%{-webkit-transform:translateY(3rem);transform:translateY(3rem)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slide-up{0%{-webkit-transform:translateY(3rem);transform:translateY(3rem)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes slide-down{0%{-webkit-transform:translateY(-3rem);transform:translateY(-3rem)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slide-down{0%{-webkit-transform:translateY(-3rem);transform:translateY(-3rem)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}:host .delete-mode-header{-webkit-animation:slide-down 0.4s ease;animation:slide-down 0.4s ease}:host .loader{width:var(--spacing-96, 6rem);height:var(--spacing-96, 6rem);margin-left:auto}:host .simple-content{overflow:hidden}:host .timer-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-left:auto;color:var(--light, #ffffff)}:host .timer-container yoo-progress-bar{width:var(--spacing-32, 2rem);height:var(--spacing-32, 2rem);padding-right:var(--spacing-16, 1rem);--stroke-width-circle:var(--spacing-04, 0.25rem)}:host .heading-container{width:calc(100% - var(--logo-05, 3rem));font-weight:bold;line-height:normal}:host .heading-container.light{color:var(--light, #ffffff)}:host .heading-container.small{font-size:var(--font-size-14, 0.875rem)}:host .heading-container .subheading{width:calc(100% - var(--logo-05, 3rem));color:var(--stable, #adadad);font-weight:normal;font-size:var(--font-size-14, 0.875rem)}:host .advanced-heading-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;height:7rem;padding:var(--spacing-16, 1rem) var(--spacing-16, 1rem) var(--spacing-08, 0.5rem);color:var(--light, #ffffff);background-color:var(--dark, #000000)}:host .advanced-heading-container .advanced-heading{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .advanced-heading-container .advanced-heading .advanced-heading-content{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-bottom:var(--spacing-08, 0.5rem)}:host .advanced-heading-container .advanced-heading .advanced-heading-content yoo-avatar{margin-right:var(--spacing-08, 0.5rem)}:host .advanced-heading-container .advanced-heading .advanced-heading-content yoo-icon{margin-left:auto}:host .advanced-heading-container .advanced-heading .advanced-heading-subheading{font-size:var(--font-size-14, 0.875rem)}:host .advanced-heading-container yoo-ion-footer{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;background-color:var(--dark, #000000);border-top:none}:host .messages-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin-top:0.2rem;padding:0.3125rem 0.625rem 5.625rem 0.625rem;overflow:hidden;-webkit-transition:opacity 0.25s linear;transition:opacity 0.25s linear}:host .messages-container p{color:var(--text-color, #807f83);font-size:var(--font-size-14, 0.875rem);white-space:nowrap;text-align:center}:host .messages-container .someone-typing-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding-top:var(--spacing-08, 0.5rem)}:host .messages-container .someone-typing-container .user-typing{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:56px;height:36px;background-color:var(--stable-light);border-radius:18px}:host .messages-container .someone-typing-container .user-typing .typing-indicator{position:relative;display:-ms-flexbox;display:flex;width:auto;margin:0 auto;background-color:var(--stable-light, #f1f1f1);border-radius:3.125rem;-webkit-animation:2s bulge infinite ease-out;animation:2s bulge infinite ease-out;will-change:transform}@-webkit-keyframes blink{50%{opacity:1}}@keyframes blink{50%{opacity:1}}@-webkit-keyframes bulge{50%{-webkit-transform:scale(1.05);transform:scale(1.05)}}@keyframes bulge{50%{-webkit-transform:scale(1.05);transform:scale(1.05)}}:host .messages-container .someone-typing-container .user-typing .typing-indicator::before,:host .messages-container .someone-typing-container .user-typing .typing-indicator::after{position:absolute;bottom:-0.125rem;left:-0.125rem;width:0.5rem;height:0.5rem;background-color:var(--stable-light, #f1f1f1);border-radius:50%;content:\"\"}:host .messages-container .someone-typing-container .user-typing .typing-indicator::after{bottom:-0.1875rem;left:-0.1875rem;width:0.1875rem;height:0.1875rem}:host .messages-container .someone-typing-container .user-typing .typing-indicator span{display:block;float:left;width:0.5rem;height:0.5rem;margin:0 0.0625rem;background-color:var(--stable, #adadad);border-radius:50%;opacity:0.4}:host .messages-container .someone-typing-container .user-typing .typing-indicator span:nth-of-type(1){-webkit-animation:1s blink infinite 0.3333s;animation:1s blink infinite 0.3333s}:host .messages-container .someone-typing-container .user-typing .typing-indicator span:nth-of-type(2){-webkit-animation:1s blink infinite 0.6666s;animation:1s blink infinite 0.6666s}:host .messages-container .someone-typing-container .user-typing .typing-indicator span:nth-of-type(3){-webkit-animation:1s blink infinite 0.9999s;animation:1s blink infinite 0.9999s}:host .messages-container .someone-typing-container .username{padding-bottom:3px;padding-left:var(--typing-username-padding-left);color:var(--text-color, #807f83);font-size:var(--font-size-14, 0.875rem)}:host .messages-container .someone-typing-container .bottom-part{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding-left:var(--spacing-04, 0.25rem)}:host .delete-mode-footer{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;min-height:3rem;font-weight:var(--font-weight-400, 400);background:var(--light, #ffffff);-webkit-box-shadow:var(--footer-shadow, 0 0.0625rem 0.625rem 0 rgba(0, 0, 0, 0.15));box-shadow:var(--footer-shadow, 0 0.0625rem 0.625rem 0 rgba(0, 0, 0, 0.15));-webkit-animation:slide-up 0.4s ease;animation:slide-up 0.4s ease}:host .delete-mode-footer .accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}:host .delete-mode-footer .app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}:host .delete-mode-footer .danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}:host .delete-mode-footer .dark{color:var(--dark, #000000);fill:var(--dark, #000000)}:host .delete-mode-footer .energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}:host .delete-mode-footer .info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}:host .delete-mode-footer .light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}:host .delete-mode-footer .stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}:host .delete-mode-footer .stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}:host .delete-mode-footer .stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}:host .delete-mode-footer .stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}:host .delete-mode-footer .success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}:host .delete-mode-footer .text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}:host .delete-mode-footer .warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}:host .delete-mode-footer .wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}:host .delete-mode-footer .inner-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-left:var(--spacing-16, 1rem)}:host .delete-mode-footer.disabled{color:var(--stable-40, rgba(173, 173, 173, 0.4))}:host yoo-navbar yoo-avatar,:host yoo-navbar yoo-avatars{margin-right:var(--spacing-08, 0.5rem)}:host .message-row{display:grid;grid-gap:var(--spacing-16, 1rem);grid-template-columns:auto 1fr;-ms-flex-align:center;align-items:center}:host .message-row yoo-form-checkbox,:host .message-row yoo-chat-message{-webkit-transition:-webkit-transform 0.5s;transition:-webkit-transform 0.5s;transition:transform 0.5s;transition:transform 0.5s, -webkit-transform 0.5s}:host .message-row yoo-chat-message[left]{-webkit-transform:translateX(-2.5rem);transform:translateX(-2.5rem)}:host .message-row yoo-form-checkbox{-webkit-transform:translateX(calc(-100% - 1.5rem));transform:translateX(calc(-100% - 1.5rem))}:host .message-row.deleteable yoo-chat-message[left]{-webkit-transform:translateX(0rem);transform:translateX(0rem)}:host .message-row.deleteable yoo-form-checkbox{-webkit-transform:translateX(calc(100% - 1.5rem));transform:translateX(calc(100% - 1.5rem))}:host .message-row .notification{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;width:100%;padding:var(--spacing-16, 1rem) 0;color:var(--stable, #adadad);font-size:var(--font-size-14, 0.875rem)}:host .message-row .notification yoo-avatar{padding-right:var(--spacing-04, 0.25rem)}:host .message-row yoo-chat-message{min-width:0;padding-bottom:var(--spacing-08, 0.5rem);-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}:host yoo-copyright{color:var(--light, #ffffff)}:host(.iphone-x) .delete-mode-footer{padding-bottom:var(--spacing-24, 1.5rem)}:host(.broadcast.iphone-x) .broadcast-container .top-container{padding-top:var(--spacing-48, 3rem)}:host(.broadcast.iphone-x) .broadcast-container .broadcast-bottom-container{padding-bottom:var(--spacing-40, 2.5rem)}:host(.broadcast.iphone-x) .broadcast-container .video-outer-container{background:var(--dark, #000000)}:host(.broadcast.iphone-x) .broadcast-container .video-outer-container .video-container{height:97%}:host(.broadcast.web){display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host(.broadcast.web) .broadcast-container{-webkit-box-sizing:border-box;box-sizing:border-box;width:23.4375rem;padding-bottom:var(--container-safe-area-bottom)}:host(.broadcast.web.broadcaster){--container-safe-area-bottom:7.5rem}:host(.broadcast.web.live.broadcaster){--message-content-height:45%}:host(.broadcast.web.live.broadcaster) .broadcast-container .quick-reaction-overlay{position:absolute;bottom:calc(var(--container-safe-area-bottom) + 8.75rem);z-index:99}:host(.broadcast.web.live.broadcaster) .broadcast-container .message-inner-container{opacity:1;-webkit-transition:opacity 0.3s ease;transition:opacity 0.3s ease}:host(.broadcast.web.live.broadcaster) .broadcast-container .message-inner-container.hide{position:absolute;z-index:-1;opacity:0}:host(.broadcast){--player-margin-bottom:18%;--message-content-height:35%}:host(.broadcast) yoo-swipe-container{width:100%;height:100%}:host(.broadcast) .broadcast-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;background-image:var(--gradient-background-image)}:host(.broadcast) .broadcast-container.show-player .broadcast-bottom-container{margin-bottom:var(--player-margin-bottom)}:host(.broadcast) .broadcast-container.hide-controls{background-image:none}:host(.broadcast) .broadcast-container.hide-controls .top-container,:host(.broadcast) .broadcast-container.hide-controls .status-container,:host(.broadcast) .broadcast-container.hide-controls .broadcast-bottom-container{opacity:0;-webkit-transition:opacity 0.8s ease;transition:opacity 0.8s ease;pointer-events:none}:host(.broadcast) .broadcast-container .top-container,:host(.broadcast) .broadcast-container .status-container,:host(.broadcast) .broadcast-container .broadcast-bottom-container .messages-container{padding:var(--spacing-16, 1rem) var(--spacing-16, 1rem) 0 var(--spacing-16, 1rem);opacity:1;-webkit-transition:opacity 0.8s ease;transition:opacity 0.8s ease}:host(.broadcast) .broadcast-container.live{--message-content-height:45%}:host(.broadcast) .broadcast-container .video-container{position:absolute;width:100%;height:100%}:host(.broadcast) .broadcast-container .video-outer-container{position:absolute;z-index:2;display:-ms-flexbox;display:flex;width:100%;height:100%;opacity:1}:host(.broadcast) .broadcast-container .video-outer-container video{width:100%;height:100%}:host(.broadcast) .broadcast-container .video-outer-container.not-cordova{height:0;overflow:hidden;opacity:0}:host(.broadcast) .broadcast-container .video-outer-container.not-cordova .video-container{width:100%;height:100%}:host(.broadcast) .broadcast-container .video-outer-container.not-cordova.active{position:absolute;display:-ms-flexbox;display:flex;width:100%;height:100%;opacity:1}:host(.broadcast) .broadcast-container .overlay{position:absolute;top:0;bottom:var(--player-margin-bottom);z-index:2;width:100%;height:100%}:host(.broadcast) .broadcast-container .broadcast-bottom-container{position:relative;z-index:3;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:var(--message-content-height);margin-top:auto;color:var(--light, #ffffff);-webkit-transition:opacity 0.8s ease;transition:opacity 0.8s ease}:host(.broadcast) .broadcast-container .broadcast-bottom-container .input-bar-container{display:-ms-flexbox;display:flex;min-height:3.125rem}:host(.broadcast) .broadcast-container .broadcast-bottom-container yoo-button.start-live{width:auto;margin-top:auto;padding:0 var(--spacing-16, 1rem) var(--spacing-16, 1rem) var(--spacing-16, 1rem)}:host(.broadcast) .broadcast-container .broadcast-bottom-container .floating-icon-container{position:absolute;right:0;bottom:50px;width:80px;height:35vh}:host(.broadcast) .broadcast-container .broadcast-bottom-container .floating-icon-container yoo-icon{position:absolute;bottom:0;font-size:var(--font-size-18, 1.125rem)}:host(.broadcast) .broadcast-container .broadcast-bottom-container .share-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;margin-top:auto;padding:var(--spacing-16, 1rem)}:host(.broadcast) .broadcast-container .broadcast-bottom-container .share-container .text{width:100%}:host(.broadcast) .broadcast-container .broadcast-bottom-container .share-container .buttons-container{display:grid;grid-gap:var(--spacing-16, 1rem);grid-template-columns:1fr 1fr;width:100%;padding:0;padding-top:var(--spacing-16, 1rem)}:host(.broadcast) .broadcast-container .broadcast-bottom-container .content-overlay{position:absolute;top:-cssvar(spacing-40);z-index:1;width:100%;height:var(--spacing-40, 2.5rem);background-color:var(--dark, #000000);-webkit-filter:blur(10px);filter:blur(10px)}:host(.broadcast) .broadcast-container .broadcast-bottom-container yoo-ion-content{background:transparent;opacity:1;-webkit-transition:opacity 0.5s ease-in-out;transition:opacity 0.5s ease-in-out}:host(.broadcast) .broadcast-container .broadcast-bottom-container yoo-ion-content.hide{z-index:-1;opacity:0}:host(.broadcast) .broadcast-container .broadcast-bottom-container .message-inner-container{overflow:auto}:host(.broadcast) .broadcast-container .broadcast-bottom-container .message-inner-container .broadcast-message{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding-right:var(--spacing-16, 1rem);padding-bottom:var(--spacing-08, 0.5rem);padding-left:var(--spacing-16, 1rem)}:host(.broadcast) .broadcast-container .broadcast-bottom-container .message-inner-container .broadcast-message .content-container{padding-left:var(--spacing-08, 0.5rem)}:host(.broadcast) .broadcast-container .broadcast-bottom-container .message-inner-container .broadcast-message .content-container .title{font-size:var(--font-size-14, 0.875rem)}:host(.broadcast) .broadcast-container .broadcast-bottom-container .message-inner-container .broadcast-message .content-container .content{font-size:var(--font-size-16, 1rem)}:host(.broadcast) .broadcast-container .broadcast-bottom-container yoo-input-bar{position:initial;z-index:2;margin-top:auto}:host(.broadcast) .broadcast-container .top-container{z-index:3;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;color:var(--light, #ffffff);background-image:-webkit-gradient(linear, left top, left bottom, from(var(--dark, #000000)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to bottom, var(--dark, #000000), rgba(0, 0, 0, 0))}:host(.broadcast) .broadcast-container .top-container .left{display:-ms-flexbox;display:flex}:host(.broadcast) .broadcast-container .top-container .left span{padding-left:var(--spacing-16, 1rem)}:host(.broadcast) .broadcast-container .top-container .left yoo-tag{padding-left:var(--spacing-08, 0.5rem)}:host(.broadcast) .broadcast-container .top-container .right{display:-ms-flexbox;display:flex;margin-left:auto}:host(.broadcast) .broadcast-container .top-container .right yoo-icon{padding-top:var(--spacing-02, 0.125rem);padding-left:var(--spacing-16, 1rem)}:host(.broadcast) .broadcast-container .top-container .extra-status-container{display:-ms-flexbox;display:flex;width:100%;padding-top:var(--spacing-04, 0.25rem);color:var(--light, #ffffff)}:host(.broadcast) .broadcast-container .top-container .extra-status-container.finished{-ms-flex-direction:column;flex-direction:column;margin-top:50%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host(.broadcast) .broadcast-container .top-container .extra-status-container.finished .status-text{padding-top:var(--spacing-16, 1rem)}:host(.broadcast) .broadcast-container .top-container .extra-status-container .avatars-container{display:-ms-flexbox;display:flex}:host(.broadcast) .broadcast-container .top-container .extra-status-container .avatars-container yoo-avatar{padding-right:var(--spacing-04, 0.25rem)}:host(.broadcast) .broadcast-container .top-container .extra-status-container .status-text{font-size:var(--font-size-16, 1rem)}:host(.broadcast) .broadcast-container .blur-overlay{position:absolute;z-index:1;width:100%;height:100%;background-image:var(--gradient-background-image)}:host(.broadcast) .broadcast-container .status-container{z-index:3;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-top:var(--spacing-08, 0.5rem);padding-top:0}:host(.broadcast) .broadcast-container .status-container yoo-icon,:host(.broadcast) .broadcast-container .status-container yoo-tag{margin-right:var(--spacing-04, 0.25rem)}:host(.web) yoo-navbar{--center-padding:0 var(--spacing-16, 1rem) 0 0}:host(.web) yoo-navbar yoo-avatar,:host(.web) yoo-navbar yoo-avatars{margin-right:var(--spacing-16, 1rem)}:host(.web) .heading-container.clickable,:host(.web) yoo-avatar.clickable{cursor:pointer}:host(.popup) yoo-navbar:hover{cursor:pointer}:host(.popup) yoo-navbar yoo-button{--hover-color:var(--dark-10, rgba(0, 0, 0, 0.1))}";
 
@@ -66,7 +67,7 @@ const YooChatComponent = class {
     var _a;
     this.inputFocused = true;
     this.scrollBottomOnKeyboradShown = true;
-    !index$1.isNativeMobile() && (this.oldestMostRecentMessageToken = null);
+    !overlays.isNativeMobile() && (this.oldestMostRecentMessageToken = null);
     (_a = this.scroll) === null || _a === void 0 ? void 0 : _a.scrollToBottom(250);
   }
   onMediaLoading(event) {
@@ -90,7 +91,7 @@ const YooChatComponent = class {
     if (!ev.detail) {
       return;
     }
-    const mediaMessages = this.messages.filter(m => [index$2.MessageType.video, index$2.MessageType.photo, index$2.MessageType.gif].includes(m.type));
+    const mediaMessages = this.messages.filter(m => [index$1.MessageType.video, index$1.MessageType.photo, index$1.MessageType.gif].includes(m.type));
     const findIndex = mediaMessages.findIndex(m => (m === null || m === void 0 ? void 0 : m.timetoken) === ev.detail.timetoken);
     const items = chatHelpers.parseMediaMessageForSlidesMedia(mediaMessages);
     const { message, item } = this.getCurrentItemAndMessage(findIndex, items, mediaMessages) || {};
@@ -108,10 +109,10 @@ const YooChatComponent = class {
         size: 'large',
         handler: async (annotationData) => {
           var _a;
-          await index$1.closeModal(annotationData);
+          await overlays.closeModal(annotationData);
           if (annotationData) {
             this.mediaInput.emit({
-              type: index$2.MessageType.photo,
+              type: index$1.MessageType.photo,
               payload: item.value,
               options: {
                 requireUpload: false,
@@ -130,7 +131,7 @@ const YooChatComponent = class {
   async startCountDown(startTime, endTime, startHandler, endHandler) {
     this.countDownStartValue = startTime; //45 minutes
     this.countDownValue = this.countDownStartValue;
-    this.requestIntervalID = index$1.requestInterval(() => {
+    this.requestIntervalID = overlays.requestInterval(() => {
       this.countDownValue--;
       if (this.countDownValue <= endTime && !this.showCountdown) {
         this.countDownStartValue = this.countDownValue;
@@ -140,7 +141,7 @@ const YooChatComponent = class {
         this.showCountdown = true;
       }
       if (this.countDownValue < -1) {
-        index$1.cancelRequestInterval(this.requestIntervalID['value']);
+        overlays.cancelRequestInterval(this.requestIntervalID['value']);
         this.requestIntervalID['value'] = null;
         if (endHandler) {
           endHandler();
@@ -155,7 +156,7 @@ const YooChatComponent = class {
   }
   async onToggleFloatingAnimation(params) {
     const iconEl = document.createElement('yoo-icon');
-    index$1.floatingIconAnimation(this.floatingContainer, params.cssClass || 'heart', iconEl);
+    overlays.floatingIconAnimation(this.floatingContainer, params.cssClass || 'heart', iconEl);
   }
   async scrollToTop() {
     return this.scrollToInternal(0);
@@ -175,7 +176,7 @@ const YooChatComponent = class {
     var _a;
     if (!this.preventToggle) {
       this.hideControls = !this.hideControls;
-      if (!index$1.isNativeMobile() && ((_a = this.broadcastParams) === null || _a === void 0 ? void 0 : _a.isLive)) {
+      if (!overlays.isNativeMobile() && ((_a = this.broadcastParams) === null || _a === void 0 ? void 0 : _a.isLive)) {
         this.viewToggled.emit(this.hideControls);
       }
       else if (this.videoPlayerEl) {
@@ -200,19 +201,19 @@ const YooChatComponent = class {
     this.updateChat();
   }
   disconnectedCallback() {
-    if (index$1.isNativeMobile()) {
+    if (overlays.isNativeMobile()) {
       this.toggleKeyboardListeners(false);
-      if (index$1.isIOS() && this.enableKeyboardResizing) {
-        index$1.disableKeyboardResize();
+      if (overlays.isIOS() && this.enableKeyboardResizing) {
+        overlays.disableKeyboardResize();
       }
     }
     if (this.requestIntervalID) {
-      index$1.cancelRequestInterval(this.requestIntervalID['value']);
+      overlays.cancelRequestInterval(this.requestIntervalID['value']);
     }
   }
   initChat() {
     this.initMessagesAndScrollToBottom();
-    if (this.showBackgroundVideo && !index$1.isNativeMobile()) {
+    if (this.showBackgroundVideo && !overlays.isNativeMobile()) {
       this.playerReady.emit(this.videoElWrapper);
     }
   }
@@ -221,7 +222,7 @@ const YooChatComponent = class {
     this.initMessagesAndScrollToBottom();
     this.refreshMessages();
     // re-render will remove video player, need to re-create the player
-    if (!index$1.isNativeMobile() && ((_a = this.broadcastParams) === null || _a === void 0 ? void 0 : _a.isLive) && this.showBackgroundVideo &&
+    if (!overlays.isNativeMobile() && ((_a = this.broadcastParams) === null || _a === void 0 ? void 0 : _a.isLive) && this.showBackgroundVideo &&
       ((_b = this.videoElWrapper) === null || _b === void 0 ? void 0 : _b.firstChild).childElementCount <= 0) {
       this.playerReady.emit(this.videoElWrapper);
     }
@@ -233,19 +234,19 @@ const YooChatComponent = class {
       await Promise.allSettled(this.messageElements.map((el) => el === null || el === void 0 ? void 0 : el.initMessage()));
       await this.scroll.scrollToBottom(50);
       this.ionContent.classList.remove('hide');
-      if (index$1.isIOS() && this.enableKeyboardResizing) {
-        index$1.enableKeyboardResize();
+      if (overlays.isIOS() && this.enableKeyboardResizing) {
+        overlays.enableKeyboardResize();
       }
     }
   }
   onHeadingClicked() {
     var _a, _b, _c;
     if (!this.background && ((_a = this.users) === null || _a === void 0 ? void 0 : _a.length) === 1 && !((_b = this.advancedOptions) === null || _b === void 0 ? void 0 : _b.popupMode) && !((_c = this.advancedOptions) === null || _c === void 0 ? void 0 : _c.isStore)) {
-      index$1.getAsyncExtraData({ type: 'user-detail', params: { user: this.users[0] } });
+      overlays.getAsyncExtraData({ type: 'user-detail', params: { user: this.users[0] } });
     }
   }
   toggleKeyboardListeners(add) {
-    index$1.isNativeMobile() && window[`${add ? 'add' : 'remove'}EventListener`]('keyboardDidShow', () => {
+    overlays.isNativeMobile() && window[`${add ? 'add' : 'remove'}EventListener`]('keyboardDidShow', () => {
       setTimeout(() => {
         this.oldestMostRecentMessageToken = null;
         this.scroll.scrollToBottom(500);
@@ -266,15 +267,15 @@ const YooChatComponent = class {
     return (index === this.messages.length - 1 ||
       this.messages[index].author !== this.messages[index + 1].author ||
       !this.messages[index + 1].author ||
-      index$1.isNotificationMessage(this.messages[index + 1]));
+      overlays.isNotificationMessage(this.messages[index + 1]));
   }
   getFirstMessage(index) {
     var _a, _b, _c, _d, _e, _f, _g;
-    return !index || ((_c = (_b = (_a = this.messages) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.author) === null || _c === void 0 ? void 0 : _c._id) !== ((_f = (_e = (_d = this.messages) === null || _d === void 0 ? void 0 : _d[index - 1]) === null || _e === void 0 ? void 0 : _e.author) === null || _f === void 0 ? void 0 : _f._id) || index$1.isNotificationMessage((_g = this.messages) === null || _g === void 0 ? void 0 : _g[index - 1]);
+    return !index || ((_c = (_b = (_a = this.messages) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.author) === null || _c === void 0 ? void 0 : _c._id) !== ((_f = (_e = (_d = this.messages) === null || _d === void 0 ? void 0 : _d[index - 1]) === null || _e === void 0 ? void 0 : _e.author) === null || _f === void 0 ? void 0 : _f._id) || overlays.isNotificationMessage((_g = this.messages) === null || _g === void 0 ? void 0 : _g[index - 1]);
   }
   isNextImage(index) {
     var _a, _b;
-    return ((_a = this.messages) === null || _a === void 0 ? void 0 : _a[index + 1]) && index$1.isRichContentMessage((_b = this.messages) === null || _b === void 0 ? void 0 : _b[index + 1]);
+    return ((_a = this.messages) === null || _a === void 0 ? void 0 : _a[index + 1]) && overlays.isRichContentMessage((_b = this.messages) === null || _b === void 0 ? void 0 : _b[index + 1]);
   }
   onPullToRefresh() {
     var _a;
@@ -294,7 +295,7 @@ const YooChatComponent = class {
     if (allOrNone) {
       this.messages.forEach((m) => {
         var _a;
-        if (m && !m.deleted && ((((_a = m.author) === null || _a === void 0 ? void 0 : _a._id) === index$1.getSession().user._id) || this.forceDelete)) {
+        if (m && !m.deleted && ((((_a = m.author) === null || _a === void 0 ? void 0 : _a._id) === overlays.getSession().user._id) || this.forceDelete)) {
           this.selectedTimeTokens.push(m.timetoken);
         }
       });
@@ -315,7 +316,7 @@ const YooChatComponent = class {
     if (this.selectedTimeTokens.length) {
       const header = `DELETE_MESSAGE${this.selectedTimeTokens.length > 1 ? 'S' : ''}`;
       const message = `CONFIRMDELETEMESSAGE${this.selectedTimeTokens.length > 1 ? 'S' : ''}`;
-      const shouldDelete = await index$1.showAlert(index$1.translate(header, { number: this.selectedTimeTokens.length }), [index$1.translate('CANCEL'), index$1.translate('DELETE')], index$1.translate(message));
+      const shouldDelete = await overlays.showAlert(overlays.translate(header, { number: this.selectedTimeTokens.length }), [overlays.translate('CANCEL'), overlays.translate('DELETE')], overlays.translate(message));
       if (shouldDelete) {
         this.selectedTimeTokens = [];
         this.deleteMessages.emit(true);
@@ -333,7 +334,7 @@ const YooChatComponent = class {
   async onIonScroll(ev) {
     var _a, _b;
     const { scrollTop } = (ev === null || ev === void 0 ? void 0 : ev.detail) || {};
-    if (scrollTop <= 2 && !this.disableLoadMore && index$1.isWeb(this.host)) {
+    if (scrollTop <= 2 && !this.disableLoadMore && overlays.isWeb(this.host)) {
       this.onPullToRefresh();
     }
     if (this.broadcastMode) {
@@ -357,7 +358,7 @@ const YooChatComponent = class {
       if (((_a = ev.detail) === null || _a === void 0 ? void 0 : _a.message) && ((_b = ev.detail) === null || _b === void 0 ? void 0 : _b.content)) {
         ev.detail.message.content = ev.detail.content;
       }
-      index$1.showActionSheet(this.onMapChatActions(ev.detail.message), 'danger', { preventOverlayClick: true }, (_c = ev.detail) === null || _c === void 0 ? void 0 : _c.host);
+      overlays.showActionSheet(this.onMapChatActions(ev.detail.message), 'danger', { preventOverlayClick: true }, (_c = ev.detail) === null || _c === void 0 ? void 0 : _c.host);
     }
   }
   onRepliedMessageClicked(ev) {
@@ -381,11 +382,11 @@ const YooChatComponent = class {
             return true;
           }
           const { item } = this.getCurrentItemAndMessage(index, items, mediaMessages);
-          return item && !(index$1.isVideo(item.value) || index$1.isGif(item.value));
+          return item && !(overlays.isVideo(item.value) || overlays.isGif(item.value));
         },
         handler: (event) => {
           if (event === null || event === void 0 ? void 0 : event.target) {
-            const photoEditor = index$1.findParent(event === null || event === void 0 ? void 0 : event.target, 'yoo-photo-editor');
+            const photoEditor = overlays.findParent(event === null || event === void 0 ? void 0 : event.target, 'yoo-photo-editor');
             photoEditor.isReadonly = false;
           }
         }
@@ -398,8 +399,8 @@ const YooChatComponent = class {
           if (!message || !item) {
             return;
           }
-          if ((index$1.isImage(item.value) || index$1.isVideo(item.value)) && typeof item.value === 'string') {
-            index$1.downloadFile(item.value);
+          if ((overlays.isImage(item.value) || overlays.isVideo(item.value)) && typeof item.value === 'string') {
+            overlays.downloadFile(item.value);
           }
         }
       }
@@ -415,7 +416,7 @@ const YooChatComponent = class {
   }
   renderAvatars() {
     var _a, _b, _c, _d;
-    let avatarSize = index$1.isWeb(this.host) ? 'medium' : 'small';
+    let avatarSize = overlays.isWeb(this.host) ? 'medium' : 'small';
     if ((_a = this.advancedOptions) === null || _a === void 0 ? void 0 : _a.popupMode) {
       avatarSize = 'extra-small';
     }
@@ -426,38 +427,38 @@ const YooChatComponent = class {
     if ((_a = this.advancedOptions) === null || _a === void 0 ? void 0 : _a.heading) {
       return this.renderAdvancedHeader();
     }
-    let avatarSize = index$1.isWeb(this.host) ? 'medium' : 'small';
+    let avatarSize = overlays.isWeb(this.host) ? 'medium' : 'small';
     if ((_b = this.advancedOptions) === null || _b === void 0 ? void 0 : _b.popupMode) {
       avatarSize = 'extra-small';
     }
     const popupMode = !!((_c = this.advancedOptions) === null || _c === void 0 ? void 0 : _c.popupMode);
     const textColor = popupMode ? 'light' : 'text-color';
-    const TagType = !index$1.isWeb(this.host) ? 'span' : 'yoo-tooltip';
+    const TagType = !overlays.isWeb(this.host) ? 'span' : 'yoo-tooltip';
     return (index.h("yoo-header", { onClick: () => {
         var _a;
         ((_a = this.advancedOptions) === null || _a === void 0 ? void 0 : _a.headerFn) && this.advancedOptions.headerFn();
-      } }, index.h("yoo-navbar", { class: popupMode ? 'app-color chat no-shadow' : '', centerTitle: false }, (this.closeIcon || !index$1.isWeb(this.host)) && (index.h("yoo-items", { slot: "start" }, index.h("yoo-button", { size: popupMode ? 'small' : undefined, color: textColor, fill: "transparent", shape: "circular", rippleType: "unbounded", onClick: (ev) => {
+      } }, index.h("yoo-navbar", { class: popupMode ? 'app-color chat no-shadow' : '', centerTitle: false }, (this.closeIcon || !overlays.isWeb(this.host)) && (index.h("yoo-items", { slot: "start" }, index.h("yoo-button", { size: popupMode ? 'small' : undefined, color: textColor, fill: "transparent", shape: "circular", rippleType: "unbounded", onClick: (ev) => {
         ev.stopPropagation();
         this.closePage.emit(true);
       } }, index.h("yoo-icon", { size: popupMode ? 'small' : undefined, name: this.closeIcon ? this.closeIcon : 'left', color: textColor })))), this.background ? index.h("yoo-avatar", { size: avatarSize, imgSrc: this.background }) : this.renderAvatars(), index.h("div", { class: { 'heading-container': true, 'light small': popupMode, clickable: !this.background && ((_d = this.users) === null || _d === void 0 ? void 0 : _d.length) === 1 }, onClick: () => this.onHeadingClicked() }, index.h("yoo-truncated-line", { content: this.heading, tooltipPlacement: "bottom" }), !this.isMultiple && !popupMode &&
-      index.h("yoo-truncated-line", { class: "subheading", content: index$1.translate(this.isOnline ? 'ONLINE' : 'OFFLINE'), tooltipPlacement: "bottom" })), index.h("yoo-items", { slot: "end" }, this.canVideoCall && !popupMode && (index.h("yoo-button", { size: popupMode ? 'small' : undefined, color: textColor, fill: "transparent", shape: "circular", rippleType: "unbounded", onClick: () => this.startVideocall.emit(true) }, index.h("yoo-icon", { size: popupMode ? 'small' : undefined, name: "videocamera", color: popupMode ? textColor : 'app-color' }))), !popupMode && !((_e = this.advancedOptions) === null || _e === void 0 ? void 0 : _e.waitlist) && (index.h("yoo-button", { ref: (el) => (this.moreButtonEl = el), color: textColor, fill: "transparent", shape: "circular", rippleType: "unbounded", onClick: (ev) => this.showMore.emit({ host: this.moreButtonEl, ev }) }, index.h("yoo-icon", { name: "more", color: textColor }))), (_g = (_f = this.advancedOptions) === null || _f === void 0 ? void 0 : _f.extraEndActions) === null || _g === void 0 ? void 0 :
+      index.h("yoo-truncated-line", { class: "subheading", content: overlays.translate(this.isOnline ? 'ONLINE' : 'OFFLINE'), tooltipPlacement: "bottom" })), index.h("yoo-items", { slot: "end" }, this.canVideoCall && !popupMode && (index.h("yoo-button", { size: popupMode ? 'small' : undefined, color: textColor, fill: "transparent", shape: "circular", rippleType: "unbounded", onClick: () => this.startVideocall.emit(true) }, index.h("yoo-icon", { size: popupMode ? 'small' : undefined, name: "videocamera", color: popupMode ? textColor : 'app-color' }))), !popupMode && !((_e = this.advancedOptions) === null || _e === void 0 ? void 0 : _e.waitlist) && (index.h("yoo-button", { ref: (el) => (this.moreButtonEl = el), color: textColor, fill: "transparent", shape: "circular", rippleType: "unbounded", onClick: (ev) => this.showMore.emit({ host: this.moreButtonEl, ev }) }, index.h("yoo-icon", { name: "more", color: textColor }))), (_g = (_f = this.advancedOptions) === null || _f === void 0 ? void 0 : _f.extraEndActions) === null || _g === void 0 ? void 0 :
       _g.map((action) => {
         return (index.h(TagType, { hoverable: true, content: action.text, placement: "top" }, index.h("yoo-button", { size: popupMode ? 'small' : undefined, onClick: (ev) => action.handler(ev), shape: "circular", fill: "transparent" }, index.h("yoo-icon", { size: popupMode ? 'small' : 'medium', class: action.cssClass, name: action.icon, color: action.color }))));
       })))));
   }
   renderAdvancedHeader() {
     return (index.h("div", { class: "advanced-heading-container" }, index.h("div", { class: "advanced-heading" }, index.h("div", { class: "advanced-heading-content" }, index.h("yoo-avatar", { user: this.advancedOptions.user, size: "small" }), index.h("div", null, this.advancedOptions.heading), this.advancedOptions.canClose && (index.h("yoo-icon", { onClick: () => {
-        index$1.closeModal(null);
+        overlays.closeModal(null);
       }, color: "light", name: "close", size: "medium" }))), index.h("div", { class: "advanced-heading-subheading" }, this.advancedOptions.subheading)), index.h("yoo-ion-footer", null, index.h("yoo-copyright", null))));
   }
   renderEditableHeader() {
-    return (index.h("yoo-header", { class: "delete-mode-header" }, index.h("yoo-navbar", null, index.h("yoo-items", { slot: "start" }, index.h("yoo-button", { color: "app-color", fill: "transparent", animated: false, onClick: () => this.onSelectMessages(true) }, index$1.translate('SELECTALL'))), index.h("yoo-items", { slot: "end" }, index.h("yoo-button", { color: "app-color", fill: "transparent", animated: false, onClick: () => this.onCloseDeleteMode() }, index$1.translate('CANCEL'))))));
+    return (index.h("yoo-header", { class: "delete-mode-header" }, index.h("yoo-navbar", null, index.h("yoo-items", { slot: "start" }, index.h("yoo-button", { color: "app-color", fill: "transparent", animated: false, onClick: () => this.onSelectMessages(true) }, overlays.translate('SELECTALL'))), index.h("yoo-items", { slot: "end" }, index.h("yoo-button", { color: "app-color", fill: "transparent", animated: false, onClick: () => this.onCloseDeleteMode() }, overlays.translate('CANCEL'))))));
   }
   renderInputBar() {
     return (index.h("div", { class: "input-bar-container", ref: (el) => (this.inputBarContainerElement = el) }, index.h("slot", { name: "input-bar" })));
   }
   renderDeleteModeFooter() {
-    return (index.h("div", { class: 'delete-mode-footer ' + (this.selectedTimeTokens.length > 0 ? 'app-color' : 'disabled') }, index.h("div", { class: "inner-container", onClick: () => this.onDeleteMessages() }, index.h("yoo-icon", { name: "delete" }), " ", index$1.translate(this.selectedTimeTokens.length <= 1 ? 'DELETE_MESSAGE' : 'DELETE_MESSAGES', { number: this.selectedTimeTokens.length }))));
+    return (index.h("div", { class: 'delete-mode-footer ' + (this.selectedTimeTokens.length > 0 ? 'app-color' : 'disabled') }, index.h("div", { class: "inner-container", onClick: () => this.onDeleteMessages() }, index.h("yoo-icon", { name: "delete" }), " ", overlays.translate(this.selectedTimeTokens.length <= 1 ? 'DELETE_MESSAGE' : 'DELETE_MESSAGES', { number: this.selectedTimeTokens.length }))));
   }
   renderTypingIcon() {
     return [
@@ -465,7 +466,7 @@ const YooChatComponent = class {
     ];
   }
   renderUserName(user) {
-    return (user === null || user === void 0 ? void 0 : user.firstName) && (user === null || user === void 0 ? void 0 : user.lastName) && index.h("div", { class: "username" }, `${user.firstName} ${user.lastName} ${index$1.translate('ISTYPING')}...`);
+    return (user === null || user === void 0 ? void 0 : user.firstName) && (user === null || user === void 0 ? void 0 : user.lastName) && index.h("div", { class: "username" }, `${user.firstName} ${user.lastName} ${overlays.translate('ISTYPING')}...`);
   }
   renderUser(user) {
     return index.h("div", { class: "user-container" }, user && index.h("yoo-avatar", { size: "medium", user: user }));
@@ -483,18 +484,18 @@ const YooChatComponent = class {
   }
   renderNotificationMessage(m) {
     const { hidden, notificationTranslation, notificationAvatar } = m.options.notificationParams;
-    return !hidden && (index.h("div", { class: "notification" }, !!notificationAvatar && index.h("yoo-avatar", { size: "small", user: notificationAvatar }), notificationTranslation && index$1.translate(notificationTranslation.key, notificationTranslation.keyParams) || m.content));
+    return !hidden && (index.h("div", { class: "notification" }, !!notificationAvatar && index.h("yoo-avatar", { size: "small", user: notificationAvatar }), notificationTranslation && overlays.translate(notificationTranslation.key, notificationTranslation.keyParams) || m.content));
   }
   renderMessages() {
     const getFormattedDateAtIndex = (i) => {
       var _a;
       const date = (_a = this.messages[i]) === null || _a === void 0 ? void 0 : _a.time;
-      return index$1.dateFormat(date, chatHelpers.getDateFormats(date).grouped);
+      return overlays.dateFormat(date, chatHelpers.getDateFormats(date).grouped);
     };
     return this.messages.map((m, i) => {
       var _a, _b;
       const { notificationParams, messageReceivedInfo } = (m === null || m === void 0 ? void 0 : m.options) || {};
-      const isDeleteable = !notificationParams && !m.readonly && m.timetoken !== ((_a = this.newMessage) === null || _a === void 0 ? void 0 : _a.timetoken) && (((_b = m === null || m === void 0 ? void 0 : m.author) === null || _b === void 0 ? void 0 : _b._id) === index$1.getSession().userId || this.forceDelete);
+      const isDeleteable = !notificationParams && !m.readonly && m.timetoken !== ((_a = this.newMessage) === null || _a === void 0 ? void 0 : _a.timetoken) && (((_b = m === null || m === void 0 ? void 0 : m.author) === null || _b === void 0 ? void 0 : _b._id) === overlays.getSession().userId || this.forceDelete);
       const previousDate = getFormattedDateAtIndex(i - 1);
       const currentDate = getFormattedDateAtIndex(i);
       return !(m === null || m === void 0 ? void 0 : m.deleted) && [
@@ -506,10 +507,10 @@ const YooChatComponent = class {
       ];
     });
   }
-  renderMessage(message, index$2, messageReceivedInfo) {
+  renderMessage(message, index$1, messageReceivedInfo) {
     var _a, _b, _c;
-    const displayUserDetail = (user) => index$1.getAsyncExtraData({ type: 'user-detail', params: { user } });
-    return (index.h("yoo-chat-message", { class: { expanded: !((_a = this.advancedOptions) === null || _a === void 0 ? void 0 : _a.popupMode) }, onRepliedMessageClicked: (ev) => this.onRepliedMessageClicked(ev), id: (_b = message.timetoken) === null || _b === void 0 ? void 0 : _b.toString(), key: message.timetoken, hasOptions: index$1.isWeb(this.host), message: { ...message, isLast: this.getLastMessage(index$2), isFirst: this.getFirstMessage(index$2) }, asyncRender: true, allUsers: this.allUsers, isGroup: this.isMultiple, receivedByOthers: (messageReceivedInfo === null || messageReceivedInfo === void 0 ? void 0 : messageReceivedInfo.length) === ((_c = this.otherIds) === null || _c === void 0 ? void 0 : _c.length), onPresshold: (ev) => this.onHighlightMessage(ev), containerWidth: this.host.clientWidth, preventVideoPreloading: this.preventVideoPreloading, onUsernameClicked: (ev) => displayUserDetail(ev === null || ev === void 0 ? void 0 : ev.detail), onAvatarClicked: (ev) => displayUserDetail(ev === null || ev === void 0 ? void 0 : ev.detail) }));
+    const displayUserDetail = (user) => overlays.getAsyncExtraData({ type: 'user-detail', params: { user } });
+    return (index.h("yoo-chat-message", { class: { expanded: !((_a = this.advancedOptions) === null || _a === void 0 ? void 0 : _a.popupMode) }, onRepliedMessageClicked: (ev) => this.onRepliedMessageClicked(ev), id: (_b = message.timetoken) === null || _b === void 0 ? void 0 : _b.toString(), key: message.timetoken, hasOptions: overlays.isWeb(this.host), message: { ...message, isLast: this.getLastMessage(index$1), isFirst: this.getFirstMessage(index$1) }, asyncRender: true, allUsers: this.allUsers, isGroup: this.isMultiple, receivedByOthers: (messageReceivedInfo === null || messageReceivedInfo === void 0 ? void 0 : messageReceivedInfo.length) === ((_c = this.otherIds) === null || _c === void 0 ? void 0 : _c.length), onPresshold: (ev) => this.onHighlightMessage(ev), containerWidth: this.host.clientWidth, preventVideoPreloading: this.preventVideoPreloading, onUsernameClicked: (ev) => displayUserDetail(ev === null || ev === void 0 ? void 0 : ev.detail), onAvatarClicked: (ev) => displayUserDetail(ev === null || ev === void 0 ? void 0 : ev.detail) }));
   }
   renderBroadcastActions(action) {
     const actionType = action.actionType;
@@ -527,7 +528,7 @@ const YooChatComponent = class {
     }
   }
   renderBroadcastMessage(message) {
-    return (index.h("div", { class: "broadcast-message" }, index.h("yoo-avatar", { size: "medium", user: message.author }), index.h("div", { class: "content-container" }, index.h("div", { class: "title" }, index$1.getUserDisplayName(message.author)), index.h("div", { class: "content" }, message.content))));
+    return (index.h("div", { class: "broadcast-message" }, index.h("yoo-avatar", { size: "medium", user: message.author }), index.h("div", { class: "content-container" }, index.h("div", { class: "title" }, overlays.getUserDisplayName(message.author)), index.h("div", { class: "content" }, message.content))));
   }
   renderShareOptions(shareOptions) {
     var _a;
@@ -537,14 +538,14 @@ const YooChatComponent = class {
     var _a, _b;
     return (index.h("div", { class: "broadcast-bottom-container", onClick: (ev) => {
         ev.stopPropagation();
-      } }, index.h("div", { class: "floating-icon-container", ref: (el) => (this.floatingContainer = el) }), (this.broadcastParams.isLive || this.broadcastParams.broadcastType !== index$2.BroadcastType.broadcaster) && [
-      !!((_a = this.messages) === null || _a === void 0 ? void 0 : _a.length) && (index.h("yoo-ion-content", { onIonScroll: ev => this.onIonScroll(ev), class: { hide: this.inputFocused }, scrollEvents: true, ref: (el) => (this.ionContent = el) }, index.h("div", { class: "message-inner-container" }, (_b = this.messages) === null || _b === void 0 ? void 0 : _b.filter(m => !index$1.isNullOrUndefined(m)).map(m => this.renderBroadcastMessage(m))))),
+      } }, index.h("div", { class: "floating-icon-container", ref: (el) => (this.floatingContainer = el) }), (this.broadcastParams.isLive || this.broadcastParams.broadcastType !== index$1.BroadcastType.broadcaster) && [
+      !!((_a = this.messages) === null || _a === void 0 ? void 0 : _a.length) && (index.h("yoo-ion-content", { onIonScroll: ev => this.onIonScroll(ev), class: { hide: this.inputFocused }, scrollEvents: true, ref: (el) => (this.ionContent = el) }, index.h("div", { class: "message-inner-container" }, (_b = this.messages) === null || _b === void 0 ? void 0 : _b.filter(m => !overlays.isNullOrUndefined(m)).map(m => this.renderBroadcastMessage(m))))),
       this.broadcastParams.isLive && this.renderInputBar()
     ], this.broadcastParams.finished && this.broadcastParams.shareOptions && this.renderShareOptions(this.broadcastParams.shareOptions), !this.broadcastParams.isLive && !this.broadcastParams.finished && this.broadcastParams.footerAction && button_factory.getButton(this.broadcastParams.footerAction)));
   }
   renderVideo() {
     var _a;
-    const notCordova = !index$1.isNativeMobile() && this.broadcastParams.isLive;
+    const notCordova = !overlays.isNativeMobile() && this.broadcastParams.isLive;
     if (!((_a = this.broadcastParams) === null || _a === void 0 ? void 0 : _a.videoSrc) && !notCordova) {
       return;
     }
@@ -586,7 +587,7 @@ const YooChatComponent = class {
     if (!this.showCountdown) {
       return;
     }
-    const countDownDisplay = index$1.getFormattedCountDownToDisplay(this.countDownValue, true);
+    const countDownDisplay = overlays.getFormattedCountDownToDisplay(this.countDownValue, true);
     const countDownProgress = lodash.isFinite(this.countDownValue) && lodash.isFinite(this.countDownStartValue) ? (this.countDownValue / this.countDownStartValue) * 100 : 0;
     const onCountingDown = (ev) => {
       if ((ev === null || ev === void 0 ? void 0 : ev.detail) === 100) {
@@ -616,7 +617,7 @@ const YooChatComponent = class {
       !this.broadcastParams.isLive &&
       !this.broadcastParams.finished &&
       isBroadcaster &&
-      !index$1.isWeb(this.host) &&
+      !overlays.isWeb(this.host) &&
       index.h("yoo-icon", { name: "close", color: "light", onClick: () => {
           this.broadcastParams.closeHandler();
         } })), (((_a = this.broadcastParams) === null || _a === void 0 ? void 0 : _a.headerTopActions) || this.broadcastParams.isLive) && (index.h("div", { class: "right" }, (((_b = this.broadcastParams) === null || _b === void 0 ? void 0 : _b.headerTopActions) || []).map((action) => {
@@ -625,11 +626,11 @@ const YooChatComponent = class {
         ev.stopPropagation();
       } }, this.broadcastParams.statusActions.map((action) => {
       return this.renderBroadcastActions(action);
-    }), this.broadcastParams.isLive && isBroadcaster && this.renderTimer())), this.renderBroadcastBottom(), this.broadcastParams.finished && this.renderOverlay(), this.showBackgroundVideo && this.renderVideo(), index$1.isWeb(this.host) && (index.h("div", { class: "video-container" }, index.h("slot", { name: "video" })))));
+    }), this.broadcastParams.isLive && isBroadcaster && this.renderTimer())), this.renderBroadcastBottom(), this.broadcastParams.finished && this.renderOverlay(), this.showBackgroundVideo && this.renderVideo(), overlays.isWeb(this.host) && (index.h("div", { class: "video-container" }, index.h("slot", { name: "video" })))));
   }
   renderBroadcastContainer() {
-    const isBroadcaster = this.broadcastParams.broadcastType === index$2.BroadcastType.broadcaster;
-    return this.broadcastParams.isPlayback && !index$1.isWeb(this.host) ? (index.h("yoo-swipe-container", { class: "dark", onSwipedDown: ev => this.onSwipeDown(ev) }, this.renderBroadcastInnerContainer(isBroadcaster))) : (this.renderBroadcastInnerContainer(isBroadcaster));
+    const isBroadcaster = this.broadcastParams.broadcastType === index$1.BroadcastType.broadcaster;
+    return this.broadcastParams.isPlayback && !overlays.isWeb(this.host) ? (index.h("yoo-swipe-container", { class: "dark", onSwipedDown: ev => this.onSwipeDown(ev) }, this.renderBroadcastInnerContainer(isBroadcaster))) : (this.renderBroadcastInnerContainer(isBroadcaster));
   }
   renderSimpleChat() {
     return [
@@ -637,7 +638,7 @@ const YooChatComponent = class {
       index.h("yoo-ion-content", { onIonScroll: ev => this.onIonScroll(ev), class: {
           'bg-light': !this.transparent,
           'simple-content hide': true
-        }, forceOverscroll: false, scrollEvents: true, ref: (el) => (this.ionContent = el) }, !index$1.isWeb(this.host) && index.h("yoo-ion-refresher", { class: { transparent: this.transparent }, slot: "fixed", onIonRefresh: () => this.onPullToRefresh(), disabled: this.deleteModeEnabled, ref: (el) => (this.refresher = el) }, index.h("yoo-ion-refresher-content", { pullingText: index$1.translate('PULLTOREFRESH') })), index.h("div", { onClick: () => index$1.dispatchCustomEvent('hideBottomDialog', window), class: { 'messages-container': true, 'iphone-x': index$1.isIphoneX() } }, this.messages && this.renderMessages(), this.showLoader && index.h("yoo-loader", { class: "loader transparent" }), this.isSomeoneTyping && this.renderSomeoneIsTyping())),
+        }, forceOverscroll: false, scrollEvents: true, ref: (el) => (this.ionContent = el) }, !overlays.isWeb(this.host) && index.h("yoo-ion-refresher", { class: { transparent: this.transparent }, slot: "fixed", onIonRefresh: () => this.onPullToRefresh(), disabled: this.deleteModeEnabled, ref: (el) => (this.refresher = el) }, index.h("yoo-ion-refresher-content", { pullingText: overlays.translate('PULLTOREFRESH') })), index.h("div", { onClick: () => overlays.dispatchCustomEvent('hideBottomDialog', window), class: { 'messages-container': true, 'iphone-x': overlays.isIphoneX() } }, this.messages && this.renderMessages(), this.showLoader && index.h("yoo-loader", { class: "loader transparent" }), this.isSomeoneTyping && this.renderSomeoneIsTyping())),
       this.hideInputBar ? null : this.deleteModeEnabled ? this.renderDeleteModeFooter() : this.renderInputBar()
     ];
   }
@@ -647,7 +648,7 @@ const YooChatComponent = class {
         broadcast: this.broadcastMode,
         live: (_a = this.broadcastParams) === null || _a === void 0 ? void 0 : _a.isLive,
         popup: (_b = this.advancedOptions) === null || _b === void 0 ? void 0 : _b.popupMode,
-        broadcaster: ((_c = this.broadcastParams) === null || _c === void 0 ? void 0 : _c.broadcastType) === index$2.BroadcastType.broadcaster,
+        broadcaster: ((_c = this.broadcastParams) === null || _c === void 0 ? void 0 : _c.broadcastType) === index$1.BroadcastType.broadcaster,
         ...commonHelpers.getAppContext(this.host)
       } }, this.broadcastMode ? this.renderBroadcastContainer() : this.renderSimpleChat()));
   }

package/dist/cjs/yoo-collapsible.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 collapsibleCss = ":host{display:block;width:100%;color:var(--dark, #000000);background:var(--light, #ffffff)}.outer-container{position:relative;width:100%;min-height:var(--spacing-32, 2rem)}.outer-container.collapsed{max-height:60px;overflow:hidden}.header-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-sizing:border-box;box-sizing:border-box;padding-top:var(--spacing-08, 0.5rem);cursor:pointer}.header-container yoo-icon.prefix{margin-right:var(--spacing-08, 0.5rem)}.header-container .title{padding-right:var(--spacing-08, 0.5rem)}.header-container .title.pdf{padding:0;font-weight:bold}.header-container.button yoo-button{width:6.25rem}.header-container yoo-button.deletable{position:absolute;right:0}.arrow{margin-right:var(--spacing-16, 1rem);-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:-webkit-transform 300ms;transition:-webkit-transform 300ms;transition:transform 300ms;transition:transform 300ms, -webkit-transform 300ms}.arrow.down{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.slot-container{position:relative;display:block;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:unset;padding-top:var(--spacing-08, 0.5rem)}.slot-container.collapsed{display:none !important;height:0}:host(.stable) .text-container{color:var(--stable, #adadad)}:host(.stable) .slot-container{color:initial}:host(.padding) .outer-container .text-container{padding:0 var(--spacing-16, 1rem)}:host(.simple) .text-container,:host(.simple) span{padding:0;color:var(--stable, #adadad)}:host(.simple) yoo-icon.prefix{margin-right:var(--spacing-08, 0.5rem)}:host(.form) .outer-container{padding:var(--spacing-08, 0.5rem) 0;padding-top:0;background:transparent}:host(.form) .outer-container:not(.collapsed){width:auto;margin:0}:host(.form) .outer-container.collapsed .text-container{padding:0}:host(.form) .outer-container .text-container{padding:0}:host(.form) .outer-container .text-container .title{padding-left:0;font-weight:bold;font-size:var(--font-size-16, 1rem)}:host(.form) .outer-container .slot-container{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;-webkit-column-gap:var(--spacing-08, 0.5rem);-moz-column-gap:var(--spacing-08, 0.5rem);column-gap:var(--spacing-08, 0.5rem)}:host(.form) .outer-container .slot-container:not(.collapsed){width:auto;margin-top:var(--spacing-08, 0.5rem);padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);background-color:var(--stable-ultralight, #fafafa);border:solid var(--border-width-01, 0.0625rem) var(--stable-alt, #d0d0d0);border-radius:var(--spacing-08, 0.5rem)}:host(.form[header=\"List of tasks\"]) .slot-container:not(.collapsed){padding-top:var(--spacing-16, 1rem)}:host(.form.subform) .outer-container .slot-container:not(.collapsed){border:none;border-top:solid var(--border-width-01, 0.0625rem) var(--stable-alt, #d0d0d0);border-radius:0}:host(.no-padding) .text-container .title{padding:0}:host(.no-padding.lesson-detail:not(.padding)) .text-container{padding:0}:host(.secondary) .text-container{width:100%;padding-bottom:var(--spacing-08, 0.5rem);border-bottom:var(--border-width-01, 0.0625rem) solid var(--dark-20, rgba(0, 0, 0, 0.2))}:host(.secondary) .text-container .title{padding:0;color:var(--dark, #000000);font-weight:bold}:host(.secondary) .text-container yoo-icon{margin-left:auto}:host(.secondary) .slot-container{-webkit-transform:none;transform:none}:host(.transparent){background:transparent}:host(.transparent) .slot-container{padding-top:0.3rem}:host(.center) .outer-container .header-container{-ms-flex-pack:center;justify-content:center}:host(.lesson-detail) .outer-container .text-container{-ms-flex-pack:justify;justify-content:space-between}:host(.lesson-detail) .outer-container .header-container{padding-bottom:var(--spacing-08, 0.5rem)}:host(.lesson-detail) .outer-container .slot-container{padding:0}:host(.bold) .outer-container .title{padding-left:0;font-weight:bold}:host(.subform){margin-top:0 !important;background:transparent}:host(.subform) .outer-container{min-height:auto;padding-bottom:0}:host(.subform) .outer-container .slot-container:not(.collapsed){margin-top:var(--spacing-04, 0.25rem);padding:0}:host(.subform) .outer-container .header-container .title{color:var(--text-color, #807f83);font-size:var(--font-size-14, 0.875rem)}:host(.large) .outer-container .title{font-size:var(--font-size-16, 1rem)}:host(.full-width) .outer-container .title{-ms-flex:1;flex:1}";
 
@@ -53,8 +54,8 @@ const YooCollapsibleComponent = class {
         this.slotContainer.classList.add('collapsed');
         this.outerContainer.classList.add('collapsed');
       }
-      if (this.header === index$1.translate('YOOBICMORE') && !this.slotHeader && ((_b = (_a = this.outerContainer) === null || _a === void 0 ? void 0 : _a.firstChild) === null || _b === void 0 ? void 0 : _b.firstChild)) {
-        this.outerContainer.firstChild.firstChild.innerText = index$1.translate(this.showContent ? 'YOOBICLESS' : 'YOOBICMORE');
+      if (this.header === overlays.translate('YOOBICMORE') && !this.slotHeader && ((_b = (_a = this.outerContainer) === null || _a === void 0 ? void 0 : _a.firstChild) === null || _b === void 0 ? void 0 : _b.firstChild)) {
+        this.outerContainer.firstChild.firstChild.innerText = overlays.translate(this.showContent ? 'YOOBICLESS' : 'YOOBICMORE');
       }
     };
   }

package/dist/cjs/yoo-color-selector.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 colorSelectorCss = ".bg-accent{background-color:var(--accent, #276ef1) !important}.accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}.border-accent{border:0.0625rem solid 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)}.border-app-color{border:0.0625rem solid var(--app-color, #5a30f4)}.bg-danger{background-color:var(--danger, #d44333) !important}.danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}.border-danger{border:0.0625rem solid var(--danger, #d44333)}.bg-dark{background-color:var(--dark, #000000) !important}.dark{color:var(--dark, #000000);fill:var(--dark, #000000)}.border-dark{border:0.0625rem solid var(--dark, #000000)}.bg-energized{background-color:var(--energized, #ffc043) !important}.energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}.border-energized{border:0.0625rem solid var(--energized, #ffc043)}.bg-info{background-color:var(--info, #d84c96) !important}.info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}.border-info{border:0.0625rem solid var(--info, #d84c96)}.bg-light{background-color:var(--light, #ffffff) !important}.light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}.border-light{border:0.0625rem solid var(--light, #ffffff)}.bg-stable{background-color:var(--stable, #adadad) !important}.stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}.border-stable{border:0.0625rem solid 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)}.border-stable-alt{border:0.0625rem solid 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)}.border-stable-light{border:0.0625rem solid 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)}.border-stable-ultralight{border:0.0625rem solid var(--stable-ultralight, #fafafa)}.bg-success{background-color:var(--success, #3aa76d) !important}.success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}.border-success{border:0.0625rem solid 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)}.border-text-color{border:0.0625rem solid var(--text-color, #807f83)}.bg-warning{background-color:var(--warning, #ed6e33) !important}.warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}.border-warning{border:0.0625rem solid var(--warning, #ed6e33)}.bg-wood{background-color:var(--wood, #99644c) !important}.wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}.border-wood{border:0.0625rem solid var(--wood, #99644c)}@-webkit-keyframes scale-up{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.15);transform:scale(1.15)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes scale-up{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.15);transform:scale(1.15)}100%{-webkit-transform:scale(1);transform:scale(1)}}:host{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:35rem;height:3.5rem;background-color:var(--dark-20, rgba(0, 0, 0, 0.2));cursor:pointer}:host>*{margin:0 var(--spacing-08, 0.5rem) 0 auto}:host yoo-form-color-picker{position:relative;background:conic-gradient(red, orange, yellow, lime, aqua, blue, magenta)}:host yoo-form-color-picker #preview{position:absolute;top:0;right:0;width:1.25rem;height:1.25rem;background:black;border-radius:50%;-webkit-transform:translate(25%, -25%);transform:translate(25%, -25%)}:host yoo-form-color-picker,:host .item{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--spacing-32, 2rem);height:var(--spacing-32, 2rem);border:0.1rem solid var(--light, #ffffff);border-radius:50%;-webkit-transition:background-color 0.25s ease-in-out;transition:background-color 0.25s ease-in-out}:host yoo-form-color-picker#picker yoo-icon,:host .item#picker yoo-icon{fill:var(--light, #ffffff)}:host yoo-form-color-picker:active,:host .item:active{-webkit-animation:scale-up 0.75s ease-in-out forwards;animation:scale-up 0.75s ease-in-out forwards}:host([disable-picker]) #picker{background-color:var(--stable-ultralight, #fafafa)}:host([disable-picker]) #picker yoo-icon{fill:var(--stable-alt, #d0d0d0)}";
 
@@ -45,11 +46,11 @@ const YooColorSelectorComponent = class {
   }
   renderColorPicker() {
     const icon = this.isPickedColorSelected ? 'tick' : 'color-picker';
-    return index.h("div", { class: "item", id: "picker", ...(!this.disablePicker && { style: { backgroundColor: this.pickedColor } }) }, index.h("yoo-icon", { name: icon, color: index$1.getContrastColor(this.pickedColor), onClick: () => this.pickColor() }));
+    return index.h("div", { class: "item", id: "picker", ...(!this.disablePicker && { style: { backgroundColor: this.pickedColor } }) }, index.h("yoo-icon", { name: icon, color: overlays.getContrastColor(this.pickedColor), onClick: () => this.pickColor() }));
   }
   renderColorSelector() {
     // color-picker dialog not supported on IOS
-    return !index$1.isIOS() && index.h("yoo-form-color-picker", { displayPreviewColor: false, color: null, hideLabel: true, onColorSelected: (ev) => this.selectedColor = ev === null || ev === void 0 ? void 0 : ev.detail }, index.h("div", { id: "preview", style: { backgroundColor: this.selectedColor } }));
+    return !overlays.isIOS() && index.h("yoo-form-color-picker", { displayPreviewColor: false, color: null, hideLabel: true, onColorSelected: (ev) => this.selectedColor = ev === null || ev === void 0 ? void 0 : ev.detail }, index.h("div", { id: "preview", style: { backgroundColor: this.selectedColor } }));
   }
   render() {
     return index.h(index.Host, { onMouseDown: ev => ev.preventDefault(), onClick: ev => ev.stopPropagation() }, [this.renderColorPicker(),