btv-base-controls 0.1.24 → 0.1.26
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/{esm2020 → esm2022}/btv-base-controls.mjs +4 -4
- package/{esm2020 → esm2022}/lib/basic.module.mjs +64 -64
- package/esm2022/lib/blink-message/blink-message.component.mjs +54 -0
- package/{esm2020 → esm2022}/lib/btv-icon-button/btv-counter-button.mjs +47 -47
- package/esm2022/lib/btv-icon-button/btv-icon-button.component.mjs +89 -0
- package/esm2022/lib/btv-progress/btv-progress.component.mjs +71 -0
- package/esm2022/lib/btv-search/btv-search.component.mjs +82 -0
- package/{esm2020 → esm2022}/lib/busy-indicator/busy-indicator.component.mjs +16 -16
- package/{esm2020 → esm2022}/lib/custom-tool-tip/custom-tool-tip.component.mjs +34 -34
- package/esm2022/lib/custom-tool-tip/tool-tip-renderer.directive.mjs +113 -0
- package/{esm2020 → esm2022}/lib/illustration/illustration.component.mjs +17 -17
- package/esm2022/lib/wm-avatar/avatar.component.mjs +175 -0
- package/{esm2020 → esm2022}/lib/wm-back-btn/wm-back-btn.component.mjs +26 -26
- package/{esm2020 → esm2022}/lib/wm-beta-text/wm-beta-text.component.mjs +19 -19
- package/{esm2020 → esm2022}/lib/wm-info/info-models.mjs +13 -13
- package/esm2022/lib/wm-info/wm-info.component.mjs +239 -0
- package/{esm2020 → esm2022}/lib/wm-info-card/wm-info-card.component.mjs +23 -23
- package/{esm2020 → esm2022}/lib/wm-no-content/wm-no-content.component.mjs +30 -30
- package/esm2022/lib/wm-panel-bar/wm-panel-bar.component.mjs +78 -0
- package/esm2022/lib/wm-scalable-div/scalable-div.component.mjs +105 -0
- package/esm2022/lib/wm-spinner/wm-spinner.component.mjs +135 -0
- package/{esm2020 → esm2022}/lib/wm-state-icon/wm-state-icon.component.mjs +18 -18
- package/{esm2020 → esm2022}/lib/wm-tag/wm-tag.component.mjs +28 -28
- package/esm2022/lib/wm-tamplate-image/wm-template-image.component.mjs +71 -0
- package/{esm2020 → esm2022}/lib/wm-toggle/wm-toggle.component.mjs +31 -31
- package/{esm2020 → esm2022}/models/guidExtension.mjs +14 -14
- package/{esm2020 → esm2022}/public-api.mjs +27 -27
- package/{fesm2020 → fesm2022}/btv-base-controls.mjs +1430 -1430
- package/{fesm2020 → fesm2022}/btv-base-controls.mjs.map +1 -1
- package/index.d.ts +5 -5
- package/lib/basic.module.d.ts +33 -33
- package/lib/blink-message/blink-message.component.d.ts +20 -20
- package/lib/btv-icon-button/btv-counter-button.d.ts +12 -12
- package/lib/btv-icon-button/btv-icon-button.component.d.ts +30 -30
- package/lib/btv-progress/btv-progress.component.d.ts +20 -20
- package/lib/btv-search/btv-search.component.d.ts +31 -31
- package/lib/busy-indicator/busy-indicator.component.d.ts +7 -7
- package/lib/custom-tool-tip/custom-tool-tip.component.d.ts +35 -35
- package/lib/custom-tool-tip/tool-tip-renderer.directive.d.ts +49 -49
- package/lib/illustration/illustration.component.d.ts +10 -10
- package/lib/wm-avatar/avatar.component.d.ts +63 -63
- package/lib/wm-back-btn/wm-back-btn.component.d.ts +10 -10
- package/lib/wm-beta-text/wm-beta-text.component.d.ts +7 -7
- package/lib/wm-info/info-models.d.ts +21 -21
- package/lib/wm-info/wm-info.component.d.ts +34 -34
- package/lib/wm-info-card/wm-info-card.component.d.ts +9 -9
- package/lib/wm-no-content/wm-no-content.component.d.ts +11 -11
- package/lib/wm-panel-bar/wm-panel-bar.component.d.ts +25 -25
- package/lib/wm-scalable-div/scalable-div.component.d.ts +24 -24
- package/lib/wm-spinner/wm-spinner.component.d.ts +37 -37
- package/lib/wm-state-icon/wm-state-icon.component.d.ts +9 -9
- package/lib/wm-tag/wm-tag.component.d.ts +10 -10
- package/lib/wm-tamplate-image/wm-template-image.component.d.ts +49 -49
- package/lib/wm-toggle/wm-toggle.component.d.ts +11 -11
- package/models/guidExtension.d.ts +5 -5
- package/package.json +5 -11
- package/public-api.d.ts +24 -24
- package/esm2020/lib/blink-message/blink-message.component.mjs +0 -54
- package/esm2020/lib/btv-icon-button/btv-icon-button.component.mjs +0 -89
- package/esm2020/lib/btv-progress/btv-progress.component.mjs +0 -71
- package/esm2020/lib/btv-search/btv-search.component.mjs +0 -82
- package/esm2020/lib/custom-tool-tip/tool-tip-renderer.directive.mjs +0 -113
- package/esm2020/lib/wm-avatar/avatar.component.mjs +0 -175
- package/esm2020/lib/wm-info/wm-info.component.mjs +0 -239
- package/esm2020/lib/wm-panel-bar/wm-panel-bar.component.mjs +0 -78
- package/esm2020/lib/wm-scalable-div/scalable-div.component.mjs +0 -105
- package/esm2020/lib/wm-spinner/wm-spinner.component.mjs +0 -135
- package/esm2020/lib/wm-tamplate-image/wm-template-image.component.mjs +0 -71
- package/fesm2015/btv-base-controls.mjs +0 -1482
- package/fesm2015/btv-base-controls.mjs.map +0 -1
|
@@ -1,1482 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, Input, Directive, HostListener, SecurityContext, ChangeDetectionStrategy, ViewChild, EventEmitter, HostBinding, Output, NgModule } from '@angular/core';
|
|
3
|
-
import * as i1$1 from '@angular/cdk/overlay';
|
|
4
|
-
import { ConnectionPositionPair, OverlayModule } from '@angular/cdk/overlay';
|
|
5
|
-
import * as i1 from '@angular/common';
|
|
6
|
-
import { CommonModule } from '@angular/common';
|
|
7
|
-
import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
|
|
8
|
-
import * as i2 from '@angular/material/button-toggle';
|
|
9
|
-
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
|
10
|
-
import * as i1$2 from '@angular/platform-browser';
|
|
11
|
-
import { interval, fromEvent, timer } from 'rxjs';
|
|
12
|
-
import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
|
|
13
|
-
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
14
|
-
|
|
15
|
-
/**
|
|
16
|
-
* This component will be used to show custom tooltip
|
|
17
|
-
*
|
|
18
|
-
* This component will be rendered using OverlayModule of angular material
|
|
19
|
-
* This component will be rendered by directive on an Overlay
|
|
20
|
-
*
|
|
21
|
-
* CONSUMER will not be using this component directly
|
|
22
|
-
* This component will be hosted in an overlay by ToolTipRenderer directive
|
|
23
|
-
* This component exposes two properties. These two properties will be filled by ToolTipRenderer directive
|
|
24
|
-
* 1. text - This is a simple string which is to be shown in the tooltip; This will be injected in the ToolTipRenderer directive
|
|
25
|
-
* by the consumer
|
|
26
|
-
* 2. contentTemplate - This gives finer control on the content to be shown in the tooltip
|
|
27
|
-
*
|
|
28
|
-
* NOTE - ONLY one should be specified; If BOTH are specified then "template" will be rendered and "text" will be ignored
|
|
29
|
-
*/
|
|
30
|
-
class CustomToolTipComponent {
|
|
31
|
-
constructor() { }
|
|
32
|
-
ngOnInit() {
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
CustomToolTipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: CustomToolTipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
36
|
-
CustomToolTipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: CustomToolTipComponent, selector: "app-custom-tool-tip", inputs: { text: "text", contentTemplate: "contentTemplate" }, ngImport: i0, template: "<div class=\"tooltip-container\">\r\n <div class=\"mat-tooltip\">\r\n <ng-template #simpleText >\r\n {{text}}\r\n </ng-template>\r\n <ng-container *ngTemplateOutlet=\"contentTemplate || simpleText\">\r\n </ng-container>\r\n </div>\r\n </div>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.tooltip-container{position:relative;box-sizing:border-box;box-shadow:0 16px 16px -1px #051d391a;border-radius:4px;-webkit-appearance:none}.tooltip-container:before{content:\"\";display:block;width:0;height:0;border-style:solid;border-width:6px;border-color:transparent;left:50%;bottom:-12px;margin-left:-6.0625px;border-top-color:var(--pageBackgroundColor);position:absolute}.mat-tooltip{font-family:Inter,Verdana,Geneva,Tahoma,sans-serif;margin:0;transform-origin:center top;box-shadow:none;background:var(--pageBackgroundColor);color:var(--strongFontColor);border-radius:2px;z-index:12000;border-style:solid;border-width:0;padding:5px 5px 5px 6px;background-repeat:repeat-x;min-width:20px;text-align:center;font-size:14px;transform:scale(1)!important}.mat-tooltip.mat-tooltip-show{animation:none}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
37
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: CustomToolTipComponent, decorators: [{
|
|
38
|
-
type: Component,
|
|
39
|
-
args: [{ selector: 'app-custom-tool-tip', template: "<div class=\"tooltip-container\">\r\n <div class=\"mat-tooltip\">\r\n <ng-template #simpleText >\r\n {{text}}\r\n </ng-template>\r\n <ng-container *ngTemplateOutlet=\"contentTemplate || simpleText\">\r\n </ng-container>\r\n </div>\r\n </div>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.tooltip-container{position:relative;box-sizing:border-box;box-shadow:0 16px 16px -1px #051d391a;border-radius:4px;-webkit-appearance:none}.tooltip-container:before{content:\"\";display:block;width:0;height:0;border-style:solid;border-width:6px;border-color:transparent;left:50%;bottom:-12px;margin-left:-6.0625px;border-top-color:var(--pageBackgroundColor);position:absolute}.mat-tooltip{font-family:Inter,Verdana,Geneva,Tahoma,sans-serif;margin:0;transform-origin:center top;box-shadow:none;background:var(--pageBackgroundColor);color:var(--strongFontColor);border-radius:2px;z-index:12000;border-style:solid;border-width:0;padding:5px 5px 5px 6px;background-repeat:repeat-x;min-width:20px;text-align:center;font-size:14px;transform:scale(1)!important}.mat-tooltip.mat-tooltip-show{animation:none}\n"] }]
|
|
40
|
-
}], ctorParameters: function () { return []; }, propDecorators: { text: [{
|
|
41
|
-
type: Input
|
|
42
|
-
}], contentTemplate: [{
|
|
43
|
-
type: Input
|
|
44
|
-
}] } });
|
|
45
|
-
|
|
46
|
-
class ToolTipRendererDirective {
|
|
47
|
-
constructor(_overlay, _elementRef) {
|
|
48
|
-
this._overlay = _overlay;
|
|
49
|
-
this._elementRef = _elementRef;
|
|
50
|
-
/**
|
|
51
|
-
* This will be used to show tooltip or not
|
|
52
|
-
* This can be used to show the tooltip conditionally
|
|
53
|
-
*/
|
|
54
|
-
this.showToolTip = true;
|
|
55
|
-
this.useCustom = false;
|
|
56
|
-
}
|
|
57
|
-
/**
|
|
58
|
-
* Init life cycle event handler
|
|
59
|
-
*/
|
|
60
|
-
ngOnInit() { }
|
|
61
|
-
get refElement() {
|
|
62
|
-
if (this.useCustom || this.customAnchor)
|
|
63
|
-
return this.customAnchor;
|
|
64
|
-
return this._elementRef;
|
|
65
|
-
}
|
|
66
|
-
/**
|
|
67
|
-
* This method will be called whenever mouse enters in the Host element
|
|
68
|
-
* i.e. where this directive is applied
|
|
69
|
-
* This method will show the tooltip by instantiating the McToolTipComponent and attaching to the overlay
|
|
70
|
-
*/
|
|
71
|
-
show() {
|
|
72
|
-
if (this.refElement)
|
|
73
|
-
this.closeToolTip();
|
|
74
|
-
if (!this.showToolTip || (this.useCustom && !this.customAnchor)) {
|
|
75
|
-
return;
|
|
76
|
-
}
|
|
77
|
-
const positionPairs = [
|
|
78
|
-
new ConnectionPositionPair({ originX: 'center', originY: 'top' }, { overlayX: 'center', overlayY: 'bottom' }, 0, 0, 'mat-tooltip-panel-above'),
|
|
79
|
-
new ConnectionPositionPair({ originX: 'center', originY: 'bottom' }, { overlayX: 'center', overlayY: 'top' }, 0, 0, 'mat-tooltip-panel-below')
|
|
80
|
-
];
|
|
81
|
-
const positionStrategy = this._overlay.position()
|
|
82
|
-
.flexibleConnectedTo(this.refElement)
|
|
83
|
-
.withPositions(positionPairs)
|
|
84
|
-
.withFlexibleDimensions(true)
|
|
85
|
-
.withPush(true);
|
|
86
|
-
this._overlayRef = this._overlay.create({
|
|
87
|
-
panelClass: 'mat-tooltip-panel',
|
|
88
|
-
scrollStrategy: this._overlay.scrollStrategies.close(),
|
|
89
|
-
positionStrategy
|
|
90
|
-
});
|
|
91
|
-
// attach the component if it has not already attached to the overlay
|
|
92
|
-
if (this._overlayRef && !this._overlayRef.hasAttached()) {
|
|
93
|
-
const content = new ComponentPortal(CustomToolTipComponent);
|
|
94
|
-
// todo check this
|
|
95
|
-
const tooltipRef = this._overlayRef.attach(content);
|
|
96
|
-
tooltipRef.instance.text = this.text;
|
|
97
|
-
tooltipRef.instance.contentTemplate = this.contentTemplate;
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
/**
|
|
101
|
-
* This method will be called when mouse goes out of the host element
|
|
102
|
-
* i.e. where this directive is applied
|
|
103
|
-
* This method will close the tooltip by detaching the overlay from the view
|
|
104
|
-
*/
|
|
105
|
-
hide() {
|
|
106
|
-
this.closeToolTip();
|
|
107
|
-
}
|
|
108
|
-
/**
|
|
109
|
-
* Destroy lifecycle event handler
|
|
110
|
-
* This method will make sure to close the tooltip
|
|
111
|
-
* It will be needed in case when app is navigating to different page
|
|
112
|
-
* and user is still seeing the tooltip; In that case we do not want to hang around the
|
|
113
|
-
* tooltip after the page [on which tooltip visible] is destroyed
|
|
114
|
-
*/
|
|
115
|
-
ngOnDestroy() {
|
|
116
|
-
this.closeToolTip();
|
|
117
|
-
}
|
|
118
|
-
/**
|
|
119
|
-
* This method will close the tooltip by detaching the component from the overlay
|
|
120
|
-
*/
|
|
121
|
-
closeToolTip() {
|
|
122
|
-
if (this._overlayRef) {
|
|
123
|
-
this._overlayRef.detach();
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
ToolTipRendererDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ToolTipRendererDirective, deps: [{ token: i1$1.Overlay }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
128
|
-
ToolTipRendererDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: ToolTipRendererDirective, selector: "[customToolTip]", inputs: { showToolTip: "showToolTip", text: ["customToolTip", "text"], contentTemplate: "contentTemplate", customAnchor: "customAnchor", useCustom: "useCustom" }, host: { listeners: { "mousemove": "show($event)", "mouseleave": "hide()" } }, ngImport: i0 });
|
|
129
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ToolTipRendererDirective, decorators: [{
|
|
130
|
-
type: Directive,
|
|
131
|
-
args: [{
|
|
132
|
-
selector: '[customToolTip]'
|
|
133
|
-
}]
|
|
134
|
-
}], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i0.ElementRef }]; }, propDecorators: { showToolTip: [{
|
|
135
|
-
type: Input
|
|
136
|
-
}], text: [{
|
|
137
|
-
type: Input,
|
|
138
|
-
args: [`customToolTip`]
|
|
139
|
-
}], contentTemplate: [{
|
|
140
|
-
type: Input
|
|
141
|
-
}], customAnchor: [{
|
|
142
|
-
type: Input
|
|
143
|
-
}], useCustom: [{
|
|
144
|
-
type: Input
|
|
145
|
-
}], show: [{
|
|
146
|
-
type: HostListener,
|
|
147
|
-
args: ['mousemove', ['$event']]
|
|
148
|
-
}], hide: [{
|
|
149
|
-
type: HostListener,
|
|
150
|
-
args: ['mouseleave']
|
|
151
|
-
}] } });
|
|
152
|
-
|
|
153
|
-
/**
|
|
154
|
-
* list of default colors
|
|
155
|
-
*/
|
|
156
|
-
const defaultColors = [
|
|
157
|
-
'#1abc9c',
|
|
158
|
-
'#3498db',
|
|
159
|
-
'#f1c40f',
|
|
160
|
-
'#8e44ad',
|
|
161
|
-
'#e74c3c',
|
|
162
|
-
'#d35400',
|
|
163
|
-
'#2c3e50',
|
|
164
|
-
'#7f8c8d'
|
|
165
|
-
];
|
|
166
|
-
class AvatarComponent {
|
|
167
|
-
constructor(sanitizer) {
|
|
168
|
-
this.sanitizer = sanitizer;
|
|
169
|
-
this.avatarText = null;
|
|
170
|
-
this.size = 50;
|
|
171
|
-
this.avatarSrc = null;
|
|
172
|
-
this.round = true;
|
|
173
|
-
this.cornerRadius = 0;
|
|
174
|
-
this.textSizeRatio = 3;
|
|
175
|
-
this.fgColor = '#FFF';
|
|
176
|
-
this.style = {};
|
|
177
|
-
this.avatarColors = defaultColors;
|
|
178
|
-
this.avatarStyle = {};
|
|
179
|
-
this.hostStyle = {};
|
|
180
|
-
}
|
|
181
|
-
get name() { return this._name; }
|
|
182
|
-
set name(value) {
|
|
183
|
-
this._name = value;
|
|
184
|
-
this.avatarText = this.formTextAvatar(value);
|
|
185
|
-
}
|
|
186
|
-
;
|
|
187
|
-
;
|
|
188
|
-
get src() { return this._src; }
|
|
189
|
-
;
|
|
190
|
-
set src(value) {
|
|
191
|
-
this._src = value;
|
|
192
|
-
this.avatarSrc = this.transformSrc(value);
|
|
193
|
-
}
|
|
194
|
-
transformSrc(stringInBase64) {
|
|
195
|
-
if (!stringInBase64)
|
|
196
|
-
return null;
|
|
197
|
-
return this.sanitizer.sanitize(SecurityContext.RESOURCE_URL, this.sanitizer.bypassSecurityTrustResourceUrl(stringInBase64));
|
|
198
|
-
}
|
|
199
|
-
formTextAvatar(val) {
|
|
200
|
-
if (!val)
|
|
201
|
-
return '?';
|
|
202
|
-
const name = val.trim();
|
|
203
|
-
const splitted = name.split(' ');
|
|
204
|
-
if (splitted.length === 1) {
|
|
205
|
-
if (name.length === 1) {
|
|
206
|
-
return name[0];
|
|
207
|
-
}
|
|
208
|
-
return name[0] + name[1];
|
|
209
|
-
}
|
|
210
|
-
const length = Math.min(splitted.length, 3);
|
|
211
|
-
splitted.length = length; // leave first 3 words top
|
|
212
|
-
return splitted.map(it => it[0]).join('');
|
|
213
|
-
}
|
|
214
|
-
/**
|
|
215
|
-
* Detect inputs change
|
|
216
|
-
*
|
|
217
|
-
* param {{ [propKey: string]: SimpleChange }} changes
|
|
218
|
-
*
|
|
219
|
-
* memberof AvatarComponent
|
|
220
|
-
*/
|
|
221
|
-
ngOnChanges(changes) {
|
|
222
|
-
// reinitialize the avatar component when a source property value has changed
|
|
223
|
-
// the fallback system must be re-invoked with the new values.
|
|
224
|
-
this.initializeAvatar();
|
|
225
|
-
}
|
|
226
|
-
getStyles() {
|
|
227
|
-
if (!this.src) {
|
|
228
|
-
this.avatarStyle = this.getInitialsStyle(this.avatarText);
|
|
229
|
-
}
|
|
230
|
-
else {
|
|
231
|
-
this.avatarStyle = this.getImageStyle();
|
|
232
|
-
}
|
|
233
|
-
}
|
|
234
|
-
/**
|
|
235
|
-
* Initialize the avatar component and its fallback system
|
|
236
|
-
*/
|
|
237
|
-
initializeAvatar() {
|
|
238
|
-
if (!this.src && !this.name)
|
|
239
|
-
return;
|
|
240
|
-
this.getStyles();
|
|
241
|
-
this.hostStyle = {
|
|
242
|
-
width: this.size + 'px',
|
|
243
|
-
height: this.size + 'px'
|
|
244
|
-
};
|
|
245
|
-
}
|
|
246
|
-
/**
|
|
247
|
-
*
|
|
248
|
-
* returns initials style
|
|
249
|
-
*
|
|
250
|
-
*/
|
|
251
|
-
getInitialsStyle(avatarValue) {
|
|
252
|
-
return Object.assign({ textAlign: 'center', borderRadius: this.round ? '100%' : this.cornerRadius + 'px', border: this.borderColor ? '1px solid ' + this.borderColor : '', textTransform: 'uppercase', color: this.fgColor, backgroundColor: this.bgColor
|
|
253
|
-
? this.bgColor
|
|
254
|
-
: this.getRandomColor(avatarValue), font: Math.floor(+this.size / this.textSizeRatio) +
|
|
255
|
-
'px Helvetica, Arial, sans-serif', lineHeight: this.size + 'px' }, this.style);
|
|
256
|
-
}
|
|
257
|
-
/**
|
|
258
|
-
*
|
|
259
|
-
* returns image style
|
|
260
|
-
*/
|
|
261
|
-
getImageStyle() {
|
|
262
|
-
return Object.assign({ maxWidth: '100%', borderRadius: this.round ? '50%' : this.cornerRadius + 'px', border: this.borderColor ? '1px solid ' + this.borderColor : '', width: this.size + 'px', height: this.size + 'px' }, this.style);
|
|
263
|
-
}
|
|
264
|
-
getRandomColor(avatarText) {
|
|
265
|
-
if (!avatarText) {
|
|
266
|
-
return 'transparent';
|
|
267
|
-
}
|
|
268
|
-
const asciiCodeSum = this.calculateAsciiCode(avatarText);
|
|
269
|
-
return this.avatarColors[asciiCodeSum % this.avatarColors.length];
|
|
270
|
-
}
|
|
271
|
-
calculateAsciiCode(value) {
|
|
272
|
-
return value
|
|
273
|
-
.split('')
|
|
274
|
-
.map(letter => letter.charCodeAt(0))
|
|
275
|
-
.reduce((previous, current) => previous + current);
|
|
276
|
-
}
|
|
277
|
-
}
|
|
278
|
-
AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AvatarComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
279
|
-
AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: AvatarComponent, selector: "wm-avatar", inputs: { name: "name", size: "size", src: "src", value: "value", round: "round", cornerRadius: "cornerRadius", textSizeRatio: "textSizeRatio", bgColor: "bgColor", fgColor: "fgColor", borderColor: "borderColor", style: "style" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"avatar-container\" [ngStyle]=\"hostStyle\">\r\n <img *ngIf=\"avatarSrc; else textAvatar\" \r\n [src]=\"avatarSrc\" \r\n [width]=\"size\" \r\n [height]=\"size\" \r\n [ngStyle]=\"avatarStyle\"\r\n class=\"avatar-content\" loading=\"lazy\" />\r\n <ng-template #textAvatar>\r\n <div *ngIf=\"avatarText\" class=\"avatar-content\" [ngStyle]=\"avatarStyle\">\r\n {{ avatarText }}\r\n </div>\r\n </ng-template>\r\n</div>", styles: [":host{border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
280
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
281
|
-
type: Component,
|
|
282
|
-
args: [{ selector: 'wm-avatar', template: "<div class=\"avatar-container\" [ngStyle]=\"hostStyle\">\r\n <img *ngIf=\"avatarSrc; else textAvatar\" \r\n [src]=\"avatarSrc\" \r\n [width]=\"size\" \r\n [height]=\"size\" \r\n [ngStyle]=\"avatarStyle\"\r\n class=\"avatar-content\" loading=\"lazy\" />\r\n <ng-template #textAvatar>\r\n <div *ngIf=\"avatarText\" class=\"avatar-content\" [ngStyle]=\"avatarStyle\">\r\n {{ avatarText }}\r\n </div>\r\n </ng-template>\r\n</div>", styles: [":host{border-radius:50%}\n"] }]
|
|
283
|
-
}], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }]; }, propDecorators: { name: [{
|
|
284
|
-
type: Input
|
|
285
|
-
}], size: [{
|
|
286
|
-
type: Input
|
|
287
|
-
}], src: [{
|
|
288
|
-
type: Input
|
|
289
|
-
}], value: [{
|
|
290
|
-
type: Input
|
|
291
|
-
}], round: [{
|
|
292
|
-
type: Input
|
|
293
|
-
}], cornerRadius: [{
|
|
294
|
-
type: Input
|
|
295
|
-
}], textSizeRatio: [{
|
|
296
|
-
type: Input
|
|
297
|
-
}], bgColor: [{
|
|
298
|
-
type: Input
|
|
299
|
-
}], fgColor: [{
|
|
300
|
-
type: Input
|
|
301
|
-
}], borderColor: [{
|
|
302
|
-
type: Input
|
|
303
|
-
}], style: [{
|
|
304
|
-
type: Input
|
|
305
|
-
}] } });
|
|
306
|
-
|
|
307
|
-
class BlinkMessageComponent {
|
|
308
|
-
constructor(change) {
|
|
309
|
-
this.change = change;
|
|
310
|
-
this.message = 'Copied';
|
|
311
|
-
this._intervalNumber = 1;
|
|
312
|
-
this._duration = interval(this.intervalNumber * 1000);
|
|
313
|
-
this.show = false;
|
|
314
|
-
}
|
|
315
|
-
get intervalNumber() { return this._intervalNumber; }
|
|
316
|
-
set intervalNumber(value) {
|
|
317
|
-
if (this._intervalNumber === value)
|
|
318
|
-
return;
|
|
319
|
-
if (!value)
|
|
320
|
-
return;
|
|
321
|
-
this._intervalNumber = value;
|
|
322
|
-
this._duration = interval(this.intervalNumber * 1000);
|
|
323
|
-
}
|
|
324
|
-
get actionId() { return this._actionId; }
|
|
325
|
-
set actionId(value) {
|
|
326
|
-
if (this._actionId === value)
|
|
327
|
-
return;
|
|
328
|
-
if (!value)
|
|
329
|
-
return;
|
|
330
|
-
this.show = true;
|
|
331
|
-
this.selectScript();
|
|
332
|
-
}
|
|
333
|
-
selectScript() {
|
|
334
|
-
if (this._subscription)
|
|
335
|
-
this._subscription.unsubscribe();
|
|
336
|
-
this._subscription = this._duration.subscribe(() => {
|
|
337
|
-
this.show = false;
|
|
338
|
-
this.change.detectChanges();
|
|
339
|
-
this._subscription.unsubscribe();
|
|
340
|
-
this._subscription = undefined;
|
|
341
|
-
});
|
|
342
|
-
}
|
|
343
|
-
}
|
|
344
|
-
BlinkMessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: BlinkMessageComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
345
|
-
BlinkMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: BlinkMessageComponent, selector: "wm-blink-message", inputs: { message: "message", intervalNumber: "intervalNumber", actionId: "actionId" }, ngImport: i0, template: "<span class=\"copy-label\" *ngIf=\"show\"> {{ message }} </span>", styles: [".copy-label{color:var(--brandColor);margin-right:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
346
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: BlinkMessageComponent, decorators: [{
|
|
347
|
-
type: Component,
|
|
348
|
-
args: [{ selector: 'wm-blink-message', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"copy-label\" *ngIf=\"show\"> {{ message }} </span>", styles: [".copy-label{color:var(--brandColor);margin-right:10px}\n"] }]
|
|
349
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { message: [{
|
|
350
|
-
type: Input
|
|
351
|
-
}], intervalNumber: [{
|
|
352
|
-
type: Input
|
|
353
|
-
}], actionId: [{
|
|
354
|
-
type: Input
|
|
355
|
-
}] } });
|
|
356
|
-
|
|
357
|
-
class WmTemplateImageComponent {
|
|
358
|
-
constructor() {
|
|
359
|
-
this.require = ['mask-image', '-webkit-mask-image'];
|
|
360
|
-
this.classes = 'icon-svg';
|
|
361
|
-
this._size = '24px';
|
|
362
|
-
this._sizeBox = undefined;
|
|
363
|
-
}
|
|
364
|
-
get size() { return this._size; }
|
|
365
|
-
set size(value) {
|
|
366
|
-
this._size = value;
|
|
367
|
-
}
|
|
368
|
-
get sizeBox() { return this._sizeBox; }
|
|
369
|
-
set sizeBox(value) {
|
|
370
|
-
this._sizeBox = value;
|
|
371
|
-
}
|
|
372
|
-
get getStyles() {
|
|
373
|
-
if (!this.container.nativeElement)
|
|
374
|
-
return undefined;
|
|
375
|
-
if (this.require.some(it => this.container.nativeElement.style[it] !== undefined)) {
|
|
376
|
-
return {
|
|
377
|
-
'-webkit-mask-position': 'center',
|
|
378
|
-
'-webkit-mask-repeat': 'no-repeat',
|
|
379
|
-
'-webkit-mask-size': this.size,
|
|
380
|
-
'-webkit-mask-image': `url(./assets/icon/svg/${this.icon}.svg)`,
|
|
381
|
-
'mask-image': `url(./assets/icon/svg/${this.icon}.svg)`,
|
|
382
|
-
'mask-size': this.size,
|
|
383
|
-
'width': this.sizeBox ? this.sizeBox : this.size,
|
|
384
|
-
'height': this.sizeBox ? this.sizeBox : this.size,
|
|
385
|
-
'background-color': this.backgroundColor,
|
|
386
|
-
};
|
|
387
|
-
}
|
|
388
|
-
return {
|
|
389
|
-
'background-image': `url(./assets/icon/svg/${this.icon}.svg)`,
|
|
390
|
-
'background-repeat': 'no-repeat',
|
|
391
|
-
'background-position': 'center',
|
|
392
|
-
'background-size': 'contain',
|
|
393
|
-
'background-color': 'transparent',
|
|
394
|
-
'width': this.sizeBox ? this.sizeBox : this.size,
|
|
395
|
-
'height': this.sizeBox ? this.sizeBox : this.size
|
|
396
|
-
};
|
|
397
|
-
}
|
|
398
|
-
}
|
|
399
|
-
WmTemplateImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WmTemplateImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
400
|
-
WmTemplateImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: WmTemplateImageComponent, selector: "wm-template-image", inputs: { icon: "icon", disabled: "disabled", active: "active", light: "light", classes: "classes", backgroundColor: "backgroundColor", size: "size", sizeBox: "sizeBox" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["maskContainer"], descendants: true, static: true }], ngImport: i0, template: "<div #maskContainer class=\"{{classes}}\" [ngClass]=\"{'disabled': disabled,\r\n'active': active, 'light': light }\" [ngStyle]=\"getStyles\">\r\n</div>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}:host{display:block;margin:auto}.icon-svg{background-color:var(--strongFontColor)}.disabled{background-color:var(--mediumFontColor)}.active{background-color:var(--brandColor);border:none}.light{background-color:var(--disabledTextColor)}.on-brand{background-color:var(--onBrandTextColor)}.on-disabled{background-color:var(--disabledTextColor)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
401
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WmTemplateImageComponent, decorators: [{
|
|
402
|
-
type: Component,
|
|
403
|
-
args: [{ selector: 'wm-template-image', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #maskContainer class=\"{{classes}}\" [ngClass]=\"{'disabled': disabled,\r\n'active': active, 'light': light }\" [ngStyle]=\"getStyles\">\r\n</div>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}:host{display:block;margin:auto}.icon-svg{background-color:var(--strongFontColor)}.disabled{background-color:var(--mediumFontColor)}.active{background-color:var(--brandColor);border:none}.light{background-color:var(--disabledTextColor)}.on-brand{background-color:var(--onBrandTextColor)}.on-disabled{background-color:var(--disabledTextColor)}\n"] }]
|
|
404
|
-
}], propDecorators: { container: [{
|
|
405
|
-
type: ViewChild,
|
|
406
|
-
args: ['maskContainer', { static: true }]
|
|
407
|
-
}], icon: [{
|
|
408
|
-
type: Input
|
|
409
|
-
}], disabled: [{
|
|
410
|
-
type: Input
|
|
411
|
-
}], active: [{
|
|
412
|
-
type: Input
|
|
413
|
-
}], light: [{
|
|
414
|
-
type: Input
|
|
415
|
-
}], classes: [{
|
|
416
|
-
type: Input
|
|
417
|
-
}], backgroundColor: [{
|
|
418
|
-
type: Input
|
|
419
|
-
}], size: [{
|
|
420
|
-
type: Input
|
|
421
|
-
}], sizeBox: [{
|
|
422
|
-
type: Input
|
|
423
|
-
}] } });
|
|
424
|
-
|
|
425
|
-
class BtvIconButtonComponent {
|
|
426
|
-
constructor() {
|
|
427
|
-
this.titleText = '';
|
|
428
|
-
this.disabled = false;
|
|
429
|
-
this.size = 'large';
|
|
430
|
-
this.icon = '';
|
|
431
|
-
this.changed = false;
|
|
432
|
-
this.isTabStop = false;
|
|
433
|
-
this.light = false;
|
|
434
|
-
this.buttonClasses = '';
|
|
435
|
-
this.imageClasses = 'icon-svg';
|
|
436
|
-
this.danger = false;
|
|
437
|
-
this.unavailableText = "Unavailable";
|
|
438
|
-
this.isHover = false;
|
|
439
|
-
this.floor = Math.floor;
|
|
440
|
-
this.isInFullScreen = false;
|
|
441
|
-
this.iClick = new EventEmitter();
|
|
442
|
-
}
|
|
443
|
-
get getIsDisabled() { return this.disabled; }
|
|
444
|
-
get getIsSmall() { return this.size === 'small'; }
|
|
445
|
-
get getIsMedium() { return this.size === 'medium'; }
|
|
446
|
-
get getIsDanger() { return this.danger; }
|
|
447
|
-
get iconSize() {
|
|
448
|
-
switch (this.size) {
|
|
449
|
-
case 'small': return 16;
|
|
450
|
-
case 'medium': return 20;
|
|
451
|
-
default: return 24;
|
|
452
|
-
}
|
|
453
|
-
}
|
|
454
|
-
get animate() {
|
|
455
|
-
return {
|
|
456
|
-
type: 'zoom',
|
|
457
|
-
duration: 200
|
|
458
|
-
};
|
|
459
|
-
}
|
|
460
|
-
onClick($event) {
|
|
461
|
-
if (this.disabled)
|
|
462
|
-
return;
|
|
463
|
-
this.iClick.emit($event);
|
|
464
|
-
}
|
|
465
|
-
}
|
|
466
|
-
BtvIconButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: BtvIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
467
|
-
BtvIconButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: BtvIconButtonComponent, selector: "btv-icon-button", inputs: { titleText: "titleText", disabled: "disabled", size: "size", icon: "icon", changed: "changed", isTabStop: "isTabStop", light: "light", buttonClasses: "buttonClasses", imageClasses: "imageClasses", danger: "danger", unavailableText: "unavailableText" }, outputs: { iClick: "iClick" }, host: { properties: { "class.disabled": "this.getIsDisabled", "class.small": "this.getIsSmall", "class.medium": "this.getIsMedium", "class.danger": "this.getIsDanger" } }, ngImport: i0, template: "<button class=\"icon flex-row {{buttonClasses}}\" (click)=\"onClick($event)\" type=\"button\" #button\r\n [tabindex]=\"(!isTabStop || disabled) ? -1 : undefined\" [showToolTip]=\"!!titleText\" customToolTip [contentTemplate]=\"template\">\r\n\r\n <wm-template-image [icon]=\"icon\" [size]=\"floor(iconSize * (isHover ? 1.1: 1)) + 'px'\" [active]=\"!disabled && changed\"\r\n [light]=\"light\" [classes]=\"imageClasses\">\r\n </wm-template-image>\r\n <ng-content></ng-content>\r\n\r\n</button>\r\n\r\n<ng-template #template>\r\n <span class=\"tooltip-text\"> {{titleText}} </span>\r\n <span *ngIf=\"disabled\" class=\"tooltip-text\"> - {{unavailableText}} </span>\r\n</ng-template>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}:host{display:block;background:var(--pageBackgroundColor);border:1px solid;border-radius:4px;border-color:var(--secondaryHover);cursor:pointer;box-sizing:border-box;width:36px;height:36px;flex-shrink:0}:host:focus .icon,:host:hover .icon{outline:none;background:var(--secondaryHover)}:host(.u-no-border){border-width:0px}:host(.small){width:16px;height:16px}:host(.medium){width:30px;height:30px}:host(.disabled){background-color:var(--disabledColor);border-color:var(--disabledColor);color:var(--lightFontColor);cursor:default}:host(.disabled):hover{background-color:var(--disabledColor);border-color:var(--disabledColor)}:host(.disabled) .icon{cursor:default}:host(.danger){background-color:var(--dangerColor);border-color:var(--warningColor)}.tooltip-text{align-self:center}.tooltip-disabled{font-size:14px -2;counter-reset:var(--lightFontColor)}.icon{justify-content:center;align-items:center;width:100%;height:100%;border:0px;cursor:pointer;color:var(--strongFontColor);outline:0px;padding:0;background:transparent;border-radius:inherit}.wm-counter-button{position:relative}.wm-counter{display:inline-block;width:16px;height:16px;line-height:16px;position:absolute;top:0;right:0;border:none;background-color:var(--dangerColor);border-radius:50%;font-size:10px;font-weight:700;text-align:center;color:var(--strongFontColor);text-indent:-1px;overflow:hidden;white-space:nowrap}.u-btn-validate{border-color:var(--dangerColor);background-color:var(--dangerColor);color:var(--onBrandTextColor)}.u-btn-validate:hover{background-color:var(--dangerColor)}.u-btn-primary{border-color:var(--brandColor);background-color:var(--brandColor);color:var(--onBrandTextColor)}.u-btn-primary:hover{background-color:var(--onBrandHoverColor)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WmTemplateImageComponent, selector: "wm-template-image", inputs: ["icon", "disabled", "active", "light", "classes", "backgroundColor", "size", "sizeBox"] }, { kind: "directive", type: ToolTipRendererDirective, selector: "[customToolTip]", inputs: ["showToolTip", "customToolTip", "contentTemplate", "customAnchor", "useCustom"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
468
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: BtvIconButtonComponent, decorators: [{
|
|
469
|
-
type: Component,
|
|
470
|
-
args: [{ selector: 'btv-icon-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"icon flex-row {{buttonClasses}}\" (click)=\"onClick($event)\" type=\"button\" #button\r\n [tabindex]=\"(!isTabStop || disabled) ? -1 : undefined\" [showToolTip]=\"!!titleText\" customToolTip [contentTemplate]=\"template\">\r\n\r\n <wm-template-image [icon]=\"icon\" [size]=\"floor(iconSize * (isHover ? 1.1: 1)) + 'px'\" [active]=\"!disabled && changed\"\r\n [light]=\"light\" [classes]=\"imageClasses\">\r\n </wm-template-image>\r\n <ng-content></ng-content>\r\n\r\n</button>\r\n\r\n<ng-template #template>\r\n <span class=\"tooltip-text\"> {{titleText}} </span>\r\n <span *ngIf=\"disabled\" class=\"tooltip-text\"> - {{unavailableText}} </span>\r\n</ng-template>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}:host{display:block;background:var(--pageBackgroundColor);border:1px solid;border-radius:4px;border-color:var(--secondaryHover);cursor:pointer;box-sizing:border-box;width:36px;height:36px;flex-shrink:0}:host:focus .icon,:host:hover .icon{outline:none;background:var(--secondaryHover)}:host(.u-no-border){border-width:0px}:host(.small){width:16px;height:16px}:host(.medium){width:30px;height:30px}:host(.disabled){background-color:var(--disabledColor);border-color:var(--disabledColor);color:var(--lightFontColor);cursor:default}:host(.disabled):hover{background-color:var(--disabledColor);border-color:var(--disabledColor)}:host(.disabled) .icon{cursor:default}:host(.danger){background-color:var(--dangerColor);border-color:var(--warningColor)}.tooltip-text{align-self:center}.tooltip-disabled{font-size:14px -2;counter-reset:var(--lightFontColor)}.icon{justify-content:center;align-items:center;width:100%;height:100%;border:0px;cursor:pointer;color:var(--strongFontColor);outline:0px;padding:0;background:transparent;border-radius:inherit}.wm-counter-button{position:relative}.wm-counter{display:inline-block;width:16px;height:16px;line-height:16px;position:absolute;top:0;right:0;border:none;background-color:var(--dangerColor);border-radius:50%;font-size:10px;font-weight:700;text-align:center;color:var(--strongFontColor);text-indent:-1px;overflow:hidden;white-space:nowrap}.u-btn-validate{border-color:var(--dangerColor);background-color:var(--dangerColor);color:var(--onBrandTextColor)}.u-btn-validate:hover{background-color:var(--dangerColor)}.u-btn-primary{border-color:var(--brandColor);background-color:var(--brandColor);color:var(--onBrandTextColor)}.u-btn-primary:hover{background-color:var(--onBrandHoverColor)}\n"] }]
|
|
471
|
-
}], ctorParameters: function () { return []; }, propDecorators: { getIsDisabled: [{
|
|
472
|
-
type: HostBinding,
|
|
473
|
-
args: ['class.disabled']
|
|
474
|
-
}], getIsSmall: [{
|
|
475
|
-
type: HostBinding,
|
|
476
|
-
args: ['class.small']
|
|
477
|
-
}], getIsMedium: [{
|
|
478
|
-
type: HostBinding,
|
|
479
|
-
args: ['class.medium']
|
|
480
|
-
}], getIsDanger: [{
|
|
481
|
-
type: HostBinding,
|
|
482
|
-
args: ['class.danger']
|
|
483
|
-
}], titleText: [{
|
|
484
|
-
type: Input
|
|
485
|
-
}], disabled: [{
|
|
486
|
-
type: Input
|
|
487
|
-
}], size: [{
|
|
488
|
-
type: Input
|
|
489
|
-
}], icon: [{
|
|
490
|
-
type: Input
|
|
491
|
-
}], changed: [{
|
|
492
|
-
type: Input
|
|
493
|
-
}], isTabStop: [{
|
|
494
|
-
type: Input
|
|
495
|
-
}], light: [{
|
|
496
|
-
type: Input
|
|
497
|
-
}], buttonClasses: [{
|
|
498
|
-
type: Input
|
|
499
|
-
}], imageClasses: [{
|
|
500
|
-
type: Input
|
|
501
|
-
}], danger: [{
|
|
502
|
-
type: Input
|
|
503
|
-
}], unavailableText: [{
|
|
504
|
-
type: Input
|
|
505
|
-
}], iClick: [{
|
|
506
|
-
type: Output
|
|
507
|
-
}] } });
|
|
508
|
-
|
|
509
|
-
class BtvProgressComponent {
|
|
510
|
-
constructor() {
|
|
511
|
-
this.relativeValue = 0;
|
|
512
|
-
this._val = 0;
|
|
513
|
-
this.height = 8;
|
|
514
|
-
this._max = 0;
|
|
515
|
-
this.color = '#ffffff';
|
|
516
|
-
this._backColor = '#4e5a6b';
|
|
517
|
-
this.showFlag = false;
|
|
518
|
-
}
|
|
519
|
-
get val() {
|
|
520
|
-
return this._val;
|
|
521
|
-
}
|
|
522
|
-
set val(val) {
|
|
523
|
-
this._val = val;
|
|
524
|
-
this.relativeValue = this.calcRelativeValue(val, this.max);
|
|
525
|
-
}
|
|
526
|
-
get max() {
|
|
527
|
-
return this._max;
|
|
528
|
-
}
|
|
529
|
-
set max(m) {
|
|
530
|
-
this._max = m;
|
|
531
|
-
this.relativeValue = this.calcRelativeValue(this._val, m);
|
|
532
|
-
}
|
|
533
|
-
set backColor(value) {
|
|
534
|
-
if (value) {
|
|
535
|
-
this._backColor = value;
|
|
536
|
-
}
|
|
537
|
-
else {
|
|
538
|
-
this._backColor = '#4e5a6b';
|
|
539
|
-
}
|
|
540
|
-
}
|
|
541
|
-
get backColor() {
|
|
542
|
-
return this._backColor;
|
|
543
|
-
}
|
|
544
|
-
getFlagPosition() {
|
|
545
|
-
const max = this.max;
|
|
546
|
-
const val = this.val;
|
|
547
|
-
if (!max)
|
|
548
|
-
return '0';
|
|
549
|
-
const percent = val / max * 100;
|
|
550
|
-
return percent + '%';
|
|
551
|
-
}
|
|
552
|
-
calcRelativeValue(value, max) {
|
|
553
|
-
if (!max)
|
|
554
|
-
return 100;
|
|
555
|
-
return (value / max) * 100;
|
|
556
|
-
}
|
|
557
|
-
}
|
|
558
|
-
BtvProgressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: BtvProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
559
|
-
BtvProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: BtvProgressComponent, selector: "btv-progress", inputs: { height: "height", val: "val", max: "max", color: "color", backColor: "backColor", showFlag: "showFlag" }, ngImport: i0, template: "<div class=\"progress-wrap\" [ngStyle]=\"{'height': height + 'px'}\">\r\n <div class=\"progress\" [ngStyle]=\"{'background-color': backColor}\">\r\n <div class=\"progress-fill\" [ngStyle]=\"{'width': relativeValue + '%', 'background-color': color}\"></div>\r\n <!--workaround for css image resolve plugin-->\r\n <div *ngIf=\"showFlag\" class=\"flag\" [ngStyle]=\"{\r\n 'margin-left': getFlagPosition(),\r\n 'background-image': 'url(./assets/img/flag.png)' \r\n }\">\r\n </div>\r\n </div>\r\n</div>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.progress-wrap{display:block;width:100%;height:8px}.progress{width:100%;height:100%;position:relative}.progress-fill{position:absolute;height:100%}.flag{height:14px;width:8px;margin-top:-4px;position:absolute;background-repeat:no-repeat;transform:scaleY(.7)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
560
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: BtvProgressComponent, decorators: [{
|
|
561
|
-
type: Component,
|
|
562
|
-
args: [{ selector: 'btv-progress', template: "<div class=\"progress-wrap\" [ngStyle]=\"{'height': height + 'px'}\">\r\n <div class=\"progress\" [ngStyle]=\"{'background-color': backColor}\">\r\n <div class=\"progress-fill\" [ngStyle]=\"{'width': relativeValue + '%', 'background-color': color}\"></div>\r\n <!--workaround for css image resolve plugin-->\r\n <div *ngIf=\"showFlag\" class=\"flag\" [ngStyle]=\"{\r\n 'margin-left': getFlagPosition(),\r\n 'background-image': 'url(./assets/img/flag.png)' \r\n }\">\r\n </div>\r\n </div>\r\n</div>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.progress-wrap{display:block;width:100%;height:8px}.progress{width:100%;height:100%;position:relative}.progress-fill{position:absolute;height:100%}.flag{height:14px;width:8px;margin-top:-4px;position:absolute;background-repeat:no-repeat;transform:scaleY(.7)}\n"] }]
|
|
563
|
-
}], propDecorators: { height: [{
|
|
564
|
-
type: Input
|
|
565
|
-
}], val: [{
|
|
566
|
-
type: Input
|
|
567
|
-
}], max: [{
|
|
568
|
-
type: Input
|
|
569
|
-
}], color: [{
|
|
570
|
-
type: Input
|
|
571
|
-
}], backColor: [{
|
|
572
|
-
type: Input
|
|
573
|
-
}], showFlag: [{
|
|
574
|
-
type: Input
|
|
575
|
-
}] } });
|
|
576
|
-
|
|
577
|
-
class ViewState {
|
|
578
|
-
get isLaptop() { return window.innerWidth <= 1440; }
|
|
579
|
-
get isMobile() { return window.innerWidth <= 1024; }
|
|
580
|
-
get isPhone() { return window.innerWidth <= 767; }
|
|
581
|
-
isWidthLessOrEqualTo(width) { return window.innerWidth <= width; }
|
|
582
|
-
}
|
|
583
|
-
class BtvSearch {
|
|
584
|
-
constructor() {
|
|
585
|
-
this.widthAuto = false;
|
|
586
|
-
this.isSmall = false;
|
|
587
|
-
this.placeholder = 'Search';
|
|
588
|
-
this.keepExpanded = false;
|
|
589
|
-
this.searchFocus = false;
|
|
590
|
-
this.view = new ViewState();
|
|
591
|
-
this.searchTextChange = new EventEmitter();
|
|
592
|
-
this.expanded = false;
|
|
593
|
-
}
|
|
594
|
-
set searchText(value) {
|
|
595
|
-
if (value === this._searchText)
|
|
596
|
-
return;
|
|
597
|
-
this._searchText = value;
|
|
598
|
-
if (value) {
|
|
599
|
-
this.expanded = true;
|
|
600
|
-
}
|
|
601
|
-
}
|
|
602
|
-
get searchText() {
|
|
603
|
-
return this._searchText || '';
|
|
604
|
-
}
|
|
605
|
-
ngOnInit() {
|
|
606
|
-
let box = this.box.nativeElement;
|
|
607
|
-
let observable = fromEvent(box, 'keyup').pipe(debounceTime(400), distinctUntilChanged(), map(x => x.target.value));
|
|
608
|
-
this._searchSubscription = observable.subscribe(it => {
|
|
609
|
-
this.searchTextChange.emit(it);
|
|
610
|
-
});
|
|
611
|
-
}
|
|
612
|
-
ngOnDestroy() {
|
|
613
|
-
if (this._searchSubscription)
|
|
614
|
-
this._searchSubscription.unsubscribe();
|
|
615
|
-
}
|
|
616
|
-
toggleSearch() {
|
|
617
|
-
this.expanded = !this.expanded;
|
|
618
|
-
if (this.box && this.expanded) {
|
|
619
|
-
this.box.nativeElement.focus();
|
|
620
|
-
}
|
|
621
|
-
}
|
|
622
|
-
onFocusOut() {
|
|
623
|
-
if (!this.box.nativeElement.value && this.expanded && !this.keepExpanded) {
|
|
624
|
-
this.expanded = false;
|
|
625
|
-
}
|
|
626
|
-
this.searchFocus = false;
|
|
627
|
-
}
|
|
628
|
-
}
|
|
629
|
-
BtvSearch.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: BtvSearch, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
630
|
-
BtvSearch.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: BtvSearch, selector: "btv-search", inputs: { widthAuto: "widthAuto", isSmall: "isSmall", searchRight: "searchRight", placeholder: "placeholder", keepExpanded: "keepExpanded", searchText: "searchText" }, outputs: { searchTextChange: "searchTextChange" }, viewQueries: [{ propertyName: "box", first: true, predicate: ["searchBox"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"wm-search flex-row\" [ngClass]=\"{'search-reverse': searchRight == 'right', 'always-opened': keepExpanded, 'small': isSmall}\">\r\n\t<div class=\"search-icon inline-col\" [ngClass]=\"{'search-toggle-disabled': keepExpanded || !searchFocus}\"\r\n\t\t(click)=\"toggleSearch()\">\r\n\t\t<wm-template-image class=\"marginXA\" icon=\"search\" [light]=\"(!expanded && !searchFocus) || keepExpanded\">\r\n\t\t</wm-template-image>\r\n\t</div>\r\n\t<div class=\"search-wrap flex-col\"\r\n\t\t[ngClass]=\"{'search-open': keepExpanded || expanded, 'search-focused': (expanded && searchFocus) || (keepExpanded && searchFocus),\r\n\t'width-auto': widthAuto}\">\r\n\t\t<input class=\"search-field\" #searchBox \r\n\t\t\t[value]=\"searchText\" \r\n\t\t\t[placeholder]=\"placeholder\"\r\n\t\t\t(focus)=\"searchFocus = true\" (focusout)=\"onFocusOut()\">\r\n\t</div>\r\n</div>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.wm-search,.search-wrap,.search-field{box-sizing:border-box}.wm-search:hover{border-color:var(--brandColor)}.wm-search{background:var(--pageBackgroundColor);height:36px;max-width:280px;border-radius:4px;align-items:center;flex:1 0 100%;flex-shrink:0;border:1px solid var(--secondaryHover)}.wm-search.small{max-width:140px}.wm-search.small .search-open{width:auto}.search-icon{width:36px;height:100%;flex-shrink:0;cursor:pointer}.search-icon.search-toggle-disabled{cursor:text}.search-wrap{width:0px;height:100%;color:var(--mediumFontColor);direction:ltr}.search-open{width:280px;max-width:100%;flex-grow:1;flex-shrink:1}.search-open.width-auto{width:auto}.search-open:hover,.search-focused{color:var(--strongFontColor)}.search-field{width:100%;height:100%;color:inherit;text-indent:.1em;font-size:16px;background-color:transparent;border:none;outline:none;padding:0 8px 0 0}.search-field::placeholder{color:var(--disabledTextColor)}.search-reverse{display:flex;flex-direction:row-reverse}.search-reverse .search-wrap{direction:rtl}.search-reverse .search-field{direction:ltr;padding:0 8px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: WmTemplateImageComponent, selector: "wm-template-image", inputs: ["icon", "disabled", "active", "light", "classes", "backgroundColor", "size", "sizeBox"] }] });
|
|
631
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: BtvSearch, decorators: [{
|
|
632
|
-
type: Component,
|
|
633
|
-
args: [{ selector: 'btv-search', template: "<div class=\"wm-search flex-row\" [ngClass]=\"{'search-reverse': searchRight == 'right', 'always-opened': keepExpanded, 'small': isSmall}\">\r\n\t<div class=\"search-icon inline-col\" [ngClass]=\"{'search-toggle-disabled': keepExpanded || !searchFocus}\"\r\n\t\t(click)=\"toggleSearch()\">\r\n\t\t<wm-template-image class=\"marginXA\" icon=\"search\" [light]=\"(!expanded && !searchFocus) || keepExpanded\">\r\n\t\t</wm-template-image>\r\n\t</div>\r\n\t<div class=\"search-wrap flex-col\"\r\n\t\t[ngClass]=\"{'search-open': keepExpanded || expanded, 'search-focused': (expanded && searchFocus) || (keepExpanded && searchFocus),\r\n\t'width-auto': widthAuto}\">\r\n\t\t<input class=\"search-field\" #searchBox \r\n\t\t\t[value]=\"searchText\" \r\n\t\t\t[placeholder]=\"placeholder\"\r\n\t\t\t(focus)=\"searchFocus = true\" (focusout)=\"onFocusOut()\">\r\n\t</div>\r\n</div>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.wm-search,.search-wrap,.search-field{box-sizing:border-box}.wm-search:hover{border-color:var(--brandColor)}.wm-search{background:var(--pageBackgroundColor);height:36px;max-width:280px;border-radius:4px;align-items:center;flex:1 0 100%;flex-shrink:0;border:1px solid var(--secondaryHover)}.wm-search.small{max-width:140px}.wm-search.small .search-open{width:auto}.search-icon{width:36px;height:100%;flex-shrink:0;cursor:pointer}.search-icon.search-toggle-disabled{cursor:text}.search-wrap{width:0px;height:100%;color:var(--mediumFontColor);direction:ltr}.search-open{width:280px;max-width:100%;flex-grow:1;flex-shrink:1}.search-open.width-auto{width:auto}.search-open:hover,.search-focused{color:var(--strongFontColor)}.search-field{width:100%;height:100%;color:inherit;text-indent:.1em;font-size:16px;background-color:transparent;border:none;outline:none;padding:0 8px 0 0}.search-field::placeholder{color:var(--disabledTextColor)}.search-reverse{display:flex;flex-direction:row-reverse}.search-reverse .search-wrap{direction:rtl}.search-reverse .search-field{direction:ltr;padding:0 8px}\n"] }]
|
|
634
|
-
}], ctorParameters: function () { return []; }, propDecorators: { widthAuto: [{
|
|
635
|
-
type: Input
|
|
636
|
-
}], isSmall: [{
|
|
637
|
-
type: Input
|
|
638
|
-
}], searchRight: [{
|
|
639
|
-
type: Input
|
|
640
|
-
}], placeholder: [{
|
|
641
|
-
type: Input
|
|
642
|
-
}], keepExpanded: [{
|
|
643
|
-
type: Input
|
|
644
|
-
}], box: [{
|
|
645
|
-
type: ViewChild,
|
|
646
|
-
args: ['searchBox', { static: true }]
|
|
647
|
-
}], searchTextChange: [{
|
|
648
|
-
type: Output
|
|
649
|
-
}], searchText: [{
|
|
650
|
-
type: Input
|
|
651
|
-
}] } });
|
|
652
|
-
|
|
653
|
-
class BusyIndicatorComponent {
|
|
654
|
-
}
|
|
655
|
-
BusyIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: BusyIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
656
|
-
BusyIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: BusyIndicatorComponent, selector: "wm-busy-indicator", inputs: { busy: "busy", long: "long" }, ngImport: i0, template: "<div class=\"load-snake-wrap\" *ngIf=\"busy\" [ngClass]=\"{'long-snake-wrap': long}\">\r\n <span class=\"snake-field\" ></span>\r\n <span class=\"snake\" [ngClass]=\"{'longSnake': long}\">\r\n <span class=\"snake-shadow\" [ngClass]=\"{'longRotate': long}\"></span>\r\n </span>\r\n</div>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.load-snake-wrap{width:120px;height:12px;overflow:hidden;align-self:flex-end}.snake-field{display:block;width:100%;height:2px;background:#22252C;top:5px;position:relative}.snake{display:inline-block;width:80px;height:2px;background:#7F868C;animation-play-state:running;position:relative;top:-9px;animation:snakeMove 2s linear 0s infinite}.snake-shadow{display:inline-block;width:40px;height:8px;position:absolute;margin-top:-3px;animation:rotate 2s linear 0s infinite;animation-play-state:running;border-radius:25%}.long-snake-wrap{width:400px}.longSnake{animation:snakeLongMove 3s linear 0s infinite}.longRotate{animation:rotate 3s linear 0s infinite}@keyframes snakeMove{0%{left:-80px}50%{left:200px}to{left:-200px}}@keyframes snakeLongMove{0%{left:-80px}50%{left:440px}to{left:-200px}}@keyframes rotate{0%{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(152,141,103,.4) 100%);right:0}to{background:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(152,141,103,.4) 100%);left:0;right:unset}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
657
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: BusyIndicatorComponent, decorators: [{
|
|
658
|
-
type: Component,
|
|
659
|
-
args: [{ selector: 'wm-busy-indicator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"load-snake-wrap\" *ngIf=\"busy\" [ngClass]=\"{'long-snake-wrap': long}\">\r\n <span class=\"snake-field\" ></span>\r\n <span class=\"snake\" [ngClass]=\"{'longSnake': long}\">\r\n <span class=\"snake-shadow\" [ngClass]=\"{'longRotate': long}\"></span>\r\n </span>\r\n</div>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.load-snake-wrap{width:120px;height:12px;overflow:hidden;align-self:flex-end}.snake-field{display:block;width:100%;height:2px;background:#22252C;top:5px;position:relative}.snake{display:inline-block;width:80px;height:2px;background:#7F868C;animation-play-state:running;position:relative;top:-9px;animation:snakeMove 2s linear 0s infinite}.snake-shadow{display:inline-block;width:40px;height:8px;position:absolute;margin-top:-3px;animation:rotate 2s linear 0s infinite;animation-play-state:running;border-radius:25%}.long-snake-wrap{width:400px}.longSnake{animation:snakeLongMove 3s linear 0s infinite}.longRotate{animation:rotate 3s linear 0s infinite}@keyframes snakeMove{0%{left:-80px}50%{left:200px}to{left:-200px}}@keyframes snakeLongMove{0%{left:-80px}50%{left:440px}to{left:-200px}}@keyframes rotate{0%{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(152,141,103,.4) 100%);right:0}to{background:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(152,141,103,.4) 100%);left:0;right:unset}}\n"] }]
|
|
660
|
-
}], propDecorators: { busy: [{
|
|
661
|
-
type: Input
|
|
662
|
-
}], long: [{
|
|
663
|
-
type: Input
|
|
664
|
-
}] } });
|
|
665
|
-
|
|
666
|
-
class IllustrationComponent {
|
|
667
|
-
constructor() { }
|
|
668
|
-
ngOnInit() {
|
|
669
|
-
}
|
|
670
|
-
}
|
|
671
|
-
IllustrationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: IllustrationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
672
|
-
IllustrationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: IllustrationComponent, selector: "wm-illustration", inputs: { illustrationId: "illustrationId" }, ngImport: i0, template: "<svg viewBox=\"0 0 368 121\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" *ngIf=\"illustrationId == 'login'\">\r\n <path opacity=\"0.2\"\r\n d=\"M2 120.5C1.17157 120.5 0.5 119.828 0.5 119C0.5 118.172 1.17157 117.5 2 117.5H122C122.828 117.5 123.5 118.172 123.5 119C123.5 119.828 122.828 120.5 122 120.5H2Z\"\r\n fill=\"url(#paint0_linear)\" />\r\n <path opacity=\"0.2\"\r\n d=\"M246.5 121C245.672 121 245 120.328 245 119.5C245 118.672 245.672 118 246.5 118H366.5C367.328 118 368 118.672 368 119.5C368 120.328 367.328 121 366.5 121H246.5Z\"\r\n fill=\"url(#paint1_linear)\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M183.506 46.538C207.012 49.9633 225.578 74.549 229.366 98C229.455 98.5769 122.545 98.5769 122.634 98C126.421 74.549 144.987 49.9633 168.494 46.538C164.953 42.5162 165.212 36.4187 169.08 32.7111C172.948 29.0035 179.051 29.0035 182.919 32.7111C186.788 36.4187 187.046 42.5162 183.506 46.538ZM176 34C172.686 34 170 36.6863 170 40C170 43.3137 172.686 46 176 46C179.314 46 182 43.3137 182 40C182 36.6863 179.314 34 176 34Z\"\r\n class=\"fillStrongColor\" opacity=\"0.05\" />\r\n <path\r\n d=\"M235.526 98.708C235.146 98.2591 234.588 98.0002 234 98H118C117.412 98.0003 116.855 98.2589 116.475 98.7073C116.095 99.1557 115.932 99.7484 116.028 100.328C116.816 105.056 120.75 114 130 114H222C231.25 114 235.184 105.056 235.972 100.328C236.068 99.7487 235.905 99.1563 235.526 98.708Z\"\r\n class=\"fillStrongColor\" opacity=\"0.05\" />\r\n <path d=\"M132.612 98C136.46 73.08 158.002 54 184 54C209.998 54 231.54 73.08 235.388 98\" class=\"strokeStrongColor\"\r\n stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M184 54C188.418 54 192 50.4183 192 46C192 41.5817 188.418 38 184 38C179.582 38 176 41.5817 176 46C176 50.4183 179.582 54 184 54Z\"\r\n class=\"strokeStrongColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M242 108C242 108 240 120 230 120C225.842 120 142.158 120 138 120C128 120 126 108 126 108H242Z\"\r\n class=\"strokeStrongColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M186 88C186 88.0706 186 88.1412 186 88.2118C186 91.3882 188.612 94 191.788 94C194.965 94 197.576 91.3882 197.576 88.2118C197.576 88.1412 197.576 88.0706 197.576 88\"\r\n class=\"strokePageColor\" stroke-width=\"3\" stroke-linecap=\"round\" />\r\n <path\r\n d=\"M167 91C168.657 91 170 89.6569 170 88C170 86.3431 168.657 85 167 85C165.343 85 164 86.3431 164 88C164 89.6569 165.343 91 167 91Z\"\r\n class=\"fillStrongColor\" opacity=\"0.05\" />\r\n <path\r\n d=\"M216 91C217.657 91 219 89.6569 219 88C219 86.3431 217.657 85 216 85C214.343 85 213 86.3431 213 88C213 89.6569 214.343 91 216 91Z\"\r\n class=\"fillStrongColor\" opacity=\"0.05\" />\r\n <path\r\n d=\"M189 91C189 91.0706 189 91.1412 189 91.2118C189 94.3882 191.612 97 194.788 97C197.965 97 200.576 94.3882 200.576 91.2118C200.576 91.1412 200.576 91.0706 200.576 91\"\r\n class=\"strokeMediumColor\" stroke-width=\"3\" stroke-linecap=\"round\" />\r\n <path\r\n d=\"M170 94C171.657 94 173 92.6569 173 91C173 89.3431 171.657 88 170 88C168.343 88 167 89.3431 167 91C167 92.6569 168.343 94 170 94Z\"\r\n class=\"fillStrongColor\" />\r\n <path\r\n d=\"M219 94C220.657 94 222 92.6569 222 91C222 89.3431 220.657 88 219 88C217.343 88 216 89.3431 216 91C216 92.6569 217.343 94 219 94Z\"\r\n class=\"fillStrongColor\" />\r\n <defs>\r\n <linearGradient id=\"paint0_linear\" x1=\"0.5\" y1=\"120.5\" x2=\"123.5\" y2=\"120.5\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopPageColor\" stop-opacity=\"0.01\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint1_linear\" x1=\"368\" y1=\"118\" x2=\"245\" y2=\"118\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopPageColor\" stop-opacity=\"0.01\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n </defs>\r\n</svg>\r\n\r\n<svg viewBox=\"0 0 348 129\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" *ngIf=\"illustrationId == 'expired'\">\r\n <path opacity=\"0.2\"\r\n d=\"M2 128.5C1.17157 128.5 0.5 127.828 0.5 127C0.5 126.172 1.17157 125.5 2 125.5H122C122.828 125.5 123.5 126.172 123.5 127C123.5 127.828 122.828 128.5 122 128.5H2Z\"\r\n fill=\"url(#paint0_linear)\" />\r\n <path opacity=\"0.2\"\r\n d=\"M226.5 129C225.672 129 225 128.328 225 127.5C225 126.672 225.672 126 226.5 126H346.5C347.328 126 348 126.672 348 127.5C348 128.328 347.328 129 346.5 129H226.5Z\"\r\n fill=\"url(#paint1_linear)\" />\r\n <path\r\n d=\"M190.548 42.5806H186.677V25.1613C186.677 13.403 177.145 3.87097 165.387 3.87097C153.629 3.87097 144.097 13.403 144.097 25.1613V42.5806H140.226V25.1613C140.226 11.2651 151.491 0 165.387 0C179.283 0 190.548 11.2651 190.548 25.1613V42.5806Z\"\r\n class=\"fillStrongColor\" opacity=\"0.05\" />\r\n <path\r\n d=\"M202.161 46.4516H128.613C122.202 46.458 117.006 51.6535 117 58.0645V108.387C117.006 114.798 122.202 119.994 128.613 120H202.161C208.572 119.994 213.768 114.798 213.774 108.387V58.0645C213.768 51.6535 208.572 46.458 202.161 46.4516Z\"\r\n class=\"fillStrongColor\" opacity=\"0.05\" />\r\n <path\r\n d=\"M197.803 46.3607V32.5902C197.803 19.5526 187.234 8.9836 174.197 8.9836V8.9836C161.159 8.9836 150.59 19.5526 150.59 32.5902V46.3607\"\r\n class=\"strokeStrongColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M211.574 127.016H136.819C131.387 127.016 126.983 122.613 126.983 117.18V66.0328C126.983 60.6005 131.387 56.1967 136.819 56.1967H211.574C217.006 56.1967 221.41 60.6005 221.41 66.0328V117.18C221.41 119.789 220.373 122.291 218.529 124.135C216.684 125.98 214.182 127.016 211.574 127.016V127.016Z\"\r\n class=\"strokeStrongColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M171 106C171 106.071 171 106.141 171 106.212C171 109.388 173.612 112 176.788 112C179.965 112 182.576 109.388 182.576 106.212C182.576 106.141 182.576 106.071 182.576 106\"\r\n class=\"strokePageColor\" stroke-width=\"3\" stroke-linecap=\"round\" />\r\n <path\r\n d=\"M152 109C153.657 109 155 107.657 155 106C155 104.343 153.657 103 152 103C150.343 103 149 104.343 149 106C149 107.657 150.343 109 152 109Z\"\r\n class=\"fillPageColor\" />\r\n <path\r\n d=\"M201 109C202.657 109 204 107.657 204 106C204 104.343 202.657 103 201 103C199.343 103 198 104.343 198 106C198 107.657 199.343 109 201 109Z\"\r\n class=\"fillPageColor\" />\r\n <path\r\n d=\"M174 109C174 109.071 174 109.141 174 109.212C174 112.388 176.612 115 179.788 115C182.965 115 185.576 112.388 185.576 109.212C185.576 109.141 185.576 109.071 185.576 109\"\r\n class=\"strokeMediumColor\" stroke-width=\"3\" stroke-linecap=\"round\" />\r\n <path\r\n d=\"M155 112C156.657 112 158 110.657 158 109C158 107.343 156.657 106 155 106C153.343 106 152 107.343 152 109C152 110.657 153.343 112 155 112Z\"\r\n class=\"fillStrongColor\" />\r\n <path\r\n d=\"M204 112C205.657 112 207 110.657 207 109C207 107.343 205.657 106 204 106C202.343 106 201 107.343 201 109C201 110.657 202.343 112 204 112Z\"\r\n class=\"fillStrongColor\" />\r\n <defs>\r\n <linearGradient id=\"paint0_linear\" x1=\"0.5\" y1=\"128.5\" x2=\"123.5\" y2=\"128.5\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopPageColor\" stop-opacity=\"0.01\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint1_linear\" x1=\"348\" y1=\"126\" x2=\"225\" y2=\"126\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopPageColor\" stop-opacity=\"0.01\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n </defs>\r\n</svg>\r\n\r\n<svg viewBox=\"0 0 387 114\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" *ngIf=\"illustrationId == 'no-dashboard'\">\r\n <path opacity=\"0.2\"\r\n d=\"M2 113.5C1.17157 113.5 0.5 112.828 0.5 112C0.5 111.172 1.17157 110.5 2 110.5H122C122.828 110.5 123.5 111.172 123.5 112C123.5 112.828 122.828 113.5 122 113.5H2Z\"\r\n fill=\"url(#paint0_linear)\" />\r\n <path opacity=\"0.2\"\r\n d=\"M265.5 114C264.672 114 264 113.328 264 112.5C264 111.672 264.672 111 265.5 111H385.5C386.328 111 387 111.672 387 112.5C387 113.328 386.328 114 385.5 114H265.5Z\"\r\n fill=\"url(#paint1_linear)\" />\r\n <rect x=\"125\" width=\"120\" height=\"104\" class=\"fillStrongColor\" fill-opacity=\"0.05\" />\r\n <path d=\"M133 36H253\" class=\"strokeStrongColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <rect x=\"133\" y=\"8\" width=\"120\" height=\"104\" class=\"strokeStrongColor\" stroke-width=\"3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M195 81C195 81.0706 195 81.1412 195 81.2118C195 84.3882 197.612 87 200.788 87C203.965 87 206.576 84.3882 206.576 81.2118C206.576 81.1412 206.576 81.0706 206.576 81\"\r\n class=\"strokePageColor\" stroke-width=\"3\" stroke-linecap=\"round\" />\r\n <path\r\n d=\"M176 84C177.657 84 179 82.6569 179 81C179 79.3431 177.657 78 176 78C174.343 78 173 79.3431 173 81C173 82.6569 174.343 84 176 84Z\"\r\n class=\"fillPageColor\" />\r\n <path\r\n d=\"M225 84C226.657 84 228 82.6569 228 81C228 79.3431 226.657 78 225 78C223.343 78 222 79.3431 222 81C222 82.6569 223.343 84 225 84Z\"\r\n class=\"fillPageColor\" />\r\n <path\r\n d=\"M198 84C198 84.0706 198 84.1412 198 84.2118C198 87.3882 200.612 90 203.788 90C206.965 90 209.576 87.3882 209.576 84.2118C209.576 84.1412 209.576 84.0706 209.576 84\"\r\n class=\"strokeMediumColor\" stroke-width=\"3\" stroke-linecap=\"round\" />\r\n <path\r\n d=\"M179 87C180.657 87 182 85.6569 182 84C182 82.3431 180.657 81 179 81C177.343 81 176 82.3431 176 84C176 85.6569 177.343 87 179 87Z\"\r\n class=\"fillStrongColor\" />\r\n <path\r\n d=\"M228 87C229.657 87 231 85.6569 231 84C231 82.3431 229.657 81 228 81C226.343 81 225 82.3431 225 84C225 85.6569 226.343 87 228 87Z\"\r\n class=\"fillStrongColor\" />\r\n <defs>\r\n <linearGradient id=\"paint0_linear\" x1=\"0.5\" y1=\"113.5\" x2=\"123.5\" y2=\"113.5\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopPageColor\" stop-opacity=\"0.01\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint1_linear\" x1=\"387\" y1=\"111\" x2=\"264\" y2=\"111\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopPageColor\" stop-opacity=\"0.01\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n </defs>\r\n</svg>\r\n\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 387 114\" fill=\"none\" *ngIf=\"illustrationId == 'no-item'\">\r\n <path opacity=\"0.2\"\r\n d=\"M2 113.5C1.17157 113.5 0.5 112.828 0.5 112C0.5 111.172 1.17157 110.5 2 110.5H122C122.828 110.5 123.5 111.172 123.5 112C123.5 112.828 122.828 113.5 122 113.5H2Z\"\r\n fill=\"url(#paint0_linear)\" />\r\n <path opacity=\"0.2\"\r\n d=\"M265.5 114C264.672 114 264 113.328 264 112.5C264 111.672 264.672 111 265.5 111H385.5C386.328 111 387 111.672 387 112.5C387 113.328 386.328 114 385.5 114H265.5Z\"\r\n fill=\"url(#paint1_linear)\" />\r\n <path d=\"M245 0H125V104H245V0Z\" class=\"fillStrongColor\" fill-opacity=\"0.05\" />\r\n <path d=\"M133 36H253\" class=\"strokeStrongColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path d=\"M253 8H133V112H253V8Z\" class=\"strokeStrongColor\" stroke-width=\"3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path opacity=\"0.5\"\r\n d=\"M197.576 82C197.576 81.9294 197.576 81.8588 197.576 81.7882C197.576 78.6118 194.964 76 191.788 76C188.611 76 186 78.6118 186 81.7882C186 81.8588 186 81.9294 186 82\"\r\n class=\"strokePageColor\" stroke-width=\"3\" stroke-linecap=\"round\" />\r\n <path\r\n d=\"M200.576 85C200.576 84.9294 200.576 84.8588 200.576 84.7882C200.576 81.6118 197.964 79 194.788 79C191.611 79 189 81.6118 189 84.7882C189 84.8588 189 84.9294 189 85\"\r\n class=\"strokeMediumColor\" stroke-width=\"3\" stroke-linecap=\"round\" />\r\n <rect x=\"206\" y=\"64\" width=\"12\" height=\"6\" rx=\"3\" class=\"fillPageColor\" />\r\n <rect x=\"165\" y=\"64\" width=\"12\" height=\"6\" rx=\"3\" class=\"fillPageColor\" />\r\n <rect x=\"209\" y=\"67\" width=\"12\" height=\"6\" rx=\"3\" class=\"fillStrongColor\" />\r\n <rect x=\"166\" y=\"67\" width=\"12\" height=\"6\" rx=\"3\" class=\"fillStrongColor\" />\r\n <defs>\r\n <linearGradient id=\"paint0_linear\" x1=\"0.5\" y1=\"113.5\" x2=\"123.5\" y2=\"113.5\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopPageColor\" stop-opacity=\"0.01\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint1_linear\" x1=\"387\" y1=\"111\" x2=\"264\" y2=\"111\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopPageColor\" stop-opacity=\"0.01\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n </defs>\r\n</svg>\r\n\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 734 197\" fill=\"none\" *ngIf=\"illustrationId == 'no-search'\">\r\n <rect opacity=\"0.2\" x=\"515\" y=\"186\" width=\"219\" height=\"10\" rx=\"5\" fill=\"url(#paint0_linear)\" />\r\n <rect opacity=\"0.2\" x=\"219\" y=\"196\" width=\"219\" height=\"10\" rx=\"5\" transform=\"rotate(-180 219 196)\"\r\n fill=\"url(#paint1_linear)\" />\r\n <rect x=\"256.5\" y=\"2.5\" width=\"221\" height=\"192\" rx=\"8.5\" stroke=\"#536072\" stroke-width=\"5\" />\r\n <rect x=\"258\" y=\"54\" width=\"217\" height=\"4\" fill=\"#536072\" />\r\n <path\r\n d=\"M396.279 157.733L379.501 140.671C382.751 136.588 384.708 131.401 384.708 125.751C384.708 112.656 374.23 102.001 361.354 102.001C348.477 102.001 338 112.656 338 125.751C338 138.846 348.477 149.5 361.354 149.5C366.91 149.5 372.011 147.511 376.025 144.206L392.803 161.268C393.282 161.755 393.912 162 394.541 162C395.171 162 395.8 161.755 396.279 161.268C397.24 160.29 397.24 158.71 396.279 157.733ZM361.354 144.5C351.186 144.5 342.917 136.091 342.917 125.751C342.917 115.411 351.186 107.001 361.354 107.001C371.522 107.001 379.791 115.411 379.791 125.751C379.791 136.091 371.521 144.5 361.354 144.5Z\"\r\n fill=\"#536072\" />\r\n <defs>\r\n <linearGradient id=\"paint0_linear\" x1=\"515\" y1=\"186\" x2=\"734\" y2=\"186\" gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#35393F\" />\r\n <stop offset=\"1\" stop-color=\"#C4C4C4\" stop-opacity=\"0\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint1_linear\" x1=\"219\" y1=\"196\" x2=\"438\" y2=\"196\" gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#35393F\" />\r\n <stop offset=\"1\" stop-color=\"#C4C4C4\" stop-opacity=\"0\" />\r\n </linearGradient>\r\n </defs>\r\n</svg>\r\n\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" *ngIf=\"illustrationId == 'no-widget'\" viewBox=\"0 0 324 129\" fill=\"none\">\r\n <path opacity=\"0.2\"\r\n d=\"M2 128.5C1.17157 128.5 0.5 127.828 0.5 127C0.5 126.172 1.17157 125.5 2 125.5H122C122.828 125.5 123.5 126.172 123.5 127C123.5 127.828 122.828 128.5 122 128.5H2Z\"\r\n fill=\"url(#paint0_linear)\" />\r\n <path opacity=\"0.2\"\r\n d=\"M202.5 129C201.672 129 201 128.328 201 127.5C201 126.672 201.672 126 202.5 126H322.5C323.328 126 324 126.672 324 127.5C324 128.328 323.328 129 322.5 129H202.5Z\"\r\n fill=\"url(#paint1_linear)\" />\r\n <path opacity=\"0.05\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M85.9355 54.1936C84.8652 54.1936 84 53.3265 84 52.2581C84 23.4426 107.443 0 136.258 0C137.328 0 138.194 0.867097 138.194 1.93548V54.1936H85.9355Z\"\r\n class=\"fillStrongColor\" />\r\n <path d=\"M161 25C189.718 25 213 48.282 213 77C213 105.718 189.718 129 161 129C132.282 129 109 105.718 109 77\"\r\n class=\"strokeStrongColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path opacity=\"0.05\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M153.742 122C124.926 122 101.484 98.5574 101.484 69.7419C101.484 68.6735 102.349 67.8064 103.419 67.8064H151.806V19.4193C151.806 18.351 152.672 17.4839 153.742 17.4839C182.557 17.4839 206 40.9264 206 69.7419C206 98.5574 182.557 122 153.742 122Z\"\r\n class=\"fillStrongColor\" />\r\n <path opacity=\"0.2\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M145 7.5C115.454 7.5 91.5 31.4536 91.5 61C91.5 61.8284 92.1716 62.5 93 62.5H145C145.828 62.5 146.5 61.8284 146.5 61V9C146.5 8.17157 145.828 7.5 145 7.5ZM143.5 10.5219V59.5L94.5219 59.5C95.3007 32.8024 116.802 11.3007 143.5 10.5219Z\"\r\n fill=\"url(#paint2_linear)\" />\r\n <path\r\n d=\"M159 98C159 98.0706 159 98.1412 159 98.2118C159 101.388 161.612 104 164.788 104C167.965 104 170.576 101.388 170.576 98.2118C170.576 98.1412 170.576 98.0706 170.576 98\"\r\n class=\"strokePageColor\" stroke-width=\"3\" stroke-linecap=\"round\" />\r\n <path\r\n d=\"M140 101C141.657 101 143 99.6569 143 98C143 96.3431 141.657 95 140 95C138.343 95 137 96.3431 137 98C137 99.6569 138.343 101 140 101Z\"\r\n class=\"fillPageColor\" />\r\n <path\r\n d=\"M189 101C190.657 101 192 99.6569 192 98C192 96.3431 190.657 95 189 95C187.343 95 186 96.3431 186 98C186 99.6569 187.343 101 189 101Z\"\r\n class=\"fillPageColor\" />\r\n <path\r\n d=\"M162 101C162 101.071 162 101.141 162 101.212C162 104.388 164.612 107 167.788 107C170.965 107 173.576 104.388 173.576 101.212C173.576 101.141 173.576 101.071 173.576 101\"\r\n class=\"strokeMediumColor\" stroke-width=\"3\" stroke-linecap=\"round\" />\r\n <path\r\n d=\"M143 104C144.657 104 146 102.657 146 101C146 99.3431 144.657 98 143 98C141.343 98 140 99.3431 140 101C140 102.657 141.343 104 143 104Z\"\r\n class=\"fillStrongColor\" />\r\n <path\r\n d=\"M192 104C193.657 104 195 102.657 195 101C195 99.3431 193.657 98 192 98C190.343 98 189 99.3431 189 101C189 102.657 190.343 104 192 104Z\"\r\n class=\"fillStrongColor\" />\r\n <defs>\r\n <linearGradient id=\"paint0_linear\" x1=\"0.5\" y1=\"128.5\" x2=\"123.5\" y2=\"128.5\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopPageColor\" stop-opacity=\"0.01\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint1_linear\" x1=\"324\" y1=\"126\" x2=\"201\" y2=\"126\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopPageColor\" stop-opacity=\"0.01\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint2_linear\" x1=\"64\" y1=\"35\" x2=\"119\" y2=\"90\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopLightColor\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n </defs>\r\n</svg>\r\n\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 333 152\" fill=\"none\" *ngIf=\"illustrationId == 'no-pos'\">\r\n <path opacity=\"0.05\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M111.088 12.8393C108.543 14.6575 107.5 16.4154 107.5 18C107.5 19.5846 108.543 21.3425 111.088 23.1607C113.602 24.957 117.32 26.6113 122.005 28.0129C131.355 30.8106 144.203 32.5 158 32.5C171.797 32.5 184.645 30.8106 193.995 28.0129C198.68 26.6113 202.398 24.957 204.912 23.1607C207.457 21.3425 208.5 19.5846 208.5 18C208.5 16.4154 207.457 14.6575 204.912 12.8393C202.398 11.043 198.68 9.38874 193.995 7.98705C184.645 5.18938 171.797 3.5 158 3.5C144.203 3.5 131.355 5.18938 122.005 7.98705C117.32 9.38874 113.602 11.043 111.088 12.8393ZM109.344 10.3982C106.482 12.4425 104.5 14.9846 104.5 18V60.5V62V106C104.5 109.015 106.482 111.557 109.344 113.602C112.236 115.668 116.305 117.439 121.145 118.887C130.845 121.789 143.997 123.5 158 123.5C172.003 123.5 185.155 121.789 194.855 118.887C199.695 117.439 203.764 115.668 206.656 113.602C209.518 111.557 211.5 109.015 211.5 106V62V60.5V18C211.5 14.9846 209.518 12.4425 206.656 10.3982C203.764 8.33203 199.695 6.56126 194.855 5.11295C185.155 2.21062 172.003 0.5 158 0.5C143.997 0.5 130.845 2.21062 121.145 5.11295C116.305 6.56126 112.236 8.33203 109.344 10.3982ZM208.5 60.5V24.0914C207.943 24.6217 207.323 25.1252 206.656 25.6018C203.764 27.668 199.695 29.4387 194.855 30.8871C185.155 33.7894 172.003 35.5 158 35.5C143.997 35.5 130.845 33.7894 121.145 30.8871C116.305 29.4387 112.236 27.668 109.344 25.6018C108.677 25.1252 108.057 24.6217 107.5 24.0914V60.5V62C107.5 63.5846 108.543 65.3425 111.088 67.1607C113.602 68.957 117.32 70.6113 122.005 72.0129C131.355 74.8106 144.203 76.5 158 76.5C171.797 76.5 184.645 74.8106 193.995 72.0129C198.68 70.6113 202.398 68.957 204.912 67.1607C207.457 65.3425 208.5 63.5846 208.5 62V60.5ZM208.5 68.0914C207.943 68.6217 207.323 69.1252 206.656 69.6018C203.764 71.668 199.695 73.4387 194.855 74.8871C185.155 77.7894 172.003 79.5 158 79.5C143.997 79.5 130.845 77.7894 121.145 74.8871C116.305 73.4387 112.236 71.668 109.344 69.6018C108.677 69.1252 108.057 68.6217 107.5 68.0914V106C107.5 107.585 108.543 109.343 111.088 111.161C113.602 112.957 117.32 114.611 122.005 116.013C131.355 118.811 144.203 120.5 158 120.5C171.797 120.5 184.645 118.811 193.995 116.013C198.68 114.611 202.398 112.957 204.912 111.161C207.457 109.343 208.5 107.585 208.5 106V68.0914Z\"\r\n class=\"fillStrongColor\" />\r\n <path d=\"M114 26V114C114 123.2 138.2 130 166 130C193.8 130 218 123.2 218 114V26\" class=\"strokeStrongColor\"\r\n stroke-width=\"3\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M166 43.5C195.415 43.5 219.5 36.2935 219.5 26C219.5 15.7065 195.415 8.5 166 8.5C136.585 8.5 112.5 15.7065 112.5 26C112.5 36.2935 136.585 43.5 166 43.5ZM166 11.5C193.659 11.5 216.5 18.3345 216.5 26C216.5 33.6655 193.659 40.5 166 40.5C138.341 40.5 115.5 33.6655 115.5 26C115.5 18.3345 138.341 11.5 166 11.5Z\"\r\n class=\"fillStrongColor\" />\r\n <path opacity=\"0.2\"\r\n d=\"M216.5 69V67.5H219.5V69C219.5 79.2935 195.415 86.5 166 86.5C136.585 86.5 112.5 79.2935 112.5 69V67.5H115.5V69C115.5 76.6655 138.341 83.5 166 83.5C193.659 83.5 216.5 76.6655 216.5 69Z\"\r\n fill=\"url(#paint0_linear)\" />\r\n <path\r\n d=\"M158 106C158 106.071 158 106.141 158 106.212C158 109.388 160.612 112 163.788 112C166.965 112 169.576 109.388 169.576 106.212C169.576 106.141 169.576 106.071 169.576 106\"\r\n class=\"strokePageColor\" stroke-width=\"3\" stroke-linecap=\"round\" />\r\n <path\r\n d=\"M139 109C140.657 109 142 107.657 142 106C142 104.343 140.657 103 139 103C137.343 103 136 104.343 136 106C136 107.657 137.343 109 139 109Z\"\r\n class=\"fillPageColor\" />\r\n <path\r\n d=\"M188 109C189.657 109 191 107.657 191 106C191 104.343 189.657 103 188 103C186.343 103 185 104.343 185 106C185 107.657 186.343 109 188 109Z\"\r\n class=\"fillPageColor\" />\r\n <path\r\n d=\"M161 109C161 109.071 161 109.141 161 109.212C161 112.388 163.612 115 166.788 115C169.965 115 172.576 112.388 172.576 109.212C172.576 109.141 172.576 109.071 172.576 109\"\r\n class=\"strokeMediumColor\" stroke-width=\"3\" stroke-linecap=\"round\" />\r\n <path\r\n d=\"M142 112C143.657 112 145 110.657 145 109C145 107.343 143.657 106 142 106C140.343 106 139 107.343 139 109C139 110.657 140.343 112 142 112Z\"\r\n class=\"fillMediumColor\" />\r\n <path\r\n d=\"M191 112C192.657 112 194 110.657 194 109C194 107.343 192.657 106 191 106C189.343 106 188 107.343 188 109C188 110.657 189.343 112 191 112Z\"\r\n class=\"fillMediumColor\" />\r\n <path opacity=\"0.2\"\r\n d=\"M1.5 132C0.671573 132 0 131.328 0 130.5C0 129.672 0.671573 129 1.5 129H121.5C122.328 129 123 129.672 123 130.5C123 131.328 122.328 132 121.5 132H1.5Z\"\r\n fill=\"url(#paint1_linear)\" />\r\n <path opacity=\"0.2\"\r\n d=\"M211.5 132C210.672 132 210 131.328 210 130.5C210 129.672 210.672 129 211.5 129H331.5C332.328 129 333 129.672 333 130.5C333 131.328 332.328 132 331.5 132H211.5Z\"\r\n fill=\"url(#paint2_linear)\" />\r\n <defs>\r\n <linearGradient id=\"paint0_linear\" x1=\"59\" y1=\"77\" x2=\"65.5414\" y2=\"113.838\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopPageColor\" stop-opacity=\"0.01\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint1_linear\" x1=\"0\" y1=\"132\" x2=\"123\" y2=\"132\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopPageColor\" stop-opacity=\"0.01\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint2_linear\" x1=\"333\" y1=\"129\" x2=\"210\" y2=\"129\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopPageColor\" stop-opacity=\"0.01\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n </defs>\r\n</svg>\r\n\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" *ngIf=\"illustrationId == 'no-notifications'\" viewBox=\"0 0 287 129\" fill=\"none\">\r\n <path opacity=\"0.2\"\r\n d=\"M1.5 129C0.671573 129 0 128.328 0 127.5C0 126.672 0.671573 126 1.5 126H121.5C122.328 126 123 126.672 123 127.5C123 128.328 122.328 129 121.5 129H1.5Z\"\r\n fill=\"url(#paint0_linear)\" />\r\n <path opacity=\"0.2\"\r\n d=\"M165.5 129C164.672 129 164 128.328 164 127.5C164 126.672 164.672 126 165.5 126H285.5C286.328 126 287 126.672 287 127.5C287 128.328 286.328 129 285.5 129H165.5Z\"\r\n fill=\"url(#paint1_linear)\" />\r\n <path opacity=\"0.05\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M178 39.6V56C178 66.4082 182.775 71.7799 186.863 76.3793C189.924 79.8226 192.6 82.8332 192.6 87.2C192.6 94.8343 178.14 101.091 154.019 103H154.6V103.6C154.6 112.6 147.2 120 138.2 120C129.2 120 121.8 112.6 121.8 103.6V103H121.981C97.8602 101.091 83.3999 94.8343 83.3999 87.2C83.3999 82.8332 86.0759 79.8226 89.1366 76.3793C93.2251 71.7799 97.9999 66.4082 97.9999 56V40C97.9999 18.6 116.6 0 138 0C159.4 0 178 18.4 178 39.6Z\"\r\n class=\"fillStrongColor\" />\r\n <path opacity=\"0.2\"\r\n d=\"M125.3 110H128.3V110.6C128.3 118.772 135.028 125.5 143.2 125.5C151.371 125.5 158.1 118.772 158.1 110.6V110H161.1V110.6C161.1 120.428 153.028 128.5 143.2 128.5C133.371 128.5 125.3 120.428 125.3 110.6V110Z\"\r\n fill=\"url(#paint2_linear)\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M184.5 63C184.5 70.3443 186.67 75.0713 191.438 80.6227C191.697 80.9242 194.411 83.9829 195.144 84.8757C197.824 88.1406 199.1 90.8406 199.1 94.2C199.1 105.021 176.423 112.1 143 112.1C109.576 112.1 86.8999 105.021 86.8999 94.2C86.8999 90.8406 88.176 88.1406 90.8561 84.8757C91.589 83.9829 94.303 80.9242 94.562 80.6227C99.3296 75.0713 101.5 70.3443 101.5 63V47C101.5 24.7716 120.771 5.5 143 5.5C165.23 5.5 184.5 24.5729 184.5 46.6V63ZM181.5 63V46.6C181.5 26.2367 163.58 8.5 143 8.5C122.428 8.5 104.5 26.4284 104.5 47V63C104.5 71.1557 102.034 76.5273 96.8378 82.5773C96.5455 82.9176 93.864 85.9396 93.1749 86.7792C90.8942 89.5576 89.8999 91.6613 89.8999 94.2C89.8999 102.423 111.288 109.1 143 109.1C174.712 109.1 196.1 102.423 196.1 94.2C196.1 91.6613 195.106 89.5576 192.825 86.7792C192.136 85.9396 189.454 82.9176 189.162 82.5773C183.966 76.5273 181.5 71.1557 181.5 63Z\"\r\n class=\"fillStrongColor\" />\r\n <path\r\n d=\"M135 84C135 84.0706 135 84.1412 135 84.2118C135 87.3882 137.612 90 140.788 90C143.965 90 146.576 87.3882 146.576 84.2118C146.576 84.1412 146.576 84.0706 146.576 84\"\r\n class=\"strokePageColor\" stroke-width=\"3\" stroke-linecap=\"round\" />\r\n <path\r\n d=\"M116 87C117.657 87 119 85.6569 119 84C119 82.3431 117.657 81 116 81C114.343 81 113 82.3431 113 84C113 85.6569 114.343 87 116 87Z\"\r\n class=\"fillPageColor\" />\r\n <path\r\n d=\"M165 87C166.657 87 168 85.6569 168 84C168 82.3431 166.657 81 165 81C163.343 81 162 82.3431 162 84C162 85.6569 163.343 87 165 87Z\"\r\n class=\"fillPageColor\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M136.5 87C136.5 86.1716 137.172 85.5 138 85.5C138.828 85.5 139.5 86.1716 139.5 87V87.2118C139.5 89.5598 141.44 91.5 143.788 91.5C146.136 91.5 148.076 89.5598 148.076 87.2118V87C148.076 86.1716 148.748 85.5 149.576 85.5C150.405 85.5 151.076 86.1716 151.076 87V87.2118C151.076 91.2167 147.793 94.5 143.788 94.5C139.783 94.5 136.5 91.2167 136.5 87.2118V87Z\"\r\n class=\"fillMediumColor\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M119 90C120.657 90 122 88.6569 122 87C122 85.3431 120.657 84 119 84C117.343 84 116 85.3431 116 87C116 88.6569 117.343 90 119 90Z\"\r\n class=\"fillMediumColor\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M168 90C169.657 90 171 88.6569 171 87C171 85.3431 169.657 84 168 84C166.343 84 165 85.3431 165 87C165 88.6569 166.343 90 168 90Z\"\r\n class=\"fillMediumColor\" />\r\n <defs>\r\n <linearGradient id=\"paint0_linear\" x1=\"0\" y1=\"129\" x2=\"123\" y2=\"129\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopPageColor\" stop-opacity=\"0.01\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint1_linear\" x1=\"287\" y1=\"126\" x2=\"164\" y2=\"126\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopPageColor\" stop-opacity=\"0.01\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint2_linear\" x1=\"107.4\" y1=\"119.25\" x2=\"122.49\" y2=\"148.452\" gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#BAC2CF\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n </defs>\r\n</svg>\r\n\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 255 117\" fill=\"none\" *ngIf=\"illustrationId == 'bill-preview'\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M148.669 106.944H60.582V0.168762L75.2633 9.37355L89.9445 0.168762L104.626 9.37355L119.307 0.168762L133.988 9.37355L148.669 0.168762V106.944Z\"\r\n class=\"fillStrongColor\" fill-opacity=\"0.05\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M156.669 114.944H68.582V8.16876L83.2633 17.3735L97.9445 8.16876L112.626 17.3735L127.307 8.16876L141.988 17.3735L156.669 8.16876V114.944Z\"\r\n class=\"strokeStrongColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <rect opacity=\"0.2\" x=\"164\" y=\"114\" width=\"60\" height=\"3\" rx=\"1.5\" fill=\"url(#paint0_linear)\" />\r\n <rect opacity=\"0.2\" x=\"1\" y=\"114\" width=\"60\" height=\"3\" rx=\"1.5\" fill=\"url(#paint1_linear)\" />\r\n <path\r\n d=\"M109 93C109 93.0706 109 93.1412 109 93.2118C109 96.3882 111.612 99 114.788 99C117.965 99 120.576 96.3882 120.576 93.2118C120.576 93.1412 120.576 93.0706 120.576 93\"\r\n class=\"strokePageColor\" stroke-width=\"3\" stroke-linecap=\"round\" />\r\n <path\r\n d=\"M90 96C91.6569 96 93 94.6569 93 93C93 91.3431 91.6569 90 90 90C88.3431 90 87 91.3431 87 93C87 94.6569 88.3431 96 90 96Z\"\r\n class=\"fillPageColor\" />\r\n <path\r\n d=\"M139 96C140.657 96 142 94.6569 142 93C142 91.3431 140.657 90 139 90C137.343 90 136 91.3431 136 93C136 94.6569 137.343 96 139 96Z\"\r\n class=\"fillPageColor\" />\r\n <path\r\n d=\"M112 96C112 96.0706 112 96.1412 112 96.2118C112 99.3882 114.612 102 117.788 102C120.965 102 123.576 99.3882 123.576 96.2118C123.576 96.1412 123.576 96.0706 123.576 96\"\r\n class=\"strokeMediumColor\" stroke-width=\"3\" stroke-linecap=\"round\" />\r\n <path\r\n d=\"M93 99C94.6569 99 96 97.6569 96 96C96 94.3431 94.6569 93 93 93C91.3431 93 90 94.3431 90 96C90 97.6569 91.3431 99 93 99Z\"\r\n class=\"fillStrongColor\" />\r\n <path\r\n d=\"M142 99C143.657 99 145 97.6569 145 96C145 94.3431 143.657 93 142 93C140.343 93 139 94.3431 139 96C139 97.6569 140.343 99 142 99Z\"\r\n class=\"fillStrongColor\" />\r\n <defs>\r\n <linearGradient id=\"paint0_linear\" x1=\"164\" y1=\"117\" x2=\"224\" y2=\"117\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopStrongColor\" />\r\n <stop offset=\"1\" class=\"stopPageColor\" stop-opacity=\"0.01\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint1_linear\" x1=\"1\" y1=\"117\" x2=\"61\" y2=\"117\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopPageColor\" stop-opacity=\"0.01\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n </defs>\r\n</svg>\r\n\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"116\" height=\"116\" viewBox=\"0 0 116 116\" fill=\"none\" *ngIf=\"illustrationId == 'refresh'\">\r\n <g opacity=\"0.6\" clip-path=\"url(#clip0_3090_20)\">\r\n <path\r\n d=\"M46.3551 40.4698C46.9436 39.2396 46.7763 37.8157 45.9205 36.7545C45.9205 36.7545 26.0866 12.1867 26.0804 12.1796C24.698 10.4662 22.004 10.468 20.6225 12.1796L0.78328 36.7554C-0.073409 37.8165 -0.240676 39.2396 0.347856 40.4698C0.935502 41.7008 2.14797 42.4646 3.51177 42.4646H12.1539V72.6222C12.1539 80.5953 15.0735 88.2621 20.3765 94.2103C21.0004 94.9103 22.0748 94.9722 22.7758 94.3483C23.4758 93.7235 23.5378 92.65 22.9129 91.9491C18.1658 86.6239 15.5523 79.7598 15.5523 72.6222V40.7654C15.5523 39.8273 14.7912 39.0662 13.8531 39.0662C13.8531 39.0662 3.59584 39.0662 3.51265 39.0662C3.41972 39.0662 3.37016 38.9609 3.42769 38.8892C3.42769 38.8892 23.2413 14.3461 23.267 14.3142C23.3103 14.2602 23.3935 14.2602 23.436 14.3142C23.436 14.3142 43.2487 38.8555 43.2761 38.8892C43.3345 38.9617 43.2823 39.0662 43.1912 39.0662H32.8507C31.9117 39.0662 31.1515 39.8273 31.1515 40.7654V72.6222C31.1515 80.043 37.1882 86.0806 44.609 86.0806H54.4175C55.9681 86.0806 57.4248 86.6841 58.5204 87.7798L70.815 100.073C71.4009 100.659 70.9681 101.68 70.1495 101.68H44.609C38.4962 101.68 32.6481 99.8026 27.6964 96.252C26.9335 95.705 25.8724 95.8794 25.3255 96.6423C24.7785 97.4051 24.9538 98.4663 25.7167 99.0132C31.2489 102.981 37.782 105.078 44.609 105.078H70.1495C73.9284 105.078 75.8923 100.345 73.2178 97.6706L60.9241 85.377C59.186 83.6388 56.8761 82.6821 54.4184 82.6821H44.609C39.0626 82.6821 34.5499 78.1694 34.5499 72.6222V42.4646H43.1912C44.555 42.4646 45.7674 41.7008 46.3551 40.4698Z\"\r\n fill=\"#536072\" />\r\n <path\r\n d=\"M112.488 73.4886H103.847V43.331C103.847 36.4306 101.708 29.8399 97.6608 24.2715C97.1094 23.5121 96.0465 23.344 95.2872 23.8962C94.5279 24.4476 94.3597 25.5105 94.912 26.2689C98.5334 31.2533 100.448 37.1537 100.448 43.331V75.1879C100.448 76.1268 101.209 76.8871 102.147 76.8871H112.488C112.522 76.8871 112.556 76.8871 112.586 76.949C112.616 77.011 112.594 77.0384 112.572 77.0641L92.7331 101.64C92.7233 101.651 92.7003 101.68 92.6481 101.68C92.5968 101.68 92.5738 101.651 92.564 101.64L72.7239 77.0641C72.7026 77.0375 72.6814 77.011 72.7106 76.949C72.7398 76.8871 72.7752 76.8871 72.8088 76.8871H83.1493C84.0883 76.8871 84.8485 76.126 84.8485 75.1879V43.331C84.8485 35.9102 78.8119 29.8727 71.3911 29.8727H61.5816C60.032 29.8727 58.5752 29.2691 57.4796 28.1735L45.185 15.8798C44.5974 15.2913 45.0319 14.2735 45.8514 14.2735H71.3911C78.4623 14.2735 85.2777 16.8453 90.5825 21.5147C91.287 22.135 92.3605 22.0669 92.98 21.3624C93.6004 20.658 93.5322 19.5844 92.8278 18.9641C86.9026 13.7478 79.2898 10.8751 71.3911 10.8751C71.3911 10.8751 45.8709 10.8751 45.8514 10.8751C42.0671 10.8751 40.106 15.6063 42.7822 18.2826L55.0759 30.5763C56.8141 32.3144 59.1239 33.2711 61.5816 33.2711H71.3911C76.9383 33.2711 81.4501 37.7838 81.4501 43.331V73.4886H72.8088C71.445 73.4886 70.2326 74.2533 69.6449 75.4834C69.0573 76.7136 69.2237 78.1376 70.0804 79.1987C70.0804 79.1987 89.901 103.752 89.9196 103.775C91.3055 105.491 93.9916 105.491 95.3775 103.775L115.218 79.1987C116.074 78.1376 116.241 76.7136 115.652 75.4834C115.065 74.2533 113.852 73.4886 112.488 73.4886Z\"\r\n fill=\"#536072\" />\r\n <path\r\n d=\"M41.7194 55.953V58.5921C41.7194 59.5302 42.4805 60.2913 43.4186 60.2913C44.3567 60.2913 45.1178 59.5302 45.1178 58.5921V55.953C45.1178 55.014 44.3567 54.2538 43.4186 54.2538C42.4805 54.2538 41.7194 55.014 41.7194 55.953Z\"\r\n fill=\"#536072\" />\r\n <path\r\n d=\"M74.2805 58.5921V55.953C74.2805 55.014 73.5203 54.2538 72.5813 54.2538C71.6432 54.2538 70.8821 55.014 70.8821 55.953V58.5921C70.8821 59.5302 71.6432 60.2913 72.5813 60.2913C73.5203 60.2913 74.2805 59.5302 74.2805 58.5921Z\"\r\n fill=\"#536072\" />\r\n <path\r\n d=\"M57.9999 61.6993C59.8929 61.6993 61.6709 60.9072 62.8781 59.5266C63.4958 58.8204 63.4241 57.7469 62.7179 57.1291C62.0108 56.5114 60.9372 56.5831 60.3195 57.2893C59.7575 57.9327 58.9123 58.3009 57.9999 58.3009C57.0874 58.3009 56.2423 57.9327 55.6803 57.2893C55.0625 56.5831 53.9899 56.5114 53.2828 57.1283C52.5766 57.7469 52.504 58.8195 53.1217 59.5266C54.3289 60.9072 56.1069 61.6993 57.9999 61.6993Z\"\r\n fill=\"#536072\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3090_20\">\r\n <rect width=\"116\" height=\"116\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n</svg>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}:host{display:block}.fillStrongColor{fill:var(--mediumFontColor)}.fillMediumColor{fill:var(--lightFontColor)}.fillPageColor{fill:var(--appBackgroundColor);opacity:.5}.strokePageColor{stroke:var(--appBackgroundColor);opacity:.5}.strokeStrongColor{stroke:var(--mediumFontColor)}.strokeMediumColor{stroke:var(--lightFontColor)}.stopPageColor{stop-color:var(--pageBackgroundColor)}.stopStrongColor{stop-color:var(--strongFontColor)}.stopLightColor{stop-color:var(--lightFontColor)}.secondaryColor{fill:var(--hrBorderColor)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
673
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: IllustrationComponent, decorators: [{
|
|
674
|
-
type: Component,
|
|
675
|
-
args: [{ selector: 'wm-illustration', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg viewBox=\"0 0 368 121\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" *ngIf=\"illustrationId == 'login'\">\r\n <path opacity=\"0.2\"\r\n d=\"M2 120.5C1.17157 120.5 0.5 119.828 0.5 119C0.5 118.172 1.17157 117.5 2 117.5H122C122.828 117.5 123.5 118.172 123.5 119C123.5 119.828 122.828 120.5 122 120.5H2Z\"\r\n fill=\"url(#paint0_linear)\" />\r\n <path opacity=\"0.2\"\r\n d=\"M246.5 121C245.672 121 245 120.328 245 119.5C245 118.672 245.672 118 246.5 118H366.5C367.328 118 368 118.672 368 119.5C368 120.328 367.328 121 366.5 121H246.5Z\"\r\n fill=\"url(#paint1_linear)\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M183.506 46.538C207.012 49.9633 225.578 74.549 229.366 98C229.455 98.5769 122.545 98.5769 122.634 98C126.421 74.549 144.987 49.9633 168.494 46.538C164.953 42.5162 165.212 36.4187 169.08 32.7111C172.948 29.0035 179.051 29.0035 182.919 32.7111C186.788 36.4187 187.046 42.5162 183.506 46.538ZM176 34C172.686 34 170 36.6863 170 40C170 43.3137 172.686 46 176 46C179.314 46 182 43.3137 182 40C182 36.6863 179.314 34 176 34Z\"\r\n class=\"fillStrongColor\" opacity=\"0.05\" />\r\n <path\r\n d=\"M235.526 98.708C235.146 98.2591 234.588 98.0002 234 98H118C117.412 98.0003 116.855 98.2589 116.475 98.7073C116.095 99.1557 115.932 99.7484 116.028 100.328C116.816 105.056 120.75 114 130 114H222C231.25 114 235.184 105.056 235.972 100.328C236.068 99.7487 235.905 99.1563 235.526 98.708Z\"\r\n class=\"fillStrongColor\" opacity=\"0.05\" />\r\n <path d=\"M132.612 98C136.46 73.08 158.002 54 184 54C209.998 54 231.54 73.08 235.388 98\" class=\"strokeStrongColor\"\r\n stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M184 54C188.418 54 192 50.4183 192 46C192 41.5817 188.418 38 184 38C179.582 38 176 41.5817 176 46C176 50.4183 179.582 54 184 54Z\"\r\n class=\"strokeStrongColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M242 108C242 108 240 120 230 120C225.842 120 142.158 120 138 120C128 120 126 108 126 108H242Z\"\r\n class=\"strokeStrongColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M186 88C186 88.0706 186 88.1412 186 88.2118C186 91.3882 188.612 94 191.788 94C194.965 94 197.576 91.3882 197.576 88.2118C197.576 88.1412 197.576 88.0706 197.576 88\"\r\n class=\"strokePageColor\" stroke-width=\"3\" stroke-linecap=\"round\" />\r\n <path\r\n d=\"M167 91C168.657 91 170 89.6569 170 88C170 86.3431 168.657 85 167 85C165.343 85 164 86.3431 164 88C164 89.6569 165.343 91 167 91Z\"\r\n class=\"fillStrongColor\" opacity=\"0.05\" />\r\n <path\r\n d=\"M216 91C217.657 91 219 89.6569 219 88C219 86.3431 217.657 85 216 85C214.343 85 213 86.3431 213 88C213 89.6569 214.343 91 216 91Z\"\r\n class=\"fillStrongColor\" opacity=\"0.05\" />\r\n <path\r\n d=\"M189 91C189 91.0706 189 91.1412 189 91.2118C189 94.3882 191.612 97 194.788 97C197.965 97 200.576 94.3882 200.576 91.2118C200.576 91.1412 200.576 91.0706 200.576 91\"\r\n class=\"strokeMediumColor\" stroke-width=\"3\" stroke-linecap=\"round\" />\r\n <path\r\n d=\"M170 94C171.657 94 173 92.6569 173 91C173 89.3431 171.657 88 170 88C168.343 88 167 89.3431 167 91C167 92.6569 168.343 94 170 94Z\"\r\n class=\"fillStrongColor\" />\r\n <path\r\n d=\"M219 94C220.657 94 222 92.6569 222 91C222 89.3431 220.657 88 219 88C217.343 88 216 89.3431 216 91C216 92.6569 217.343 94 219 94Z\"\r\n class=\"fillStrongColor\" />\r\n <defs>\r\n <linearGradient id=\"paint0_linear\" x1=\"0.5\" y1=\"120.5\" x2=\"123.5\" y2=\"120.5\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopPageColor\" stop-opacity=\"0.01\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint1_linear\" x1=\"368\" y1=\"118\" x2=\"245\" y2=\"118\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopPageColor\" stop-opacity=\"0.01\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n </defs>\r\n</svg>\r\n\r\n<svg viewBox=\"0 0 348 129\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" *ngIf=\"illustrationId == 'expired'\">\r\n <path opacity=\"0.2\"\r\n d=\"M2 128.5C1.17157 128.5 0.5 127.828 0.5 127C0.5 126.172 1.17157 125.5 2 125.5H122C122.828 125.5 123.5 126.172 123.5 127C123.5 127.828 122.828 128.5 122 128.5H2Z\"\r\n fill=\"url(#paint0_linear)\" />\r\n <path opacity=\"0.2\"\r\n d=\"M226.5 129C225.672 129 225 128.328 225 127.5C225 126.672 225.672 126 226.5 126H346.5C347.328 126 348 126.672 348 127.5C348 128.328 347.328 129 346.5 129H226.5Z\"\r\n fill=\"url(#paint1_linear)\" />\r\n <path\r\n d=\"M190.548 42.5806H186.677V25.1613C186.677 13.403 177.145 3.87097 165.387 3.87097C153.629 3.87097 144.097 13.403 144.097 25.1613V42.5806H140.226V25.1613C140.226 11.2651 151.491 0 165.387 0C179.283 0 190.548 11.2651 190.548 25.1613V42.5806Z\"\r\n class=\"fillStrongColor\" opacity=\"0.05\" />\r\n <path\r\n d=\"M202.161 46.4516H128.613C122.202 46.458 117.006 51.6535 117 58.0645V108.387C117.006 114.798 122.202 119.994 128.613 120H202.161C208.572 119.994 213.768 114.798 213.774 108.387V58.0645C213.768 51.6535 208.572 46.458 202.161 46.4516Z\"\r\n class=\"fillStrongColor\" opacity=\"0.05\" />\r\n <path\r\n d=\"M197.803 46.3607V32.5902C197.803 19.5526 187.234 8.9836 174.197 8.9836V8.9836C161.159 8.9836 150.59 19.5526 150.59 32.5902V46.3607\"\r\n class=\"strokeStrongColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M211.574 127.016H136.819C131.387 127.016 126.983 122.613 126.983 117.18V66.0328C126.983 60.6005 131.387 56.1967 136.819 56.1967H211.574C217.006 56.1967 221.41 60.6005 221.41 66.0328V117.18C221.41 119.789 220.373 122.291 218.529 124.135C216.684 125.98 214.182 127.016 211.574 127.016V127.016Z\"\r\n class=\"strokeStrongColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M171 106C171 106.071 171 106.141 171 106.212C171 109.388 173.612 112 176.788 112C179.965 112 182.576 109.388 182.576 106.212C182.576 106.141 182.576 106.071 182.576 106\"\r\n class=\"strokePageColor\" stroke-width=\"3\" stroke-linecap=\"round\" />\r\n <path\r\n d=\"M152 109C153.657 109 155 107.657 155 106C155 104.343 153.657 103 152 103C150.343 103 149 104.343 149 106C149 107.657 150.343 109 152 109Z\"\r\n class=\"fillPageColor\" />\r\n <path\r\n d=\"M201 109C202.657 109 204 107.657 204 106C204 104.343 202.657 103 201 103C199.343 103 198 104.343 198 106C198 107.657 199.343 109 201 109Z\"\r\n class=\"fillPageColor\" />\r\n <path\r\n d=\"M174 109C174 109.071 174 109.141 174 109.212C174 112.388 176.612 115 179.788 115C182.965 115 185.576 112.388 185.576 109.212C185.576 109.141 185.576 109.071 185.576 109\"\r\n class=\"strokeMediumColor\" stroke-width=\"3\" stroke-linecap=\"round\" />\r\n <path\r\n d=\"M155 112C156.657 112 158 110.657 158 109C158 107.343 156.657 106 155 106C153.343 106 152 107.343 152 109C152 110.657 153.343 112 155 112Z\"\r\n class=\"fillStrongColor\" />\r\n <path\r\n d=\"M204 112C205.657 112 207 110.657 207 109C207 107.343 205.657 106 204 106C202.343 106 201 107.343 201 109C201 110.657 202.343 112 204 112Z\"\r\n class=\"fillStrongColor\" />\r\n <defs>\r\n <linearGradient id=\"paint0_linear\" x1=\"0.5\" y1=\"128.5\" x2=\"123.5\" y2=\"128.5\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopPageColor\" stop-opacity=\"0.01\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint1_linear\" x1=\"348\" y1=\"126\" x2=\"225\" y2=\"126\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopPageColor\" stop-opacity=\"0.01\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n </defs>\r\n</svg>\r\n\r\n<svg viewBox=\"0 0 387 114\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" *ngIf=\"illustrationId == 'no-dashboard'\">\r\n <path opacity=\"0.2\"\r\n d=\"M2 113.5C1.17157 113.5 0.5 112.828 0.5 112C0.5 111.172 1.17157 110.5 2 110.5H122C122.828 110.5 123.5 111.172 123.5 112C123.5 112.828 122.828 113.5 122 113.5H2Z\"\r\n fill=\"url(#paint0_linear)\" />\r\n <path opacity=\"0.2\"\r\n d=\"M265.5 114C264.672 114 264 113.328 264 112.5C264 111.672 264.672 111 265.5 111H385.5C386.328 111 387 111.672 387 112.5C387 113.328 386.328 114 385.5 114H265.5Z\"\r\n fill=\"url(#paint1_linear)\" />\r\n <rect x=\"125\" width=\"120\" height=\"104\" class=\"fillStrongColor\" fill-opacity=\"0.05\" />\r\n <path d=\"M133 36H253\" class=\"strokeStrongColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <rect x=\"133\" y=\"8\" width=\"120\" height=\"104\" class=\"strokeStrongColor\" stroke-width=\"3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M195 81C195 81.0706 195 81.1412 195 81.2118C195 84.3882 197.612 87 200.788 87C203.965 87 206.576 84.3882 206.576 81.2118C206.576 81.1412 206.576 81.0706 206.576 81\"\r\n class=\"strokePageColor\" stroke-width=\"3\" stroke-linecap=\"round\" />\r\n <path\r\n d=\"M176 84C177.657 84 179 82.6569 179 81C179 79.3431 177.657 78 176 78C174.343 78 173 79.3431 173 81C173 82.6569 174.343 84 176 84Z\"\r\n class=\"fillPageColor\" />\r\n <path\r\n d=\"M225 84C226.657 84 228 82.6569 228 81C228 79.3431 226.657 78 225 78C223.343 78 222 79.3431 222 81C222 82.6569 223.343 84 225 84Z\"\r\n class=\"fillPageColor\" />\r\n <path\r\n d=\"M198 84C198 84.0706 198 84.1412 198 84.2118C198 87.3882 200.612 90 203.788 90C206.965 90 209.576 87.3882 209.576 84.2118C209.576 84.1412 209.576 84.0706 209.576 84\"\r\n class=\"strokeMediumColor\" stroke-width=\"3\" stroke-linecap=\"round\" />\r\n <path\r\n d=\"M179 87C180.657 87 182 85.6569 182 84C182 82.3431 180.657 81 179 81C177.343 81 176 82.3431 176 84C176 85.6569 177.343 87 179 87Z\"\r\n class=\"fillStrongColor\" />\r\n <path\r\n d=\"M228 87C229.657 87 231 85.6569 231 84C231 82.3431 229.657 81 228 81C226.343 81 225 82.3431 225 84C225 85.6569 226.343 87 228 87Z\"\r\n class=\"fillStrongColor\" />\r\n <defs>\r\n <linearGradient id=\"paint0_linear\" x1=\"0.5\" y1=\"113.5\" x2=\"123.5\" y2=\"113.5\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopPageColor\" stop-opacity=\"0.01\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint1_linear\" x1=\"387\" y1=\"111\" x2=\"264\" y2=\"111\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopPageColor\" stop-opacity=\"0.01\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n </defs>\r\n</svg>\r\n\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 387 114\" fill=\"none\" *ngIf=\"illustrationId == 'no-item'\">\r\n <path opacity=\"0.2\"\r\n d=\"M2 113.5C1.17157 113.5 0.5 112.828 0.5 112C0.5 111.172 1.17157 110.5 2 110.5H122C122.828 110.5 123.5 111.172 123.5 112C123.5 112.828 122.828 113.5 122 113.5H2Z\"\r\n fill=\"url(#paint0_linear)\" />\r\n <path opacity=\"0.2\"\r\n d=\"M265.5 114C264.672 114 264 113.328 264 112.5C264 111.672 264.672 111 265.5 111H385.5C386.328 111 387 111.672 387 112.5C387 113.328 386.328 114 385.5 114H265.5Z\"\r\n fill=\"url(#paint1_linear)\" />\r\n <path d=\"M245 0H125V104H245V0Z\" class=\"fillStrongColor\" fill-opacity=\"0.05\" />\r\n <path d=\"M133 36H253\" class=\"strokeStrongColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path d=\"M253 8H133V112H253V8Z\" class=\"strokeStrongColor\" stroke-width=\"3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path opacity=\"0.5\"\r\n d=\"M197.576 82C197.576 81.9294 197.576 81.8588 197.576 81.7882C197.576 78.6118 194.964 76 191.788 76C188.611 76 186 78.6118 186 81.7882C186 81.8588 186 81.9294 186 82\"\r\n class=\"strokePageColor\" stroke-width=\"3\" stroke-linecap=\"round\" />\r\n <path\r\n d=\"M200.576 85C200.576 84.9294 200.576 84.8588 200.576 84.7882C200.576 81.6118 197.964 79 194.788 79C191.611 79 189 81.6118 189 84.7882C189 84.8588 189 84.9294 189 85\"\r\n class=\"strokeMediumColor\" stroke-width=\"3\" stroke-linecap=\"round\" />\r\n <rect x=\"206\" y=\"64\" width=\"12\" height=\"6\" rx=\"3\" class=\"fillPageColor\" />\r\n <rect x=\"165\" y=\"64\" width=\"12\" height=\"6\" rx=\"3\" class=\"fillPageColor\" />\r\n <rect x=\"209\" y=\"67\" width=\"12\" height=\"6\" rx=\"3\" class=\"fillStrongColor\" />\r\n <rect x=\"166\" y=\"67\" width=\"12\" height=\"6\" rx=\"3\" class=\"fillStrongColor\" />\r\n <defs>\r\n <linearGradient id=\"paint0_linear\" x1=\"0.5\" y1=\"113.5\" x2=\"123.5\" y2=\"113.5\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopPageColor\" stop-opacity=\"0.01\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint1_linear\" x1=\"387\" y1=\"111\" x2=\"264\" y2=\"111\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopPageColor\" stop-opacity=\"0.01\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n </defs>\r\n</svg>\r\n\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 734 197\" fill=\"none\" *ngIf=\"illustrationId == 'no-search'\">\r\n <rect opacity=\"0.2\" x=\"515\" y=\"186\" width=\"219\" height=\"10\" rx=\"5\" fill=\"url(#paint0_linear)\" />\r\n <rect opacity=\"0.2\" x=\"219\" y=\"196\" width=\"219\" height=\"10\" rx=\"5\" transform=\"rotate(-180 219 196)\"\r\n fill=\"url(#paint1_linear)\" />\r\n <rect x=\"256.5\" y=\"2.5\" width=\"221\" height=\"192\" rx=\"8.5\" stroke=\"#536072\" stroke-width=\"5\" />\r\n <rect x=\"258\" y=\"54\" width=\"217\" height=\"4\" fill=\"#536072\" />\r\n <path\r\n d=\"M396.279 157.733L379.501 140.671C382.751 136.588 384.708 131.401 384.708 125.751C384.708 112.656 374.23 102.001 361.354 102.001C348.477 102.001 338 112.656 338 125.751C338 138.846 348.477 149.5 361.354 149.5C366.91 149.5 372.011 147.511 376.025 144.206L392.803 161.268C393.282 161.755 393.912 162 394.541 162C395.171 162 395.8 161.755 396.279 161.268C397.24 160.29 397.24 158.71 396.279 157.733ZM361.354 144.5C351.186 144.5 342.917 136.091 342.917 125.751C342.917 115.411 351.186 107.001 361.354 107.001C371.522 107.001 379.791 115.411 379.791 125.751C379.791 136.091 371.521 144.5 361.354 144.5Z\"\r\n fill=\"#536072\" />\r\n <defs>\r\n <linearGradient id=\"paint0_linear\" x1=\"515\" y1=\"186\" x2=\"734\" y2=\"186\" gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#35393F\" />\r\n <stop offset=\"1\" stop-color=\"#C4C4C4\" stop-opacity=\"0\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint1_linear\" x1=\"219\" y1=\"196\" x2=\"438\" y2=\"196\" gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#35393F\" />\r\n <stop offset=\"1\" stop-color=\"#C4C4C4\" stop-opacity=\"0\" />\r\n </linearGradient>\r\n </defs>\r\n</svg>\r\n\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" *ngIf=\"illustrationId == 'no-widget'\" viewBox=\"0 0 324 129\" fill=\"none\">\r\n <path opacity=\"0.2\"\r\n d=\"M2 128.5C1.17157 128.5 0.5 127.828 0.5 127C0.5 126.172 1.17157 125.5 2 125.5H122C122.828 125.5 123.5 126.172 123.5 127C123.5 127.828 122.828 128.5 122 128.5H2Z\"\r\n fill=\"url(#paint0_linear)\" />\r\n <path opacity=\"0.2\"\r\n d=\"M202.5 129C201.672 129 201 128.328 201 127.5C201 126.672 201.672 126 202.5 126H322.5C323.328 126 324 126.672 324 127.5C324 128.328 323.328 129 322.5 129H202.5Z\"\r\n fill=\"url(#paint1_linear)\" />\r\n <path opacity=\"0.05\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M85.9355 54.1936C84.8652 54.1936 84 53.3265 84 52.2581C84 23.4426 107.443 0 136.258 0C137.328 0 138.194 0.867097 138.194 1.93548V54.1936H85.9355Z\"\r\n class=\"fillStrongColor\" />\r\n <path d=\"M161 25C189.718 25 213 48.282 213 77C213 105.718 189.718 129 161 129C132.282 129 109 105.718 109 77\"\r\n class=\"strokeStrongColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path opacity=\"0.05\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M153.742 122C124.926 122 101.484 98.5574 101.484 69.7419C101.484 68.6735 102.349 67.8064 103.419 67.8064H151.806V19.4193C151.806 18.351 152.672 17.4839 153.742 17.4839C182.557 17.4839 206 40.9264 206 69.7419C206 98.5574 182.557 122 153.742 122Z\"\r\n class=\"fillStrongColor\" />\r\n <path opacity=\"0.2\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M145 7.5C115.454 7.5 91.5 31.4536 91.5 61C91.5 61.8284 92.1716 62.5 93 62.5H145C145.828 62.5 146.5 61.8284 146.5 61V9C146.5 8.17157 145.828 7.5 145 7.5ZM143.5 10.5219V59.5L94.5219 59.5C95.3007 32.8024 116.802 11.3007 143.5 10.5219Z\"\r\n fill=\"url(#paint2_linear)\" />\r\n <path\r\n d=\"M159 98C159 98.0706 159 98.1412 159 98.2118C159 101.388 161.612 104 164.788 104C167.965 104 170.576 101.388 170.576 98.2118C170.576 98.1412 170.576 98.0706 170.576 98\"\r\n class=\"strokePageColor\" stroke-width=\"3\" stroke-linecap=\"round\" />\r\n <path\r\n d=\"M140 101C141.657 101 143 99.6569 143 98C143 96.3431 141.657 95 140 95C138.343 95 137 96.3431 137 98C137 99.6569 138.343 101 140 101Z\"\r\n class=\"fillPageColor\" />\r\n <path\r\n d=\"M189 101C190.657 101 192 99.6569 192 98C192 96.3431 190.657 95 189 95C187.343 95 186 96.3431 186 98C186 99.6569 187.343 101 189 101Z\"\r\n class=\"fillPageColor\" />\r\n <path\r\n d=\"M162 101C162 101.071 162 101.141 162 101.212C162 104.388 164.612 107 167.788 107C170.965 107 173.576 104.388 173.576 101.212C173.576 101.141 173.576 101.071 173.576 101\"\r\n class=\"strokeMediumColor\" stroke-width=\"3\" stroke-linecap=\"round\" />\r\n <path\r\n d=\"M143 104C144.657 104 146 102.657 146 101C146 99.3431 144.657 98 143 98C141.343 98 140 99.3431 140 101C140 102.657 141.343 104 143 104Z\"\r\n class=\"fillStrongColor\" />\r\n <path\r\n d=\"M192 104C193.657 104 195 102.657 195 101C195 99.3431 193.657 98 192 98C190.343 98 189 99.3431 189 101C189 102.657 190.343 104 192 104Z\"\r\n class=\"fillStrongColor\" />\r\n <defs>\r\n <linearGradient id=\"paint0_linear\" x1=\"0.5\" y1=\"128.5\" x2=\"123.5\" y2=\"128.5\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopPageColor\" stop-opacity=\"0.01\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint1_linear\" x1=\"324\" y1=\"126\" x2=\"201\" y2=\"126\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopPageColor\" stop-opacity=\"0.01\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint2_linear\" x1=\"64\" y1=\"35\" x2=\"119\" y2=\"90\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopLightColor\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n </defs>\r\n</svg>\r\n\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 333 152\" fill=\"none\" *ngIf=\"illustrationId == 'no-pos'\">\r\n <path opacity=\"0.05\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M111.088 12.8393C108.543 14.6575 107.5 16.4154 107.5 18C107.5 19.5846 108.543 21.3425 111.088 23.1607C113.602 24.957 117.32 26.6113 122.005 28.0129C131.355 30.8106 144.203 32.5 158 32.5C171.797 32.5 184.645 30.8106 193.995 28.0129C198.68 26.6113 202.398 24.957 204.912 23.1607C207.457 21.3425 208.5 19.5846 208.5 18C208.5 16.4154 207.457 14.6575 204.912 12.8393C202.398 11.043 198.68 9.38874 193.995 7.98705C184.645 5.18938 171.797 3.5 158 3.5C144.203 3.5 131.355 5.18938 122.005 7.98705C117.32 9.38874 113.602 11.043 111.088 12.8393ZM109.344 10.3982C106.482 12.4425 104.5 14.9846 104.5 18V60.5V62V106C104.5 109.015 106.482 111.557 109.344 113.602C112.236 115.668 116.305 117.439 121.145 118.887C130.845 121.789 143.997 123.5 158 123.5C172.003 123.5 185.155 121.789 194.855 118.887C199.695 117.439 203.764 115.668 206.656 113.602C209.518 111.557 211.5 109.015 211.5 106V62V60.5V18C211.5 14.9846 209.518 12.4425 206.656 10.3982C203.764 8.33203 199.695 6.56126 194.855 5.11295C185.155 2.21062 172.003 0.5 158 0.5C143.997 0.5 130.845 2.21062 121.145 5.11295C116.305 6.56126 112.236 8.33203 109.344 10.3982ZM208.5 60.5V24.0914C207.943 24.6217 207.323 25.1252 206.656 25.6018C203.764 27.668 199.695 29.4387 194.855 30.8871C185.155 33.7894 172.003 35.5 158 35.5C143.997 35.5 130.845 33.7894 121.145 30.8871C116.305 29.4387 112.236 27.668 109.344 25.6018C108.677 25.1252 108.057 24.6217 107.5 24.0914V60.5V62C107.5 63.5846 108.543 65.3425 111.088 67.1607C113.602 68.957 117.32 70.6113 122.005 72.0129C131.355 74.8106 144.203 76.5 158 76.5C171.797 76.5 184.645 74.8106 193.995 72.0129C198.68 70.6113 202.398 68.957 204.912 67.1607C207.457 65.3425 208.5 63.5846 208.5 62V60.5ZM208.5 68.0914C207.943 68.6217 207.323 69.1252 206.656 69.6018C203.764 71.668 199.695 73.4387 194.855 74.8871C185.155 77.7894 172.003 79.5 158 79.5C143.997 79.5 130.845 77.7894 121.145 74.8871C116.305 73.4387 112.236 71.668 109.344 69.6018C108.677 69.1252 108.057 68.6217 107.5 68.0914V106C107.5 107.585 108.543 109.343 111.088 111.161C113.602 112.957 117.32 114.611 122.005 116.013C131.355 118.811 144.203 120.5 158 120.5C171.797 120.5 184.645 118.811 193.995 116.013C198.68 114.611 202.398 112.957 204.912 111.161C207.457 109.343 208.5 107.585 208.5 106V68.0914Z\"\r\n class=\"fillStrongColor\" />\r\n <path d=\"M114 26V114C114 123.2 138.2 130 166 130C193.8 130 218 123.2 218 114V26\" class=\"strokeStrongColor\"\r\n stroke-width=\"3\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M166 43.5C195.415 43.5 219.5 36.2935 219.5 26C219.5 15.7065 195.415 8.5 166 8.5C136.585 8.5 112.5 15.7065 112.5 26C112.5 36.2935 136.585 43.5 166 43.5ZM166 11.5C193.659 11.5 216.5 18.3345 216.5 26C216.5 33.6655 193.659 40.5 166 40.5C138.341 40.5 115.5 33.6655 115.5 26C115.5 18.3345 138.341 11.5 166 11.5Z\"\r\n class=\"fillStrongColor\" />\r\n <path opacity=\"0.2\"\r\n d=\"M216.5 69V67.5H219.5V69C219.5 79.2935 195.415 86.5 166 86.5C136.585 86.5 112.5 79.2935 112.5 69V67.5H115.5V69C115.5 76.6655 138.341 83.5 166 83.5C193.659 83.5 216.5 76.6655 216.5 69Z\"\r\n fill=\"url(#paint0_linear)\" />\r\n <path\r\n d=\"M158 106C158 106.071 158 106.141 158 106.212C158 109.388 160.612 112 163.788 112C166.965 112 169.576 109.388 169.576 106.212C169.576 106.141 169.576 106.071 169.576 106\"\r\n class=\"strokePageColor\" stroke-width=\"3\" stroke-linecap=\"round\" />\r\n <path\r\n d=\"M139 109C140.657 109 142 107.657 142 106C142 104.343 140.657 103 139 103C137.343 103 136 104.343 136 106C136 107.657 137.343 109 139 109Z\"\r\n class=\"fillPageColor\" />\r\n <path\r\n d=\"M188 109C189.657 109 191 107.657 191 106C191 104.343 189.657 103 188 103C186.343 103 185 104.343 185 106C185 107.657 186.343 109 188 109Z\"\r\n class=\"fillPageColor\" />\r\n <path\r\n d=\"M161 109C161 109.071 161 109.141 161 109.212C161 112.388 163.612 115 166.788 115C169.965 115 172.576 112.388 172.576 109.212C172.576 109.141 172.576 109.071 172.576 109\"\r\n class=\"strokeMediumColor\" stroke-width=\"3\" stroke-linecap=\"round\" />\r\n <path\r\n d=\"M142 112C143.657 112 145 110.657 145 109C145 107.343 143.657 106 142 106C140.343 106 139 107.343 139 109C139 110.657 140.343 112 142 112Z\"\r\n class=\"fillMediumColor\" />\r\n <path\r\n d=\"M191 112C192.657 112 194 110.657 194 109C194 107.343 192.657 106 191 106C189.343 106 188 107.343 188 109C188 110.657 189.343 112 191 112Z\"\r\n class=\"fillMediumColor\" />\r\n <path opacity=\"0.2\"\r\n d=\"M1.5 132C0.671573 132 0 131.328 0 130.5C0 129.672 0.671573 129 1.5 129H121.5C122.328 129 123 129.672 123 130.5C123 131.328 122.328 132 121.5 132H1.5Z\"\r\n fill=\"url(#paint1_linear)\" />\r\n <path opacity=\"0.2\"\r\n d=\"M211.5 132C210.672 132 210 131.328 210 130.5C210 129.672 210.672 129 211.5 129H331.5C332.328 129 333 129.672 333 130.5C333 131.328 332.328 132 331.5 132H211.5Z\"\r\n fill=\"url(#paint2_linear)\" />\r\n <defs>\r\n <linearGradient id=\"paint0_linear\" x1=\"59\" y1=\"77\" x2=\"65.5414\" y2=\"113.838\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopPageColor\" stop-opacity=\"0.01\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint1_linear\" x1=\"0\" y1=\"132\" x2=\"123\" y2=\"132\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopPageColor\" stop-opacity=\"0.01\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint2_linear\" x1=\"333\" y1=\"129\" x2=\"210\" y2=\"129\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopPageColor\" stop-opacity=\"0.01\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n </defs>\r\n</svg>\r\n\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" *ngIf=\"illustrationId == 'no-notifications'\" viewBox=\"0 0 287 129\" fill=\"none\">\r\n <path opacity=\"0.2\"\r\n d=\"M1.5 129C0.671573 129 0 128.328 0 127.5C0 126.672 0.671573 126 1.5 126H121.5C122.328 126 123 126.672 123 127.5C123 128.328 122.328 129 121.5 129H1.5Z\"\r\n fill=\"url(#paint0_linear)\" />\r\n <path opacity=\"0.2\"\r\n d=\"M165.5 129C164.672 129 164 128.328 164 127.5C164 126.672 164.672 126 165.5 126H285.5C286.328 126 287 126.672 287 127.5C287 128.328 286.328 129 285.5 129H165.5Z\"\r\n fill=\"url(#paint1_linear)\" />\r\n <path opacity=\"0.05\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M178 39.6V56C178 66.4082 182.775 71.7799 186.863 76.3793C189.924 79.8226 192.6 82.8332 192.6 87.2C192.6 94.8343 178.14 101.091 154.019 103H154.6V103.6C154.6 112.6 147.2 120 138.2 120C129.2 120 121.8 112.6 121.8 103.6V103H121.981C97.8602 101.091 83.3999 94.8343 83.3999 87.2C83.3999 82.8332 86.0759 79.8226 89.1366 76.3793C93.2251 71.7799 97.9999 66.4082 97.9999 56V40C97.9999 18.6 116.6 0 138 0C159.4 0 178 18.4 178 39.6Z\"\r\n class=\"fillStrongColor\" />\r\n <path opacity=\"0.2\"\r\n d=\"M125.3 110H128.3V110.6C128.3 118.772 135.028 125.5 143.2 125.5C151.371 125.5 158.1 118.772 158.1 110.6V110H161.1V110.6C161.1 120.428 153.028 128.5 143.2 128.5C133.371 128.5 125.3 120.428 125.3 110.6V110Z\"\r\n fill=\"url(#paint2_linear)\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M184.5 63C184.5 70.3443 186.67 75.0713 191.438 80.6227C191.697 80.9242 194.411 83.9829 195.144 84.8757C197.824 88.1406 199.1 90.8406 199.1 94.2C199.1 105.021 176.423 112.1 143 112.1C109.576 112.1 86.8999 105.021 86.8999 94.2C86.8999 90.8406 88.176 88.1406 90.8561 84.8757C91.589 83.9829 94.303 80.9242 94.562 80.6227C99.3296 75.0713 101.5 70.3443 101.5 63V47C101.5 24.7716 120.771 5.5 143 5.5C165.23 5.5 184.5 24.5729 184.5 46.6V63ZM181.5 63V46.6C181.5 26.2367 163.58 8.5 143 8.5C122.428 8.5 104.5 26.4284 104.5 47V63C104.5 71.1557 102.034 76.5273 96.8378 82.5773C96.5455 82.9176 93.864 85.9396 93.1749 86.7792C90.8942 89.5576 89.8999 91.6613 89.8999 94.2C89.8999 102.423 111.288 109.1 143 109.1C174.712 109.1 196.1 102.423 196.1 94.2C196.1 91.6613 195.106 89.5576 192.825 86.7792C192.136 85.9396 189.454 82.9176 189.162 82.5773C183.966 76.5273 181.5 71.1557 181.5 63Z\"\r\n class=\"fillStrongColor\" />\r\n <path\r\n d=\"M135 84C135 84.0706 135 84.1412 135 84.2118C135 87.3882 137.612 90 140.788 90C143.965 90 146.576 87.3882 146.576 84.2118C146.576 84.1412 146.576 84.0706 146.576 84\"\r\n class=\"strokePageColor\" stroke-width=\"3\" stroke-linecap=\"round\" />\r\n <path\r\n d=\"M116 87C117.657 87 119 85.6569 119 84C119 82.3431 117.657 81 116 81C114.343 81 113 82.3431 113 84C113 85.6569 114.343 87 116 87Z\"\r\n class=\"fillPageColor\" />\r\n <path\r\n d=\"M165 87C166.657 87 168 85.6569 168 84C168 82.3431 166.657 81 165 81C163.343 81 162 82.3431 162 84C162 85.6569 163.343 87 165 87Z\"\r\n class=\"fillPageColor\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M136.5 87C136.5 86.1716 137.172 85.5 138 85.5C138.828 85.5 139.5 86.1716 139.5 87V87.2118C139.5 89.5598 141.44 91.5 143.788 91.5C146.136 91.5 148.076 89.5598 148.076 87.2118V87C148.076 86.1716 148.748 85.5 149.576 85.5C150.405 85.5 151.076 86.1716 151.076 87V87.2118C151.076 91.2167 147.793 94.5 143.788 94.5C139.783 94.5 136.5 91.2167 136.5 87.2118V87Z\"\r\n class=\"fillMediumColor\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M119 90C120.657 90 122 88.6569 122 87C122 85.3431 120.657 84 119 84C117.343 84 116 85.3431 116 87C116 88.6569 117.343 90 119 90Z\"\r\n class=\"fillMediumColor\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M168 90C169.657 90 171 88.6569 171 87C171 85.3431 169.657 84 168 84C166.343 84 165 85.3431 165 87C165 88.6569 166.343 90 168 90Z\"\r\n class=\"fillMediumColor\" />\r\n <defs>\r\n <linearGradient id=\"paint0_linear\" x1=\"0\" y1=\"129\" x2=\"123\" y2=\"129\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopPageColor\" stop-opacity=\"0.01\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint1_linear\" x1=\"287\" y1=\"126\" x2=\"164\" y2=\"126\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopPageColor\" stop-opacity=\"0.01\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint2_linear\" x1=\"107.4\" y1=\"119.25\" x2=\"122.49\" y2=\"148.452\" gradientUnits=\"userSpaceOnUse\">\r\n <stop stop-color=\"#BAC2CF\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n </defs>\r\n</svg>\r\n\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 255 117\" fill=\"none\" *ngIf=\"illustrationId == 'bill-preview'\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M148.669 106.944H60.582V0.168762L75.2633 9.37355L89.9445 0.168762L104.626 9.37355L119.307 0.168762L133.988 9.37355L148.669 0.168762V106.944Z\"\r\n class=\"fillStrongColor\" fill-opacity=\"0.05\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M156.669 114.944H68.582V8.16876L83.2633 17.3735L97.9445 8.16876L112.626 17.3735L127.307 8.16876L141.988 17.3735L156.669 8.16876V114.944Z\"\r\n class=\"strokeStrongColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <rect opacity=\"0.2\" x=\"164\" y=\"114\" width=\"60\" height=\"3\" rx=\"1.5\" fill=\"url(#paint0_linear)\" />\r\n <rect opacity=\"0.2\" x=\"1\" y=\"114\" width=\"60\" height=\"3\" rx=\"1.5\" fill=\"url(#paint1_linear)\" />\r\n <path\r\n d=\"M109 93C109 93.0706 109 93.1412 109 93.2118C109 96.3882 111.612 99 114.788 99C117.965 99 120.576 96.3882 120.576 93.2118C120.576 93.1412 120.576 93.0706 120.576 93\"\r\n class=\"strokePageColor\" stroke-width=\"3\" stroke-linecap=\"round\" />\r\n <path\r\n d=\"M90 96C91.6569 96 93 94.6569 93 93C93 91.3431 91.6569 90 90 90C88.3431 90 87 91.3431 87 93C87 94.6569 88.3431 96 90 96Z\"\r\n class=\"fillPageColor\" />\r\n <path\r\n d=\"M139 96C140.657 96 142 94.6569 142 93C142 91.3431 140.657 90 139 90C137.343 90 136 91.3431 136 93C136 94.6569 137.343 96 139 96Z\"\r\n class=\"fillPageColor\" />\r\n <path\r\n d=\"M112 96C112 96.0706 112 96.1412 112 96.2118C112 99.3882 114.612 102 117.788 102C120.965 102 123.576 99.3882 123.576 96.2118C123.576 96.1412 123.576 96.0706 123.576 96\"\r\n class=\"strokeMediumColor\" stroke-width=\"3\" stroke-linecap=\"round\" />\r\n <path\r\n d=\"M93 99C94.6569 99 96 97.6569 96 96C96 94.3431 94.6569 93 93 93C91.3431 93 90 94.3431 90 96C90 97.6569 91.3431 99 93 99Z\"\r\n class=\"fillStrongColor\" />\r\n <path\r\n d=\"M142 99C143.657 99 145 97.6569 145 96C145 94.3431 143.657 93 142 93C140.343 93 139 94.3431 139 96C139 97.6569 140.343 99 142 99Z\"\r\n class=\"fillStrongColor\" />\r\n <defs>\r\n <linearGradient id=\"paint0_linear\" x1=\"164\" y1=\"117\" x2=\"224\" y2=\"117\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopStrongColor\" />\r\n <stop offset=\"1\" class=\"stopPageColor\" stop-opacity=\"0.01\" />\r\n </linearGradient>\r\n <linearGradient id=\"paint1_linear\" x1=\"1\" y1=\"117\" x2=\"61\" y2=\"117\" gradientUnits=\"userSpaceOnUse\">\r\n <stop class=\"stopPageColor\" stop-opacity=\"0.01\" />\r\n <stop offset=\"1\" class=\"stopStrongColor\" />\r\n </linearGradient>\r\n </defs>\r\n</svg>\r\n\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"116\" height=\"116\" viewBox=\"0 0 116 116\" fill=\"none\" *ngIf=\"illustrationId == 'refresh'\">\r\n <g opacity=\"0.6\" clip-path=\"url(#clip0_3090_20)\">\r\n <path\r\n d=\"M46.3551 40.4698C46.9436 39.2396 46.7763 37.8157 45.9205 36.7545C45.9205 36.7545 26.0866 12.1867 26.0804 12.1796C24.698 10.4662 22.004 10.468 20.6225 12.1796L0.78328 36.7554C-0.073409 37.8165 -0.240676 39.2396 0.347856 40.4698C0.935502 41.7008 2.14797 42.4646 3.51177 42.4646H12.1539V72.6222C12.1539 80.5953 15.0735 88.2621 20.3765 94.2103C21.0004 94.9103 22.0748 94.9722 22.7758 94.3483C23.4758 93.7235 23.5378 92.65 22.9129 91.9491C18.1658 86.6239 15.5523 79.7598 15.5523 72.6222V40.7654C15.5523 39.8273 14.7912 39.0662 13.8531 39.0662C13.8531 39.0662 3.59584 39.0662 3.51265 39.0662C3.41972 39.0662 3.37016 38.9609 3.42769 38.8892C3.42769 38.8892 23.2413 14.3461 23.267 14.3142C23.3103 14.2602 23.3935 14.2602 23.436 14.3142C23.436 14.3142 43.2487 38.8555 43.2761 38.8892C43.3345 38.9617 43.2823 39.0662 43.1912 39.0662H32.8507C31.9117 39.0662 31.1515 39.8273 31.1515 40.7654V72.6222C31.1515 80.043 37.1882 86.0806 44.609 86.0806H54.4175C55.9681 86.0806 57.4248 86.6841 58.5204 87.7798L70.815 100.073C71.4009 100.659 70.9681 101.68 70.1495 101.68H44.609C38.4962 101.68 32.6481 99.8026 27.6964 96.252C26.9335 95.705 25.8724 95.8794 25.3255 96.6423C24.7785 97.4051 24.9538 98.4663 25.7167 99.0132C31.2489 102.981 37.782 105.078 44.609 105.078H70.1495C73.9284 105.078 75.8923 100.345 73.2178 97.6706L60.9241 85.377C59.186 83.6388 56.8761 82.6821 54.4184 82.6821H44.609C39.0626 82.6821 34.5499 78.1694 34.5499 72.6222V42.4646H43.1912C44.555 42.4646 45.7674 41.7008 46.3551 40.4698Z\"\r\n fill=\"#536072\" />\r\n <path\r\n d=\"M112.488 73.4886H103.847V43.331C103.847 36.4306 101.708 29.8399 97.6608 24.2715C97.1094 23.5121 96.0465 23.344 95.2872 23.8962C94.5279 24.4476 94.3597 25.5105 94.912 26.2689C98.5334 31.2533 100.448 37.1537 100.448 43.331V75.1879C100.448 76.1268 101.209 76.8871 102.147 76.8871H112.488C112.522 76.8871 112.556 76.8871 112.586 76.949C112.616 77.011 112.594 77.0384 112.572 77.0641L92.7331 101.64C92.7233 101.651 92.7003 101.68 92.6481 101.68C92.5968 101.68 92.5738 101.651 92.564 101.64L72.7239 77.0641C72.7026 77.0375 72.6814 77.011 72.7106 76.949C72.7398 76.8871 72.7752 76.8871 72.8088 76.8871H83.1493C84.0883 76.8871 84.8485 76.126 84.8485 75.1879V43.331C84.8485 35.9102 78.8119 29.8727 71.3911 29.8727H61.5816C60.032 29.8727 58.5752 29.2691 57.4796 28.1735L45.185 15.8798C44.5974 15.2913 45.0319 14.2735 45.8514 14.2735H71.3911C78.4623 14.2735 85.2777 16.8453 90.5825 21.5147C91.287 22.135 92.3605 22.0669 92.98 21.3624C93.6004 20.658 93.5322 19.5844 92.8278 18.9641C86.9026 13.7478 79.2898 10.8751 71.3911 10.8751C71.3911 10.8751 45.8709 10.8751 45.8514 10.8751C42.0671 10.8751 40.106 15.6063 42.7822 18.2826L55.0759 30.5763C56.8141 32.3144 59.1239 33.2711 61.5816 33.2711H71.3911C76.9383 33.2711 81.4501 37.7838 81.4501 43.331V73.4886H72.8088C71.445 73.4886 70.2326 74.2533 69.6449 75.4834C69.0573 76.7136 69.2237 78.1376 70.0804 79.1987C70.0804 79.1987 89.901 103.752 89.9196 103.775C91.3055 105.491 93.9916 105.491 95.3775 103.775L115.218 79.1987C116.074 78.1376 116.241 76.7136 115.652 75.4834C115.065 74.2533 113.852 73.4886 112.488 73.4886Z\"\r\n fill=\"#536072\" />\r\n <path\r\n d=\"M41.7194 55.953V58.5921C41.7194 59.5302 42.4805 60.2913 43.4186 60.2913C44.3567 60.2913 45.1178 59.5302 45.1178 58.5921V55.953C45.1178 55.014 44.3567 54.2538 43.4186 54.2538C42.4805 54.2538 41.7194 55.014 41.7194 55.953Z\"\r\n fill=\"#536072\" />\r\n <path\r\n d=\"M74.2805 58.5921V55.953C74.2805 55.014 73.5203 54.2538 72.5813 54.2538C71.6432 54.2538 70.8821 55.014 70.8821 55.953V58.5921C70.8821 59.5302 71.6432 60.2913 72.5813 60.2913C73.5203 60.2913 74.2805 59.5302 74.2805 58.5921Z\"\r\n fill=\"#536072\" />\r\n <path\r\n d=\"M57.9999 61.6993C59.8929 61.6993 61.6709 60.9072 62.8781 59.5266C63.4958 58.8204 63.4241 57.7469 62.7179 57.1291C62.0108 56.5114 60.9372 56.5831 60.3195 57.2893C59.7575 57.9327 58.9123 58.3009 57.9999 58.3009C57.0874 58.3009 56.2423 57.9327 55.6803 57.2893C55.0625 56.5831 53.9899 56.5114 53.2828 57.1283C52.5766 57.7469 52.504 58.8195 53.1217 59.5266C54.3289 60.9072 56.1069 61.6993 57.9999 61.6993Z\"\r\n fill=\"#536072\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3090_20\">\r\n <rect width=\"116\" height=\"116\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n</svg>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}:host{display:block}.fillStrongColor{fill:var(--mediumFontColor)}.fillMediumColor{fill:var(--lightFontColor)}.fillPageColor{fill:var(--appBackgroundColor);opacity:.5}.strokePageColor{stroke:var(--appBackgroundColor);opacity:.5}.strokeStrongColor{stroke:var(--mediumFontColor)}.strokeMediumColor{stroke:var(--lightFontColor)}.stopPageColor{stop-color:var(--pageBackgroundColor)}.stopStrongColor{stop-color:var(--strongFontColor)}.stopLightColor{stop-color:var(--lightFontColor)}.secondaryColor{fill:var(--hrBorderColor)}\n"] }]
|
|
676
|
-
}], ctorParameters: function () { return []; }, propDecorators: { illustrationId: [{
|
|
677
|
-
type: Input
|
|
678
|
-
}] } });
|
|
679
|
-
|
|
680
|
-
class WmBackBtnComponent {
|
|
681
|
-
constructor() {
|
|
682
|
-
this.icon = 'arrow-long-left';
|
|
683
|
-
this.disabled = false;
|
|
684
|
-
this.iClick = new EventEmitter();
|
|
685
|
-
}
|
|
686
|
-
onClick(event) {
|
|
687
|
-
this.iClick.emit(event);
|
|
688
|
-
}
|
|
689
|
-
}
|
|
690
|
-
WmBackBtnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WmBackBtnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
691
|
-
WmBackBtnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: WmBackBtnComponent, selector: "wm-back-btn", inputs: { icon: "icon", disabled: "disabled" }, outputs: { iClick: "iClick" }, ngImport: i0, template: "<button class=\"wm-btn-button-wrap\" (click)=\"onClick($event)\" type=\"button\">\r\n <div class=\"icon-svg\" [ngClass]=\"{'disabled': disabled}\" [ngStyle]=\"{\r\n 'mask': 'url(./assets/icon/svg/'+ icon+ '.svg) no-repeat center', \r\n '-webkit-mask':'url(./assets/icon/svg/'+icon+'.svg) no-repeat center'\r\n }\">\r\n </div>\r\n</button>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}:host{display:flex;align-self:center}.wm-btn-button-wrap{background-color:transparent;color:var(--mediumFontColor);border:none;border-radius:0;font-size:14px;display:flex;justify-content:flex-start;align-items:center;align-content:center;outline:0;cursor:pointer;height:30px}.wm-btn-button-wrap:hover{color:var(--strongFontColor)}.wm-btn-button-wrap:hover .icon-svg{background-color:var(--strongFontColor)}.icon-svg{justify-content:center;align-items:center;background-color:var(--mediumFontColor);width:24px;height:24px}.disabled{background-color:var(--disabledColor);border-color:var(--disabledColor);color:var(--lightFontColor);cursor:default}.disabled:hover{background-color:var(--disabledColor);border-color:var(--disabledColor)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
692
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WmBackBtnComponent, decorators: [{
|
|
693
|
-
type: Component,
|
|
694
|
-
args: [{ selector: 'wm-back-btn', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"wm-btn-button-wrap\" (click)=\"onClick($event)\" type=\"button\">\r\n <div class=\"icon-svg\" [ngClass]=\"{'disabled': disabled}\" [ngStyle]=\"{\r\n 'mask': 'url(./assets/icon/svg/'+ icon+ '.svg) no-repeat center', \r\n '-webkit-mask':'url(./assets/icon/svg/'+icon+'.svg) no-repeat center'\r\n }\">\r\n </div>\r\n</button>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}:host{display:flex;align-self:center}.wm-btn-button-wrap{background-color:transparent;color:var(--mediumFontColor);border:none;border-radius:0;font-size:14px;display:flex;justify-content:flex-start;align-items:center;align-content:center;outline:0;cursor:pointer;height:30px}.wm-btn-button-wrap:hover{color:var(--strongFontColor)}.wm-btn-button-wrap:hover .icon-svg{background-color:var(--strongFontColor)}.icon-svg{justify-content:center;align-items:center;background-color:var(--mediumFontColor);width:24px;height:24px}.disabled{background-color:var(--disabledColor);border-color:var(--disabledColor);color:var(--lightFontColor);cursor:default}.disabled:hover{background-color:var(--disabledColor);border-color:var(--disabledColor)}\n"] }]
|
|
695
|
-
}], propDecorators: { icon: [{
|
|
696
|
-
type: Input
|
|
697
|
-
}], disabled: [{
|
|
698
|
-
type: Input
|
|
699
|
-
}], iClick: [{
|
|
700
|
-
type: Output
|
|
701
|
-
}] } });
|
|
702
|
-
|
|
703
|
-
class WmBetaTextComponent {
|
|
704
|
-
constructor() {
|
|
705
|
-
this.text = '';
|
|
706
|
-
this.wrapClass = '';
|
|
707
|
-
}
|
|
708
|
-
}
|
|
709
|
-
WmBetaTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WmBetaTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
710
|
-
WmBetaTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: WmBetaTextComponent, selector: "wm-beta-text", inputs: { text: "text", wrapClass: "wrapClass" }, ngImport: i0, template: "<span class=\"text-title {{wrapClass}}\">{{text}}</span>\r\n", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.text-title{color:var(--strongFontColor);display:block;text-align:right;transform-origin:center center;transform:rotate(-6deg);font-family:Inter,Verdana,Geneva,Tahoma,sans-serif;font-weight:500;font-size:16px;min-width:50px;border-radius:5px;padding:4px;margin:auto 12px auto 28px;text-align:center}.text-position{position:absolute;right:10px;height:23px}.center-position{line-height:22px;height:22px;margin-top:8px}.red-wrapper{background-color:var(--dangerColor);color:var(--onBrandTextColor)}.warning-wrapper{background-color:var(--warningColor);color:var(--onBrandTextColor)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
711
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WmBetaTextComponent, decorators: [{
|
|
712
|
-
type: Component,
|
|
713
|
-
args: [{ selector: 'wm-beta-text', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"text-title {{wrapClass}}\">{{text}}</span>\r\n", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.text-title{color:var(--strongFontColor);display:block;text-align:right;transform-origin:center center;transform:rotate(-6deg);font-family:Inter,Verdana,Geneva,Tahoma,sans-serif;font-weight:500;font-size:16px;min-width:50px;border-radius:5px;padding:4px;margin:auto 12px auto 28px;text-align:center}.text-position{position:absolute;right:10px;height:23px}.center-position{line-height:22px;height:22px;margin-top:8px}.red-wrapper{background-color:var(--dangerColor);color:var(--onBrandTextColor)}.warning-wrapper{background-color:var(--warningColor);color:var(--onBrandTextColor)}\n"] }]
|
|
714
|
-
}], propDecorators: { text: [{
|
|
715
|
-
type: Input
|
|
716
|
-
}], wrapClass: [{
|
|
717
|
-
type: Input
|
|
718
|
-
}] } });
|
|
719
|
-
|
|
720
|
-
class InfoCardComponent {
|
|
721
|
-
constructor() {
|
|
722
|
-
this.useCustomIcon = false;
|
|
723
|
-
}
|
|
724
|
-
}
|
|
725
|
-
InfoCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: InfoCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
726
|
-
InfoCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: InfoCardComponent, selector: "wm-info-card", inputs: { label: "label", value: "value", icon: "icon", useCustomIcon: "useCustomIcon" }, ngImport: i0, template: "<div class=\"wm-info-card flex-row\">\r\n <div class=\"info-icon\" *ngIf=\"!useCustomIcon\">\r\n <div class=\"icon-bg\"></div>\r\n <img class=\"info-svg\" src=\"{{'./assets/icon/svg/' + icon + '.svg'}}\" alt=\"type\" />\r\n </div>\r\n <div class=\"info-icon\" *ngIf=\"useCustomIcon\">\r\n <ng-content select=\"[wmCustomIcon]\"></ng-content>\r\n </div>\r\n <div class=\"flex-col info-content\">\r\n <div class=\"info-card-value text-hidden\" title=\"{{value}}\">{{value}}</div>\r\n <div class=\"info-card-label text-hidden\" title=\"{{label}}\">{{label}}</div>\r\n </div>\r\n</div>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.wm-info-card{background:var(--pageBackgroundColor);width:100%;height:100px;margin-right:18px;padding:25px;border-radius:4px;box-sizing:border-box}.info-icon{display:inline-flex;width:48px;height:48px;border:1px solid transparent;border-radius:50%;margin:auto 18px auto 0;flex-shrink:0;position:relative;overflow:hidden}.icon-bg{width:100%;height:100%;position:absolute;background-color:var(--strongFontColor);opacity:.05}.info-svg{margin:auto;width:24px;height:24px;z-index:1}.info-content{justify-content:center;flex-grow:1;flex-shrink:1;overflow:hidden}.info-card-value{color:var(--strongFontColor);line-height:20px;font-size:22px;width:100%;height:20px;margin-bottom:2px}.info-card-label{color:var(--disabledTextColor);font-size:14px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
727
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: InfoCardComponent, decorators: [{
|
|
728
|
-
type: Component,
|
|
729
|
-
args: [{ selector: 'wm-info-card', template: "<div class=\"wm-info-card flex-row\">\r\n <div class=\"info-icon\" *ngIf=\"!useCustomIcon\">\r\n <div class=\"icon-bg\"></div>\r\n <img class=\"info-svg\" src=\"{{'./assets/icon/svg/' + icon + '.svg'}}\" alt=\"type\" />\r\n </div>\r\n <div class=\"info-icon\" *ngIf=\"useCustomIcon\">\r\n <ng-content select=\"[wmCustomIcon]\"></ng-content>\r\n </div>\r\n <div class=\"flex-col info-content\">\r\n <div class=\"info-card-value text-hidden\" title=\"{{value}}\">{{value}}</div>\r\n <div class=\"info-card-label text-hidden\" title=\"{{label}}\">{{label}}</div>\r\n </div>\r\n</div>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.wm-info-card{background:var(--pageBackgroundColor);width:100%;height:100px;margin-right:18px;padding:25px;border-radius:4px;box-sizing:border-box}.info-icon{display:inline-flex;width:48px;height:48px;border:1px solid transparent;border-radius:50%;margin:auto 18px auto 0;flex-shrink:0;position:relative;overflow:hidden}.icon-bg{width:100%;height:100%;position:absolute;background-color:var(--strongFontColor);opacity:.05}.info-svg{margin:auto;width:24px;height:24px;z-index:1}.info-content{justify-content:center;flex-grow:1;flex-shrink:1;overflow:hidden}.info-card-value{color:var(--strongFontColor);line-height:20px;font-size:22px;width:100%;height:20px;margin-bottom:2px}.info-card-label{color:var(--disabledTextColor);font-size:14px}\n"] }]
|
|
730
|
-
}], propDecorators: { label: [{
|
|
731
|
-
type: Input
|
|
732
|
-
}], value: [{
|
|
733
|
-
type: Input
|
|
734
|
-
}], icon: [{
|
|
735
|
-
type: Input
|
|
736
|
-
}], useCustomIcon: [{
|
|
737
|
-
type: Input
|
|
738
|
-
}] } });
|
|
739
|
-
|
|
740
|
-
var InfoType;
|
|
741
|
-
(function (InfoType) {
|
|
742
|
-
InfoType[InfoType["Error"] = 0] = "Error";
|
|
743
|
-
InfoType[InfoType["Warning"] = 1] = "Warning";
|
|
744
|
-
InfoType[InfoType["InfoMessage"] = 2] = "InfoMessage";
|
|
745
|
-
InfoType[InfoType["TabError"] = 3] = "TabError";
|
|
746
|
-
InfoType[InfoType["TabWarning"] = 4] = "TabWarning";
|
|
747
|
-
InfoType[InfoType["InfoSmall"] = 5] = "InfoSmall";
|
|
748
|
-
InfoType[InfoType["Filtered"] = 6] = "Filtered";
|
|
749
|
-
InfoType[InfoType["InlineDetails"] = 7] = "InlineDetails";
|
|
750
|
-
InfoType[InfoType["SubNavPanel"] = 8] = "SubNavPanel";
|
|
751
|
-
InfoType[InfoType["InfoGold"] = 9] = "InfoGold";
|
|
752
|
-
})(InfoType || (InfoType = {}));
|
|
753
|
-
|
|
754
|
-
const DEFAULT_TOOLTIP_POSITIONS = ['bottom-right', 'bottom-center', 'bottom-left', 'top-right', 'top-center', 'top-left'];
|
|
755
|
-
class WmInfoComponent {
|
|
756
|
-
constructor(_overlay, _elementRef, viewContainerRef) {
|
|
757
|
-
this._overlay = _overlay;
|
|
758
|
-
this._elementRef = _elementRef;
|
|
759
|
-
this.viewContainerRef = viewContainerRef;
|
|
760
|
-
this.preText = '';
|
|
761
|
-
this.postText = '';
|
|
762
|
-
this.type = InfoType.Error;
|
|
763
|
-
this.popupPosition = 'bottom-right';
|
|
764
|
-
this.useThemeForIconTemplate = false;
|
|
765
|
-
this.defaultIconSize = 24;
|
|
766
|
-
this.smallIconSize = 16;
|
|
767
|
-
this.positionBottom = true;
|
|
768
|
-
this.positionLeft = true;
|
|
769
|
-
this.currentPositions = DEFAULT_TOOLTIP_POSITIONS;
|
|
770
|
-
}
|
|
771
|
-
get imageSize() {
|
|
772
|
-
return (this.smallIcon ? this.smallIconSize : this.defaultIconSize) + 'px';
|
|
773
|
-
}
|
|
774
|
-
togglePopup(template) {
|
|
775
|
-
if (this._overlayRef) {
|
|
776
|
-
this.closePopup();
|
|
777
|
-
}
|
|
778
|
-
else {
|
|
779
|
-
this.openPopup(template);
|
|
780
|
-
}
|
|
781
|
-
}
|
|
782
|
-
openPopup(template) {
|
|
783
|
-
this.closePopup(); // close any old ones.
|
|
784
|
-
const positionPairs = this.currentPositions.map(position => {
|
|
785
|
-
const data = this.checkPopupPosition(position);
|
|
786
|
-
const vertClass = data.arrow.bottom ? 'info-bottom' : 'info-top';
|
|
787
|
-
const horClass = data.arrow.left ? 'info-left' : 'info-right';
|
|
788
|
-
return new ConnectionPositionPair({ originX: data.origin.originX, originY: data.origin.originY }, { overlayX: data.overlay.overlayX, overlayY: data.overlay.overlayY }, 0, 0, ['info-popup-wrapper', vertClass, horClass]);
|
|
789
|
-
});
|
|
790
|
-
const positionStrategy = this._overlay.position()
|
|
791
|
-
.flexibleConnectedTo(this._elementRef)
|
|
792
|
-
.withPositions(positionPairs)
|
|
793
|
-
.withFlexibleDimensions(true)
|
|
794
|
-
.withPush(true);
|
|
795
|
-
this._overlayRef = this._overlay.create({
|
|
796
|
-
panelClass: ['mat-tooltip-panel', 'modal', 'is-active'],
|
|
797
|
-
hasBackdrop: true,
|
|
798
|
-
backdropClass: 'modal-background',
|
|
799
|
-
scrollStrategy: this._overlay.scrollStrategies.reposition(),
|
|
800
|
-
positionStrategy
|
|
801
|
-
});
|
|
802
|
-
if (this._overlayRef && !this._overlayRef.hasAttached()) {
|
|
803
|
-
this._overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));
|
|
804
|
-
this._overlayRef.backdropClick().subscribe(() => this.closePopup());
|
|
805
|
-
}
|
|
806
|
-
}
|
|
807
|
-
closePopup() {
|
|
808
|
-
if (this._overlayRef) {
|
|
809
|
-
this._overlayRef.detach();
|
|
810
|
-
this._overlayRef = undefined;
|
|
811
|
-
}
|
|
812
|
-
}
|
|
813
|
-
ngOnInit() {
|
|
814
|
-
if (this.popupPosition !== DEFAULT_TOOLTIP_POSITIONS[0]) {
|
|
815
|
-
const otherPositions = [];
|
|
816
|
-
const filteredByFirstPosition = DEFAULT_TOOLTIP_POSITIONS
|
|
817
|
-
.filter((item) => {
|
|
818
|
-
if (item === this.popupPosition)
|
|
819
|
-
return false;
|
|
820
|
-
if (item.startsWith(this.popupPosition.split('-')[0])) {
|
|
821
|
-
return true;
|
|
822
|
-
}
|
|
823
|
-
else {
|
|
824
|
-
otherPositions.push(item);
|
|
825
|
-
return false;
|
|
826
|
-
}
|
|
827
|
-
});
|
|
828
|
-
this.currentPositions = [this.popupPosition].concat(filteredByFirstPosition).concat(otherPositions);
|
|
829
|
-
}
|
|
830
|
-
}
|
|
831
|
-
getIconName() {
|
|
832
|
-
switch (this.type) {
|
|
833
|
-
case InfoType.Error:
|
|
834
|
-
return 'error';
|
|
835
|
-
case InfoType.Warning:
|
|
836
|
-
return 'warning';
|
|
837
|
-
case InfoType.TabError:
|
|
838
|
-
return 'bo-error';
|
|
839
|
-
case InfoType.TabWarning:
|
|
840
|
-
return 'bo-warning';
|
|
841
|
-
case InfoType.InfoSmall:
|
|
842
|
-
return 'info-s';
|
|
843
|
-
case InfoType.Filtered:
|
|
844
|
-
return 'filter';
|
|
845
|
-
case InfoType.InlineDetails:
|
|
846
|
-
return 'eye-pick';
|
|
847
|
-
case InfoType.SubNavPanel:
|
|
848
|
-
this.smallIcon = true;
|
|
849
|
-
return 'sub-nav-warning';
|
|
850
|
-
case InfoType.InfoGold:
|
|
851
|
-
return 'info-gold';
|
|
852
|
-
default:
|
|
853
|
-
return 'info';
|
|
854
|
-
}
|
|
855
|
-
}
|
|
856
|
-
ngOnDestroy() {
|
|
857
|
-
this.closePopup();
|
|
858
|
-
}
|
|
859
|
-
checkPopupPosition(value) {
|
|
860
|
-
let currentPosition;
|
|
861
|
-
switch (value) {
|
|
862
|
-
case 'bottom-left':
|
|
863
|
-
currentPosition = {
|
|
864
|
-
origin: {
|
|
865
|
-
originX: 'end',
|
|
866
|
-
originY: 'bottom'
|
|
867
|
-
},
|
|
868
|
-
overlay: {
|
|
869
|
-
overlayX: 'end',
|
|
870
|
-
overlayY: 'top'
|
|
871
|
-
},
|
|
872
|
-
arrow: {
|
|
873
|
-
bottom: true,
|
|
874
|
-
left: true,
|
|
875
|
-
}
|
|
876
|
-
};
|
|
877
|
-
break;
|
|
878
|
-
case 'top-right':
|
|
879
|
-
currentPosition = {
|
|
880
|
-
origin: {
|
|
881
|
-
originX: 'start',
|
|
882
|
-
originY: 'top',
|
|
883
|
-
},
|
|
884
|
-
overlay: {
|
|
885
|
-
overlayX: 'start',
|
|
886
|
-
overlayY: 'bottom',
|
|
887
|
-
},
|
|
888
|
-
arrow: {
|
|
889
|
-
bottom: false,
|
|
890
|
-
left: true,
|
|
891
|
-
}
|
|
892
|
-
};
|
|
893
|
-
break;
|
|
894
|
-
case 'top-left':
|
|
895
|
-
currentPosition = {
|
|
896
|
-
origin: {
|
|
897
|
-
originX: 'end',
|
|
898
|
-
originY: 'top',
|
|
899
|
-
},
|
|
900
|
-
overlay: {
|
|
901
|
-
overlayX: 'end',
|
|
902
|
-
overlayY: 'bottom',
|
|
903
|
-
},
|
|
904
|
-
arrow: {
|
|
905
|
-
bottom: false,
|
|
906
|
-
left: false,
|
|
907
|
-
}
|
|
908
|
-
};
|
|
909
|
-
break;
|
|
910
|
-
case 'top-center':
|
|
911
|
-
currentPosition = {
|
|
912
|
-
origin: {
|
|
913
|
-
originX: 'center',
|
|
914
|
-
originY: 'top',
|
|
915
|
-
},
|
|
916
|
-
overlay: {
|
|
917
|
-
overlayX: 'center',
|
|
918
|
-
overlayY: 'bottom',
|
|
919
|
-
},
|
|
920
|
-
arrow: {
|
|
921
|
-
bottom: false,
|
|
922
|
-
left: true,
|
|
923
|
-
}
|
|
924
|
-
};
|
|
925
|
-
break;
|
|
926
|
-
case 'bottom-center':
|
|
927
|
-
currentPosition = {
|
|
928
|
-
origin: {
|
|
929
|
-
originX: 'center',
|
|
930
|
-
originY: 'bottom',
|
|
931
|
-
},
|
|
932
|
-
overlay: {
|
|
933
|
-
overlayX: 'center',
|
|
934
|
-
overlayY: 'top',
|
|
935
|
-
},
|
|
936
|
-
arrow: {
|
|
937
|
-
bottom: true,
|
|
938
|
-
left: true,
|
|
939
|
-
}
|
|
940
|
-
};
|
|
941
|
-
break;
|
|
942
|
-
case 'bottom-right':
|
|
943
|
-
default:
|
|
944
|
-
currentPosition = {
|
|
945
|
-
origin: {
|
|
946
|
-
originX: 'start',
|
|
947
|
-
originY: 'bottom',
|
|
948
|
-
},
|
|
949
|
-
overlay: {
|
|
950
|
-
overlayX: 'start',
|
|
951
|
-
overlayY: 'top',
|
|
952
|
-
},
|
|
953
|
-
arrow: {
|
|
954
|
-
bottom: true,
|
|
955
|
-
left: false,
|
|
956
|
-
}
|
|
957
|
-
};
|
|
958
|
-
}
|
|
959
|
-
return currentPosition;
|
|
960
|
-
}
|
|
961
|
-
}
|
|
962
|
-
WmInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WmInfoComponent, deps: [{ token: i1$1.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
963
|
-
WmInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: WmInfoComponent, selector: "wm-info", inputs: { preText: "preText", postText: "postText", header: "header", type: "type", popupPosition: "popupPosition", iconAsTemplate: "iconAsTemplate", useThemeForIconTemplate: "useThemeForIconTemplate", smallIcon: "smallIcon" }, ngImport: i0, template: "<ng-template #popupTemplate>\r\n <div class=\"u-arrow\">\r\n </div>\r\n <div class=\"u-info-content\" [ngClass]=\"{'p-error': type === 0, 'p-warning': type === 1, 'p-info': type === 2}\">\r\n <span *ngIf=\"header\" [innerHTML]=\"header\"></span>\r\n <ng-content></ng-content>\r\n </div>\r\n</ng-template>\r\n <div class=\"info-wrap flex-row\" [ngClass]=\"{'p-error': type === 0, 'p-warning': type === 1, 'p-info': type === 2}\">\r\n <span class=\"info-label\" *ngIf=\"preText\">{{preText}}</span>\r\n <span class=\"info-icon\" (click)=\"togglePopup(popupTemplate)\">\r\n <wm-template-image *ngIf=\"iconAsTemplate\" [icon]=\"getIconName()\" [size]=\"imageSize\"\r\n [active]=\"useThemeForIconTemplate\">\r\n </wm-template-image>\r\n <img *ngIf=\"!iconAsTemplate\" [attr.width]=\"imageSize\" [attr.height]=\"imageSize\"\r\n src=\"{{'./assets/icon/svg/' + getIconName() + '.svg'}}\" alt=\"{{getIconName()}}\" />\r\n </span>\r\n <span class=\"info-label\" *ngIf=\"postText\">{{postText}}</span>\r\n </div> ", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.info-wrap{justify-content:flex-start;align-items:center;height:100%;text-align:center}.info-label{display:inline-block;color:inherit;font-size:14px}.info-icon{cursor:pointer}.info-left{margin-left:-10px;align-items:flex-start}.info-right{align-items:flex-end}.u-arrow{margin-left:4px;margin-right:4px}.u-info-content{color:var(--infoColor);text-align:left;font-size:14px;font-weight:400;max-width:50vw;white-space:normal;word-wrap:break-word;word-break:break-word;background:var(--pageBackgroundColor);overflow-x:hidden;overflow-y:auto;border-color:var(--secondaryHover);border-radius:4px;padding:16px;box-shadow:0 16px 16px -1px #051d391a}.u-info-content::-webkit-scrollbar{width:4px}.p-error{color:var(--dangerColor)}.p-warning{color:var(--warningColor)}.p-info{color:var(--brandColor)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WmTemplateImageComponent, selector: "wm-template-image", inputs: ["icon", "disabled", "active", "light", "classes", "backgroundColor", "size", "sizeBox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
964
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WmInfoComponent, decorators: [{
|
|
965
|
-
type: Component,
|
|
966
|
-
args: [{ selector: 'wm-info', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #popupTemplate>\r\n <div class=\"u-arrow\">\r\n </div>\r\n <div class=\"u-info-content\" [ngClass]=\"{'p-error': type === 0, 'p-warning': type === 1, 'p-info': type === 2}\">\r\n <span *ngIf=\"header\" [innerHTML]=\"header\"></span>\r\n <ng-content></ng-content>\r\n </div>\r\n</ng-template>\r\n <div class=\"info-wrap flex-row\" [ngClass]=\"{'p-error': type === 0, 'p-warning': type === 1, 'p-info': type === 2}\">\r\n <span class=\"info-label\" *ngIf=\"preText\">{{preText}}</span>\r\n <span class=\"info-icon\" (click)=\"togglePopup(popupTemplate)\">\r\n <wm-template-image *ngIf=\"iconAsTemplate\" [icon]=\"getIconName()\" [size]=\"imageSize\"\r\n [active]=\"useThemeForIconTemplate\">\r\n </wm-template-image>\r\n <img *ngIf=\"!iconAsTemplate\" [attr.width]=\"imageSize\" [attr.height]=\"imageSize\"\r\n src=\"{{'./assets/icon/svg/' + getIconName() + '.svg'}}\" alt=\"{{getIconName()}}\" />\r\n </span>\r\n <span class=\"info-label\" *ngIf=\"postText\">{{postText}}</span>\r\n </div> ", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.info-wrap{justify-content:flex-start;align-items:center;height:100%;text-align:center}.info-label{display:inline-block;color:inherit;font-size:14px}.info-icon{cursor:pointer}.info-left{margin-left:-10px;align-items:flex-start}.info-right{align-items:flex-end}.u-arrow{margin-left:4px;margin-right:4px}.u-info-content{color:var(--infoColor);text-align:left;font-size:14px;font-weight:400;max-width:50vw;white-space:normal;word-wrap:break-word;word-break:break-word;background:var(--pageBackgroundColor);overflow-x:hidden;overflow-y:auto;border-color:var(--secondaryHover);border-radius:4px;padding:16px;box-shadow:0 16px 16px -1px #051d391a}.u-info-content::-webkit-scrollbar{width:4px}.p-error{color:var(--dangerColor)}.p-warning{color:var(--warningColor)}.p-info{color:var(--brandColor)}\n"] }]
|
|
967
|
-
}], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { preText: [{
|
|
968
|
-
type: Input
|
|
969
|
-
}], postText: [{
|
|
970
|
-
type: Input
|
|
971
|
-
}], header: [{
|
|
972
|
-
type: Input
|
|
973
|
-
}], type: [{
|
|
974
|
-
type: Input
|
|
975
|
-
}], popupPosition: [{
|
|
976
|
-
type: Input
|
|
977
|
-
}], iconAsTemplate: [{
|
|
978
|
-
type: Input
|
|
979
|
-
}], useThemeForIconTemplate: [{
|
|
980
|
-
type: Input
|
|
981
|
-
}], smallIcon: [{
|
|
982
|
-
type: Input
|
|
983
|
-
}] } });
|
|
984
|
-
|
|
985
|
-
class WmNoContentComponent {
|
|
986
|
-
constructor() {
|
|
987
|
-
this.icon = '';
|
|
988
|
-
this.label = '';
|
|
989
|
-
this.description = '';
|
|
990
|
-
this.useFooter = true;
|
|
991
|
-
this.additionContent = false;
|
|
992
|
-
}
|
|
993
|
-
}
|
|
994
|
-
WmNoContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WmNoContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
995
|
-
WmNoContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: WmNoContentComponent, selector: "wm-no-content", inputs: { icon: "icon", label: "label", description: "description", useFooter: "useFooter", additionContent: "additionContent" }, ngImport: i0, template: "<div>\r\n <wm-illustration [illustrationId]=\"icon\" class=\"illustration\">\r\n </wm-illustration>\r\n <div class=\"no-content-body\" *ngIf=\"(label || description)\">\r\n <div class=\"no-content-label\" *ngIf=\"label\" [innerHTML]=\"label\"></div>\r\n <div class=\"no-content-desc\" *ngIf=\"description\"> {{description}}</div>\r\n <div class=\"no-content-desc\" *ngIf=\"additionContent\">\r\n <ng-content select=\"[additionContent]\"></ng-content>\r\n </div>\r\n </div>\r\n <div class=\"no-foot\" *ngIf=\"useFooter\">\r\n <ng-content></ng-content>\r\n </div>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}:host{display:flex;flex-direction:column;width:100%;height:100%;margin:auto;text-align:center;box-sizing:border-box;padding:0 10px;justify-content:center}.illustration{min-width:260px;max-width:520px;margin:auto}.no-content-wrap *{box-sizing:inherit}.img-wrap{width:120px;height:120px;margin:0 auto;background-repeat:no-repeat;cursor:default}.no-content-body{width:100%;padding:12px 0;overflow-y:hidden;cursor:default}.no-content-label{color:var(--disabledFontColor);font-size:18px;padding-top:12px}.no-content-desc{color:var(--mediumFontColor);font-size:16px;word-break:break-word;padding-top:12px}.no-foot{width:100%;height:64px;display:flex;justify-content:center;padding:12px 0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IllustrationComponent, selector: "wm-illustration", inputs: ["illustrationId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
996
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WmNoContentComponent, decorators: [{
|
|
997
|
-
type: Component,
|
|
998
|
-
args: [{ selector: 'wm-no-content', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\r\n <wm-illustration [illustrationId]=\"icon\" class=\"illustration\">\r\n </wm-illustration>\r\n <div class=\"no-content-body\" *ngIf=\"(label || description)\">\r\n <div class=\"no-content-label\" *ngIf=\"label\" [innerHTML]=\"label\"></div>\r\n <div class=\"no-content-desc\" *ngIf=\"description\"> {{description}}</div>\r\n <div class=\"no-content-desc\" *ngIf=\"additionContent\">\r\n <ng-content select=\"[additionContent]\"></ng-content>\r\n </div>\r\n </div>\r\n <div class=\"no-foot\" *ngIf=\"useFooter\">\r\n <ng-content></ng-content>\r\n </div>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}:host{display:flex;flex-direction:column;width:100%;height:100%;margin:auto;text-align:center;box-sizing:border-box;padding:0 10px;justify-content:center}.illustration{min-width:260px;max-width:520px;margin:auto}.no-content-wrap *{box-sizing:inherit}.img-wrap{width:120px;height:120px;margin:0 auto;background-repeat:no-repeat;cursor:default}.no-content-body{width:100%;padding:12px 0;overflow-y:hidden;cursor:default}.no-content-label{color:var(--disabledFontColor);font-size:18px;padding-top:12px}.no-content-desc{color:var(--mediumFontColor);font-size:16px;word-break:break-word;padding-top:12px}.no-foot{width:100%;height:64px;display:flex;justify-content:center;padding:12px 0}\n"] }]
|
|
999
|
-
}], propDecorators: { icon: [{
|
|
1000
|
-
type: Input
|
|
1001
|
-
}], label: [{
|
|
1002
|
-
type: Input
|
|
1003
|
-
}], description: [{
|
|
1004
|
-
type: Input
|
|
1005
|
-
}], useFooter: [{
|
|
1006
|
-
type: Input
|
|
1007
|
-
}], additionContent: [{
|
|
1008
|
-
type: Input
|
|
1009
|
-
}] } });
|
|
1010
|
-
|
|
1011
|
-
class WmPanelBarComponent {
|
|
1012
|
-
constructor() {
|
|
1013
|
-
this.labelClasses = 'pb-label';
|
|
1014
|
-
this.maxHeight = 'unset';
|
|
1015
|
-
this.maxWidth = 'unset';
|
|
1016
|
-
this._open = false;
|
|
1017
|
-
this.collapseText = 'Collapse';
|
|
1018
|
-
this.expandText = 'Expand';
|
|
1019
|
-
this.openChange = new EventEmitter();
|
|
1020
|
-
this.directionBottom = true;
|
|
1021
|
-
this.directionLeft = false;
|
|
1022
|
-
this._direction = 'bottom';
|
|
1023
|
-
}
|
|
1024
|
-
set open(value) {
|
|
1025
|
-
if (value === this._open)
|
|
1026
|
-
return;
|
|
1027
|
-
this._open = value;
|
|
1028
|
-
}
|
|
1029
|
-
get open() {
|
|
1030
|
-
return this._open;
|
|
1031
|
-
}
|
|
1032
|
-
get direction() { return this._direction; }
|
|
1033
|
-
set direction(val) {
|
|
1034
|
-
if (val !== 'bottom' && val !== 'left') {
|
|
1035
|
-
val = 'bottom';
|
|
1036
|
-
}
|
|
1037
|
-
this._direction = val;
|
|
1038
|
-
switch (val) {
|
|
1039
|
-
case 'left':
|
|
1040
|
-
this.directionLeft = true;
|
|
1041
|
-
this.directionBottom = false;
|
|
1042
|
-
break;
|
|
1043
|
-
default:
|
|
1044
|
-
this.directionBottom = true;
|
|
1045
|
-
this.directionLeft = false;
|
|
1046
|
-
break;
|
|
1047
|
-
}
|
|
1048
|
-
}
|
|
1049
|
-
onClick() {
|
|
1050
|
-
this.open = !this.open;
|
|
1051
|
-
this.openChange.emit(this.open);
|
|
1052
|
-
}
|
|
1053
|
-
}
|
|
1054
|
-
WmPanelBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WmPanelBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1055
|
-
WmPanelBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: WmPanelBarComponent, selector: "wm-panel-bar", inputs: { label: "label", labelClasses: "labelClasses", openedLabel: "openedLabel", width: "width", height: "height", maxHeight: "maxHeight", maxWidth: "maxWidth", open: "open", collapseText: "collapseText", expandText: "expandText", direction: "direction" }, outputs: { openChange: "openChange" }, ngImport: i0, template: "<div *ngIf=\"directionBottom\" class=\"wm-panel-bar drb flex-col\"\r\n [ngStyle]=\"{'max-width': maxWidth, 'max-height': maxHeight}\">\r\n <div class=\"pb-header align-center flex-row\">\r\n <div class={{labelClasses}} *ngIf=\"label\">{{label}}</div>\r\n <ng-content select=\"[headerLabel]\"></ng-content>\r\n <div class=\"pb-header-content flex-row\">\r\n <ng-content select=\"[headerContent]\"></ng-content>\r\n <div class=\"ex-button\" (click)=\"onClick()\">\r\n <span>{{ (open ? collapseText : expandText)}}</span>\r\n <wm-template-image class=\"bar-arrow\" [ngClass]=\"{'bar-open-bottom': open}\" icon=\"arrow-down\">\r\n </wm-template-image>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"flex-row pb-content pb-vertical\" [ngStyle]=\"{'height': !open ? '0px': ''}\"\r\n [ngClass]=\"{'pb-vertical-visible': open}\">\r\n <ng-container *ngTemplateOutlet=\"body\"></ng-container>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"!directionBottom\" class=\"wm-panel-bar flex-col drl\" [ngClass]=\"{'pb-drl-open': open}\"\r\n [ngStyle]=\"{'max-width': maxWidth, 'max-height': maxHeight}\">\r\n <div class=\"ex-panel flex-row ex-panel-drl\" (click)=\"onClick()\">\r\n <wm-template-image class=\"bar-arrow arrow-left\" [ngClass]=\"{'bar-open-left': open}\" icon=\"arrow-left\">\r\n </wm-template-image>\r\n <div class=\"preview-label\" *ngIf=\"!open\">{{label}}</div>\r\n <div class=\"preview-label\" *ngIf=\"open\">{{openedLabel || label}}</div>\r\n\r\n </div>\r\n <div class=\"flex-col pb-content pb-horizontal-visible\" *ngIf=\"open\">\r\n <ng-container *ngTemplateOutlet=\"body\"></ng-container>\r\n </div>\r\n</div>\r\n\r\n<ng-template #body>\r\n <ng-content></ng-content>\r\n</ng-template>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.wm-panel-bar{border-radius:4px;background:var(--pageBackgroundColor);flex-shrink:0;overflow:hidden;direction:ltr}.ex-button{display:inline-flex;color:var(--mediumFontColor);letter-spacing:0;cursor:pointer;background:transparent;border:none;justify-content:flex-end;align-items:center;width:86px;margin-left:8px}.pb-header{width:100%;flex-shrink:0;min-height:48px;font-size:14px;box-sizing:border-box;padding:4px 16px}.pb-label,.brand-label{font-weight:700;color:var(--strongFontColor);letter-spacing:1.2px;line-height:16px;margin-right:12px;flex-shrink:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand-label{color:var(--brandColor)}.pb-header-content{align-items:center;margin-left:auto}.bar-open-left,.bar-open-right{transform:rotateY(-180deg)}.drb{box-shadow:0 0 1px #0a16460f,0 1px 1px #0a16461a}.drr{flex-direction:row-reverse}.pb-drl-open{width:100%}.pb-vertical{height:0}.pb-content{direction:ltr;visibility:hidden;overflow:auto}.pb-vertical-visible{visibility:visible;height:100%;max-height:calc(100% - 48px)}.pb-horizontal-visible{visibility:visible;width:100%}.ex-panel{height:40px;width:auto;min-width:1px;max-width:100%;flex-shrink:0;cursor:pointer;background:transparent;border-radius:4px;box-shadow:1px 1px 2px 2px #0a16460f;justify-content:flex-start}.arrow-left{margin:auto 0}.preview-label{align-items:center;margin:auto 4px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: WmTemplateImageComponent, selector: "wm-template-image", inputs: ["icon", "disabled", "active", "light", "classes", "backgroundColor", "size", "sizeBox"] }] });
|
|
1056
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WmPanelBarComponent, decorators: [{
|
|
1057
|
-
type: Component,
|
|
1058
|
-
args: [{ selector: 'wm-panel-bar', template: "<div *ngIf=\"directionBottom\" class=\"wm-panel-bar drb flex-col\"\r\n [ngStyle]=\"{'max-width': maxWidth, 'max-height': maxHeight}\">\r\n <div class=\"pb-header align-center flex-row\">\r\n <div class={{labelClasses}} *ngIf=\"label\">{{label}}</div>\r\n <ng-content select=\"[headerLabel]\"></ng-content>\r\n <div class=\"pb-header-content flex-row\">\r\n <ng-content select=\"[headerContent]\"></ng-content>\r\n <div class=\"ex-button\" (click)=\"onClick()\">\r\n <span>{{ (open ? collapseText : expandText)}}</span>\r\n <wm-template-image class=\"bar-arrow\" [ngClass]=\"{'bar-open-bottom': open}\" icon=\"arrow-down\">\r\n </wm-template-image>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"flex-row pb-content pb-vertical\" [ngStyle]=\"{'height': !open ? '0px': ''}\"\r\n [ngClass]=\"{'pb-vertical-visible': open}\">\r\n <ng-container *ngTemplateOutlet=\"body\"></ng-container>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"!directionBottom\" class=\"wm-panel-bar flex-col drl\" [ngClass]=\"{'pb-drl-open': open}\"\r\n [ngStyle]=\"{'max-width': maxWidth, 'max-height': maxHeight}\">\r\n <div class=\"ex-panel flex-row ex-panel-drl\" (click)=\"onClick()\">\r\n <wm-template-image class=\"bar-arrow arrow-left\" [ngClass]=\"{'bar-open-left': open}\" icon=\"arrow-left\">\r\n </wm-template-image>\r\n <div class=\"preview-label\" *ngIf=\"!open\">{{label}}</div>\r\n <div class=\"preview-label\" *ngIf=\"open\">{{openedLabel || label}}</div>\r\n\r\n </div>\r\n <div class=\"flex-col pb-content pb-horizontal-visible\" *ngIf=\"open\">\r\n <ng-container *ngTemplateOutlet=\"body\"></ng-container>\r\n </div>\r\n</div>\r\n\r\n<ng-template #body>\r\n <ng-content></ng-content>\r\n</ng-template>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.wm-panel-bar{border-radius:4px;background:var(--pageBackgroundColor);flex-shrink:0;overflow:hidden;direction:ltr}.ex-button{display:inline-flex;color:var(--mediumFontColor);letter-spacing:0;cursor:pointer;background:transparent;border:none;justify-content:flex-end;align-items:center;width:86px;margin-left:8px}.pb-header{width:100%;flex-shrink:0;min-height:48px;font-size:14px;box-sizing:border-box;padding:4px 16px}.pb-label,.brand-label{font-weight:700;color:var(--strongFontColor);letter-spacing:1.2px;line-height:16px;margin-right:12px;flex-shrink:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand-label{color:var(--brandColor)}.pb-header-content{align-items:center;margin-left:auto}.bar-open-left,.bar-open-right{transform:rotateY(-180deg)}.drb{box-shadow:0 0 1px #0a16460f,0 1px 1px #0a16461a}.drr{flex-direction:row-reverse}.pb-drl-open{width:100%}.pb-vertical{height:0}.pb-content{direction:ltr;visibility:hidden;overflow:auto}.pb-vertical-visible{visibility:visible;height:100%;max-height:calc(100% - 48px)}.pb-horizontal-visible{visibility:visible;width:100%}.ex-panel{height:40px;width:auto;min-width:1px;max-width:100%;flex-shrink:0;cursor:pointer;background:transparent;border-radius:4px;box-shadow:1px 1px 2px 2px #0a16460f;justify-content:flex-start}.arrow-left{margin:auto 0}.preview-label{align-items:center;margin:auto 4px}\n"] }]
|
|
1059
|
-
}], propDecorators: { label: [{
|
|
1060
|
-
type: Input
|
|
1061
|
-
}], labelClasses: [{
|
|
1062
|
-
type: Input
|
|
1063
|
-
}], openedLabel: [{
|
|
1064
|
-
type: Input
|
|
1065
|
-
}], width: [{
|
|
1066
|
-
type: Input
|
|
1067
|
-
}], height: [{
|
|
1068
|
-
type: Input
|
|
1069
|
-
}], maxHeight: [{
|
|
1070
|
-
type: Input
|
|
1071
|
-
}], maxWidth: [{
|
|
1072
|
-
type: Input
|
|
1073
|
-
}], open: [{
|
|
1074
|
-
type: Input
|
|
1075
|
-
}], collapseText: [{
|
|
1076
|
-
type: Input
|
|
1077
|
-
}], expandText: [{
|
|
1078
|
-
type: Input
|
|
1079
|
-
}], openChange: [{
|
|
1080
|
-
type: Output
|
|
1081
|
-
}], direction: [{
|
|
1082
|
-
type: Input
|
|
1083
|
-
}] } });
|
|
1084
|
-
|
|
1085
|
-
class ScalableDivComponent {
|
|
1086
|
-
constructor(_zone, _change) {
|
|
1087
|
-
this._zone = _zone;
|
|
1088
|
-
this._change = _change;
|
|
1089
|
-
this.isCalculated = false;
|
|
1090
|
-
}
|
|
1091
|
-
get text() { return this._text; }
|
|
1092
|
-
set text(value) {
|
|
1093
|
-
this._text = value;
|
|
1094
|
-
this.recalculateWidth();
|
|
1095
|
-
}
|
|
1096
|
-
ngAfterViewInit() {
|
|
1097
|
-
this._zone.runOutsideAngular(() => {
|
|
1098
|
-
this.firstObservable = interval(500).subscribe(it => {
|
|
1099
|
-
if (this.isCalculated) {
|
|
1100
|
-
this.firstObservable.unsubscribe();
|
|
1101
|
-
return;
|
|
1102
|
-
}
|
|
1103
|
-
this.recalculateWidth();
|
|
1104
|
-
this._change.detectChanges();
|
|
1105
|
-
});
|
|
1106
|
-
});
|
|
1107
|
-
}
|
|
1108
|
-
ngOnDestroy() {
|
|
1109
|
-
if (!this.firstObservable)
|
|
1110
|
-
return;
|
|
1111
|
-
this.firstObservable.unsubscribe();
|
|
1112
|
-
this.firstObservable = undefined;
|
|
1113
|
-
}
|
|
1114
|
-
getNumberFromFontSize(fontSize) {
|
|
1115
|
-
const numberSize = Number(fontSize.substr(0, fontSize.length - 2));
|
|
1116
|
-
return numberSize;
|
|
1117
|
-
}
|
|
1118
|
-
getFontSizeDim(fontSize) {
|
|
1119
|
-
let num;
|
|
1120
|
-
let dimLength = 0;
|
|
1121
|
-
while (!num) {
|
|
1122
|
-
dimLength = dimLength + 1;
|
|
1123
|
-
num = Number(fontSize.substr(0, fontSize.length - dimLength));
|
|
1124
|
-
}
|
|
1125
|
-
return fontSize.substr(fontSize.length - dimLength, dimLength);
|
|
1126
|
-
}
|
|
1127
|
-
divWidth(text, font, padding) {
|
|
1128
|
-
const f = font || '12px arial';
|
|
1129
|
-
const o = document.createElement('div');
|
|
1130
|
-
o.innerHTML = text;
|
|
1131
|
-
o.style.position = 'absolute';
|
|
1132
|
-
o.style.visibility = 'hidden';
|
|
1133
|
-
o.style['text-align'] = 'center';
|
|
1134
|
-
o.style.font = f;
|
|
1135
|
-
o.style.padding = padding;
|
|
1136
|
-
document.body.appendChild(o);
|
|
1137
|
-
const w = o.clientWidth;
|
|
1138
|
-
document.body.removeChild(o);
|
|
1139
|
-
return w;
|
|
1140
|
-
}
|
|
1141
|
-
recalculateWidth() {
|
|
1142
|
-
if (!this.divEl)
|
|
1143
|
-
return;
|
|
1144
|
-
const divTag = this.divEl.nativeElement;
|
|
1145
|
-
if (divTag.clientWidth === 0)
|
|
1146
|
-
return;
|
|
1147
|
-
this.isCalculated = true;
|
|
1148
|
-
this.doRecalculateWidth(divTag);
|
|
1149
|
-
}
|
|
1150
|
-
doRecalculateWidth(divTag) {
|
|
1151
|
-
divTag.style.fontSize = '';
|
|
1152
|
-
const style = window.getComputedStyle(divTag);
|
|
1153
|
-
const availableWidth = divTag.offsetParent.clientWidth;
|
|
1154
|
-
const sizeDim = this.getFontSizeDim(style.fontSize);
|
|
1155
|
-
const text = divTag.textContent;
|
|
1156
|
-
let font = style.font;
|
|
1157
|
-
let textWidth = this.divWidth(text, font, style.padding);
|
|
1158
|
-
const needChange = availableWidth < textWidth;
|
|
1159
|
-
let numberSize = this.getNumberFromFontSize(style.fontSize);
|
|
1160
|
-
let stringSize = numberSize.toString() + sizeDim;
|
|
1161
|
-
while (textWidth - availableWidth > 1) {
|
|
1162
|
-
numberSize = numberSize - 1;
|
|
1163
|
-
const oldString = stringSize;
|
|
1164
|
-
stringSize = numberSize.toString() + sizeDim;
|
|
1165
|
-
font = font.replace(oldString, stringSize);
|
|
1166
|
-
textWidth = this.divWidth(text, font, style.padding);
|
|
1167
|
-
}
|
|
1168
|
-
if (needChange)
|
|
1169
|
-
divTag.style.fontSize = stringSize;
|
|
1170
|
-
}
|
|
1171
|
-
}
|
|
1172
|
-
ScalableDivComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ScalableDivComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1173
|
-
ScalableDivComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ScalableDivComponent, selector: "wm-scalable-div", inputs: { divClass: "divClass", text: "text" }, viewQueries: [{ propertyName: "divEl", first: true, predicate: ["divEl"], descendants: true, static: true }], ngImport: i0, template: "<div #divEl [ngClass]=\"divClass\">{{text}}<div>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}:host{font-size:42px;color:var(--strongFontColor);font-family:Inter,Verdana,Geneva,Tahoma,sans-serif;font-weight:700;padding:0 8px;text-align:center;margin:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
1174
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ScalableDivComponent, decorators: [{
|
|
1175
|
-
type: Component,
|
|
1176
|
-
args: [{ selector: 'wm-scalable-div', template: "<div #divEl [ngClass]=\"divClass\">{{text}}<div>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}:host{font-size:42px;color:var(--strongFontColor);font-family:Inter,Verdana,Geneva,Tahoma,sans-serif;font-weight:700;padding:0 8px;text-align:center;margin:auto}\n"] }]
|
|
1177
|
-
}], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { divClass: [{
|
|
1178
|
-
type: Input
|
|
1179
|
-
}], divEl: [{
|
|
1180
|
-
type: ViewChild,
|
|
1181
|
-
args: ['divEl', { static: true }]
|
|
1182
|
-
}], text: [{
|
|
1183
|
-
type: Input
|
|
1184
|
-
}] } });
|
|
1185
|
-
|
|
1186
|
-
class Guid {
|
|
1187
|
-
static newGuid(format = undefined) {
|
|
1188
|
-
const baseStr = Guid.getTemplate(format);
|
|
1189
|
-
return baseStr.replace(/[xy]/g, function (c) {
|
|
1190
|
-
const r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
|
|
1191
|
-
return v.toString(16);
|
|
1192
|
-
});
|
|
1193
|
-
}
|
|
1194
|
-
static getTemplate(format) {
|
|
1195
|
-
if (format === 'N')
|
|
1196
|
-
return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx';
|
|
1197
|
-
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx';
|
|
1198
|
-
}
|
|
1199
|
-
}
|
|
1200
|
-
|
|
1201
|
-
class SpinnerComponent {
|
|
1202
|
-
constructor(zone, change) {
|
|
1203
|
-
this.zone = zone;
|
|
1204
|
-
this.change = change;
|
|
1205
|
-
this.uid = Guid.newGuid();
|
|
1206
|
-
this._initialized = false;
|
|
1207
|
-
this.isOverlayVisible = false;
|
|
1208
|
-
this.isOverlayContrast = false;
|
|
1209
|
-
this.minTimeOfVisibilityMs = 500;
|
|
1210
|
-
this.showDelay = 250;
|
|
1211
|
-
this.delay = false;
|
|
1212
|
-
this.longMessageDelay = 12500;
|
|
1213
|
-
this.message = 'Waiting for data from server';
|
|
1214
|
-
this.messageTakesLong = 'Request is taking a bit longer than expected';
|
|
1215
|
-
this.messageBottomWait = 'Please Wait';
|
|
1216
|
-
this.infoType = InfoType.Error;
|
|
1217
|
-
}
|
|
1218
|
-
get showSpinner() { return this._showSpinner; }
|
|
1219
|
-
set showSpinner(value) {
|
|
1220
|
-
// tslint:disable-next-line:triple-equals we should treat bool false and bool undefined as same. The same for all other cases.
|
|
1221
|
-
if (this._showSpinner == value)
|
|
1222
|
-
return;
|
|
1223
|
-
this._showSpinner = value;
|
|
1224
|
-
this.unsubscribeTimers();
|
|
1225
|
-
if (value) {
|
|
1226
|
-
console.log('spinner started', this.uid);
|
|
1227
|
-
// block UI, keep it light
|
|
1228
|
-
this.isOverlayVisible = true;
|
|
1229
|
-
this.subscribeTimers();
|
|
1230
|
-
this.detectChanges();
|
|
1231
|
-
}
|
|
1232
|
-
else {
|
|
1233
|
-
this.stopShowingProgress();
|
|
1234
|
-
}
|
|
1235
|
-
}
|
|
1236
|
-
ngOnInit() {
|
|
1237
|
-
this._initialized = true;
|
|
1238
|
-
}
|
|
1239
|
-
ngOnDestroy() {
|
|
1240
|
-
console.log('destroy');
|
|
1241
|
-
this.unsubscribeTimers();
|
|
1242
|
-
}
|
|
1243
|
-
subscribeTimers() {
|
|
1244
|
-
this.zone.runOutsideAngular(() => {
|
|
1245
|
-
// show long wait message after few configured seconds
|
|
1246
|
-
const longMessageTimer = timer(this.longMessageDelay);
|
|
1247
|
-
this._longMessageTimeSubscription = longMessageTimer.subscribe(t => {
|
|
1248
|
-
this.message = this.messageTakesLong;
|
|
1249
|
-
this.change.detectChanges();
|
|
1250
|
-
this._longMessageTimeSubscription.unsubscribe();
|
|
1251
|
-
});
|
|
1252
|
-
// draw overlay message after few configured seconds
|
|
1253
|
-
if (!this.delay) {
|
|
1254
|
-
this.startShowingProgress();
|
|
1255
|
-
return;
|
|
1256
|
-
}
|
|
1257
|
-
const showAfterDelayTimer = timer(this.showDelay);
|
|
1258
|
-
this._showOverlayTimerSubscription = showAfterDelayTimer.subscribe(t => {
|
|
1259
|
-
if (this.showSpinner)
|
|
1260
|
-
this.startShowingProgress();
|
|
1261
|
-
this.change.detectChanges();
|
|
1262
|
-
this._showOverlayTimerSubscription.unsubscribe();
|
|
1263
|
-
});
|
|
1264
|
-
});
|
|
1265
|
-
}
|
|
1266
|
-
unsubscribeTimers() {
|
|
1267
|
-
if (this._longMessageTimeSubscription)
|
|
1268
|
-
this._longMessageTimeSubscription.unsubscribe();
|
|
1269
|
-
if (this._showOverlayTimerSubscription)
|
|
1270
|
-
this._showOverlayTimerSubscription.unsubscribe();
|
|
1271
|
-
}
|
|
1272
|
-
stopShowingProgress() {
|
|
1273
|
-
if (this._startDate) {
|
|
1274
|
-
const now = new Date().getTime();
|
|
1275
|
-
const duration = (now - this._startDate.getTime()); // ms
|
|
1276
|
-
if (duration < this.minTimeOfVisibilityMs) {
|
|
1277
|
-
this.zone.runOutsideAngular(() => {
|
|
1278
|
-
// let it be at least one second.
|
|
1279
|
-
console.log('remains', this.minTimeOfVisibilityMs - duration);
|
|
1280
|
-
setTimeout(() => this.doStopProgress(), this.minTimeOfVisibilityMs - duration);
|
|
1281
|
-
});
|
|
1282
|
-
return;
|
|
1283
|
-
}
|
|
1284
|
-
}
|
|
1285
|
-
this.doStopProgress();
|
|
1286
|
-
}
|
|
1287
|
-
startShowingProgress() {
|
|
1288
|
-
console.log('contrast spinner', this.uid);
|
|
1289
|
-
this._startDate = new Date();
|
|
1290
|
-
this.isOverlayContrast = true;
|
|
1291
|
-
this.detectChanges();
|
|
1292
|
-
}
|
|
1293
|
-
doStopProgress() {
|
|
1294
|
-
console.log('spinner ended', this.uid);
|
|
1295
|
-
this.isOverlayContrast = false;
|
|
1296
|
-
this.isOverlayVisible = false;
|
|
1297
|
-
this._startDate = undefined;
|
|
1298
|
-
this.detectChanges();
|
|
1299
|
-
}
|
|
1300
|
-
detectChanges() {
|
|
1301
|
-
if (!this._initialized)
|
|
1302
|
-
return;
|
|
1303
|
-
this.change.detectChanges();
|
|
1304
|
-
}
|
|
1305
|
-
}
|
|
1306
|
-
SpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: SpinnerComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1307
|
-
SpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: SpinnerComponent, selector: "wm-spinner", inputs: { delay: "delay", longMessageDelay: "longMessageDelay", message: "message", messageTakesLong: "messageTakesLong", messageBottomWait: "messageBottomWait", detailInfoMessage: "detailInfoMessage", infoType: "infoType", showSpinner: "showSpinner" }, ngImport: i0, template: "<div class=\"spinner-wrap flex-col wh-100\" *ngIf=\"isOverlayVisible\">\r\n <div class=\"spinner-bg wh-100\" [ngClass]=\"{'invisible': !isOverlayContrast }\"></div>\r\n <div class=\"spinner-content inline-col marginXA align-center\" [ngClass]=\"{'invisible': !isOverlayContrast }\">\r\n <div class=\"msg-wrap marginBottomX8\">\r\n <div style=\"display: flex\">\r\n <div class=\"msg\">{{message}}</div>\r\n <wm-info class=\"info\" [type]=\"infoType\" popupPosition=\"top-center\" \r\n [iconAsTemplate]=\"infoType===2\" [useThemeForIconTemplate]=\"infoType===2\"\r\n *ngIf=\"detailInfoMessage\" [header]=\"detailInfoMessage\" style=\"margin-left: 4px\"></wm-info>\r\n </div>\r\n \r\n <div class=\"msg\">{{messageBottomWait}}</div>\r\n </div>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 168 168\" id=\"loader\">\r\n <defs>\r\n <linearGradient id=\"a\" x1=\"38.078%\" x2=\"4.941%\" y1=\"8.411%\" y2=\"16.987%\">\r\n <stop offset=\"0%\" stop-color=\"var(--brandColor)\" stop-opacity=\"0.1\" />\r\n <stop offset=\"61.554%\" stop-color=\"var(--brandColor)\" stop-opacity=\"0.4\" />\r\n <stop offset=\"100%\" stop-color=\"var(--brandColor)\" stop-opacity=\"0.5\" />\r\n </linearGradient>\r\n <radialGradient id=\"b\" cy=\"43.835%\" r=\"54.9%\" fx=\"50%\" fy=\"43.835%\"\r\n gradientTransform=\"matrix(-.77913 .62687 -.6485 -.80602 1.174 .478)\">\r\n <stop offset=\"0%\" stop-color=\"#FFF\" />\r\n <stop offset=\"100%\" stop-color=\"var(--brandColor)\" stop-opacity=\"0.5\" />\r\n </radialGradient>\r\n </defs>\r\n <g fill=\"none\" fill-rule=\"evenodd\">\r\n <g transform=\"translate(10 10)\">\r\n <path stroke=\"url(#a)\" stroke-linecap=\"round\" stroke-width=\"19\"\r\n d=\"M16.198 27.79C6.062 40.453 0 56.518 0 74c0 40.87 33.13 74 74 74s74-33.13 74-74c0-24.611-12.014-46.416-30.498-59.87C105.292 5.244 90.258 0 74 0\" />\r\n <circle cx=\"16.5\" cy=\"27.5\" r=\"9.5\" fill=\"url(#b)\" />\r\n </g>\r\n </g>\r\n </svg>\r\n </div>\r\n\r\n</div>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.spinner-wrap{position:fixed;inset:0;z-index:5;text-shadow:0px 0px 0px var(--pageBackgroundColor);pointer-events:all}.spinner-bg{position:absolute;top:0;left:0;transition:opacity .4s ease-in;opacity:.7;background-color:var(--appBackgroundColor)}.invisible{opacity:.01}.spinner-content{z-index:1;width:80%;height:80%;min-width:120px;min-height:120px;max-width:400px;max-height:400px}.msg-wrap{width:auto;max-width:400px;box-sizing:border-box;text-align:center;font-size:16px;color:var(--strongFontColor);line-height:32px;font-weight:500;word-break:break-word}@media all and (max-width: 767px){.msg-wrap{font-size:14px;line-height:24px}}#loader{animation:rotation 2s infinite linear;animation-play-state:running;width:50%;height:50%;min-width:120px;min-height:120px;max-width:240px;max-height:240px;margin:0 auto}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WmInfoComponent, selector: "wm-info", inputs: ["preText", "postText", "header", "type", "popupPosition", "iconAsTemplate", "useThemeForIconTemplate", "smallIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1308
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
1309
|
-
type: Component,
|
|
1310
|
-
args: [{ selector: 'wm-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"spinner-wrap flex-col wh-100\" *ngIf=\"isOverlayVisible\">\r\n <div class=\"spinner-bg wh-100\" [ngClass]=\"{'invisible': !isOverlayContrast }\"></div>\r\n <div class=\"spinner-content inline-col marginXA align-center\" [ngClass]=\"{'invisible': !isOverlayContrast }\">\r\n <div class=\"msg-wrap marginBottomX8\">\r\n <div style=\"display: flex\">\r\n <div class=\"msg\">{{message}}</div>\r\n <wm-info class=\"info\" [type]=\"infoType\" popupPosition=\"top-center\" \r\n [iconAsTemplate]=\"infoType===2\" [useThemeForIconTemplate]=\"infoType===2\"\r\n *ngIf=\"detailInfoMessage\" [header]=\"detailInfoMessage\" style=\"margin-left: 4px\"></wm-info>\r\n </div>\r\n \r\n <div class=\"msg\">{{messageBottomWait}}</div>\r\n </div>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 168 168\" id=\"loader\">\r\n <defs>\r\n <linearGradient id=\"a\" x1=\"38.078%\" x2=\"4.941%\" y1=\"8.411%\" y2=\"16.987%\">\r\n <stop offset=\"0%\" stop-color=\"var(--brandColor)\" stop-opacity=\"0.1\" />\r\n <stop offset=\"61.554%\" stop-color=\"var(--brandColor)\" stop-opacity=\"0.4\" />\r\n <stop offset=\"100%\" stop-color=\"var(--brandColor)\" stop-opacity=\"0.5\" />\r\n </linearGradient>\r\n <radialGradient id=\"b\" cy=\"43.835%\" r=\"54.9%\" fx=\"50%\" fy=\"43.835%\"\r\n gradientTransform=\"matrix(-.77913 .62687 -.6485 -.80602 1.174 .478)\">\r\n <stop offset=\"0%\" stop-color=\"#FFF\" />\r\n <stop offset=\"100%\" stop-color=\"var(--brandColor)\" stop-opacity=\"0.5\" />\r\n </radialGradient>\r\n </defs>\r\n <g fill=\"none\" fill-rule=\"evenodd\">\r\n <g transform=\"translate(10 10)\">\r\n <path stroke=\"url(#a)\" stroke-linecap=\"round\" stroke-width=\"19\"\r\n d=\"M16.198 27.79C6.062 40.453 0 56.518 0 74c0 40.87 33.13 74 74 74s74-33.13 74-74c0-24.611-12.014-46.416-30.498-59.87C105.292 5.244 90.258 0 74 0\" />\r\n <circle cx=\"16.5\" cy=\"27.5\" r=\"9.5\" fill=\"url(#b)\" />\r\n </g>\r\n </g>\r\n </svg>\r\n </div>\r\n\r\n</div>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.spinner-wrap{position:fixed;inset:0;z-index:5;text-shadow:0px 0px 0px var(--pageBackgroundColor);pointer-events:all}.spinner-bg{position:absolute;top:0;left:0;transition:opacity .4s ease-in;opacity:.7;background-color:var(--appBackgroundColor)}.invisible{opacity:.01}.spinner-content{z-index:1;width:80%;height:80%;min-width:120px;min-height:120px;max-width:400px;max-height:400px}.msg-wrap{width:auto;max-width:400px;box-sizing:border-box;text-align:center;font-size:16px;color:var(--strongFontColor);line-height:32px;font-weight:500;word-break:break-word}@media all and (max-width: 767px){.msg-wrap{font-size:14px;line-height:24px}}#loader{animation:rotation 2s infinite linear;animation-play-state:running;width:50%;height:50%;min-width:120px;min-height:120px;max-width:240px;max-height:240px;margin:0 auto}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
1311
|
-
}], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { delay: [{
|
|
1312
|
-
type: Input
|
|
1313
|
-
}], longMessageDelay: [{
|
|
1314
|
-
type: Input
|
|
1315
|
-
}], message: [{
|
|
1316
|
-
type: Input
|
|
1317
|
-
}], messageTakesLong: [{
|
|
1318
|
-
type: Input
|
|
1319
|
-
}], messageBottomWait: [{
|
|
1320
|
-
type: Input
|
|
1321
|
-
}], detailInfoMessage: [{
|
|
1322
|
-
type: Input
|
|
1323
|
-
}], infoType: [{
|
|
1324
|
-
type: Input
|
|
1325
|
-
}], showSpinner: [{
|
|
1326
|
-
type: Input
|
|
1327
|
-
}] } });
|
|
1328
|
-
|
|
1329
|
-
class WmStateIconComponent {
|
|
1330
|
-
constructor() {
|
|
1331
|
-
this.state = 'ok';
|
|
1332
|
-
}
|
|
1333
|
-
ngOnInit() {
|
|
1334
|
-
}
|
|
1335
|
-
}
|
|
1336
|
-
WmStateIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WmStateIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1337
|
-
WmStateIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: WmStateIconComponent, selector: "wm-state-icon", inputs: { state: "state" }, ngImport: i0, template: "<!--workaround for css image resolve plugin-->\r\n<div class=\"icon-wrapper {{state}}\" >\r\n\r\n</div>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.icon-wrapper{margin:0 auto;text-align:center;width:50px;height:50px;background-image:url(/assets/icon/state-icons.png)}.ok{background-position-x:-77px;background-position-y:-82px}.warning{background-position-x:-129px;background-position-y:-82px}.error-i{background-position-x:-321px;background-position-y:-82px;width:70px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1338
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WmStateIconComponent, decorators: [{
|
|
1339
|
-
type: Component,
|
|
1340
|
-
args: [{ selector: 'wm-state-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--workaround for css image resolve plugin-->\r\n<div class=\"icon-wrapper {{state}}\" >\r\n\r\n</div>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.icon-wrapper{margin:0 auto;text-align:center;width:50px;height:50px;background-image:url(/assets/icon/state-icons.png)}.ok{background-position-x:-77px;background-position-y:-82px}.warning{background-position-x:-129px;background-position-y:-82px}.error-i{background-position-x:-321px;background-position-y:-82px;width:70px}\n"] }]
|
|
1341
|
-
}], ctorParameters: function () { return []; }, propDecorators: { state: [{
|
|
1342
|
-
type: Input
|
|
1343
|
-
}] } });
|
|
1344
|
-
|
|
1345
|
-
class WmTagComponent {
|
|
1346
|
-
constructor() {
|
|
1347
|
-
this.background = 'transparent';
|
|
1348
|
-
this.color = 'black';
|
|
1349
|
-
this.iconSize = '20px';
|
|
1350
|
-
}
|
|
1351
|
-
}
|
|
1352
|
-
WmTagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WmTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1353
|
-
WmTagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: WmTagComponent, selector: "wm-tag", inputs: { text: "text", background: "background", color: "color", icon: "icon", iconSize: "iconSize" }, ngImport: i0, template: "<div class=\"text-wrap\">\r\n <span class=\"text-bg\" [ngStyle]=\"{'background': background}\"></span>\r\n <span class=\"text-bg text-bg-bor\" [ngStyle]=\"{'border-color': background}\"></span>\r\n <span class=\"text-title\" [ngStyle]=\"{'color': color}\"> \r\n <wm-template-image *ngIf=\"icon\" class=\"text-icon\" [icon]=\"icon\" [size]=\"iconSize\" [backgroundColor]=\"background\"></wm-template-image>\r\n {{text}}\r\n </span>\r\n</div>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.text-title{color:var(--strongFontColor);display:flex;text-align:left;font-family:Inter,Verdana,Geneva,Tahoma,sans-serif;font-weight:500;font-size:14px;min-width:50px;text-align:center;padding:4px 6px;z-index:1;line-height:18px}.text-wrap{position:relative;display:inline-block;line-height:normal}.text-bg{border:1px solid transparent;box-sizing:border-box;position:absolute;width:100%;height:100%;border-radius:6px;opacity:.1}.text-bg-bor{border:1px solid;opacity:.25}.rotate{transform-origin:center center;transform:rotate(-6deg)}.text-icon{margin-right:4px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: WmTemplateImageComponent, selector: "wm-template-image", inputs: ["icon", "disabled", "active", "light", "classes", "backgroundColor", "size", "sizeBox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1354
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WmTagComponent, decorators: [{
|
|
1355
|
-
type: Component,
|
|
1356
|
-
args: [{ selector: 'wm-tag', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"text-wrap\">\r\n <span class=\"text-bg\" [ngStyle]=\"{'background': background}\"></span>\r\n <span class=\"text-bg text-bg-bor\" [ngStyle]=\"{'border-color': background}\"></span>\r\n <span class=\"text-title\" [ngStyle]=\"{'color': color}\"> \r\n <wm-template-image *ngIf=\"icon\" class=\"text-icon\" [icon]=\"icon\" [size]=\"iconSize\" [backgroundColor]=\"background\"></wm-template-image>\r\n {{text}}\r\n </span>\r\n</div>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.text-title{color:var(--strongFontColor);display:flex;text-align:left;font-family:Inter,Verdana,Geneva,Tahoma,sans-serif;font-weight:500;font-size:14px;min-width:50px;text-align:center;padding:4px 6px;z-index:1;line-height:18px}.text-wrap{position:relative;display:inline-block;line-height:normal}.text-bg{border:1px solid transparent;box-sizing:border-box;position:absolute;width:100%;height:100%;border-radius:6px;opacity:.1}.text-bg-bor{border:1px solid;opacity:.25}.rotate{transform-origin:center center;transform:rotate(-6deg)}.text-icon{margin-right:4px}\n"] }]
|
|
1357
|
-
}], propDecorators: { text: [{
|
|
1358
|
-
type: Input
|
|
1359
|
-
}], background: [{
|
|
1360
|
-
type: Input
|
|
1361
|
-
}], color: [{
|
|
1362
|
-
type: Input
|
|
1363
|
-
}], icon: [{
|
|
1364
|
-
type: Input
|
|
1365
|
-
}], iconSize: [{
|
|
1366
|
-
type: Input
|
|
1367
|
-
}] } });
|
|
1368
|
-
|
|
1369
|
-
class WmToggleComponent {
|
|
1370
|
-
constructor() {
|
|
1371
|
-
this.groupValue = 0;
|
|
1372
|
-
this.model = [];
|
|
1373
|
-
this.disable = false;
|
|
1374
|
-
this.groupValueOutput = new EventEmitter();
|
|
1375
|
-
}
|
|
1376
|
-
onChange(idx) {
|
|
1377
|
-
this.groupValue = idx;
|
|
1378
|
-
this.groupValueOutput.emit(this.groupValue);
|
|
1379
|
-
}
|
|
1380
|
-
}
|
|
1381
|
-
WmToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WmToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1382
|
-
WmToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: WmToggleComponent, selector: "wm-toggle", inputs: { groupValue: "groupValue", model: "model", disable: "disable" }, outputs: { groupValueOutput: "groupValueOutput" }, ngImport: i0, template: "<mat-button-toggle-group #group=\"matButtonToggleGroup\" [value]=\"groupValue\" [disabled]=\"disable\">\r\n <mat-button-toggle *ngFor=\"let item of model; let idx = index\" [value]=\"idx\" (change)=\"onChange(idx)\">\r\n {{ item }}\r\n </mat-button-toggle>\r\n</mat-button-toggle-group>\r\n", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.mat-button-toggle-label-content{height:40px;align-items:center}.mat-button-toggle{font-size:16px;font-weight:500;color:var(--mediumFontColor);line-height:40px;outline:none;background:var(--pageBackgroundColor)}.mat-button-toggle-disabled{color:var(--disabledTextColor)}.mat-button-toggle-appearance-standard{padding:0 16px}.mat-button-toggle-group-appearance-standard{border-radius:50px!important;border-color:var(--secondaryHover)}.mat-button-toggle-checked{background-color:transparent!important;color:var(--brandColor)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1383
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WmToggleComponent, decorators: [{
|
|
1384
|
-
type: Component,
|
|
1385
|
-
args: [{ selector: 'wm-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-button-toggle-group #group=\"matButtonToggleGroup\" [value]=\"groupValue\" [disabled]=\"disable\">\r\n <mat-button-toggle *ngFor=\"let item of model; let idx = index\" [value]=\"idx\" (change)=\"onChange(idx)\">\r\n {{ item }}\r\n </mat-button-toggle>\r\n</mat-button-toggle-group>\r\n", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}.mat-button-toggle-label-content{height:40px;align-items:center}.mat-button-toggle{font-size:16px;font-weight:500;color:var(--mediumFontColor);line-height:40px;outline:none;background:var(--pageBackgroundColor)}.mat-button-toggle-disabled{color:var(--disabledTextColor)}.mat-button-toggle-appearance-standard{padding:0 16px}.mat-button-toggle-group-appearance-standard{border-radius:50px!important;border-color:var(--secondaryHover)}.mat-button-toggle-checked{background-color:transparent!important;color:var(--brandColor)}\n"] }]
|
|
1386
|
-
}], propDecorators: { groupValue: [{
|
|
1387
|
-
type: Input
|
|
1388
|
-
}], model: [{
|
|
1389
|
-
type: Input
|
|
1390
|
-
}], disable: [{
|
|
1391
|
-
type: Input
|
|
1392
|
-
}], groupValueOutput: [{
|
|
1393
|
-
type: Output
|
|
1394
|
-
}] } });
|
|
1395
|
-
|
|
1396
|
-
class BtvCounterButtonComponent extends BtvIconButtonComponent {
|
|
1397
|
-
constructor() {
|
|
1398
|
-
super(...arguments);
|
|
1399
|
-
this._counter = 0;
|
|
1400
|
-
this.counterLabel = '';
|
|
1401
|
-
this.unavailableText = '';
|
|
1402
|
-
}
|
|
1403
|
-
set counter(val) {
|
|
1404
|
-
this._counter = val;
|
|
1405
|
-
this.counterLabel = this.toShortLabel(val);
|
|
1406
|
-
}
|
|
1407
|
-
get counter() {
|
|
1408
|
-
return this._counter;
|
|
1409
|
-
}
|
|
1410
|
-
toShortLabel(value) {
|
|
1411
|
-
if (!value && value !== 0)
|
|
1412
|
-
return '';
|
|
1413
|
-
if (value <= 999)
|
|
1414
|
-
return value.toString();
|
|
1415
|
-
let num = Math.trunc(value / 100) / 10;
|
|
1416
|
-
if (num >= 100)
|
|
1417
|
-
num = Math.trunc(value / 1000);
|
|
1418
|
-
if (num <= 999)
|
|
1419
|
-
return num + 'K';
|
|
1420
|
-
num = Math.trunc(num / 1000);
|
|
1421
|
-
if (num <= 999)
|
|
1422
|
-
return num + 'M';
|
|
1423
|
-
return 'A lot';
|
|
1424
|
-
}
|
|
1425
|
-
}
|
|
1426
|
-
BtvCounterButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: BtvCounterButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1427
|
-
BtvCounterButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: BtvCounterButtonComponent, selector: "btv-counter-button", inputs: { counter: "counter", unavailableText: "unavailableText" }, usesInheritance: true, ngImport: i0, template: "<button class=\"icon flex-row {{buttonClasses}}\" (click)=\"onClick($event)\" type=\"button\" #button\r\n [tabindex]=\"(!isTabStop || disabled) ? -1 : undefined\" [showToolTip]=\"!!titleText\" customToolTip [contentTemplate]=\"template\">\r\n\r\n <wm-template-image [icon]=\"icon\" [size]=\"floor(iconSize * (isHover ? 1.1: 1)) + 'px'\" [active]=\"!disabled && changed\"\r\n [light]=\"light\">\r\n </wm-template-image>\r\n\r\n <ng-content></ng-content>\r\n\r\n <span class=\"wm-counter\" [title]=\"counter\" *ngIf=\"counter > 0\">{{counterLabel}}</span>\r\n\r\n</button>\r\n\r\n\r\n<ng-template #template>\r\n <span class=\"tooltip-text\"> {{titleText}} </span>\r\n <span *ngIf=\"disabled\" class=\"tooltip-disabled\"> - {{unavailableText}} </span>\r\n</ng-template>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}:host{display:block;background:var(--pageBackgroundColor);border:1px solid;border-radius:4px;border-color:var(--secondaryHover);cursor:pointer;box-sizing:border-box;width:36px;height:36px;flex-shrink:0}:host:focus .icon,:host:hover .icon{outline:none;background:var(--secondaryHover)}:host(.u-no-border){border-width:0px}:host(.small){width:16px;height:16px}:host(.medium){width:30px;height:30px}:host(.disabled){background-color:var(--disabledColor);border-color:var(--disabledColor);color:var(--lightFontColor);cursor:default}:host(.disabled):hover{background-color:var(--disabledColor);border-color:var(--disabledColor)}:host(.disabled) .icon{cursor:default}:host(.danger){background-color:var(--dangerColor);border-color:var(--warningColor)}.tooltip-text{align-self:center}.tooltip-disabled{font-size:14px -2;counter-reset:var(--lightFontColor)}.icon{justify-content:center;align-items:center;width:100%;height:100%;border:0px;cursor:pointer;color:var(--strongFontColor);outline:0px;padding:0;background:transparent;border-radius:inherit}.wm-counter-button{position:relative}.wm-counter{display:inline-block;width:16px;height:16px;line-height:16px;position:absolute;top:0;right:0;border:none;background-color:var(--dangerColor);border-radius:50%;font-size:10px;font-weight:700;text-align:center;color:var(--strongFontColor);text-indent:-1px;overflow:hidden;white-space:nowrap}.u-btn-validate{border-color:var(--dangerColor);background-color:var(--dangerColor);color:var(--onBrandTextColor)}.u-btn-validate:hover{background-color:var(--dangerColor)}.u-btn-primary{border-color:var(--brandColor);background-color:var(--brandColor);color:var(--onBrandTextColor)}.u-btn-primary:hover{background-color:var(--onBrandHoverColor)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WmTemplateImageComponent, selector: "wm-template-image", inputs: ["icon", "disabled", "active", "light", "classes", "backgroundColor", "size", "sizeBox"] }, { kind: "directive", type: ToolTipRendererDirective, selector: "[customToolTip]", inputs: ["showToolTip", "customToolTip", "contentTemplate", "customAnchor", "useCustom"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1428
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: BtvCounterButtonComponent, decorators: [{
|
|
1429
|
-
type: Component,
|
|
1430
|
-
args: [{ selector: 'btv-counter-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"icon flex-row {{buttonClasses}}\" (click)=\"onClick($event)\" type=\"button\" #button\r\n [tabindex]=\"(!isTabStop || disabled) ? -1 : undefined\" [showToolTip]=\"!!titleText\" customToolTip [contentTemplate]=\"template\">\r\n\r\n <wm-template-image [icon]=\"icon\" [size]=\"floor(iconSize * (isHover ? 1.1: 1)) + 'px'\" [active]=\"!disabled && changed\"\r\n [light]=\"light\">\r\n </wm-template-image>\r\n\r\n <ng-content></ng-content>\r\n\r\n <span class=\"wm-counter\" [title]=\"counter\" *ngIf=\"counter > 0\">{{counterLabel}}</span>\r\n\r\n</button>\r\n\r\n\r\n<ng-template #template>\r\n <span class=\"tooltip-text\"> {{titleText}} </span>\r\n <span *ngIf=\"disabled\" class=\"tooltip-disabled\"> - {{unavailableText}} </span>\r\n</ng-template>", styles: ["@media print{body{all:unset!important}.wm-page{margin:0!important;display:block!important}.not-printable{display:none!important}*{visibility:hidden}.printable,.printable *{visibility:visible!important}}:host{display:block;background:var(--pageBackgroundColor);border:1px solid;border-radius:4px;border-color:var(--secondaryHover);cursor:pointer;box-sizing:border-box;width:36px;height:36px;flex-shrink:0}:host:focus .icon,:host:hover .icon{outline:none;background:var(--secondaryHover)}:host(.u-no-border){border-width:0px}:host(.small){width:16px;height:16px}:host(.medium){width:30px;height:30px}:host(.disabled){background-color:var(--disabledColor);border-color:var(--disabledColor);color:var(--lightFontColor);cursor:default}:host(.disabled):hover{background-color:var(--disabledColor);border-color:var(--disabledColor)}:host(.disabled) .icon{cursor:default}:host(.danger){background-color:var(--dangerColor);border-color:var(--warningColor)}.tooltip-text{align-self:center}.tooltip-disabled{font-size:14px -2;counter-reset:var(--lightFontColor)}.icon{justify-content:center;align-items:center;width:100%;height:100%;border:0px;cursor:pointer;color:var(--strongFontColor);outline:0px;padding:0;background:transparent;border-radius:inherit}.wm-counter-button{position:relative}.wm-counter{display:inline-block;width:16px;height:16px;line-height:16px;position:absolute;top:0;right:0;border:none;background-color:var(--dangerColor);border-radius:50%;font-size:10px;font-weight:700;text-align:center;color:var(--strongFontColor);text-indent:-1px;overflow:hidden;white-space:nowrap}.u-btn-validate{border-color:var(--dangerColor);background-color:var(--dangerColor);color:var(--onBrandTextColor)}.u-btn-validate:hover{background-color:var(--dangerColor)}.u-btn-primary{border-color:var(--brandColor);background-color:var(--brandColor);color:var(--onBrandTextColor)}.u-btn-primary:hover{background-color:var(--onBrandHoverColor)}\n"] }]
|
|
1431
|
-
}], propDecorators: { counter: [{
|
|
1432
|
-
type: Input
|
|
1433
|
-
}], unavailableText: [{
|
|
1434
|
-
type: Input
|
|
1435
|
-
}] } });
|
|
1436
|
-
|
|
1437
|
-
class WmBaseControlsModule {
|
|
1438
|
-
constructor() { }
|
|
1439
|
-
}
|
|
1440
|
-
WmBaseControlsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WmBaseControlsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1441
|
-
WmBaseControlsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.6", ngImport: i0, type: WmBaseControlsModule, declarations: [BtvSearch, WmBackBtnComponent, BtvIconButtonComponent, WmNoContentComponent,
|
|
1442
|
-
BtvCounterButtonComponent, WmStateIconComponent, BlinkMessageComponent, BusyIndicatorComponent,
|
|
1443
|
-
ScalableDivComponent,
|
|
1444
|
-
BtvProgressComponent, WmBetaTextComponent, WmTemplateImageComponent, IllustrationComponent,
|
|
1445
|
-
AvatarComponent, WmToggleComponent, WmTagComponent, WmPanelBarComponent, InfoCardComponent,
|
|
1446
|
-
CustomToolTipComponent, ToolTipRendererDirective, WmInfoComponent, SpinnerComponent], imports: [CommonModule, MatButtonToggleModule, MatTooltipModule, OverlayModule], exports: [BtvSearch, WmBackBtnComponent, BtvIconButtonComponent, WmNoContentComponent,
|
|
1447
|
-
BtvCounterButtonComponent, WmStateIconComponent, BlinkMessageComponent, BusyIndicatorComponent,
|
|
1448
|
-
ScalableDivComponent,
|
|
1449
|
-
BtvProgressComponent, WmBetaTextComponent, WmTemplateImageComponent, IllustrationComponent,
|
|
1450
|
-
AvatarComponent, WmToggleComponent, WmTagComponent, WmPanelBarComponent, InfoCardComponent,
|
|
1451
|
-
WmInfoComponent, SpinnerComponent, ToolTipRendererDirective, CustomToolTipComponent] });
|
|
1452
|
-
WmBaseControlsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WmBaseControlsModule, imports: [CommonModule, MatButtonToggleModule, MatTooltipModule, OverlayModule] });
|
|
1453
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WmBaseControlsModule, decorators: [{
|
|
1454
|
-
type: NgModule,
|
|
1455
|
-
args: [{
|
|
1456
|
-
imports: [CommonModule, MatButtonToggleModule, MatTooltipModule, OverlayModule],
|
|
1457
|
-
declarations: [BtvSearch, WmBackBtnComponent, BtvIconButtonComponent, WmNoContentComponent,
|
|
1458
|
-
BtvCounterButtonComponent, WmStateIconComponent, BlinkMessageComponent, BusyIndicatorComponent,
|
|
1459
|
-
ScalableDivComponent,
|
|
1460
|
-
BtvProgressComponent, WmBetaTextComponent, WmTemplateImageComponent, IllustrationComponent,
|
|
1461
|
-
AvatarComponent, WmToggleComponent, WmTagComponent, WmPanelBarComponent, InfoCardComponent,
|
|
1462
|
-
CustomToolTipComponent, ToolTipRendererDirective, WmInfoComponent, SpinnerComponent],
|
|
1463
|
-
exports: [BtvSearch, WmBackBtnComponent, BtvIconButtonComponent, WmNoContentComponent,
|
|
1464
|
-
BtvCounterButtonComponent, WmStateIconComponent, BlinkMessageComponent, BusyIndicatorComponent,
|
|
1465
|
-
ScalableDivComponent,
|
|
1466
|
-
BtvProgressComponent, WmBetaTextComponent, WmTemplateImageComponent, IllustrationComponent,
|
|
1467
|
-
AvatarComponent, WmToggleComponent, WmTagComponent, WmPanelBarComponent, InfoCardComponent,
|
|
1468
|
-
WmInfoComponent, SpinnerComponent, ToolTipRendererDirective, CustomToolTipComponent],
|
|
1469
|
-
providers: []
|
|
1470
|
-
}]
|
|
1471
|
-
}], ctorParameters: function () { return []; } });
|
|
1472
|
-
|
|
1473
|
-
/*
|
|
1474
|
-
* Public API Surface of btv-base-controls
|
|
1475
|
-
*/
|
|
1476
|
-
|
|
1477
|
-
/**
|
|
1478
|
-
* Generated bundle index. Do not edit.
|
|
1479
|
-
*/
|
|
1480
|
-
|
|
1481
|
-
export { AvatarComponent, BlinkMessageComponent, BtvCounterButtonComponent, BtvIconButtonComponent, BtvProgressComponent, BtvSearch, BusyIndicatorComponent, CustomToolTipComponent, IllustrationComponent, InfoCardComponent, InfoType, ScalableDivComponent, SpinnerComponent, ToolTipRendererDirective, ViewState, WmBackBtnComponent, WmBaseControlsModule, WmBetaTextComponent, WmInfoComponent, WmNoContentComponent, WmPanelBarComponent, WmStateIconComponent, WmTagComponent, WmTemplateImageComponent, WmToggleComponent, defaultColors };
|
|
1482
|
-
//# sourceMappingURL=btv-base-controls.mjs.map
|