UI: Updated tinycolor for version 1.6.0

ui-ngx/package.json

@@ -97,7 +97,7 @@
     "screenfull": "^6.0.2",
     "split.js": "^1.6.5",
     "systemjs": "6.11.0",
-    "tinycolor2": "~1.4.2",
+    "tinycolor2": "^1.6.0",
     "tinymce": "~5.10.7",
     "tooltipster": "^4.2.8",
     "ts-transformer-keys": "^0.4.4",

ui-ngx/src/app/modules/home/components/widget/lib/analogue-gauge.models.ts

@@ -18,13 +18,11 @@ import * as CanvasGauges from 'canvas-gauges';
 import { FontSettings, getFontFamily } from '@home/components/widget/lib/settings.models';
 import { WidgetContext } from '@home/models/widget-component.models';
 import { isDefined } from '@core/utils';
-import * as tinycolor_ from 'tinycolor2';
+import tinycolor from 'tinycolor2';
 import Highlight = CanvasGauges.Highlight;
 import BaseGauge = CanvasGauges.BaseGauge;
 import GenericOptions = CanvasGauges.GenericOptions;
 
-const tinycolor = tinycolor_;
-
 export type AnimationRule = 'linear' | 'quad' | 'quint' | 'cycle'
                             | 'bounce' | 'elastic' | 'dequad' | 'dequint'
                             | 'decycle' | 'debounce' | 'delastic';

ui-ngx/src/app/modules/home/components/widget/lib/analogue-linear-gauge.ts

@@ -15,20 +15,17 @@
 ///
 
 import * as CanvasGauges from 'canvas-gauges';
-import { JsonSettingsSchema } from '@shared/models/widget.models';
 import { WidgetContext } from '@home/models/widget-component.models';
 import { TbAnalogueGauge } from '@home/components/widget/lib/analogue-gauge.models';
 import {
   AnalogueLinearGaugeSettings
 } from '@home/components/widget/lib/analogue-linear-gauge.models';
 import { isDefined } from '@core/utils';
-import * as tinycolor_ from 'tinycolor2';
+import tinycolor from 'tinycolor2';
 import LinearGaugeOptions = CanvasGauges.LinearGaugeOptions;
 import LinearGauge = CanvasGauges.LinearGauge;
 import BaseGauge = CanvasGauges.BaseGauge;
 
