valtech-components 2.0.228 → 2.0.230
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.
|
@@ -11,9 +11,9 @@ import * as i1 from "@angular/common";
|
|
|
11
11
|
* Displays a banner with title block, actions, and optional close button.
|
|
12
12
|
*
|
|
13
13
|
* @example
|
|
14
|
-
* <val-banner [props]="{ content: {...}, actions: {...}, closable: true, bordered: true, alignment: 'center', padding: '8px' }" (onClick)="handler($event)" (onClose)="closeHandler()"></val-banner>
|
|
14
|
+
* <val-banner [props]="{ content: {...}, actions: {...}, closable: true, bordered: true, mode: 'center', alignment: 'center', padding: '8px' }" (onClick)="handler($event)" (onClose)="closeHandler()"></val-banner>
|
|
15
15
|
*
|
|
16
|
-
* @input props: BannerMetadata - Configuration for the banner (content, actions, closable, bordered, alignment, padding)
|
|
16
|
+
* @input props: BannerMetadata - Configuration for the banner (content, actions, closable, bordered, mode, alignment, padding)
|
|
17
17
|
* @output onClick - Emits when an action is clicked
|
|
18
18
|
* @output onClose - Emits when the banner is closed
|
|
19
19
|
*/
|
|
@@ -23,22 +23,6 @@ export class BannerComponent {
|
|
|
23
23
|
this.onClose = new EventEmitter();
|
|
24
24
|
}
|
|
25
25
|
ngOnInit() { }
|
|
26
|
-
/**
|
|
27
|
-
* Returns the alignment for content, titles, and buttons.
|
|
28
|
-
* Defaults to 'center' if not specified.
|
|
29
|
-
*/
|
|
30
|
-
get alignment() {
|
|
31
|
-
return this.props.alignment || 'center';
|
|
32
|
-
}
|
|
33
|
-
/**
|
|
34
|
-
* Returns the position for the title block.
|
|
35
|
-
* If not specified, uses the alignment value, but ensures it matches allowed types.
|
|
36
|
-
*/
|
|
37
|
-
get titlePosition() {
|
|
38
|
-
const allowed = ['center', 'left', 'right', 'leftocenter'];
|
|
39
|
-
const pos = this.props.content?.position || this.alignment;
|
|
40
|
-
return allowed.includes(pos) ? pos : 'center';
|
|
41
|
-
}
|
|
42
26
|
clickHandler(token) {
|
|
43
27
|
this.onClick.emit(token);
|
|
44
28
|
}
|
|
@@ -56,10 +40,10 @@ export class BannerComponent {
|
|
|
56
40
|
}"
|
|
57
41
|
(onClick)="closeHandler()"
|
|
58
42
|
>
|
|
59
|
-
<div [ngClass]="['content-container', alignment]" body>
|
|
43
|
+
<div [ngClass]="['content-container', props.mode, props.alignment]" body>
|
|
60
44
|
<val-title-block
|
|
61
45
|
[props]="{
|
|
62
|
-
position:
|
|
46
|
+
position: props.mode === 'center' ? 'center' : props.content.position,
|
|
63
47
|
aboveTitle: props.content.aboveTitle,
|
|
64
48
|
title: props.content.title,
|
|
65
49
|
bellowTitle: props.content.bellowTitle,
|
|
@@ -67,14 +51,14 @@ export class BannerComponent {
|
|
|
67
51
|
></val-title-block>
|
|
68
52
|
@if (props.actions) {
|
|
69
53
|
<val-button-group
|
|
70
|
-
[ngClass]="['buttons-container', alignment]"
|
|
54
|
+
[ngClass]="['buttons-container', props.mode, props.alignment]"
|
|
71
55
|
[props]="props.actions"
|
|
72
56
|
(onClick)="clickHandler($event)"
|
|
73
57
|
></val-button-group>
|
|
74
58
|
}
|
|
75
59
|
</div>
|
|
76
60
|
</val-box>
|
|
77
|
-
`, isInline: true, styles: [":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}@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)}.content-container{display:flex;justify-content:space-between}.content-container.center{flex-direction:column}.content-container.column{flex-direction:row}.content-container.row{flex-direction:column}.content-container.middle{align-items:center}.content-container.top{align-items:flex-start}.content-container.bottom{align-items:flex-end}.content-container.hybrid{flex-direction:column;align-items:flex-start}@media (min-width: 768px){.content-container.hybrid{flex-direction:row;align-items:center}}.buttons-container{align-items:center;display:flex;margin-top:1rem;margin-bottom:.0625rem}.buttons-container.column{margin-top:0rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BoxComponent, selector: "val-box", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: TitleBlockComponent, selector: "val-title-block", inputs: ["props"] }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }] }); }
|
|
61
|
+
`, isInline: true, styles: [":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}@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)}.content-container{display:flex;justify-content:space-between}.content-container.center{flex-direction:column;justify-content:center}.content-container.column{flex-direction:row}.content-container.row{flex-direction:column}.content-container.middle{align-items:center}.content-container.top{align-items:flex-start}.content-container.bottom{align-items:flex-end}.content-container.hybrid{flex-direction:column;align-items:flex-start}@media (min-width: 768px){.content-container.hybrid{flex-direction:row;align-items:center}}.buttons-container{align-items:center;display:flex;margin-top:1rem;margin-bottom:.0625rem}.buttons-container.column{margin-top:0rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BoxComponent, selector: "val-box", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: TitleBlockComponent, selector: "val-title-block", inputs: ["props"] }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }] }); }
|
|
78
62
|
}
|
|
79
63
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BannerComponent, decorators: [{
|
|
80
64
|
type: Component,
|
|
@@ -88,10 +72,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
88
72
|
}"
|
|
89
73
|
(onClick)="closeHandler()"
|
|
90
74
|
>
|
|
91
|
-
<div [ngClass]="['content-container', alignment]" body>
|
|
75
|
+
<div [ngClass]="['content-container', props.mode, props.alignment]" body>
|
|
92
76
|
<val-title-block
|
|
93
77
|
[props]="{
|
|
94
|
-
position:
|
|
78
|
+
position: props.mode === 'center' ? 'center' : props.content.position,
|
|
95
79
|
aboveTitle: props.content.aboveTitle,
|
|
96
80
|
title: props.content.title,
|
|
97
81
|
bellowTitle: props.content.bellowTitle,
|
|
@@ -99,14 +83,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
99
83
|
></val-title-block>
|
|
100
84
|
@if (props.actions) {
|
|
101
85
|
<val-button-group
|
|
102
|
-
[ngClass]="['buttons-container', alignment]"
|
|
86
|
+
[ngClass]="['buttons-container', props.mode, props.alignment]"
|
|
103
87
|
[props]="props.actions"
|
|
104
88
|
(onClick)="clickHandler($event)"
|
|
105
89
|
></val-button-group>
|
|
106
90
|
}
|
|
107
91
|
</div>
|
|
108
92
|
</val-box>
|
|
109
|
-
`, styles: [":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}@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)}.content-container{display:flex;justify-content:space-between}.content-container.center{flex-direction:column}.content-container.column{flex-direction:row}.content-container.row{flex-direction:column}.content-container.middle{align-items:center}.content-container.top{align-items:flex-start}.content-container.bottom{align-items:flex-end}.content-container.hybrid{flex-direction:column;align-items:flex-start}@media (min-width: 768px){.content-container.hybrid{flex-direction:row;align-items:center}}.buttons-container{align-items:center;display:flex;margin-top:1rem;margin-bottom:.0625rem}.buttons-container.column{margin-top:0rem}\n"] }]
|
|
93
|
+
`, styles: [":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}@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)}.content-container{display:flex;justify-content:space-between}.content-container.center{flex-direction:column;justify-content:center}.content-container.column{flex-direction:row}.content-container.row{flex-direction:column}.content-container.middle{align-items:center}.content-container.top{align-items:flex-start}.content-container.bottom{align-items:flex-end}.content-container.hybrid{flex-direction:column;align-items:flex-start}@media (min-width: 768px){.content-container.hybrid{flex-direction:row;align-items:center}}.buttons-container{align-items:center;display:flex;margin-top:1rem;margin-bottom:.0625rem}.buttons-container.column{margin-top:0rem}\n"] }]
|
|
110
94
|
}], ctorParameters: () => [], propDecorators: { props: [{
|
|
111
95
|
type: Input
|
|
112
96
|
}], onClick: [{
|
|
@@ -114,4 +98,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
114
98
|
}], onClose: [{
|
|
115
99
|
type: Output
|
|
116
100
|
}] } });
|
|
117
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
101
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFubmVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3ZhbHRlY2gtY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvb3JnYW5pc21zL2Jhbm5lci9iYW5uZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQy9FLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUM3RCxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSxxREFBcUQsQ0FBQztBQUMzRixPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxtREFBbUQsQ0FBQzs7O0FBc0N4Rjs7Ozs7Ozs7Ozs7R0FXRztBQUNILE1BQU0sT0FBTyxlQUFlO0lBVTFCO1FBTEEsWUFBTyxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7UUFHckMsWUFBTyxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7SUFFZCxDQUFDO0lBRWhCLFFBQVEsS0FBSSxDQUFDO0lBRWIsWUFBWSxDQUFDLEtBQWM7UUFDekIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDM0IsQ0FBQztJQUVELFlBQVk7UUFDVixJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3RCLENBQUM7K0dBcEJVLGVBQWU7bUdBQWYsZUFBZSx1SkEzQ2hCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBNEJULCtpR0E3QlMsWUFBWSw2SEFBRSxZQUFZLDZGQUFFLG1CQUFtQiwrRUFBRSxvQkFBb0I7OzRGQTRDcEUsZUFBZTtrQkEvQzNCLFNBQVM7K0JBQ0UsWUFBWSxjQUNWLElBQUksV0FDUCxDQUFDLFlBQVksRUFBRSxZQUFZLEVBQUUsbUJBQW1CLEVBQUUsb0JBQW9CLENBQUMsWUFDdEU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0E0QlQ7d0RBaUJELEtBQUs7c0JBREosS0FBSztnQkFJTixPQUFPO3NCQUROLE1BQU07Z0JBSVAsT0FBTztzQkFETixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEJveENvbXBvbmVudCB9IGZyb20gJy4uLy4uL2F0b21zL2JveC9ib3guY29tcG9uZW50JztcbmltcG9ydCB7IEJ1dHRvbkdyb3VwQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vbW9sZWN1bGVzL2J1dHRvbi1ncm91cC9idXR0b24tZ3JvdXAuY29tcG9uZW50JztcbmltcG9ydCB7IFRpdGxlQmxvY2tDb21wb25lbnQgfSBmcm9tICcuLi8uLi9tb2xlY3VsZXMvdGl0bGUtYmxvY2svdGl0bGUtYmxvY2suY29tcG9uZW50JztcbmltcG9ydCB7IEJhbm5lck1ldGFkYXRhIH0gZnJvbSAnLi90eXBlcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3ZhbC1iYW5uZXInLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBCb3hDb21wb25lbnQsIFRpdGxlQmxvY2tDb21wb25lbnQsIEJ1dHRvbkdyb3VwQ29tcG9uZW50XSxcbiAgdGVtcGxhdGU6IGBcbiAgICA8dmFsLWJveFxuICAgICAgW3Byb3BzXT1cIntcbiAgICAgICAgaWNvbjogcHJvcHMuY2xvc2FibGUgPyAnY2xvc2Utb3V0bGluZScgOiAnJyxcbiAgICAgICAgYm9yZGVyZWQ6IHByb3BzLmJvcmRlcmVkLFxuICAgICAgICBjb2xvcjogJycsXG4gICAgICAgIHBhZGRpbmc6IHByb3BzLnBhZGRpbmcsXG4gICAgICB9XCJcbiAgICAgIChvbkNsaWNrKT1cImNsb3NlSGFuZGxlcigpXCJcbiAgICA+XG4gICAgICA8ZGl2IFtuZ0NsYXNzXT1cIlsnY29udGVudC1jb250YWluZXInLCBwcm9wcy5tb2RlLCBwcm9wcy5hbGlnbm1lbnRdXCIgYm9keT5cbiAgICAgICAgPHZhbC10aXRsZS1ibG9ja1xuICAgICAgICAgIFtwcm9wc109XCJ7XG4gICAgICAgICAgICBwb3NpdGlvbjogcHJvcHMubW9kZSA9PT0gJ2NlbnRlcicgPyAnY2VudGVyJyA6IHByb3BzLmNvbnRlbnQucG9zaXRpb24sXG4gICAgICAgICAgICBhYm92ZVRpdGxlOiBwcm9wcy5jb250ZW50LmFib3ZlVGl0bGUsXG4gICAgICAgICAgICB0aXRsZTogcHJvcHMuY29udGVudC50aXRsZSxcbiAgICAgICAgICAgIGJlbGxvd1RpdGxlOiBwcm9wcy5jb250ZW50LmJlbGxvd1RpdGxlLFxuICAgICAgICAgIH1cIlxuICAgICAgICA+PC92YWwtdGl0bGUtYmxvY2s+XG4gICAgICAgIEBpZiAocHJvcHMuYWN0aW9ucykge1xuICAgICAgICAgIDx2YWwtYnV0dG9uLWdyb3VwXG4gICAgICAgICAgICBbbmdDbGFzc109XCJbJ2J1dHRvbnMtY29udGFpbmVyJywgcHJvcHMubW9kZSwgcHJvcHMuYWxpZ25tZW50XVwiXG4gICAgICAgICAgICBbcHJvcHNdPVwicHJvcHMuYWN0aW9uc1wiXG4gICAgICAgICAgICAob25DbGljayk9XCJjbGlja0hhbmRsZXIoJGV2ZW50KVwiXG4gICAgICAgICAgPjwvdmFsLWJ1dHRvbi1ncm91cD5cbiAgICAgICAgfVxuICAgICAgPC9kaXY+XG4gICAgPC92YWwtYm94PlxuICBgLFxuICBzdHlsZVVybHM6IFsnLi9iYW5uZXIuY29tcG9uZW50LnNjc3MnXSxcbn0pXG4vKipcbiAqIHZhbC1iYW5uZXJcbiAqXG4gKiBEaXNwbGF5cyBhIGJhbm5lciB3aXRoIHRpdGxlIGJsb2NrLCBhY3Rpb25zLCBhbmQgb3B0aW9uYWwgY2xvc2UgYnV0dG9uLlxuICpcbiAqIEBleGFtcGxlXG4gKiA8dmFsLWJhbm5lciBbcHJvcHNdPVwieyBjb250ZW50OiB7Li4ufSwgYWN0aW9uczogey4uLn0sIGNsb3NhYmxlOiB0cnVlLCBib3JkZXJlZDogdHJ1ZSwgbW9kZTogJ2NlbnRlcicsIGFsaWdubWVudDogJ2NlbnRlcicsIHBhZGRpbmc6ICc4cHgnIH1cIiAob25DbGljayk9XCJoYW5kbGVyKCRldmVudClcIiAob25DbG9zZSk9XCJjbG9zZUhhbmRsZXIoKVwiPjwvdmFsLWJhbm5lcj5cbiAqXG4gKiBAaW5wdXQgcHJvcHM6IEJhbm5lck1ldGFkYXRhIC0gQ29uZmlndXJhdGlvbiBmb3IgdGhlIGJhbm5lciAoY29udGVudCwgYWN0aW9ucywgY2xvc2FibGUsIGJvcmRlcmVkLCBtb2RlLCBhbGlnbm1lbnQsIHBhZGRpbmcpXG4gKiBAb3V0cHV0IG9uQ2xpY2sgLSBFbWl0cyB3aGVuIGFuIGFjdGlvbiBpcyBjbGlja2VkXG4gKiBAb3V0cHV0IG9uQ2xvc2UgLSBFbWl0cyB3aGVuIHRoZSBiYW5uZXIgaXMgY2xvc2VkXG4gKi9cbmV4cG9ydCBjbGFzcyBCYW5uZXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKVxuICBwcm9wczogQmFubmVyTWV0YWRhdGE7XG5cbiAgQE91dHB1dCgpXG4gIG9uQ2xpY2sgPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcblxuICBAT3V0cHV0KClcbiAgb25DbG9zZSA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICBjb25zdHJ1Y3RvcigpIHt9XG5cbiAgbmdPbkluaXQoKSB7fVxuXG4gIGNsaWNrSGFuZGxlcih0b2tlbj86IHN0cmluZykge1xuICAgIHRoaXMub25DbGljay5lbWl0KHRva2VuKTtcbiAgfVxuXG4gIGNsb3NlSGFuZGxlcigpIHtcbiAgICB0aGlzLm9uQ2xvc2UuZW1pdCgpO1xuICB9XG59XG4iXX0=
|
|
@@ -3109,9 +3109,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3109
3109
|
* Displays a banner with title block, actions, and optional close button.
|
|
3110
3110
|
*
|
|
3111
3111
|
* @example
|
|
3112
|
-
* <val-banner [props]="{ content: {...}, actions: {...}, closable: true, bordered: true, alignment: 'center', padding: '8px' }" (onClick)="handler($event)" (onClose)="closeHandler()"></val-banner>
|
|
3112
|
+
* <val-banner [props]="{ content: {...}, actions: {...}, closable: true, bordered: true, mode: 'center', alignment: 'center', padding: '8px' }" (onClick)="handler($event)" (onClose)="closeHandler()"></val-banner>
|
|
3113
3113
|
*
|
|
3114
|
-
* @input props: BannerMetadata - Configuration for the banner (content, actions, closable, bordered, alignment, padding)
|
|
3114
|
+
* @input props: BannerMetadata - Configuration for the banner (content, actions, closable, bordered, mode, alignment, padding)
|
|
3115
3115
|
* @output onClick - Emits when an action is clicked
|
|
3116
3116
|
* @output onClose - Emits when the banner is closed
|
|
3117
3117
|
*/
|
|
@@ -3121,22 +3121,6 @@ class BannerComponent {
|
|
|
3121
3121
|
this.onClose = new EventEmitter();
|
|
3122
3122
|
}
|
|
3123
3123
|
ngOnInit() { }
|
|
3124
|
-
/**
|
|
3125
|
-
* Returns the alignment for content, titles, and buttons.
|
|
3126
|
-
* Defaults to 'center' if not specified.
|
|
3127
|
-
*/
|
|
3128
|
-
get alignment() {
|
|
3129
|
-
return this.props.alignment || 'center';
|
|
3130
|
-
}
|
|
3131
|
-
/**
|
|
3132
|
-
* Returns the position for the title block.
|
|
3133
|
-
* If not specified, uses the alignment value, but ensures it matches allowed types.
|
|
3134
|
-
*/
|
|
3135
|
-
get titlePosition() {
|
|
3136
|
-
const allowed = ['center', 'left', 'right', 'leftocenter'];
|
|
3137
|
-
const pos = this.props.content?.position || this.alignment;
|
|
3138
|
-
return allowed.includes(pos) ? pos : 'center';
|
|
3139
|
-
}
|
|
3140
3124
|
clickHandler(token) {
|
|
3141
3125
|
this.onClick.emit(token);
|
|
3142
3126
|
}
|
|
@@ -3154,10 +3138,10 @@ class BannerComponent {
|
|
|
3154
3138
|
}"
|
|
3155
3139
|
(onClick)="closeHandler()"
|
|
3156
3140
|
>
|
|
3157
|
-
<div [ngClass]="['content-container', alignment]" body>
|
|
3141
|
+
<div [ngClass]="['content-container', props.mode, props.alignment]" body>
|
|
3158
3142
|
<val-title-block
|
|
3159
3143
|
[props]="{
|
|
3160
|
-
position:
|
|
3144
|
+
position: props.mode === 'center' ? 'center' : props.content.position,
|
|
3161
3145
|
aboveTitle: props.content.aboveTitle,
|
|
3162
3146
|
title: props.content.title,
|
|
3163
3147
|
bellowTitle: props.content.bellowTitle,
|
|
@@ -3165,14 +3149,14 @@ class BannerComponent {
|
|
|
3165
3149
|
></val-title-block>
|
|
3166
3150
|
@if (props.actions) {
|
|
3167
3151
|
<val-button-group
|
|
3168
|
-
[ngClass]="['buttons-container', alignment]"
|
|
3152
|
+
[ngClass]="['buttons-container', props.mode, props.alignment]"
|
|
3169
3153
|
[props]="props.actions"
|
|
3170
3154
|
(onClick)="clickHandler($event)"
|
|
3171
3155
|
></val-button-group>
|
|
3172
3156
|
}
|
|
3173
3157
|
</div>
|
|
3174
3158
|
</val-box>
|
|
3175
|
-
`, isInline: true, styles: [":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}@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)}.content-container{display:flex;justify-content:space-between}.content-container.center{flex-direction:column}.content-container.column{flex-direction:row}.content-container.row{flex-direction:column}.content-container.middle{align-items:center}.content-container.top{align-items:flex-start}.content-container.bottom{align-items:flex-end}.content-container.hybrid{flex-direction:column;align-items:flex-start}@media (min-width: 768px){.content-container.hybrid{flex-direction:row;align-items:center}}.buttons-container{align-items:center;display:flex;margin-top:1rem;margin-bottom:.0625rem}.buttons-container.column{margin-top:0rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BoxComponent, selector: "val-box", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: TitleBlockComponent, selector: "val-title-block", inputs: ["props"] }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }] }); }
|
|
3159
|
+
`, isInline: true, styles: [":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}@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)}.content-container{display:flex;justify-content:space-between}.content-container.center{flex-direction:column;justify-content:center}.content-container.column{flex-direction:row}.content-container.row{flex-direction:column}.content-container.middle{align-items:center}.content-container.top{align-items:flex-start}.content-container.bottom{align-items:flex-end}.content-container.hybrid{flex-direction:column;align-items:flex-start}@media (min-width: 768px){.content-container.hybrid{flex-direction:row;align-items:center}}.buttons-container{align-items:center;display:flex;margin-top:1rem;margin-bottom:.0625rem}.buttons-container.column{margin-top:0rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BoxComponent, selector: "val-box", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: TitleBlockComponent, selector: "val-title-block", inputs: ["props"] }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }] }); }
|
|
3176
3160
|
}
|
|
3177
3161
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BannerComponent, decorators: [{
|
|
3178
3162
|
type: Component,
|
|
@@ -3186,10 +3170,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3186
3170
|
}"
|
|
3187
3171
|
(onClick)="closeHandler()"
|
|
3188
3172
|
>
|
|
3189
|
-
<div [ngClass]="['content-container', alignment]" body>
|
|
3173
|
+
<div [ngClass]="['content-container', props.mode, props.alignment]" body>
|
|
3190
3174
|
<val-title-block
|
|
3191
3175
|
[props]="{
|
|
3192
|
-
position:
|
|
3176
|
+
position: props.mode === 'center' ? 'center' : props.content.position,
|
|
3193
3177
|
aboveTitle: props.content.aboveTitle,
|
|
3194
3178
|
title: props.content.title,
|
|
3195
3179
|
bellowTitle: props.content.bellowTitle,
|
|
@@ -3197,14 +3181,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3197
3181
|
></val-title-block>
|
|
3198
3182
|
@if (props.actions) {
|
|
3199
3183
|
<val-button-group
|
|
3200
|
-
[ngClass]="['buttons-container', alignment]"
|
|
3184
|
+
[ngClass]="['buttons-container', props.mode, props.alignment]"
|
|
3201
3185
|
[props]="props.actions"
|
|
3202
3186
|
(onClick)="clickHandler($event)"
|
|
3203
3187
|
></val-button-group>
|
|
3204
3188
|
}
|
|
3205
3189
|
</div>
|
|
3206
3190
|
</val-box>
|
|
3207
|
-
`, styles: [":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}@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)}.content-container{display:flex;justify-content:space-between}.content-container.center{flex-direction:column}.content-container.column{flex-direction:row}.content-container.row{flex-direction:column}.content-container.middle{align-items:center}.content-container.top{align-items:flex-start}.content-container.bottom{align-items:flex-end}.content-container.hybrid{flex-direction:column;align-items:flex-start}@media (min-width: 768px){.content-container.hybrid{flex-direction:row;align-items:center}}.buttons-container{align-items:center;display:flex;margin-top:1rem;margin-bottom:.0625rem}.buttons-container.column{margin-top:0rem}\n"] }]
|
|
3191
|
+
`, styles: [":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}@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)}.content-container{display:flex;justify-content:space-between}.content-container.center{flex-direction:column;justify-content:center}.content-container.column{flex-direction:row}.content-container.row{flex-direction:column}.content-container.middle{align-items:center}.content-container.top{align-items:flex-start}.content-container.bottom{align-items:flex-end}.content-container.hybrid{flex-direction:column;align-items:flex-start}@media (min-width: 768px){.content-container.hybrid{flex-direction:row;align-items:center}}.buttons-container{align-items:center;display:flex;margin-top:1rem;margin-bottom:.0625rem}.buttons-container.column{margin-top:0rem}\n"] }]
|
|
3208
3192
|
}], ctorParameters: () => [], propDecorators: { props: [{
|
|
3209
3193
|
type: Input
|
|
3210
3194
|
}], onClick: [{
|