valtech-components 2.0.414 → 2.0.415
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/esm2022/lib/components/molecules/prompter/prompter.component.mjs +57 -108
- package/esm2022/lib/components/molecules/prompter/types.mjs +1 -1
- package/fesm2022/valtech-components.mjs +55 -104
- package/fesm2022/valtech-components.mjs.map +1 -1
- package/lib/components/molecules/prompter/prompter.component.d.ts +2 -15
- package/lib/components/molecules/prompter/types.d.ts +1 -7
- package/package.json +1 -1
|
@@ -1,136 +1,85 @@
|
|
|
1
1
|
import { CommonModule } from '@angular/common';
|
|
2
|
-
import { Component, EventEmitter,
|
|
2
|
+
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
|
3
3
|
import { IonText } from '@ionic/angular/standalone';
|
|
4
|
-
import { of } from 'rxjs';
|
|
5
|
-
import { LangService } from '../../../services/lang-provider/lang-provider.service';
|
|
6
4
|
import { BoxComponent } from '../../atoms/box/box.component';
|
|
7
5
|
import { HrefComponent } from '../../atoms/href/href.component';
|
|
8
6
|
import { ButtonGroupComponent } from '../button-group/button-group.component';
|
|
9
7
|
import * as i0 from "@angular/core";
|
|
10
8
|
import * as i1 from "@angular/common";
|
|
11
|
-
/**
|
|
12
|
-
* val-prompter
|
|
13
|
-
*
|
|
14
|
-
* Displays a prompt/info box with text, actions (buttons/links), and custom styles.
|
|
15
|
-
* Supports reactive i18n content via contentClass and contentKey props.
|
|
16
|
-
*
|
|
17
|
-
* @example Static content:
|
|
18
|
-
* <val-prompter [props]="{ content: 'Message', buttons: [...], color: 'primary', size: 'medium' }"></val-prompter>
|
|
19
|
-
*
|
|
20
|
-
* @example Reactive i18n content:
|
|
21
|
-
* <val-prompter [props]="{
|
|
22
|
-
* contentClass: 'homePage',
|
|
23
|
-
* contentKey: 'cookieMessage',
|
|
24
|
-
* content: 'Fallback message',
|
|
25
|
-
* buttons: [...],
|
|
26
|
-
* color: 'primary',
|
|
27
|
-
* size: 'medium'
|
|
28
|
-
* }"></val-prompter>
|
|
29
|
-
*
|
|
30
|
-
* @input props: PrompterMetadata - Configuration for the prompter (content, buttons, hrefs, color, size, etc.)
|
|
31
|
-
* @output onClick - Emits when an action is clicked
|
|
32
|
-
*/
|
|
33
9
|
export class PrompterComponent {
|
|
34
10
|
constructor() {
|
|
35
|
-
this.langService = inject(LangService);
|
|
36
|
-
/** Observable for reactive content - follows val-text/val-button pattern */
|
|
37
|
-
this.displayContent$ = of('');
|
|
38
11
|
this.onClick = new EventEmitter();
|
|
39
12
|
}
|
|
40
|
-
ngOnInit() {
|
|
41
|
-
this.setupContent();
|
|
42
|
-
}
|
|
43
|
-
/**
|
|
44
|
-
* Set up content Observable.
|
|
45
|
-
* Follows the same pattern as val-text and val-button for consistency.
|
|
46
|
-
*/
|
|
47
|
-
setupContent() {
|
|
48
|
-
if (!this.props) {
|
|
49
|
-
return;
|
|
50
|
-
}
|
|
51
|
-
if (this.props.contentClass && this.props.contentKey) {
|
|
52
|
-
// Reactive content - Observable connected to currentLang$
|
|
53
|
-
this.displayContent$ = this.langService.getContent(this.props.contentClass, this.props.contentKey, this.props.content);
|
|
54
|
-
}
|
|
55
|
-
else {
|
|
56
|
-
// Static content wrapped in Observable
|
|
57
|
-
this.displayContent$ = of(this.props.content);
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
13
|
clickHandler(token) {
|
|
61
14
|
this.onClick.emit(token);
|
|
62
15
|
}
|
|
63
16
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PrompterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
64
17
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PrompterComponent, isStandalone: true, selector: "val-prompter", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
>
|
|
71
|
-
<div
|
|
72
|
-
<
|
|
73
|
-
<
|
|
74
|
-
|
|
75
|
-
</ion-text>
|
|
76
|
-
</div>
|
|
77
|
-
@if (props.buttons || props.hrefs) {
|
|
78
|
-
<div class="actions-container">
|
|
79
|
-
<val-button-group
|
|
80
|
-
class="buttons-container"
|
|
81
|
-
[props]="{ buttons: props.buttons, position: 'right', columned: false }"
|
|
82
|
-
(onClick)="clickHandler($event)"
|
|
83
|
-
></val-button-group>
|
|
84
|
-
<val-href
|
|
85
|
-
class="link"
|
|
86
|
-
*ngFor="let l of props.hrefs"
|
|
87
|
-
[props]="l"
|
|
88
|
-
(onClick)="clickHandler($event)"
|
|
89
|
-
></val-href>
|
|
90
|
-
</div>
|
|
91
|
-
}
|
|
18
|
+
<val-box
|
|
19
|
+
class="teleprompter-container"
|
|
20
|
+
[props]="{ icon: '', bordered: props.bordered, color: props.color, leftBorder: false, padding: props.padding }"
|
|
21
|
+
(onClick)="clickHandler()"
|
|
22
|
+
>
|
|
23
|
+
<div class="container" [class.teleprompter-content]="props.teleprompter" body>
|
|
24
|
+
<div>
|
|
25
|
+
<ion-text>
|
|
26
|
+
<p [class]="props.size" class="bold">{{ props.content }}</p>
|
|
27
|
+
</ion-text>
|
|
92
28
|
</div>
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
29
|
+
@if (props.buttons || props.hrefs) {
|
|
30
|
+
<div class="actions-container">
|
|
31
|
+
<val-button-group
|
|
32
|
+
class="buttons-container"
|
|
33
|
+
[props]="{ buttons: props.buttons, position: 'right', columned: false }"
|
|
34
|
+
(onClick)="clickHandler($event)"
|
|
35
|
+
></val-button-group>
|
|
36
|
+
<val-href
|
|
37
|
+
class="link"
|
|
38
|
+
*ngFor="let l of props.hrefs"
|
|
39
|
+
[props]="l"
|
|
40
|
+
(onClick)="clickHandler($event)"
|
|
41
|
+
></val-href>
|
|
42
|
+
</div>
|
|
43
|
+
}
|
|
44
|
+
</div>
|
|
45
|
+
</val-box>
|
|
46
|
+
`, isInline: true, styles: ["@charset \"UTF-8\";:root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.container{display:flex;align-items:center;justify-content:space-between;flex-direction:column}@media (min-width: 768px){.container{flex-direction:row}}.teleprompter-container{overflow:hidden;width:100%}.teleprompter-content{white-space:nowrap;animation:scroll-left 15s linear infinite}@keyframes scroll-left{0%{transform:translate(100%)}to{transform:translate(-100%)}}.link{margin:0 .5rem;width:max-content}.actions-container{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: BoxComponent, selector: "val-box", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: HrefComponent, selector: "val-href", inputs: ["props"], outputs: ["onClick"] }] }); }
|
|
96
47
|
}
|
|
97
48
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PrompterComponent, decorators: [{
|
|
98
49
|
type: Component,
|
|
99
50
|
args: [{ selector: 'val-prompter', standalone: true, imports: [CommonModule, IonText, BoxComponent, ButtonGroupComponent, HrefComponent], template: `
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
>
|
|
106
|
-
<div
|
|
107
|
-
<
|
|
108
|
-
<
|
|
109
|
-
|
|
110
|
-
</ion-text>
|
|
111
|
-
</div>
|
|
112
|
-
@if (props.buttons || props.hrefs) {
|
|
113
|
-
<div class="actions-container">
|
|
114
|
-
<val-button-group
|
|
115
|
-
class="buttons-container"
|
|
116
|
-
[props]="{ buttons: props.buttons, position: 'right', columned: false }"
|
|
117
|
-
(onClick)="clickHandler($event)"
|
|
118
|
-
></val-button-group>
|
|
119
|
-
<val-href
|
|
120
|
-
class="link"
|
|
121
|
-
*ngFor="let l of props.hrefs"
|
|
122
|
-
[props]="l"
|
|
123
|
-
(onClick)="clickHandler($event)"
|
|
124
|
-
></val-href>
|
|
125
|
-
</div>
|
|
126
|
-
}
|
|
51
|
+
<val-box
|
|
52
|
+
class="teleprompter-container"
|
|
53
|
+
[props]="{ icon: '', bordered: props.bordered, color: props.color, leftBorder: false, padding: props.padding }"
|
|
54
|
+
(onClick)="clickHandler()"
|
|
55
|
+
>
|
|
56
|
+
<div class="container" [class.teleprompter-content]="props.teleprompter" body>
|
|
57
|
+
<div>
|
|
58
|
+
<ion-text>
|
|
59
|
+
<p [class]="props.size" class="bold">{{ props.content }}</p>
|
|
60
|
+
</ion-text>
|
|
127
61
|
</div>
|
|
128
|
-
|
|
129
|
-
|
|
62
|
+
@if (props.buttons || props.hrefs) {
|
|
63
|
+
<div class="actions-container">
|
|
64
|
+
<val-button-group
|
|
65
|
+
class="buttons-container"
|
|
66
|
+
[props]="{ buttons: props.buttons, position: 'right', columned: false }"
|
|
67
|
+
(onClick)="clickHandler($event)"
|
|
68
|
+
></val-button-group>
|
|
69
|
+
<val-href
|
|
70
|
+
class="link"
|
|
71
|
+
*ngFor="let l of props.hrefs"
|
|
72
|
+
[props]="l"
|
|
73
|
+
(onClick)="clickHandler($event)"
|
|
74
|
+
></val-href>
|
|
75
|
+
</div>
|
|
76
|
+
}
|
|
77
|
+
</div>
|
|
78
|
+
</val-box>
|
|
130
79
|
`, styles: ["@charset \"UTF-8\";:root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.container{display:flex;align-items:center;justify-content:space-between;flex-direction:column}@media (min-width: 768px){.container{flex-direction:row}}.teleprompter-container{overflow:hidden;width:100%}.teleprompter-content{white-space:nowrap;animation:scroll-left 15s linear infinite}@keyframes scroll-left{0%{transform:translate(100%)}to{transform:translate(-100%)}}.link{margin:0 .5rem;width:max-content}.actions-container{display:flex;align-items:center}\n"] }]
|
|
131
80
|
}], propDecorators: { props: [{
|
|
132
81
|
type: Input
|
|
133
82
|
}], onClick: [{
|
|
134
83
|
type: Output
|
|
135
84
|
}] } });
|
|
136
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
85
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvbXB0ZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL21vbGVjdWxlcy9wcm9tcHRlci9wcm9tcHRlci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdkUsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQ3BELE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUM3RCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFDaEUsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sd0NBQXdDLENBQUM7OztBQXVDOUUsTUFBTSxPQUFPLGlCQUFpQjtJQXBDOUI7UUF5Q0UsWUFBTyxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7S0FLdEM7SUFIQyxZQUFZLENBQUMsS0FBYztRQUN6QixJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUMzQixDQUFDOytHQVRVLGlCQUFpQjttR0FBakIsaUJBQWlCLHFJQWhDbEI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBNkJULDZpR0E5QlMsWUFBWSw0SkFBRSxPQUFPLGdGQUFFLFlBQVksNkZBQUUsb0JBQW9CLHNHQUFFLGFBQWE7OzRGQWlDdkUsaUJBQWlCO2tCQXBDN0IsU0FBUzsrQkFDRSxjQUFjLGNBQ1osSUFBSSxXQUNQLENBQUMsWUFBWSxFQUFFLE9BQU8sRUFBRSxZQUFZLEVBQUUsb0JBQW9CLEVBQUUsYUFBYSxDQUFDLFlBQ3pFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQTZCVDs4QkFLRCxLQUFLO3NCQURKLEtBQUs7Z0JBSU4sT0FBTztzQkFETixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJb25UZXh0IH0gZnJvbSAnQGlvbmljL2FuZ3VsYXIvc3RhbmRhbG9uZSc7XG5pbXBvcnQgeyBCb3hDb21wb25lbnQgfSBmcm9tICcuLi8uLi9hdG9tcy9ib3gvYm94LmNvbXBvbmVudCc7XG5pbXBvcnQgeyBIcmVmQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vYXRvbXMvaHJlZi9ocmVmLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBCdXR0b25Hcm91cENvbXBvbmVudCB9IGZyb20gJy4uL2J1dHRvbi1ncm91cC9idXR0b24tZ3JvdXAuY29tcG9uZW50JztcbmltcG9ydCB7IFByb21wdGVyTWV0YWRhdGEgfSBmcm9tICcuL3R5cGVzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndmFsLXByb21wdGVyJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgSW9uVGV4dCwgQm94Q29tcG9uZW50LCBCdXR0b25Hcm91cENvbXBvbmVudCwgSHJlZkNvbXBvbmVudF0sXG4gIHRlbXBsYXRlOiBgXG4gICAgPHZhbC1ib3hcbiAgICAgIGNsYXNzPVwidGVsZXByb21wdGVyLWNvbnRhaW5lclwiXG4gICAgICBbcHJvcHNdPVwieyBpY29uOiAnJywgYm9yZGVyZWQ6IHByb3BzLmJvcmRlcmVkLCBjb2xvcjogcHJvcHMuY29sb3IsIGxlZnRCb3JkZXI6IGZhbHNlLCBwYWRkaW5nOiBwcm9wcy5wYWRkaW5nIH1cIlxuICAgICAgKG9uQ2xpY2spPVwiY2xpY2tIYW5kbGVyKClcIlxuICAgID5cbiAgICAgIDxkaXYgY2xhc3M9XCJjb250YWluZXJcIiBbY2xhc3MudGVsZXByb21wdGVyLWNvbnRlbnRdPVwicHJvcHMudGVsZXByb21wdGVyXCIgYm9keT5cbiAgICAgICAgPGRpdj5cbiAgICAgICAgICA8aW9uLXRleHQ+XG4gICAgICAgICAgICA8cCBbY2xhc3NdPVwicHJvcHMuc2l6ZVwiIGNsYXNzPVwiYm9sZFwiPnt7IHByb3BzLmNvbnRlbnQgfX08L3A+XG4gICAgICAgICAgPC9pb24tdGV4dD5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIEBpZiAocHJvcHMuYnV0dG9ucyB8fCBwcm9wcy5ocmVmcykge1xuICAgICAgICAgIDxkaXYgY2xhc3M9XCJhY3Rpb25zLWNvbnRhaW5lclwiPlxuICAgICAgICAgICAgPHZhbC1idXR0b24tZ3JvdXBcbiAgICAgICAgICAgICAgY2xhc3M9XCJidXR0b25zLWNvbnRhaW5lclwiXG4gICAgICAgICAgICAgIFtwcm9wc109XCJ7IGJ1dHRvbnM6IHByb3BzLmJ1dHRvbnMsIHBvc2l0aW9uOiAncmlnaHQnLCBjb2x1bW5lZDogZmFsc2UgfVwiXG4gICAgICAgICAgICAgIChvbkNsaWNrKT1cImNsaWNrSGFuZGxlcigkZXZlbnQpXCJcbiAgICAgICAgICAgID48L3ZhbC1idXR0b24tZ3JvdXA+XG4gICAgICAgICAgICA8dmFsLWhyZWZcbiAgICAgICAgICAgICAgY2xhc3M9XCJsaW5rXCJcbiAgICAgICAgICAgICAgKm5nRm9yPVwibGV0IGwgb2YgcHJvcHMuaHJlZnNcIlxuICAgICAgICAgICAgICBbcHJvcHNdPVwibFwiXG4gICAgICAgICAgICAgIChvbkNsaWNrKT1cImNsaWNrSGFuZGxlcigkZXZlbnQpXCJcbiAgICAgICAgICAgID48L3ZhbC1ocmVmPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICB9XG4gICAgICA8L2Rpdj5cbiAgICA8L3ZhbC1ib3g+XG4gIGAsXG4gIHN0eWxlVXJsczogWycuL3Byb21wdGVyLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIFByb21wdGVyQ29tcG9uZW50IHtcbiAgQElucHV0KClcbiAgcHJvcHM6IFByb21wdGVyTWV0YWRhdGE7XG5cbiAgQE91dHB1dCgpXG4gIG9uQ2xpY2sgPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcblxuICBjbGlja0hhbmRsZXIodG9rZW4/OiBzdHJpbmcpIHtcbiAgICB0aGlzLm9uQ2xpY2suZW1pdCh0b2tlbik7XG4gIH1cbn1cbiJdfQ==
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMvbGliL2NvbXBvbmVudHMvbW9sZWN1bGVzL3Byb21wdGVyL3R5cGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb2xvciB9IGZyb20gJ0Bpb25pYy9jb3JlJztcbmltcG9ydCB7IEhyZWZNZXRhZGF0YSB9IGZyb20gJy4uLy4uL2F0b21zL2hyZWYvdHlwZXMnO1xuaW1wb3J0IHsgQnV0dG9uTWV0YWRhdGEgfSBmcm9tICcuLi8uLi90eXBlcyc7XG5cbi8qKlxuICogUHJvcHMgZm9yIHZhbC1wcm9tcHRlciBjb21wb25lbnQuXG4gKlxuICogQHByb3BlcnR5IHRlbGVwcm9tcHRlciAtIFdoZXRoZXIgdG8gdXNlIHRlbGVwcm9tcHRlciBzdHlsZS5cbiAqIEBwcm9wZXJ0eSBib3JkZXJlZCAtIFdoZXRoZXIgdGhlIGJveCBoYXMgYSBib3JkZXIuXG4gKiBAcHJvcGVydHkgY29sb3IgLSBUaGUgYmFja2dyb3VuZCBjb2xvciBvZiB0aGUgYm94IChvcHRpb25hbCkuXG4gKiBAcHJvcGVydHkgY29udGVudCAtIFRoZSBtYWluIHRleHQgY29udGVudC5cbiAqIEBwcm9wZXJ0eSBzaXplIC0gVGhlIHNpemUgb2YgdGhlIHRleHQgYW5kIGJveCAoJ3NtYWxsJyB8ICdtZWRpdW0nIHwgJ2xhcmdlJyB8ICd4bGFyZ2UnKS5cbiAqIEBwcm9wZXJ0eSBidXR0b25zIC0gQXJyYXkgb2YgYnV0dG9uIGNvbmZpZ3VyYXRpb25zIChvcHRpb25hbCkuXG4gKiBAcHJvcGVydHkgaHJlZnMgLSBBcnJheSBvZiBsaW5rIGNvbmZpZ3VyYXRpb25zIChvcHRpb25hbCkuXG4gKiBAcHJvcGVydHkgcGFkZGluZyAtIEN1c3RvbSBwYWRkaW5nIGZvciB0aGUgYm94IChvcHRpb25hbCkuXG4gKi9cbmV4cG9ydCB0eXBlIFByb21wdGVyTWV0YWRhdGEgPSB7XG4gIHRlbGVwcm9tcHRlcjogYm9vbGVhbjtcbiAgYm9yZGVyZWQ6IGJvb2xlYW47XG4gIGNvbG9yPzogQ29sb3I7XG4gIGNvbnRlbnQ6IHN0cmluZztcbiAgc2l6ZTogJ3NtYWxsJyB8ICdtZWRpdW0nIHwgJ2xhcmdlJyB8ICd4bGFyZ2UnO1xuICBidXR0b25zPzogQnV0dG9uTWV0YWRhdGFbXTtcbiAgaHJlZnM/OiBIcmVmTWV0YWRhdGFbXTtcbiAgcGFkZGluZz86IHN0cmluZztcbn07XG4iXX0=
|
|
@@ -7517,125 +7517,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
7517
7517
|
type: Input
|
|
7518
7518
|
}] } });
|
|
7519
7519
|
|
|
7520
|
-
/**
|
|
7521
|
-
* val-prompter
|
|
7522
|
-
*
|
|
7523
|
-
* Displays a prompt/info box with text, actions (buttons/links), and custom styles.
|
|
7524
|
-
* Supports reactive i18n content via contentClass and contentKey props.
|
|
7525
|
-
*
|
|
7526
|
-
* @example Static content:
|
|
7527
|
-
* <val-prompter [props]="{ content: 'Message', buttons: [...], color: 'primary', size: 'medium' }"></val-prompter>
|
|
7528
|
-
*
|
|
7529
|
-
* @example Reactive i18n content:
|
|
7530
|
-
* <val-prompter [props]="{
|
|
7531
|
-
* contentClass: 'homePage',
|
|
7532
|
-
* contentKey: 'cookieMessage',
|
|
7533
|
-
* content: 'Fallback message',
|
|
7534
|
-
* buttons: [...],
|
|
7535
|
-
* color: 'primary',
|
|
7536
|
-
* size: 'medium'
|
|
7537
|
-
* }"></val-prompter>
|
|
7538
|
-
*
|
|
7539
|
-
* @input props: PrompterMetadata - Configuration for the prompter (content, buttons, hrefs, color, size, etc.)
|
|
7540
|
-
* @output onClick - Emits when an action is clicked
|
|
7541
|
-
*/
|
|
7542
7520
|
class PrompterComponent {
|
|
7543
7521
|
constructor() {
|
|
7544
|
-
this.langService = inject(LangService);
|
|
7545
|
-
/** Observable for reactive content - follows val-text/val-button pattern */
|
|
7546
|
-
this.displayContent$ = of('');
|
|
7547
7522
|
this.onClick = new EventEmitter();
|
|
7548
7523
|
}
|
|
7549
|
-
ngOnInit() {
|
|
7550
|
-
this.setupContent();
|
|
7551
|
-
}
|
|
7552
|
-
/**
|
|
7553
|
-
* Set up content Observable.
|
|
7554
|
-
* Follows the same pattern as val-text and val-button for consistency.
|
|
7555
|
-
*/
|
|
7556
|
-
setupContent() {
|
|
7557
|
-
if (!this.props) {
|
|
7558
|
-
return;
|
|
7559
|
-
}
|
|
7560
|
-
if (this.props.contentClass && this.props.contentKey) {
|
|
7561
|
-
// Reactive content - Observable connected to currentLang$
|
|
7562
|
-
this.displayContent$ = this.langService.getContent(this.props.contentClass, this.props.contentKey, this.props.content);
|
|
7563
|
-
}
|
|
7564
|
-
else {
|
|
7565
|
-
// Static content wrapped in Observable
|
|
7566
|
-
this.displayContent$ = of(this.props.content);
|
|
7567
|
-
}
|
|
7568
|
-
}
|
|
7569
7524
|
clickHandler(token) {
|
|
7570
7525
|
this.onClick.emit(token);
|
|
7571
7526
|
}
|
|
7572
7527
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PrompterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7573
7528
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PrompterComponent, isStandalone: true, selector: "val-prompter", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
|
|
7574
|
-
|
|
7575
|
-
|
|
7576
|
-
|
|
7577
|
-
|
|
7578
|
-
|
|
7579
|
-
>
|
|
7580
|
-
<div
|
|
7581
|
-
<
|
|
7582
|
-
<
|
|
7583
|
-
|
|
7584
|
-
</ion-text>
|
|
7585
|
-
</div>
|
|
7586
|
-
@if (props.buttons || props.hrefs) {
|
|
7587
|
-
<div class="actions-container">
|
|
7588
|
-
<val-button-group
|
|
7589
|
-
class="buttons-container"
|
|
7590
|
-
[props]="{ buttons: props.buttons, position: 'right', columned: false }"
|
|
7591
|
-
(onClick)="clickHandler($event)"
|
|
7592
|
-
></val-button-group>
|
|
7593
|
-
<val-href
|
|
7594
|
-
class="link"
|
|
7595
|
-
*ngFor="let l of props.hrefs"
|
|
7596
|
-
[props]="l"
|
|
7597
|
-
(onClick)="clickHandler($event)"
|
|
7598
|
-
></val-href>
|
|
7599
|
-
</div>
|
|
7600
|
-
}
|
|
7529
|
+
<val-box
|
|
7530
|
+
class="teleprompter-container"
|
|
7531
|
+
[props]="{ icon: '', bordered: props.bordered, color: props.color, leftBorder: false, padding: props.padding }"
|
|
7532
|
+
(onClick)="clickHandler()"
|
|
7533
|
+
>
|
|
7534
|
+
<div class="container" [class.teleprompter-content]="props.teleprompter" body>
|
|
7535
|
+
<div>
|
|
7536
|
+
<ion-text>
|
|
7537
|
+
<p [class]="props.size" class="bold">{{ props.content }}</p>
|
|
7538
|
+
</ion-text>
|
|
7601
7539
|
</div>
|
|
7602
|
-
|
|
7603
|
-
|
|
7604
|
-
|
|
7540
|
+
@if (props.buttons || props.hrefs) {
|
|
7541
|
+
<div class="actions-container">
|
|
7542
|
+
<val-button-group
|
|
7543
|
+
class="buttons-container"
|
|
7544
|
+
[props]="{ buttons: props.buttons, position: 'right', columned: false }"
|
|
7545
|
+
(onClick)="clickHandler($event)"
|
|
7546
|
+
></val-button-group>
|
|
7547
|
+
<val-href
|
|
7548
|
+
class="link"
|
|
7549
|
+
*ngFor="let l of props.hrefs"
|
|
7550
|
+
[props]="l"
|
|
7551
|
+
(onClick)="clickHandler($event)"
|
|
7552
|
+
></val-href>
|
|
7553
|
+
</div>
|
|
7554
|
+
}
|
|
7555
|
+
</div>
|
|
7556
|
+
</val-box>
|
|
7557
|
+
`, isInline: true, styles: ["@charset \"UTF-8\";:root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.container{display:flex;align-items:center;justify-content:space-between;flex-direction:column}@media (min-width: 768px){.container{flex-direction:row}}.teleprompter-container{overflow:hidden;width:100%}.teleprompter-content{white-space:nowrap;animation:scroll-left 15s linear infinite}@keyframes scroll-left{0%{transform:translate(100%)}to{transform:translate(-100%)}}.link{margin:0 .5rem;width:max-content}.actions-container{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: BoxComponent, selector: "val-box", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: HrefComponent, selector: "val-href", inputs: ["props"], outputs: ["onClick"] }] }); }
|
|
7605
7558
|
}
|
|
7606
7559
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PrompterComponent, decorators: [{
|
|
7607
7560
|
type: Component,
|
|
7608
7561
|
args: [{ selector: 'val-prompter', standalone: true, imports: [CommonModule, IonText, BoxComponent, ButtonGroupComponent, HrefComponent], template: `
|
|
7609
|
-
|
|
7610
|
-
|
|
7611
|
-
|
|
7612
|
-
|
|
7613
|
-
|
|
7614
|
-
>
|
|
7615
|
-
<div
|
|
7616
|
-
<
|
|
7617
|
-
<
|
|
7618
|
-
|
|
7619
|
-
</ion-text>
|
|
7620
|
-
</div>
|
|
7621
|
-
@if (props.buttons || props.hrefs) {
|
|
7622
|
-
<div class="actions-container">
|
|
7623
|
-
<val-button-group
|
|
7624
|
-
class="buttons-container"
|
|
7625
|
-
[props]="{ buttons: props.buttons, position: 'right', columned: false }"
|
|
7626
|
-
(onClick)="clickHandler($event)"
|
|
7627
|
-
></val-button-group>
|
|
7628
|
-
<val-href
|
|
7629
|
-
class="link"
|
|
7630
|
-
*ngFor="let l of props.hrefs"
|
|
7631
|
-
[props]="l"
|
|
7632
|
-
(onClick)="clickHandler($event)"
|
|
7633
|
-
></val-href>
|
|
7634
|
-
</div>
|
|
7635
|
-
}
|
|
7562
|
+
<val-box
|
|
7563
|
+
class="teleprompter-container"
|
|
7564
|
+
[props]="{ icon: '', bordered: props.bordered, color: props.color, leftBorder: false, padding: props.padding }"
|
|
7565
|
+
(onClick)="clickHandler()"
|
|
7566
|
+
>
|
|
7567
|
+
<div class="container" [class.teleprompter-content]="props.teleprompter" body>
|
|
7568
|
+
<div>
|
|
7569
|
+
<ion-text>
|
|
7570
|
+
<p [class]="props.size" class="bold">{{ props.content }}</p>
|
|
7571
|
+
</ion-text>
|
|
7636
7572
|
</div>
|
|
7637
|
-
|
|
7638
|
-
|
|
7573
|
+
@if (props.buttons || props.hrefs) {
|
|
7574
|
+
<div class="actions-container">
|
|
7575
|
+
<val-button-group
|
|
7576
|
+
class="buttons-container"
|
|
7577
|
+
[props]="{ buttons: props.buttons, position: 'right', columned: false }"
|
|
7578
|
+
(onClick)="clickHandler($event)"
|
|
7579
|
+
></val-button-group>
|
|
7580
|
+
<val-href
|
|
7581
|
+
class="link"
|
|
7582
|
+
*ngFor="let l of props.hrefs"
|
|
7583
|
+
[props]="l"
|
|
7584
|
+
(onClick)="clickHandler($event)"
|
|
7585
|
+
></val-href>
|
|
7586
|
+
</div>
|
|
7587
|
+
}
|
|
7588
|
+
</div>
|
|
7589
|
+
</val-box>
|
|
7639
7590
|
`, styles: ["@charset \"UTF-8\";:root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.container{display:flex;align-items:center;justify-content:space-between;flex-direction:column}@media (min-width: 768px){.container{flex-direction:row}}.teleprompter-container{overflow:hidden;width:100%}.teleprompter-content{white-space:nowrap;animation:scroll-left 15s linear infinite}@keyframes scroll-left{0%{transform:translate(100%)}to{transform:translate(-100%)}}.link{margin:0 .5rem;width:max-content}.actions-container{display:flex;align-items:center}\n"] }]
|
|
7640
7591
|
}], propDecorators: { props: [{
|
|
7641
7592
|
type: Input
|