valtech-components 2.0.225 → 2.0.228
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/organisms/banner/banner.component.mjs +25 -9
- package/esm2022/lib/services/icons.service.mjs +3 -2
- package/fesm2022/valtech-components.mjs +26 -9
- package/fesm2022/valtech-components.mjs.map +1 -1
- package/lib/components/organisms/banner/banner.component.d.ts +10 -0
- package/package.json +1 -1
|
@@ -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,
|
|
14
|
+
* <val-banner [props]="{ content: {...}, actions: {...}, closable: true, bordered: true, 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,
|
|
16
|
+
* @input props: BannerMetadata - Configuration for the banner (content, actions, closable, bordered, 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,6 +23,22 @@ 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
|
+
}
|
|
26
42
|
clickHandler(token) {
|
|
27
43
|
this.onClick.emit(token);
|
|
28
44
|
}
|
|
@@ -40,10 +56,10 @@ export class BannerComponent {
|
|
|
40
56
|
}"
|
|
41
57
|
(onClick)="closeHandler()"
|
|
42
58
|
>
|
|
43
|
-
<div [ngClass]="['content-container',
|
|
59
|
+
<div [ngClass]="['content-container', alignment]" body>
|
|
44
60
|
<val-title-block
|
|
45
61
|
[props]="{
|
|
46
|
-
position:
|
|
62
|
+
position: titlePosition,
|
|
47
63
|
aboveTitle: props.content.aboveTitle,
|
|
48
64
|
title: props.content.title,
|
|
49
65
|
bellowTitle: props.content.bellowTitle,
|
|
@@ -51,7 +67,7 @@ export class BannerComponent {
|
|
|
51
67
|
></val-title-block>
|
|
52
68
|
@if (props.actions) {
|
|
53
69
|
<val-button-group
|
|
54
|
-
[ngClass]="['buttons-container',
|
|
70
|
+
[ngClass]="['buttons-container', alignment]"
|
|
55
71
|
[props]="props.actions"
|
|
56
72
|
(onClick)="clickHandler($event)"
|
|
57
73
|
></val-button-group>
|
|
@@ -72,10 +88,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
72
88
|
}"
|
|
73
89
|
(onClick)="closeHandler()"
|
|
74
90
|
>
|
|
75
|
-
<div [ngClass]="['content-container',
|
|
91
|
+
<div [ngClass]="['content-container', alignment]" body>
|
|
76
92
|
<val-title-block
|
|
77
93
|
[props]="{
|
|
78
|
-
position:
|
|
94
|
+
position: titlePosition,
|
|
79
95
|
aboveTitle: props.content.aboveTitle,
|
|
80
96
|
title: props.content.title,
|
|
81
97
|
bellowTitle: props.content.bellowTitle,
|
|
@@ -83,7 +99,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
83
99
|
></val-title-block>
|
|
84
100
|
@if (props.actions) {
|
|
85
101
|
<val-button-group
|
|
86
|
-
[ngClass]="['buttons-container',
|
|
102
|
+
[ngClass]="['buttons-container', alignment]"
|
|
87
103
|
[props]="props.actions"
|
|
88
104
|
(onClick)="clickHandler($event)"
|
|
89
105
|
></val-button-group>
|
|
@@ -98,4 +114,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
98
114
|
}], onClose: [{
|
|
99
115
|
type: Output
|
|
100
116
|
}] } });
|
|
101
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
117
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFubmVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3ZhbHRlY2gtY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvb3JnYW5pc21zL2Jhbm5lci9iYW5uZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQy9FLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUM3RCxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSxxREFBcUQsQ0FBQztBQUMzRixPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxtREFBbUQsQ0FBQzs7O0FBc0N4Rjs7Ozs7Ozs7Ozs7R0FXRztBQUNILE1BQU0sT0FBTyxlQUFlO0lBVTFCO1FBTEEsWUFBTyxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7UUFHckMsWUFBTyxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7SUFFZCxDQUFDO0lBRWhCLFFBQVEsS0FBSSxDQUFDO0lBRWI7OztPQUdHO0lBQ0gsSUFBSSxTQUFTO1FBQ1gsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLFNBQVMsSUFBSSxRQUFRLENBQUM7SUFDMUMsQ0FBQztJQUVEOzs7T0FHRztJQUNILElBQUksYUFBYTtRQUNmLE1BQU0sT0FBTyxHQUF1RCxDQUFDLFFBQVEsRUFBRSxNQUFNLEVBQUUsT0FBTyxFQUFFLGFBQWEsQ0FBQyxDQUFDO1FBQy9HLE1BQU0sR0FBRyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxFQUFFLFFBQVEsSUFBSSxJQUFJLENBQUMsU0FBUyxDQUFDO1FBQzNELE9BQU8sT0FBTyxDQUFDLFFBQVEsQ0FBQyxHQUFVLENBQUMsQ0FBQyxDQUFDLENBQUUsR0FBVyxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUM7SUFDaEUsQ0FBQztJQUVELFlBQVksQ0FBQyxLQUFjO1FBQ3pCLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzNCLENBQUM7SUFFRCxZQUFZO1FBQ1YsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUN0QixDQUFDOytHQXRDVSxlQUFlO21HQUFmLGVBQWUsdUpBM0NoQjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQTRCVCx3aEdBN0JTLFlBQVksNkhBQUUsWUFBWSw2RkFBRSxtQkFBbUIsK0VBQUUsb0JBQW9COzs0RkE0Q3BFLGVBQWU7a0JBL0MzQixTQUFTOytCQUNFLFlBQVksY0FDVixJQUFJLFdBQ1AsQ0FBQyxZQUFZLEVBQUUsWUFBWSxFQUFFLG1CQUFtQixFQUFFLG9CQUFvQixDQUFDLFlBQ3RFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBNEJUO3dEQWlCRCxLQUFLO3NCQURKLEtBQUs7Z0JBSU4sT0FBTztzQkFETixNQUFNO2dCQUlQLE9BQU87c0JBRE4sTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBCb3hDb21wb25lbnQgfSBmcm9tICcuLi8uLi9hdG9tcy9ib3gvYm94LmNvbXBvbmVudCc7XG5pbXBvcnQgeyBCdXR0b25Hcm91cENvbXBvbmVudCB9IGZyb20gJy4uLy4uL21vbGVjdWxlcy9idXR0b24tZ3JvdXAvYnV0dG9uLWdyb3VwLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBUaXRsZUJsb2NrQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vbW9sZWN1bGVzL3RpdGxlLWJsb2NrL3RpdGxlLWJsb2NrLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBCYW5uZXJNZXRhZGF0YSB9IGZyb20gJy4vdHlwZXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd2YWwtYmFubmVyJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgQm94Q29tcG9uZW50LCBUaXRsZUJsb2NrQ29tcG9uZW50LCBCdXR0b25Hcm91cENvbXBvbmVudF0sXG4gIHRlbXBsYXRlOiBgXG4gICAgPHZhbC1ib3hcbiAgICAgIFtwcm9wc109XCJ7XG4gICAgICAgIGljb246IHByb3BzLmNsb3NhYmxlID8gJ2Nsb3NlLW91dGxpbmUnIDogJycsXG4gICAgICAgIGJvcmRlcmVkOiBwcm9wcy5ib3JkZXJlZCxcbiAgICAgICAgY29sb3I6ICcnLFxuICAgICAgICBwYWRkaW5nOiBwcm9wcy5wYWRkaW5nLFxuICAgICAgfVwiXG4gICAgICAob25DbGljayk9XCJjbG9zZUhhbmRsZXIoKVwiXG4gICAgPlxuICAgICAgPGRpdiBbbmdDbGFzc109XCJbJ2NvbnRlbnQtY29udGFpbmVyJywgYWxpZ25tZW50XVwiIGJvZHk+XG4gICAgICAgIDx2YWwtdGl0bGUtYmxvY2tcbiAgICAgICAgICBbcHJvcHNdPVwie1xuICAgICAgICAgICAgcG9zaXRpb246IHRpdGxlUG9zaXRpb24sXG4gICAgICAgICAgICBhYm92ZVRpdGxlOiBwcm9wcy5jb250ZW50LmFib3ZlVGl0bGUsXG4gICAgICAgICAgICB0aXRsZTogcHJvcHMuY29udGVudC50aXRsZSxcbiAgICAgICAgICAgIGJlbGxvd1RpdGxlOiBwcm9wcy5jb250ZW50LmJlbGxvd1RpdGxlLFxuICAgICAgICAgIH1cIlxuICAgICAgICA+PC92YWwtdGl0bGUtYmxvY2s+XG4gICAgICAgIEBpZiAocHJvcHMuYWN0aW9ucykge1xuICAgICAgICAgIDx2YWwtYnV0dG9uLWdyb3VwXG4gICAgICAgICAgICBbbmdDbGFzc109XCJbJ2J1dHRvbnMtY29udGFpbmVyJywgYWxpZ25tZW50XVwiXG4gICAgICAgICAgICBbcHJvcHNdPVwicHJvcHMuYWN0aW9uc1wiXG4gICAgICAgICAgICAob25DbGljayk9XCJjbGlja0hhbmRsZXIoJGV2ZW50KVwiXG4gICAgICAgICAgPjwvdmFsLWJ1dHRvbi1ncm91cD5cbiAgICAgICAgfVxuICAgICAgPC9kaXY+XG4gICAgPC92YWwtYm94PlxuICBgLFxuICBzdHlsZVVybHM6IFsnLi9iYW5uZXIuY29tcG9uZW50LnNjc3MnXSxcbn0pXG4vKipcbiAqIHZhbC1iYW5uZXJcbiAqXG4gKiBEaXNwbGF5cyBhIGJhbm5lciB3aXRoIHRpdGxlIGJsb2NrLCBhY3Rpb25zLCBhbmQgb3B0aW9uYWwgY2xvc2UgYnV0dG9uLlxuICpcbiAqIEBleGFtcGxlXG4gKiA8dmFsLWJhbm5lciBbcHJvcHNdPVwieyBjb250ZW50OiB7Li4ufSwgYWN0aW9uczogey4uLn0sIGNsb3NhYmxlOiB0cnVlLCBib3JkZXJlZDogdHJ1ZSwgYWxpZ25tZW50OiAnY2VudGVyJywgcGFkZGluZzogJzhweCcgfVwiIChvbkNsaWNrKT1cImhhbmRsZXIoJGV2ZW50KVwiIChvbkNsb3NlKT1cImNsb3NlSGFuZGxlcigpXCI+PC92YWwtYmFubmVyPlxuICpcbiAqIEBpbnB1dCBwcm9wczogQmFubmVyTWV0YWRhdGEgLSBDb25maWd1cmF0aW9uIGZvciB0aGUgYmFubmVyIChjb250ZW50LCBhY3Rpb25zLCBjbG9zYWJsZSwgYm9yZGVyZWQsIGFsaWdubWVudCwgcGFkZGluZylcbiAqIEBvdXRwdXQgb25DbGljayAtIEVtaXRzIHdoZW4gYW4gYWN0aW9uIGlzIGNsaWNrZWRcbiAqIEBvdXRwdXQgb25DbG9zZSAtIEVtaXRzIHdoZW4gdGhlIGJhbm5lciBpcyBjbG9zZWRcbiAqL1xuZXhwb3J0IGNsYXNzIEJhbm5lckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpXG4gIHByb3BzOiBCYW5uZXJNZXRhZGF0YTtcblxuICBAT3V0cHV0KClcbiAgb25DbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuXG4gIEBPdXRwdXQoKVxuICBvbkNsb3NlID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIGNvbnN0cnVjdG9yKCkge31cblxuICBuZ09uSW5pdCgpIHt9XG5cbiAgLyoqXG4gICAqIFJldHVybnMgdGhlIGFsaWdubWVudCBmb3IgY29udGVudCwgdGl0bGVzLCBhbmQgYnV0dG9ucy5cbiAgICogRGVmYXVsdHMgdG8gJ2NlbnRlcicgaWYgbm90IHNwZWNpZmllZC5cbiAgICovXG4gIGdldCBhbGlnbm1lbnQoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdGhpcy5wcm9wcy5hbGlnbm1lbnQgfHwgJ2NlbnRlcic7XG4gIH1cblxuICAvKipcbiAgICogUmV0dXJucyB0aGUgcG9zaXRpb24gZm9yIHRoZSB0aXRsZSBibG9jay5cbiAgICogSWYgbm90IHNwZWNpZmllZCwgdXNlcyB0aGUgYWxpZ25tZW50IHZhbHVlLCBidXQgZW5zdXJlcyBpdCBtYXRjaGVzIGFsbG93ZWQgdHlwZXMuXG4gICAqL1xuICBnZXQgdGl0bGVQb3NpdGlvbigpOiAnY2VudGVyJyB8ICdsZWZ0JyB8ICdyaWdodCcgfCAnbGVmdG9jZW50ZXInIHtcbiAgICBjb25zdCBhbGxvd2VkOiBBcnJheTwnY2VudGVyJyB8ICdsZWZ0JyB8ICdyaWdodCcgfCAnbGVmdG9jZW50ZXInPiA9IFsnY2VudGVyJywgJ2xlZnQnLCAncmlnaHQnLCAnbGVmdG9jZW50ZXInXTtcbiAgICBjb25zdCBwb3MgPSB0aGlzLnByb3BzLmNvbnRlbnQ/LnBvc2l0aW9uIHx8IHRoaXMuYWxpZ25tZW50O1xuICAgIHJldHVybiBhbGxvd2VkLmluY2x1ZGVzKHBvcyBhcyBhbnkpID8gKHBvcyBhcyBhbnkpIDogJ2NlbnRlcic7XG4gIH1cblxuICBjbGlja0hhbmRsZXIodG9rZW4/OiBzdHJpbmcpIHtcbiAgICB0aGlzLm9uQ2xpY2suZW1pdCh0b2tlbik7XG4gIH1cblxuICBjbG9zZUhhbmRsZXIoKSB7XG4gICAgdGhpcy5vbkNsb3NlLmVtaXQoKTtcbiAgfVxufVxuIl19
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { Injectable } from '@angular/core';
|
|
7
7
|
import { addIcons } from 'ionicons';
|
|
8
|
-
import { addCircleOutline, addOutline, alertCircleOutline, alertOutline, arrowBackOutline, arrowDownOutline, arrowForwardOutline, chatbubblesOutline, checkmarkCircleOutline, checkmarkOutline, chevronDownOutline, clipboardOutline, closeOutline, ellipsisHorizontalOutline, eyeOffOutline, eyeOutline, heart, heartOutline, homeOutline, notificationsOutline, openOutline, scanOutline, shareOutline, } from 'ionicons/icons';
|
|
8
|
+
import { addCircleOutline, addOutline, alertCircleOutline, alertOutline, arrowBackOutline, arrowDownOutline, arrowForwardOutline, chatbubblesOutline, checkmarkCircleOutline, checkmarkOutline, chevronDownOutline, chevronForwardOutline, clipboardOutline, closeOutline, ellipsisHorizontalOutline, eyeOffOutline, eyeOutline, heart, heartOutline, homeOutline, notificationsOutline, openOutline, scanOutline, shareOutline, } from 'ionicons/icons';
|
|
9
9
|
import * as i0 from "@angular/core";
|
|
10
10
|
export class IconService {
|
|
11
11
|
/**
|
|
@@ -34,6 +34,7 @@ export class IconService {
|
|
|
34
34
|
eyeOutline,
|
|
35
35
|
scanOutline,
|
|
36
36
|
chevronDownOutline,
|
|
37
|
+
chevronForwardOutline,
|
|
37
38
|
checkmarkOutline,
|
|
38
39
|
clipboardOutline,
|
|
39
40
|
});
|
|
@@ -47,4 +48,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
47
48
|
providedIn: 'root',
|
|
48
49
|
}]
|
|
49
50
|
}], ctorParameters: () => [] });
|
|
50
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
51
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWNvbnMuc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3ZhbHRlY2gtY29tcG9uZW50cy9zcmMvbGliL3NlcnZpY2VzL2ljb25zLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEseUNBQXlDO0FBRXpDOzs7R0FHRztBQUVILE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDM0MsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLFVBQVUsQ0FBQztBQUNwQyxPQUFPLEVBQ0wsZ0JBQWdCLEVBQ2hCLFVBQVUsRUFDVixrQkFBa0IsRUFDbEIsWUFBWSxFQUNaLGdCQUFnQixFQUNoQixnQkFBZ0IsRUFDaEIsbUJBQW1CLEVBQ25CLGtCQUFrQixFQUNsQixzQkFBc0IsRUFDdEIsZ0JBQWdCLEVBQ2hCLGtCQUFrQixFQUNsQixxQkFBcUIsRUFDckIsZ0JBQWdCLEVBQ2hCLFlBQVksRUFDWix5QkFBeUIsRUFDekIsYUFBYSxFQUNiLFVBQVUsRUFDVixLQUFLLEVBQ0wsWUFBWSxFQUNaLFdBQVcsRUFDWCxvQkFBb0IsRUFDcEIsV0FBVyxFQUNYLFdBQVcsRUFDWCxZQUFZLEdBQ2IsTUFBTSxnQkFBZ0IsQ0FBQzs7QUFLeEIsTUFBTSxPQUFPLFdBQVc7SUFDdEI7O09BRUc7SUFDSDtRQUNFLFFBQVEsQ0FBQztZQUNQLFVBQVU7WUFDVixnQkFBZ0I7WUFDaEIsWUFBWTtZQUNaLGtCQUFrQjtZQUNsQixnQkFBZ0I7WUFDaEIsbUJBQW1CO1lBQ25CLGdCQUFnQjtZQUNoQixzQkFBc0I7WUFDdEIseUJBQXlCO1lBQ3pCLG9CQUFvQjtZQUNwQixXQUFXO1lBQ1gsWUFBWTtZQUNaLGtCQUFrQjtZQUNsQixZQUFZO1lBQ1osS0FBSztZQUNMLFlBQVk7WUFDWixXQUFXO1lBQ1gsYUFBYTtZQUNiLFVBQVU7WUFDVixXQUFXO1lBQ1gsa0JBQWtCO1lBQ2xCLHFCQUFxQjtZQUNyQixnQkFBZ0I7WUFDaEIsZ0JBQWdCO1NBQ2pCLENBQUMsQ0FBQztJQUNMLENBQUM7K0dBL0JVLFdBQVc7bUhBQVgsV0FBVyxjQUZWLE1BQU07OzRGQUVQLFdBQVc7a0JBSHZCLFVBQVU7bUJBQUM7b0JBQ1YsVUFBVSxFQUFFLE1BQU07aUJBQ25CIiwic291cmNlc0NvbnRlbnQiOlsiLyogZXNsaW50LWRpc2FibGUgbm8tdW5kZXJzY29yZS1kYW5nbGUgKi9cblxuLyoqXG4gKiBTZXJ2aWNlIGZvciByZWdpc3RlcmluZyBhbmQgbWFuYWdpbmcgY3VzdG9tIElvbmljb25zIGljb25zIGluIHRoZSBhcHBsaWNhdGlvbi5cbiAqIEF1dG9tYXRpY2FsbHkgcmVnaXN0ZXJzIGEgc2V0IG9mIGNvbW1vbmx5IHVzZWQgaWNvbnMgb24gaW5pdGlhbGl6YXRpb24uXG4gKi9cblxuaW1wb3J0IHsgSW5qZWN0YWJsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgYWRkSWNvbnMgfSBmcm9tICdpb25pY29ucyc7XG5pbXBvcnQge1xuICBhZGRDaXJjbGVPdXRsaW5lLFxuICBhZGRPdXRsaW5lLFxuICBhbGVydENpcmNsZU91dGxpbmUsXG4gIGFsZXJ0T3V0bGluZSxcbiAgYXJyb3dCYWNrT3V0bGluZSxcbiAgYXJyb3dEb3duT3V0bGluZSxcbiAgYXJyb3dGb3J3YXJkT3V0bGluZSxcbiAgY2hhdGJ1YmJsZXNPdXRsaW5lLFxuICBjaGVja21hcmtDaXJjbGVPdXRsaW5lLFxuICBjaGVja21hcmtPdXRsaW5lLFxuICBjaGV2cm9uRG93bk91dGxpbmUsXG4gIGNoZXZyb25Gb3J3YXJkT3V0bGluZSxcbiAgY2xpcGJvYXJkT3V0bGluZSxcbiAgY2xvc2VPdXRsaW5lLFxuICBlbGxpcHNpc0hvcml6b250YWxPdXRsaW5lLFxuICBleWVPZmZPdXRsaW5lLFxuICBleWVPdXRsaW5lLFxuICBoZWFydCxcbiAgaGVhcnRPdXRsaW5lLFxuICBob21lT3V0bGluZSxcbiAgbm90aWZpY2F0aW9uc091dGxpbmUsXG4gIG9wZW5PdXRsaW5lLFxuICBzY2FuT3V0bGluZSxcbiAgc2hhcmVPdXRsaW5lLFxufSBmcm9tICdpb25pY29ucy9pY29ucyc7XG5cbkBJbmplY3RhYmxlKHtcbiAgcHJvdmlkZWRJbjogJ3Jvb3QnLFxufSlcbmV4cG9ydCBjbGFzcyBJY29uU2VydmljZSB7XG4gIC8qKlxuICAgKiBSZWdpc3RlcnMgYSBzZXQgb2YgSW9uaWNvbnMgaWNvbnMgZm9yIHVzZSB0aHJvdWdob3V0IHRoZSBhcHAuXG4gICAqL1xuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBhZGRJY29ucyh7XG4gICAgICBhZGRPdXRsaW5lLFxuICAgICAgYWRkQ2lyY2xlT3V0bGluZSxcbiAgICAgIGFsZXJ0T3V0bGluZSxcbiAgICAgIGFsZXJ0Q2lyY2xlT3V0bGluZSxcbiAgICAgIGFycm93QmFja091dGxpbmUsXG4gICAgICBhcnJvd0ZvcndhcmRPdXRsaW5lLFxuICAgICAgYXJyb3dEb3duT3V0bGluZSxcbiAgICAgIGNoZWNrbWFya0NpcmNsZU91dGxpbmUsXG4gICAgICBlbGxpcHNpc0hvcml6b250YWxPdXRsaW5lLFxuICAgICAgbm90aWZpY2F0aW9uc091dGxpbmUsXG4gICAgICBvcGVuT3V0bGluZSxcbiAgICAgIGNsb3NlT3V0bGluZSxcbiAgICAgIGNoYXRidWJibGVzT3V0bGluZSxcbiAgICAgIHNoYXJlT3V0bGluZSxcbiAgICAgIGhlYXJ0LFxuICAgICAgaGVhcnRPdXRsaW5lLFxuICAgICAgaG9tZU91dGxpbmUsXG4gICAgICBleWVPZmZPdXRsaW5lLFxuICAgICAgZXllT3V0bGluZSxcbiAgICAgIHNjYW5PdXRsaW5lLFxuICAgICAgY2hldnJvbkRvd25PdXRsaW5lLFxuICAgICAgY2hldnJvbkZvcndhcmRPdXRsaW5lLFxuICAgICAgY2hlY2ttYXJrT3V0bGluZSxcbiAgICAgIGNsaXBib2FyZE91dGxpbmUsXG4gICAgfSk7XG4gIH1cbn1cbiJdfQ==
|
|
@@ -4,7 +4,7 @@ import { IonAvatar, IonCard, IonIcon, IonButton, IonSpinner, IonText, IonProgres
|
|
|
4
4
|
import * as i1 from '@angular/common';
|
|
5
5
|
import { CommonModule, NgStyle, NgIf, NgFor, NgClass } from '@angular/common';
|
|
6
6
|
import { addIcons } from 'ionicons';
|
|
7
|
-
import { addOutline, addCircleOutline, alertOutline, alertCircleOutline, arrowBackOutline, arrowForwardOutline, arrowDownOutline, checkmarkCircleOutline, ellipsisHorizontalOutline, notificationsOutline, openOutline, closeOutline, chatbubblesOutline, shareOutline, heart, heartOutline, homeOutline, eyeOffOutline, eyeOutline, scanOutline, chevronDownOutline, checkmarkOutline, clipboardOutline,
|
|
7
|
+
import { addOutline, addCircleOutline, alertOutline, alertCircleOutline, arrowBackOutline, arrowForwardOutline, arrowDownOutline, checkmarkCircleOutline, ellipsisHorizontalOutline, notificationsOutline, openOutline, closeOutline, chatbubblesOutline, shareOutline, heart, heartOutline, homeOutline, eyeOffOutline, eyeOutline, scanOutline, chevronDownOutline, chevronForwardOutline, checkmarkOutline, clipboardOutline, chevronBackOutline } from 'ionicons/icons';
|
|
8
8
|
import { Router, RouterLink } from '@angular/router';
|
|
9
9
|
import { Browser } from '@capacitor/browser';
|
|
10
10
|
import * as i1$1 from '@angular/forms';
|
|
@@ -89,6 +89,7 @@ class IconService {
|
|
|
89
89
|
eyeOutline,
|
|
90
90
|
scanOutline,
|
|
91
91
|
chevronDownOutline,
|
|
92
|
+
chevronForwardOutline,
|
|
92
93
|
checkmarkOutline,
|
|
93
94
|
clipboardOutline,
|
|
94
95
|
});
|
|
@@ -3108,9 +3109,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3108
3109
|
* Displays a banner with title block, actions, and optional close button.
|
|
3109
3110
|
*
|
|
3110
3111
|
* @example
|
|
3111
|
-
* <val-banner [props]="{ content: {...}, actions: {...}, closable: true, bordered: true,
|
|
3112
|
+
* <val-banner [props]="{ content: {...}, actions: {...}, closable: true, bordered: true, alignment: 'center', padding: '8px' }" (onClick)="handler($event)" (onClose)="closeHandler()"></val-banner>
|
|
3112
3113
|
*
|
|
3113
|
-
* @input props: BannerMetadata - Configuration for the banner (content, actions, closable, bordered,
|
|
3114
|
+
* @input props: BannerMetadata - Configuration for the banner (content, actions, closable, bordered, alignment, padding)
|
|
3114
3115
|
* @output onClick - Emits when an action is clicked
|
|
3115
3116
|
* @output onClose - Emits when the banner is closed
|
|
3116
3117
|
*/
|
|
@@ -3120,6 +3121,22 @@ class BannerComponent {
|
|
|
3120
3121
|
this.onClose = new EventEmitter();
|
|
3121
3122
|
}
|
|
3122
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
|
+
}
|
|
3123
3140
|
clickHandler(token) {
|
|
3124
3141
|
this.onClick.emit(token);
|
|
3125
3142
|
}
|
|
@@ -3137,10 +3154,10 @@ class BannerComponent {
|
|
|
3137
3154
|
}"
|
|
3138
3155
|
(onClick)="closeHandler()"
|
|
3139
3156
|
>
|
|
3140
|
-
<div [ngClass]="['content-container',
|
|
3157
|
+
<div [ngClass]="['content-container', alignment]" body>
|
|
3141
3158
|
<val-title-block
|
|
3142
3159
|
[props]="{
|
|
3143
|
-
position:
|
|
3160
|
+
position: titlePosition,
|
|
3144
3161
|
aboveTitle: props.content.aboveTitle,
|
|
3145
3162
|
title: props.content.title,
|
|
3146
3163
|
bellowTitle: props.content.bellowTitle,
|
|
@@ -3148,7 +3165,7 @@ class BannerComponent {
|
|
|
3148
3165
|
></val-title-block>
|
|
3149
3166
|
@if (props.actions) {
|
|
3150
3167
|
<val-button-group
|
|
3151
|
-
[ngClass]="['buttons-container',
|
|
3168
|
+
[ngClass]="['buttons-container', alignment]"
|
|
3152
3169
|
[props]="props.actions"
|
|
3153
3170
|
(onClick)="clickHandler($event)"
|
|
3154
3171
|
></val-button-group>
|
|
@@ -3169,10 +3186,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3169
3186
|
}"
|
|
3170
3187
|
(onClick)="closeHandler()"
|
|
3171
3188
|
>
|
|
3172
|
-
<div [ngClass]="['content-container',
|
|
3189
|
+
<div [ngClass]="['content-container', alignment]" body>
|
|
3173
3190
|
<val-title-block
|
|
3174
3191
|
[props]="{
|
|
3175
|
-
position:
|
|
3192
|
+
position: titlePosition,
|
|
3176
3193
|
aboveTitle: props.content.aboveTitle,
|
|
3177
3194
|
title: props.content.title,
|
|
3178
3195
|
bellowTitle: props.content.bellowTitle,
|
|
@@ -3180,7 +3197,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3180
3197
|
></val-title-block>
|
|
3181
3198
|
@if (props.actions) {
|
|
3182
3199
|
<val-button-group
|
|
3183
|
-
[ngClass]="['buttons-container',
|
|
3200
|
+
[ngClass]="['buttons-container', alignment]"
|
|
3184
3201
|
[props]="props.actions"
|
|
3185
3202
|
(onClick)="clickHandler($event)"
|
|
3186
3203
|
></val-button-group>
|