@yoobic/yobi 8.3.0-47 → 8.3.0-50

package/dist/design-system/yoo-chat-message-dialog.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, f as forceUpdate, h, e as Host, g as getElement } from './index-becca019.js';
-import './index-c7d02f02.js';
-import { g as getDateFormats } from './chat-helpers-fcd6508c.js';
-import { p as closeModal, t as translate, dE as parseLongIntoDate, a7 as getUserDisplayName, ak as dateFormat } from './overlays-be5a9ab3.js';
+import './index-5120ceae.js';
+import { g as getDateFormats } from './chat-helpers-6d598406.js';
+import { p as closeModal, t as translate, dE as parseLongIntoDate, a7 as getUserDisplayName, ak as dateFormat } from './overlays-f516b003.js';
 import './lodash-f6e59a8e.js';
 import './index-e7f48bcb.js';
 import './_commonjsHelpers-f4d11124.js';

package/dist/design-system/yoo-chat-message-preview.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, i as createEvent, h, e as Host } from './index-becca019.js';
 import { M as MessageType } from './index-e7f48bcb.js';
-import './index-c7d02f02.js';
-import { c as convertTags } from './chat-helpers-fcd6508c.js';
-import { dF as getAudioDuration, cg as replaceAndGetAllLinks, dG as isChatMessageTypeMedia, t as translate, aq as pipes, an as isFile, a7 as getUserDisplayName } from './overlays-be5a9ab3.js';
+import './index-5120ceae.js';
+import { c as convertTags } from './chat-helpers-6d598406.js';
+import { dF as getAudioDuration, ch as replaceAndGetAllLinks, dG as isChatMessageTypeMedia, t as translate, aq as pipes, an as isFile, a7 as getUserDisplayName } from './overlays-f516b003.js';
 import './lodash-f6e59a8e.js';
 import './_commonjsHelpers-f4d11124.js';
 

package/dist/design-system/yoo-chat-message.entry.js

@@ -1,10 +1,10 @@
 import { r as registerInstance, i as createEvent, f as forceUpdate, h, e as Host, g as getElement } from './index-becca019.js';
 import { M as MessageType } from './index-e7f48bcb.js';
-import './index-c7d02f02.js';
+import './index-5120ceae.js';
 import { $ as debounce } from './lodash-f6e59a8e.js';
-import { a as assignPressActions } from './index-0ecbfd27.js';
-import { c as convertTags, g as getDateFormats } from './chat-helpers-fcd6508c.js';
-import { dz as isDocument, dA as isAudio, ag as isVideo, j as isNativeMobile, ai as isImage, dB as isUnsplashUrl, cd as isBase64, c_ as getExtension, a3 as getSession, cg as replaceAndGetAllLinks, dC as getResizedImageSize, H as isIOS, dD as showMessageInfoDialog, t as translate, an as isFile, ax as isPhotoEdited, ad as isRichContentMessage, cA as isPdf, ak as dateFormat } from './overlays-be5a9ab3.js';
+import { a as assignPressActions } from './index-c4f5c319.js';
+import { c as convertTags, g as getDateFormats } from './chat-helpers-6d598406.js';
+import { dz as isDocument, dA as isAudio, ag as isVideo, j as isNativeMobile, ai as isImage, dB as isUnsplashUrl, ce as isBase64, c$ as getExtension, a3 as getSession, ch as replaceAndGetAllLinks, dC as getResizedImageSize, H as isIOS, dD as showMessageInfoDialog, t as translate, an as isFile, ax as isPhotoEdited, ad as isRichContentMessage, cB as isPdf, ak as dateFormat } from './overlays-f516b003.js';
 import './_commonjsHelpers-f4d11124.js';
 
 const chatMessageCss = ":host{--border-message-content:none;--media-height:100%;--media-width:100vw;--right-messages-text-color:var(--light, #ffffff);--right-messages-background-color:var(--app-color, #5a30f4);--left-messages-text-color:var(--dark, #000000);--left-messages-background-color:var(--stable-light, #f1f1f1);--message-content-width:max-content;display:block;max-width:65%;word-break:break-word}:host #group{display:grid;grid-gap:var(--spacing-04, 0.25rem);grid-template-columns:var(--spacing-40, 2.5rem) calc(100% - 2.5rem)}:host #group .left-column{display:-ms-flexbox;display:flex;-ms-flex-item-align:end;align-self:end;-webkit-transform:translateY(-1.5rem);transform:translateY(-1.5rem)}:host #group .right-column .username{margin-bottom:var(--spacing-04, 0.25rem);color:var(--text-color, #807f83);font-size:var(--font-size-14, 0.875rem);white-space:nowrap;text-align:left;cursor:pointer}:host #group .right-column .message:not(.audio){max-width:var(--message-content-width)}:host .message{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:100%;color:var(--text-color, #807f83);word-wrap:break-word}:host .message:hover yoo-button{z-index:100;opacity:1}:host .message#texturlpreview{width:-webkit-fill-available;width:-moz-available;width:stretch}:host .message.combined>section{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%}:host .message.combined .preview{position:relative;padding:var(--spacing-04, 0.25rem);padding-bottom:var(--spacing-02, 0.125rem);border-top-left-radius:var(--border-radius-08, 0.5rem);border-top-right-radius:var(--border-radius-08, 0.5rem)}:host .message.combined .preview yoo-links-preview{border-top-left-radius:var(--border-radius-04, 0.25rem);border-top-right-radius:var(--border-radius-04, 0.25rem)}:host .message.combined .content,:host .message.combined yoo-audio-player{background:transparent;border-top-left-radius:initial;border-top-right-radius:initial;-webkit-box-shadow:none;box-shadow:none}:host .message.combined .content#text[is-between]{padding:var(--spacing-04, 0.25rem) var(--spacing-08, 0.5rem);border-radius:inherit}:host .message.combined .content#text yoo-text{width:100%;text-align:left}:host .message.combined .content yoo-img{padding:var(--spacing-04, 0.25rem);padding-top:var(--spacing-02, 0.125rem)}:host .message.combined .content yoo-tag{right:initial;left:var(--spacing-08, 0.5rem)}:host .message:not(.combined) .content{max-width:var(--message-content-width)}:host .message.document{--message-content-width:100%}:host .message.document .content{width:100%}:host .message.audio{width:100%}:host .message.audio .content{display:contents}:host .message yoo-audio-player{padding:var(--spacing-16, 1rem);background-color:var(--light, #ffffff);border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1))}:host .message yoo-button{position:absolute;top:var(--spacing-04, 0.25rem);right:var(--spacing-04, 0.25rem);opacity:0;-webkit-transition:opacity 0.5s ease-in-out;transition:opacity 0.5s ease-in-out}:host .message yoo-avatar{cursor:pointer}:host .message yoo-mention-tag{text-decoration:underline;cursor:pointer}:host .message yoo-form-document{width:100%;--outer-container-padding:0;--card-file-image-content:unset;--card-file-padding:0 var(--spacing-16, 1rem)}:host .message #status{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;margin-top:var(--spacing-04, 0.25rem);font-size:var(--font-size-18, 1.125rem);cursor:pointer}:host .message #status span{color:var(--stable, #adadad);font-size:var(--font-size-12, 0.75rem)}:host .message .content{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;border:var(--border-message-content);border-radius:var(--border-radius-08, 0.5rem)}:host .message #medias{position:relative;cursor:pointer}:host .message #medias yoo-tag[icon=pen]{position:absolute;right:var(--spacing-08, 0.5rem);bottom:var(--spacing-08, 0.5rem)}:host .message #medias yoo-img{--border-radius:var(--border-radius-08, 0.5rem);max-width:calc(100% - 0.5rem)}:host .message #medias yoo-videoplayer-core{--poster-size:cover;width:var(--media-width);height:var(--media-height);-o-object-fit:cover;object-fit:cover}:host .message .media-loader-container{position:relative;background:var(--stable-alt, #d0d0d0)}:host yoo-form-checkbox{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}:host .empty{display:none}:host([type*=text]) .content{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;border-radius:var(--border-radius-16, 1rem)}:host([type*=text]) .content yoo-text{-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100%;padding:var(--spacing-08, 0.5rem);white-space:pre-wrap;overflow-wrap:break-word;pointer-events:initial}:host([type=document]),:host([type=audio]){width:100%}:host([type=document]) .message,:host([type=audio]) .message{width:100%}:host([type=document]) .message.audio .content,:host([type=audio]) .message.audio .content{display:contents}:host([type=document]) .message.combined #medias,:host([type=audio]) .message.combined #medias{width:100%;padding:var(--spacing-04, 0.25rem) var(--spacing-16, 1rem)}:host([first]) #group .right-column .username{display:block}:host([left][first]) .message:not(.combined) .content{border-top-left-radius:var(--spacing-16, 1rem)}:host([left][last]) .message:not(.combined) .content{border-bottom-left-radius:var(--spacing-16, 1rem)}:host([left]) .message.combined #medias{background-color:var(--left-messages-background-color)}:host([left]) .message.combined #medias yoo-audio-player{background-color:var(--left-messages-background-color)}:host([left]) .message #text,:host([left]) .message .preview{color:var(--left-messages-text-color);background-color:var(--left-messages-background-color)}:host([left]) .message.combined yoo-audio-player{--range-active-color:var(--app-color, #5a30f4);--range-trail-color:var(--stable-20, rgba(173, 173, 173, 0.2));--play-icon-color:var(--dark, #000000);--title-color:var(--dark, #000000)}:host([left]) .message:not(.combined) .content{border-top-left-radius:var(--spacing-04, 0.25rem);border-bottom-left-radius:var(--spacing-04, 0.25rem)}:host([right][first]) .message:not(.combined) .content{border-top-right-radius:var(--spacing-16, 1rem)}:host([right][last]) .message:not(.combined) .content{border-bottom-right-radius:var(--spacing-16, 1rem)}:host([right]){-ms-flex-item-align:end;align-self:flex-end;justify-self:end;float:right}:host([right]) .message{float:right}:host([right]) .message.combined #medias{background-color:var(--right-messages-background-color)}:host([right]) .message.combined #medias yoo-audio-player{background-color:var(--right-messages-background-color)}:host([right]) .message #text,:host([right]) .message .preview{color:var(--right-messages-text-color);background-color:var(--right-messages-background-color)}:host([right]) .message.combined yoo-audio-player{--range-active-color:var(--light, #ffffff);--play-icon-color:var(--light, #ffffff);--title-color:var(--light, #ffffff)}:host([right]) .message:not(.combined) .content{-ms-flex-item-align:end;align-self:flex-end;border-top-right-radius:var(--spacing-04, 0.25rem);border-bottom-right-radius:var(--spacing-04, 0.25rem)}:host(.radius) .message .content{border-radius:var(--spacing-16, 1rem) !important}:host(.selected) .message{position:relative;-webkit-transition-delay:0.1s;transition-delay:0.1s;-webkit-transition-timing-function:var(--ease-out-quint), var(--ease-in-out-sine);transition-timing-function:var(--ease-out-quint), var(--ease-in-out-sine);-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:color, background-color;transition-property:color, background-color;-webkit-animation-name:scale-up, scale-down;animation-name:scale-up, scale-down;-webkit-animation-duration:0.15s;animation-duration:0.15s;-webkit-animation-timing-function:var(--ease-in-out-sine);animation-timing-function:var(--ease-in-out-sine);-webkit-animation-delay:0.1s, 0.25s;animation-delay:0.1s, 0.25s}@-webkit-keyframes scale-up{from{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.05);transform:scale(1.05)}}@keyframes scale-up{from{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.05);transform:scale(1.05)}}@-webkit-keyframes scale-down{from{-webkit-transform:scale(1.05);transform:scale(1.05)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes scale-down{from{-webkit-transform:scale(1.05);transform:scale(1.05)}to{-webkit-transform:scale(1);transform:scale(1)}}:host([animation=loading]){--loading-dot-color:var(--text-color, #807f83);--loading-dot-duration:0.6s;--loading-dot-size:0.5rem;--loading-dot-spacing:1rem;--loading-dot-start:0.2s;--loading-dot-step:0.1s;--loading-text-duration:0.3s;--loading-text-start:0.8s}:host([animation=loading]) .message{position:relative}:host([animation=loading]) .message .dot{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);-webkit-animation-delay:calc(var(--loading-dot-start) + 1 * var(--loading-dot-step)), calc(calc(var(--loading-dot-start) + 1 * var(--loading-dot-step)) + calc(var(--loading-dot-duration) / 2));animation-delay:calc(var(--loading-dot-start) + 1 * var(--loading-dot-step)), calc(calc(var(--loading-dot-start) + 1 * var(--loading-dot-step)) + calc(var(--loading-dot-duration) / 2))}:host([animation=loading]) .message .dot,:host([animation=loading]) .message .dot::before,:host([animation=loading]) .message .dot::after{width:var(--loading-dot-size);height:var(--loading-dot-size);background:var(--loading-dot-color);border-radius:50%;opacity:0;-webkit-animation-name:fade-in, fade-out;animation-name:fade-in, fade-out;-webkit-animation-duration:calc(var(--loading-dot-duration) / 2);animation-duration:calc(var(--loading-dot-duration) / 2);-webkit-animation-timing-function:var(--ease-in-out-sine);animation-timing-function:var(--ease-in-out-sine)}:host([animation=loading]) .message .dot::before,:host([animation=loading]) .message .dot::after{position:absolute;top:0;display:inline-block;content:\"\"}:host([animation=loading]) .message .dot::before{right:var(--loading-dot-spacing);-webkit-animation-delay:calc(var(--loading-dot-start) + 0 * var(--loading-dot-step)), calc(calc(var(--loading-dot-start) + 0 * var(--loading-dot-step)) + calc(var(--loading-dot-duration) / 2));animation-delay:calc(var(--loading-dot-start) + 0 * var(--loading-dot-step)), calc(calc(var(--loading-dot-start) + 0 * var(--loading-dot-step)) + calc(var(--loading-dot-duration) / 2))}:host([animation=loading]) .message .dot::after{left:var(--loading-dot-spacing);-webkit-animation-delay:calc(var(--loading-dot-start) + 2 * var(--loading-dot-step)), calc(calc(var(--loading-dot-start) + 2 * var(--loading-dot-step)) + calc(var(--loading-dot-duration) / 2));animation-delay:calc(var(--loading-dot-start) + 2 * var(--loading-dot-step)), calc(calc(var(--loading-dot-start) + 2 * var(--loading-dot-step)) + calc(var(--loading-dot-duration) / 2))}:host([animation=loading]) .message #text{opacity:0;-webkit-animation:fade-in var(--loading-text-duration) var(--ease-in-out-quart) var(--loading-text-start) forwards;animation:fade-in var(--loading-text-duration) var(--ease-in-out-quart) var(--loading-text-start) forwards}@-webkit-keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes fade-out{from{opacity:1}to{opacity:0}}@keyframes fade-out{from{opacity:1}to{opacity:0}}@media screen and (min-width: 1400px){:host(.expanded) .message.combined{max-width:inherit}}";

