valtech-components 2.0.227 → 2.0.229
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,7 +51,7 @@ 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>
|
|
@@ -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,7 +83,7 @@ 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>
|
|
@@ -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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFubmVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3ZhbHRlY2gtY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvb3JnYW5pc21zL2Jhbm5lci9iYW5uZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQy9FLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUM3RCxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSxxREFBcUQsQ0FBQztBQUMzRixPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxtREFBbUQsQ0FBQzs7O0FBc0N4Rjs7Ozs7Ozs7Ozs7R0FXRztBQUNILE1BQU0sT0FBTyxlQUFlO0lBVTFCO1FBTEEsWUFBTyxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7UUFHckMsWUFBTyxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7SUFFZCxDQUFDO0lBRWhCLFFBQVEsS0FBSSxDQUFDO0lBRWIsWUFBWSxDQUFDLEtBQWM7UUFDekIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDM0IsQ0FBQztJQUVELFlBQVk7UUFDVixJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3RCLENBQUM7K0dBcEJVLGVBQWU7bUdBQWYsZUFBZSx1SkEzQ2hCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBNEJULHdoR0E3QlMsWUFBWSw2SEFBRSxZQUFZLDZGQUFFLG1CQUFtQiwrRUFBRSxvQkFBb0I7OzRGQTRDcEUsZUFBZTtrQkEvQzNCLFNBQVM7K0JBQ0UsWUFBWSxjQUNWLElBQUksV0FDUCxDQUFDLFlBQVksRUFBRSxZQUFZLEVBQUUsbUJBQW1CLEVBQUUsb0JBQW9CLENBQUMsWUFDdEU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0E0QlQ7d0RBaUJELEtBQUs7c0JBREosS0FBSztnQkFJTixPQUFPO3NCQUROLE1BQU07Z0JBSVAsT0FBTztzQkFETixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEJveENvbXBvbmVudCB9IGZyb20gJy4uLy4uL2F0b21zL2JveC9ib3guY29tcG9uZW50JztcbmltcG9ydCB7IEJ1dHRvbkdyb3VwQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vbW9sZWN1bGVzL2J1dHRvbi1ncm91cC9idXR0b24tZ3JvdXAuY29tcG9uZW50JztcbmltcG9ydCB7IFRpdGxlQmxvY2tDb21wb25lbnQgfSBmcm9tICcuLi8uLi9tb2xlY3VsZXMvdGl0bGUtYmxvY2svdGl0bGUtYmxvY2suY29tcG9uZW50JztcbmltcG9ydCB7IEJhbm5lck1ldGFkYXRhIH0gZnJvbSAnLi90eXBlcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3ZhbC1iYW5uZXInLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBCb3hDb21wb25lbnQsIFRpdGxlQmxvY2tDb21wb25lbnQsIEJ1dHRvbkdyb3VwQ29tcG9uZW50XSxcbiAgdGVtcGxhdGU6IGBcbiAgICA8dmFsLWJveFxuICAgICAgW3Byb3BzXT1cIntcbiAgICAgICAgaWNvbjogcHJvcHMuY2xvc2FibGUgPyAnY2xvc2Utb3V0bGluZScgOiAnJyxcbiAgICAgICAgYm9yZGVyZWQ6IHByb3BzLmJvcmRlcmVkLFxuICAgICAgICBjb2xvcjogJycsXG4gICAgICAgIHBhZGRpbmc6IHByb3BzLnBhZGRpbmcsXG4gICAgICB9XCJcbiAgICAgIChvbkNsaWNrKT1cImNsb3NlSGFuZGxlcigpXCJcbiAgICA+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,7 +3149,7 @@ 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>
|
|
@@ -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,7 +3181,7 @@ 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>
|