valtech-components 2.0.413 → 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 +5 -49
- package/esm2022/lib/components/molecules/prompter/types.mjs +1 -1
- package/fesm2022/valtech-components.mjs +3 -45
- 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,59 +1,15 @@
|
|
|
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.contentClass && this.props.contentKey) {
|
|
49
|
-
// Reactive content - Observable connected to currentLang$
|
|
50
|
-
this.displayContent$ = this.langService.getContent(this.props.contentClass, this.props.contentKey, this.props.content);
|
|
51
|
-
}
|
|
52
|
-
else {
|
|
53
|
-
// Static content wrapped in Observable
|
|
54
|
-
this.displayContent$ = of(this.props.content);
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
13
|
clickHandler(token) {
|
|
58
14
|
this.onClick.emit(token);
|
|
59
15
|
}
|
|
@@ -67,7 +23,7 @@ export class PrompterComponent {
|
|
|
67
23
|
<div class="container" [class.teleprompter-content]="props.teleprompter" body>
|
|
68
24
|
<div>
|
|
69
25
|
<ion-text>
|
|
70
|
-
<p [class]="props.size" class="bold">{{
|
|
26
|
+
<p [class]="props.size" class="bold">{{ props.content }}</p>
|
|
71
27
|
</ion-text>
|
|
72
28
|
</div>
|
|
73
29
|
@if (props.buttons || props.hrefs) {
|
|
@@ -87,7 +43,7 @@ export class PrompterComponent {
|
|
|
87
43
|
}
|
|
88
44
|
</div>
|
|
89
45
|
</val-box>
|
|
90
|
-
`, 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: "
|
|
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"] }] }); }
|
|
91
47
|
}
|
|
92
48
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PrompterComponent, decorators: [{
|
|
93
49
|
type: Component,
|
|
@@ -100,7 +56,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
100
56
|
<div class="container" [class.teleprompter-content]="props.teleprompter" body>
|
|
101
57
|
<div>
|
|
102
58
|
<ion-text>
|
|
103
|
-
<p [class]="props.size" class="bold">{{
|
|
59
|
+
<p [class]="props.size" class="bold">{{ props.content }}</p>
|
|
104
60
|
</ion-text>
|
|
105
61
|
</div>
|
|
106
62
|
@if (props.buttons || props.hrefs) {
|
|
@@ -126,4 +82,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
126
82
|
}], onClick: [{
|
|
127
83
|
type: Output
|
|
128
84
|
}] } });
|
|
129
|
-
//# 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,52 +7517,10 @@ 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.contentClass && this.props.contentKey) {
|
|
7558
|
-
// Reactive content - Observable connected to currentLang$
|
|
7559
|
-
this.displayContent$ = this.langService.getContent(this.props.contentClass, this.props.contentKey, this.props.content);
|
|
7560
|
-
}
|
|
7561
|
-
else {
|
|
7562
|
-
// Static content wrapped in Observable
|
|
7563
|
-
this.displayContent$ = of(this.props.content);
|
|
7564
|
-
}
|
|
7565
|
-
}
|
|
7566
7524
|
clickHandler(token) {
|
|
7567
7525
|
this.onClick.emit(token);
|
|
7568
7526
|
}
|
|
@@ -7576,7 +7534,7 @@ class PrompterComponent {
|
|
|
7576
7534
|
<div class="container" [class.teleprompter-content]="props.teleprompter" body>
|
|
7577
7535
|
<div>
|
|
7578
7536
|
<ion-text>
|
|
7579
|
-
<p [class]="props.size" class="bold">{{
|
|
7537
|
+
<p [class]="props.size" class="bold">{{ props.content }}</p>
|
|
7580
7538
|
</ion-text>
|
|
7581
7539
|
</div>
|
|
7582
7540
|
@if (props.buttons || props.hrefs) {
|
|
@@ -7596,7 +7554,7 @@ class PrompterComponent {
|
|
|
7596
7554
|
}
|
|
7597
7555
|
</div>
|
|
7598
7556
|
</val-box>
|
|
7599
|
-
`, 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: "
|
|
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"] }] }); }
|
|
7600
7558
|
}
|
|
7601
7559
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PrompterComponent, decorators: [{
|
|
7602
7560
|
type: Component,
|
|
@@ -7609,7 +7567,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
7609
7567
|
<div class="container" [class.teleprompter-content]="props.teleprompter" body>
|
|
7610
7568
|
<div>
|
|
7611
7569
|
<ion-text>
|
|
7612
|
-
<p [class]="props.size" class="bold">{{
|
|
7570
|
+
<p [class]="props.size" class="bold">{{ props.content }}</p>
|
|
7613
7571
|
</ion-text>
|
|
7614
7572
|
</div>
|
|
7615
7573
|
@if (props.buttons || props.hrefs) {
|