@yoobic/yobi 8.3.1-10 → 8.3.1-11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/yoo-announcement-heading.cjs.entry.js +2 -2
- package/dist/cjs/yoo-card-inbox.cjs.entry.js +1 -1
- package/dist/cjs/yoo-chat.cjs.entry.js +1 -1
- package/dist/cjs/yoo-form-dynamic.cjs.entry.js +3 -1
- package/dist/cjs/yoo-form-footer.cjs.entry.js +1 -1
- package/dist/cjs/yoo-healthscore.cjs.entry.js +1 -1
- package/dist/cjs/yoo-lesson-detail-card.cjs.entry.js +1 -1
- package/dist/cjs/yoo-mission-heading.cjs.entry.js +1 -1
- package/dist/cjs/yoo-progress-bar.cjs.entry.js +19 -35
- package/dist/collection/components/1.atoms/progress-bar/progress-bar.css +3 -6
- package/dist/collection/components/1.atoms/progress-bar/progress-bar.js +19 -35
- package/dist/collection/components/form/form-dynamic/form-dynamic.js +3 -1
- package/dist/collection/components/form/form-footer/form-footer.css +4 -7
- package/dist/collection/feature-communicate/chat/chat/chat.css +1 -1
- package/dist/collection/feature-learn/learning/lesson-detail-card/lesson-detail-card.css +1 -0
- package/dist/collection/feature-operate/mission/announcement-heading/announcement-heading.css +5 -9
- package/dist/collection/feature-operate/mission/announcement-heading/announcement-heading.js +3 -4
- package/dist/collection/feature-operate/mission/card-inbox/card-inbox.css +1 -2
- package/dist/collection/feature-operate/mission/healthscore/healthscore.css +0 -1
- package/dist/collection/feature-operate/mission/mission-heading/mission-heading.css +2 -1
- package/dist/design-system/yoo-announcement-heading.entry.js +2 -2
- package/dist/design-system/yoo-card-inbox.entry.js +1 -1
- package/dist/design-system/yoo-chat.entry.js +1 -1
- package/dist/design-system/yoo-form-dynamic.entry.js +3 -1
- package/dist/design-system/yoo-form-footer.entry.js +1 -1
- package/dist/design-system/yoo-healthscore.entry.js +1 -1
- package/dist/design-system/yoo-lesson-detail-card.entry.js +1 -1
- package/dist/design-system/yoo-mission-heading.entry.js +1 -1
- package/dist/design-system/yoo-progress-bar.entry.js +19 -35
- package/dist/esm/yoo-announcement-heading.entry.js +2 -2
- package/dist/esm/yoo-card-inbox.entry.js +1 -1
- package/dist/esm/yoo-chat.entry.js +1 -1
- package/dist/esm/yoo-form-dynamic.entry.js +3 -1
- package/dist/esm/yoo-form-footer.entry.js +1 -1
- package/dist/esm/yoo-healthscore.entry.js +1 -1
- package/dist/esm/yoo-lesson-detail-card.entry.js +1 -1
- package/dist/esm/yoo-mission-heading.entry.js +1 -1
- package/dist/esm/yoo-progress-bar.entry.js +19 -35
- package/dist/types/components/1.atoms/progress-bar/progress-bar.d.ts +4 -3
- package/package.json +1 -1
|
@@ -12,7 +12,7 @@ require('./lodash-72d493b9.js');
|
|
|
12
12
|
require('./index-50ff0b20.js');
|
|
13
13
|
require('./_commonjsHelpers-94df2ea7.js');
|
|
14
14
|
|
|
15
|
-
const announcementHeadingCss = ":host{--announcement-background-color:var(--stable-light, #f1f1f1);--announcement-color:var(--dark, #000000)}:host yoo-banner{--main-color:var(--warning-10, rgba(237, 110, 51, 0.1));margin:var(--spacing-08, 0.5rem)}:host .outer-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--spacing-16, 1rem);padding:var(--spacing-16, 1rem);color:var(--announcement-color);background-color:var(--announcement-background-color)}:host .outer-container .title{font-weight:bold;font-size:var(--font-size-32, 2rem)}:host .outer-container .title yoo-truncate{--max-lines:4;--line-height:initial}:host .outer-container .progress{display
|
|
15
|
+
const announcementHeadingCss = ":host{--announcement-background-color:var(--stable-light, #f1f1f1);--announcement-color:var(--dark, #000000)}:host yoo-banner{--main-color:var(--warning-10, rgba(237, 110, 51, 0.1));margin:var(--spacing-08, 0.5rem)}:host .outer-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--spacing-16, 1rem);padding:var(--spacing-16, 1rem);color:var(--announcement-color);background-color:var(--announcement-background-color)}:host .outer-container .title{font-weight:bold;font-size:var(--font-size-32, 2rem)}:host .outer-container .title yoo-truncate{--max-lines:4;--line-height:initial}:host .outer-container .progress{display:grid;grid-template-columns:var(--spacing-16, 1rem) auto;-ms-flex-align:center;align-items:center;max-width:12rem}:host .outer-container .progress yoo-progress-bar{--trail-bar-color:var(--app-color-20, rgba(90, 48, 244, 0.2))}:host .outer-container .progress yoo-truncate{margin:0 var(--spacing-08, 0.5rem)}:host .outer-container .progress yoo-truncate.app-color{color:var(--app-color, #5a30f4)}:host .outer-container .tags yoo-tag{margin-right:var(--spacing-08, 0.5rem);margin-bottom:var(--spacing-08, 0.5rem)}:host .outer-container .progress-separator{margin-bottom:var(--spacing-08, 0.5rem);border-bottom:var(--border-width-01, 0.0625rem) solid var(--announcement-color)}:host(.feed){display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host(.feed) .outer-container{-ms-flex-pack:justify;justify-content:space-between;min-height:21.875rem}:host(.feed) .outer-container .details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--spacing-16, 1rem)}:host(.feed) .outer-container .title{font-size:var(--font-size-28, 1.75rem)}:host(.feed) yoo-form-carousel{position:relative;z-index:1}:host(.feed) yoo-form-carousel .outer-container{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;color:var(--light, #ffffff);background-color:transparent;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(11%, rgba(0, 0, 0, 0)), to(var(--dark-60, rgba(0, 0, 0, 0.6))));background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 11%, var(--dark-60, rgba(0, 0, 0, 0.6)))}:host(.feed) .action{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:40px;padding:0 var(--spacing-08, 0.5rem) 0 var(--spacing-16, 1rem);color:var(--light, #ffffff);font-size:var(--font-size-16, 1rem);background-color:var(--announcement-color)}:host([is-preview]) .outer-container .progress .quick-task-progress yoo-progress-bar{--svg-width:1.5rem}";
|
|
16
16
|
|
|
17
17
|
const YooAnnouncementHeadingComponent = class {
|
|
18
18
|
constructor(hostRef) {
|
|
@@ -82,7 +82,7 @@ const YooAnnouncementHeadingComponent = class {
|
|
|
82
82
|
const announcementProgress = missionsHelpers.getMissionProgress(this.announcement);
|
|
83
83
|
const renderProgress = ((_b = (_a = this.announcement.todo) === null || _a === void 0 ? void 0 : _a.values) === null || _b === void 0 ? void 0 : _b.length) > 0;
|
|
84
84
|
if ((announcementProgress === null || announcementProgress === void 0 ? void 0 : announcementProgress.value) >= 0 && renderProgress) {
|
|
85
|
-
return index.h("div", { class: "progress" }, index.h("
|
|
85
|
+
return index.h("div", { class: "progress" }, index.h("yoo-progress-bar", { class: "app-color", shape: "circle", hideProgressValue: true, value: announcementProgress.value, metric: announcementProgress.unit, maxValue: announcementProgress.max }), index.h("yoo-truncate", { class: "app-color", style: { cssText: '--max-lines: 1' } }, index.h("span", null, overlays.translate('ACTIONSCOMPLETED', { smart_count: announcementProgress.value, total: announcementProgress.max }))));
|
|
86
86
|
}
|
|
87
87
|
}
|
|
88
88
|
renderDueDate(dueDate) {
|
|
@@ -9,7 +9,7 @@ const overlays = require('./overlays-0cf588e0.js');
|
|
|
9
9
|
require('./index-50ff0b20.js');
|
|
10
10
|
require('./_commonjsHelpers-94df2ea7.js');
|
|
11
11
|
|
|
12
|
-
const cardInboxCss = ":host .outer-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .outer-container .header{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}:host .outer-container .header .unread-state{opacity:1}:host .outer-container .header .unread-state.read{opacity:0}:host .outer-container .header yoo-truncate{margin-right:var(--spacing-16, 1rem);padding-top:var(--spacing-04, 0.25rem)}:host .outer-container .header yoo-truncate.with-margin-bottom{margin-bottom:var(--spacing-08, 0.5rem)}:host .outer-container .header yoo-truncate span{word-break:break-word}:host .outer-container .header .sup{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:end;align-items:flex-end;margin-left:auto;padding-top:var(--spacing-08, 0.5rem);color:var(--text-color, #807f83);font-size:var(--font-size-12, 0.75rem)}:host .outer-container .header .sup div{display:-ms-flexbox;display:flex;grid-gap:var(--spacing-04, 0.25rem);-ms-flex-align:center;align-items:center}:host .outer-container .header yoo-icon[name=circle1]{height:var(--spacing-32, 2rem);margin-right:var(--spacing-04, 0.25rem)}:host .outer-container .content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin-left:calc(var(--icon-size-00, 0.75rem) + var(--spacing-04, 0.25rem) + var(--spacing-32, 2rem) + var(--spacing-08, 0.5rem))}:host .outer-container .content yoo-progress-bar{--font-size-16:var(--font-size-12, 0.75rem);--progress-bar-color:var(--app-color, #5a30f4);--svg-width:1rem
|
|
12
|
+
const cardInboxCss = ":host .outer-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .outer-container .header{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}:host .outer-container .header .unread-state{opacity:1}:host .outer-container .header .unread-state.read{opacity:0}:host .outer-container .header yoo-truncate{margin-right:var(--spacing-16, 1rem);padding-top:var(--spacing-04, 0.25rem)}:host .outer-container .header yoo-truncate.with-margin-bottom{margin-bottom:var(--spacing-08, 0.5rem)}:host .outer-container .header yoo-truncate span{word-break:break-word}:host .outer-container .header .sup{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:end;align-items:flex-end;margin-left:auto;padding-top:var(--spacing-08, 0.5rem);color:var(--text-color, #807f83);font-size:var(--font-size-12, 0.75rem)}:host .outer-container .header .sup div{display:-ms-flexbox;display:flex;grid-gap:var(--spacing-04, 0.25rem);-ms-flex-align:center;align-items:center}:host .outer-container .header yoo-icon[name=circle1]{height:var(--spacing-32, 2rem);margin-right:var(--spacing-04, 0.25rem)}:host .outer-container .content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin-left:calc(var(--icon-size-00, 0.75rem) + var(--spacing-04, 0.25rem) + var(--spacing-32, 2rem) + var(--spacing-08, 0.5rem))}:host .outer-container .content yoo-progress-bar{--font-size-16:var(--font-size-12, 0.75rem);--progress-bar-color:var(--app-color, #5a30f4);--svg-width:var(--spacing-16, 1rem);margin:0}:host .outer-container .content .tags{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}:host .outer-container .content .tags yoo-tag{margin-right:var(--spacing-08, 0.5rem);margin-bottom:var(--spacing-08, 0.5rem)}:host .outer-container .content .sub-item-detail{display:grid;grid-gap:var(--spacing-08, 0.5rem);grid-template-columns:1.5rem 1fr;-ms-flex-align:center;align-items:center;width:100%;margin-bottom:var(--spacing-08, 0.5rem);color:var(--text-color, #807f83);font-size:var(--font-size-14, 0.875rem)}:host .outer-container .content .note{color:var(--text-color, #807f83);font-size:var(--font-size-12, 0.75rem)}:host .outer-container .highlight{position:absolute;top:calc(var(--spacing-32, 2rem) + var(--spacing-08, 0.5rem));bottom:var(--spacing-08, 0.5rem);left:calc(var(--icon-size-00, 0.75rem) + var(--spacing-04, 0.25rem) + var(--spacing-16, 1rem));width:1px}:host .outer-container yoo-avatar,:host .outer-container yoo-avatars{margin-right:var(--spacing-08, 0.5rem)}";
|
|
13
13
|
|
|
14
14
|
const YooCardInboxComponent = class {
|
|
15
15
|
constructor(hostRef) {
|
|
@@ -13,7 +13,7 @@ const overlays = require('./overlays-0cf588e0.js');
|
|
|
13
13
|
require('./index-ab8a110b.js');
|
|
14
14
|
require('./_commonjsHelpers-94df2ea7.js');
|
|
15
15
|
|
|
16
|
-
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))}";
|
|
16
|
+
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:6}: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))}";
|
|
17
17
|
|
|
18
18
|
const YooChatComponent = class {
|
|
19
19
|
constructor(hostRef) {
|
|
@@ -947,7 +947,9 @@ const YooFormDynamicComponent = class {
|
|
|
947
947
|
if (this.innerTimer > 0) {
|
|
948
948
|
this.innerTimer--;
|
|
949
949
|
}
|
|
950
|
-
const footer = this.
|
|
950
|
+
const footer = this.host.classList.contains('course-preview')
|
|
951
|
+
? this.formFooterElement
|
|
952
|
+
: this.getElementFromCurrentSlide('yoo-form-footer');
|
|
951
953
|
if (footer) {
|
|
952
954
|
footer.countDownValue = this.innerTimer;
|
|
953
955
|
}
|
|
@@ -12,7 +12,7 @@ require('./index-ab8a110b.js');
|
|
|
12
12
|
require('./index-50ff0b20.js');
|
|
13
13
|
require('./_commonjsHelpers-94df2ea7.js');
|
|
14
14
|
|
|
15
|
-
const formFooterCss = ":host{--border-radius:0;--border:none;z-index:1;width:100%}:host .outer-container{z-index:2;padding-bottom:var(--safe-area-inset-bottom);background-color:var(--light, #ffffff)}:host .outer-container yoo-copyright{padding:var(--spacing-08, 0.5rem)}:host .outer-container .mission-footer{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;height:var(--footer-height);background-color:var(--light, #ffffff);border-top:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .outer-container .mission-footer yoo-button{z-index:3}:host .outer-container .mission-footer .button-container{z-index:3;padding:var(--spacing-16, 1rem) var(--spacing-08, 0.5rem)}:host .outer-container .mission-footer .button-container.single{width:100%}:host .outer-container .mission-footer .button-container:first-child{padding-left:var(--spacing-16, 1rem)}:host .outer-container .mission-footer .button-container:last-child{padding-right:var(--spacing-16, 1rem)}:host .outer-container .mission-footer .timer-container{display
|
|
15
|
+
const formFooterCss = ":host{--border-radius:0;--border:none;z-index:1;width:100%}:host .outer-container{z-index:2;padding-bottom:var(--safe-area-inset-bottom);background-color:var(--light, #ffffff)}:host .outer-container yoo-copyright{padding:var(--spacing-08, 0.5rem)}:host .outer-container .mission-footer{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;height:var(--footer-height);background-color:var(--light, #ffffff);border-top:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .outer-container .mission-footer yoo-button{z-index:3}:host .outer-container .mission-footer .button-container{z-index:3;padding:var(--spacing-16, 1rem) var(--spacing-08, 0.5rem)}:host .outer-container .mission-footer .button-container.single{width:100%}:host .outer-container .mission-footer .button-container:first-child{padding-left:var(--spacing-16, 1rem)}:host .outer-container .mission-footer .button-container:last-child{padding-right:var(--spacing-16, 1rem)}:host .outer-container .mission-footer .timer-container{display:grid;grid-template-columns:20% auto;gap:var(--spacing-16, 1rem);-ms-flex-align:center;align-items:center;width:100%;max-width:14rem;margin-left:var(--spacing-16, 1rem);text-align:left}:host .outer-container .mission-footer .timer-container yoo-progress-bar{--progress-bar-color:var(--app-color, #5a30f4);--stroke-width-circle:6}:host(:not(.relative)){position:absolute;top:auto;right:0;bottom:0;left:0}:host(.no-gradient) .mission-footer{height:3.125rem}:host(.mobile){--footer-height:5.75rem;min-height:var(--footer-height)}:host(.mobile) .mission-footer{-ms-flex-pack:distribute;justify-content:space-around;width:100%}:host(.mobile) .mission-footer .button-container{width:100%;overflow:hidden}:host(.mobile) .mission-footer .button-container yoo-button{--button-width-container:100%}:host(.web){--footer-height:cssvar(spacing-56);display:block;height:var(--spacing-56, 3.5rem)}:host(.web) .mission-footer{-ms-flex-pack:end !important;justify-content:flex-end !important;height:var(--spacing-56, 3.5rem)}:host(.web) .mission-footer .button-container{padding-top:var(--spacing-08, 0.5rem);padding-bottom:var(--spacing-08, 0.5rem)}:host(.web) .mission-footer .button-container yoo-button{min-width:6rem}:host(.web.with-copyright){--footer-height:5.75rem;height:var(--footer-height)}:host(.no-border) .mission-footer{border-top:0}:host(.hide){display:none}:host(.full-width) .mission-footer .button-container{width:100%}:host(.web.fixed) .mission-footer{position:fixed !important}:host(.sticky.web){position:-webkit-sticky;position:sticky;bottom:0}:host(.course.web.fixed) .mission-footer{width:calc(100% - 17.5rem)}:host(.web.rating){position:absolute;top:auto;right:0;bottom:0;left:0}:host(.expanded-grid-view) .mission-footer .button-container yoo-button{width:4.125rem}@media (orientation: landscape){:host(.landscape.tablet:not(.emulate-preview)) .mission-footer{-ms-flex-pack:center;justify-content:center}:host(.landscape.tablet:not(.emulate-preview)) .mission-footer .button-container{width:25%}}:host(.lesson) .outer-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.lesson.web) .mission-footer{width:100%}:host(.slot){--footer-height:auto}:host(.slot) .outer-container{padding:0 var(--spacing-16, 1rem)}:host(.slot) .button-container{width:100%}:host(.slot) .mission-footer{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host(.slot) .mission-footer .header{width:100%;padding:var(--spacing-08, 0.5rem) 0}:host(.lesson-detail) .mission-footer .timer-container{-ms-flex-pack:end !important;justify-content:flex-end !important;padding-right:var(--spacing-16, 1rem)}";
|
|
16
16
|
|
|
17
17
|
const YooFormFooterComponent = class {
|
|
18
18
|
constructor(hostRef) {
|
|
@@ -9,7 +9,7 @@ const overlays = require('./overlays-0cf588e0.js');
|
|
|
9
9
|
require('./index-50ff0b20.js');
|
|
10
10
|
require('./_commonjsHelpers-94df2ea7.js');
|
|
11
11
|
|
|
12
|
-
const healthscoreCss = ".accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}.app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}.danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}.dark{color:var(--dark, #000000);fill:var(--dark, #000000)}.energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}.info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}.light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}.stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}.stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}.stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}.stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}.success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}.text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}.warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}.wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}.text-extra-small{font-size:var(--font-size-12, 0.75rem) !important}.text-small{font-size:var(--font-size-14, 0.875rem) !important}.text-medium{font-size:var(--font-size-16, 1rem) !important}.text-large{font-size:var(--font-size-18, 1.125rem) !important}.text-extra-large{font-size:var(--font-size-36, 2.25rem) !important}.text-extra-extra-large{font-size:var(--font-size-54, 3.375rem) !important}:host{display:block;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:30rem}:host .header{padding:var(--spacing-08, 0.5rem);background-color:var(--light, #ffffff)}:host .sub-value{position:absolute;color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}:host([display-mode=compact]){display:grid;grid-template-areas:\"header header\" \"overview cards\";grid-template-rows:auto 1fr;grid-template-columns:calc(40% - var(--spacing-08)) 1fr;-ms-flex-align:center;align-items:center;background-color:var(--light, #ffffff)}:host([display-mode=compact]) .header{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;grid-area:header;padding:var(--spacing-08, 0.5rem)}:host([display-mode=compact]) .header .subtitle{color:var(--text-color, #807f83)}:host([display-mode=compact]) .overview{grid-area:overview;margin:0 var(--spacing-04, 0.25rem)}:host([display-mode=compact]) .overview yoo-progress-bar{--progress-value-tsy:calc(-50% - .5rem);--progress-value-font-size:var(--font-size-36, 2.25rem)}:host([display-mode=compact]) .sub-value{bottom:22%;font-size:var(--font-size-12, 0.75rem)}:host([display-mode=compact]) .cards-progress{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;grid-area:cards;-ms-flex-pack:space-evenly;justify-content:space-evenly;height:100%;margin:0 var(--spacing-08, 0.5rem)}:host([display-mode=large]){min-width:var(--col-max-width-small, 20rem)}:host([display-mode=large]) .overview{position:relative;display:inline-grid;grid-template-columns:auto 1fr auto;-ms-flex-align:baseline;align-items:baseline;width:100%;text-align:center}:host([display-mode=large]) .overview .indicator{min-width:2rem;padding:var(--spacing-08, 0.5rem);font-size:var(--font-size-14, 0.875rem)}:host([display-mode=large]) .overview yoo-tooltip,:host([display-mode=large]) .overview yoo-display-increment{position:absolute;right:var(--spacing-16, 1rem)}:host([display-mode=large]) .overview yoo-tooltip{top:0}:host([display-mode=large]) .overview yoo-display-increment{top:var(--spacing-32, 2rem)}:host([display-mode=large]) .overview yoo-progress-bar{--stroke-width-circle:6;--
|
|
12
|
+
const healthscoreCss = ".accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}.app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}.danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}.dark{color:var(--dark, #000000);fill:var(--dark, #000000)}.energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}.info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}.light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}.stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}.stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}.stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}.stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}.success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}.text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}.warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}.wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}.text-extra-small{font-size:var(--font-size-12, 0.75rem) !important}.text-small{font-size:var(--font-size-14, 0.875rem) !important}.text-medium{font-size:var(--font-size-16, 1rem) !important}.text-large{font-size:var(--font-size-18, 1.125rem) !important}.text-extra-large{font-size:var(--font-size-36, 2.25rem) !important}.text-extra-extra-large{font-size:var(--font-size-54, 3.375rem) !important}:host{display:block;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:30rem}:host .header{padding:var(--spacing-08, 0.5rem);background-color:var(--light, #ffffff)}:host .sub-value{position:absolute;color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}:host([display-mode=compact]){display:grid;grid-template-areas:\"header header\" \"overview cards\";grid-template-rows:auto 1fr;grid-template-columns:calc(40% - var(--spacing-08)) 1fr;-ms-flex-align:center;align-items:center;background-color:var(--light, #ffffff)}:host([display-mode=compact]) .header{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;grid-area:header;padding:var(--spacing-08, 0.5rem)}:host([display-mode=compact]) .header .subtitle{color:var(--text-color, #807f83)}:host([display-mode=compact]) .overview{grid-area:overview;margin:0 var(--spacing-04, 0.25rem)}:host([display-mode=compact]) .overview yoo-progress-bar{--progress-value-tsy:calc(-50% - .5rem);--progress-value-font-size:var(--font-size-36, 2.25rem)}:host([display-mode=compact]) .sub-value{bottom:22%;font-size:var(--font-size-12, 0.75rem)}:host([display-mode=compact]) .cards-progress{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;grid-area:cards;-ms-flex-pack:space-evenly;justify-content:space-evenly;height:100%;margin:0 var(--spacing-08, 0.5rem)}:host([display-mode=large]){min-width:var(--col-max-width-small, 20rem)}:host([display-mode=large]) .overview{position:relative;display:inline-grid;grid-template-columns:auto 1fr auto;-ms-flex-align:baseline;align-items:baseline;width:100%;text-align:center}:host([display-mode=large]) .overview .indicator{min-width:2rem;padding:var(--spacing-08, 0.5rem);font-size:var(--font-size-14, 0.875rem)}:host([display-mode=large]) .overview yoo-tooltip,:host([display-mode=large]) .overview yoo-display-increment{position:absolute;right:var(--spacing-16, 1rem)}:host([display-mode=large]) .overview yoo-tooltip{top:0}:host([display-mode=large]) .overview yoo-display-increment{top:var(--spacing-32, 2rem)}:host([display-mode=large]) .overview yoo-progress-bar{--stroke-width-circle:6;--progress-value-font-size:var(--font-size-54, 3.375rem)}:host([display-mode=large]) .overview yoo-progress-bar[metric=points].show-bar-points{--progress-bar-display:block;--trail-bar-display:block}:host([display-mode=large]) .overview .sub-value{bottom:var(--spacing-04, 0.25rem)}:host([display-mode=large]) .subtitle{color:var(--stable, #adadad);font-size:var(--font-size-16, 1rem);text-align:center}:host([display-mode=large]) yoo-numbers-display{display:block;width:calc(100% - var(--spacing-16));margin:var(--spacing-16, 1rem)}:host([display-mode=large]) yoo-button{width:-webkit-min-content;width:-moz-min-content;width:min-content;margin:var(--spacing-16, 1rem) auto var(--spacing-32, 2rem)}:host([display-mode=large]) .cards-progress yoo-card-progress{margin:var(--spacing-16, 1rem) var(--spacing-04, 0.25rem)}:host([display-mode=large][animated]) .cards-progress{overflow:hidden}:host([display-mode=large][animated]) .cards-progress yoo-card-progress{opacity:0}";
|
|
13
13
|
|
|
14
14
|
const YooHealthscoreComponent = class {
|
|
15
15
|
constructor(hostRef) {
|
|
@@ -9,7 +9,7 @@ require('./lodash-72d493b9.js');
|
|
|
9
9
|
require('./index-50ff0b20.js');
|
|
10
10
|
require('./_commonjsHelpers-94df2ea7.js');
|
|
11
11
|
|
|
12
|
-
const lessonDetailCardCss = ":host .card-container .top-bar{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:var(--spacing-56, 3.5rem);padding:0 var(--spacing-16, 1rem)}:host .card-container .top-bar .header .heading{margin:0}:host .card-container .top-bar .header .subheader{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;color:var(--stable);font-size:var(--font-size-12)}:host .card-container .top-bar .header .subheader yoo-icon{margin-right:var(--spacing-04, 0.25rem)}:host .card-container .top-bar .right-column{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}:host .card-container .top-bar .right-column .header-info{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;margin:0 var(--spacing-08, 0.5rem)}:host .card-container .top-bar .right-column .header-info yoo-icon{margin-right:var(--spacing-08, 0.5rem)}:host .card-container .top-bar .right-column .header-info p{font-size:var(--font-size-16)}:host .card-container .top-bar .right-column .tag-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin:0 var(--spacing-08, 0.5rem)}:host .card-container .top-bar .right-column .toggle-icon:hover{cursor:pointer}:host .card-container .content-container{max-height:18.75rem;overflow:hidden;-webkit-transition:max-height 200ms;transition:max-height 200ms}:host .card-container .content-container yoo-banner{--main-color:var(--warning-10, rgba(237, 110, 51, 0.1));width:95%;margin:var(--spacing-08, 0.5rem) auto;padding:var(--spacing-08, 0.5rem)}:host .card-container .content-container yoo-banner p{color:var(--dark, #000000)}:host .card-container .content-container .text{margin:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);font-size:var(--font-size-14, 0.875rem)}:host .card-container .content-container .footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:var(--spacing-56, 3.5rem);padding:0 var(--spacing-16, 1rem);border-top:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .card-container .content-container .footer yoo-button{min-width:6rem}:host .card-container .content-container .footer .time-indicator{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}:host .card-container .content-container .footer .time-indicator yoo-progress-bar{--svg-width:1.8rem;--svg-height:1.8rem;--progress-bar-color:var(--app-color, #5a30f4);padding:0 var(--spacing-08, 0.5rem)}:host .card-container .content-container .footer .time-indicator .time-text{font-size:var(--font-size-14, 0.875rem)}:host .card-container .content-container.hidden{max-height:0}:host([expanded]) .card-container{padding:var(--spacing-08, 0.5rem) 0}";
|
|
12
|
+
const lessonDetailCardCss = ":host .card-container .top-bar{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:var(--spacing-56, 3.5rem);padding:0 var(--spacing-16, 1rem)}:host .card-container .top-bar .header .heading{margin:0}:host .card-container .top-bar .header .subheader{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;color:var(--stable);font-size:var(--font-size-12)}:host .card-container .top-bar .header .subheader yoo-icon{margin-right:var(--spacing-04, 0.25rem)}:host .card-container .top-bar .right-column{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}:host .card-container .top-bar .right-column .header-info{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;margin:0 var(--spacing-08, 0.5rem)}:host .card-container .top-bar .right-column .header-info yoo-icon{margin-right:var(--spacing-08, 0.5rem)}:host .card-container .top-bar .right-column .header-info p{font-size:var(--font-size-16)}:host .card-container .top-bar .right-column .tag-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin:0 var(--spacing-08, 0.5rem)}:host .card-container .top-bar .right-column .toggle-icon:hover{cursor:pointer}:host .card-container .content-container{max-height:18.75rem;overflow:hidden;-webkit-transition:max-height 200ms;transition:max-height 200ms}:host .card-container .content-container yoo-banner{--main-color:var(--warning-10, rgba(237, 110, 51, 0.1));width:95%;margin:var(--spacing-08, 0.5rem) auto;padding:var(--spacing-08, 0.5rem)}:host .card-container .content-container yoo-banner p{color:var(--dark, #000000)}:host .card-container .content-container .text{margin:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);font-size:var(--font-size-14, 0.875rem)}:host .card-container .content-container .footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:var(--spacing-56, 3.5rem);padding:0 var(--spacing-16, 1rem);border-top:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .card-container .content-container .footer yoo-button{min-width:6rem}:host .card-container .content-container .footer .time-indicator{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}:host .card-container .content-container .footer .time-indicator yoo-progress-bar{--svg-width:1.8rem;--svg-height:1.8rem;--progress-bar-color:var(--app-color, #5a30f4);--stroke-width-circle:2;padding:0 var(--spacing-08, 0.5rem)}:host .card-container .content-container .footer .time-indicator .time-text{font-size:var(--font-size-14, 0.875rem)}:host .card-container .content-container.hidden{max-height:0}:host([expanded]) .card-container{padding:var(--spacing-08, 0.5rem) 0}";
|
|
13
13
|
|
|
14
14
|
const YooLessonDetailCard = class {
|
|
15
15
|
constructor(hostRef) {
|
|
@@ -12,7 +12,7 @@ require('./lodash-72d493b9.js');
|
|
|
12
12
|
require('./index-50ff0b20.js');
|
|
13
13
|
require('./_commonjsHelpers-94df2ea7.js');
|
|
14
14
|
|
|
15
|
-
const missionHeadingCss = ":host .background-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin:0 -1rem 0;border-bottom:solid 1px var(--stable-light, #f1f1f1)}:host yoo-progress-bar{--progress-bar-color:var(--app-color, #5a30f4)}:host yoo-truncate{color:var(--app-color, #5a30f4)}:host yoo-banner{--main-color:var(--warning-10, rgba(237, 110, 51, 0.1));margin-top:var(--spacing-08, 0.5rem)}:host .content-container{-ms-flex:1;flex:1;padding:var(--spacing-16, 1rem) var(--spacing-08, 0.5rem)}:host .mission-title{margin-top:var(--spacing-08, 0.5rem);font-weight:var(--font-weight-700, 700);font-size:var(--font-size-24, 1.5rem);line-height:var(--spacing-32, 2rem)}:host .sub-heading{display:-ms-flexbox;display:flex;-ms-flex-flow:wrap;flex-flow:wrap;grid-gap:var(--spacing-08, 0.5rem);-ms-flex-align:center;align-items:center;margin-top:var(--spacing-08, 0.5rem)}:host .sub-heading .mission-progress{max-width:10rem;margin-right:var(--spacing-08, 0.5rem)}:host .sub-heading .action-plan-progress{display
|
|
15
|
+
const missionHeadingCss = ":host .background-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin:0 -1rem 0;border-bottom:solid 1px var(--stable-light, #f1f1f1)}:host yoo-progress-bar{--progress-bar-color:var(--app-color, #5a30f4)}:host yoo-truncate{color:var(--app-color, #5a30f4)}:host yoo-banner{--main-color:var(--warning-10, rgba(237, 110, 51, 0.1));margin-top:var(--spacing-08, 0.5rem)}:host .content-container{-ms-flex:1;flex:1;padding:var(--spacing-16, 1rem) var(--spacing-08, 0.5rem)}:host .mission-title{margin-top:var(--spacing-08, 0.5rem);font-weight:var(--font-weight-700, 700);font-size:var(--font-size-24, 1.5rem);line-height:var(--spacing-32, 2rem)}:host .sub-heading{display:-ms-flexbox;display:flex;-ms-flex-flow:wrap;flex-flow:wrap;grid-gap:var(--spacing-08, 0.5rem);-ms-flex-align:center;align-items:center;margin-top:var(--spacing-08, 0.5rem)}:host .sub-heading .mission-progress{max-width:10rem;margin-right:var(--spacing-08, 0.5rem)}:host .sub-heading .action-plan-progress{display:grid;grid-template-columns:var(--spacing-16, 1rem) auto;-ms-flex-align:center;align-items:center;max-width:12rem}:host .sub-heading .action-plan-progress yoo-progress-bar{--svg-width:1rem;--trail-bar-color:var(--app-color-20, rgba(90, 48, 244, 0.2))}:host .sub-heading .action-plan-progress yoo-truncate{margin:0 var(--spacing-08, 0.5rem)}:host div:last-child{margin-bottom:0}:host(.mission-results) .background-container{margin:-1rem -1rem 0}";
|
|
16
16
|
|
|
17
17
|
const YooMissionHeadingComponent = class {
|
|
18
18
|
constructor(hostRef) {
|
|
@@ -19,7 +19,7 @@ const DEFAULT_SHAPES = {
|
|
|
19
19
|
'semi-circle': 'M 0, y a r,r 0 1,1 d,0'
|
|
20
20
|
};
|
|
21
21
|
|
|
22
|
-
const progressBarCss = ":host{position:relative;display:block;--svg-width:100%;--svg-fill:var(--transparent, transparent);--stroke-width-line:3;--stroke-width-circle:3;--progress-value-font-size:var(--font-size-16, 1rem);--progress-value-font-weight:var(--font-weight-400, 400);--progress-value-color:var(--dark, #000000);--progress-bar-color:unset;--progress-bar-display:block;--trail-bar-color:var(--stable-light, #f1f1f1);--trail-bar-display:block}:host svg{width:var(--svg-width)}:host svg #trail{stroke-linecap:round;display:var(--trail-bar-display);stroke:var(--trail-bar-color)}:host svg #progress{display:var(--progress-bar-display);stroke:var(--progress-bar-color)}:host svg #progress:not([x2=\"0%\"]){stroke-linecap:round}:host #value{color:var(--progress-value-color);font-weight:var(--progress-value-font-weight);font-size:var(--progress-value-font-size);fill:var(--progress-value-color)}:host([shape=line]){display:inline-grid;grid-gap:var(--spacing-08, 0.5rem);grid-template-columns:1fr auto;place-items:center;width:100%}:host([shape=line]) svg{overflow:unset}:host([shape=line]) svg:not(.has-markers){height:var(--spacing-04, 0.25rem)}:host([shape=line]) svg:not(.has-markers) line{stroke-width:var(--stroke-width-line)}:host([shape=line]) svg
|
|
22
|
+
const progressBarCss = ":host{position:relative;display:block;--svg-width:100%;--svg-fill:var(--transparent, transparent);--stroke-width-line:3;--stroke-width-circle:3;--progress-value-font-size:var(--font-size-16, 1rem);--progress-value-font-weight:var(--font-weight-400, 400);--progress-value-color:var(--dark, #000000);--progress-bar-color:unset;--progress-bar-display:block;--trail-bar-color:var(--stable-light, #f1f1f1);--trail-bar-display:block}:host svg{width:var(--svg-width)}:host svg #trail{stroke-linecap:round;display:var(--trail-bar-display);stroke:var(--trail-bar-color)}:host svg #progress{display:var(--progress-bar-display);stroke:var(--progress-bar-color)}:host svg #progress:not([x2=\"0%\"]){stroke-linecap:round}:host #value{color:var(--progress-value-color);font-weight:var(--progress-value-font-weight);font-size:var(--progress-value-font-size);fill:var(--progress-value-color)}:host([shape=line]){display:inline-grid;grid-gap:var(--spacing-08, 0.5rem);grid-template-columns:1fr auto;place-items:center;width:100%}:host([shape=line]) svg{overflow:unset}:host([shape=line]) svg:not(.has-markers){height:var(--spacing-04, 0.25rem)}:host([shape=line]) svg:not(.has-markers) line{stroke-width:var(--stroke-width-line)}:host([shape=line]) svg .marker{font-size:var(--font-size-12, 0.75rem);-webkit-transform:translate(calc(var(--spacing-16, 1rem) * -1), calc(var(--spacing-16, 1rem) * 1.5));transform:translate(calc(var(--spacing-16, 1rem) * -1), calc(var(--spacing-16, 1rem) * 1.5))}:host([shape=line]) span{width:100%;text-align:center}:host([shape=line][x=right]) span{text-align:right}:host([shape=line][x=left]) span{text-align:left}:host([shape=line][y=bottom]),:host([shape=line][y=top]),:host([shape=line].no-value){grid-template-columns:initial;line-height:1}:host([shape=line][y=top]) svg{-ms-flex-order:1;order:1}:host([shape=line][y=top]) span{-ms-flex-order:0;order:0}:host([shape=circle]),:host([shape=semi-circle]){--progress-value-tsx:-50%;--progress-value-tsy:-50%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;margin:0 auto}:host([shape=circle]) svg,:host([shape=semi-circle]) svg{overflow:initial;fill:var(--svg-fill)}:host([shape=circle]) svg path,:host([shape=semi-circle]) svg path{stroke-width:var(--stroke-width-circle)}:host([shape=circle]) #value,:host([shape=semi-circle]) #value{position:absolute;top:50%;left:50%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-transform:translate(var(--progress-value-tsx), var(--progress-value-tsy));transform:translate(var(--progress-value-tsx), var(--progress-value-tsy))}:host([shape=semi-circle]){--progress-value-tsy:calc(-50% + var(--spacing-08, 0.5rem))}:host([metric=points]){--progress-bar-display:none;--trail-bar-display:none}:host([metric=step]){--progress-bar-color:var(--app-color, #5a30f4)}";
|
|
23
23
|
|
|
24
24
|
const YooProgressBarComponent = class {
|
|
25
25
|
constructor(hostRef) {
|
|
@@ -129,36 +129,11 @@ const YooProgressBarComponent = class {
|
|
|
129
129
|
}
|
|
130
130
|
componentDidLoad() {
|
|
131
131
|
if (this.progressSVGElement) {
|
|
132
|
-
this.resizeListener = lodash.debounce(this.
|
|
132
|
+
this.resizeListener = lodash.debounce(this.setProgress, 750).bind(this);
|
|
133
133
|
window.addEventListener('resize', this.resizeListener);
|
|
134
|
-
this.initProgressBar();
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
initProgressBar() {
|
|
138
|
-
if (this.progressSVGElement) {
|
|
139
|
-
this.initSVGPaths();
|
|
140
134
|
this.setProgress();
|
|
141
135
|
}
|
|
142
136
|
}
|
|
143
|
-
initSVGPaths() {
|
|
144
|
-
const clampAngle = (value) => Math.min(Math.max(0, value), 360);
|
|
145
|
-
const { width, height } = this.progressSVGElement.getBoundingClientRect();
|
|
146
|
-
!this.isShape.line && this.host.shadowRoot.querySelectorAll('path').forEach((pathElement, i) => {
|
|
147
|
-
if (pathElement) {
|
|
148
|
-
const finalSize = Math[this.isShape.circle ? 'min' : 'max'](width, height);
|
|
149
|
-
const yPos = finalSize * .5;
|
|
150
|
-
this.progressSVGElement.style.width = `${finalSize}px`;
|
|
151
|
-
this.progressSVGElement.style.height = `${finalSize * (this.isShape.circle ? 1 : .5)}px`;
|
|
152
|
-
const d = DEFAULT_SHAPES[this.shape]
|
|
153
|
-
.replace('y', yPos.toString())
|
|
154
|
-
.replace('d', finalSize.toString())
|
|
155
|
-
.replace('-d', `-${finalSize.toString()}`)
|
|
156
|
-
.replace(/r/g, (finalSize / 2).toString());
|
|
157
|
-
pathElement.setAttribute('d', d);
|
|
158
|
-
i && this.isShape.circle && (pathElement.setAttribute('transform', `rotate(${clampAngle(this.angle)} ${yPos.toString()} ${yPos.toString()})`));
|
|
159
|
-
}
|
|
160
|
-
});
|
|
161
|
-
}
|
|
162
137
|
setProgress(currentProgress = 0) {
|
|
163
138
|
if (this.progressSVGElement) {
|
|
164
139
|
const getProgressPathLength = (progress = 0) => Math.round(progressBarElement.getTotalLength() * (1 - progress / 100)).toString();
|
|
@@ -196,12 +171,8 @@ const YooProgressBarComponent = class {
|
|
|
196
171
|
stroke: this.getProgressColor(0)
|
|
197
172
|
})
|
|
198
173
|
};
|
|
199
|
-
const progressStarted = () => {
|
|
200
|
-
this.initSVGPaths();
|
|
201
|
-
};
|
|
202
174
|
const toAnimation = {
|
|
203
175
|
attr: { x2: `${clampProgress(toProgress)}%` },
|
|
204
|
-
onStart: progressStarted,
|
|
205
176
|
onUpdate() {
|
|
206
177
|
animateProgressValue(this.progress());
|
|
207
178
|
},
|
|
@@ -278,19 +249,32 @@ const YooProgressBarComponent = class {
|
|
|
278
249
|
const { xPercent, text } = marker || {};
|
|
279
250
|
return [
|
|
280
251
|
index.h("line", { "marker-end": `url(#dot${i})`, y1: "50%", y2: "50%", x2: `${lodash.isFinite(xPercent) ? xPercent : 0}%` }),
|
|
281
|
-
text && index.h("text", { class: "marker", y: "
|
|
252
|
+
text && index.h("text", { class: "marker", y: "0%", x: `${lodash.isFinite(xPercent) ? xPercent : 0}%` }, text)
|
|
282
253
|
];
|
|
283
254
|
});
|
|
284
255
|
}
|
|
285
|
-
|
|
256
|
+
renderPath(index$1, baseAttributes, size) {
|
|
257
|
+
const clampAngle = (value) => Math.min(Math.max(0, value), 360);
|
|
258
|
+
const yPos = (size * .5).toString();
|
|
259
|
+
return index.h("path", { ...baseAttributes, d: DEFAULT_SHAPES[this.shape]
|
|
260
|
+
.replace('y', yPos)
|
|
261
|
+
.replace('d', `${size}`)
|
|
262
|
+
.replace('-d', `-${size}`)
|
|
263
|
+
.replace(/r/g, yPos), ...(index$1 && this.isShape.circle && {
|
|
264
|
+
transform: `rotate(${clampAngle(this.angle)} ${yPos} ${yPos})`
|
|
265
|
+
}) });
|
|
266
|
+
}
|
|
267
|
+
renderSVG() {
|
|
286
268
|
const getAttr = (type, index) => ({ id: type, x2: `${index ? 0 : 100}%` });
|
|
287
|
-
|
|
269
|
+
const { width, height } = this.host.getBoundingClientRect();
|
|
270
|
+
const size = Math.round(Math[this.isShape.circle && !!(width && height) ? 'min' : 'max'](width, height)) || 100;
|
|
271
|
+
return (index.h("svg", { ...(!this.isShape.line && { viewBox: `0 0 ${size} ${size / (this.isShape.circle ? 1 : 2)}` }), ref: (el) => (this.progressSVGElement = el) }, this.renderMarkersDefinition(), ['trail', 'progress'].map((b, i) => this.isShape.line ? index.h("line", { y1: "50%", y2: "50%", ...getAttr(b, i) }) : this.renderPath(i, getAttr(b, i), size)), this.renderMarkersPlacement()));
|
|
288
272
|
}
|
|
289
273
|
renderProgressValue() {
|
|
290
274
|
return !this.hideProgressValue && (index.h("span", { id: "value", ...(!this.isAnimated && { innerHTML: this.getLabelledValue() }) }));
|
|
291
275
|
}
|
|
292
276
|
render() {
|
|
293
|
-
return (index.h(index.Host, { class: { 'no-value': this.hideProgressValue }, ...((!this.hideProgressValue && this.isShape.line) && { y: this.verticalAlign, x: this.horizontalAlign }) }, [this.
|
|
277
|
+
return (index.h(index.Host, { class: { 'no-value': this.hideProgressValue }, ...((!this.hideProgressValue && this.isShape.line) && { y: this.verticalAlign, x: this.horizontalAlign }) }, [this.renderSVG(), this.renderProgressValue()], !this.isShape.line && index.h("slot", null)));
|
|
294
278
|
}
|
|
295
279
|
get host() { return index.getElement(this); }
|
|
296
280
|
static get watchers() { return {
|
|
@@ -258,12 +258,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
|
|
|
258
258
|
:host([shape=line]) svg:not(.has-markers) line {
|
|
259
259
|
stroke-width: var(--stroke-width-line);
|
|
260
260
|
}
|
|
261
|
-
:host([shape=line]) svg.
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
:host([shape=line]) svg.has-markers .marker {
|
|
265
|
-
font-size: var(--spacing-04, 0.25rem);
|
|
266
|
-
transform: translateX(calc(var(--spacing-08, 0.5rem) * -1));
|
|
261
|
+
:host([shape=line]) svg .marker {
|
|
262
|
+
font-size: var(--font-size-12, 0.75rem);
|
|
263
|
+
transform: translate(calc(var(--spacing-16, 1rem) * -1), calc(var(--spacing-16, 1rem) * 1.5));
|
|
267
264
|
}
|
|
268
265
|
:host([shape=line]) span {
|
|
269
266
|
width: 100%;
|
|
@@ -107,36 +107,11 @@ export class YooProgressBarComponent {
|
|
|
107
107
|
}
|
|
108
108
|
componentDidLoad() {
|
|
109
109
|
if (this.progressSVGElement) {
|
|
110
|
-
this.resizeListener = debounce(this.
|
|
110
|
+
this.resizeListener = debounce(this.setProgress, 750).bind(this);
|
|
111
111
|
window.addEventListener('resize', this.resizeListener);
|
|
112
|
-
this.initProgressBar();
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
initProgressBar() {
|
|
116
|
-
if (this.progressSVGElement) {
|
|
117
|
-
this.initSVGPaths();
|
|
118
112
|
this.setProgress();
|
|
119
113
|
}
|
|
120
114
|
}
|
|
121
|
-
initSVGPaths() {
|
|
122
|
-
const clampAngle = (value) => Math.min(Math.max(0, value), 360);
|
|
123
|
-
const { width, height } = this.progressSVGElement.getBoundingClientRect();
|
|
124
|
-
!this.isShape.line && this.host.shadowRoot.querySelectorAll('path').forEach((pathElement, i) => {
|
|
125
|
-
if (pathElement) {
|
|
126
|
-
const finalSize = Math[this.isShape.circle ? 'min' : 'max'](width, height);
|
|
127
|
-
const yPos = finalSize * .5;
|
|
128
|
-
this.progressSVGElement.style.width = `${finalSize}px`;
|
|
129
|
-
this.progressSVGElement.style.height = `${finalSize * (this.isShape.circle ? 1 : .5)}px`;
|
|
130
|
-
const d = DEFAULT_SHAPES[this.shape]
|
|
131
|
-
.replace('y', yPos.toString())
|
|
132
|
-
.replace('d', finalSize.toString())
|
|
133
|
-
.replace('-d', `-${finalSize.toString()}`)
|
|
134
|
-
.replace(/r/g, (finalSize / 2).toString());
|
|
135
|
-
pathElement.setAttribute('d', d);
|
|
136
|
-
i && this.isShape.circle && (pathElement.setAttribute('transform', `rotate(${clampAngle(this.angle)} ${yPos.toString()} ${yPos.toString()})`));
|
|
137
|
-
}
|
|
138
|
-
});
|
|
139
|
-
}
|
|
140
115
|
setProgress(currentProgress = 0) {
|
|
141
116
|
if (this.progressSVGElement) {
|
|
142
117
|
const getProgressPathLength = (progress = 0) => Math.round(progressBarElement.getTotalLength() * (1 - progress / 100)).toString();
|
|
@@ -174,12 +149,8 @@ export class YooProgressBarComponent {
|
|
|
174
149
|
stroke: this.getProgressColor(0)
|
|
175
150
|
})
|
|
176
151
|
};
|
|
177
|
-
const progressStarted = () => {
|
|
178
|
-
this.initSVGPaths();
|
|
179
|
-
};
|
|
180
152
|
const toAnimation = {
|
|
181
153
|
attr: { x2: `${clampProgress(toProgress)}%` },
|
|
182
|
-
onStart: progressStarted,
|
|
183
154
|
onUpdate() {
|
|
184
155
|
animateProgressValue(this.progress());
|
|
185
156
|
},
|
|
@@ -257,15 +228,28 @@ export class YooProgressBarComponent {
|
|
|
257
228
|
const { xPercent, text } = marker || {};
|
|
258
229
|
return [
|
|
259
230
|
h("line", { "marker-end": `url(#dot${i})`, y1: "50%", y2: "50%", x2: `${isFinite(xPercent) ? xPercent : 0}%` }),
|
|
260
|
-
text && h("text", { class: "marker", y: "
|
|
231
|
+
text && h("text", { class: "marker", y: "0%", x: `${isFinite(xPercent) ? xPercent : 0}%` }, text)
|
|
261
232
|
];
|
|
262
233
|
});
|
|
263
234
|
}
|
|
264
|
-
|
|
235
|
+
renderPath(index, baseAttributes, size) {
|
|
236
|
+
const clampAngle = (value) => Math.min(Math.max(0, value), 360);
|
|
237
|
+
const yPos = (size * .5).toString();
|
|
238
|
+
return h("path", { ...baseAttributes, d: DEFAULT_SHAPES[this.shape]
|
|
239
|
+
.replace('y', yPos)
|
|
240
|
+
.replace('d', `${size}`)
|
|
241
|
+
.replace('-d', `-${size}`)
|
|
242
|
+
.replace(/r/g, yPos), ...(index && this.isShape.circle && {
|
|
243
|
+
transform: `rotate(${clampAngle(this.angle)} ${yPos} ${yPos})`
|
|
244
|
+
}) });
|
|
245
|
+
}
|
|
246
|
+
renderSVG() {
|
|
265
247
|
const getAttr = (type, index) => ({ id: type, x2: `${index ? 0 : 100}%` });
|
|
266
|
-
|
|
248
|
+
const { width, height } = this.host.getBoundingClientRect();
|
|
249
|
+
const size = Math.round(Math[this.isShape.circle && !!(width && height) ? 'min' : 'max'](width, height)) || 100;
|
|
250
|
+
return (h("svg", { ...(!this.isShape.line && { viewBox: `0 0 ${size} ${size / (this.isShape.circle ? 1 : 2)}` }), ref: (el) => (this.progressSVGElement = el) },
|
|
267
251
|
this.renderMarkersDefinition(),
|
|
268
|
-
['trail', 'progress'].map((b, i) => this.isShape.line ? h("line", { y1: "50%", y2: "50%", ...getAttr(b, i) }) :
|
|
252
|
+
['trail', 'progress'].map((b, i) => this.isShape.line ? h("line", { y1: "50%", y2: "50%", ...getAttr(b, i) }) : this.renderPath(i, getAttr(b, i), size)),
|
|
269
253
|
this.renderMarkersPlacement()));
|
|
270
254
|
}
|
|
271
255
|
renderProgressValue() {
|
|
@@ -273,7 +257,7 @@ export class YooProgressBarComponent {
|
|
|
273
257
|
}
|
|
274
258
|
render() {
|
|
275
259
|
return (h(Host, { class: { 'no-value': this.hideProgressValue }, ...((!this.hideProgressValue && this.isShape.line) && { y: this.verticalAlign, x: this.horizontalAlign }) },
|
|
276
|
-
[this.
|
|
260
|
+
[this.renderSVG(), this.renderProgressValue()],
|
|
277
261
|
!this.isShape.line && h("slot", null)));
|
|
278
262
|
}
|
|
279
263
|
static get is() { return "yoo-progress-bar"; }
|
|
@@ -747,7 +747,9 @@ export class YooFormDynamicComponent {
|
|
|
747
747
|
if (this.innerTimer > 0) {
|
|
748
748
|
this.innerTimer--;
|
|
749
749
|
}
|
|
750
|
-
const footer = this.
|
|
750
|
+
const footer = this.host.classList.contains('course-preview')
|
|
751
|
+
? this.formFooterElement
|
|
752
|
+
: this.getElementFromCurrentSlide('yoo-form-footer');
|
|
751
753
|
if (footer) {
|
|
752
754
|
footer.countDownValue = this.innerTimer;
|
|
753
755
|
}
|
|
@@ -240,22 +240,19 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
|
|
|
240
240
|
padding-right: var(--spacing-16, 1rem);
|
|
241
241
|
}
|
|
242
242
|
:host .outer-container .mission-footer .timer-container {
|
|
243
|
-
display:
|
|
243
|
+
display: grid;
|
|
244
|
+
grid-template-columns: 20% auto;
|
|
245
|
+
gap: var(--spacing-16, 1rem);
|
|
244
246
|
align-items: center;
|
|
245
|
-
justify-content: start;
|
|
246
247
|
width: 100%;
|
|
247
248
|
max-width: 14rem;
|
|
248
249
|
margin-left: var(--spacing-16, 1rem);
|
|
250
|
+
text-align: left;
|
|
249
251
|
}
|
|
250
252
|
:host .outer-container .mission-footer .timer-container yoo-progress-bar {
|
|
251
|
-
width: 20%;
|
|
252
|
-
margin: 0;
|
|
253
253
|
--progress-bar-color: var(--app-color, #5a30f4);
|
|
254
254
|
--stroke-width-circle: 6;
|
|
255
255
|
}
|
|
256
|
-
:host .outer-container .mission-footer .timer-container yoo-progress-bar + div {
|
|
257
|
-
margin-left: var(--spacing-16, 1rem);
|
|
258
|
-
}
|
|
259
256
|
|
|
260
257
|
:host(:not(.relative)) {
|
|
261
258
|
position: absolute;
|
|
@@ -350,7 +350,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
|
|
|
350
350
|
width: var(--spacing-32, 2rem);
|
|
351
351
|
height: var(--spacing-32, 2rem);
|
|
352
352
|
padding-right: var(--spacing-16, 1rem);
|
|
353
|
-
--stroke-width-circle:
|
|
353
|
+
--stroke-width-circle: 6;
|
|
354
354
|
}
|
|
355
355
|
:host .heading-container {
|
|
356
356
|
width: calc(100% - var(--logo-05, 3rem));
|
|
@@ -283,6 +283,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
|
|
|
283
283
|
--svg-width: 1.8rem;
|
|
284
284
|
--svg-height: 1.8rem;
|
|
285
285
|
--progress-bar-color: var(--app-color, #5a30f4);
|
|
286
|
+
--stroke-width-circle: 2;
|
|
286
287
|
padding: 0 var(--spacing-08, 0.5rem);
|
|
287
288
|
}
|
|
288
289
|
:host .card-container .content-container .footer .time-indicator .time-text {
|
package/dist/collection/feature-operate/mission/announcement-heading/announcement-heading.css
CHANGED
|
@@ -226,22 +226,18 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
|
|
|
226
226
|
--line-height: initial;
|
|
227
227
|
}
|
|
228
228
|
:host .outer-container .progress {
|
|
229
|
-
display:
|
|
230
|
-
|
|
231
|
-
}
|
|
232
|
-
:host .outer-container .progress .quick-task-progress {
|
|
233
|
-
display: flex;
|
|
229
|
+
display: grid;
|
|
230
|
+
grid-template-columns: var(--spacing-16, 1rem) auto;
|
|
234
231
|
align-items: center;
|
|
235
232
|
max-width: 12rem;
|
|
236
233
|
}
|
|
237
|
-
:host .outer-container .progress
|
|
238
|
-
--svg-width: 1rem;
|
|
234
|
+
:host .outer-container .progress yoo-progress-bar {
|
|
239
235
|
--trail-bar-color: var(--app-color-20, rgba(90, 48, 244, 0.2));
|
|
240
236
|
}
|
|
241
|
-
:host .outer-container .progress
|
|
237
|
+
:host .outer-container .progress yoo-truncate {
|
|
242
238
|
margin: 0 var(--spacing-08, 0.5rem);
|
|
243
239
|
}
|
|
244
|
-
:host .outer-container .progress
|
|
240
|
+
:host .outer-container .progress yoo-truncate.app-color {
|
|
245
241
|
color: var(--app-color, #5a30f4);
|
|
246
242
|
}
|
|
247
243
|
:host .outer-container .tags yoo-tag {
|
package/dist/collection/feature-operate/mission/announcement-heading/announcement-heading.js
CHANGED
|
@@ -71,10 +71,9 @@ export class YooAnnouncementHeadingComponent {
|
|
|
71
71
|
const renderProgress = ((_b = (_a = this.announcement.todo) === null || _a === void 0 ? void 0 : _a.values) === null || _b === void 0 ? void 0 : _b.length) > 0;
|
|
72
72
|
if ((announcementProgress === null || announcementProgress === void 0 ? void 0 : announcementProgress.value) >= 0 && renderProgress) {
|
|
73
73
|
return h("div", { class: "progress" },
|
|
74
|
-
h("
|
|
75
|
-
|
|
76
|
-
h("
|
|
77
|
-
h("span", null, translate('ACTIONSCOMPLETED', { smart_count: announcementProgress.value, total: announcementProgress.max })))));
|
|
74
|
+
h("yoo-progress-bar", { class: "app-color", shape: "circle", hideProgressValue: true, value: announcementProgress.value, metric: announcementProgress.unit, maxValue: announcementProgress.max }),
|
|
75
|
+
h("yoo-truncate", { class: "app-color", style: { cssText: '--max-lines: 1' } },
|
|
76
|
+
h("span", null, translate('ACTIONSCOMPLETED', { smart_count: announcementProgress.value, total: announcementProgress.max }))));
|
|
78
77
|
}
|
|
79
78
|
}
|
|
80
79
|
renderDueDate(dueDate) {
|
|
@@ -253,8 +253,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
|
|
|
253
253
|
:host .outer-container .content yoo-progress-bar {
|
|
254
254
|
--font-size-16: var(--font-size-12, 0.75rem);
|
|
255
255
|
--progress-bar-color: var(--app-color, #5a30f4);
|
|
256
|
-
--svg-width: 1rem;
|
|
257
|
-
--stroke-width-circle: 2;
|
|
256
|
+
--svg-width: var(--spacing-16, 1rem);
|
|
258
257
|
margin: 0;
|
|
259
258
|
}
|
|
260
259
|
:host .outer-container .content .tags {
|
|
@@ -382,7 +382,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
|
|
|
382
382
|
}
|
|
383
383
|
:host([display-mode=large]) .overview yoo-progress-bar {
|
|
384
384
|
--stroke-width-circle: 6;
|
|
385
|
-
--svg-width: calc(100% - var(--spacing-04));
|
|
386
385
|
--progress-value-font-size: var(--font-size-54, 3.375rem);
|
|
387
386
|
}
|
|
388
387
|
:host([display-mode=large]) .overview yoo-progress-bar[metric=points].show-bar-points {
|