-const tinycolor = tinycolor_;
-
 // @dynamic
 export class TbAnalogueLinearGauge extends TbAnalogueGauge<AnalogueLinearGaugeSettings, LinearGaugeOptions>{
 

ui-ngx/src/app/modules/home/components/widget/lib/canvas-digital-gauge.ts

@@ -16,14 +16,12 @@
 
 import * as CanvasGauges from 'canvas-gauges';
 import { FontStyle, FontWeight } from '@home/components/widget/lib/settings.models';
-import * as tinycolor_ from 'tinycolor2';
+import tinycolor from 'tinycolor2';
 import { ColorFormats } from 'tinycolor2';
 import { isDefined, isDefinedAndNotNull, isString, isUndefined, padValue } from '@core/utils';
 import GenericOptions = CanvasGauges.GenericOptions;
 import BaseGauge = CanvasGauges.BaseGauge;
 
-const tinycolor = tinycolor_;
-
 export type GaugeType = 'arc' | 'donut' | 'horizontalBar' | 'verticalBar';
 
 export interface DigitalGaugeColorRange {

ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts

@@ -23,7 +23,7 @@ import {
   DigitalGaugeSettings,
   FixedLevelColors
 } from '@home/components/widget/lib/digital-gauge.models';
-import * as tinycolor_ from 'tinycolor2';
+import tinycolor from 'tinycolor2';
 import { isDefined, isDefinedAndNotNull } from '@core/utils';
 import { prepareFontSettings } from '@home/components/widget/lib/settings.models';
 import { CanvasDigitalGauge, CanvasDigitalGaugeOptions } from '@home/components/widget/lib/canvas-digital-gauge';
@@ -41,8 +41,6 @@ import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import { EMPTY, Observable } from 'rxjs';
 import GenericOptions = CanvasGauges.GenericOptions;
 
-const tinycolor = tinycolor_;
-
 // @dynamic
 export class TbCanvasDigitalGauge {
 

ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.ts

@@ -54,14 +54,13 @@ import {
   TooltipValueFormatFunction
 } from './flot-widget.models';
 import * as moment_ from 'moment';
-import * as tinycolor_ from 'tinycolor2';
+import tinycolor from 'tinycolor2';
 import { AggregationType } from '@shared/models/time/time.models';
 import { CancelAnimationFrame } from '@core/services/raf.service';
 import { UtilsService } from '@core/services/utils.service';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import Timeout = NodeJS.Timeout;
 
-const tinycolor = tinycolor_;
 const moment = moment_;
 
 export class TbFlot {

ui-ngx/src/app/modules/home/components/widget/lib/rpc/knob.component.ts

@@ -22,12 +22,10 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { isDefined, isNumber } from '@core/utils';
 import { CanvasDigitalGaugeOptions } from '@home/components/widget/lib/canvas-digital-gauge';
-import * as tinycolor_ from 'tinycolor2';
+import tinycolor from 'tinycolor2';
 import { ResizeObserver } from '@juggle/resize-observer';
 import GenericOptions = CanvasGauges.GenericOptions;
 
-const tinycolor = tinycolor_;
-
 interface KnobSettings {
   minValue: number;
   maxValue: number;

ui-ngx/src/app/modules/home/components/widget/lib/rpc/led-indicator.component.ts

@@ -20,7 +20,7 @@ import { WidgetContext } from '@home/models/widget-component.models';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { isDefined } from '@core/utils';
-import * as tinycolor_ from 'tinycolor2';
+import tinycolor from 'tinycolor2';
 import { UtilsService } from '@core/services/utils.service';
 import { IWidgetSubscription, SubscriptionInfo, WidgetSubscriptionOptions } from '@core/api/widget-api.models';
 import { DatasourceType, widgetType } from '@shared/models/widget.models';
@@ -28,8 +28,6 @@ import { EntityType } from '@shared/models/entity-type.models';
 import { ResizeObserver } from '@juggle/resize-observer';
 import Timeout = NodeJS.Timeout;
 
-const tinycolor = tinycolor_;
-
 const checkStatusPollingInterval = 10000;
 
 type RetrieveValueMethod = 'attribute' | 'timeseries';

ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts

@@ -18,15 +18,13 @@ import { EntityId } from '@shared/models/id/entity-id';
 import { DataKey, FormattedData, WidgetActionDescriptor, WidgetConfig } from '@shared/models/widget.models';
 import { getDescendantProp, isDefined, isNotEmptyStr } from '@core/utils';
 import { AlarmDataInfo, alarmFields } from '@shared/models/alarm.models';
-import * as tinycolor_ from 'tinycolor2';
+import tinycolor from 'tinycolor2';
 import { Direction, EntityDataSortOrder, EntityKey } from '@shared/models/query/query.models';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import { WidgetContext } from '@home/models/widget-component.models';
 import { UtilsService } from '@core/services/utils.service';
 import { TranslateService } from '@ngx-translate/core';
 
-const tinycolor = tinycolor_;
-
 type ColumnVisibilityOptions = 'visible' | 'hidden' | 'hidden-mobile';
 
 type ColumnSelectionOptions = 'enabled' | 'disabled';

ui-ngx/src/app/modules/home/components/widget/widget-component.service.ts

@@ -42,14 +42,12 @@ import { WidgetTypeId } from '@app/shared/models/id/widget-type-id';
 import { TenantId } from '@app/shared/models/id/tenant-id';
 import { SharedModule } from '@shared/shared.module';
 import { MODULES_MAP } from '@shared/public-api';
-import * as tinycolor_ from 'tinycolor2';
+import tinycolor from 'tinycolor2';
 import moment from 'moment';
 import { IModulesMap } from '@modules/common/modules-map.models';
 import { HOME_COMPONENTS_MODULE_TOKEN } from '@home/components/tokens';
 import { widgetSettingsComponentsMap } from '@home/components/widget/lib/settings/widget-settings.module';
 
-const tinycolor = tinycolor_;
-
 @Injectable()
 export class WidgetComponentService {
 

ui-ngx/src/app/shared/components/json-form/json-form.component.ts

@@ -35,7 +35,7 @@ import { deepClone, isString } from '@app/core/utils';
 import { TranslateService } from '@ngx-translate/core';
 import { JsonFormProps } from './react/json-form.models';
 import inspector from 'schema-inspector';
-import * as tinycolor_ from 'tinycolor2';
+import tinycolor from 'tinycolor2';
 import { DialogService } from '@app/core/services/dialog.service';
 // import * as React from 'react';
 // import * as ReactDOM from 'react-dom';
@@ -48,8 +48,6 @@ import { forkJoin, from } from 'rxjs';
 import { MouseEvent } from 'react';
 import { TbPopoverService } from '@shared/components/popover.service';
 
-const tinycolor = tinycolor_;
-
 @Component({
   selector: 'tb-json-form',
   templateUrl: './json-form.component.html',

ui-ngx/src/app/shared/components/json-form/react/json-form-color.tsx

@@ -17,15 +17,13 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import ThingsboardBaseComponent from './json-form-base-component';
 import reactCSS from 'reactcss';
-import * as tinycolor_ from 'tinycolor2';
+import tinycolor from 'tinycolor2';
 import TextField from '@material-ui/core/TextField';
 import { JsonFormFieldProps, JsonFormFieldState } from '@shared/components/json-form/react/json-form.models';
 import IconButton from '@material-ui/core/IconButton';
 import Clear from '@material-ui/icons/Clear';
 import Tooltip from '@material-ui/core/Tooltip';
 
-const tinycolor = tinycolor_;
-
 interface ThingsboardColorState extends JsonFormFieldState {
   color: tinycolor.ColorFormats.RGBA | null;
   focused: boolean;

ui-ngx/src/app/shared/components/json-form/react/json-form-schema-form.tsx

@@ -43,13 +43,11 @@ import {
 } from './json-form.models';
 
 import _ from 'lodash';
-import * as tinycolor_ from 'tinycolor2';
+import tinycolor from 'tinycolor2';
 import { GroupInfo } from '@shared/models/widget.models';
 import ThingsboardMarkdown from '@shared/components/json-form/react/json-form-markdown';
 import { MouseEvent } from 'react';
 
-const tinycolor = tinycolor_;
-
 class ThingsboardSchemaForm extends React.Component<JsonFormProps, any> {
 
   private hasConditions: boolean;

ui-ngx/src/app/shared/components/json-form/react/json-form.models.ts

@@ -14,12 +14,10 @@
 /// limitations under the License.
 ///
 
-import * as tinycolor_ from 'tinycolor2';
+import tinycolor from 'tinycolor2';
 import { GroupInfo } from '@shared/models/widget.models';
 import { MouseEvent } from 'react';
 
-const tinycolor = tinycolor_;
-
 export interface SchemaValidationResult {
   valid: boolean;
   error?: {

ui-ngx/src/app/shared/components/led-light.component.ts

@@ -17,9 +17,7 @@
 import { AfterViewInit, Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { RaphaelElement, RaphaelPaper, RaphaelSet } from 'raphael';
-import * as tinycolor_ from 'tinycolor2';
+import tinycolor from 'tinycolor2';
-
-const tinycolor = tinycolor_;
 
 interface CircleElement extends RaphaelElement {
   theGlow?: RaphaelSet;

ui-ngx/src/app/shared/components/notification/notification.component.ts

@@ -26,7 +26,7 @@ import {
 import { UtilsService } from '@core/services/utils.service';
 import { Router } from '@angular/router';
 import { alarmSeverityTranslations } from '@shared/models/alarm.models';
-import * as tinycolor_ from 'tinycolor2';
+import tinycolor from 'tinycolor2';
 import { StateObject } from '@core/api/widget-api.models';
 import { objToBase64URI } from '@core/utils';
 import { coerceBoolean } from '@shared/decorators/coerce-boolean';
@@ -56,8 +56,6 @@ export class NotificationComponent implements OnInit {
   buttonLabel = '';
   hideMarkAsReadButton = false;
 
-  tinycolor = tinycolor_;
-
   notificationType = NotificationType;
   notificationTypeIcons = NotificationTypeIcons;
   alarmSeverityTranslations = alarmSeverityTranslations;
@@ -129,7 +127,7 @@ export class NotificationComponent implements OnInit {
   }
 
   alarmColorSeverity(alpha: number) {
-    return this.tinycolor(AlarmSeverityNotificationColors.get(this.notification.info.alarmSeverity)).setAlpha(alpha).toRgbString();
+    return tinycolor(AlarmSeverityNotificationColors.get(this.notification.info.alarmSeverity)).setAlpha(alpha).toRgbString();
   }
 
   notificationColor(): string {

ui-ngx/src/app/shared/models/material.models.ts

@@ -14,9 +14,7 @@
 /// limitations under the License.
 ///
 
-import * as tinycolor_ from 'tinycolor2';
+import tinycolor from 'tinycolor2';
-
-const tinycolor = tinycolor_;
 
 export interface MaterialColorItem {
   value: string;

ui-ngx/yarn.lock

@@ -10205,10 +10205,10 @@ tiny-warning@^1.0.2:
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
 
-tinycolor2@~1.4.2:
+tinycolor2@^1.6.0:
-  version "1.4.2"
+  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
-  integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
+  integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==
 
 "tinymce@^6.0.0 || ^5.5.0":
   version "6.3.1"