@testgorilla/tgo-immersive-test 4.0.2 → 4.1.0
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.
|
@@ -79,8 +79,8 @@ class VideoCountdownComponent {
|
|
|
79
79
|
};
|
|
80
80
|
}
|
|
81
81
|
}
|
|
82
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
83
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
82
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: VideoCountdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
83
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: VideoCountdownComponent, isStandalone: true, selector: "tgo-video-countdown", inputs: { startFrom: "startFrom", endAt: "endAt", interval: "interval" }, outputs: { finished: "finished" }, ngImport: i0, template: "<div class=\"video-countdown\">\n <div\n class=\"video-countdown-element\"\n *ngFor=\"let num of [displayNum]\"\n @zoomInOut\n >\n {{ num.value }}\n </div>\n</div>\n\n", styles: [".video-countdown{display:flex;justify-content:center}.video-countdown-element{position:absolute;font-size:80px;font-weight:700;line-height:1;-webkit-user-select:none;user-select:none;opacity:1;backface-visibility:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
|
|
84
84
|
trigger('zoomInOut', [
|
|
85
85
|
transition(':enter', [
|
|
86
86
|
style({ transform: 'scale(0)', opacity: 0 }),
|
|
@@ -95,7 +95,7 @@ class VideoCountdownComponent {
|
|
|
95
95
|
]),
|
|
96
96
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
97
97
|
}
|
|
98
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
98
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: VideoCountdownComponent, decorators: [{
|
|
99
99
|
type: Component,
|
|
100
100
|
args: [{ selector: 'tgo-video-countdown', animations: [
|
|
101
101
|
trigger('zoomInOut', [
|
|
@@ -151,10 +151,10 @@ class RingingPhoneAnimationComponent {
|
|
|
151
151
|
this.audio.volume = 0.15;
|
|
152
152
|
void this.audio.play();
|
|
153
153
|
}
|
|
154
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
155
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
154
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: RingingPhoneAnimationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
155
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: RingingPhoneAnimationComponent, isStandalone: true, selector: "tgo-ringing-phone-animation", inputs: { isRinging: "isRinging" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ringing-phone-animation-wrapper\">\n <section class=\"ringing-phone-animation-container\">\n <div class=\"ringing-effect\" *ngIf=\"ringingSignal()\">\n <div class=\"ringing-line first-line\"></div>\n <div class=\"ringing-line second-line\"></div>\n <div class=\"ringing-line third-line\"></div>\n </div>\n <svg width=\"76\" height=\"30\" viewBox=\"0 0 76 30\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M9.33348 28.5122L1.66681 21.0122C1.00014 20.3455 0.666809 19.5678 0.666809 18.6789C0.666809 17.79 1.00014 17.0122 1.66681 16.3455C6.5557 11.0678 12.1946 7.10943 18.5835 4.47054C24.9724 1.83165 31.4446 0.512207 38.0001 0.512207C44.5557 0.512207 51.014 1.83165 57.3751 4.47054C63.7363 7.10943 69.389 11.0678 74.3335 16.3455C75.0001 17.0122 75.3335 17.79 75.3335 18.6789C75.3335 19.5678 75.0001 20.3455 74.3335 21.0122L66.6668 28.5122C66.0557 29.1233 65.3474 29.4567 64.5418 29.5122C63.7363 29.5678 63.0001 29.3455 62.3335 28.8455L52.6668 21.5122C52.2224 21.1789 51.889 20.79 51.6668 20.3455C51.4446 19.9011 51.3335 19.4011 51.3335 18.8455V9.34554C49.2224 8.67888 47.0557 8.1511 44.8335 7.76221C42.6113 7.37332 40.3335 7.17887 38.0001 7.17887C35.6668 7.17887 33.389 7.37332 31.1668 7.76221C28.9446 8.1511 26.7779 8.67888 24.6668 9.34554V18.8455C24.6668 19.4011 24.5557 19.9011 24.3335 20.3455C24.1113 20.79 23.7779 21.1789 23.3335 21.5122L13.6668 28.8455C13.0001 29.3455 12.264 29.5678 11.4585 29.5122C10.6529 29.4567 9.94459 29.1233 9.33348 28.5122ZM18.0001 11.6789C16.389 12.5122 14.8335 13.4705 13.3335 14.5539C11.8335 15.6372 10.2779 16.8455 8.66681 18.1789L12.0001 21.5122L18.0001 16.8455V11.6789ZM58.0001 11.8455V16.8455L64.0001 21.5122L67.3335 18.3455C65.7224 16.9011 64.1668 15.6511 62.6668 14.5955C61.1668 13.54 59.6113 12.6233 58.0001 11.8455Z\"\n fill=\"white\"\n />\n </svg>\n </section>\n</div>\n\n", styles: [".ringing-phone-animation-wrapper{display:flex;justify-content:center;align-items:center}.ringing-phone-animation-wrapper .ringing-phone-animation-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.ringing-phone-animation-wrapper .ringing-phone-animation-container .ringing-effect{display:flex;gap:15px;opacity:1;animation:blink-wrapper 1.4s infinite;animation-delay:.8s}.ringing-phone-animation-wrapper .ringing-phone-animation-container .ringing-effect .ringing-line{width:6px;height:16px;background-color:#fff;opacity:0}.ringing-phone-animation-wrapper .ringing-phone-animation-container .ringing-effect .first-line{animation:blink-line 1.4s infinite;animation-delay:.1s;transform:rotate(-45deg)}.ringing-phone-animation-wrapper .ringing-phone-animation-container .ringing-effect .second-line{animation:blink-line 1.4s infinite;animation-delay:.3s;transform:translateY(-50%)}.ringing-phone-animation-wrapper .ringing-phone-animation-container .ringing-effect .third-line{animation:blink-line 1.4s infinite;animation-delay:.6s;transform:rotate(45deg)}.ringing-phone-animation-wrapper .ringing-phone-animation-container .answer-btn{margin-top:20px;padding:10px 20px;background-color:#fff;border:none;border-radius:20px;cursor:pointer;font-size:16px}@keyframes blink-line{0%,49%{opacity:0}50%,to{opacity:1}}@keyframes blink-wrapper{0%,49%{opacity:1}50%,to{opacity:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
156
156
|
}
|
|
157
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
157
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: RingingPhoneAnimationComponent, decorators: [{
|
|
158
158
|
type: Component,
|
|
159
159
|
args: [{ selector: 'tgo-ringing-phone-animation', imports: [CommonModule], template: "<div class=\"ringing-phone-animation-wrapper\">\n <section class=\"ringing-phone-animation-container\">\n <div class=\"ringing-effect\" *ngIf=\"ringingSignal()\">\n <div class=\"ringing-line first-line\"></div>\n <div class=\"ringing-line second-line\"></div>\n <div class=\"ringing-line third-line\"></div>\n </div>\n <svg width=\"76\" height=\"30\" viewBox=\"0 0 76 30\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M9.33348 28.5122L1.66681 21.0122C1.00014 20.3455 0.666809 19.5678 0.666809 18.6789C0.666809 17.79 1.00014 17.0122 1.66681 16.3455C6.5557 11.0678 12.1946 7.10943 18.5835 4.47054C24.9724 1.83165 31.4446 0.512207 38.0001 0.512207C44.5557 0.512207 51.014 1.83165 57.3751 4.47054C63.7363 7.10943 69.389 11.0678 74.3335 16.3455C75.0001 17.0122 75.3335 17.79 75.3335 18.6789C75.3335 19.5678 75.0001 20.3455 74.3335 21.0122L66.6668 28.5122C66.0557 29.1233 65.3474 29.4567 64.5418 29.5122C63.7363 29.5678 63.0001 29.3455 62.3335 28.8455L52.6668 21.5122C52.2224 21.1789 51.889 20.79 51.6668 20.3455C51.4446 19.9011 51.3335 19.4011 51.3335 18.8455V9.34554C49.2224 8.67888 47.0557 8.1511 44.8335 7.76221C42.6113 7.37332 40.3335 7.17887 38.0001 7.17887C35.6668 7.17887 33.389 7.37332 31.1668 7.76221C28.9446 8.1511 26.7779 8.67888 24.6668 9.34554V18.8455C24.6668 19.4011 24.5557 19.9011 24.3335 20.3455C24.1113 20.79 23.7779 21.1789 23.3335 21.5122L13.6668 28.8455C13.0001 29.3455 12.264 29.5678 11.4585 29.5122C10.6529 29.4567 9.94459 29.1233 9.33348 28.5122ZM18.0001 11.6789C16.389 12.5122 14.8335 13.4705 13.3335 14.5539C11.8335 15.6372 10.2779 16.8455 8.66681 18.1789L12.0001 21.5122L18.0001 16.8455V11.6789ZM58.0001 11.8455V16.8455L64.0001 21.5122L67.3335 18.3455C65.7224 16.9011 64.1668 15.6511 62.6668 14.5955C61.1668 13.54 59.6113 12.6233 58.0001 11.8455Z\"\n fill=\"white\"\n />\n </svg>\n </section>\n</div>\n\n", styles: [".ringing-phone-animation-wrapper{display:flex;justify-content:center;align-items:center}.ringing-phone-animation-wrapper .ringing-phone-animation-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.ringing-phone-animation-wrapper .ringing-phone-animation-container .ringing-effect{display:flex;gap:15px;opacity:1;animation:blink-wrapper 1.4s infinite;animation-delay:.8s}.ringing-phone-animation-wrapper .ringing-phone-animation-container .ringing-effect .ringing-line{width:6px;height:16px;background-color:#fff;opacity:0}.ringing-phone-animation-wrapper .ringing-phone-animation-container .ringing-effect .first-line{animation:blink-line 1.4s infinite;animation-delay:.1s;transform:rotate(-45deg)}.ringing-phone-animation-wrapper .ringing-phone-animation-container .ringing-effect .second-line{animation:blink-line 1.4s infinite;animation-delay:.3s;transform:translateY(-50%)}.ringing-phone-animation-wrapper .ringing-phone-animation-container .ringing-effect .third-line{animation:blink-line 1.4s infinite;animation-delay:.6s;transform:rotate(45deg)}.ringing-phone-animation-wrapper .ringing-phone-animation-container .answer-btn{margin-top:20px;padding:10px 20px;background-color:#fff;border:none;border-radius:20px;cursor:pointer;font-size:16px}@keyframes blink-line{0%,49%{opacity:0}50%,to{opacity:1}}@keyframes blink-wrapper{0%,49%{opacity:1}50%,to{opacity:0}}\n"] }]
|
|
160
160
|
}], propDecorators: { isRinging: [{
|
|
@@ -185,8 +185,8 @@ class ReviewInstructionsDialogComponent {
|
|
|
185
185
|
this.translations = await firstValueFrom(this.translocoService.selectTranslateObject(`INSTRUCTIONS_MODAL`, {}, this.translationScope));
|
|
186
186
|
this.cdr.markForCheck();
|
|
187
187
|
}
|
|
188
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
189
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
188
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ReviewInstructionsDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: TRANSLOCO_SCOPE }, { token: i1$1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
189
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: ReviewInstructionsDialogComponent, isStandalone: true, selector: "tgo-review-instructions-dialog", providers: [
|
|
190
190
|
TranslocoLazyModuleUtils.getScopeProvider('tgo-immersive-test-review-instructions', getAvailableLangs(), 'INSTRUCTIONS_MODAL', (lang) => {
|
|
191
191
|
// Fetch from app assets; demo app copies the library assets to
|
|
192
192
|
// /assets/tgo-immersive-test via project.json.
|
|
@@ -195,7 +195,7 @@ class ReviewInstructionsDialogComponent {
|
|
|
195
195
|
}),
|
|
196
196
|
], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n <ui-dialog\n class=\"dialog-wrapper\"\n [title]=\"translations['TITLE']\"\n [secondaryButtonLabel]=\"translations['CLOSE']\"\n (secondaryButtonClickEvent)=\"closeDialog()\"\n >\n <section class=\"containers-section\">\n <div class=\"immersive-test-instructions-container\">\n <div\n class=\"background-information-container\"\n *ngIf=\"dialogData?.backgroundInfoData\"\n >\n <ui-card class=\"background-information-card\" variant=\"neutral\">\n <quill-view\n theme=\"snow\"\n [content]=\"dialogData?.backgroundInfoData\"\n class=\"content-container notranslate\"\n ></quill-view>\n </ui-card>\n </div>\n\n <div\n class=\"inner-instructions-container\"\n *ngIf=\"dialogData?.instructionsInfoData\"\n >\n <ui-card class=\"instructions-card\" variant=\"educative\">\n <quill-view\n theme=\"snow\"\n [content]=\"dialogData?.instructionsInfoData\"\n class=\"content-container notranslate\"\n ></quill-view>\n </ui-card>\n </div>\n </div>\n </section>\n </ui-dialog>\n</ng-container>\n\n", styles: ["@charset \"UTF-8\";:host .dialog-wrapper{width:100%}:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section{width:100%;display:flex;flex-direction:column;justify-content:center;padding:.3rem .8rem}:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container{display:flex;justify-content:space-between;width:100%;gap:2.5rem}:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .background-information-container{display:flex;flex-direction:column;width:100%;max-width:450px}:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .background-information-container .background-information-card .content-container .ql-container .ql-editor{padding:0}:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .background-information-container .background-information-card .content-container .ql-container .ql-editor h1,:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .background-information-container .background-information-card .content-container .ql-container .ql-editor h2,:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .background-information-container .background-information-card .content-container .ql-container .ql-editor h3,:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .background-information-container .background-information-card .content-container .ql-container .ql-editor h4,:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .background-information-container .background-information-card .content-container .ql-container .ql-editor h5,:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .background-information-container .background-information-card .content-container .ql-container .ql-editor h6{font-size:16px;font-weight:700;line-height:20px;margin-bottom:.6rem}:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .background-information-container .background-information-card .content-container .ql-container .ql-editor p,:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .background-information-container .background-information-card .content-container .ql-container .ql-editor span{font-size:14px;margin-bottom:1.5rem}:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .background-information-container .background-information-card .content-container .ql-container .ql-editor p:last-child,:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .background-information-container .background-information-card .content-container .ql-container .ql-editor span:last-child{margin-bottom:0}:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .background-information-container .background-information-card .content-container .ql-container .ql-editor br{display:none}:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .inner-instructions-container{display:flex;flex-direction:column;gap:2.5rem;width:100%;max-width:450px}:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .inner-instructions-container .instructions-card .card-container{border-width:1px}:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .inner-instructions-container .instructions-card .card-container .ql-container .ql-editor{padding:0}:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .inner-instructions-container .instructions-card .card-container .ql-container .ql-editor h1,:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .inner-instructions-container .instructions-card .card-container .ql-container .ql-editor h2,:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .inner-instructions-container .instructions-card .card-container .ql-container .ql-editor h3,:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .inner-instructions-container .instructions-card .card-container .ql-container .ql-editor h4,:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .inner-instructions-container .instructions-card .card-container .ql-container .ql-editor h5,:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .inner-instructions-container .instructions-card .card-container .ql-container .ql-editor h6{font-size:16px;font-weight:700;line-height:20px;margin-bottom:.6rem}:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .inner-instructions-container .instructions-card .card-container .ql-container .ql-editor p:before,:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .inner-instructions-container .instructions-card .card-container .ql-container .ql-editor span:before{content:\"\\2022 \";color:#000;font-size:1em;position:absolute;left:8px;top:0}:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .inner-instructions-container .instructions-card .card-container .ql-container .ql-editor p,:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .inner-instructions-container .instructions-card .card-container .ql-container .ql-editor span{position:relative;font-size:14px;padding-left:22px;margin:3px 0 0}:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .inner-instructions-container .instructions-card .card-container .ql-container .ql-editor ul,:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .inner-instructions-container .instructions-card .card-container .ql-container .ql-editor ol{padding-left:10px;margin:5px 0 0}:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .inner-instructions-container .instructions-card .card-container .ql-container .ql-editor ul li,:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .inner-instructions-container .instructions-card .card-container .ql-container .ql-editor ol li{font-size:14px;padding-left:0}:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .inner-instructions-container .instructions-card .card-container .ql-container .ql-editor ul li span:before,:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .inner-instructions-container .instructions-card .card-container .ql-container .ql-editor ol li span:before{top:-3px}:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .inner-instructions-container .instructions-card .card-container .ql-container .ql-editor ul li span,:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .inner-instructions-container .instructions-card .card-container .ql-container .ql-editor ol li span{padding-left:12px}:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .inner-instructions-container .instructions-card .card-container .ql-container .ql-editor br{display:none}@media (max-width: 799px){:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section{padding-top:0}:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container{flex-wrap:wrap}:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .background-information-container{max-width:none}:host .dialog-wrapper ::ng-deep .mat-mdc-dialog-content .containers-section .immersive-test-instructions-container .inner-instructions-container{max-width:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: DialogComponentModule }, { kind: "component", type: i4.DialogComponent, selector: "ui-dialog", inputs: ["title", "showCloseButton", "canCloseFn", "secondaryButtonLabel", "footerMessage", "primaryButtonLabel", "primaryButtonIconName", "secondaryButtonType", "primaryButtonType", "primaryButtonDataTestId", "secondaryButtonDataTestId", "companyColor", "applicationTheme", "disablePrimaryButton", "disableClose", "shouldDisableButtons", "ariaLabelledby", "ariaDescribedby", "keyboardOpen", "primaryButtonIconPosition"], outputs: ["closeEvent", "secondaryButtonClickEvent", "primaryButtonClickEvent"] }, { kind: "ngmodule", type: CardComponentModule }, { kind: "component", type: i5.CardComponent, selector: "ui-card", inputs: ["size", "sizeVariant", "variant", "applicationTheme", "errors", "errorsSize", "selected", "allowSelect", "allowFocus"], outputs: ["cardSelected"] }, { kind: "component", type: QuillViewComponent, selector: "quill-view", inputs: ["format", "theme", "modules", "debug", "formats", "sanitize", "beforeRender", "strict", "content", "customModules", "customOptions"], outputs: ["onEditorCreated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
197
197
|
}
|
|
198
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
198
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ReviewInstructionsDialogComponent, decorators: [{
|
|
199
199
|
type: Component,
|
|
200
200
|
args: [{ selector: 'tgo-review-instructions-dialog', providers: [
|
|
201
201
|
TranslocoLazyModuleUtils.getScopeProvider('tgo-immersive-test-review-instructions', getAvailableLangs(), 'INSTRUCTIONS_MODAL', (lang) => {
|
|
@@ -391,8 +391,8 @@ class ImmersiveTestComponent {
|
|
|
391
391
|
void this.initVideoStream();
|
|
392
392
|
});
|
|
393
393
|
}
|
|
394
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
395
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
394
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImmersiveTestComponent, deps: [{ token: TRANSLOCO_SCOPE }], target: i0.ɵɵFactoryTarget.Component });
|
|
395
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: ImmersiveTestComponent, isStandalone: true, selector: "tgo-immersive-test", inputs: { question: "question", test: "test", isFirstQuestion: "isFirstQuestion", expirationObservable: "expirationObservable", selectedMediaDevices: "selectedMediaDevices", mediaAccessChanged: "mediaAccessChanged" }, outputs: { submissionStateChanged: "submissionStateChanged", loadingStateChanged: "loadingStateChanged", requestMediaAccess: "requestMediaAccess" }, providers: [
|
|
396
396
|
TranslocoLazyModuleUtils.getScopeProvider('tgo-immersive-test', getAvailableLangs(), ROOT_TRANSLATIONS_SCOPE, (lang) => {
|
|
397
397
|
// Fetch from app assets; demo app copies the library assets to
|
|
398
398
|
// /assets/tgo-immersive-test via project.json.
|
|
@@ -402,14 +402,14 @@ class ImmersiveTestComponent {
|
|
|
402
402
|
DialogService,
|
|
403
403
|
SnackbarService,
|
|
404
404
|
ThemeService,
|
|
405
|
-
], viewQueries: [{ propertyName: "videoElement", first: true, predicate: ["video"], descendants: true }, { propertyName: "audioElement", first: true, predicate: ["audio"], descendants: true }], ngImport: i0, template: "<div class=\"immersive-test\">\n <div class=\"test-container\">\n <div\n class=\"media-container\"\n [class.is-video-visible]=\"isQuestionPlaying() && !isAnswering()\"\n [class.is-playing]=\"isVideoPlaying()\"\n [class.is-answering]=\"isAnswering()\"\n >\n <div class=\"candidate-no-camera\" *ngIf=\"!candidateVideoStreamReady()\">\n <h3> </h3>\n <tgo-audio-animation\n *ngIf=\"isAnswering()\"\n [volume]=\"volume()\"\n [fakeData]=\"false\"\n ></tgo-audio-animation>\n <ui-icon name=\"User-profile-in-line\" color=\"white\" size=\"24\"></ui-icon>\n <h3 class=\"bold\">{{ translations['YOU'] }}</h3>\n </div>\n <div class=\"candidate-camera\" [hidden]=\"!candidateVideoStreamReady()\">\n <tgo-audio-animation\n *ngIf=\"isAnswering() && candidateVideoStreamReady()\"\n [volume]=\"volume()\"\n [fakeData]=\"false\"\n ></tgo-audio-animation>\n <video height #video id=\"video\" playsinline (loadedmetadata)=\"onVideoLoad()\"></video>\n <h3 class=\"bold\" *ngIf=\"candidateVideoStreamReady()\">\n {{ translations['YOU'] }}\n </h3>\n </div>\n <tgo-audio-animation *ngIf=\"isVideoPlaying()\" [fakeData]=\"true\"></tgo-audio-animation>\n <tgo-vimeo-video\n *ngIf=\"isVideo\"\n [isPlaying]=\"isQuestionPlaying()\"\n [videoUrl]=\"fileUrl\"\n (videoEnded)=\"startCountdown()\"\n (videoStarted)=\"isVideoPlaying.set(true)\"\n (videoError)=\"onVideoError($event)\"\n ></tgo-vimeo-video>\n <div class=\"audio-info\" *ngIf=\"isQuestionPlaying() && !isVideo\">\n <ui-icon name=\"User-profile-filled\" color=\"white\" size=\"80\"></ui-icon>\n </div>\n <div class=\"start\" *ngIf=\"isFirstQuestion && !isQuestionPlaying()\">\n <tgo-ringing-phone-animation [isRinging]=\"true\"></tgo-ringing-phone-animation>\n <ui-button\n [label]=\"translations['ANSWER']\"\n [class.white-btn]=\"test.is_preview_mode\"\n variant=\"primary\"\n [companyColor]=\"companyColor\"\n (click)=\"startQuestion()\"\n data-testid=\"immersive-test.start-question-btn\"\n ></ui-button>\n </div>\n <div class=\"overlay\" *ngIf=\"isAnswering() || isCountingDown()\" [@fadeInFadeOut]>\n <div class=\"answer\" *ngIf=\"!audioUrl() && isAnswering()\">\n <div>\n <h3 class=\"uppercase recording-started\">\n <span class=\"recording-dot\"></span>{{ translations['RECORDING_STARTED'] }}\n </h3>\n <h1 class=\"bold\">\n {{ translations['ANSWER_THE_QUESTION'] }}\n </h1>\n </div>\n <ui-button\n [label]=\"translations['ANSWER_COMPLETED']\"\n [class.white-btn]=\"test.is_preview_mode\"\n variant=\"primary\"\n [companyColor]=\"companyColor\"\n (click)=\"stopRecording()\"\n data-testid=\"immersive-test.stop-recording-btn\"\n ></ui-button>\n </div>\n <div class=\"answer\" *ngIf=\"isCountingDown()\">\n <div>\n <h1 class=\"bold\">\n {{ translations['GET_READY'] }}\n </h1>\n </div>\n <tgo-video-countdown (finished)=\"startRecordAnswer()\"></tgo-video-countdown>\n <div> </div>\n </div>\n <div class=\"preview\" [class.hidden]=\"!audioUrl()\" *ngIf=\"test.is_preview_mode\">\n <h4>{{ translations['AUDIO_READY'] }}</h4>\n <p>{{ translations['AUDIO_PREVIEW'] }}</p>\n <audio #audio controls></audio>\n </div>\n </div>\n </div>\n <div class=\"media-info\">\n <h3 class=\"bold\">{{ translations['CUSTOMER'] }}</h3>\n <ui-button\n [hidden]=\"!test.test_instruction && !test.intro_text\"\n class=\"review-button\"\n [label]=\"translations['REVIEW_INSTRUCTIONS']\"\n variant=\"secondary\"\n size=\"small\"\n (click)=\"openReviewInstructionsDialog()\"\n data-testid=\"immersive-test.review-instructions-btn\"\n ></ui-button>\n </div>\n </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.immersive-test{padding:0 64px;margin-top:40px}.immersive-test .media-info{width:100%;display:flex;justify-content:space-between;align-items:center;background:#242424a8;background-color:#242424;border-bottom-left-radius:10px;border-bottom-right-radius:10px;padding:13px 32px;color:#fff}.immersive-test .media-info ::ng-deep ui-button button{border-color:#fff;color:#fff}.immersive-test .test-container{min-width:360px;max-width:1312px;min-height:725px;height:min(725px,100%,max(100vw - 200px,100vh - 200px,200px));border-radius:10px;display:flex;flex-direction:column;justify-content:space-between;position:relative;background-color:#242424}.immersive-test .media-container{position:relative;color:#fff;flex-grow:1;border-top-left-radius:10px;border-top-right-radius:10px;aspect-ratio:16/9}.immersive-test .media-container .candidate-no-camera{position:absolute;width:200px;aspect-ratio:16/9;z-index:3;top:32px;left:32px;border-radius:10px;background-color:#1a47aa;display:flex;justify-content:space-between;flex-direction:column;padding:16px}.immersive-test .media-container .candidate-no-camera ui-icon{margin:auto}.immersive-test .media-container .candidate-camera{position:absolute;width:200px;top:32px;left:32px;z-index:3}.immersive-test .media-container .candidate-camera video{width:200px;border-radius:10px}.immersive-test .media-container .candidate-camera h3{position:absolute;bottom:16px;left:16px}.immersive-test .media-container tgo-audio-animation{position:absolute;top:32px;right:32px;z-index:1}.immersive-test .media-container tgo-vimeo-video{display:none;position:absolute;height:100%;width:100%}.immersive-test .media-container.is-video-visible tgo-vimeo-video{display:block}.immersive-test .media-container.is-playing{border:4px solid #0165FC;border-bottom-width:3px}.immersive-test .media-container.is-answering .candidate-camera tgo-audio-animation,.immersive-test .media-container.is-answering .candidate-no-camera tgo-audio-animation{position:absolute;top:16px;right:16px}.immersive-test .media-container.is-answering .candidate-camera video,.immersive-test .media-container.is-answering .candidate-no-camera{border:3px solid #0165FC;border-radius:10px}.immersive-test .media-container.is-answering tgo-vimeo-video{display:block}.immersive-test .media-container .start,.immersive-test .media-container .audio-info,.immersive-test .media-container .overlay,.immersive-test .media-container .answer{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:40px;height:100%}.immersive-test .media-container .preview{height:100%;display:flex;align-items:center;flex-direction:column;justify-content:flex-end;padding:24px}.immersive-test .media-container .preview p{color:#d3d3d3;margin:8px 0}.immersive-test .media-container .preview audio{margin:16px 0}.immersive-test .media-container .preview.hidden{display:none}.immersive-test h3,.immersive-test h4{color:#fff}.immersive-test .bold{font-weight:700}.immersive-test ui-button.review-button ::ng-deep button{border:1px solid #ffffff}.immersive-test ui-button.white-btn ::ng-deep button{background-color:#fff;border-color:#fff;color:#000}.immersive-test ui-button.white-btn ::ng-deep button:hover{background-color:#666!important}.immersive-test .overlay{top:0;position:absolute;width:100%;height:100%;background-color:#242424e0;z-index:2;border-radius:10px}.immersive-test .overlay h1,.immersive-test .overlay h3{color:#fff;text-align:center}.immersive-test .overlay h3{margin-bottom:10px}.immersive-test tgo-radial-progress{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.immersive-test .uppercase{text-transform:uppercase}.immersive-test .recording-started{display:flex;align-items:center;justify-content:center;gap:10px}.immersive-test .recording-dot{background-color:#ff3003;display:inline-block;width:20px;height:20px;border-radius:50%}@media screen and (max-width: 600px){.immersive-test{padding:0 24px;margin-top:16px}}\n"], dependencies: [{ kind: "ngmodule", type: TranslocoModule }, { kind: "ngmodule", type: ButtonComponentModule }, { kind: "component", type: i1$2.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i2.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: VimeoVideoComponent, selector: "tgo-vimeo-video", inputs: ["videoUrl", "isPlaying", "options"], outputs: ["videoEnded", "videoStarted", "videoError"] }, { kind: "component", type: VideoCountdownComponent, selector: "tgo-video-countdown", inputs: ["startFrom", "endAt", "interval"], outputs: ["finished"] }, { kind: "component", type: RingingPhoneAnimationComponent, selector: "tgo-ringing-phone-animation", inputs: ["isRinging"] }, { kind: "component", type: AudioAnimationComponent, selector: "tgo-audio-animation", inputs: ["volume", "fakeData"] }], animations: [
|
|
405
|
+
], viewQueries: [{ propertyName: "videoElement", first: true, predicate: ["video"], descendants: true }, { propertyName: "audioElement", first: true, predicate: ["audio"], descendants: true }], ngImport: i0, template: "<div class=\"immersive-test\">\n <div class=\"test-container\">\n <div\n class=\"media-container\"\n [class.is-video-visible]=\"isQuestionPlaying() && !isAnswering()\"\n [class.is-playing]=\"isVideoPlaying()\"\n [class.is-answering]=\"isAnswering()\"\n >\n <div class=\"candidate-no-camera\" *ngIf=\"!candidateVideoStreamReady()\">\n <h3> </h3>\n <tgo-audio-animation\n *ngIf=\"isAnswering()\"\n [volume]=\"volume()\"\n [fakeData]=\"false\"\n ></tgo-audio-animation>\n <ui-icon name=\"User-profile-in-line\" color=\"white\" size=\"24\"></ui-icon>\n <h3 class=\"bold\">{{ translations['YOU'] }}</h3>\n </div>\n <div class=\"candidate-camera\" [hidden]=\"!candidateVideoStreamReady()\">\n <tgo-audio-animation\n *ngIf=\"isAnswering() && candidateVideoStreamReady()\"\n [volume]=\"volume()\"\n [fakeData]=\"false\"\n ></tgo-audio-animation>\n <video height #video id=\"video\" playsinline (loadedmetadata)=\"onVideoLoad()\"></video>\n <h3 class=\"bold\" *ngIf=\"candidateVideoStreamReady()\">\n {{ translations['YOU'] }}\n </h3>\n </div>\n <tgo-audio-animation *ngIf=\"isVideoPlaying()\" [fakeData]=\"true\"></tgo-audio-animation>\n <tgo-vimeo-video\n *ngIf=\"isVideo\"\n [isPlaying]=\"isQuestionPlaying()\"\n [videoUrl]=\"fileUrl\"\n (videoEnded)=\"startCountdown()\"\n (videoStarted)=\"isVideoPlaying.set(true)\"\n (videoError)=\"onVideoError($event)\"\n ></tgo-vimeo-video>\n <div class=\"audio-info\" *ngIf=\"isQuestionPlaying() && !isVideo\">\n <ui-icon name=\"User-profile-filled\" color=\"white\" size=\"80\"></ui-icon>\n </div>\n <div class=\"start\" *ngIf=\"isFirstQuestion && !isQuestionPlaying()\">\n <tgo-ringing-phone-animation [isRinging]=\"true\"></tgo-ringing-phone-animation>\n <ui-button\n [label]=\"translations['ANSWER']\"\n [class.white-btn]=\"test.is_preview_mode\"\n variant=\"primary\"\n [companyColor]=\"companyColor\"\n (click)=\"startQuestion()\"\n data-testid=\"immersive-test.start-question-btn\"\n ></ui-button>\n </div>\n <div class=\"overlay\" *ngIf=\"isAnswering() || isCountingDown()\" [@fadeInFadeOut]>\n <div class=\"answer\" *ngIf=\"!audioUrl() && isAnswering()\">\n <div>\n <h3 class=\"uppercase recording-started\">\n <span class=\"recording-dot\"></span>{{ translations['RECORDING_STARTED'] }}\n </h3>\n <h1 class=\"bold\">\n {{ translations['ANSWER_THE_QUESTION'] }}\n </h1>\n </div>\n <ui-button\n [label]=\"translations['ANSWER_COMPLETED']\"\n [class.white-btn]=\"test.is_preview_mode\"\n variant=\"primary\"\n [companyColor]=\"companyColor\"\n (click)=\"stopRecording()\"\n data-testid=\"immersive-test.stop-recording-btn\"\n ></ui-button>\n </div>\n <div class=\"answer\" *ngIf=\"isCountingDown()\">\n <div>\n <h1 class=\"bold\">\n {{ translations['GET_READY'] }}\n </h1>\n </div>\n <tgo-video-countdown (finished)=\"startRecordAnswer()\"></tgo-video-countdown>\n <div> </div>\n </div>\n <div class=\"preview\" [class.hidden]=\"!audioUrl()\" *ngIf=\"test.is_preview_mode\">\n <h4>{{ translations['AUDIO_READY'] }}</h4>\n <p>{{ translations['AUDIO_PREVIEW'] }}</p>\n <audio #audio controls></audio>\n </div>\n </div>\n </div>\n <div class=\"media-info\">\n <h3 class=\"bold\">{{ translations['CUSTOMER'] }}</h3>\n <ui-button\n [hidden]=\"!test.test_instruction && !test.intro_text\"\n class=\"review-button\"\n [label]=\"translations['REVIEW_INSTRUCTIONS']\"\n variant=\"secondary\"\n size=\"small\"\n (click)=\"openReviewInstructionsDialog()\"\n data-testid=\"immersive-test.review-instructions-btn\"\n ></ui-button>\n </div>\n </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.immersive-test{padding:0 64px;margin-top:40px}.immersive-test .media-info{width:100%;display:flex;justify-content:space-between;align-items:center;background:#242424a8;background-color:#242424;border-bottom-left-radius:10px;border-bottom-right-radius:10px;padding:13px 32px;color:#fff}.immersive-test .media-info ::ng-deep ui-button button{border-color:#fff;color:#fff}.immersive-test .test-container{min-width:360px;max-width:1312px;min-height:725px;height:min(725px,100%,max(100vw - 200px,100vh - 200px,200px));border-radius:10px;display:flex;flex-direction:column;justify-content:space-between;position:relative;background-color:#242424}.immersive-test .media-container{position:relative;color:#fff;flex-grow:1;border-top-left-radius:10px;border-top-right-radius:10px;aspect-ratio:16/9}.immersive-test .media-container .candidate-no-camera{position:absolute;width:200px;aspect-ratio:16/9;z-index:3;top:32px;left:32px;border-radius:10px;background-color:#1a47aa;display:flex;justify-content:space-between;flex-direction:column;padding:16px}.immersive-test .media-container .candidate-no-camera ui-icon{margin:auto}.immersive-test .media-container .candidate-camera{position:absolute;width:200px;top:32px;left:32px;z-index:3}.immersive-test .media-container .candidate-camera video{width:200px;border-radius:10px}.immersive-test .media-container .candidate-camera h3{position:absolute;bottom:16px;left:16px}.immersive-test .media-container tgo-audio-animation{position:absolute;top:32px;right:32px;z-index:1}.immersive-test .media-container tgo-vimeo-video{display:none;position:absolute;height:100%;width:100%}.immersive-test .media-container.is-video-visible tgo-vimeo-video{display:block}.immersive-test .media-container.is-playing{border:4px solid #0165fc;border-bottom-width:3px}.immersive-test .media-container.is-answering .candidate-camera tgo-audio-animation,.immersive-test .media-container.is-answering .candidate-no-camera tgo-audio-animation{position:absolute;top:16px;right:16px}.immersive-test .media-container.is-answering .candidate-camera video,.immersive-test .media-container.is-answering .candidate-no-camera{border:3px solid #0165fc;border-radius:10px}.immersive-test .media-container.is-answering tgo-vimeo-video{display:block}.immersive-test .media-container .start,.immersive-test .media-container .audio-info,.immersive-test .media-container .overlay,.immersive-test .media-container .answer{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:40px;height:100%}.immersive-test .media-container .preview{height:100%;display:flex;align-items:center;flex-direction:column;justify-content:flex-end;padding:24px}.immersive-test .media-container .preview p{color:#d3d3d3;margin:8px 0}.immersive-test .media-container .preview audio{margin:16px 0}.immersive-test .media-container .preview.hidden{display:none}.immersive-test h3,.immersive-test h4{color:#fff}.immersive-test .bold{font-weight:700}.immersive-test ui-button.review-button ::ng-deep button{border:1px solid #ffffff}.immersive-test ui-button.white-btn ::ng-deep button{background-color:#fff;border-color:#fff;color:#000}.immersive-test ui-button.white-btn ::ng-deep button:hover{background-color:#666!important}.immersive-test .overlay{top:0;position:absolute;width:100%;height:100%;background-color:#242424e0;z-index:2;border-radius:10px}.immersive-test .overlay h1,.immersive-test .overlay h3{color:#fff;text-align:center}.immersive-test .overlay h3{margin-bottom:10px}.immersive-test tgo-radial-progress{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.immersive-test .uppercase{text-transform:uppercase}.immersive-test .recording-started{display:flex;align-items:center;justify-content:center;gap:10px}.immersive-test .recording-dot{background-color:#ff3003;display:inline-block;width:20px;height:20px;border-radius:50%}@media screen and (max-width: 600px){.immersive-test{padding:0 24px;margin-top:16px}}\n"], dependencies: [{ kind: "ngmodule", type: TranslocoModule }, { kind: "ngmodule", type: ButtonComponentModule }, { kind: "component", type: i1$2.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i2.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: VimeoVideoComponent, selector: "tgo-vimeo-video", inputs: ["videoUrl", "isPlaying", "options"], outputs: ["videoEnded", "videoStarted", "videoError"] }, { kind: "component", type: VideoCountdownComponent, selector: "tgo-video-countdown", inputs: ["startFrom", "endAt", "interval"], outputs: ["finished"] }, { kind: "component", type: RingingPhoneAnimationComponent, selector: "tgo-ringing-phone-animation", inputs: ["isRinging"] }, { kind: "component", type: AudioAnimationComponent, selector: "tgo-audio-animation", inputs: ["volume", "fakeData"] }], animations: [
|
|
406
406
|
trigger('fadeInFadeOut', [
|
|
407
407
|
transition(':enter', [style({ opacity: 0 }), animate('600ms', style({ opacity: 1 }))]),
|
|
408
408
|
transition(':leave', [animate('600ms', style({ opacity: 0 }))]),
|
|
409
409
|
]),
|
|
410
410
|
] });
|
|
411
411
|
}
|
|
412
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
412
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImmersiveTestComponent, decorators: [{
|
|
413
413
|
type: Component,
|
|
414
414
|
args: [{ selector: 'tgo-immersive-test', animations: [
|
|
415
415
|
trigger('fadeInFadeOut', [
|
|
@@ -436,7 +436,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
436
436
|
DialogService,
|
|
437
437
|
SnackbarService,
|
|
438
438
|
ThemeService,
|
|
439
|
-
], template: "<div class=\"immersive-test\">\n <div class=\"test-container\">\n <div\n class=\"media-container\"\n [class.is-video-visible]=\"isQuestionPlaying() && !isAnswering()\"\n [class.is-playing]=\"isVideoPlaying()\"\n [class.is-answering]=\"isAnswering()\"\n >\n <div class=\"candidate-no-camera\" *ngIf=\"!candidateVideoStreamReady()\">\n <h3> </h3>\n <tgo-audio-animation\n *ngIf=\"isAnswering()\"\n [volume]=\"volume()\"\n [fakeData]=\"false\"\n ></tgo-audio-animation>\n <ui-icon name=\"User-profile-in-line\" color=\"white\" size=\"24\"></ui-icon>\n <h3 class=\"bold\">{{ translations['YOU'] }}</h3>\n </div>\n <div class=\"candidate-camera\" [hidden]=\"!candidateVideoStreamReady()\">\n <tgo-audio-animation\n *ngIf=\"isAnswering() && candidateVideoStreamReady()\"\n [volume]=\"volume()\"\n [fakeData]=\"false\"\n ></tgo-audio-animation>\n <video height #video id=\"video\" playsinline (loadedmetadata)=\"onVideoLoad()\"></video>\n <h3 class=\"bold\" *ngIf=\"candidateVideoStreamReady()\">\n {{ translations['YOU'] }}\n </h3>\n </div>\n <tgo-audio-animation *ngIf=\"isVideoPlaying()\" [fakeData]=\"true\"></tgo-audio-animation>\n <tgo-vimeo-video\n *ngIf=\"isVideo\"\n [isPlaying]=\"isQuestionPlaying()\"\n [videoUrl]=\"fileUrl\"\n (videoEnded)=\"startCountdown()\"\n (videoStarted)=\"isVideoPlaying.set(true)\"\n (videoError)=\"onVideoError($event)\"\n ></tgo-vimeo-video>\n <div class=\"audio-info\" *ngIf=\"isQuestionPlaying() && !isVideo\">\n <ui-icon name=\"User-profile-filled\" color=\"white\" size=\"80\"></ui-icon>\n </div>\n <div class=\"start\" *ngIf=\"isFirstQuestion && !isQuestionPlaying()\">\n <tgo-ringing-phone-animation [isRinging]=\"true\"></tgo-ringing-phone-animation>\n <ui-button\n [label]=\"translations['ANSWER']\"\n [class.white-btn]=\"test.is_preview_mode\"\n variant=\"primary\"\n [companyColor]=\"companyColor\"\n (click)=\"startQuestion()\"\n data-testid=\"immersive-test.start-question-btn\"\n ></ui-button>\n </div>\n <div class=\"overlay\" *ngIf=\"isAnswering() || isCountingDown()\" [@fadeInFadeOut]>\n <div class=\"answer\" *ngIf=\"!audioUrl() && isAnswering()\">\n <div>\n <h3 class=\"uppercase recording-started\">\n <span class=\"recording-dot\"></span>{{ translations['RECORDING_STARTED'] }}\n </h3>\n <h1 class=\"bold\">\n {{ translations['ANSWER_THE_QUESTION'] }}\n </h1>\n </div>\n <ui-button\n [label]=\"translations['ANSWER_COMPLETED']\"\n [class.white-btn]=\"test.is_preview_mode\"\n variant=\"primary\"\n [companyColor]=\"companyColor\"\n (click)=\"stopRecording()\"\n data-testid=\"immersive-test.stop-recording-btn\"\n ></ui-button>\n </div>\n <div class=\"answer\" *ngIf=\"isCountingDown()\">\n <div>\n <h1 class=\"bold\">\n {{ translations['GET_READY'] }}\n </h1>\n </div>\n <tgo-video-countdown (finished)=\"startRecordAnswer()\"></tgo-video-countdown>\n <div> </div>\n </div>\n <div class=\"preview\" [class.hidden]=\"!audioUrl()\" *ngIf=\"test.is_preview_mode\">\n <h4>{{ translations['AUDIO_READY'] }}</h4>\n <p>{{ translations['AUDIO_PREVIEW'] }}</p>\n <audio #audio controls></audio>\n </div>\n </div>\n </div>\n <div class=\"media-info\">\n <h3 class=\"bold\">{{ translations['CUSTOMER'] }}</h3>\n <ui-button\n [hidden]=\"!test.test_instruction && !test.intro_text\"\n class=\"review-button\"\n [label]=\"translations['REVIEW_INSTRUCTIONS']\"\n variant=\"secondary\"\n size=\"small\"\n (click)=\"openReviewInstructionsDialog()\"\n data-testid=\"immersive-test.review-instructions-btn\"\n ></ui-button>\n </div>\n </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.immersive-test{padding:0 64px;margin-top:40px}.immersive-test .media-info{width:100%;display:flex;justify-content:space-between;align-items:center;background:#242424a8;background-color:#242424;border-bottom-left-radius:10px;border-bottom-right-radius:10px;padding:13px 32px;color:#fff}.immersive-test .media-info ::ng-deep ui-button button{border-color:#fff;color:#fff}.immersive-test .test-container{min-width:360px;max-width:1312px;min-height:725px;height:min(725px,100%,max(100vw - 200px,100vh - 200px,200px));border-radius:10px;display:flex;flex-direction:column;justify-content:space-between;position:relative;background-color:#242424}.immersive-test .media-container{position:relative;color:#fff;flex-grow:1;border-top-left-radius:10px;border-top-right-radius:10px;aspect-ratio:16/9}.immersive-test .media-container .candidate-no-camera{position:absolute;width:200px;aspect-ratio:16/9;z-index:3;top:32px;left:32px;border-radius:10px;background-color:#1a47aa;display:flex;justify-content:space-between;flex-direction:column;padding:16px}.immersive-test .media-container .candidate-no-camera ui-icon{margin:auto}.immersive-test .media-container .candidate-camera{position:absolute;width:200px;top:32px;left:32px;z-index:3}.immersive-test .media-container .candidate-camera video{width:200px;border-radius:10px}.immersive-test .media-container .candidate-camera h3{position:absolute;bottom:16px;left:16px}.immersive-test .media-container tgo-audio-animation{position:absolute;top:32px;right:32px;z-index:1}.immersive-test .media-container tgo-vimeo-video{display:none;position:absolute;height:100%;width:100%}.immersive-test .media-container.is-video-visible tgo-vimeo-video{display:block}.immersive-test .media-container.is-playing{border:4px solid #0165FC;border-bottom-width:3px}.immersive-test .media-container.is-answering .candidate-camera tgo-audio-animation,.immersive-test .media-container.is-answering .candidate-no-camera tgo-audio-animation{position:absolute;top:16px;right:16px}.immersive-test .media-container.is-answering .candidate-camera video,.immersive-test .media-container.is-answering .candidate-no-camera{border:3px solid #0165FC;border-radius:10px}.immersive-test .media-container.is-answering tgo-vimeo-video{display:block}.immersive-test .media-container .start,.immersive-test .media-container .audio-info,.immersive-test .media-container .overlay,.immersive-test .media-container .answer{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:40px;height:100%}.immersive-test .media-container .preview{height:100%;display:flex;align-items:center;flex-direction:column;justify-content:flex-end;padding:24px}.immersive-test .media-container .preview p{color:#d3d3d3;margin:8px 0}.immersive-test .media-container .preview audio{margin:16px 0}.immersive-test .media-container .preview.hidden{display:none}.immersive-test h3,.immersive-test h4{color:#fff}.immersive-test .bold{font-weight:700}.immersive-test ui-button.review-button ::ng-deep button{border:1px solid #ffffff}.immersive-test ui-button.white-btn ::ng-deep button{background-color:#fff;border-color:#fff;color:#000}.immersive-test ui-button.white-btn ::ng-deep button:hover{background-color:#666!important}.immersive-test .overlay{top:0;position:absolute;width:100%;height:100%;background-color:#242424e0;z-index:2;border-radius:10px}.immersive-test .overlay h1,.immersive-test .overlay h3{color:#fff;text-align:center}.immersive-test .overlay h3{margin-bottom:10px}.immersive-test tgo-radial-progress{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.immersive-test .uppercase{text-transform:uppercase}.immersive-test .recording-started{display:flex;align-items:center;justify-content:center;gap:10px}.immersive-test .recording-dot{background-color:#ff3003;display:inline-block;width:20px;height:20px;border-radius:50%}@media screen and (max-width: 600px){.immersive-test{padding:0 24px;margin-top:16px}}\n"] }]
|
|
439
|
+
], template: "<div class=\"immersive-test\">\n <div class=\"test-container\">\n <div\n class=\"media-container\"\n [class.is-video-visible]=\"isQuestionPlaying() && !isAnswering()\"\n [class.is-playing]=\"isVideoPlaying()\"\n [class.is-answering]=\"isAnswering()\"\n >\n <div class=\"candidate-no-camera\" *ngIf=\"!candidateVideoStreamReady()\">\n <h3> </h3>\n <tgo-audio-animation\n *ngIf=\"isAnswering()\"\n [volume]=\"volume()\"\n [fakeData]=\"false\"\n ></tgo-audio-animation>\n <ui-icon name=\"User-profile-in-line\" color=\"white\" size=\"24\"></ui-icon>\n <h3 class=\"bold\">{{ translations['YOU'] }}</h3>\n </div>\n <div class=\"candidate-camera\" [hidden]=\"!candidateVideoStreamReady()\">\n <tgo-audio-animation\n *ngIf=\"isAnswering() && candidateVideoStreamReady()\"\n [volume]=\"volume()\"\n [fakeData]=\"false\"\n ></tgo-audio-animation>\n <video height #video id=\"video\" playsinline (loadedmetadata)=\"onVideoLoad()\"></video>\n <h3 class=\"bold\" *ngIf=\"candidateVideoStreamReady()\">\n {{ translations['YOU'] }}\n </h3>\n </div>\n <tgo-audio-animation *ngIf=\"isVideoPlaying()\" [fakeData]=\"true\"></tgo-audio-animation>\n <tgo-vimeo-video\n *ngIf=\"isVideo\"\n [isPlaying]=\"isQuestionPlaying()\"\n [videoUrl]=\"fileUrl\"\n (videoEnded)=\"startCountdown()\"\n (videoStarted)=\"isVideoPlaying.set(true)\"\n (videoError)=\"onVideoError($event)\"\n ></tgo-vimeo-video>\n <div class=\"audio-info\" *ngIf=\"isQuestionPlaying() && !isVideo\">\n <ui-icon name=\"User-profile-filled\" color=\"white\" size=\"80\"></ui-icon>\n </div>\n <div class=\"start\" *ngIf=\"isFirstQuestion && !isQuestionPlaying()\">\n <tgo-ringing-phone-animation [isRinging]=\"true\"></tgo-ringing-phone-animation>\n <ui-button\n [label]=\"translations['ANSWER']\"\n [class.white-btn]=\"test.is_preview_mode\"\n variant=\"primary\"\n [companyColor]=\"companyColor\"\n (click)=\"startQuestion()\"\n data-testid=\"immersive-test.start-question-btn\"\n ></ui-button>\n </div>\n <div class=\"overlay\" *ngIf=\"isAnswering() || isCountingDown()\" [@fadeInFadeOut]>\n <div class=\"answer\" *ngIf=\"!audioUrl() && isAnswering()\">\n <div>\n <h3 class=\"uppercase recording-started\">\n <span class=\"recording-dot\"></span>{{ translations['RECORDING_STARTED'] }}\n </h3>\n <h1 class=\"bold\">\n {{ translations['ANSWER_THE_QUESTION'] }}\n </h1>\n </div>\n <ui-button\n [label]=\"translations['ANSWER_COMPLETED']\"\n [class.white-btn]=\"test.is_preview_mode\"\n variant=\"primary\"\n [companyColor]=\"companyColor\"\n (click)=\"stopRecording()\"\n data-testid=\"immersive-test.stop-recording-btn\"\n ></ui-button>\n </div>\n <div class=\"answer\" *ngIf=\"isCountingDown()\">\n <div>\n <h1 class=\"bold\">\n {{ translations['GET_READY'] }}\n </h1>\n </div>\n <tgo-video-countdown (finished)=\"startRecordAnswer()\"></tgo-video-countdown>\n <div> </div>\n </div>\n <div class=\"preview\" [class.hidden]=\"!audioUrl()\" *ngIf=\"test.is_preview_mode\">\n <h4>{{ translations['AUDIO_READY'] }}</h4>\n <p>{{ translations['AUDIO_PREVIEW'] }}</p>\n <audio #audio controls></audio>\n </div>\n </div>\n </div>\n <div class=\"media-info\">\n <h3 class=\"bold\">{{ translations['CUSTOMER'] }}</h3>\n <ui-button\n [hidden]=\"!test.test_instruction && !test.intro_text\"\n class=\"review-button\"\n [label]=\"translations['REVIEW_INSTRUCTIONS']\"\n variant=\"secondary\"\n size=\"small\"\n (click)=\"openReviewInstructionsDialog()\"\n data-testid=\"immersive-test.review-instructions-btn\"\n ></ui-button>\n </div>\n </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.immersive-test{padding:0 64px;margin-top:40px}.immersive-test .media-info{width:100%;display:flex;justify-content:space-between;align-items:center;background:#242424a8;background-color:#242424;border-bottom-left-radius:10px;border-bottom-right-radius:10px;padding:13px 32px;color:#fff}.immersive-test .media-info ::ng-deep ui-button button{border-color:#fff;color:#fff}.immersive-test .test-container{min-width:360px;max-width:1312px;min-height:725px;height:min(725px,100%,max(100vw - 200px,100vh - 200px,200px));border-radius:10px;display:flex;flex-direction:column;justify-content:space-between;position:relative;background-color:#242424}.immersive-test .media-container{position:relative;color:#fff;flex-grow:1;border-top-left-radius:10px;border-top-right-radius:10px;aspect-ratio:16/9}.immersive-test .media-container .candidate-no-camera{position:absolute;width:200px;aspect-ratio:16/9;z-index:3;top:32px;left:32px;border-radius:10px;background-color:#1a47aa;display:flex;justify-content:space-between;flex-direction:column;padding:16px}.immersive-test .media-container .candidate-no-camera ui-icon{margin:auto}.immersive-test .media-container .candidate-camera{position:absolute;width:200px;top:32px;left:32px;z-index:3}.immersive-test .media-container .candidate-camera video{width:200px;border-radius:10px}.immersive-test .media-container .candidate-camera h3{position:absolute;bottom:16px;left:16px}.immersive-test .media-container tgo-audio-animation{position:absolute;top:32px;right:32px;z-index:1}.immersive-test .media-container tgo-vimeo-video{display:none;position:absolute;height:100%;width:100%}.immersive-test .media-container.is-video-visible tgo-vimeo-video{display:block}.immersive-test .media-container.is-playing{border:4px solid #0165fc;border-bottom-width:3px}.immersive-test .media-container.is-answering .candidate-camera tgo-audio-animation,.immersive-test .media-container.is-answering .candidate-no-camera tgo-audio-animation{position:absolute;top:16px;right:16px}.immersive-test .media-container.is-answering .candidate-camera video,.immersive-test .media-container.is-answering .candidate-no-camera{border:3px solid #0165fc;border-radius:10px}.immersive-test .media-container.is-answering tgo-vimeo-video{display:block}.immersive-test .media-container .start,.immersive-test .media-container .audio-info,.immersive-test .media-container .overlay,.immersive-test .media-container .answer{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:40px;height:100%}.immersive-test .media-container .preview{height:100%;display:flex;align-items:center;flex-direction:column;justify-content:flex-end;padding:24px}.immersive-test .media-container .preview p{color:#d3d3d3;margin:8px 0}.immersive-test .media-container .preview audio{margin:16px 0}.immersive-test .media-container .preview.hidden{display:none}.immersive-test h3,.immersive-test h4{color:#fff}.immersive-test .bold{font-weight:700}.immersive-test ui-button.review-button ::ng-deep button{border:1px solid #ffffff}.immersive-test ui-button.white-btn ::ng-deep button{background-color:#fff;border-color:#fff;color:#000}.immersive-test ui-button.white-btn ::ng-deep button:hover{background-color:#666!important}.immersive-test .overlay{top:0;position:absolute;width:100%;height:100%;background-color:#242424e0;z-index:2;border-radius:10px}.immersive-test .overlay h1,.immersive-test .overlay h3{color:#fff;text-align:center}.immersive-test .overlay h3{margin-bottom:10px}.immersive-test tgo-radial-progress{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.immersive-test .uppercase{text-transform:uppercase}.immersive-test .recording-started{display:flex;align-items:center;justify-content:center;gap:10px}.immersive-test .recording-dot{background-color:#ff3003;display:inline-block;width:20px;height:20px;border-radius:50%}@media screen and (max-width: 600px){.immersive-test{padding:0 24px;margin-top:16px}}\n"] }]
|
|
440
440
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
441
441
|
type: Inject,
|
|
442
442
|
args: [TRANSLOCO_SCOPE]
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@testgorilla/tgo-immersive-test",
|
|
3
|
-
"version": "4.0
|
|
3
|
+
"version": "4.1.0",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": ">= 19.0.0 < 20.0.0",
|
|
6
6
|
"@angular/core": ">= 19.0.0 < 20.0.0",
|
|
7
7
|
"@angular/animations": ">= 19.0.0 < 20.0.0",
|
|
8
8
|
"@angular/material": ">= 19.0.0 < 20.0.0",
|
|
9
9
|
"@ngneat/transloco": ">= 4.0.0 < 5.0.0",
|
|
10
|
-
"@testgorilla/tgo-ui": ">=
|
|
10
|
+
"@testgorilla/tgo-ui": ">= 7.0.0 < 8.0.0",
|
|
11
11
|
"ngx-quill": ">= 27.0.0 < 28.0.0",
|
|
12
12
|
"rxjs": ">= 7.0.0 < 8.0.0"
|
|
13
13
|
},
|