package/dist/design-system/yoo-chat.entry.js

@@ -1,12 +1,12 @@
 import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-becca019.js';
 import { M as MessageType, B as BroadcastType } from './index-e7f48bcb.js';
-import './index-c7d02f02.js';
+import './index-5120ceae.js';
 import { O as isFinite } from './lodash-f6e59a8e.js';
-import { g as getButton } from './button.factory-6c7aab55.js';
-import { p as parseMediaMessageForSlidesMedia, g as getDateFormats } from './chat-helpers-fcd6508c.js';
-import { a as showSlidesMedia, g as getAppContext } from './common-helpers-0071c2da.js';
-import { j as isNativeMobile, p as closeModal, r as requestInterval, v as cancelRequestInterval, a9 as floatingIconAnimation, H as isIOS, aa as disableKeyboardResize, ab as enableKeyboardResize, P as getAsyncExtraData, ac as isNotificationMessage, ad as isRichContentMessage, a3 as getSession, ae as showAlert, t as translate, A as isWeb, af as showActionSheet, ag as isVideo, ah as isGif, Q as findParent, ai as isImage, aj as downloadFile, ak as dateFormat, a7 as getUserDisplayName, X as isNullOrUndefined, u as getFormattedCountDownToDisplay, al as dispatchCustomEvent, G as isIphoneX } from './overlays-be5a9ab3.js';
-import './index-1b38d4f3.js';
+import { g as getButton } from './button.factory-360481b8.js';
+import { p as parseMediaMessageForSlidesMedia, g as getDateFormats } from './chat-helpers-6d598406.js';
+import { a as showSlidesMedia, g as getAppContext } from './common-helpers-f5ae39a5.js';
+import { j as isNativeMobile, p as closeModal, r as requestInterval, v as cancelRequestInterval, a9 as floatingIconAnimation, H as isIOS, aa as disableKeyboardResize, ab as enableKeyboardResize, P as getAsyncExtraData, ac as isNotificationMessage, ad as isRichContentMessage, a3 as getSession, ae as showAlert, t as translate, A as isWeb, af as showActionSheet, ag as isVideo, ah as isGif, Q as findParent, ai as isImage, aj as downloadFile, ak as dateFormat, a7 as getUserDisplayName, X as isNullOrUndefined, u as getFormattedCountDownToDisplay, al as dispatchCustomEvent, G as isIphoneX } from './overlays-f516b003.js';
+import './index-896d4c0c.js';
 import './_commonjsHelpers-f4d11124.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))}";

package/dist/design-system/yoo-collapsible.entry.js

@@ -1,11 +1,11 @@
 import { r as registerInstance, i as createEvent, h, e as Host } from './index-becca019.js';
-import './index-c7d02f02.js';
-import { t as translate } from './overlays-be5a9ab3.js';
+import './index-5120ceae.js';
+import { t as translate } from './overlays-f516b003.js';
 import './lodash-f6e59a8e.js';
 import './index-e7f48bcb.js';
 import './_commonjsHelpers-f4d11124.js';
 
-const collapsibleCss = ":host{display:block;width:100%;color:var(--dark, #000000)}.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);padding-bottom: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[size=small]) .outer-container .slot-container:not(.collapsed){padding:var(--spacing-08, 0.5rem) var(--spacing-08, 0.5rem);padding-bottom:var(--spacing-08, 0.5rem)}: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}";
+const collapsibleCss = ":host{display:block;width:100%;color:var(--dark, #000000)}.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);padding-bottom: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[size=small]) .outer-container .slot-container:not(.collapsed){padding:var(--spacing-08, 0.5rem) var(--spacing-08, 0.5rem);padding-bottom:var(--spacing-08, 0.5rem)}: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(.drawfow) .outer-container.collapsed{min-height:auto}:host(.drawfow) .outer-container.collapsed .header-container{padding-top:0}:host(.large) .outer-container .title{font-size:var(--font-size-16, 1rem)}:host(.full-width) .outer-container .title{-ms-flex:1;flex:1}";
 
 const YooCollapsibleComponent = class {
   constructor(hostRef) {
@@ -67,7 +67,7 @@ const YooCollapsibleComponent = class {
       h("yoo-button", { class: "deletable", shape: "square", onClick: (ev) => this.deleteItem(ev) }, h("yoo-icon", { name: "delete", size: "small" }));
   }
   render() {
-    return (h(Host, { collapsed: this.collapsed }, h("div", { class: { 'outer-container': true, 'collapsed': this.collapsed }, ref: (el) => (this.outerContainer = el) }, !this.useButton && (h("div", { class: "header-container", onClick: () => !this.toggleWithArrowOnly && this.toggleContent() }, this.icon && !this.isPdf && h("yoo-icon", { class: "prefix", name: this.icon, color: this.iconColor || 'stable', size: this.iconSize }), h("span", { class: { title: true, pdf: this.isPdf } }, this.header, this.slotHeader && h("slot", { name: "title" })), !this.isPdf && this.hasArrowIcon && (h("yoo-icon", { onClick: () => this.toggleWithArrowOnly && this.toggleContent(), size: this.iconSize, name: this.collapsed ? 'arrow-down' : 'arrow-up', color: this.arrowColor || 'dark', ref: (el) => (this.arrow = el) })), this.renderDeleteButton())), this.useButton && (h("div", { class: "header-container button", onClick: () => this.toggleContent() }, h("yoo-button", { color: !this.collapsed ? 'app-color' : 'light', ref: (el) => (this.button = el) }, this.icon && h("yoo-icon", { name: this.icon, color: !this.collapsed ? 'light' : 'dark', slot: "start", size: this.iconSize, ref: (el) => (this.buttonIcon = el) }), this.header), this.renderDeleteButton())), h("div", { class: { 'slot-container': true, 'collapsed': this.collapsed }, ref: (el) => (this.slotContainer = el) }, h("slot", null)))));
+    return (h(Host, { collapsed: this.collapsed }, h("div", { class: { 'outer-container': true, 'collapsed': this.collapsed }, ref: (el) => (this.outerContainer = el) }, !this.useButton && (h("div", { class: "header-container", onClick: () => !this.toggleWithArrowOnly && this.toggleContent() }, this.icon && !this.isPdf && h("yoo-icon", { class: "prefix", name: this.icon, color: this.iconColor || 'stable', size: this.iconSize }), h("span", { class: { title: true, pdf: this.isPdf } }, this.header, this.slotHeader && h("slot", { name: "title" })), !this.isPdf && this.hasArrowIcon && (h("yoo-icon", { onClick: () => this.toggleWithArrowOnly && this.toggleContent(), size: this.iconSize, name: this.collapsed ? 'arrow-down' : 'arrow-up', color: this.arrowColor || 'dark', ref: (el) => (this.arrow = el) })), h("slot", { name: "title-extra-icon" }), this.renderDeleteButton())), this.useButton && (h("div", { class: "header-container button", onClick: () => this.toggleContent() }, h("yoo-button", { color: !this.collapsed ? 'app-color' : 'light', ref: (el) => (this.button = el) }, this.icon && h("yoo-icon", { name: this.icon, color: !this.collapsed ? 'light' : 'dark', slot: "start", size: this.iconSize, ref: (el) => (this.buttonIcon = el) }), this.header), this.renderDeleteButton())), h("div", { class: { 'slot-container': true, 'collapsed': this.collapsed }, ref: (el) => (this.slotContainer = el) }, h("slot", null)))));
   }
 };
 YooCollapsibleComponent.style = collapsibleCss;

package/dist/design-system/yoo-color-selector.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, i as createEvent, h, e as Host } from './index-becca019.js';
-import './index-c7d02f02.js';
-import { bm as getContrastColor, H as isIOS } from './overlays-be5a9ab3.js';
+import './index-5120ceae.js';
+import { bn as getContrastColor, H as isIOS } from './overlays-f516b003.js';
 import './lodash-f6e59a8e.js';
 import './index-e7f48bcb.js';
 import './_commonjsHelpers-f4d11124.js';

