@yoobic/yobi 8.3.0-17 → 8.3.0-18
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/design-system.cjs.js +1 -1
- package/dist/cjs/{form-choice-helpers-1003243c.js → form-choice-helpers-5a83f5c9.js} +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{swiper-fedb543f.js → swiper-bbba57e0.js} +1 -1
- package/dist/cjs/yoo-form-choice-button.cjs.entry.js +2 -2
- package/dist/cjs/yoo-form-choice-card.cjs.entry.js +1 -1
- package/dist/cjs/yoo-form-choice-chat.cjs.entry.js +2 -2
- package/dist/cjs/yoo-form-choice-image.cjs.entry.js +2 -2
- package/dist/cjs/yoo-form-choice-radio.cjs.entry.js +2 -2
- package/dist/cjs/yoo-form-creator-block-expandable.cjs.entry.js +3 -3
- package/dist/cjs/yoo-form-creator.cjs.entry.js +8 -3
- package/dist/cjs/yoo-form-dynamic.cjs.entry.js +2 -0
- package/dist/cjs/yoo-form-swipe-cards.cjs.entry.js +60 -63
- package/dist/cjs/{yoo-ion-slides-ddaabe00.js → yoo-ion-slides-272e7ebb.js} +8 -2
- package/dist/cjs/yoo-ion-slides.cjs.entry.js +1 -1
- package/dist/cjs/yoo-lesson-question-result.cjs.entry.js +4 -3
- package/dist/cjs/yoo-lottie.cjs.entry.js +32 -6
- package/dist/cjs/yoo-points-recap.cjs.entry.js +5 -4
- package/dist/collection/components/2.molecules/points-recap/points-recap.js +23 -4
- package/dist/collection/components/2.molecules/slides/slides.js +7 -1
- package/dist/collection/components/form/form-choice/button/form-choice-button.css +0 -1
- package/dist/collection/components/form/form-choice/card/form-choice-card.css +0 -1
- package/dist/collection/components/form/form-choice/chat/form-choice-chat.css +0 -1
- package/dist/collection/components/form/form-choice/image/form-choice-image.css +0 -1
- package/dist/collection/components/form/form-choice/radio/form-choice-radio.css +0 -1
- package/dist/collection/components/form/form-dynamic/form-dynamic.js +2 -0
- package/dist/collection/components/form/form-swipe-cards/form-swipe-cards.css +80 -58
- package/dist/collection/components/form/form-swipe-cards/form-swipe-cards.js +63 -66
- package/dist/collection/components/form-creator/form-creator/form-creator.js +8 -3
- package/dist/collection/components/form-creator/form-creator-block-expandable/form-creator-block-expandable.js +3 -3
- package/dist/collection/feature-learn/learning/lesson-question-result/lesson-question-result.js +4 -3
- package/dist/design-system/design-system.esm.js +1 -1
- package/dist/{esm/form-choice-helpers-ac31afd4.js → design-system/form-choice-helpers-82020d4b.js} +1 -1
- package/dist/design-system/{swiper-28bd92bd.js → swiper-80225cb6.js} +2 -2
- package/dist/design-system/yoo-form-choice-button.entry.js +2 -2
- package/dist/design-system/yoo-form-choice-card.entry.js +1 -1
- package/dist/design-system/yoo-form-choice-chat.entry.js +2 -2
- package/dist/design-system/yoo-form-choice-image.entry.js +2 -2
- package/dist/design-system/yoo-form-choice-radio.entry.js +2 -2
- package/dist/design-system/yoo-form-creator-block-expandable.entry.js +3 -3
- package/dist/design-system/yoo-form-creator.entry.js +8 -3
- package/dist/design-system/yoo-form-dynamic.entry.js +2 -0
- package/dist/design-system/yoo-form-swipe-cards.entry.js +62 -65
- package/dist/design-system/{yoo-ion-slides-ddda50eb.js → yoo-ion-slides-f06207d9.js} +8 -2
- package/dist/design-system/yoo-ion-slides.entry.js +1 -1
- package/dist/design-system/yoo-lesson-question-result.entry.js +4 -3
- package/dist/design-system/yoo-lottie.entry.js +32 -6
- package/dist/design-system/yoo-points-recap.entry.js +5 -4
- package/dist/esm/design-system.js +1 -1
- package/dist/{design-system/form-choice-helpers-ac31afd4.js → esm/form-choice-helpers-82020d4b.js} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{swiper-28bd92bd.js → swiper-80225cb6.js} +2 -2
- package/dist/esm/yoo-form-choice-button.entry.js +2 -2
- package/dist/esm/yoo-form-choice-card.entry.js +1 -1
- package/dist/esm/yoo-form-choice-chat.entry.js +2 -2
- package/dist/esm/yoo-form-choice-image.entry.js +2 -2
- package/dist/esm/yoo-form-choice-radio.entry.js +2 -2
- package/dist/esm/yoo-form-creator-block-expandable.entry.js +3 -3
- package/dist/esm/yoo-form-creator.entry.js +8 -3
- package/dist/esm/yoo-form-dynamic.entry.js +2 -0
- package/dist/esm/yoo-form-swipe-cards.entry.js +62 -65
- package/dist/esm/{yoo-ion-slides-ddda50eb.js → yoo-ion-slides-f06207d9.js} +8 -2
- package/dist/esm/yoo-ion-slides.entry.js +1 -1
- package/dist/esm/yoo-lesson-question-result.entry.js +4 -3
- package/dist/esm/yoo-lottie.entry.js +32 -6
- package/dist/esm/yoo-points-recap.entry.js +5 -4
- package/dist/types/components/2.molecules/points-recap/points-recap.d.ts +2 -1
- package/dist/types/components/form/form-swipe-cards/form-swipe-cards.d.ts +12 -17
- package/dist/types/components.d.ts +2 -0
- package/dist/types/home/runner/work/yoobic-ng-6/yoobic-ng-6/design-system/stencil/.stencil/shared/interfaces/src/entities/form-field/form-field.interface.d.ts +11 -3
- package/dist/types/home/runner/work/yoobic-ng-6/yoobic-ng-6/design-system/stencil/.stencil/shared/interfaces/src/ui/points-recap/points-recap.interface.d.ts +1 -0
- package/package.json +1 -1
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-6482c595.js');
|
|
6
6
|
require('./index-cdada3c1.js');
|
|
7
7
|
const highcharts = require('./highcharts-874d9bd2.js');
|
|
8
|
-
const formChoiceHelpers = require('./form-choice-helpers-
|
|
8
|
+
const formChoiceHelpers = require('./form-choice-helpers-5a83f5c9.js');
|
|
9
9
|
const overlays = require('./overlays-e40de213.js');
|
|
10
10
|
require('./lodash-597bda6d.js');
|
|
11
11
|
require('./_commonjsHelpers-94df2ea7.js');
|
|
@@ -14,7 +14,7 @@ require('./form-input-helpers-28a6e6a6.js');
|
|
|
14
14
|
require('./index-0eb5a03c.js');
|
|
15
15
|
require('./common-helpers-e75f02e0.js');
|
|
16
16
|
|
|
17
|
-
const formChoiceButtonCss = ":host([readonly]){padding:0.5rem 0.5rem 0 0;-ms-flex-pack:start;justify-content:flex-start;color:var(--dark, #000000)}:host([readonly]) .image-container{max-width:var(--spacing-80, 5rem);margin-right:var(--spacing-24, 1.5rem);margin-bottom:0;padding-bottom:0;border-bottom:none}:host([readonly]) .image-container .content{position:relative;width:var(--spacing-80, 5rem);height:var(--spacing-80, 5rem);
|
|
17
|
+
const formChoiceButtonCss = ":host([readonly]){padding:0.5rem 0.5rem 0 0;-ms-flex-pack:start;justify-content:flex-start;color:var(--dark, #000000)}:host([readonly]) .image-container{max-width:var(--spacing-80, 5rem);margin-right:var(--spacing-24, 1.5rem);margin-bottom:0;padding-bottom:0;border-bottom:none}:host([readonly]) .image-container .content{position:relative;width:var(--spacing-80, 5rem);height:var(--spacing-80, 5rem);border-radius:var(--border-radius-08, 0.5rem)}:host([readonly]) .image-container .content::before{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0.4;content:\"\"}:host([readonly]) .image-container .content yoo-img{height:100%;border-radius:var(--border-radius-08, 0.5rem)}:host([readonly]) .image-container .content.correct-answer{border:var(--border-width-01, 0.0625rem) solid var(--success, #3aa76d)}:host([readonly]) .image-container .content.correct-answer::before{background-color:var(--success, #3aa76d)}:host([readonly]) .image-container .content.wrong-answer{border:var(--border-width-01, 0.0625rem) solid var(--danger, #d44333)}:host([readonly]) .image-container .content.wrong-answer::before{background-color:var(--danger, #d44333)}:host([readonly]) .image-container .text{white-space:unset;text-align:center;-webkit-line-clamp:2}:host([is-pdf]) .image-container{width:100%}:host([is-pdf]) .image-container .content{max-width:22.5rem}:host([is-pdf]) .image-container .content yoo-img{border:none;border-radius:0}:host([is-pdf]) .image-container .text{text-align:left}:host([is-pdf]) .image-container:not(:last-child){margin-bottom:var(--spacing-16, 1rem);padding-bottom:var(--spacing-16, 1rem)}.readonly-card{width:100%}.readonly-card .invalid{color:var(--danger, #d44333)}.readonly-card .valid{color:var(--success, #3aa76d)}.readonly-card.chat{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;color:var(--dark, #000000)}.readonly-card.chat .text:not(:last-of-type){margin-bottom:var(--spacing-08, 0.5rem)}.readonly-card.chat .text{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:var(--spacing-04, 0.25rem) var(--spacing-08, 0.5rem);border-radius:var(--border-radius-16, 1rem)}.readonly-card.chat .text.valid{color:var(--light, #ffffff);background-color:var(--success, #3aa76d)}.readonly-card.chat .text.invalid{color:var(--light, #ffffff);background-color:var(--danger, #d44333)}:host(.history:not(.forcedhistory)){padding:0}:host(.history:not(.forcedhistory))>.text,:host(.history:not(.forcedhistory)) .card .text,:host(.history:not(.forcedhistory)) .button .text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;margin-right:var(--spacing-16, 1rem)}:host{--button-columns:2;--item-spacing:var(--spacing-16, 1rem);display:block;width:100%;height:100%}:host yoo-banner{height:0}:host #buttons{display:grid;grid-gap:var(--item-spacing);grid-template-columns:repeat(var(--button-columns), minmax(0, 1fr))}:host yoo-button{--side-padding:0 var(--spacing-16, 1rem)}";
|
|
18
18
|
|
|
19
19
|
const YooFormChoiceButtonComponent = class {
|
|
20
20
|
constructor(hostRef) {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const formChoiceHelpers = require('./form-choice-helpers-
|
|
5
|
+
const formChoiceHelpers = require('./form-choice-helpers-5a83f5c9.js');
|
|
6
6
|
require('./index-cdada3c1.js');
|
|
7
7
|
require('./overlays-e40de213.js');
|
|
8
8
|
require('./lodash-597bda6d.js');
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-6482c595.js');
|
|
6
6
|
const index$1 = require('./index-0eb5a03c.js');
|
|
7
7
|
require('./index-cdada3c1.js');
|
|
8
|
-
const formChoiceHelpers = require('./form-choice-helpers-
|
|
8
|
+
const formChoiceHelpers = require('./form-choice-helpers-5a83f5c9.js');
|
|
9
9
|
const overlays = require('./overlays-e40de213.js');
|
|
10
10
|
require('./lodash-597bda6d.js');
|
|
11
11
|
require('./draggable-tags-helpers-2e1067f0.js');
|
|
@@ -14,7 +14,7 @@ require('./common-helpers-e75f02e0.js');
|
|
|
14
14
|
require('./highcharts-874d9bd2.js');
|
|
15
15
|
require('./_commonjsHelpers-94df2ea7.js');
|
|
16
16
|
|
|
17
|
-
const formChoiceChatCss = ":host([readonly]){padding:0.5rem 0.5rem 0 0;-ms-flex-pack:start;justify-content:flex-start;color:var(--dark, #000000)}:host([readonly]) .image-container{max-width:var(--spacing-80, 5rem);margin-right:var(--spacing-24, 1.5rem);margin-bottom:0;padding-bottom:0;border-bottom:none}:host([readonly]) .image-container .content{position:relative;width:var(--spacing-80, 5rem);height:var(--spacing-80, 5rem);
|
|
17
|
+
const formChoiceChatCss = ":host([readonly]){padding:0.5rem 0.5rem 0 0;-ms-flex-pack:start;justify-content:flex-start;color:var(--dark, #000000)}:host([readonly]) .image-container{max-width:var(--spacing-80, 5rem);margin-right:var(--spacing-24, 1.5rem);margin-bottom:0;padding-bottom:0;border-bottom:none}:host([readonly]) .image-container .content{position:relative;width:var(--spacing-80, 5rem);height:var(--spacing-80, 5rem);border-radius:var(--border-radius-08, 0.5rem)}:host([readonly]) .image-container .content::before{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0.4;content:\"\"}:host([readonly]) .image-container .content yoo-img{height:100%;border-radius:var(--border-radius-08, 0.5rem)}:host([readonly]) .image-container .content.correct-answer{border:var(--border-width-01, 0.0625rem) solid var(--success, #3aa76d)}:host([readonly]) .image-container .content.correct-answer::before{background-color:var(--success, #3aa76d)}:host([readonly]) .image-container .content.wrong-answer{border:var(--border-width-01, 0.0625rem) solid var(--danger, #d44333)}:host([readonly]) .image-container .content.wrong-answer::before{background-color:var(--danger, #d44333)}:host([readonly]) .image-container .text{white-space:unset;text-align:center;-webkit-line-clamp:2}:host([is-pdf]) .image-container{width:100%}:host([is-pdf]) .image-container .content{max-width:22.5rem}:host([is-pdf]) .image-container .content yoo-img{border:none;border-radius:0}:host([is-pdf]) .image-container .text{text-align:left}:host([is-pdf]) .image-container:not(:last-child){margin-bottom:var(--spacing-16, 1rem);padding-bottom:var(--spacing-16, 1rem)}.readonly-card{width:100%}.readonly-card .invalid{color:var(--danger, #d44333)}.readonly-card .valid{color:var(--success, #3aa76d)}.readonly-card.chat{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;color:var(--dark, #000000)}.readonly-card.chat .text:not(:last-of-type){margin-bottom:var(--spacing-08, 0.5rem)}.readonly-card.chat .text{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:var(--spacing-04, 0.25rem) var(--spacing-08, 0.5rem);border-radius:var(--border-radius-16, 1rem)}.readonly-card.chat .text.valid{color:var(--light, #ffffff);background-color:var(--success, #3aa76d)}.readonly-card.chat .text.invalid{color:var(--light, #ffffff);background-color:var(--danger, #d44333)}:host(.history:not(.forcedhistory)){padding:0}:host(.history:not(.forcedhistory))>.text,:host(.history:not(.forcedhistory)) .card .text,:host(.history:not(.forcedhistory)) .button .text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;margin-right:var(--spacing-16, 1rem)}:host{display:block;width:100%;height:100%}:host yoo-banner{height:0}:host #messages{display:grid;gap:var(--spacing-16, 1rem)}:host #messages yoo-chat-message{--left-messages-text-color:var(--dark, #000000)}:host #messages yoo-chat-message:not(:first-child){cursor:pointer;--right-messages-text-color:var(--dark, #000000);--border-message-content:var(--border-width-01, 0.0625rem) solid var(--app-color, #5a30f4)}:host #messages yoo-chat-message:not(:first-child).selected{--right-messages-background-color:var(--app-color, #5a30f4);--right-messages-text-color:var(--light, #ffffff)}:host #messages yoo-chat-message:not(:first-child):not(.selected){--right-messages-background-color:var(--light, #ffffff)}:host .title.alternate{text-align:end}:host([animated]){--chat-answer-message-animation-duration:0.3s;--chat-answer-message-animation-start:1.5s;--chat-answer-message-animation-step:0.2s;--chat-answer-title-animation-start:1.3s;--chat-question-message-animation-start:0.2s;--chat-question-message-fade-animation-duration:0.1s;--chat-question-message-slide-animation-duration:0.2s;--chat-question-title-animation-start:0.1s;--chat-title-animation-duration:0.2s;--choice-index:0}:host([animated]) yoo-chat-message,:host([animated]) .title{opacity:0;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host([animated]) yoo-chat-message.choice{-webkit-animation-name:slide-in-from-right, fade-in;animation-name:slide-in-from-right, fade-in;-webkit-animation-duration:var(--chat-answer-message-animation-duration);animation-duration:var(--chat-answer-message-animation-duration);-webkit-animation-timing-function:var(--ease-out-back), var(--ease-in-out-sine);animation-timing-function:var(--ease-out-back), var(--ease-in-out-sine);-webkit-animation-delay:calc(var(--chat-answer-message-animation-start) + var(--choice-index) * var(--chat-answer-message-animation-step));animation-delay:calc(var(--chat-answer-message-animation-start) + var(--choice-index) * var(--chat-answer-message-animation-step))}:host([animated]) yoo-chat-message:not(.choice){-webkit-animation-name:slide-in-from-left, fade-in;animation-name:slide-in-from-left, fade-in;-webkit-animation-duration:var(--chat-question-message-slide-animation-duration), var(--chat-question-message-fade-animation-duration);animation-duration:var(--chat-question-message-slide-animation-duration), var(--chat-question-message-fade-animation-duration);-webkit-animation-timing-function:var(--ease-out-back), var(--ease-in-out-sine);animation-timing-function:var(--ease-out-back), var(--ease-in-out-sine);-webkit-animation-delay:var(--chat-question-message-animation-start);animation-delay:var(--chat-question-message-animation-start)}:host([animated]) .title{-webkit-animation-name:slide-up, fade-in;animation-name:slide-up, fade-in;-webkit-animation-duration:var(--chat-title-animation-duration);animation-duration:var(--chat-title-animation-duration)}:host([animated]) .title.alternate{-webkit-animation-timing-function:var(--ease-in-out-sine);animation-timing-function:var(--ease-in-out-sine);-webkit-animation-delay:var(--chat-answer-title-animation-start);animation-delay:var(--chat-answer-title-animation-start)}:host([animated]) .title:not(.alternate){-webkit-animation-timing-function:var(--ease-out-quad);animation-timing-function:var(--ease-out-quad);-webkit-animation-delay:var(--chat-question-title-animation-start);animation-delay:var(--chat-question-title-animation-start)}@-webkit-keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes slide-in-from-right{from{-webkit-transform:translateX(17.375rem);transform:translateX(17.375rem)}to{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slide-in-from-right{from{-webkit-transform:translateX(17.375rem);transform:translateX(17.375rem)}to{-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes slide-in-from-left{from{-webkit-transform:translateX(-13.75rem);transform:translateX(-13.75rem)}to{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slide-in-from-left{from{-webkit-transform:translateX(-13.75rem);transform:translateX(-13.75rem)}to{-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes slide-up{from{-webkit-transform:translateY(0.5rem);transform:translateY(0.5rem)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slide-up{from{-webkit-transform:translateY(0.5rem);transform:translateY(0.5rem)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes slide-in-from-bottom{from{-webkit-transform:translateY(42rem);transform:translateY(42rem)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slide-in-from-bottom{from{-webkit-transform:translateY(42rem);transform:translateY(42rem)}to{-webkit-transform:translateY(0);transform:translateY(0)}}";
|
|
18
18
|
|
|
19
19
|
const YooFormChoiceChatComponent = class {
|
|
20
20
|
constructor(hostRef) {
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-6482c595.js');
|
|
6
6
|
require('./index-cdada3c1.js');
|
|
7
7
|
const commonHelpers = require('./common-helpers-e75f02e0.js');
|
|
8
|
-
const formChoiceHelpers = require('./form-choice-helpers-
|
|
8
|
+
const formChoiceHelpers = require('./form-choice-helpers-5a83f5c9.js');
|
|
9
9
|
const overlays = require('./overlays-e40de213.js');
|
|
10
10
|
require('./lodash-597bda6d.js');
|
|
11
11
|
require('./draggable-tags-helpers-2e1067f0.js');
|
|
@@ -14,7 +14,7 @@ require('./index-0eb5a03c.js');
|
|
|
14
14
|
require('./highcharts-874d9bd2.js');
|
|
15
15
|
require('./_commonjsHelpers-94df2ea7.js');
|
|
16
16
|
|
|
17
|
-
const formChoiceImageCss = ":host([readonly]){padding:0.5rem 0.5rem 0 0;-ms-flex-pack:start;justify-content:flex-start;color:var(--dark, #000000)}:host([readonly]) .image-container{max-width:var(--spacing-80, 5rem);margin-right:var(--spacing-24, 1.5rem);margin-bottom:0;padding-bottom:0;border-bottom:none}:host([readonly]) .image-container .content{position:relative;width:var(--spacing-80, 5rem);height:var(--spacing-80, 5rem);
|
|
17
|
+
const formChoiceImageCss = ":host([readonly]){padding:0.5rem 0.5rem 0 0;-ms-flex-pack:start;justify-content:flex-start;color:var(--dark, #000000)}:host([readonly]) .image-container{max-width:var(--spacing-80, 5rem);margin-right:var(--spacing-24, 1.5rem);margin-bottom:0;padding-bottom:0;border-bottom:none}:host([readonly]) .image-container .content{position:relative;width:var(--spacing-80, 5rem);height:var(--spacing-80, 5rem);border-radius:var(--border-radius-08, 0.5rem)}:host([readonly]) .image-container .content::before{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0.4;content:\"\"}:host([readonly]) .image-container .content yoo-img{height:100%;border-radius:var(--border-radius-08, 0.5rem)}:host([readonly]) .image-container .content.correct-answer{border:var(--border-width-01, 0.0625rem) solid var(--success, #3aa76d)}:host([readonly]) .image-container .content.correct-answer::before{background-color:var(--success, #3aa76d)}:host([readonly]) .image-container .content.wrong-answer{border:var(--border-width-01, 0.0625rem) solid var(--danger, #d44333)}:host([readonly]) .image-container .content.wrong-answer::before{background-color:var(--danger, #d44333)}:host([readonly]) .image-container .text{white-space:unset;text-align:center;-webkit-line-clamp:2}:host([is-pdf]) .image-container{width:100%}:host([is-pdf]) .image-container .content{max-width:22.5rem}:host([is-pdf]) .image-container .content yoo-img{border:none;border-radius:0}:host([is-pdf]) .image-container .text{text-align:left}:host([is-pdf]) .image-container:not(:last-child){margin-bottom:var(--spacing-16, 1rem);padding-bottom:var(--spacing-16, 1rem)}.readonly-card{width:100%}.readonly-card .invalid{color:var(--danger, #d44333)}.readonly-card .valid{color:var(--success, #3aa76d)}.readonly-card.chat{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;color:var(--dark, #000000)}.readonly-card.chat .text:not(:last-of-type){margin-bottom:var(--spacing-08, 0.5rem)}.readonly-card.chat .text{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:var(--spacing-04, 0.25rem) var(--spacing-08, 0.5rem);border-radius:var(--border-radius-16, 1rem)}.readonly-card.chat .text.valid{color:var(--light, #ffffff);background-color:var(--success, #3aa76d)}.readonly-card.chat .text.invalid{color:var(--light, #ffffff);background-color:var(--danger, #d44333)}:host(.history:not(.forcedhistory)){padding:0}:host(.history:not(.forcedhistory))>.text,:host(.history:not(.forcedhistory)) .card .text,:host(.history:not(.forcedhistory)) .button .text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;margin-right:var(--spacing-16, 1rem)}:host{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;width:100%;height:100%}:host yoo-banner{width:100%;height:0}:host .content{position:relative}:host .content yoo-img{border:solid var(--border-width-01, 0.0625rem) var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-08, 0.5rem);cursor:pointer}:host .content yoo-form-checkbox{position:absolute;top:var(--spacing-08, 0.5rem);right:var(--spacing-08, 0.5rem)}:host .content yoo-tag{position:absolute;right:var(--spacing-08, 0.5rem);bottom:var(--spacing-08, 0.5rem);display:-ms-flexbox;display:flex;cursor:pointer}:host .text{margin-top:var(--spacing-08, 0.5rem);text-align:center;cursor:pointer}:host .text.truncate{overflow:hidden;text-align:left;word-break:break-word}@supports (display: -webkit-box){:host .text.truncate{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}:host .text.link{color:var(--app-color, #5a30f4)}:host([animated]){--image-choice-animation-delay-start:0.3s;--image-choice-animation-delay-step:0.1s;--choice-index:0}:host([animated]) .image-container{-webkit-transform:translateY(42rem);transform:translateY(42rem);-webkit-animation-name:\"slide-in-from-bottom\";animation-name:\"slide-in-from-bottom\";-webkit-animation-duration:400ms;animation-duration:400ms;-webkit-animation-timing-function:var(--ease-out-quad);animation-timing-function:var(--ease-out-quad);-webkit-animation-delay:calc(var(--image-choice-animation-delay-start) + var(--choice-index) * var(--image-choice-animation-delay-step));animation-delay:calc(var(--image-choice-animation-delay-start) + var(--choice-index) * var(--image-choice-animation-delay-step));-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes slide-in-from-bottom{from{-webkit-transform:translateY(42rem);transform:translateY(42rem)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slide-in-from-bottom{from{-webkit-transform:translateY(42rem);transform:translateY(42rem)}to{-webkit-transform:translateY(0);transform:translateY(0)}}:host([is-pdf]) .image-container:not(:last-child){border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host(:not([is-pdf]):not([readonly])){gap:var(--spacing-16, 1rem)}:host(:not([is-pdf]):not([readonly])) yoo-banner{margin-bottom:calc(var(--spacing-16, 1rem) * -1)}:host(:not([is-pdf]):not([readonly])) .image-container{width:calc(50% - (var(--spacing-16, 1rem) / 2));max-width:18rem}:host(:not([is-pdf]):not([readonly])) .image-container yoo-img{--image-position:absolute;position:relative}:host(:not([is-pdf]):not([readonly])) .image-container yoo-img:after{padding-bottom:100%;content:\"\"}";
|
|
18
18
|
|
|
19
19
|
const YooFormChoiceImageComponent = class {
|
|
20
20
|
constructor(hostRef) {
|
|
@@ -6,7 +6,7 @@ const index = require('./index-6482c595.js');
|
|
|
6
6
|
require('./index-cdada3c1.js');
|
|
7
7
|
const lodash = require('./lodash-597bda6d.js');
|
|
8
8
|
const formInputHelpers = require('./form-input-helpers-28a6e6a6.js');
|
|
9
|
-
const formChoiceHelpers = require('./form-choice-helpers-
|
|
9
|
+
const formChoiceHelpers = require('./form-choice-helpers-5a83f5c9.js');
|
|
10
10
|
const overlays = require('./overlays-e40de213.js');
|
|
11
11
|
require('./index-0eb5a03c.js');
|
|
12
12
|
require('./common-helpers-e75f02e0.js');
|
|
@@ -14,7 +14,7 @@ require('./draggable-tags-helpers-2e1067f0.js');
|
|
|
14
14
|
require('./highcharts-874d9bd2.js');
|
|
15
15
|
require('./_commonjsHelpers-94df2ea7.js');
|
|
16
16
|
|
|
17
|
-
const formChoiceRadioCss = ":host([readonly]){padding:0.5rem 0.5rem 0 0;-ms-flex-pack:start;justify-content:flex-start;color:var(--dark, #000000)}:host([readonly]) .image-container{max-width:var(--spacing-80, 5rem);margin-right:var(--spacing-24, 1.5rem);margin-bottom:0;padding-bottom:0;border-bottom:none}:host([readonly]) .image-container .content{position:relative;width:var(--spacing-80, 5rem);height:var(--spacing-80, 5rem);
|
|
17
|
+
const formChoiceRadioCss = ":host([readonly]){padding:0.5rem 0.5rem 0 0;-ms-flex-pack:start;justify-content:flex-start;color:var(--dark, #000000)}:host([readonly]) .image-container{max-width:var(--spacing-80, 5rem);margin-right:var(--spacing-24, 1.5rem);margin-bottom:0;padding-bottom:0;border-bottom:none}:host([readonly]) .image-container .content{position:relative;width:var(--spacing-80, 5rem);height:var(--spacing-80, 5rem);border-radius:var(--border-radius-08, 0.5rem)}:host([readonly]) .image-container .content::before{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0.4;content:\"\"}:host([readonly]) .image-container .content yoo-img{height:100%;border-radius:var(--border-radius-08, 0.5rem)}:host([readonly]) .image-container .content.correct-answer{border:var(--border-width-01, 0.0625rem) solid var(--success, #3aa76d)}:host([readonly]) .image-container .content.correct-answer::before{background-color:var(--success, #3aa76d)}:host([readonly]) .image-container .content.wrong-answer{border:var(--border-width-01, 0.0625rem) solid var(--danger, #d44333)}:host([readonly]) .image-container .content.wrong-answer::before{background-color:var(--danger, #d44333)}:host([readonly]) .image-container .text{white-space:unset;text-align:center;-webkit-line-clamp:2}:host([is-pdf]) .image-container{width:100%}:host([is-pdf]) .image-container .content{max-width:22.5rem}:host([is-pdf]) .image-container .content yoo-img{border:none;border-radius:0}:host([is-pdf]) .image-container .text{text-align:left}:host([is-pdf]) .image-container:not(:last-child){margin-bottom:var(--spacing-16, 1rem);padding-bottom:var(--spacing-16, 1rem)}.readonly-card{width:100%}.readonly-card .invalid{color:var(--danger, #d44333)}.readonly-card .valid{color:var(--success, #3aa76d)}.readonly-card.chat{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;color:var(--dark, #000000)}.readonly-card.chat .text:not(:last-of-type){margin-bottom:var(--spacing-08, 0.5rem)}.readonly-card.chat .text{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:var(--spacing-04, 0.25rem) var(--spacing-08, 0.5rem);border-radius:var(--border-radius-16, 1rem)}.readonly-card.chat .text.valid{color:var(--light, #ffffff);background-color:var(--success, #3aa76d)}.readonly-card.chat .text.invalid{color:var(--light, #ffffff);background-color:var(--danger, #d44333)}:host(.history:not(.forcedhistory)){padding:0}:host(.history:not(.forcedhistory))>.text,:host(.history:not(.forcedhistory)) .card .text,:host(.history:not(.forcedhistory)) .button .text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;margin-right:var(--spacing-16, 1rem)}:host{display:block;width:100%;height:100%}:host yoo-banner{height:0}:host .choice{margin-top:-cssvar(spacing-08)}:host .input-zone{position:relative;height:2.375rem;margin-top:var(--spacing-08, 0.5rem);margin-right:var(--spacing-16, 1rem);margin-left:var(--spacing-16, 1rem);padding:var(--spacing-04, 0.25rem);background-color:var(--light, #ffffff);border:var(--border-width-01, 0.0625rem) solid var(--stable, #adadad);border-radius:var(--border-radius-04, 0.25rem)}:host .input-zone textarea{display:block;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;overflow:hidden;overflow-y:auto !important;color:var(--dark, #000000);font-size:var(--font-size-14, 0.875rem);font-family:var(--font-family, \"Lato\");line-height:1rem;background-color:var(--light, #ffffff);border:none;outline:none !important;-webkit-appearance:none;resize:none}";
|
|
18
18
|
|
|
19
19
|
const YooFormChoiceRadioComponent = class {
|
|
20
20
|
constructor(hostRef) {
|
|
@@ -337,9 +337,6 @@ const YooFormCreatorBlockExpandableComponent = class {
|
|
|
337
337
|
if (this.contentBottomElement) {
|
|
338
338
|
this.contentBottomElement.style.display = 'flex';
|
|
339
339
|
}
|
|
340
|
-
if (this.arrowElement) {
|
|
341
|
-
this.arrowElement.name = this.isExpanded ? 'arrow-up' : 'arrow-down';
|
|
342
|
-
}
|
|
343
340
|
overlays.gsapSet(slotContent, { overflow: 'unset' });
|
|
344
341
|
},
|
|
345
342
|
ease: overlays.Power3.easeIn
|
|
@@ -347,6 +344,9 @@ const YooFormCreatorBlockExpandableComponent = class {
|
|
|
347
344
|
const animationDelay = 0.5;
|
|
348
345
|
this.isExpanded = shouldExpand;
|
|
349
346
|
this.blockExpanded.emit({ expanded: shouldExpand, name: this.formField.name });
|
|
347
|
+
if (this.arrowElement) {
|
|
348
|
+
this.arrowElement.name = this.isExpanded ? 'arrow-up' : 'arrow-down';
|
|
349
|
+
}
|
|
350
350
|
overlays.gsapFromTo(contentBlock, animationDelay, from, to);
|
|
351
351
|
}
|
|
352
352
|
}
|
|
@@ -315,7 +315,9 @@ const YooFormCreatorComponent = class {
|
|
|
315
315
|
return ((_a = this.missionDescription) === null || _a === void 0 ? void 0 : _a.type) === 'lesson';
|
|
316
316
|
}
|
|
317
317
|
onMissionDescriptionUpdated() {
|
|
318
|
-
this.translatePage
|
|
318
|
+
if (this.translatePage) {
|
|
319
|
+
this.translatePage.missionDescription = this.missionDescription;
|
|
320
|
+
}
|
|
319
321
|
}
|
|
320
322
|
onCustomFormFieldsUpdated() {
|
|
321
323
|
if (this.fieldSelectorElement) {
|
|
@@ -361,8 +363,8 @@ const YooFormCreatorComponent = class {
|
|
|
361
363
|
if (this.hasAdditionBeenClicked && ((_a = this.newFieldCondition) === null || _a === void 0 ? void 0 : _a.condition)) {
|
|
362
364
|
this.newFieldCondition = null;
|
|
363
365
|
this.overlayElement.initialNewFieldCondition = this.newFieldCondition;
|
|
364
|
-
this.hasAdditionBeenClicked = false;
|
|
365
366
|
}
|
|
367
|
+
this.hasAdditionBeenClicked = false;
|
|
366
368
|
}
|
|
367
369
|
onTranslationsChanged() {
|
|
368
370
|
var _a, _b;
|
|
@@ -936,7 +938,7 @@ const YooFormCreatorComponent = class {
|
|
|
936
938
|
this.expandableBlocks[itemIndex].formField.required =
|
|
937
939
|
originalItemIndex === itemIndex && attributesToForceUpdate ? attributesToForceUpdate.required : this.currentSlides[slideIndex].items[itemIndex].required;
|
|
938
940
|
this.expandableBlocks[itemIndex].formField.title;
|
|
939
|
-
const key = title.replace(/%/g, '');
|
|
941
|
+
const key = title === null || title === void 0 ? void 0 : title.replace(/%/g, '');
|
|
940
942
|
const translationIndex = this.translations.findIndex((tran) => tran.key === key);
|
|
941
943
|
if (translationIndex > -1) {
|
|
942
944
|
title = this.translations[translationIndex][overlays.getCurrentLanguage()];
|
|
@@ -1571,6 +1573,9 @@ const YooFormCreatorComponent = class {
|
|
|
1571
1573
|
const fieldsToMove = [];
|
|
1572
1574
|
const selectedFieldNames = [];
|
|
1573
1575
|
selectedFields.forEach((selectedField) => {
|
|
1576
|
+
if (slideIndex !== selectedField.slideIndex) {
|
|
1577
|
+
this.currentSlides[selectedField.slideIndex].items[selectedField.itemIndex].isExpanded = false;
|
|
1578
|
+
}
|
|
1574
1579
|
fieldsToMove.push(this.currentSlides[selectedField.slideIndex].items[selectedField.itemIndex]);
|
|
1575
1580
|
selectedFieldNames.push(this.currentSlides[selectedField.slideIndex].items[selectedField.itemIndex].name);
|
|
1576
1581
|
});
|
|
@@ -737,6 +737,7 @@ const YooFormDynamicComponent = class {
|
|
|
737
737
|
commonHelpers.lockSwipes(this.ionSlides, false);
|
|
738
738
|
if (!this.slidesState || (this.slidesState[index] && !this.getSlideState(index).locked) || (this.isLivePreview() && this.slides[index])) {
|
|
739
739
|
if (this.ionSlides) {
|
|
740
|
+
index$1.forceUpdate(this);
|
|
740
741
|
await this.ionSlides.slideTo(this.showRecap !== false ? index + 1 : index, animated ? 200 : 0);
|
|
741
742
|
}
|
|
742
743
|
else if (this.isWeb) {
|
|
@@ -3292,6 +3293,7 @@ const YooFormDynamicComponent = class {
|
|
|
3292
3293
|
extraAttrs = {
|
|
3293
3294
|
min: field.min,
|
|
3294
3295
|
max: field.max,
|
|
3296
|
+
allowDecimals: field.allowDecimals,
|
|
3295
3297
|
maxCharacters: field.maxCharacters,
|
|
3296
3298
|
type: field.type === index.FormFieldType.number && overlays.isSamsung() ? index.FormFieldType.text : getInputType(field),
|
|
3297
3299
|
inputmode: field.type === index.FormFieldType.number && overlays.isSamsung() ? 'numeric' : '',
|
|
@@ -25,7 +25,7 @@ var SwipeCardsMode;
|
|
|
25
25
|
SwipeCardsMode["text"] = "text";
|
|
26
26
|
})(SwipeCardsMode || (SwipeCardsMode = {}));
|
|
27
27
|
|
|
28
|
-
const formSwipeCardsCss = ".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)}@-webkit-keyframes fade-out{from{opacity:1}to{opacity:0}}@keyframes fade-out{from{opacity:1}to{opacity:0}}.hidden{display:none !important}.flex{display:-ms-flexbox !important;display:flex !important}.block{display:block !important}:host{position:relative;display:block;height:100%;overflow:hidden}:host yoo-banner{height:0}:host #instructions{height:100%;-webkit-transition:opacity 1s ease-in-out;transition:opacity 1s ease-in-out}:host #instructions #header{padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);background:var(--dark, #000000);border-radius:var(--border-radius-04, 0.25rem)}:host #instructions #header h1{margin:0;color:var(--light, #ffffff)}:host #instructions #categories{display:inline-grid;grid-template-columns:1fr 0.5fr 1fr;width:100%;margin:var(--spacing-24, 1.5rem) 0;text-align:center}:host #instructions #categories yoo-icon{margin:0 auto}:host #instructions #categories .category{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;padding:0;color:var(--stable, #adadad)}:host #instructions #categories .category p{max-width:75%;margin:auto;padding:var(--spacing-16, 1rem) 0}:host #instructions #categories .category yoo-tag{margin:0 auto}:host #instructions yoo-button{padding:var(--spacing-16, 1rem)}:host #instructions #document{background-color:var(--light, #ffffff)}:host #instructions #document .document-title{padding:0 var(--spacing-16, 1rem);font-size:var(--font-size-16, 1rem)}:host #instructions #document yoo-form-document{--outer-container-padding:cssvar(spacing-16) cssvar(spacing-16);width:calc(100% - var(--spacing-16, 1rem))}:host [direction].card{z-index:5;-webkit-transition:-webkit-transform 0.35s !important;transition:-webkit-transform 0.35s !important;transition:transform 0.35s !important;transition:transform 0.35s, -webkit-transform 0.35s !important;-webkit-transform:translate(0%, 9%) scale(1);transform:translate(0%, 9%) scale(1);opacity:1}:host [direction].card.current .content-category{color:var(--light, #ffffff);opacity:1 !important;-webkit-transition:opacity 0.35s linear;transition:opacity 0.35s linear}:host [direction].card.current.card+.card{-webkit-transform:translate(0%, 9%) scale(1);transform:translate(0%, 9%) scale(1);opacity:1}:host [direction].card.current.card+.card .content-image,:host [direction].card.current.card+.card .content-text{opacity:1 !important}:host [direction].card.current.card+.card+.card{-webkit-transform:translate(0%, 3.5%) scale(0.95);transform:translate(0%, 3.5%) scale(0.95);opacity:1}:host [direction].card.current.card+.card+.card+.card{-webkit-transform:translate(0%, -2%) scale(0.9);transform:translate(0%, -2%) scale(0.9);opacity:0.7}:host [direction=left]#game,:host [direction=left].current>.content-category{background-color:var(--app-color, #5a30f4) !important}:host [direction=left].current{-webkit-transform:translate(0%, 9%) scale(1) rotate(-3.5deg) !important;transform:translate(0%, 9%) scale(1) rotate(-3.5deg) !important}:host [direction=right]#game,:host [direction=right].current>.content-category{background-color:var(--warning, #ed6e33) !important}:host [direction=right].current{-webkit-transform:translate(0%, 9%) scale(1) rotate(3.5deg) !important;transform:translate(0%, 9%) scale(1) rotate(3.5deg) !important}:host #game{position:relative;width:100%;background-color:var(--dark, #000000);-webkit-transition:background-color 0.25s ease-in-out;transition:background-color 0.25s ease-in-out}:host #game #end-message{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:calc(100% - 4rem);max-width:25rem;color:var(--light, #ffffff);font-size:var(--font-size-18, 1.125rem);text-align:center;visibility:hidden;opacity:0;-webkit-transition:opacity 0.5s ease-in-out;transition:opacity 0.5s ease-in-out}:host #game #end-message.rtl{top:50%;right:50%;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%)}:host #game #end-message yoo-lottie{width:30%;margin:0 auto}:host #game #end-message div{padding:var(--spacing-16, 1rem) 0;font-weight:bold;font-size:var(--font-size-24, 1.5rem)}:host #game #end-message.active{visibility:visible;opacity:1}:host #game:after{display:block;height:0;padding-top:85%;content:\"\"}:host #stack{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:100%;width:65%;max-width:25rem;height:100%;margin-top:var(--spacing-16, 1rem)}:host #stack.rtl{top:50%;right:50%;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%)}:host #stack .card{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;max-width:16rem;height:100%;max-height:21.3333333333rem;margin:0 auto;overflow:hidden;color:var(--dark, #000000);font-size:var(--font-size-28, 1.75rem);text-align:center;background-color:var(--stable-light, #f1f1f1);border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:var(--shadow-05, -0.375rem -0.375rem 0.5rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-05, -0.375rem -0.375rem 0.5rem 0 rgba(0, 0, 0, 0.1));-webkit-transition:opacity 0.25s, background-color 0.25s, -webkit-transform 0.25s;transition:opacity 0.25s, background-color 0.25s, -webkit-transform 0.25s;transition:transform 0.25s, opacity 0.25s, background-color 0.25s;transition:transform 0.25s, opacity 0.25s, background-color 0.25s, -webkit-transform 0.25s}:host #stack .card:not([direction]){-webkit-transform:translate(0, -5%) scale(0.85);transform:translate(0, -5%) scale(0.85);opacity:0}:host #stack .card.current{z-index:3}:host #stack .card.current:not(.revealing){-webkit-transform:translate(0%, 9%) scale(1);transform:translate(0%, 9%) scale(1);opacity:1;-webkit-transition-delay:200ms;transition-delay:200ms}:host #stack .card.current.revealing{-webkit-animation:\"current\" 0.25s ease-in-out;animation:\"current\" 0.25s ease-in-out;-webkit-animation-delay:150ms;animation-delay:150ms;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes current{to{-webkit-transform:translate(0%, 9%) scale(1);transform:translate(0%, 9%) scale(1);opacity:1}}@keyframes current{to{-webkit-transform:translate(0%, 9%) scale(1);transform:translate(0%, 9%) scale(1);opacity:1}}:host #stack .card.second{z-index:2}:host #stack .card.second:not(.revealing){-webkit-transform:translate(0%, 3.5%) scale(0.95);transform:translate(0%, 3.5%) scale(0.95);opacity:1;-webkit-transition-delay:400ms;transition-delay:400ms}:host #stack .card.second.revealing{-webkit-animation:\"second\" 0.25s ease-in-out;animation:\"second\" 0.25s ease-in-out;-webkit-animation-delay:300ms;animation-delay:300ms;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes second{to{-webkit-transform:translate(0%, 3.5%) scale(0.95);transform:translate(0%, 3.5%) scale(0.95);opacity:1}}@keyframes second{to{-webkit-transform:translate(0%, 3.5%) scale(0.95);transform:translate(0%, 3.5%) scale(0.95);opacity:1}}:host #stack .card.third{z-index:1}:host #stack .card.third:not(.revealing){-webkit-transform:translate(0%, -2%) scale(0.9);transform:translate(0%, -2%) scale(0.9);opacity:0.7;-webkit-transition-delay:600ms;transition-delay:600ms}:host #stack .card.third.revealing{-webkit-animation:\"third\" 0.25s ease-in-out;animation:\"third\" 0.25s ease-in-out;-webkit-animation-delay:450ms;animation-delay:450ms;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes third{to{-webkit-transform:translate(0%, -2%) scale(0.9);transform:translate(0%, -2%) scale(0.9);opacity:0.7}}@keyframes third{to{-webkit-transform:translate(0%, -2%) scale(0.9);transform:translate(0%, -2%) scale(0.9);opacity:0.7}}:host #stack .card:after{display:block;height:0;padding-top:133%;content:\"\"}:host #stack .card.current .content-image,:host #stack .card.current .content-text,:host #stack .card[direction] .content-image,:host #stack .card[direction] .content-text{opacity:1 !important}:host #stack .card[swiped]{-webkit-animation:fade-out 1s ease-out;animation:fade-out 1s ease-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host #stack .card[swiped=left]{-webkit-transform:translate(-100%, 15%) rotate(-15deg);transform:translate(-100%, 15%) rotate(-15deg)}:host #stack .card[swiped=right]{-webkit-transform:translate(100%, 15%) rotate(15deg);transform:translate(100%, 15%) rotate(15deg)}:host #stack .card .content-category,:host #stack .card .content-image,:host #stack .card .content-text{position:absolute;width:100%;height:100%;word-break:break-word;opacity:0}:host #stack .card .content-category,:host #stack .card .content-text{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host #stack .card .content-image{-webkit-transition:opacity 0.25s linear;transition:opacity 0.25s linear}:host #stack .card[type=image] yoo-img{height:100%}:host #stack .card[type=textimage] .content-image{top:0;bottom:3.5rem}:host #stack .card[type=textimage] .content-image yoo-img{height:calc(100% - 3.5rem)}:host #stack .card[type=textimage] .content-text,:host #stack .card[type=textimage] .content-category{bottom:0;height:3.5rem}:host #actions{position:absolute;left:50%;z-index:1;display:inline-grid;grid-template-columns:1fr 1fr 1fr;width:100%;max-width:85%;line-height:2.5;-webkit-transform:translate(-50%, 80%);transform:translate(-50%, 80%)}:host #actions .action{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;text-align:center}:host([readonly]){display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}:host([readonly]) .category-title{margin-bottom:var(--spacing-08, 0.5rem)}:host([readonly]) ul{display:grid;grid-gap:var(--spacing-16, 1rem);grid-template-columns:repeat(auto-fill, 6rem);margin:0;padding-left:0;list-style:none}:host([readonly]) ul+.category-title{margin-top:var(--spacing-16, 1rem)}:host([readonly]) ul li{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;height:8rem;overflow:hidden;border-style:solid;border-width:var(--border-width-01, 0.0625rem);border-radius:var(--border-radius-08, 0.5rem)}:host([readonly]) ul li.invalid{border-color:var(--danger, #d44333)}:host([readonly]) ul li.invalid yoo-img::before{position:absolute;width:100%;height:100%;background:var(--danger-20, rgba(212, 67, 51, 0.2));content:\"\"}:host([readonly]) ul li.invalid yoo-truncate{background:var(--danger, #d44333)}:host([readonly]) ul li.valid{border-color:var(--success, #3aa76d)}:host([readonly]) ul li.valid yoo-img::before{position:absolute;width:100%;height:100%;background:var(--success-20, rgba(58, 167, 109, 0.2));content:\"\"}:host([readonly]) ul li.valid yoo-truncate{background:var(--success, #3aa76d)}:host([readonly]) ul li yoo-img{position:relative;-ms-flex-positive:1;flex-grow:1}:host([readonly]) ul li yoo-truncate{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:var(--light, #ffffff);font-size:var(--font-size-14, 0.875rem)}:host([readonly]) ul li yoo-truncate:only-child{--max-lines:4;height:100%;padding:0 var(--spacing-08, 0.5rem)}:host([readonly]) ul li yoo-truncate:not(:only-child){--max-lines:1;height:2.125rem;padding:0 var(--spacing-04, 0.25rem)}:host([animated]) #game{-webkit-animation:show 0.5s ease-in-out forwards;animation:show 0.5s ease-in-out forwards}@-webkit-keyframes show{from{-webkit-transform:scale(0.85);transform:scale(0.85);opacity:0}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes show{from{-webkit-transform:scale(0.85);transform:scale(0.85);opacity:0}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}:host([animated]) .action.hide>*{-webkit-animation:fadeOut 0.75s ease-in-out forwards;animation:fadeOut 0.75s ease-in-out forwards}@-webkit-keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}:host([animated]) .action:not(.hide)>*{-webkit-animation:fadeIn 0.75s ease-in-out forwards;animation:fadeIn 0.75s ease-in-out forwards}@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}:host([animated]) .action yoo-button{-webkit-transition:-webkit-transform 0.8s linear;transition:-webkit-transform 0.8s linear;transition:transform 0.8s linear;transition:transform 0.8s linear, -webkit-transform 0.8s linear}:host([live-preview]) #instructions yoo-button,:host(.mobile) #instructions yoo-button{position:absolute;bottom:0;width:-webkit-fill-available;width:-moz-available;width:stretch}:host(.web:not([live-preview])) #instructions #header{background:unset}:host(.web:not([live-preview])) #instructions yoo-button{position:fixed;right:var(--spacing-16, 1rem);bottom:var(--spacing-16, 1rem);z-index:1;-webkit-transform:translateY(-50%);transform:translateY(-50%)}:host(.web:not([live-preview])) #game{max-height:21rem}:host(.web:not([live-preview])) #game #stack{top:5%;margin-top:unset;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0)}:host(.web:not([live-preview])) #actions{-ms-flex-align:start;align-items:start;max-width:unset;margin-top:2.5%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0)}:host(.web:not([live-preview])) #actions .action:nth-child(2){-ms-flex-item-align:end;align-self:end}:host(.web:not([live-preview])) #header{margin-bottom:var(--spacing-24, 1.5rem);line-height:1.75;text-align:center}:host(.web:not([live-preview])) #header h1{margin:var(--spacing-08, 0.5rem) 0 !important;color:var(--dark, #000000) !important}";
|
|
28
|
+
const formSwipeCardsCss = ".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)}@-webkit-keyframes fade-out{from{opacity:1}to{opacity:0}}@keyframes fade-out{from{opacity:1}to{opacity:0}}.hidden{display:none !important}.flex{display:-ms-flexbox !important;display:flex !important}.block{display:block !important}:host{position:relative;display:block;height:100%}:host yoo-banner{height:0}:host #instructions{height:100%;-webkit-transition:opacity 1s ease-in-out;transition:opacity 1s ease-in-out}:host #instructions #header{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host #instructions #header #title{font-weight:bold}:host #instructions #categories{display:inline-grid;grid-template-columns:1fr 0.5fr 1fr;width:100%;margin:var(--spacing-24, 1.5rem) 0;text-align:center}:host #instructions #categories .category{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;padding:0;color:var(--stable, #adadad)}:host #instructions #categories .category p{max-width:75%;margin:auto;padding:var(--spacing-16, 1rem) 0;font-weight:bold}:host #instructions #categories .category yoo-tag{margin:0 auto}:host #instructions yoo-button{position:absolute;right:0;bottom:0;z-index:1;-webkit-box-sizing:border-box;box-sizing:border-box}:host #instructions #document{background-color:var(--light, #ffffff)}:host #instructions #document .document-title{padding:0 var(--spacing-16, 1rem);font-size:var(--font-size-16, 1rem)}:host #instructions #document yoo-form-document{--outer-container-padding:cssvar(spacing-16) cssvar(spacing-16);width:calc(100% - var(--spacing-16, 1rem))}:host [direction].card{z-index:5;-webkit-transition:-webkit-transform 0.35s !important;transition:-webkit-transform 0.35s !important;transition:transform 0.35s !important;transition:transform 0.35s, -webkit-transform 0.35s !important;-webkit-transform:translate(0%, 9%) scale(1);transform:translate(0%, 9%) scale(1);opacity:1}:host [direction].card.current .content-category{color:var(--light, #ffffff);opacity:1 !important;-webkit-transition:opacity 0.35s linear;transition:opacity 0.35s linear}:host [direction].card.current.card+.card{-webkit-transform:translate(0%, 9%) scale(1);transform:translate(0%, 9%) scale(1);opacity:1}:host [direction].card.current.card+.card .content-image,:host [direction].card.current.card+.card .content-text{opacity:1 !important}:host [direction].card.current.card+.card+.card{-webkit-transform:translate(0%, 3.5%) scale(0.95);transform:translate(0%, 3.5%) scale(0.95);opacity:1}:host [direction].card.current.card+.card+.card+.card{-webkit-transform:translate(0%, -2%) scale(0.9);transform:translate(0%, -2%) scale(0.9);opacity:1}:host [direction=left]#game,:host [direction=left].current>.content-category{background-color:var(--app-color, #5a30f4) !important}:host [direction=left].current{-webkit-transform:translate(0%, 9%) scale(1) rotate(-3.5deg) !important;transform:translate(0%, 9%) scale(1) rotate(-3.5deg) !important}:host [direction=right]#game,:host [direction=right].current>.content-category{background-color:var(--warning, #ed6e33) !important}:host [direction=right].current{-webkit-transform:translate(0%, 9%) scale(1) rotate(3.5deg) !important;transform:translate(0%, 9%) scale(1) rotate(3.5deg) !important}:host #game{position:relative;width:100%;background-color:var(--dark, #000000);-webkit-transition:background-color 0.25s ease-in-out;transition:background-color 0.25s ease-in-out}:host #game #end-message{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:calc(100% - 4rem);max-width:25rem;color:var(--light, #ffffff);font-size:var(--font-size-18, 1.125rem);text-align:center;visibility:hidden;opacity:0;-webkit-transition:opacity 0.5s ease-in-out;transition:opacity 0.5s ease-in-out}:host #game #end-message.rtl{top:50%;right:50%;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%)}:host #game #end-message yoo-lottie{width:30%;margin:0 auto}:host #game #end-message div{padding:var(--spacing-16, 1rem) 0;font-weight:bold;font-size:var(--font-size-24, 1.5rem)}:host #game #end-message.active{visibility:visible;opacity:1}:host #game:after{display:block;height:0;padding-top:85%;content:\"\"}:host #cards{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:100%;width:65%;max-width:16rem;height:100%;margin-top:var(--spacing-16, 1rem)}:host #cards.rtl{top:50%;right:50%;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%)}:host #cards .card{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;max-width:16rem;height:100%;max-height:21.3333333333rem;margin:0 auto;overflow:hidden;color:var(--dark, #000000);font-size:var(--font-size-28, 1.75rem);text-align:center;background-color:var(--stable-light, #f1f1f1);border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:var(--shadow-05, -0.375rem -0.375rem 0.5rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-05, -0.375rem -0.375rem 0.5rem 0 rgba(0, 0, 0, 0.1));-webkit-transition:opacity 0.25s, background-color 0.25s, -webkit-transform 0.25s;transition:opacity 0.25s, background-color 0.25s, -webkit-transform 0.25s;transition:transform 0.25s, opacity 0.25s, background-color 0.25s;transition:transform 0.25s, opacity 0.25s, background-color 0.25s, -webkit-transform 0.25s;will-change:transform, opacity}:host #cards .card:not([direction]){-webkit-transform:translate(0, -5%) scale(0.85);transform:translate(0, -5%) scale(0.85);opacity:0}:host #cards .card.current{z-index:3}:host #cards .card.current:not(.revealing){-webkit-transform:translate(0%, 9%) scale(1);transform:translate(0%, 9%) scale(1);opacity:1;-webkit-transition-delay:200ms;transition-delay:200ms}:host #cards .card.current.revealing{-webkit-animation:\"current\" 0.25s ease-in-out;animation:\"current\" 0.25s ease-in-out;-webkit-animation-delay:150ms;animation-delay:150ms;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes current{to{-webkit-transform:translate(0%, 9%) scale(1);transform:translate(0%, 9%) scale(1);opacity:1}}@keyframes current{to{-webkit-transform:translate(0%, 9%) scale(1);transform:translate(0%, 9%) scale(1);opacity:1}}:host #cards .card.second{z-index:2}:host #cards .card.second:not(.revealing){-webkit-transform:translate(0%, 3.5%) scale(0.95);transform:translate(0%, 3.5%) scale(0.95);opacity:1;-webkit-transition-delay:400ms;transition-delay:400ms}:host #cards .card.second.revealing{-webkit-animation:\"second\" 0.25s ease-in-out;animation:\"second\" 0.25s ease-in-out;-webkit-animation-delay:300ms;animation-delay:300ms;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes second{to{-webkit-transform:translate(0%, 3.5%) scale(0.95);transform:translate(0%, 3.5%) scale(0.95);opacity:1}}@keyframes second{to{-webkit-transform:translate(0%, 3.5%) scale(0.95);transform:translate(0%, 3.5%) scale(0.95);opacity:1}}:host #cards .card.third{z-index:1}:host #cards .card.third:not(.revealing){-webkit-transform:translate(0%, -2%) scale(0.9);transform:translate(0%, -2%) scale(0.9);opacity:1;-webkit-transition-delay:600ms;transition-delay:600ms}:host #cards .card.third.revealing{-webkit-animation:\"third\" 0.25s ease-in-out;animation:\"third\" 0.25s ease-in-out;-webkit-animation-delay:450ms;animation-delay:450ms;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes third{to{-webkit-transform:translate(0%, -2%) scale(0.9);transform:translate(0%, -2%) scale(0.9);opacity:1}}@keyframes third{to{-webkit-transform:translate(0%, -2%) scale(0.9);transform:translate(0%, -2%) scale(0.9);opacity:1}}:host #cards .card.current .content-image,:host #cards .card.current .content-text,:host #cards .card[direction] .content-image,:host #cards .card[direction] .content-text{opacity:1 !important}:host #cards .card[swiped]{-webkit-animation:fade-out 1s ease-out;animation:fade-out 1s ease-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host #cards .card[swiped=left]{-webkit-transform:translate(-100%, 15%) rotate(-15deg);transform:translate(-100%, 15%) rotate(-15deg)}:host #cards .card[swiped=right]{-webkit-transform:translate(100%, 15%) rotate(15deg);transform:translate(100%, 15%) rotate(15deg)}:host #cards .card [class^=content]{position:absolute;width:100%;height:100%;word-break:break-word;opacity:0}:host #cards .card .content-category,:host #cards .card .content-text{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;padding:var(--spacing-16, 1rem)}:host #cards .card .content-image{-webkit-transition:opacity 0.25s linear;transition:opacity 0.25s linear}:host #cards .card[type=image] yoo-img{height:100%}:host #cards .card[type=textimage] .content-image{top:0;bottom:3.5rem}:host #cards .card[type=textimage] .content-image yoo-img{height:calc(100% - 3.5rem)}:host #cards .card[type=textimage] .content-text,:host #cards .card[type=textimage] .content-category{bottom:0;height:3.5rem}:host #actions{position:absolute;left:50%;z-index:1;display:inline-grid;grid-template-columns:1fr 1fr 1fr;width:100%;max-width:85%;line-height:2.5;-webkit-transform:translate(-50%, 80%);transform:translate(-50%, 80%)}:host #actions .action{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;text-align:center}:host([readonly]){display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}:host([readonly]) .category-title{margin-bottom:var(--spacing-08, 0.5rem)}:host([readonly]) ul{display:grid;grid-gap:var(--spacing-16, 1rem);grid-template-columns:repeat(auto-fill, 6rem);margin:0;padding-left:0;list-style:none}:host([readonly]) ul+.category-title{margin-top:var(--spacing-16, 1rem)}:host([readonly]) ul li{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;height:8rem;overflow:hidden;border-style:solid;border-width:var(--border-width-01, 0.0625rem);border-radius:var(--border-radius-08, 0.5rem)}:host([readonly]) ul li.invalid{border-color:var(--danger, #d44333)}:host([readonly]) ul li.invalid yoo-img::before{position:absolute;width:100%;height:100%;background:var(--danger-20, rgba(212, 67, 51, 0.2));content:\"\"}:host([readonly]) ul li.invalid yoo-truncate{background:var(--danger, #d44333)}:host([readonly]) ul li.valid{border-color:var(--success, #3aa76d)}:host([readonly]) ul li.valid yoo-img::before{position:absolute;width:100%;height:100%;background:var(--success-20, rgba(58, 167, 109, 0.2));content:\"\"}:host([readonly]) ul li.valid yoo-truncate{background:var(--success, #3aa76d)}:host([readonly]) ul li yoo-img{position:relative;-ms-flex-positive:1;flex-grow:1}:host([readonly]) ul li yoo-truncate{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:var(--light, #ffffff);font-size:var(--font-size-14, 0.875rem)}:host([readonly]) ul li yoo-truncate:only-child{--max-lines:4;height:100%;padding:0 var(--spacing-08, 0.5rem)}:host([readonly]) ul li yoo-truncate:not(:only-child){--max-lines:1;height:2.125rem;padding:0 var(--spacing-04, 0.25rem)}:host([animated]) #game{-webkit-animation:show 0.5s ease-in-out forwards;animation:show 0.5s ease-in-out forwards}@-webkit-keyframes show{from{-webkit-transform:scale(0.85);transform:scale(0.85);opacity:0}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes show{from{-webkit-transform:scale(0.85);transform:scale(0.85);opacity:0}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}:host([animated]) .action.hide>*{-webkit-animation:fadeOut 0.75s ease-in-out forwards;animation:fadeOut 0.75s ease-in-out forwards}@-webkit-keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}:host([animated]) .action:not(.hide)>*{-webkit-animation:fadeIn 0.75s ease-in-out forwards;animation:fadeIn 0.75s ease-in-out forwards}@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}:host([animated]) .action yoo-button{-webkit-transition:-webkit-transform 0.8s linear;transition:-webkit-transform 0.8s linear;transition:transform 0.8s linear;transition:transform 0.8s linear, -webkit-transform 0.8s linear}:host([live-preview]),:host(.mobile){min-height:70vh}:host([live-preview]) #instructions #header,:host(.mobile) #instructions #header{padding:var(--spacing-16, 1rem);background:var(--dark, #000000);border-radius:var(--border-radius-04, 0.25rem)}:host([live-preview]) #instructions #header #title,:host(.mobile) #instructions #header #title{color:var(--light, #ffffff);font-weight:bold;font-size:var(--font-size-28, 1.75rem)}:host([live-preview]) #instructions yoo-button,:host(.mobile) #instructions yoo-button{position:absolute;bottom:0;width:-webkit-fill-available;width:-moz-available;width:stretch}:host(.web:not([live-preview])) #instructions{position:relative}:host(.web:not([live-preview])) #instructions yoo-icon[name=swipe-explanation]{width:5rem;height:5rem;margin:auto;--inner-width:5rem;--inner-height:5rem}:host(.web:not([live-preview])) #instructions yoo-button{position:fixed;right:var(--spacing-32, 2rem);bottom:var(--spacing-16, 1rem);z-index:1;-webkit-transform:translateY(-50%);transform:translateY(-50%)}:host(.web:not([live-preview])) #game{height:60%;max-height:21rem}:host(.web:not([live-preview])) #game #cards{top:5%;margin-top:unset;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0)}:host(.web:not([live-preview])) #actions{-ms-flex-align:start;align-items:start;max-width:unset;margin-top:2.5%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0)}:host(.web:not([live-preview])) #actions .action:nth-child(2){-ms-flex-item-align:end;align-self:end}:host(.web:not([live-preview])) #header{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);line-height:1.75;text-align:center;background-color:var(--stable-ultralight, #fafafa)}:host(.web:not([live-preview])) #header #title{color:var(--dark, #000000) !important;font-weight:bold;font-size:var(--font-size-28, 1.75rem)}";
|
|
29
29
|
|
|
30
30
|
const YooFormSwipeCardsComponent = class {
|
|
31
31
|
constructor(hostRef) {
|
|
@@ -40,25 +40,23 @@ const YooFormSwipeCardsComponent = class {
|
|
|
40
40
|
this.shuffled = true;
|
|
41
41
|
this.values = [];
|
|
42
42
|
this.swipeCards = [];
|
|
43
|
-
this.animationDelay = this.animated ? .25 : 0;
|
|
44
43
|
this.cardsElements = [];
|
|
45
44
|
this.swipeButtons = [];
|
|
46
45
|
}
|
|
47
46
|
onCategoriesChanged(nv, ov) {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
if (showAlert) {
|
|
52
|
-
this.showInstructionView = true;
|
|
53
|
-
}
|
|
47
|
+
this.hasDataChanged = !lodash.isEqual(nv, ov);
|
|
48
|
+
if (this.hasDataChanged) {
|
|
49
|
+
this.spyOnValuesChanged();
|
|
54
50
|
}
|
|
55
51
|
}
|
|
56
|
-
onValuesChanged() {
|
|
52
|
+
onValuesChanged(nv, ov) {
|
|
53
|
+
this.hasDataChanged = !lodash.isEqual(nv, ov);
|
|
57
54
|
if (!this.isMode.image) {
|
|
58
55
|
this.spyOnValuesChanged();
|
|
59
56
|
}
|
|
60
57
|
}
|
|
61
|
-
onImagesChanged() {
|
|
58
|
+
onImagesChanged(nv, ov) {
|
|
59
|
+
this.hasDataChanged = !lodash.isEqual(nv, ov);
|
|
62
60
|
if (!this.isMode.text) {
|
|
63
61
|
this.spyOnValuesChanged();
|
|
64
62
|
}
|
|
@@ -73,10 +71,11 @@ const YooFormSwipeCardsComponent = class {
|
|
|
73
71
|
setTimeout(() => this.displayFooterElement(!this.showInstructionView), 150);
|
|
74
72
|
}
|
|
75
73
|
get isMode() {
|
|
74
|
+
const { image, text, textimage } = SwipeCardsMode;
|
|
76
75
|
return {
|
|
77
|
-
image: this.mode ===
|
|
78
|
-
textimage: this.mode ===
|
|
79
|
-
text: this.mode ===
|
|
76
|
+
image: this.mode === image,
|
|
77
|
+
textimage: this.mode === textimage,
|
|
78
|
+
text: this.mode === text
|
|
80
79
|
};
|
|
81
80
|
}
|
|
82
81
|
get numberEmptyItems() {
|
|
@@ -99,14 +98,15 @@ const YooFormSwipeCardsComponent = class {
|
|
|
99
98
|
}
|
|
100
99
|
get hasAllCardBeenSwiped() {
|
|
101
100
|
var _a;
|
|
102
|
-
return !((_a = this.swipeCards) === null || _a === void 0 ? void 0 : _a.filter(
|
|
101
|
+
return !((_a = this.swipeCards) === null || _a === void 0 ? void 0 : _a.filter(({ swipedDirection }) => !swipedDirection).length);
|
|
103
102
|
}
|
|
104
103
|
get buttons() {
|
|
105
|
-
const
|
|
104
|
+
const { left, right, undo } = SwipeCardsDirection;
|
|
105
|
+
const getButton = (direction) => { var _a, _b; return (_b = (_a = this.swipeButtons) === null || _a === void 0 ? void 0 : _a.filter(({ id }) => id === `swipe-${direction}`)) === null || _b === void 0 ? void 0 : _b[0]; };
|
|
106
106
|
return {
|
|
107
|
-
left: getButton(
|
|
108
|
-
undo: getButton(
|
|
109
|
-
right: getButton(
|
|
107
|
+
left: getButton(left),
|
|
108
|
+
undo: getButton(undo),
|
|
109
|
+
right: getButton(right)
|
|
110
110
|
};
|
|
111
111
|
}
|
|
112
112
|
get currentCard() {
|
|
@@ -116,12 +116,8 @@ const YooFormSwipeCardsComponent = class {
|
|
|
116
116
|
var _a;
|
|
117
117
|
return this.getCardElement((_a = this.currentCard) === null || _a === void 0 ? void 0 : _a.id);
|
|
118
118
|
}
|
|
119
|
-
get formHeight() {
|
|
120
|
-
var _a;
|
|
121
|
-
return ((_a = overlays.findParent(this.host, 'form')) === null || _a === void 0 ? void 0 : _a.clientHeight) - 1.5 * 16;
|
|
122
|
-
}
|
|
123
119
|
componentWillLoad() {
|
|
124
|
-
this.
|
|
120
|
+
this.prepareGame();
|
|
125
121
|
}
|
|
126
122
|
componentDidLoad() {
|
|
127
123
|
this.initGame();
|
|
@@ -139,17 +135,15 @@ const YooFormSwipeCardsComponent = class {
|
|
|
139
135
|
this.validityChanged.emit(this.validity);
|
|
140
136
|
return this.validity;
|
|
141
137
|
}
|
|
142
|
-
|
|
138
|
+
prepareGame() {
|
|
143
139
|
this.shuffleCardValues();
|
|
140
|
+
this.animationDelay = this.animated ? .25 : 0;
|
|
144
141
|
this.revealCards = !this.showInstructionView;
|
|
145
142
|
this.swipeCards = this.initCards();
|
|
146
143
|
}
|
|
147
144
|
initGame() {
|
|
148
145
|
this.displayFooterElement(false);
|
|
149
|
-
|
|
150
|
-
this.initDraggable();
|
|
151
|
-
}
|
|
152
|
-
this.showWarnings();
|
|
146
|
+
!this.showInstructionView && this.initDraggable();
|
|
153
147
|
}
|
|
154
148
|
updateCardsData() {
|
|
155
149
|
if (this.hasDataChanged) {
|
|
@@ -176,7 +170,7 @@ const YooFormSwipeCardsComponent = class {
|
|
|
176
170
|
return (_a = this.cardsElements) === null || _a === void 0 ? void 0 : _a.find((cardElement) => (cardElement === null || cardElement === void 0 ? void 0 : cardElement.id) === id);
|
|
177
171
|
}
|
|
178
172
|
spyOnValuesChanged() {
|
|
179
|
-
this.showWarnings();
|
|
173
|
+
this.hasDataChanged && this.showWarnings();
|
|
180
174
|
}
|
|
181
175
|
showWarnings() {
|
|
182
176
|
var _a;
|
|
@@ -209,7 +203,7 @@ const YooFormSwipeCardsComponent = class {
|
|
|
209
203
|
return value;
|
|
210
204
|
};
|
|
211
205
|
const getValuesFromDirection = (direction) => this.swipeCards.filter(c => c.swipedDirection === direction).map(c => formatCardValue(c.value));
|
|
212
|
-
formInputHelpers.setValueAndValidateInput([
|
|
206
|
+
this.livePreview ? index.forceUpdate(this) : formInputHelpers.setValueAndValidateInput([
|
|
213
207
|
getValuesFromDirection(SwipeCardsDirection.left),
|
|
214
208
|
getValuesFromDirection(SwipeCardsDirection.right)
|
|
215
209
|
], this);
|
|
@@ -262,9 +256,11 @@ const YooFormSwipeCardsComponent = class {
|
|
|
262
256
|
}
|
|
263
257
|
setSwipingColor(swipingDirection) {
|
|
264
258
|
if (this.currentCardElement) {
|
|
259
|
+
const { left, right } = SwipeCardsDirection;
|
|
260
|
+
const [categoryLeft, categoryRight] = this.categories;
|
|
265
261
|
const categoryContainer = this.currentCardElement.querySelector('.content-category');
|
|
266
|
-
const isThrowable = [
|
|
267
|
-
categoryContainer.textContent =
|
|
262
|
+
const isThrowable = [left, right].includes(swipingDirection);
|
|
263
|
+
categoryContainer.textContent = overlays.translateMulti(swipingDirection === left ? categoryLeft : swipingDirection === right ? categoryRight : '');
|
|
268
264
|
[this.gameContainerElement, this.currentCardElement].forEach(e => {
|
|
269
265
|
isThrowable ? e.setAttribute('direction', swipingDirection) : e.removeAttribute('direction');
|
|
270
266
|
});
|
|
@@ -280,13 +276,13 @@ const YooFormSwipeCardsComponent = class {
|
|
|
280
276
|
const returnedAnimation = timeline();
|
|
281
277
|
// building swiping animation
|
|
282
278
|
const swipeAnimation = timeline({ paused: true });
|
|
283
|
-
const isSwipeable =
|
|
279
|
+
const isSwipeable = el => el.classList.contains('current');
|
|
284
280
|
swipeAnimation
|
|
285
281
|
.fromTo(this.buttons.left, 1, { scale: 1.5 }, { scale: 1 }, 0)
|
|
286
282
|
.fromTo(this.buttons.right, 1, { scale: 1 }, { scale: 1.5 }, 1)
|
|
287
283
|
.progress(.5);
|
|
288
|
-
const onStartSwiping = (
|
|
289
|
-
if (isSwipeable(
|
|
284
|
+
const onStartSwiping = () => {
|
|
285
|
+
if (isSwipeable(cardElement)) {
|
|
290
286
|
this.blockMoves.emit(true);
|
|
291
287
|
returnedAnimation === null || returnedAnimation === void 0 ? void 0 : returnedAnimation.kill();
|
|
292
288
|
}
|
|
@@ -298,33 +294,35 @@ const YooFormSwipeCardsComponent = class {
|
|
|
298
294
|
this.setSwipingColor(this.getSwipedState(swipeProgress).swipedDirection);
|
|
299
295
|
}
|
|
300
296
|
};
|
|
301
|
-
const onThrowing = (
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
297
|
+
const onThrowing = () => {
|
|
298
|
+
const baseProps = { left: 0, top: 0 };
|
|
299
|
+
if (isSwipeable(cardElement)) {
|
|
300
|
+
const { isCardThrowable, swipedDirection } = this.getSwipedState(swipeAnimation.progress());
|
|
301
|
+
!isCardThrowable ?
|
|
305
302
|
returnedAnimation
|
|
306
|
-
.to(cardElement, this.animationDelay,
|
|
303
|
+
.to(cardElement, this.animationDelay, baseProps)
|
|
307
304
|
.to([this.buttons.left, this.buttons.right], { scale: 1, ease: overlays.Power1.easeInOut }, 0) :
|
|
308
|
-
this.swipeCard(
|
|
305
|
+
this.swipeCard(swipedDirection);
|
|
309
306
|
}
|
|
310
307
|
else {
|
|
311
|
-
overlays.gsapTo(cardElement, this.animationDelay,
|
|
308
|
+
overlays.gsapTo(cardElement, this.animationDelay, baseProps);
|
|
312
309
|
}
|
|
310
|
+
this.blockMoves.emit(false);
|
|
313
311
|
};
|
|
314
312
|
return (new overlays.Draggable(cardElement, {
|
|
315
313
|
bound: this.host,
|
|
316
314
|
type: 'left, top',
|
|
317
315
|
cursor: 'grab',
|
|
318
316
|
zIndexBoost: false,
|
|
319
|
-
onDragStart()
|
|
317
|
+
onDragStart: () => onStartSwiping(),
|
|
320
318
|
onDrag() { onSwiping(this); },
|
|
321
|
-
onDragEnd()
|
|
319
|
+
onDragEnd: () => onThrowing()
|
|
322
320
|
}));
|
|
323
321
|
}
|
|
324
322
|
clickToSwipe(clickedDirection) {
|
|
325
323
|
if (!this.buttons[clickedDirection].disabled) {
|
|
326
324
|
this.setSwipingColor(clickedDirection);
|
|
327
|
-
|
|
325
|
+
this.swipeCard(clickedDirection);
|
|
328
326
|
}
|
|
329
327
|
}
|
|
330
328
|
async undoSwipe() {
|
|
@@ -343,22 +341,20 @@ const YooFormSwipeCardsComponent = class {
|
|
|
343
341
|
}
|
|
344
342
|
}
|
|
345
343
|
}
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
}
|
|
350
|
-
renderStack() {
|
|
351
|
-
return index.h("section", { id: "stack" }, this.swipeCards.map((card, i, s) => {
|
|
352
|
-
var _a;
|
|
353
|
-
const currentCardIndex = s.indexOf(this.currentCard) || 0;
|
|
344
|
+
renderCards() {
|
|
345
|
+
return index.h("section", { id: "cards" }, this.swipeCards.map(({ swipedDirection, value, id }, i, s) => {
|
|
346
|
+
const currentCardIndex = s.indexOf(this.currentCard);
|
|
354
347
|
const hasCurrentCard = currentCardIndex !== -1;
|
|
355
|
-
return index.h("
|
|
348
|
+
return index.h("div", { id: id, class: {
|
|
356
349
|
card: true,
|
|
357
350
|
current: i === currentCardIndex,
|
|
358
351
|
second: hasCurrentCard && i === currentCardIndex + 1,
|
|
359
352
|
third: hasCurrentCard && i === currentCardIndex + 2,
|
|
360
353
|
revealing: this.revealCards
|
|
361
|
-
},
|
|
354
|
+
}, ref: el => this.cardsElements[i] = el, ...{
|
|
355
|
+
type: this.mode,
|
|
356
|
+
...(swipedDirection && { direction: swipedDirection })
|
|
357
|
+
} }, this.hasImage && (index.h("div", { class: "content-image" }, index.h("yoo-img", { instant: true, src: overlays.getMedia(value['_downloadURL']) }))), this.hasText && (index.h("div", { class: "content-text" }, overlays.translateMulti((value === null || value === void 0 ? void 0 : value['_filename']) || value))), index.h("div", { class: "content-category" }));
|
|
362
358
|
}));
|
|
363
359
|
}
|
|
364
360
|
renderInstructionCategory(side) {
|
|
@@ -367,10 +363,10 @@ const YooFormSwipeCardsComponent = class {
|
|
|
367
363
|
const iconColor = overlays.isWeb(this.host) ? categoryColor : 'light';
|
|
368
364
|
const iconSize = overlays.isWeb(this.host) ? 'large' : 'medium';
|
|
369
365
|
const category = this.categories && overlays.translateMulti(isLeftCategory ? this.categories[0] : this.categories[1]);
|
|
370
|
-
return index.h("div", { class:
|
|
366
|
+
return index.h("div", { class: { category: true, [side]: true } }, index.h("yoo-tag", { noBackground: overlays.isWeb(this.host), color: categoryColor, size: "large", icon: `big-arrow-${side}`, iconOnlyColor: iconColor, iconOnlySize: iconSize }), index.h("p", { class: `${categoryColor}` }, category), index.h("span", { class: "stable" }, overlays.translate(`SWIPE${side.toUpperCase()}`)));
|
|
371
367
|
}
|
|
372
368
|
renderTopDescription() {
|
|
373
|
-
return index.h("div", { id: "header" }, index.h("
|
|
369
|
+
return index.h("div", { id: "header" }, index.h("span", { id: "title", innerHTML: overlays.translateMulti(this.label) }), index.h("span", { class: "stable" }, overlays.translate(this.description || 'CARDSWIPEDEFAULTINSTRUCTIONS')));
|
|
374
370
|
}
|
|
375
371
|
renderInstructions() {
|
|
376
372
|
return (index.h("section", { id: "instructions" }, this.renderTopDescription(), index.h("section", { id: "categories" }, this.renderInstructionCategory(SwipeCardsDirection.left), index.h("yoo-icon", { size: "extra-extra-large", name: "swipe-explanation", color: "stable-alt" }), this.renderInstructionCategory(SwipeCardsDirection.right)), this.instructionsDocument && (index.h("section", { id: "document" }, index.h("div", { class: "document-title" }, overlays.translate('ATTACHMENTS')), index.h("yoo-form-document", { document: this.instructionsDocument, readonly: true, onInputChanged: (ev) => ev.stopPropagation() }))), index.h("yoo-button", { disabled: !(this.hasTwoCategories && !this.hasDuplicatesValues), size: (overlays.isWeb(this.host) && !this.livePreview) ? 'medium' : 'large', color: "app-color", onClick: () => {
|
|
@@ -380,7 +376,8 @@ const YooFormSwipeCardsComponent = class {
|
|
|
380
376
|
} }, overlays.translate('START'))));
|
|
381
377
|
}
|
|
382
378
|
renderSwipeButtons() {
|
|
383
|
-
|
|
379
|
+
const { left, undo, right } = SwipeCardsDirection;
|
|
380
|
+
return index.h("section", { id: "actions" }, [left, undo, right].map((d, i) => this.renderSwipeAction(d, i)));
|
|
384
381
|
}
|
|
385
382
|
renderSwipeAction(direction, index$1) {
|
|
386
383
|
var _a;
|
|
@@ -390,15 +387,15 @@ const YooFormSwipeCardsComponent = class {
|
|
|
390
387
|
const actionColor = isUndo ? overlays.isWeb(this.host) ? 'light' : 'stable-alt' : isLeft ? 'app-color' : 'warning';
|
|
391
388
|
const swipeIcon = isUndo ? 'undo' : `big-arrow-${direction}`;
|
|
392
389
|
const categoryIndex = isLeft ? 0 : 1;
|
|
393
|
-
return (index.h("div", { class: {
|
|
390
|
+
return (index.h("div", { class: { action: true, hide: this.hasAllCardBeenSwiped && !isUndo } }, index.h("yoo-button", { shape: "circular", rippleType: "unbounded", id: `swipe-${direction}`, size: (isUndo && !isMobile) ? 'medium' : 'large', fill: (isMobile || isUndo) ? 'solid' : 'transparent', color: isUndo ? isMobile ? 'stable-light' : 'text-color' : actionColor.concat('-20'), ref: (element) => (this.swipeButtons[index$1] = element), onClick: () => isUndo ? this.undoSwipe() : this.clickToSwipe(direction) }, index.h("yoo-icon", { name: swipeIcon, color: actionColor, size: isMobile ? 'medium' : isUndo ? 'small' : 'large' })), !isUndo && ((_a = this.categories) === null || _a === void 0 ? void 0 : _a.length) && index.h("span", { class: actionColor }, overlays.translateMulti(this.categories[categoryIndex]))));
|
|
394
391
|
}
|
|
395
392
|
renderEndGameMessage() {
|
|
396
|
-
return index.h("section", { id: "end-message", class: {
|
|
393
|
+
return index.h("section", { id: "end-message", class: { active: this.hasAllCardBeenSwiped } }, index.h("yoo-lottie", { autoplay: this.hasAllCardBeenSwiped, type: "check" }), index.h("div", { innerHTML: overlays.translate('ENDSWIPINGCARDSMESSAGE') }), index.h("span", null, overlays.translate('CLICKTOCONTINUE', { buttonName: this.nextButtonText })));
|
|
397
394
|
}
|
|
398
|
-
|
|
395
|
+
renderGame() {
|
|
399
396
|
return [
|
|
400
397
|
overlays.isWeb(this.host) && !this.livePreview && this.renderTopDescription(),
|
|
401
|
-
index.h("section", { id: "game", ref: (element) => (this.gameContainerElement = element) }, this.renderEndGameMessage(), this.
|
|
398
|
+
index.h("section", { id: "game", ref: (element) => (this.gameContainerElement = element) }, this.renderEndGameMessage(), this.renderCards()),
|
|
402
399
|
this.renderSwipeButtons()
|
|
403
400
|
];
|
|
404
401
|
}
|
|
@@ -423,7 +420,7 @@ const YooFormSwipeCardsComponent = class {
|
|
|
423
420
|
return this.livePreview && index.h("yoo-banner", null, index.h("p", { slot: "content" }));
|
|
424
421
|
}
|
|
425
422
|
render() {
|
|
426
|
-
return (index.h(index.Host, {
|
|
423
|
+
return (index.h(index.Host, { class: { ...commonHelpers.getAppContext(this.host), 'swiper-no-swiping': !this.readonly, instructions: this.showInstructionView } }, this.renderBanner(), !this.readonly && (this.showInstructionView ? this.renderInstructions() : this.renderGame()), this.readonly && this.renderSummary()));
|
|
427
424
|
}
|
|
428
425
|
get host() { return index.getElement(this); }
|
|
429
426
|
static get watchers() { return {
|