diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts
index fca9f31084..e5441b1629 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts
@@ -36,9 +36,9 @@ import { WidgetContext } from '@home/models/widget-component.models';
import { Observable } from 'rxjs';
import {
backgroundStyle,
- ColorProcessor,
ComponentStyle,
- DateFormatProcessor, getDataKey,
+ DateFormatProcessor,
+ getDataKey,
getLatestSingleTsValue,
overlayStyle,
textStyle
@@ -47,7 +47,7 @@ import { DatePipe } from '@angular/common';
import { TbFlot } from '@home/components/widget/lib/flot-widget';
import { TbFlotKeySettings, TbFlotSettings } from '@home/components/widget/lib/flot-widget.models';
import { DataKey } from '@shared/models/widget.models';
-import { formatNumberValue, formatValue, isDefined, isNumeric } from '@core/utils';
+import { formatNumberValue, formatValue, isDefined } from '@core/utils';
import { map } from 'rxjs/operators';
@Component({
@@ -72,19 +72,19 @@ export class AggregatedValueCardWidgetComponent implements OnInit, AfterViewInit
showSubtitle = true;
subtitle$: Observable;
subtitleStyle: ComponentStyle = {};
- subtitleColor: ColorProcessor;
+ subtitleColor: string;
showValues = false;
values: {[key: string]: AggregatedValueCardValue} = {};
showChart = true;
- chartColor: ColorProcessor;
+ chartColor: string;
showDate = true;
dateFormat: DateFormatProcessor;
dateStyle: ComponentStyle = {};
- dateColor: ColorProcessor;
+ dateColor: string;
backgroundStyle: ComponentStyle = {};
overlayStyle: ComponentStyle = {};
@@ -108,7 +108,7 @@ export class AggregatedValueCardWidgetComponent implements OnInit, AfterViewInit
const subtitle = this.settings.subtitle;
this.subtitle$ = this.ctx.registerLabelPattern(subtitle, this.subtitle$);
this.subtitleStyle = textStyle(this.settings.subtitleFont, '0.25px');
- this.subtitleColor = ColorProcessor.fromSettings(this.settings.subtitleColor);
+ this.subtitleColor = this.settings.subtitleColor;
const dataKey = getDataKey(this.ctx.defaultSubscription.datasources);
if (dataKey?.name && this.ctx.defaultSubscription.firstDatasource?.latestDataKeys?.length) {
@@ -123,7 +123,7 @@ export class AggregatedValueCardWidgetComponent implements OnInit, AfterViewInit
}
this.showChart = this.settings.showChart;
- this.chartColor = ColorProcessor.fromSettings(this.settings.chartColor);
+ this.chartColor = this.settings.chartColor;
if (this.showChart) {
if (this.ctx.defaultSubscription.firstDatasource?.dataKeys?.length) {
this.flotDataKey = this.ctx.defaultSubscription.firstDatasource?.dataKeys[0];
@@ -132,14 +132,14 @@ export class AggregatedValueCardWidgetComponent implements OnInit, AfterViewInit
showLines: true,
lineWidth: 2
} as TbFlotKeySettings;
- this.flotDataKey.color = this.chartColor.color;
+ this.flotDataKey.color = this.chartColor;
}
}
this.showDate = this.settings.showDate;
this.dateFormat = DateFormatProcessor.fromSettings(this.ctx.$injector, this.settings.dateFormat);
this.dateStyle = textStyle(this.settings.dateFont, '0.25px');
- this.dateColor = ColorProcessor.fromSettings(this.settings.dateColor);
+ this.dateColor = this.settings.dateColor;
this.backgroundStyle = backgroundStyle(this.settings.background);
this.overlayStyle = overlayStyle(this.settings.background.overlay);
@@ -188,17 +188,11 @@ export class AggregatedValueCardWidgetComponent implements OnInit, AfterViewInit
public onDataUpdated() {
const tsValue = getLatestSingleTsValue(this.ctx.data);
let ts;
- let value;
if (tsValue) {
ts = tsValue[0];
- value = tsValue[1];
}
- this.subtitleColor.update(value);
- this.dateColor.update(value);
if (this.showChart) {
- this.chartColor.update(value);
- this.flot.updateSeriesColor(this.chartColor.color);
this.flot.update();
}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card.models.ts
index 273ca1edaa..5306ad3988 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card.models.ts
@@ -24,7 +24,6 @@ import {
constantColor,
DateFormatSettings,
Font,
- iconStyle,
lastUpdateAgoDateFormat,
textStyle
} from '@shared/models/widget-settings.models';
@@ -36,13 +35,13 @@ export interface AggregatedValueCardWidgetSettings {
showSubtitle: boolean;
subtitle: string;
subtitleFont: Font;
- subtitleColor: ColorSettings;
+ subtitleColor: string;
showDate: boolean;
dateFormat: DateFormatSettings;
dateFont: Font;
- dateColor: ColorSettings;
+ dateColor: string;
showChart: boolean;
- chartColor: ColorSettings;
+ chartColor: string;
background: BackgroundSettings;
}
@@ -83,7 +82,8 @@ export interface AggregatedValueCardValue {
downArrow: boolean;
}
-export const computeAggregatedCardValue = (dataKeys: DataKey[], keyName: string, position: AggregatedValueCardKeyPosition): AggregatedValueCardValue => {
+export const computeAggregatedCardValue =
+ (dataKeys: DataKey[], keyName: string, position: AggregatedValueCardKeyPosition): AggregatedValueCardValue => {
const key = dataKeys.find(dataKey => ( dataKey.name === keyName && (dataKey.settings?.position === position ||
(!dataKey.settings?.position && position === AggregatedValueCardKeyPosition.center)) ));
if (key) {
@@ -123,7 +123,7 @@ export const aggregatedValueCardDefaultSettings: AggregatedValueCardWidgetSettin
weight: '400',
lineHeight: '16px'
},
- subtitleColor: constantColor('rgba(0, 0, 0, 0.38)'),
+ subtitleColor: 'rgba(0, 0, 0, 0.38)',
showDate: true,
dateFormat: lastUpdateAgoDateFormat(),
dateFont: {
@@ -134,9 +134,9 @@ export const aggregatedValueCardDefaultSettings: AggregatedValueCardWidgetSettin
weight: '400',
lineHeight: '16px'
},
- dateColor: constantColor('rgba(0, 0, 0, 0.38)'),
+ dateColor: 'rgba(0, 0, 0, 0.38)',
showChart: true,
- chartColor: constantColor('rgba(0, 0, 0, 0.87)'),
+ chartColor: 'rgba(0, 0, 0, 0.87)',
background: {
type: BackgroundType.color,
color: '#fff',
diff --git a/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.scss b/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.scss
index cd6c18af9e..e8da0e042a 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.scss
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-@import "../../../../../theme";
+@import "../../../../../scss/constants";
:host {
.fields-group {
diff --git a/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.scss b/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.scss
index 01519235aa..628a964d4d 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.scss
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-@import "../../../../../../theme";
+@import "../../../../../../scss/constants";
:host ::ng-deep {
.mat-button-toggle-group.tb-notification-unread-toggle-group {
diff --git a/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-notification-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-notification-dialog.component.scss
index 8406cae3fe..8dfc5db5d5 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-notification-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-notification-dialog.component.scss
@@ -14,7 +14,6 @@
* limitations under the License.
*/
@import "../../../../../../scss/constants";
-@import "../../../../../../theme";
:host {
form.tb-dialog-container {
diff --git a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.scss
index 7e582d2b7d..8aae1a038f 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.scss
@@ -13,7 +13,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-@import "../../../../../../theme";
@import "../../../../../../scss/constants";
:host {
diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
index 0702d6bf52..6459ac3b64 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
@@ -14,7 +14,6 @@
* limitations under the License.
*/
@import "../../../../../../scss/constants";
-@import "../../../../../../theme";
:host-context(.tb-fullscreen-dialog .mat-mdc-dialog-container) {
width: 820px;
diff --git a/ui-ngx/src/app/shared/components/button/copy-button.component.scss b/ui-ngx/src/app/shared/components/button/copy-button.component.scss
index 0818466a38..e26f6978cb 100644
--- a/ui-ngx/src/app/shared/components/button/copy-button.component.scss
+++ b/ui-ngx/src/app/shared/components/button/copy-button.component.scss
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-@import "../../../../theme";
+@import "../../../../scss/constants";
:host {
.mini-button {
diff --git a/ui-ngx/src/app/shared/components/color-picker/color-picker.component.ts b/ui-ngx/src/app/shared/components/color-picker/color-picker.component.ts
index 47a745819d..5990caa6ed 100644
--- a/ui-ngx/src/app/shared/components/color-picker/color-picker.component.ts
+++ b/ui-ngx/src/app/shared/components/color-picker/color-picker.component.ts
@@ -18,6 +18,7 @@ import { Component, forwardRef, OnDestroy } from '@angular/core';
import { Color, ColorPickerControl } from '@iplab/ngx-color-picker';
import { Subscription } from 'rxjs';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, UntypedFormControl } from '@angular/forms';
+import { isString } from '@core/utils';
export enum ColorType {
hex = 'hex',
@@ -87,8 +88,9 @@ export class ColorPickerComponent implements ControlValueAccessor, OnDestroy {
}
writeValue(value: string): void {
- this.setValue = !!value;
- this.control.setValueFrom(value || '#fff');
+ const valid = this.isValidColorValue(value);
+ this.setValue = valid;
+ this.control.setValueFrom(valid ? value : '#fff');
this.modelValue = value;
if (this.control.initType === ColorType.hexa) {
@@ -101,6 +103,10 @@ export class ColorPickerComponent implements ControlValueAccessor, OnDestroy {
this.presentationControl.patchValue(this.presentations.indexOf(this.control.initType), {emitEvent: false});
}
+ private isValidColorValue(value: string): boolean {
+ return value && isString(value) && value.trim().length > 0;
+ }
+
private updateModel() {
const color: string = this.getValueByType(this.control.value, this.presentations[this.presentationControl.value]);
if (this.modelValue !== color) {
diff --git a/ui-ngx/src/app/shared/components/material-icons.component.html b/ui-ngx/src/app/shared/components/material-icons.component.html
index 79476572f6..bbc50a9292 100644
--- a/ui-ngx/src/app/shared/components/material-icons.component.html
+++ b/ui-ngx/src/app/shared/components/material-icons.component.html
@@ -53,22 +53,24 @@
-
- {{ 'action.show-more' | translate }}
-
{{ 'icon.no-icons-found' | translate:{iconSearch: searchIconControl.value} }}
-