package/dist/design-system/yoo-community-detail.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-becca019.js';
-import './index-c7d02f02.js';
-import { g as getAppContext } from './common-helpers-0071c2da.js';
-import { A as isWeb, C as debounce, Z as translateMulti, aq as pipes, t as translate } from './overlays-be5a9ab3.js';
+import './index-5120ceae.js';
+import { g as getAppContext } from './common-helpers-f5ae39a5.js';
+import { A as isWeb, C as debounce, Z as translateMulti, aq as pipes, t as translate } from './overlays-f516b003.js';
 import './lodash-f6e59a8e.js';
 import './index-e7f48bcb.js';
 import './_commonjsHelpers-f4d11124.js';

package/dist/design-system/yoo-context-menu-dialog.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-becca019.js';
-import './index-c7d02f02.js';
+import './index-5120ceae.js';
 import { b as isFunction } from './lodash-f6e59a8e.js';
-import { g as getAppContext } from './common-helpers-0071c2da.js';
-import { p as closeModal, ar as copyToClipboard, Z as translateMulti, X as isNullOrUndefined } from './overlays-be5a9ab3.js';
+import { g as getAppContext } from './common-helpers-f5ae39a5.js';
+import { p as closeModal, ar as copyToClipboard, Z as translateMulti, X as isNullOrUndefined } from './overlays-f516b003.js';
 import './index-e7f48bcb.js';
 import './_commonjsHelpers-f4d11124.js';
 

package/dist/design-system/yoo-context-menu.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-becca019.js';
-import './index-c7d02f02.js';
-import { g as getAppContext } from './common-helpers-0071c2da.js';
-import { ds as showContextMenu, fr as closeMenuModal, fs as isMouseInBoundaries } from './overlays-be5a9ab3.js';
+import './index-5120ceae.js';
+import { g as getAppContext } from './common-helpers-f5ae39a5.js';
+import { aC as showContextMenu, fr as closeMenuModal, fs as isMouseInBoundaries } from './overlays-f516b003.js';
 import './lodash-f6e59a8e.js';
 import './index-e7f48bcb.js';
 import './_commonjsHelpers-f4d11124.js';

package/dist/design-system/yoo-copyright.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, e as Host } from './index-becca019.js';
-import './index-c7d02f02.js';
-import { t as translate } from './overlays-be5a9ab3.js';
+import './index-5120ceae.js';
+import { t as translate } from './overlays-f516b003.js';
 import './lodash-f6e59a8e.js';
 import './index-e7f48bcb.js';
 import './_commonjsHelpers-f4d11124.js';

package/dist/design-system/yoo-count-down.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-becca019.js';
-import './index-c7d02f02.js';
-import { g as getAppContext } from './common-helpers-0071c2da.js';
-import { t as translate } from './overlays-be5a9ab3.js';
+import './index-5120ceae.js';
+import { g as getAppContext } from './common-helpers-f5ae39a5.js';
+import { t as translate } from './overlays-f516b003.js';
 import './lodash-f6e59a8e.js';
 import './index-e7f48bcb.js';
 import './_commonjsHelpers-f4d11124.js';

package/dist/design-system/yoo-course-info-card.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, e as Host } from './index-becca019.js';
-import './index-c7d02f02.js';
-import { t as translate, Z as translateMulti } from './overlays-be5a9ab3.js';
+import './index-5120ceae.js';
+import { t as translate, Z as translateMulti } from './overlays-f516b003.js';
 import './lodash-f6e59a8e.js';
 import './index-e7f48bcb.js';
 import './_commonjsHelpers-f4d11124.js';

package/dist/design-system/yoo-course-summary.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-becca019.js';
-import './index-c7d02f02.js';
+import './index-5120ceae.js';
 import { C as get } from './lodash-f6e59a8e.js';
-import { g as getAppContext } from './common-helpers-0071c2da.js';
-import { U as Cloudinary, t as translate, A as isWeb, a2 as getPlanDueDate, as as formatDistanceFromNow, Z as translateMulti } from './overlays-be5a9ab3.js';
+import { g as getAppContext } from './common-helpers-f5ae39a5.js';
+import { U as Cloudinary, t as translate, A as isWeb, a2 as getPlanDueDate, as as formatDistanceFromNow, Z as translateMulti } from './overlays-f516b003.js';
 import './index-e7f48bcb.js';
 import './_commonjsHelpers-f4d11124.js';
 

package/dist/design-system/yoo-dashboard-detail.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h } from './index-becca019.js';
-import './index-c7d02f02.js';
-import { Z as translateMulti, t as translate, aq as pipes } from './overlays-be5a9ab3.js';
+import './index-5120ceae.js';
+import { Z as translateMulti, t as translate, aq as pipes } from './overlays-f516b003.js';
 import './lodash-f6e59a8e.js';
 import './index-e7f48bcb.js';
 import './_commonjsHelpers-f4d11124.js';

package/dist/design-system/yoo-date.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, e as Host } from './index-becca019.js';
-import './index-c7d02f02.js';
-import { aq as pipes } from './overlays-be5a9ab3.js';
+import './index-5120ceae.js';
+import { aq as pipes } from './overlays-f516b003.js';
 import './lodash-f6e59a8e.js';
 import './index-e7f48bcb.js';
 import './_commonjsHelpers-f4d11124.js';

package/dist/design-system/yoo-detail-bar.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, i as createEvent, h, e as Host } from './index-becca019.js';
-import './index-c7d02f02.js';
+import './index-5120ceae.js';
 import { G as isBoolean, a as isNumber } from './lodash-f6e59a8e.js';
-import { g as groupsFullResolver } from './entities-helpers-67ff3fa4.js';
-import { X as isNullOrUndefined, ak as dateFormat, t as translate, Z as translateMulti, at as getLanguageKey } from './overlays-be5a9ab3.js';
+import { g as groupsFullResolver } from './entities-helpers-696a052a.js';
+import { X as isNullOrUndefined, ak as dateFormat, t as translate, Z as translateMulti, at as getLanguageKey } from './overlays-f516b003.js';
 import './index-e7f48bcb.js';
 import './_commonjsHelpers-f4d11124.js';
 

package/dist/design-system/yoo-device-list.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, h, e as Host, g as getElement } from './index-becca019.js';
 import { p as devices } from './index-e7f48bcb.js';
-import './index-c7d02f02.js';
+import './index-5120ceae.js';
 import { l as uniq } from './lodash-f6e59a8e.js';
-import { p as closeModal, t as translate } from './overlays-be5a9ab3.js';
+import { p as closeModal, t as translate } from './overlays-f516b003.js';
 import './_commonjsHelpers-f4d11124.js';
 
 const deviceListCss = ":host .header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .header yoo-button{padding:var(--spacing-08, 0.5rem)}:host .header .title{width:100%;padding-right:var(--spacing-40, 2.5rem);text-align:center}:host .divider{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;height:1.5rem;padding-left:var(--spacing-16, 1rem);color:var(--text-color, #807f83);font-weight:bold;font-size:var(--font-size-12, 0.75rem);background:var(--stable-ultralight, #fafafa)}:host yoo-form-choice-button,:host yoo-form-choice-chat,:host yoo-form-choice-card,:host yoo-form-choice-image,:host yoo-form-choice-radio{padding:0 var(--spacing-16, 1rem)}";

package/dist/design-system/yoo-device.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-becca019.js';
 import { p as devices } from './index-e7f48bcb.js';
-import './index-c7d02f02.js';
-import { C as debounce, Q as findParent } from './overlays-be5a9ab3.js';
+import './index-5120ceae.js';
+import { C as debounce, Q as findParent } from './overlays-f516b003.js';
 import './lodash-f6e59a8e.js';
 import './_commonjsHelpers-f4d11124.js';
 

package/dist/design-system/yoo-draw-flow.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, i as createEvent, f as forceUpdate, h } from './index-becca019.js';
-import './index-c7d02f02.js';
+import { r as registerInstance, i as createEvent, f as forceUpdate, h, e as Host } from './index-becca019.js';
+import './index-5120ceae.js';
 import { a as createCommonjsModule, c as commonjsGlobal, g as getDefaultExportFromCjs } from './_commonjsHelpers-f4d11124.js';
 import { y as isEmpty, k as keys, P as max } from './lodash-f6e59a8e.js';
