@yoobic/yobi 8.2.2 → 8.3.0-2

package/dist/cjs/yoo-links-preview.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 formInputHelpers = require('./form-input-helpers-a04f76d2.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.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 linksPreviewCss = ":host{position:relative;display:block;color:var(--dark, #000000);background:var(--stable-ultralight, #fafafa);-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 #preview{display:grid;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}:host #preview #image-fallback{width:100%;height:var(--card-media-height, 14.375rem);background:var(--stable-light, #f1f1f1)}:host #preview #image-fallback yoo-icon[name=image-offline]{fill:var(--stable, #adadad);position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}:host #preview #image-fallback yoo-icon[name=image-offline].rtl{top:50%;right:50%;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%)}:host #preview #image{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin:0 auto}:host #preview #description{display:inline-grid;-ms-flex-direction:column;flex-direction:column;grid-gap:var(--spacing-04, 0.25rem);-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;padding:var(--spacing-08, 0.5rem)}:host #preview #description #title{color:var(--dark, #000000);font-weight:bold;font-size:var(--font-size-16, 1rem);overflow:hidden}@supports (display: -webkit-box){:host #preview #description #title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}:host #preview #description #link{font-weight:bold;font-size:var(--font-size-12, 0.75rem)}:host #preview #description .url{margin-top:auto;color:var(--text-color, #807f83);font-size:var(--font-size-14, 0.875rem);text-decoration:none;overflow:hidden}@supports (display: -webkit-box){:host #preview #description .url{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}}:host.multi-link-previews #preview{margin-bottom:var(--spacing-16, 1rem)}:host.big-link-previews{padding-top:var(--spacing-16, 1rem)}:host.big-link-previews #preview{-ms-flex-direction:column;flex-direction:column}:host.big-link-previews #preview #image,:host.big-link-previews #preview #image-fallback{width:auto;height:auto}:host([closeable]) yoo-icon[name=cross]{position:absolute;top:50%;right:var(--spacing-04, 0.25rem);z-index:15;-webkit-transform:translateY(-50%);transform:translateY(-50%)}:host(:not([inline])) #preview yoo-img{border-top-left-radius:var(--border-radius-04, 0.25rem);border-top-right-radius:var(--border-radius-04, 0.25rem)}:host([inline]) #preview{height:5rem;margin:auto var(--spacing-08, 0.5rem)}:host([inline]) #preview:not(.no-image){grid-template-columns:1fr 2fr;gap:var(--spacing-16, 1rem)}:host([inline]) #preview #image yoo-img{--image-height:4.5rem;max-height:4.5rem;border-radius:var(--border-radius-04, 0.25rem)}:host([inline]) #preview #description{padding:inherit}:host([inline]) #preview #description #title{overflow:unset;font-size:var(--font-size-12, 0.75rem);white-space:unset;text-overflow:unset;overflow:hidden}@supports (display: -webkit-box){:host([inline]) #preview #description #title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}";
 
@@ -47,7 +48,7 @@ const YooLinksPreviewComponent = class {
       links = this.retrievedLinkPreviews.filter((item) => item).map((link) => link.originalURL || link.url);
     }
     else {
-      links = index$1.replaceAndGetAllLinks(this.value, ' ').links;
+      links = overlays.replaceAndGetAllLinks(this.value, ' ').links;
     }
     if (links === null || links === void 0 ? void 0 : links.length) {
       // do not keep the links that were already marked as removed
@@ -67,7 +68,7 @@ const YooLinksPreviewComponent = class {
           if (!this.retrievedLinkPreviews[index]) {
             this.retrievedLinkPreviews[index] = { isLoading: true, url: link, title: link };
           }
-          promises.push(index$1.getAsyncExtraData({ type: 'links-preview', params: { link } }).then((ret) => {
+          promises.push(overlays.getAsyncExtraData({ type: 'links-preview', params: { link } }).then((ret) => {
             var _a;
             if (ret) {
               ret.originalURL = link;
@@ -111,10 +112,10 @@ const YooLinksPreviewComponent = class {
     }
   }
   unlockScreen() {
-    index$1.screenOrientationUnlock();
+    overlays.screenOrientationUnlock();
   }
   lockScreen() {
-    index$1.screenOrientationLock();
+    overlays.screenOrientationLock();
   }
   onRemoveLink(ev, link) {
     ev.stopPropagation();
@@ -137,7 +138,7 @@ const YooLinksPreviewComponent = class {
   }
   renderPreview(link) {
     const { url, originalURL, image, title, isLoading, target } = link;
-    const showTitleOnly = index$1.isDeeplink(url) || !index$1.isImage(image);
+    const showTitleOnly = overlays.isDeeplink(url) || !overlays.isImage(image);
     return index.h("section", { id: "preview", class: { 'no-image': showTitleOnly }, onClick: (ev) => this.onLinkPreviewClicked(ev, link) }, isLoading && index.h("yoo-loader", { class: "absolute backdrop-transparent" }), this.closeable && this.renderCloseIcon(link), !showTitleOnly && image && this.renderImage(image), this.showDescription && this.renderLinkDescription(url || originalURL, title, showTitleOnly, target));
   }
   renderPreviews() {

package/dist/cjs/yoo-loader.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 loaderCss = ":host([color=accent]) circle{stroke:var(--accent, #276ef1)}:host([color=anthracite]) circle{stroke:var(--anthracite, #1a1a1a)}:host([color=app-color]) circle{stroke:var(--app-color, #5a30f4)}:host([color=danger]) circle{stroke:var(--danger, #d44333)}:host([color=dark]) circle{stroke:var(--dark, #000000)}:host([color=energized]) circle{stroke:var(--energized, #ffc043)}:host([color=info]) circle{stroke:var(--info, #d84c96)}:host([color=light]) circle{stroke:var(--light, #ffffff)}:host([color=stable]) circle{stroke:var(--stable, #adadad)}:host([color=stable-alt]) circle{stroke:var(--stable-alt, #d0d0d0)}:host([color=stable-light]) circle{stroke:var(--stable-light, #f1f1f1)}:host([color=stable-ultralight]) circle{stroke:var(--stable-ultralight, #fafafa)}:host([color=success]) circle{stroke:var(--success, #3aa76d)}:host([color=text-color]) circle{stroke:var(--text-color, #807f83)}:host([color=warning]) circle{stroke:var(--warning, #ed6e33)}:host([size=extra-small]) svg{width:var(--icon-size-01, 1rem)}:host([size=extra-small]) p{font-size:var(--font-size-12, 0.75rem)}:host([size=small]) svg{width:var(--icon-size-02, 1.5rem)}:host([size=small]) p{font-size:var(--font-size-12, 0.75rem)}:host([size=medium]) svg{width:var(--icon-size-03, 2rem)}:host([size=medium]) p{font-size:var(--font-size-14, 0.875rem)}:host([size=large]) svg{width:var(--icon-size-04, 3rem)}:host([size=large]) p{font-size:var(--font-size-16, 1rem)}:host([size=extra-large]) svg{width:var(--icon-size-05, 4rem)}:host([size=extra-large]) p{font-size:var(--font-size-18, 1.125rem)}:host([size=extra-extra-large]) svg{width:var(--icon-size-06, 5rem)}:host([size=extra-extra-large]) p{font-size:var(--font-size-20, 1.25rem)}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host circle{fill:none;stroke-dasharray:165;stroke-width:6}:host p{margin:var(--spacing-08, 0.5rem) 0 0 0;color:var(--stable, #adadad)}:host([animated]) svg{-webkit-animation:rotation 0.7s linear infinite;animation:rotation 0.7s linear infinite}@-webkit-keyframes rotation{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotation{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}:host([hidden]){display:none}:host(.absolute){position:absolute;top:0;right:0;bottom:0;left:0;z-index:9}:host(.fixed){position:fixed;top:0;right:0;bottom:0;left:0;z-index:9}:host(.backdrop){position:absolute;z-index:20500;background:var(--light-80, rgba(255, 255, 255, 0.8))}:host(.backdrop.fixed){position:fixed}:host(.backdrop-dark-40){background:var(--dark-40, rgba(0, 0, 0, 0.4))}:host(.backdrop-dark){background:var(--dark, #000000)}:host(.backdrop-light){background:var(--light, #ffffff)}:host(.backdrop-transparent){background:var(--stable-light-80, rgba(241, 241, 241, 0.8))}";
 
@@ -29,7 +30,7 @@ const YooLoaderComponent = class {
   }
   render() {
     var _a;
-    const label = index$1.translate((_a = this.text) === null || _a === void 0 ? void 0 : _a.trim());
+    const label = overlays.translate((_a = this.text) === null || _a === void 0 ? void 0 : _a.trim());
     return (index.h(index.Host, null, !this.hideIcon && index.h("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid" }, index.h("circle", { cx: "50", cy: "50", r: "35" })), !!label && index.h("p", null, label, "\u2026")));
   }
 };

package/dist/cjs/yoo-location-info.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 locationInfoCss = ":host .outer-container{margin-top:0.5rem;margin-bottom:0.5rem;padding:0.5rem 1rem;background:var(--light, #ffffff)}:host .outer-container .menu-content{padding-bottom:1rem;line-height:1.75}:host .outer-container .menu-content span{color:var(--dark, #000000);font-weight:var(--font-weight-700, 700);font-size:var(--font-size-18, 1.125rem);line-height:1em}:host .outer-container .menu-content .menu-content-contact{text-decoration:none}:host .outer-container .menu-content .menu-content-contact.name{font-size:var(--font-size-18, 1.125rem)}:host .outer-container .menu-content .menu-content-contact.email{color:var(--app-color, #5a30f4)}:host .outer-container .menu-content .menu-content-contact.phone{color:var(--dark, #000000)}";
 
@@ -18,7 +19,7 @@ const YooLocationInfoComponent = class {
     if (!this.location.info && !this.location.contactname && !this.location.contactemail && !this.location.contactphone) {
       return;
     }
-    return (index.h("div", { class: "outer-container" }, (this.location.contactname || this.location.contactemail || this.location.contactphone) && (index.h("div", { class: "menu-content" }, index.h("span", null, index$1.translate('MAINCONTACT')), this.location.contactname && index.h("div", { class: "menu-content-contact name", innerHTML: this.location.contactname }), this.location.contactemail && (index.h("div", null, index.h("a", { href: 'mailto:' + this.location.contactemail, class: "menu-content-contact email", innerHTML: this.location.contactemail }))), this.location.contactphone && (index.h("div", null, index.h("a", { href: 'tel:' + this.location.contactphone, class: "menu-content-contact phone", innerHTML: this.location.contactphone }))))), this.location && this.location.info && index.h("div", { class: "info", innerHTML: index$1.pipes.https.transform(this.location.info) })));
+    return (index.h("div", { class: "outer-container" }, (this.location.contactname || this.location.contactemail || this.location.contactphone) && (index.h("div", { class: "menu-content" }, index.h("span", null, overlays.translate('MAINCONTACT')), this.location.contactname && index.h("div", { class: "menu-content-contact name", innerHTML: this.location.contactname }), this.location.contactemail && (index.h("div", null, index.h("a", { href: 'mailto:' + this.location.contactemail, class: "menu-content-contact email", innerHTML: this.location.contactemail }))), this.location.contactphone && (index.h("div", null, index.h("a", { href: 'tel:' + this.location.contactphone, class: "menu-content-contact phone", innerHTML: this.location.contactphone }))))), this.location && this.location.info && index.h("div", { class: "info", innerHTML: overlays.pipes.https.transform(this.location.info) })));
   }
 };
 YooLocationInfoComponent.style = locationInfoCss;

package/dist/cjs/yoo-location-map.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 mapHelpers = require('./map-helpers-1bbe0238.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const mapHelpers = require('./map-helpers-be6372f4.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const locationMapCss = ":host .outer-container{margin:var(--spacing-08, 0.5rem) 1rem;padding:0.8rem 0;padding-bottom:0rem;overflow:hidden;background:var(--light-10, rgba(255, 255, 255, 0.1));background:var(--light, #ffffff);border-radius:8px;-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 .outer-container .background-image{height:200px}:host .outer-container .content{padding:0 1rem}:host .outer-container .content .title{padding-bottom:1rem;color:var(--stable, #adadad);font-size:var(--font-size-12, 0.75rem);text-transform:uppercase}:host .outer-container .content .text-line{color:var(--dark, #000000);font-size:var(--font-size-14, 0.875rem);text-transform:none}:host .outer-container .content .text-line.top{padding-bottom:1rem;font-weight:var(--font-weight-700, 700);font-size:var(--font-size-18, 1.125rem);line-height:1em}:host .outer-container .footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:var(--light, #ffffff);border-top:0.0625rem solid var(--stable-light, #f1f1f1)}";
 
@@ -50,7 +51,7 @@ const YooLocationMapComponent = class {
   }
   onGetDirections(ev) {
     if (this.location && this.location._geoloc && this.location._geoloc.length > 1) {
-      mapHelpers.showDirectionsActionSheet(this.location._geoloc[1], this.location._geoloc[0], this.location.title, this.location.address, index$1.isWeb(this.host) ? this.buttonDirection : null, index$1.isWeb(this.host) ? ev : null).then((action) => {
+      mapHelpers.showDirectionsActionSheet(this.location._geoloc[1], this.location._geoloc[0], this.location.title, this.location.address, overlays.isWeb(this.host) ? this.buttonDirection : null, overlays.isWeb(this.host) ? ev : null).then((action) => {
         switch (action) {
           case 'googlemaps':
             this.useGoogleMaps.emit(this.location);
@@ -84,7 +85,7 @@ const YooLocationMapComponent = class {
     mapModal.addEventListener('useGoogleMaps', googleListener);
     mapModal.addEventListener('useCityMapper', cityListener);
     mapModal.addEventListener('useCopyAddress', copyListener);
-    index$1.showModal(mapModal, null, null, null, null, true).then(() => {
+    overlays.showModal(mapModal, null, null, null, null, true).then(() => {
       if (mapModal) {
         mapModal.removeEventListener('useAppleMaps', appleListener);
         mapModal.removeEventListener('useGoogleMaps', googleListener);
@@ -99,7 +100,7 @@ const YooLocationMapComponent = class {
     return index.h("div", { class: "text-line" }, addressLine);
   }
   render() {
-    return (index.h("div", { class: "outer-container" }, index.h("div", { class: "content", onClick: () => this.onOpenFullscreenMap() }, index.h("div", { class: "text-line top" }, index$1.translate('YOOBICMAP')), index.h("div", { class: "title" }, index$1.translate('ADDRESS'), this.address.map((addressLine) => this.renderAddress(addressLine)))), index.h("div", { class: "background-image" }, index.h("yoo-map", { showControls: false, position: this.position, markers: this.marker })), index.h("div", { class: "footer" }, index.h("yoo-button", { ref: (el) => this.buttonDirection = el, color: "app-color", fill: "transparent", animated: false, onClick: (ev) => this.onGetDirections(ev) }, index$1.translate('GETDIRECTIONS')))));
+    return (index.h("div", { class: "outer-container" }, index.h("div", { class: "content", onClick: () => this.onOpenFullscreenMap() }, index.h("div", { class: "text-line top" }, overlays.translate('YOOBICMAP')), index.h("div", { class: "title" }, overlays.translate('ADDRESS'), this.address.map((addressLine) => this.renderAddress(addressLine)))), index.h("div", { class: "background-image" }, index.h("yoo-map", { showControls: false, position: this.position, markers: this.marker })), index.h("div", { class: "footer" }, index.h("yoo-button", { ref: (el) => this.buttonDirection = el, color: "app-color", fill: "transparent", animated: false, onClick: (ev) => this.onGetDirections(ev) }, overlays.translate('GETDIRECTIONS')))));
   }
   get host() { return index.getElement(this); }
 };

package/dist/cjs/yoo-login.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 index = require('./index-e182c32d.js');
+const overlays = require('./overlays-b6c94fc8.js');
+require('./index-1fdbd9b3.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
 const dimensionsHelpers = require('./dimensions-helpers-54685523.js');
 require('./lodash-597bda6d.js');
+require('./index-de8540eb.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
 
 const loginCss = ":host{display:block;width:100%;height:100%}:host yoo-form-input-container:first-of-type{margin-bottom:1rem}:host p{margin:0}:host video{width:100%;-o-object-fit:cover;object-fit:cover}:host .inner-container{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end}:host .login-button{margin-top:var(--spacing-16, 1rem)}:host .powered-by{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;font-size:var(--font-size-12, 0.75rem)}:host .powered-by.light{color:var(--light, #ffffff)}:host .powered-by.dark{color:var(--dark, #000000)}:host .powered-by *{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .powered-by *+*{margin-top:var(--spacing-04, 0.25rem)}:host .powered-by img{margin:0 var(--spacing-04, 0.25rem)}:host .powered-by [hidden]{display:none}:host .outer-container{position:absolute;top:0;right:0;bottom:0;left:0;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}:host .outer-container .left-panel,:host .outer-container .right-panel{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;overflow:hidden;background-color:var(--light, #ffffff)}:host .outer-container .left-panel yoo-banner,:host .outer-container .right-panel yoo-banner{--main-color:var(--danger, #d44333);--close-icon-color:var(--light, #ffffff);z-index:2}:host .outer-container .left-panel yoo-banner p,:host .outer-container .right-panel yoo-banner p{padding:var(--spacing-24, 1.5rem)}:host .outer-container .left-panel .content-container,:host .outer-container .right-panel .content-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:100%}:host .outer-container .left-panel .content-container .content,:host .outer-container .right-panel .content-container .content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-line-pack:center;align-content:center;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host .outer-container .left-panel .content-container .header,:host .outer-container .left-panel .content-container .footer,:host .outer-container .right-panel .content-container .header,:host .outer-container .right-panel .content-container .footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:80%;padding:0 2rem}:host .outer-container .left-panel .background,:host .outer-container .right-panel .background{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background-repeat:no-repeat;background-position-x:50%;background-size:cover}:host .outer-container .left-panel .background-overlay,:host .outer-container .right-panel .background-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;background-color:var(--dark, #000000);opacity:0.5}:host .outer-container .left-panel{-ms-flex:0 0 25rem;flex:0 0 25rem;color:var(--light, #ffffff)}:host .outer-container .left-panel video{position:absolute;height:100%}:host .outer-container .left-panel .content-container{z-index:2}:host .outer-container .left-panel .content-container .header{-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:start;justify-content:flex-start}:host .outer-container .left-panel .content-container .content{font-size:var(--font-size-18, 1.125rem)}:host .outer-container .left-panel .content-container .content .title-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding-bottom:1.25rem;font-size:var(--font-size-14, 0.875rem)}:host .outer-container .left-panel .content-container .content .subtitle-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding:0 2rem;letter-spacing:0.0625rem;text-align:center}:host .outer-container .left-panel .content-container .footer{-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}:host .outer-container .left-panel .text-container{padding-top:2rem;font-weight:var(--font-weight-700, 700);font-size:var(--font-size-18, 1.125rem);text-align:center}:host .outer-container .right-panel{width:100%;height:100%;color:var(--text-color, #807f83)}:host .outer-container .right-panel yoo-alert{width:100%}:host .outer-container .right-panel.ios yoo-banner{--margin-top-inner-container:0.6315rem}:host .outer-container .right-panel .content-container .header{-ms-flex-pack:end;justify-content:flex-end}:host .outer-container .right-panel .content-container .header.no-padding{padding-top:0.375rem !important}:host .outer-container .right-panel .content-container .header.reset{-ms-flex-pack:justify;justify-content:space-between}:host .outer-container .right-panel .content-container .header.iphone-x{padding-top:3rem !important}:host .outer-container .right-panel .content-container .header .close{width:1.875rem;height:1.875rem;border:solid var(--border-width-01, 0.0625rem) var(--stable, #adadad);border-radius:var(--spacing-16, 1rem);opacity:0}:host .outer-container .right-panel .content-container .header .close:hover{cursor:pointer}:host .outer-container .right-panel .content-container .header .logo{display:-ms-flexbox;display:flex;padding-right:1rem}:host .outer-container .right-panel .content-container .header .logo.hide{display:none}:host .outer-container .right-panel .content-container .content{width:100%}:host .outer-container .right-panel .content-container .content .login-title{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding-bottom:0.5rem;color:var(--dark, #000000);font-weight:var(--font-weight-700, 700);font-size:var(--font-size-28, 1.75rem)}:host .outer-container .right-panel .content-container .content .login-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;margin:auto}:host .outer-container .right-panel .content-container .content .login-container .login-subtitle{padding-bottom:2rem}:host .outer-container .right-panel .content-container .content .login-container .login-button{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center}:host .outer-container .right-panel .content-container .content .login-container-mobile{width:calc(100% - 4rem);height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:0 2rem;-webkit-transition:0.3s;transition:0.3s}:host .outer-container .right-panel .content-container .content .login-container-mobile.unfocused{margin-top:10%}:host .outer-container .right-panel .content-container .content .login-container-mobile.iphone-se-focus{margin-bottom:10rem}:host .outer-container .right-panel .content-container .content .login-container-mobile .login-button{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;margin-bottom:var(--spacing-16, 1rem);-webkit-transition:0.3s;transition:0.3s}:host .outer-container .right-panel .content-container .content .login-container-mobile .login-button.device-padding{margin-top:var(--spacing-08, 0.5rem)}:host .outer-container .right-panel .content-container .footer{width:100%}:host .outer-container .right-panel .content-container .footer.iphone-x{padding-bottom:var(--spacing-16, 1rem)}:host .outer-container .right-panel .content-container .video-header-container-mobile{position:relative;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;width:80%;padding:0 2rem;text-align:center}:host .outer-container .right-panel .content-container .video-header-container-mobile:not(.hide):not(.focused){min-height:120px}:host .outer-container .right-panel .content-container .video-header-container-mobile.hide{display:none}:host .outer-container .right-panel .content-container .video-header-container-mobile .auto-margin{margin:auto}:host .outer-container .right-panel .content-container .video-header-container-mobile .text{position:absolute;top:0;left:2rem;margin-bottom:1.875rem;font-weight:var(--font-weight-700, 700);font-size:var(--font-size-28, 1.75rem);letter-spacing:normal;text-align:left;text-transform:initial;opacity:0}:host .outer-container .right-panel .content-container .video-header-container-mobile .text.iphone-5{margin-bottom:0}:host .outer-container .right-panel .background{position:absolute;z-index:0;min-width:100%;min-height:100%;-webkit-filter:blur(0.15rem);filter:blur(0.15rem)}:host .outer-container .right-panel.video-background{color:var(--light, #ffffff);background-color:var(--dark-40, rgba(0, 0, 0, 0.4))}@-webkit-keyframes show{from{visibility:hidden;opacity:0}to{visibility:visible;opacity:1}}@keyframes show{from{visibility:hidden;opacity:0}to{visibility:visible;opacity:1}}:host .outer-container .right-panel.video-background video{position:absolute;min-width:100%;min-height:100%;-webkit-filter:blur(0.15rem);filter:blur(0.15rem)}:host .outer-container .right-panel.video-background video.android{visibility:hidden;opacity:0;-webkit-animation:show 500ms forwards;animation:show 500ms forwards;-webkit-animation-delay:1s;animation-delay:1s}:host .outer-container .right-panel.video-background .content-container .login-container-mobile yoo-form-input-container yoo-form-input{--input-text-color:cssvar(light) !important}:host .outer-container .right-panel.video-background .content-container .login-container-mobile yoo-form-input-container yoo-form-input.has-invalid-format{margin-top:0}:host(.web) .outer-container .left-panel .content-container .footer,:host(.web) .outer-container .left-panel .content-container .header,:host(.web) .outer-container .right-panel .content-container .footer,:host(.web) .outer-container .right-panel .content-container .header{height:6rem}:host(.web) .outer-container .left-panel .content-container .subtitle-container,:host(.web) .outer-container .right-panel .content-container .subtitle-container{padding:0 3rem;font-weight:300;font-size:var(--font-size-14, 0.875rem);line-height:1.3125rem;letter-spacing:normal}:host(.web) .outer-container .left-panel .content-container .subtitle-container b,:host(.web) .outer-container .right-panel .content-container .subtitle-container b{font-size:var(--font-size-18, 1.125rem);text-transform:uppercase}:host(.web) .outer-container .left-panel .content-container .footer,:host(.web) .outer-container .right-panel .content-container .footer{-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;font-size:var(--font-size-14, 0.875rem)}:host(.web) .outer-container .left-panel .content-container .header{-ms-flex-pack:center;justify-content:center}:host(.web) .outer-container .left-panel .content-container .header .logo img{height:2rem}:host(.web) .outer-container .left-panel .content-container .header .logo.big img{height:6rem;margin-top:4rem}:host(.web) .outer-container .right-panel .content-container .content{max-width:25rem}:host(.web) .outer-container .right-panel .content-container .content .login-container{width:100%;margin:auto}:host(.mobile) .outer-container .right-panel yoo-banner{--padding-top-container:1.325rem;margin-bottom:-1rem}:host(.mobile) .outer-container .right-panel .background-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;background-color:var(--dark, #000000);opacity:0.5}:host(.mobile) .outer-container .right-panel .content-container .header.reduce-padding,:host(.mobile) .outer-container .right-panel .content-container .footer.reduce-padding{padding-top:1rem}:host(.mobile) .outer-container .right-panel .content-container .header:not(.android){padding-top:2rem}:host(.mobile) .outer-container .right-panel .content-container .header.android{padding-top:1rem}:host(.mobile) .outer-container .right-panel .content-container .content{z-index:10;-ms-flex-pack:center;justify-content:center;width:100%;max-width:25rem;height:100%}:host(.mobile) .outer-container .right-panel .content-container .content.android{padding-top:0rem}:host(.mobile) .outer-container .right-panel .content-container .content .login-title{-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center;height:25%}:host(.mobile) .outer-container .right-panel .content-container .content .login-title .inner-title{text-align:center}:host(.mobile) .outer-container .right-panel .content-container .footer.android{padding-top:0}:host(.mobile) .outer-container .right-panel .content-container .footer.hide{display:none}:host(.mobile) .outer-container .right-panel .content-container .footer:not(.android){padding-bottom:1rem}@media (orientation: landscape){:host(.tablet.ios:not(.emulate-preview)) .outer-container .right-panel .content-container .content .video-header-container-mobile.focused{display:none}}";
 
@@ -71,19 +72,19 @@ const YooLoginComponent = class {
     this.showLeftPanel = window.innerWidth > MIN_SCREEN_SIZE_LEFT_PANEL;
     this.language = this.currentLanguage;
     this.hideLoginForm = this.ssoOnly;
-    index$1.disableKeyboardResize();
+    overlays.disableKeyboardResize();
   }
   componentDidLoad() {
     var _a;
     this.resizePage();
-    this.resizeListener = index$1.debounce(this.resizePage, 500).bind(this);
+    this.resizeListener = overlays.debounce(this.resizePage, 500).bind(this);
     window.addEventListener('resize', this.resizeListener);
     this.loginContainerMobileHeight = dimensionsHelpers.getElementDimensions(this.loginContainerMobile).height;
     if (this.videoHeaderContainerEl) {
-      this.focusAnimation = new index$1.LoginFocusAnimation();
+      this.focusAnimation = new overlays.LoginFocusAnimation();
       this.focusAnimation.addContainer(this.videoHeaderContainerEl);
     }
-    (_a = index$1.ScreenOrientation === null || index$1.ScreenOrientation === void 0 ? void 0 : index$1.ScreenOrientation.onChange) === null || _a === void 0 ? void 0 : _a.call(index$1.ScreenOrientation).subscribe(() => index.forceUpdate(this));
+    (_a = overlays.ScreenOrientation === null || overlays.ScreenOrientation === void 0 ? void 0 : overlays.ScreenOrientation.onChange) === null || _a === void 0 ? void 0 : _a.call(overlays.ScreenOrientation).subscribe(() => index.forceUpdate(this));
     if (this.ssoOnly) {
       this.poweredByElement.onclick = () => { this.hideLoginForm = false; };
     }
@@ -97,7 +98,7 @@ const YooLoginComponent = class {
   }
   disconnectedCallback() {
     window.removeEventListener('resize', this.resizeListener);
-    index$1.enableKeyboardResize();
+    overlays.enableKeyboardResize();
   }
   isIphone5Screensize() {
     return window.innerHeight < IPHONE5_HEIGHT;
@@ -143,10 +144,10 @@ const YooLoginComponent = class {
   onInputFocused(type) {
     this.error = '';
     type === 'password' ? (this.passwordFocused = true) : (this.emailFocused = true);
-    if (index$1.isNativeMobile() && (!index$1.isTablet() || this.hideTitleAndFooterForIpadMini)) {
+    if (overlays.isNativeMobile() && (!overlays.isTablet() || this.hideTitleAndFooterForIpadMini)) {
       this.hideTitleAndFooter();
     }
-    if (index$1.isIonic(this.host)) {
+    if (overlays.isIonic(this.host)) {
       this.inputFocused = true;
       if (this.focusAnimation && this.videoHeaderContainerEl && !this.shouldHideHeaderVideo()) {
         this.focusAnimation.playFocus();
@@ -155,9 +156,9 @@ const YooLoginComponent = class {
   }
   onInputBlurred(type) {
     this.validateLoginInputs();
-    if (index$1.isIonic(this.host)) {
+    if (overlays.isIonic(this.host)) {
       type === 'password' ? (this.passwordFocused = false) : (this.emailFocused = false);
-      setTimeout(() => index$1.isNativeMobile() && this.hideTitleAndFooter(), 100);
+      setTimeout(() => overlays.isNativeMobile() && this.hideTitleAndFooter(), 100);
       this.inputFocused = false;
       if (this.videoHeaderContainerEl && !this.shouldHideHeaderVideo()) {
         this.focusAnimation.playBlur();
@@ -172,7 +173,7 @@ const YooLoginComponent = class {
   hideTitleAndFooter() {
     if (this.emailFocused || this.passwordFocused) {
       if (this.loginContainerMobile) {
-        const height = index$1.isIphone5() ? '75%' : '100%';
+        const height = overlays.isIphone5() ? '75%' : '100%';
         this.loginContainerMobile.setAttribute('style', `height: ${height};`);
       }
       this.deviceInputFocused = true;
@@ -185,12 +186,12 @@ const YooLoginComponent = class {
     }
   }
   resizePage() {
-    if (index$1.isIonic(this.host)) {
+    if (overlays.isIonic(this.host)) {
       this.fullWindowHeight = window.innerHeight > this.fullWindowHeight ? window.innerHeight : this.fullWindowHeight;
     }
     this.showLeftPanel = window.innerWidth > MIN_SCREEN_SIZE_LEFT_PANEL;
     this.showHeaderFooterOnFocus = window.innerHeight > MINIMUM_SCREEN_SIZE_TO_SHOW_HEADER;
-    this.hideTitleAndFooterForIpadMini = window.innerHeight < IPAD_MINI_SCREEN_HEIGHT && index$1.isIOS();
+    this.hideTitleAndFooterForIpadMini = window.innerHeight < IPAD_MINI_SCREEN_HEIGHT && overlays.isIOS();
   }
   onLanguageChanged(ev) {
     if (this.language !== ev.detail) {
@@ -212,53 +213,53 @@ const YooLoginComponent = class {
     }
   }
   onForgotPassword() {
-    index$1.isIonic(this.host) ? this.presentActionSheet() : this.passwordResetModalRequested.emit(true);
+    overlays.isIonic(this.host) ? this.presentActionSheet() : this.passwordResetModalRequested.emit(true);
   }
   presentActionSheet() {
-    index$1.showActionSheet([
-      { text: index$1.translate(this.resetPasswordButtonText), handler: () => this.passwordResetModalRequested.emit(true) },
-      { text: index$1.translate(this.magicLinkButtonText), handler: () => this.magicLinkModalRequested.emit(true) }
+    overlays.showActionSheet([
+      { text: overlays.translate(this.resetPasswordButtonText), handler: () => this.passwordResetModalRequested.emit(true) },
+      { text: overlays.translate(this.magicLinkButtonText), handler: () => this.magicLinkModalRequested.emit(true) }
     ]);
   }
   getVideoBackgroundClasses() {
-    if ((this.hasVideoBackground() || this.backgroundSrc) && !index$1.isWeb(this.host)) {
+    if ((this.hasVideoBackground() || this.backgroundSrc) && !overlays.isWeb(this.host)) {
       return { 'no-border': true, translucent: true };
     }
-    else if (this.backgroundColor && !index$1.isWeb(this.host)) {
+    else if (this.backgroundColor && !overlays.isWeb(this.host)) {
       return { solid: true };
     }
   }
   renderLoginForm() {
-    const isweb = index$1.isWeb(this.host);
+    const isweb = overlays.isWeb(this.host);
     const hasCustomBackground = this.hasVideoBackground() || this.backgroundSrc;
     const fieldColors = {
       border: isweb ? '' : hasCustomBackground ? '' : 'var(--app-color)',
-      title: isweb ? '' : hasCustomBackground ? 'var(--light)' : this.backgroundColor ? `var(--${index$1.getContrastColorName(this.backgroundColor)})` : 'var(--app-color)',
+      title: isweb ? '' : hasCustomBackground ? 'var(--light)' : this.backgroundColor ? `var(--${overlays.getContrastColorName(this.backgroundColor)})` : 'var(--app-color)',
       text: isweb ? '' : hasCustomBackground ? 'var(--light)' : 'var(--dark)'
     };
     return [
       index.h("div", { ref: (el) => (this.loginContainerMobile = el), class: {
-          'login-container-mobile': index$1.isIonic(this.host),
+          'login-container-mobile': overlays.isIonic(this.host),
           unfocused: !this.inputFocused,
-          'login-container': !index$1.isIonic(this.host),
-          'iphone-se-focus': this.inputFocused && index$1.isIphoneSE()
-        } }, index$1.isIonic(this.host) ? null : [index.h("div", { class: "login-title" }, index$1.translate(this.webLoginFormTitle)), index.h("div", { class: "login-subtitle" }, index$1.translate(this.webLoginFormSubtitle))], !this.hideLoginForm && (index.h("yoo-form-input-container", { style: { '--field-title-color': fieldColors.title }, field: { title: index$1.translate(this.emailLabel) }, required: true }, index.h("yoo-form-input", { class: { ...this.getVideoBackgroundClasses() }, style: { '--input-border-color': fieldColors.border, color: fieldColors.text }, ref: (el) => (this.emailInputEl = el), "data-test-id": "email", name: "email", type: "email", size: index$1.isWeb(this.host) ? 'medium' : 'large', validators: this.inputValidators, uiValidation: this.inputUIValidation, fireInputChangeEvent: true, onInputChanged: (event) => this.onInputChanged(event, 'email'), onInputFocused: () => this.onInputFocused('email'), onInputBlurred: () => this.onInputBlurred('email'), onEnterPressed: () => this.onEnterPressed() }))), !this.hideLoginForm && (index.h("yoo-form-input-container", { style: { '--field-title-color': fieldColors.title }, field: { title: index$1.translate(this.passwordLabel) }, required: true }, index.h("yoo-form-input", { class: { ...this.getVideoBackgroundClasses() }, style: { '--input-border-color': fieldColors.border, color: fieldColors.text }, ref: (el) => (this.passwordInputEl = el), "data-test-id": "password", name: "password", type: "password", size: index$1.isWeb(this.host) ? 'medium' : 'large', showPasswordToggle: true, validators: this.inputValidators, uiValidation: this.inputUIValidation, fireInputChangeEvent: true, onInputChanged: (event) => this.onInputChanged(event, 'password'), onInputFocused: () => this.onInputFocused('password'), onInputBlurred: () => this.onInputBlurred('password'), onIconClicked: (ev) => this.onPasswordIconClicked(ev), onEnterPressed: () => this.onEnterPressed() }))), !this.hideLoginForm && (index.h("div", { class: "inner-container" }, index.h("yoo-button", { id: "forgot-password", color: index$1.isWeb(this.host)
+          'login-container': !overlays.isIonic(this.host),
+          'iphone-se-focus': this.inputFocused && overlays.isIphoneSE()
+        } }, overlays.isIonic(this.host) ? null : [index.h("div", { class: "login-title" }, overlays.translate(this.webLoginFormTitle)), index.h("div", { class: "login-subtitle" }, overlays.translate(this.webLoginFormSubtitle))], !this.hideLoginForm && (index.h("yoo-form-input-container", { style: { '--field-title-color': fieldColors.title }, field: { title: overlays.translate(this.emailLabel) }, required: true }, index.h("yoo-form-input", { class: { ...this.getVideoBackgroundClasses() }, style: { '--input-border-color': fieldColors.border, color: fieldColors.text }, ref: (el) => (this.emailInputEl = el), "data-test-id": "email", name: "email", type: "email", size: overlays.isWeb(this.host) ? 'medium' : 'large', validators: this.inputValidators, uiValidation: this.inputUIValidation, fireInputChangeEvent: true, onInputChanged: (event) => this.onInputChanged(event, 'email'), onInputFocused: () => this.onInputFocused('email'), onInputBlurred: () => this.onInputBlurred('email'), onEnterPressed: () => this.onEnterPressed() }))), !this.hideLoginForm && (index.h("yoo-form-input-container", { style: { '--field-title-color': fieldColors.title }, field: { title: overlays.translate(this.passwordLabel) }, required: true }, index.h("yoo-form-input", { class: { ...this.getVideoBackgroundClasses() }, style: { '--input-border-color': fieldColors.border, color: fieldColors.text }, ref: (el) => (this.passwordInputEl = el), "data-test-id": "password", name: "password", type: "password", size: overlays.isWeb(this.host) ? 'medium' : 'large', showPasswordToggle: true, validators: this.inputValidators, uiValidation: this.inputUIValidation, fireInputChangeEvent: true, onInputChanged: (event) => this.onInputChanged(event, 'password'), onInputFocused: () => this.onInputFocused('password'), onInputBlurred: () => this.onInputBlurred('password'), onIconClicked: (ev) => this.onPasswordIconClicked(ev), onEnterPressed: () => this.onEnterPressed() }))), !this.hideLoginForm && (index.h("div", { class: "inner-container" }, index.h("yoo-button", { id: "forgot-password", color: overlays.isWeb(this.host)
           ? 'app-color'
           : this.backgroundColor
-            ? index$1.getContrastColorName(this.backgroundColor)
+            ? overlays.getContrastColorName(this.backgroundColor)
             : !hasCustomBackground
               ? 'app-color'
-              : 'light', fill: "transparent", size: index$1.isWeb(this.host) ? 'small' : 'medium', animated: false, onClick: () => this.onForgotPassword() }, index$1.translate(this.forgotPasswordText)))), (!this.hideLoginForm || (this.hideLoginForm && !this.hasToken)) && (index.h("div", { class: 'login-button ' + (index$1.isNativeMobile() ? 'device-padding' : '') }, index.h("yoo-button", { id: "login-btn", ref: (el) => (this.loginBtnEl = el), class: "expanded", color: "app-color", size: index$1.isWeb(this.host) ? 'medium' : 'large', disabled: !this.hideLoginForm && !(this.isEmailValid && this.isPasswordValid), onClick: () => this.onLogin() }, index$1.translate(this.loginButtonText)))), index$1.isIonic(this.host) && !this.isIphone5Screensize() && this.renderPoweredBy())
+              : 'light', fill: "transparent", size: overlays.isWeb(this.host) ? 'small' : 'medium', animated: false, onClick: () => this.onForgotPassword() }, overlays.translate(this.forgotPasswordText)))), (!this.hideLoginForm || (this.hideLoginForm && !this.hasToken)) && (index.h("div", { class: 'login-button ' + (overlays.isNativeMobile() ? 'device-padding' : '') }, index.h("yoo-button", { id: "login-btn", ref: (el) => (this.loginBtnEl = el), class: "expanded", color: "app-color", size: overlays.isWeb(this.host) ? 'medium' : 'large', disabled: !this.hideLoginForm && !(this.isEmailValid && this.isPasswordValid), onClick: () => this.onLogin() }, overlays.translate(this.loginButtonText)))), overlays.isIonic(this.host) && !this.isIphone5Screensize() && this.renderPoweredBy())
     ];
   }
   shouldHideHeaderVideo() {
     return ((!this.hasVideoBackground() && !this.backgroundColor && !this.backgroundSrc) ||
-      index$1.isWeb(this.host) ||
-      ((index$1.isIphone5() || index$1.isIphoneSE()) && !!this.error) ||
-      (this.deviceInputFocused && index$1.isAndroid() && !this.showHeaderFooterOnFocus));
+      overlays.isWeb(this.host) ||
+      ((overlays.isIphone5() || overlays.isIphoneSE()) && !!this.error) ||
+      (this.deviceInputFocused && overlays.isAndroid() && !this.showHeaderFooterOnFocus));
   }
   renderHeaderVideo() {
-    return (index.h("div", { ref: (el) => (this.videoHeaderContainerEl = el), class: { 'video-header-container-mobile': true, hide: this.shouldHideHeaderVideo(), focused: this.deviceInputFocused } }, index.h("img", { class: { logo: true, hide: this.inputFocused, 'auto-margin': !(index$1.isNativeMobile() && index$1.isAndroid()) }, src: this.videoHeaderIcon, height: "120", alt: "YOOBIC Logo" }), index.h("div", { class: { text: true, 'iphone-5': index$1.isIphone5() || index$1.isIphoneSE() }, style: { color: this.hasVideoBackground() ? 'light' : index$1.isWeb(this.host) ? 'stable' : 'app-color' } }, index$1.translate(this.logoSubtitle))));
+    return (index.h("div", { ref: (el) => (this.videoHeaderContainerEl = el), class: { 'video-header-container-mobile': true, hide: this.shouldHideHeaderVideo(), focused: this.deviceInputFocused } }, index.h("img", { class: { logo: true, hide: this.inputFocused, 'auto-margin': !(overlays.isNativeMobile() && overlays.isAndroid()) }, src: this.videoHeaderIcon, height: "120", alt: "YOOBIC Logo" }), index.h("div", { class: { text: true, 'iphone-5': overlays.isIphone5() || overlays.isIphoneSE() }, style: { color: this.hasVideoBackground() ? 'light' : overlays.isWeb(this.host) ? 'stable' : 'app-color' } }, overlays.translate(this.logoSubtitle))));
   }
   renderLanguageSelector() {
     return (null
@@ -278,29 +279,29 @@ const YooLoginComponent = class {
     );
   }
   renderPoweredBy() {
-    const session = index$1.getSession();
+    const session = overlays.getSession();
     return (index.h("div", { class: {
         'powered-by': true,
-        [this.hasCustomBackground() ? 'light' : index$1.getContrastColorName(this.backgroundColor)]: true
-      }, ref: (el) => (this.poweredByElement = el) }, index.h("p", null, index$1.translate(this.leftPanelFooterText), index.h("img", { src: `assets/logo/yoobic${this.hasCustomBackground()
+        [this.hasCustomBackground() ? 'light' : overlays.getContrastColorName(this.backgroundColor)]: true
+      }, ref: (el) => (this.poweredByElement = el) }, index.h("p", null, overlays.translate(this.leftPanelFooterText), index.h("img", { src: `assets/logo/yoobic${this.hasCustomBackground()
         ? '_white'
-        : index$1.getContrastColorName(this.backgroundColor) === 'light'
+        : overlays.getContrastColorName(this.backgroundColor) === 'light'
           ? '_white'
           : ''}.svg`, height: "12.8", alt: "" }), "YOOBIC"), index.h("p", { class: "version", hidden: !this.version || (session === null || session === void 0 ? void 0 : session.isStorybook) }, "v", this.version)));
   }
   renderFooter() {
-    return index$1.isIonic(this.host) ? (this.hideAdvancedLogin ? null : (index.h("yoo-button", { color: this.hasCustomBackground() ? 'light' : index$1.getContrastColorName(this.backgroundColor), size: "large", fill: "transparent", animated: false, class: "expanded", onClick: () => this.onAdvancedLogin() }, index$1.translate('ADVANCEDLOGIN')))) : (this.renderPoweredBy());
+    return overlays.isIonic(this.host) ? (this.hideAdvancedLogin ? null : (index.h("yoo-button", { color: this.hasCustomBackground() ? 'light' : overlays.getContrastColorName(this.backgroundColor), size: "large", fill: "transparent", animated: false, class: "expanded", onClick: () => this.onAdvancedLogin() }, overlays.translate('ADVANCEDLOGIN')))) : (this.renderPoweredBy());
   }
   renderVideo() {
-    const autoplay = !index$1.isIOS() || !index$1.isNativeMobile();
-    return (index.h("video", { ref: (el) => (this.loginVideoEl = el), class: { android: index$1.isAndroid() }, autoplay: autoplay && !index$1.isChromatic(), hidden: this.videoHidden, loop: true, muted: true, playsinline: true, src: this.videoBackgroundUrl, "webkit-playsinline": true, onLoadedMetaData: () => !autoplay && this.onCanPlay() }));
+    const autoplay = !overlays.isIOS() || !overlays.isNativeMobile();
+    return (index.h("video", { ref: (el) => (this.loginVideoEl = el), class: { android: overlays.isAndroid() }, autoplay: autoplay && !overlays.isChromatic(), hidden: this.videoHidden, loop: true, muted: true, playsinline: true, src: this.videoBackgroundUrl, "webkit-playsinline": true, onLoadedMetaData: () => !autoplay && this.onCanPlay() }));
   }
   renderHeader() {
     return (index.h("div", { class: "header" }, index.h("div", { class: { logo: true, big: this.webLogoBig } }, index.h("img", { src: this.leftPanelWebHeaderIcon, height: this.webLogoBig ? 70 : 32, alt: "Logo" }))));
   }
   renderPanelBody(type) {
     if (type === 'leftPanel') {
-      return (index.h("div", { class: "content", style: { color: this.backgroundColor ? `var(--${index$1.getContrastColorName(this.backgroundColor)})` : null } }, this.webSubtitleText.map((text) => (index.h("div", { class: "subtitle-container", innerHTML: index$1.translate(text) })))));
+      return (index.h("div", { class: "content", style: { color: this.backgroundColor ? `var(--${overlays.getContrastColorName(this.backgroundColor)})` : null } }, this.webSubtitleText.map((text) => (index.h("div", { class: "subtitle-container", innerHTML: overlays.translate(text) })))));
     }
     return '';
   }
@@ -310,34 +311,34 @@ const YooLoginComponent = class {
     if (!this.hasVideoBackground()) {
       backStyle = { backgroundImage: `url(${this.backgroundSrc})` };
     }
-    return (index.h("div", { class: "left-panel" }, this.backgroundSrc && backStyle ? index.h("div", { class: "background", style: backStyle }) : this.hasVideoBackground() ? this.renderVideo() : null, index.h("div", { class: "background-overlay", style: { background: this.backgroundColor, opacity: ((_a = this.backgroundColor) === null || _a === void 0 ? void 0 : _a.startsWith('#')) ? '1' : null } }), index.h("div", { class: "content-container" }, this.renderHeader(), this.renderPanelBody('leftPanel'), index.h("div", { class: { footer: true, android: index$1.isAndroid() } }, this.renderFooter()))));
+    return (index.h("div", { class: "left-panel" }, this.backgroundSrc && backStyle ? index.h("div", { class: "background", style: backStyle }) : this.hasVideoBackground() ? this.renderVideo() : null, index.h("div", { class: "background-overlay", style: { background: this.backgroundColor, opacity: ((_a = this.backgroundColor) === null || _a === void 0 ? void 0 : _a.startsWith('#')) ? '1' : null } }), index.h("div", { class: "content-container" }, this.renderHeader(), this.renderPanelBody('leftPanel'), index.h("div", { class: { footer: true, android: overlays.isAndroid() } }, this.renderFooter()))));
   }
   renderErrorBanner() {
-    return (index.h("yoo-banner", { class: "center sharp", fill: true, closable: !index$1.isIonic(this.host), linkText: !index$1.isIonic(this.host) ? index$1.translate('NEEDHELP') : '', onLinkClick: () => this.onAlertActionSelected(), onCloseClick: () => this.onAlertClosed() }, index.h("p", { slot: "content" }, index$1.translate(this.error))));
+    return (index.h("yoo-banner", { class: "center sharp", fill: true, closable: !overlays.isIonic(this.host), linkText: !overlays.isIonic(this.host) ? overlays.translate('NEEDHELP') : '', onLinkClick: () => this.onAlertActionSelected(), onCloseClick: () => this.onAlertClosed() }, index.h("p", { slot: "content" }, overlays.translate(this.error))));
   }
   renderRightPanel() {
     let backStyle;
-    if (!this.hasVideoBackground() && !index$1.isWeb(this.host)) {
+    if (!this.hasVideoBackground() && !overlays.isWeb(this.host)) {
       backStyle = { backgroundImage: `url(${this.backgroundSrc})` };
     }
-    return (index.h("div", { class: { 'right-panel': true, ios: index$1.isNativeMobile() && index$1.isIOS(), 'video-background': this.hasVideoBackground() && !index$1.isWeb(this.host) }, "justify-content": "flex-start", style: { background: !index$1.isWeb(this.host) && this.backgroundColor } }, this.backgroundSrc && backStyle && index.h("div", { class: "background", style: backStyle }), this.hasVideoBackground() && !index$1.isWeb(this.host) && this.renderVideo(), this.error && this.renderErrorBanner(), !index$1.isWeb(this.host) && (this.hasVideoBackground || this.backgroundSrc) &&
-      index.h("div", { class: "background-overlay", style: { opacity: (!this.hasVideoBackground() && !this.backgroundSrc) && '0' } }), index.h("div", { class: "content-container", "justify-content": "space-between" }, index.h("div", { id: "header", class: { header: true, ios: index$1.isNativeMobile() && index$1.isIOS(), android: index$1.isAndroid(), 'iphone-x': index$1.isIphoneX(), 'no-padding': +this.error && index$1.isIonic(this.host) } }, index$1.isIonic(this.host) ||
+    return (index.h("div", { class: { 'right-panel': true, ios: overlays.isNativeMobile() && overlays.isIOS(), 'video-background': this.hasVideoBackground() && !overlays.isWeb(this.host) }, "justify-content": "flex-start", style: { background: !overlays.isWeb(this.host) && this.backgroundColor } }, this.backgroundSrc && backStyle && index.h("div", { class: "background", style: backStyle }), this.hasVideoBackground() && !overlays.isWeb(this.host) && this.renderVideo(), this.error && this.renderErrorBanner(), !overlays.isWeb(this.host) && (this.hasVideoBackground || this.backgroundSrc) &&
+      index.h("div", { class: "background-overlay", style: { opacity: (!this.hasVideoBackground() && !this.backgroundSrc) && '0' } }), index.h("div", { class: "content-container", "justify-content": "space-between" }, index.h("div", { id: "header", class: { header: true, ios: overlays.isNativeMobile() && overlays.isIOS(), android: overlays.isAndroid(), 'iphone-x': overlays.isIphoneX(), 'no-padding': +this.error && overlays.isIonic(this.host) } }, overlays.isIonic(this.host) ||
       (!this.showLeftPanel && [
         index.h("div", { class: "space-fill" }),
-        index.h("div", { class: "logo" }, this.hasVideoBackground() && !index$1.isWeb(this.host)
+        index.h("div", { class: "logo" }, this.hasVideoBackground() && !overlays.isWeb(this.host)
           ? null
           : this.leftPanelMobileHeaderIcon && index.h("img", { src: this.leftPanelMobileHeaderIcon, height: "25", alt: "YOOBIC Logo" }))
-      ]), index.h("div", { class: "language-container" }, this.languages && this.languages.length > 1 && this.renderLanguageSelector())), index.h("div", { class: { content: true, android: index$1.isAndroid() && !this.showHeaderFooterOnFocus }, "justify-content": "center" }, this.renderHeaderVideo(), this.renderLoginForm()), index.h("div", { class: {
+      ]), index.h("div", { class: "language-container" }, this.languages && this.languages.length > 1 && this.renderLanguageSelector())), index.h("div", { class: { content: true, android: overlays.isAndroid() && !this.showHeaderFooterOnFocus }, "justify-content": "center" }, this.renderHeaderVideo(), this.renderLoginForm()), index.h("div", { class: {
         footer: true,
-        hide: index$1.isIonic(this.host) && this.inputFocused && index$1.isNativeMobile(),
-        android: index$1.isAndroid(),
-        'iphone-x': index$1.isIphoneX(),
+        hide: overlays.isIonic(this.host) && this.inputFocused && overlays.isNativeMobile(),
+        android: overlays.isAndroid(),
+        'iphone-x': overlays.isIphoneX(),
         'reduce-padding': this.isIphone5Screensize()
-      } }, (index$1.isIonic(this.host) || !this.showLeftPanel) && this.renderFooter(), !index$1.isIonic(this.host) && !this.hideAdvancedLogin && (index.h("yoo-button", { color: "app-color", fill: "transparent", animated: false, onClick: () => this.onAdvancedLogin() }, index$1.translate('ADVANCEDLOGIN')))))));
+      } }, (overlays.isIonic(this.host) || !this.showLeftPanel) && this.renderFooter(), !overlays.isIonic(this.host) && !this.hideAdvancedLogin && (index.h("yoo-button", { color: "app-color", fill: "transparent", animated: false, onClick: () => this.onAdvancedLogin() }, overlays.translate('ADVANCEDLOGIN')))))));
   }
   render() {
     const isTokenSsoLogin = this.ssoOnly && this.hasToken;
-    return (index.h(index.Host, { class: { ...commonHelpers.getAppContext(this.host) } }, index.h("div", { class: "outer-container" }, !isTokenSsoLogin && index$1.isWeb(this.host) && this.showLeftPanel && this.renderLeftPanel(), !isTokenSsoLogin && this.renderRightPanel())));
+    return (index.h(index.Host, { class: { ...commonHelpers.getAppContext(this.host) } }, index.h("div", { class: "outer-container" }, !isTokenSsoLogin && overlays.isWeb(this.host) && this.showLeftPanel && this.renderLeftPanel(), !isTokenSsoLogin && this.renderRightPanel())));
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/yoo-lottie.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 _commonjsHelpers = require('./_commonjsHelpers-94df2ea7.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 var lottie = _commonjsHelpers.createCommonjsModule(function (module, exports) {
 (typeof navigator !== "undefined") && (function (global, factory) {
@@ -18675,7 +18676,7 @@ const YooLottieComponent = class {
     /**
      * Animation will start only if animated is `true`
      */
-    this.animated = !index$1.isChromatic();
+    this.animated = !overlays.isChromatic();
     /**
      * If `true`, the animation runs infinitely.
      * If a number, the animation runs for a specific amount of loops.
@@ -18718,7 +18719,7 @@ const YooLottieComponent = class {
       }
       if (this.type === 'thankyou') {
         (_a = this.animation) === null || _a === void 0 ? void 0 : _a.renderer.elements[9].canResizeFont(true);
-        (_b = this.animation) === null || _b === void 0 ? void 0 : _b.renderer.elements[9].updateDocumentData({ t: index$1.translate('THANKYOU') });
+        (_b = this.animation) === null || _b === void 0 ? void 0 : _b.renderer.elements[9].updateDocumentData({ t: overlays.translate('THANKYOU') });
       }
       this.loaded.emit();
     };