-import { Q as findParent, t as translate } from './overlays-be5a9ab3.js';
+import { Q as findParent, aC as showContextMenu, t as translate } from './overlays-f516b003.js';
 import './index-e7f48bcb.js';
 
 var drawflow_min = createCommonjsModule(function (module, exports) {
@@ -11,7 +11,7 @@ var drawflow_min = createCommonjsModule(function (module, exports) {
 
 const Drawflow = /*@__PURE__*/getDefaultExportFromCjs(drawflow_min);
 
-const drawFlowCss = ":host{--border-size:0.25rem;--dfBackgroundColor:rgba(255, 255, 255, 1);--dfBackgroundSize:24px;--dfBackgroundImage:radial-gradient(rgba(191, 191, 191, 1) 1px, transparent 1px);--dfNodeType:flex;--dfNodeTypeFloat:none;--dfNodeBackgroundColor:rgba(255, 255, 255, 1);--dfNodeTextColor:#000000;--dfNodeBorderSize:var(--border-size);--dfNodeBorderColor:rgba(90, 48, 244, 1);--dfNodeBorderRadius:16px;--dfNodeMinHeight:40px;--dfNodeMinWidth:0;--dfNodePaddingTop:0;--dfNodePaddingBottom:0rem;--dfNodeBoxShadowHL:0px;--dfNodeBoxShadowVL:2px;--dfNodeBoxShadowBR:16px;--dfNodeBoxShadowS:2px;--dfNodeBoxShadowColor:rgba(0, 0, 0, 0.1);--dfNodeHoverBackgroundColor:rgba(255, 255, 255, 1);--dfNodeHoverTextColor:#000000;--dfNodeHoverBorderSize:var(--border-size);--dfNodeHoverBorderColor:rgba(90, 48, 244, 1);--dfNodeHoverBorderRadius:16px;--dfNodeHoverBoxShadowHL:0px;--dfNodeHoverBoxShadowVL:2px;--dfNodeHoverBoxShadowBR:16px;--dfNodeHoverBoxShadowS:2px;--dfNodeHoverBoxShadowColor:rgba(0, 0, 0, 0.1);--dfNodeSelectedBackgroundColor:rgba(90, 48, 244, 1);--dfNodeSelectedTextColor:#ffffff;--dfNodeSelectedBorderSize:var(--border-size);--dfNodeSelectedBorderColor:rgba(90, 48, 244, 1);--dfNodeSelectedBorderRadius:16px;--dfNodeSelectedBoxShadowHL:0px;--dfNodeSelectedBoxShadowVL:2px;--dfNodeSelectedBoxShadowBR:16px;--dfNodeSelectedBoxShadowS:2px;--dfNodeSelectedBoxShadowColor:rgba(0, 0, 0, 0.1);--dfInputBackgroundColor:rgba(90, 48, 244, 1);--dfInputBorderSize:var(--border-size);--dfInputBorderColor:rgba(255, 255, 255, 1);--dfInputBorderRadius:50px;--dfInputLeft:-1.875rem;--dfInputHeight:20px;--dfInputWidth:20px;--dfInputHoverBackgroundColor:rgba(255, 255, 255, 1);--dfInputHoverBorderSize:var(--border-size);--dfInputHoverBorderColor:rgba(0, 0, 0, 1);--dfInputHoverBorderRadius:50px;--dfOutputBackgroundColor:#ffffff;--dfOutputBorderSize:var(--border-size);--dfOutputBorderColor:rgba(90, 48, 244, 1);--dfOutputBorderRadius:50px;--dfOutputRight:-0.1875rem;--dfOutputHeight:20px;--dfOutputWidth:20px;--dfOutputHoverBackgroundColor:#ffffff;--dfOutputHoverBorderSize:var(--border-size);--dfOutputHoverBorderColor:#000000;--dfOutputHoverBorderRadius:50px;--dfLineWidth:var(--border-size);--dfLineColor:rgba(208, 208, 208, 1);--dfLineHoverColor:rgba(90, 48, 244, 1);--dfLineSelectedColor:rgba(255, 198, 27, 1);--dfRerouteBorderWidth:var(--border-size);--dfRerouteBorderColor:rgba(90, 48, 244, 1);--dfRerouteBackgroundColor:#ffffff;--dfRerouteHoverBorderWidth:var(--border-size);--dfRerouteHoverBorderColor:#000000;--dfRerouteHoverBackgroundColor:#ffffff;--dfDeleteDisplay:block;--dfDeleteColor:#ffffff;--dfDeleteBackgroundColor:rgba(212, 67, 51, 1);--dfDeleteBorderSize:var(--border-size);--dfDeleteBorderColor:#ffffff;--dfDeleteBorderRadius:50px;--dfDeleteTop:-24px;--dfDeleteHoverColor:rgba(255, 255, 255, 1);--dfDeleteHoverBackgroundColor:rgba(210, 79, 76, 1);--dfDeleteHoverBorderSize:var(--border-size);--dfDeleteHoverBorderColor:rgba(255, 255, 255, 1);--dfDeleteHoverBorderRadius:50px}:host .parent-drawflow{display:-ms-flexbox;display:flex;overflow:hidden;outline:none;-ms-touch-action:none;touch-action:none}:host .drawflow{position:relative;width:100%;height:100%;-webkit-perspective:0;perspective:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .drawflow .parent-node{position:relative}:host .drawflow .drawflow-node{position:absolute;z-index:2;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:160px;min-height:40px;padding:15px;color:black;background:cyan;border:2px solid black;border-radius:4px}:host .drawflow .drawflow-node.selected{z-index:100;background:var(--light, #ffffff)}:host .drawflow .drawflow-node:hover{cursor:move}:host .drawflow .drawflow-node .inputs,:host .drawflow .drawflow-node .outputs{width:0px}:host .drawflow .drawflow-node .drawflow_content_node{display:block;width:100%}:host .drawflow .drawflow-node .input,:host .drawflow .drawflow-node .output{position:relative;z-index:1;width:20px;height:20px;margin-bottom:5px;background:white;border:2px solid black;border-radius:50%;cursor:crosshair}:host .drawflow .drawflow-node .input{top:0.375rem}:host .drawflow .drawflow-node .output{top:0.375rem}:host .drawflow svg{position:absolute;z-index:0;overflow:visible !important}:host .drawflow .connection{position:absolute;pointer-events:none;aspect-ratio:1/1}:host .drawflow .connection .main-path{pointer-events:all;fill:none;stroke:steelblue;stroke-width:5px}:host .drawflow .connection .main-path:hover{cursor:pointer;stroke:#1266ab}:host .drawflow .connection .main-path.selected{stroke:#43b993}:host .drawflow .connection .point{cursor:move;pointer-events:all;fill:white;stroke:black;stroke-width:2}:host .drawflow .connection .point.selected,:host .drawflow .connection .point:hover{fill:#1266ab}:host .drawflow .main-path{fill:none;stroke-width:5px;stroke:steelblue}:host .drawflow-delete{position:absolute;z-index:4;display:block;width:30px;height:30px;color:white;font-weight:bold;font-family:monospace;line-height:30px;text-align:center;background:black;border:2px solid white;border-radius:50%;cursor:pointer}:host .drawflow>.drawflow-delete{margin-top:15px;margin-left:-15px}:host .parent-node .drawflow-delete{top:-15px;right:-15px}:host .drawflow-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%}:host .drawflow-container .drawflow .drawflow-node{display:var(--dfNodeType);-ms-flex-align:start;align-items:flex-start;width:auto;min-width:var(--dfNodeMinWidth);min-height:var(--dfNodeMinHeight);padding-top:var(--dfNodePaddingTop);padding-bottom:var(--dfNodePaddingBottom);color:var(--dfNodeTextColor);background:var(--dfNodeBackgroundColor);border:var(--dfNodeBorderSize) solid var(--dfNodeBorderColor);border-radius:var(--dfNodeBorderRadius);-webkit-box-shadow:var(--dfNodeBoxShadowHL) var(--dfNodeBoxShadowVL) var(--dfNodeBoxShadowBR) var(--dfNodeBoxShadowS) var(--dfNodeBoxShadowColor);box-shadow:var(--dfNodeBoxShadowHL) var(--dfNodeBoxShadowVL) var(--dfNodeBoxShadowBR) var(--dfNodeBoxShadowS) var(--dfNodeBoxShadowColor)}:host .drawflow-container .drawflow .drawflow-node:hover{color:var(--dfNodeHoverTextColor);background:var(--dfNodeHoverBackgroundColor);border:var(--dfNodeHoverBorderSize) solid var(--dfNodeHoverBorderColor);border-radius:var(--dfNodeHoverBorderRadius);-webkit-box-shadow:var(--dfNodeHoverBoxShadowHL) var(--dfNodeHoverBoxShadowVL) var(--dfNodeHoverBoxShadowBR) var(--dfNodeHoverBoxShadowS) var(--dfNodeHoverBoxShadowColor);box-shadow:var(--dfNodeHoverBoxShadowHL) var(--dfNodeHoverBoxShadowVL) var(--dfNodeHoverBoxShadowBR) var(--dfNodeHoverBoxShadowS) var(--dfNodeHoverBoxShadowColor)}:host .drawflow-container .drawflow .drawflow-node.selected{color:var(--dfNodeSelectedTextColor);border:var(--dfNodeSelectedBorderSize) solid var(--dfNodeSelectedBackgroundColor);border-radius:var(--dfNodeSelectedBorderRadius);-webkit-box-shadow:var(--shadow-04, 0 0.75rem 1.5rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-04, 0 0.75rem 1.5rem 0 rgba(0, 0, 0, 0.1))}:host .drawflow-container .drawflow .drawflow-node .input{left:var(--dfInputLeft);width:var(--dfInputWidth);height:var(--dfInputHeight);background:var(--dfInputBackgroundColor);border:var(--dfInputBorderSize) solid var(--dfInputBorderColor);border-radius:var(--dfInputBorderRadius)}:host .drawflow-container .drawflow .drawflow-node .input:hover{background:var(--dfInputHoverBackgroundColor);border:var(--dfInputHoverBorderSize) solid var(--dfInputHoverBorderColor);border-radius:var(--dfInputHoverBorderRadius)}:host .drawflow-container .drawflow .drawflow-node .outputs{float:var(--dfNodeTypeFloat)}:host .drawflow-container .drawflow .drawflow-node .output{right:var(--dfOutputRight);width:var(--dfOutputWidth);height:var(--dfOutputHeight);background:var(--dfOutputBackgroundColor);border:var(--dfOutputBorderSize) solid var(--dfOutputBorderColor);border-radius:var(--dfOutputBorderRadius)}:host .drawflow-container .drawflow .drawflow-node .output:hover{background:var(--dfOutputHoverBackgroundColor);border:var(--dfOutputHoverBorderSize) solid var(--dfOutputHoverBorderColor);border-radius:var(--dfOutputHoverBorderRadius)}:host .drawflow-container .drawflow .connection .main-path{stroke:var(--dfLineColor);stroke-width:var(--dfLineWidth)}:host .drawflow-container .drawflow .connection .main-path:hover{stroke:var(--dfLineHoverColor)}:host .drawflow-container .drawflow .connection .main-path.selected{stroke:var(--dfLineSelectedColor)}:host .drawflow-container .drawflow .connection .point{fill:var(--dfRerouteBackgroundColor);stroke:var(--dfRerouteBorderColor);stroke-width:var(--dfRerouteBorderWidth)}:host .drawflow-container .drawflow .connection .point:hover{fill:var(--dfRerouteHoverBackgroundColor);stroke:var(--dfRerouteHoverBorderColor);stroke-width:var(--dfRerouteHoverBorderWidth)}:host .drawflow-container .drawflow-delete{display:var(--dfDeleteDisplay);-webkit-box-sizing:content-box;box-sizing:content-box;color:var(--dfDeleteColor);background:var(--dfDeleteBackgroundColor);border:var(--dfDeleteBorderSize) solid var(--dfDeleteBorderColor);border-radius:var(--dfDeleteBorderRadius)}:host .drawflow-container .parent-node .drawflow-delete{top:var(--dfDeleteTop)}:host .drawflow-container .drawflow-delete:hover{color:var(--dfDeleteHoverColor);background:var(--dfDeleteHoverBackgroundColor);border:var(--dfDeleteHoverBorderSize) solid var(--dfDeleteHoverBorderColor);border-radius:var(--dfDeleteHoverBorderRadius)}:host .drawflow-container .toolbar{position:absolute;right:0;bottom:0;left:0;display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;padding:1rem}:host .drawflow-container .toolbar yoo-icon,:host .drawflow-container .toolbar .spacing{margin-left:1rem}:host .drawflow-container .toolbar yoo-icon[name=side-menu-collapse],:host .drawflow-container .toolbar yoo-icon[name=side-menu-expand]{-webkit-transform:rotate(90deg);transform:rotate(90deg)}:host .drawflow-container .outer-container{-ms-flex:1;flex:1;width:100%;height:100%;background:var(--dfBackgroundColor);background-image:var(--dfBackgroundImage);background-size:var(--dfBackgroundSize) var(--dfBackgroundSize)}:host .drawflow-container .outer-container .drawflow .parent-node .drawflow-delete{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host .drawflow-container .outer-container .drawflow .drawflow-node{border-color:var(--accent, #276ef1)}:host .drawflow-container .outer-container .drawflow .drawflow-node.multimedia,:host .drawflow-container .outer-container .drawflow .drawflow-node.learn,:host .drawflow-container .outer-container .drawflow .drawflow-node.uiactions,:host .drawflow-container .outer-container .drawflow .drawflow-node.action{border-color:var(--info, #d84c96)}:host .drawflow-container .outer-container .drawflow .drawflow-node.multimedia.selected1,:host .drawflow-container .outer-container .drawflow .drawflow-node.learn.selected1,:host .drawflow-container .outer-container .drawflow .drawflow-node.uiactions.selected1,:host .drawflow-container .outer-container .drawflow .drawflow-node.action.selected1{background:var(--info, #d84c96)}:host .drawflow-container .outer-container .drawflow .drawflow-node.multimedia.hover1,:host .drawflow-container .outer-container .drawflow .drawflow-node.learn.hover1,:host .drawflow-container .outer-container .drawflow .drawflow-node.uiactions.hover1,:host .drawflow-container .outer-container .drawflow .drawflow-node.action.hover1{background:var(--info-20, rgba(216, 76, 150, 0.2))}:host .drawflow-container .outer-container .drawflow .drawflow-node.multimedia .input,:host .drawflow-container .outer-container .drawflow .drawflow-node.learn .input,:host .drawflow-container .outer-container .drawflow .drawflow-node.uiactions .input,:host .drawflow-container .outer-container .drawflow .drawflow-node.action .input{background:var(--info, #d84c96)}:host .drawflow-container .outer-container .drawflow .drawflow-node.multimedia .output,:host .drawflow-container .outer-container .drawflow .drawflow-node.learn .output,:host .drawflow-container .outer-container .drawflow .drawflow-node.uiactions .output,:host .drawflow-container .outer-container .drawflow .drawflow-node.action .output{border-color:var(--info, #d84c96)}:host .drawflow-container .outer-container .drawflow .drawflow-node.select,:host .drawflow-container .outer-container .drawflow .drawflow-node.events,:host .drawflow-container .outer-container .drawflow .drawflow-node.dataevents,:host .drawflow-container .outer-container .drawflow .drawflow-node.trigger{border-color:var(--accent, #276ef1)}:host .drawflow-container .outer-container .drawflow .drawflow-node.select.selected1,:host .drawflow-container .outer-container .drawflow .drawflow-node.events.selected1,:host .drawflow-container .outer-container .drawflow .drawflow-node.dataevents.selected1,:host .drawflow-container .outer-container .drawflow .drawflow-node.trigger.selected1{color:var(--light, #ffffff);background:var(--accent, #276ef1)}:host .drawflow-container .outer-container .drawflow .drawflow-node.select.selected1 yoo-icon,:host .drawflow-container .outer-container .drawflow .drawflow-node.events.selected1 yoo-icon,:host .drawflow-container .outer-container .drawflow .drawflow-node.dataevents.selected1 yoo-icon,:host .drawflow-container .outer-container .drawflow .drawflow-node.trigger.selected1 yoo-icon{fill:var(--light, #ffffff)}:host .drawflow-container .outer-container .drawflow .drawflow-node.select.hover1,:host .drawflow-container .outer-container .drawflow .drawflow-node.events.hover1,:host .drawflow-container .outer-container .drawflow .drawflow-node.dataevents.hover1,:host .drawflow-container .outer-container .drawflow .drawflow-node.trigger.hover1{background:var(--accent-20, rgba(39, 110, 241, 0.2))}:host .drawflow-container .outer-container .drawflow .drawflow-node.select .input,:host .drawflow-container .outer-container .drawflow .drawflow-node.events .input,:host .drawflow-container .outer-container .drawflow .drawflow-node.dataevents .input,:host .drawflow-container .outer-container .drawflow .drawflow-node.trigger .input{background:var(--accent, #276ef1)}:host .drawflow-container .outer-container .drawflow .drawflow-node.select .output,:host .drawflow-container .outer-container .drawflow .drawflow-node.events .output,:host .drawflow-container .outer-container .drawflow .drawflow-node.dataevents .output,:host .drawflow-container .outer-container .drawflow .drawflow-node.trigger .output{border-color:var(--accent, #276ef1)}:host .drawflow-container .outer-container .drawflow .drawflow-node.textcategory,:host .drawflow-container .outer-container .drawflow .drawflow-node.condition{border-color:var(--energized, #ffc043)}:host .drawflow-container .outer-container .drawflow .drawflow-node.textcategory.selected1,:host .drawflow-container .outer-container .drawflow .drawflow-node.condition.selected1{color:var(--dark, #000000);background:var(--energized, #ffc043)}:host .drawflow-container .outer-container .drawflow .drawflow-node.textcategory.hover1,:host .drawflow-container .outer-container .drawflow .drawflow-node.condition.hover1{background:var(--energized-20, rgba(255, 192, 67, 0.2))}:host .drawflow-container .outer-container .drawflow .drawflow-node.textcategory .input,:host .drawflow-container .outer-container .drawflow .drawflow-node.condition .input{background:var(--energized, #ffc043)}:host .drawflow-container .outer-container .drawflow .drawflow-node.textcategory .output,:host .drawflow-container .outer-container .drawflow .drawflow-node.condition .output{border-color:var(--energized, #ffc043)}:host .drawflow-container .outer-container .drawflow .drawflow-node.number,:host .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp,:host .drawflow-container .outer-container .drawflow .drawflow-node.customfield,:host .drawflow-container .outer-container .drawflow .drawflow-node.lesson,:host .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent{border-color:var(--app-color, #5a30f4)}:host .drawflow-container .outer-container .drawflow .drawflow-node.number.selected1,:host .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp.selected1,:host .drawflow-container .outer-container .drawflow .drawflow-node.customfield.selected1,:host .drawflow-container .outer-container .drawflow .drawflow-node.lesson.selected1,:host .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent.selected1{color:var(--light, #ffffff);background:var(--app-color, #5a30f4)}:host .drawflow-container .outer-container .drawflow .drawflow-node.number.selected1 yoo-icon,:host .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp.selected1 yoo-icon,:host .drawflow-container .outer-container .drawflow .drawflow-node.customfield.selected1 yoo-icon,:host .drawflow-container .outer-container .drawflow .drawflow-node.lesson.selected1 yoo-icon,:host .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent.selected1 yoo-icon{fill:var(--light, #ffffff)}:host .drawflow-container .outer-container .drawflow .drawflow-node.number.hover1,:host .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp.hover1,:host .drawflow-container .outer-container .drawflow .drawflow-node.customfield.hover1,:host .drawflow-container .outer-container .drawflow .drawflow-node.lesson.hover1,:host .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent.hover1{background:var(--app-color-20, rgba(90, 48, 244, 0.2))}:host .drawflow-container .outer-container .drawflow .drawflow-node.number .input,:host .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp .input,:host .drawflow-container .outer-container .drawflow .drawflow-node.customfield .input,:host .drawflow-container .outer-container .drawflow .drawflow-node.lesson .input,:host .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent .input{background:var(--app-color, #5a30f4)}:host .drawflow-container .outer-container .drawflow .drawflow-node.number .output,:host .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp .output,:host .drawflow-container .outer-container .drawflow .drawflow-node.customfield .output,:host .drawflow-container .outer-container .drawflow .drawflow-node.lesson .output,:host .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent .output{border-color:var(--app-color, #5a30f4)}:host .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail,:host .drawflow-container .outer-container .drawflow .drawflow-node.engage,:host .drawflow-container .outer-container .drawflow .drawflow-node.information,:host .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions,:host .drawflow-container .outer-container .drawflow .drawflow-node.entity,:host .drawflow-container .outer-container .drawflow .drawflow-node.notification{border-color:var(--warning, #ed6e33)}:host .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail.selected1,:host .drawflow-container .outer-container .drawflow .drawflow-node.engage.selected1,:host .drawflow-container .outer-container .drawflow .drawflow-node.information.selected1,:host .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions.selected1,:host .drawflow-container .outer-container .drawflow .drawflow-node.entity.selected1,:host .drawflow-container .outer-container .drawflow .drawflow-node.notification.selected1{color:var(--light, #ffffff);background:var(--warning, #ed6e33)}:host .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail.selected1 yoo-icon,:host .drawflow-container .outer-container .drawflow .drawflow-node.engage.selected1 yoo-icon,:host .drawflow-container .outer-container .drawflow .drawflow-node.information.selected1 yoo-icon,:host .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions.selected1 yoo-icon,:host .drawflow-container .outer-container .drawflow .drawflow-node.entity.selected1 yoo-icon,:host .drawflow-container .outer-container .drawflow .drawflow-node.notification.selected1 yoo-icon{fill:var(--light, #ffffff)}:host .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail.hover1,:host .drawflow-container .outer-container .drawflow .drawflow-node.engage.hover1,:host .drawflow-container .outer-container .drawflow .drawflow-node.information.hover1,:host .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions.hover1,:host .drawflow-container .outer-container .drawflow .drawflow-node.entity.hover1,:host .drawflow-container .outer-container .drawflow .drawflow-node.notification.hover1{background:var(--warning-20, rgba(237, 110, 51, 0.2))}:host .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail .input,:host .drawflow-container .outer-container .drawflow .drawflow-node.engage .input,:host .drawflow-container .outer-container .drawflow .drawflow-node.information .input,:host .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions .input,:host .drawflow-container .outer-container .drawflow .drawflow-node.entity .input,:host .drawflow-container .outer-container .drawflow .drawflow-node.notification .input{background:var(--warning, #ed6e33)}:host .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail .output,:host .drawflow-container .outer-container .drawflow .drawflow-node.engage .output,:host .drawflow-container .outer-container .drawflow .drawflow-node.information .output,:host .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions .output,:host .drawflow-container .outer-container .drawflow .drawflow-node.entity .output,:host .drawflow-container .outer-container .drawflow .drawflow-node.notification .output{border-color:var(--warning, #ed6e33)}:host .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring,:host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor{border-color:var(--text-color, #807f83)}:host .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring.selected1,:host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor.selected1{color:var(--dark, #000000);background:var(--text-color, #807f83)}:host .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring.hover1,:host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor.hover1{background:var(--text-color-20, rgba(128, 127, 131, 0.2))}:host .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring .input,:host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor .input{background:var(--text-color, #807f83)}:host .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring .output,:host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor .output{border-color:var(--text-color, #807f83)}:host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory,:host .drawflow-container .outer-container .drawflow .drawflow-node.logic{border-color:var(--anthracite, #1a1a1a)}:host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory.selected1,:host .drawflow-container .outer-container .drawflow .drawflow-node.logic.selected1{color:var(--light, #ffffff);background:var(--anthracite, #1a1a1a)}:host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory.selected1 yoo-icon,:host .drawflow-container .outer-container .drawflow .drawflow-node.logic.selected1 yoo-icon{fill:var(--light, #ffffff)}:host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory.hover1,:host .drawflow-container .outer-container .drawflow .drawflow-node.logic.hover1{background:var(--anthracite-20, rgba(26, 26, 26, 0.2))}:host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory .input,:host .drawflow-container .outer-container .drawflow .drawflow-node.logic .input{background:var(--anthracite, #1a1a1a)}:host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory .output,:host .drawflow-container .outer-container .drawflow .drawflow-node.logic .output{border-color:var(--anthracite, #1a1a1a)}:host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime{border-color:var(--dark, #000000)}:host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime.selected1{color:var(--light, #ffffff);background:var(--dark, #000000)}:host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime.selected1 yoo-icon{fill:var(--light, #ffffff)}:host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime.hover1{background:var(--dark-20, rgba(0, 0, 0, 0.2))}:host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime .input{background:var(--dark, #000000)}:host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime .output{border-color:var(--dark, #000000)}:host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode,:host .drawflow-container .outer-container .drawflow .drawflow-node.notifications{border-color:var(--danger, #d44333)}:host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode.selected1,:host .drawflow-container .outer-container .drawflow .drawflow-node.notifications.selected1{color:var(--light, #ffffff);background:var(--danger, #d44333)}:host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode.selected1 yoo-icon,:host .drawflow-container .outer-container .drawflow .drawflow-node.notifications.selected1 yoo-icon{fill:var(--light, #ffffff)}:host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode.hover1,:host .drawflow-container .outer-container .drawflow .drawflow-node.notifications.hover1{background:var(--danger-20, rgba(212, 67, 51, 0.2))}:host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode .input,:host .drawflow-container .outer-container .drawflow .drawflow-node.notifications .input{background:var(--danger, #d44333)}:host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode .output,:host .drawflow-container .outer-container .drawflow .drawflow-node.notifications .output{border-color:var(--danger, #d44333)}:host .drawflow-container .outer-container .drawflow .drawflow-node.condition{border-color:var(--stable, #adadad)}:host .drawflow-container .outer-container .drawflow .drawflow-node.condition.selected1{color:var(--dark, #000000);background:var(--stable, #adadad)}:host .drawflow-container .outer-container .drawflow .drawflow-node.condition.hover1{background:var(--stable-20, rgba(173, 173, 173, 0.2))}:host .drawflow-container .outer-container .drawflow .drawflow-node.condition .input{background:var(--stable, #adadad)}:host .drawflow-container .outer-container .drawflow .drawflow-node.condition .output{border-color:var(--stable, #adadad)}:host .drawflow-container .outer-container .drawflow .drawflow-node.page,:host .drawflow-container .outer-container .drawflow .drawflow-node.dataactions,:host .drawflow-container .outer-container .drawflow .drawflow-node.operate{border-color:var(--success, #3aa76d)}:host .drawflow-container .outer-container .drawflow .drawflow-node.page.selected1,:host .drawflow-container .outer-container .drawflow .drawflow-node.dataactions.selected1,:host .drawflow-container .outer-container .drawflow .drawflow-node.operate.selected1{color:var(--light, #ffffff);background:var(--success, #3aa76d)}:host .drawflow-container .outer-container .drawflow .drawflow-node.page.selected1 yoo-icon,:host .drawflow-container .outer-container .drawflow .drawflow-node.dataactions.selected1 yoo-icon,:host .drawflow-container .outer-container .drawflow .drawflow-node.operate.selected1 yoo-icon{fill:var(--light, #ffffff)}:host .drawflow-container .outer-container .drawflow .drawflow-node.page.hover1,:host .drawflow-container .outer-container .drawflow .drawflow-node.dataactions.hover1,:host .drawflow-container .outer-container .drawflow .drawflow-node.operate.hover1{background:var(--success-20, rgba(58, 167, 109, 0.2))}:host .drawflow-container .outer-container .drawflow .drawflow-node.page .input,:host .drawflow-container .outer-container .drawflow .drawflow-node.dataactions .input,:host .drawflow-container .outer-container .drawflow .drawflow-node.operate .input{background:var(--success, #3aa76d)}:host .drawflow-container .outer-container .drawflow .drawflow-node.page .output,:host .drawflow-container .outer-container .drawflow .drawflow-node.dataactions .output,:host .drawflow-container .outer-container .drawflow .drawflow-node.operate .output{border-color:var(--success, #3aa76d)}:host .drawflow-container .outer-container .drawflow .drawflow-node .block-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .drawflow-container .outer-container .drawflow .drawflow-node .title-box{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}:host .drawflow-container .outer-container .drawflow .drawflow-node .title-box .title-text{-ms-flex:1;flex:1}:host .drawflow-container .outer-container .drawflow .drawflow-node .title-box yoo-icon.margin-right{margin-right:var(--spacing-08, 0.5rem)}:host .drawflow-container .outer-container .drawflow .drawflow-node .title-box yoo-icon.margin-left{margin-left:var(--spacing-08, 0.5rem)}:host .drawflow-container .outer-container .drawflow .drawflow-node .title-box:hover yoo-icon[name=settings]{opacity:1}:host .drawflow-container .outer-container .drawflow .drawflow-node .title-box yoo-icon[name=settings]{cursor:pointer;opacity:0.3}";
+const drawFlowCss = ":host{--border-size:0.125rem;--dfBackgroundColor:var(--stable-alt-20);--dfBackgroundSize:0.75rem;--dfBackgroundImage:radial-gradient(rgba(191, 191, 191, 1) 1px, transparent 1px);--dfNodeType:flex;--dfNodeTypeFloat:none;--dfNodeBackgroundColor:rgba(255, 255, 255, 1);--dfNodeTextColor:#000000;--dfNodeBorderSize:var(--border-size);--dfNodeBorderColor:rgba(90, 48, 244, 1);--dfNodeBorderRadius:16px;--dfNodeMinHeight:40px;--dfNodeMinWidth:0;--dfNodePaddingTop:0;--dfNodePaddingBottom:0rem;--dfNodeBoxShadowHL:0px;--dfNodeBoxShadowVL:2px;--dfNodeBoxShadowBR:16px;--dfNodeBoxShadowS:2px;--dfNodeBoxShadowColor:rgba(0, 0, 0, 0.1);--dfNodeHoverBackgroundColor:rgba(255, 255, 255, 1);--dfNodeHoverTextColor:#000000;--dfNodeHoverBorderSize:var(--border-size);--dfNodeHoverBorderColor:rgba(90, 48, 244, 1);--dfNodeHoverBorderRadius:16px;--dfNodeHoverBoxShadowHL:0px;--dfNodeHoverBoxShadowVL:2px;--dfNodeHoverBoxShadowBR:16px;--dfNodeHoverBoxShadowS:2px;--dfNodeHoverBoxShadowColor:rgba(0, 0, 0, 0.1);--dfNodeSelectedBackgroundColor:rgba(90, 48, 244, 1);--dfNodeSelectedTextColor:#ffffff;--dfNodeSelectedBorderSize:var(--border-size);--dfNodeSelectedBorderColor:rgba(90, 48, 244, 1);--dfNodeSelectedBorderRadius:16px;--dfNodeSelectedBoxShadowHL:0px;--dfNodeSelectedBoxShadowVL:2px;--dfNodeSelectedBoxShadowBR:16px;--dfNodeSelectedBoxShadowS:2px;--dfNodeSelectedBoxShadowColor:rgba(0, 0, 0, 0.1);--dfInputBackgroundColor:rgba(90, 48, 244, 1);--dfInputBorderSize:var(--border-size);--dfInputBorderColor:rgba(255, 255, 255, 1);--dfInputBorderRadius:50px;--dfInputLeft:-26px;--dfInputHeight:11px;--dfInputWidth:11px;--dfInputHoverBackgroundColor:rgba(255, 255, 255, 1);--dfInputHoverBorderSize:var(--border-size);--dfInputHoverBorderColor:rgba(0, 0, 0, 1);--dfInputHoverBorderRadius:50px;--dfOutputBackgroundColor:#ffffff;--dfOutputBorderSize:var(--border-size);--dfOutputBorderColor:rgba(90, 48, 244, 1);--dfOutputBorderRadius:50px;--dfOutputRight:-7px;--dfOutputHeight:11px;--dfOutputWidth:11px;--dfOutputHoverBackgroundColor:#ffffff;--dfOutputHoverBorderSize:var(--border-size);--dfOutputHoverBorderColor:#000000;--dfOutputHoverBorderRadius:50px;--dfLineWidth:var(--border-size);--dfLineColor:rgba(208, 208, 208, 1);--dfLineHoverColor:rgba(90, 48, 244, 1);--dfLineSelectedColor:rgba(255, 198, 27, 1);--dfRerouteBorderWidth:var(--border-size);--dfRerouteBorderColor:rgba(90, 48, 244, 1);--dfRerouteBackgroundColor:#ffffff;--dfRerouteHoverBorderWidth:var(--border-size);--dfRerouteHoverBorderColor:#000000;--dfRerouteHoverBackgroundColor:#ffffff;--dfDeleteDisplay:block;--dfDeleteColor:#ffffff;--dfDeleteBackgroundColor:rgba(212, 67, 51, 1);--dfDeleteBorderSize:var(--border-size);--dfDeleteBorderColor:#ffffff;--dfDeleteBorderRadius:50px;--dfDeleteTop:-24px;--dfDeleteHoverColor:rgba(255, 255, 255, 1);--dfDeleteHoverBackgroundColor:rgba(210, 79, 76, 1);--dfDeleteHoverBorderSize:var(--border-size);--dfDeleteHoverBorderColor:rgba(255, 255, 255, 1);--dfDeleteHoverBorderRadius:50px}:host .parent-drawflow{display:-ms-flexbox;display:flex;overflow:hidden;outline:none;-ms-touch-action:none;touch-action:none}:host .drawflow{position:relative;width:100%;height:100%;-webkit-perspective:0;perspective:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .drawflow .parent-node{position:relative}:host .drawflow .drawflow-node{position:absolute;z-index:2;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:160px;min-height:40px;padding:15px;color:black;background:cyan;border:2px solid black;border-radius:4px}:host .drawflow .drawflow-node.selected{z-index:100;background:var(--light, #ffffff)}:host .drawflow .drawflow-node:hover{cursor:-webkit-grab;cursor:grab}:host .drawflow .drawflow-node .inputs,:host .drawflow .drawflow-node .outputs{width:0px}:host .drawflow .drawflow-node .drawflow_content_node{display:block;width:100%}:host .drawflow .drawflow-node .input,:host .drawflow .drawflow-node .output{position:relative;z-index:1;width:20px;height:20px;margin-bottom:5px;background:white;border:2px solid black;border-radius:50%;cursor:crosshair}:host .drawflow .drawflow-node .input{top:0.375rem}:host .drawflow .drawflow-node .output{top:0.375rem}:host .drawflow svg{position:absolute;z-index:0;overflow:visible !important}:host .drawflow .connection{position:absolute;pointer-events:none;aspect-ratio:1/1}:host .drawflow .connection .main-path{pointer-events:all;fill:none;stroke:steelblue;stroke-width:5px}:host .drawflow .connection .main-path:hover{cursor:pointer;stroke:#1266ab}:host .drawflow .connection .main-path.selected{stroke:#43b993}:host .drawflow .connection .point{cursor:move;pointer-events:all;fill:white;stroke:black;stroke-width:2}:host .drawflow .connection .point.selected,:host .drawflow .connection .point:hover{fill:#1266ab}:host .drawflow .main-path{fill:none;stroke-width:5px;stroke:steelblue}:host .drawflow-delete{position:absolute;z-index:4;display:block;width:30px;height:30px;color:white;font-weight:bold;font-family:monospace;line-height:30px;text-align:center;background:black;border:2px solid white;border-radius:50%;cursor:pointer}:host .drawflow>.drawflow-delete{margin-top:15px;margin-left:-15px}:host .parent-node .drawflow-delete{top:-15px;right:-15px}:host .drawflow-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%}:host .drawflow-container .drawflow .drawflow-node{display:var(--dfNodeType);-ms-flex-align:center;align-items:center;width:auto;min-width:var(--dfNodeMinWidth);min-height:var(--dfNodeMinHeight);padding-top:var(--dfNodePaddingTop);padding-bottom:var(--dfNodePaddingBottom);color:var(--dfNodeTextColor);background:var(--dfNodeBackgroundColor);border:var(--dfNodeBorderSize) solid var(--dfNodeBorderColor);border-radius:var(--dfNodeBorderRadius);-webkit-box-shadow:var(--dfNodeBoxShadowHL) var(--dfNodeBoxShadowVL) var(--dfNodeBoxShadowBR) var(--dfNodeBoxShadowS) var(--dfNodeBoxShadowColor);box-shadow:var(--dfNodeBoxShadowHL) var(--dfNodeBoxShadowVL) var(--dfNodeBoxShadowBR) var(--dfNodeBoxShadowS) var(--dfNodeBoxShadowColor)}:host .drawflow-container .drawflow .drawflow-node:hover{color:var(--dfNodeHoverTextColor);background:var(--dfNodeHoverBackgroundColor);border:var(--dfNodeHoverBorderSize) solid var(--dfNodeHoverBorderColor);border-radius:var(--dfNodeHoverBorderRadius);-webkit-box-shadow:var(--dfNodeHoverBoxShadowHL) var(--dfNodeHoverBoxShadowVL) var(--dfNodeHoverBoxShadowBR) var(--dfNodeHoverBoxShadowS) var(--dfNodeHoverBoxShadowColor);box-shadow:var(--dfNodeHoverBoxShadowHL) var(--dfNodeHoverBoxShadowVL) var(--dfNodeHoverBoxShadowBR) var(--dfNodeHoverBoxShadowS) var(--dfNodeHoverBoxShadowColor)}:host .drawflow-container .drawflow .drawflow-node.selected{color:var(--dfNodeSelectedTextColor);border:var(--dfNodeSelectedBorderSize) solid var(--dfNodeSelectedBackgroundColor);border-radius:var(--dfNodeSelectedBorderRadius);-webkit-box-shadow:var(--shadow-04, 0 0.75rem 1.5rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-04, 0 0.75rem 1.5rem 0 rgba(0, 0, 0, 0.1))}:host .drawflow-container .drawflow .drawflow-node .input{left:var(--dfInputLeft);width:var(--dfInputWidth);height:var(--dfInputHeight);background:var(--dfInputBackgroundColor);border:var(--dfInputBorderSize) solid var(--dfInputBorderColor);border-radius:var(--dfInputBorderRadius)}:host .drawflow-container .drawflow .drawflow-node .input:hover{background:var(--dfInputHoverBackgroundColor);border:var(--dfInputHoverBorderSize) solid var(--dfInputHoverBorderColor);border-radius:var(--dfInputHoverBorderRadius)}:host .drawflow-container .drawflow .drawflow-node .outputs{float:var(--dfNodeTypeFloat)}:host .drawflow-container .drawflow .drawflow-node .output{right:var(--dfOutputRight);width:var(--dfOutputWidth);height:var(--dfOutputHeight);background:var(--dfOutputBackgroundColor);border:var(--dfOutputBorderSize) solid var(--dfOutputBorderColor);border-radius:var(--dfOutputBorderRadius)}:host .drawflow-container .drawflow .drawflow-node .output:hover{background:var(--dfOutputHoverBackgroundColor);border:var(--dfOutputHoverBorderSize) solid var(--dfOutputHoverBorderColor);border-radius:var(--dfOutputHoverBorderRadius)}:host .drawflow-container .drawflow .connection .main-path{stroke:var(--dfLineColor);stroke-width:var(--dfLineWidth)}:host .drawflow-container .drawflow .connection .main-path:hover{stroke:var(--dfLineHoverColor)}:host .drawflow-container .drawflow .connection .main-path.selected{stroke:var(--dfLineSelectedColor)}:host .drawflow-container .drawflow .connection .point{fill:var(--dfRerouteBackgroundColor);stroke:var(--dfRerouteBorderColor);stroke-width:var(--dfRerouteBorderWidth)}:host .drawflow-container .drawflow .connection .point:hover{fill:var(--dfRerouteHoverBackgroundColor);stroke:var(--dfRerouteHoverBorderColor);stroke-width:var(--dfRerouteHoverBorderWidth)}:host .drawflow-container .drawflow-delete{display:var(--dfDeleteDisplay);-webkit-box-sizing:content-box;box-sizing:content-box;color:var(--dfDeleteColor);background:var(--dfDeleteBackgroundColor);border:var(--dfDeleteBorderSize) solid var(--dfDeleteBorderColor);border-radius:var(--dfDeleteBorderRadius)}:host .drawflow-container .parent-node .drawflow-delete{top:var(--dfDeleteTop)}:host .drawflow-container .drawflow-delete:hover{color:var(--dfDeleteHoverColor);background:var(--dfDeleteHoverBackgroundColor);border:var(--dfDeleteHoverBorderSize) solid var(--dfDeleteHoverBorderColor);border-radius:var(--dfDeleteHoverBorderRadius)}:host .drawflow-container .toolbar{position:absolute;right:0;bottom:0;left:0;display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;padding:1rem}:host .drawflow-container .toolbar .spacing{margin-left:1rem}:host .drawflow-container .toolbar .flex{-ms-flex:1;flex:1}:host .drawflow-container .toolbar .button-container{display:-ms-flexbox;display:flex;padding:var(--spacing-08, 0.5rem);-webkit-column-gap:var(--spacing-08, 0.5rem);-moz-column-gap:var(--spacing-08, 0.5rem);column-gap:var(--spacing-08, 0.5rem);background:var(--dark-60, rgba(0, 0, 0, 0.6));border-radius:var(--spacing-04, 0.25rem)}:host .drawflow-container .toolbar .button-container yoo-icon{cursor:pointer}:host .drawflow-container .outer-container{-ms-flex:1;flex:1;width:100%;height:100%;background:var(--dfBackgroundColor);background-image:var(--dfBackgroundImage);background-size:var(--dfBackgroundSize) var(--dfBackgroundSize)}:host .drawflow-container .outer-container.header-container .drawflow .parent-node .drawflow-delete{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node{border-color:var(--accent, #276ef1)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.multimedia,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.learn,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.uiactions,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.action{border-color:var(--info, #d84c96)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.multimedia.selected1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.learn.selected1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.uiactions.selected1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.action.selected1{background:var(--info, #d84c96)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.multimedia.hover1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.learn.hover1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.uiactions.hover1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.action.hover1{background:var(--info-20, rgba(216, 76, 150, 0.2))}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.multimedia .input,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.learn .input,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.uiactions .input,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.action .input{background:var(--info, #d84c96)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.multimedia .output,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.learn .output,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.uiactions .output,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.action .output{border-color:var(--info, #d84c96)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.select,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.events,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataevents,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.trigger{border-color:var(--accent, #276ef1)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.select.selected1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.events.selected1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataevents.selected1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.trigger.selected1{color:var(--light, #ffffff);background:var(--accent, #276ef1)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.select.selected1 yoo-icon,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.events.selected1 yoo-icon,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataevents.selected1 yoo-icon,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.trigger.selected1 yoo-icon{fill:var(--light, #ffffff)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.select.hover1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.events.hover1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataevents.hover1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.trigger.hover1{background:var(--accent-20, rgba(39, 110, 241, 0.2))}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.select .input,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.events .input,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataevents .input,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.trigger .input{background:var(--accent, #276ef1)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.select .output,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.events .output,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataevents .output,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.trigger .output{border-color:var(--accent, #276ef1)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.textcategory,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.condition{border-color:var(--energized, #ffc043)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.textcategory.selected1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.condition.selected1{color:var(--dark, #000000);background:var(--energized, #ffc043)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.textcategory.hover1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.condition.hover1{background:var(--energized-20, rgba(255, 192, 67, 0.2))}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.textcategory .input,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.condition .input{background:var(--energized, #ffc043)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.textcategory .output,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.condition .output{border-color:var(--energized, #ffc043)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.number,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.appcreatorapp,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.customfield,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.lesson,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.boostcontent{border-color:var(--app-color, #5a30f4)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.number.selected1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.appcreatorapp.selected1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.customfield.selected1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.lesson.selected1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.boostcontent.selected1{color:var(--light, #ffffff);background:var(--app-color, #5a30f4)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.number.selected1 yoo-icon,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.appcreatorapp.selected1 yoo-icon,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.customfield.selected1 yoo-icon,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.lesson.selected1 yoo-icon,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.boostcontent.selected1 yoo-icon{fill:var(--light, #ffffff)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.number.hover1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.appcreatorapp.hover1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.customfield.hover1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.lesson.hover1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.boostcontent.hover1{background:var(--app-color-20, rgba(90, 48, 244, 0.2))}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.number .input,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.appcreatorapp .input,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.customfield .input,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.lesson .input,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.boostcontent .input{background:var(--app-color, #5a30f4)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.number .output,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.appcreatorapp .output,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.customfield .output,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.lesson .output,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.boostcontent .output{border-color:var(--app-color, #5a30f4)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.contactdetail,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.engage,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.information,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.nativeactions,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.entity,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.notification{border-color:var(--warning, #ed6e33)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.contactdetail.selected1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.engage.selected1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.information.selected1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.nativeactions.selected1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.entity.selected1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.notification.selected1{color:var(--light, #ffffff);background:var(--warning, #ed6e33)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.contactdetail.selected1 yoo-icon,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.engage.selected1 yoo-icon,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.information.selected1 yoo-icon,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.nativeactions.selected1 yoo-icon,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.entity.selected1 yoo-icon,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.notification.selected1 yoo-icon{fill:var(--light, #ffffff)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.contactdetail.hover1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.engage.hover1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.information.hover1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.nativeactions.hover1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.entity.hover1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.notification.hover1{background:var(--warning-20, rgba(237, 110, 51, 0.2))}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.contactdetail .input,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.engage .input,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.information .input,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.nativeactions .input,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.entity .input,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.notification .input{background:var(--warning, #ed6e33)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.contactdetail .output,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.engage .output,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.information .output,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.nativeactions .output,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.entity .output,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.notification .output{border-color:var(--warning, #ed6e33)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.no-scoring,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.waitfor{border-color:var(--text-color, #807f83)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.no-scoring.selected1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.waitfor.selected1{color:var(--dark, #000000);background:var(--text-color, #807f83)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.no-scoring.hover1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.waitfor.hover1{background:var(--text-color-20, rgba(128, 127, 131, 0.2))}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.no-scoring .input,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.waitfor .input{background:var(--text-color, #807f83)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.no-scoring .output,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.waitfor .output{border-color:var(--text-color, #807f83)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.actioncategory,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.logic{border-color:var(--anthracite, #1a1a1a)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.actioncategory.selected1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.logic.selected1{color:var(--light, #ffffff);background:var(--anthracite, #1a1a1a)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.actioncategory.selected1 yoo-icon,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.logic.selected1 yoo-icon{fill:var(--light, #ffffff)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.actioncategory.hover1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.logic.hover1{background:var(--anthracite-20, rgba(26, 26, 26, 0.2))}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.actioncategory .input,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.logic .input{background:var(--anthracite, #1a1a1a)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.actioncategory .output,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.logic .output{border-color:var(--anthracite, #1a1a1a)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dateandtime{border-color:var(--dark, #000000)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dateandtime.selected1{color:var(--light, #ffffff);background:var(--dark, #000000)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dateandtime.selected1 yoo-icon{fill:var(--light, #ffffff)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dateandtime.hover1{background:var(--dark-20, rgba(0, 0, 0, 0.2))}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dateandtime .input{background:var(--dark, #000000)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dateandtime .output{border-color:var(--dark, #000000)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.catalogandbarcode,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.notifications{border-color:var(--danger, #d44333)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.catalogandbarcode.selected1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.notifications.selected1{color:var(--light, #ffffff);background:var(--danger, #d44333)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.catalogandbarcode.selected1 yoo-icon,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.notifications.selected1 yoo-icon{fill:var(--light, #ffffff)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.catalogandbarcode.hover1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.notifications.hover1{background:var(--danger-20, rgba(212, 67, 51, 0.2))}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.catalogandbarcode .input,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.notifications .input{background:var(--danger, #d44333)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.catalogandbarcode .output,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.notifications .output{border-color:var(--danger, #d44333)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.condition{border-color:var(--stable, #adadad)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.condition.selected1{color:var(--dark, #000000);background:var(--stable, #adadad)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.condition.hover1{background:var(--stable-20, rgba(173, 173, 173, 0.2))}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.condition .input{background:var(--stable, #adadad)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.condition .output{border-color:var(--stable, #adadad)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.page,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataactions,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.operate{border-color:var(--success, #3aa76d)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.page.selected1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataactions.selected1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.operate.selected1{color:var(--light, #ffffff);background:var(--success, #3aa76d)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.page.selected1 yoo-icon,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataactions.selected1 yoo-icon,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.operate.selected1 yoo-icon{fill:var(--light, #ffffff)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.page.hover1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataactions.hover1,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.operate.hover1{background:var(--success-20, rgba(58, 167, 109, 0.2))}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.page .input,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataactions .input,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.operate .input{background:var(--success, #3aa76d)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.page .output,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataactions .output,:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.operate .output{border-color:var(--success, #3aa76d)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node .block-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node .title-box{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node .title-box .title-text{-ms-flex:1;flex:1}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node .title-box yoo-icon.margin-right{margin-right:var(--spacing-08, 0.5rem)}:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node .title-box yoo-icon.margin-left{margin-left:var(--spacing-08, 0.5rem)}";
 
 const YooDrawFlowComponent = class {
   constructor(hostRef) {
@@ -65,8 +65,19 @@ const YooDrawFlowComponent = class {
     this.registerEvents();
     this.editor.on('nodeSelected', () => { });
     this.editor.on('click', (ev) => {
-      var _a, _b;
-      if (((_b = (_a = ev.target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'yoo-collapsible') {
+      var _a, _b, _c, _d;
+      if (((_b = (_a = ev.target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'yoo-icon' && ev.target.name === 'more') {
+        const nodeId = findParent(ev.target, '.drawflow-node').id;
+        if (nodeId) {
+          const node = this.editor.getNodeFromId(nodeId.replace('node-', ''));
+          ev.stopPropagation();
+          ev.preventDefault();
+          setTimeout(() => {
+            this.showContextMenu(node, 0, 0, ev.target);
+          }, 100);
+        }
+      }
+      else if (((_d = (_c = ev.target) === null || _c === void 0 ? void 0 : _c.tagName) === null || _d === void 0 ? void 0 : _d.toLowerCase()) === 'yoo-collapsible') {
         this.toggleCollapsed(ev.target);
       }
     });
@@ -81,6 +92,11 @@ const YooDrawFlowComponent = class {
       this.lastCreatedId = id;
       this.editor.container.querySelector('#node-' + id + ' yoo-collapsible').collapsed = false;
     });
+    this.editor.on('nodeRemoved', (id) => {
+      if (this.lastCreatedId === id) {
+        this.lastCreatedId = null;
+      }
+    });
     this.editor.zoom = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.zoom) || this.editor.zoom;
     this.editor.canvas_x = ((_b = this.config) === null || _b === void 0 ? void 0 : _b.canvas_x) || this.editor.canvas_x;
     this.editor.canvas_y = ((_c = this.config) === null || _c === void 0 ? void 0 : _c.canvas_y) || this.editor.canvas_y;
@@ -98,6 +114,23 @@ const YooDrawFlowComponent = class {
       this.lastCreatedId = null;
     }
   }
+  showContextMenu(node, pageX, pageY, hostElement) {
+    showContextMenu({ pageX, pageY }, {
+      multipleSelection: false,
+      contentButtons: [{
+          text: translate('DELETE'),
+          handler: () => {
+            if (this.lastCreatedId === node.id) {
+              this.lastCreatedId = null;
+            }
+            this.editor.removeNodeId('node-' + node.id);
+            this.onUpdate();
+          }
+        }],
+      className: 'width-unset',
+      hostElement
+    });
+  }
   toggleCollapsed(target) {
     var _a;
     if (((_a = target === null || target === void 0 ? void 0 : target.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'yoo-collapsible') {
@@ -158,13 +191,14 @@ const YooDrawFlowComponent = class {
     const template = `
       <div class="block-container">
       <yoo-collapsible 
-        class="bold full-width"
+        class="bold full-width drawfow"
         header="${translate(block.title)}"
         icon="${block.icon}" 
         icon-color="${block.iconColor}"
         icon-size="medium"
         toggle-with-arrow-only="true"
       >
+          <yoo-icon slot="title-extra-icon" name="more" size="small"></yoo-icon>
           <slot name="block-${block.slotName}"></slot>
         </yoo-collapsible>
       </div>
@@ -172,8 +206,9 @@ const YooDrawFlowComponent = class {
     return template;
   }
   render() {
-    var _a;
-    return (h("div", { class: "drawflow-container" }, h("div", { ref: (el) => (this.containerEl = el), class: "outer-container" }), h("div", { class: "toolbar" }, h("yoo-icon", { name: "side-menu-collapse", size: "medium", onClick: () => this.onCollapseAll() }), h("yoo-icon", { name: "side-menu-expand", size: "medium", onClick: () => this.onExpandAll() }), h("div", { class: "spacing" }), h("yoo-icon", { name: ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.editor_mode) === 'fixed' ? 'unlocked' : 'lock', size: "medium", onClick: () => this.onToggleEditMode() }), h("div", { class: "spacing" }), h("yoo-icon", { name: "circle-minor", size: "medium", onClick: () => this.onZoomOut() }), h("yoo-icon", { name: "circle1", size: "medium", onClick: () => this.onZoomReset() }), h("yoo-icon", { name: "circle-plus", size: "medium", onClick: () => this.onZoomIn() }))));
+    var _a, _b;
+    // class needed for the context menu display
+    return h(Host, { class: "camera-container" }, h("div", { class: "drawflow-container" }, h("div", { ref: (el) => (this.containerEl = el), class: "outer-container" }), h("div", { class: "toolbar" }, h("div", { class: "button-container" }, h("yoo-tooltip", { hoverable: true, placement: "top", content: translate('YOOBICDRAWFLOWEXPANDALL') }, h("yoo-icon", { color: "light", name: "maximize-web", size: "medium", onClick: () => this.onExpandAll() })), h("yoo-tooltip", { hoverable: true, placement: "top", content: translate('YOOBICDRAWFLOWCOLLAPSEALL') }, h("yoo-icon", { color: "light", name: "minimize-web", size: "medium", onClick: () => this.onCollapseAll() }))), h("div", { class: "flex" }), h("div", { class: "button-container" }, h("yoo-tooltip", { hoverable: true, placement: "top", content: translate(((_a = this.editor) === null || _a === void 0 ? void 0 : _a.editor_mode) === 'fixed' ? 'YOOBICDRAWFLOWUNLOCK' : 'YOOBICDRAWFLOWLOCK') }, h("yoo-icon", { color: "light", name: ((_b = this.editor) === null || _b === void 0 ? void 0 : _b.editor_mode) === 'fixed' ? 'unlocked' : 'lock', size: "medium", onClick: () => this.onToggleEditMode() }))), h("div", { class: "spacing" }), h("div", { class: "button-container" }, h("yoo-tooltip", { hoverable: true, placement: "top", content: translate('YOOBICDRAWFLOWZOOMRESET') }, h("yoo-icon", { color: "light", name: "gps", size: "medium", onClick: () => this.onZoomReset() })), h("yoo-tooltip", { hoverable: true, placement: "top", content: translate('YOOBICDRAWFLOWZOOMOUT') }, h("yoo-icon", { color: "light", name: "zoom-out", size: "medium", onClick: () => this.onZoomOut() })), h("yoo-tooltip", { hoverable: true, placement: "top", content: translate('YOOBICDRAWFLOWZOOMIN') }, h("yoo-icon", { color: "light", name: "zoom-in", size: "medium", onClick: () => this.onZoomIn() }))))));
   }
 };
 YooDrawFlowComponent.style = drawFlowCss;