Merge pull request #8485 from vvlladd28/improvement/decorators/coercion

Added decorators to coercion input component value

ui-ngx/src/app/modules/common/modules-map.ts

@@ -93,6 +93,10 @@ import * as NospacePipe from '@shared/pipe/nospace.pipe';
 import * as SelectableColumnsPipe from '@shared/pipe/selectable-columns.pipe';
 import * as KeyboardShortcutPipe from '@shared/pipe/keyboard-shortcut.pipe';
 
+import * as coercion from '@shared/decorators/coercion';
+import * as enumerable from '@shared/decorators/enumerable';
+import * as TbInject from '@shared/decorators/tb-inject';
+
 import * as FooterComponent from '@shared/components/footer.component';
 import * as LogoComponent from '@shared/components/logo.component';
 import * as FooterFabButtonsComponent from '@shared/components/footer-fab-buttons.component';
@@ -384,6 +388,10 @@ class ModulesMap implements IModulesMap {
     '@shared/pipe/selectable-columns.pipe': SelectableColumnsPipe,
     '@shared/pipe/keyboard-shortcut.pipe': KeyboardShortcutPipe,
 
+    '@shared/decorators/coercion': coercion,
+    '@shared/decorators/enumerable': enumerable,
+    '@shared/decorators/tb-inject': TbInject,
+
     '@shared/components/footer.component': FooterComponent,
     '@shared/components/logo.component': LogoComponent,
     '@shared/components/footer-fab-buttons.component': FooterFabButtonsComponent,

ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.ts

@@ -30,7 +30,7 @@ import {
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { AlarmFilterConfig } from '@shared/models/query/query.models';
-import { coerceBoolean } from '@shared/decorators/coerce-boolean';
+import { coerceBoolean } from '@shared/decorators/coercion';
 import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import {

ui-ngx/src/app/modules/home/components/device/device-info-filter.component.ts

@@ -30,7 +30,7 @@ import {
   ViewContainerRef
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { coerceBoolean } from '@shared/decorators/coerce-boolean';
+import { coerceBoolean } from '@shared/decorators/coercion';
 import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { TranslateService } from '@ngx-translate/core';

ui-ngx/src/app/modules/home/components/widget/lib/home-page/toggle-header.component.ts

@@ -37,7 +37,7 @@ import { MatStepper } from '@angular/material/stepper';
 import { MatButtonToggle, MatButtonToggleGroup } from '@angular/material/button-toggle';
 import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
 import { MediaBreakpoints } from '@shared/models/constants';
-import { coerceBoolean } from '@shared/decorators/coerce-boolean';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 export interface ToggleHeaderOption {
   name: string;

ui-ngx/src/app/modules/home/pages/notification/rule/escalations.component.ts

@@ -32,7 +32,7 @@ import { AppState } from '@app/core/core.state';
 import { Subject } from 'rxjs';
 import { NonConfirmedNotificationEscalation } from '@shared/models/notification.models';
 import { takeUntil } from 'rxjs/operators';
-import { coerceBoolean } from '@shared/decorators/coerce-boolean';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
   selector: 'tb-escalations-component',

ui-ngx/src/app/shared/components/button/copy-button.component.ts

@@ -19,7 +19,7 @@ import { ClipboardService } from 'ngx-clipboard';
 import { TooltipPosition } from '@angular/material/tooltip';
 import { TranslateService } from '@ngx-translate/core';
 import { ThemePalette } from '@angular/material/core';
-import { coerceBoolean } from '@shared/decorators/coerce-boolean';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
   selector: 'tb-copy-button',

ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.ts

@@ -39,7 +39,7 @@ import { EntityService } from '@core/http/entity.service';
 import { getCurrentAuthUser } from '@core/auth/auth.selectors';
 import { Authority } from '@shared/models/authority.enum';
 import { isEqual } from '@core/utils';
-import { coerceBoolean } from '@shared/decorators/coerce-boolean';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
   selector: 'tb-entity-autocomplete',

ui-ngx/src/app/shared/components/entity/entity-type-list.component.ts

@@ -27,7 +27,7 @@ import { MatAutocomplete } from '@angular/material/autocomplete';
 import { MatChipGrid } from '@angular/material/chips';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { SubscriptSizing } from '@angular/material/form-field';
-import { coerceBoolean } from '@shared/decorators/coerce-boolean';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 interface EntityTypeInfo {
   name: string;

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

@@ -39,7 +39,7 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { SHARED_MODULE_TOKEN } from '@shared/components/tokens';
 import { deepClone, guid, isDefinedAndNotNull } from '@core/utils';
 import { Observable, of, ReplaySubject } from 'rxjs';
-import { coerceBoolean } from '@shared/decorators/coerce-boolean';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 let defaultMarkdownStyle;
 

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

@@ -29,7 +29,7 @@ import { alarmSeverityTranslations } from '@shared/models/alarm.models';
 import tinycolor from 'tinycolor2';
 import { StateObject } from '@core/api/widget-api.models';
 import { objToBase64URI } from '@core/utils';
-import { coerceBoolean } from '@shared/decorators/coerce-boolean';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
   selector: 'tb-notification',

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

@@ -40,7 +40,7 @@ import {
 } from '@home/pages/notification/template/template-notification-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
 import { MatButton } from '@angular/material/button';
-import { coerceBoolean } from '@shared/decorators/coerce-boolean';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
   selector: 'tb-template-autocomplete',

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

@@ -58,7 +58,7 @@ import {
 import { distinctUntilChanged, take, takeUntil } from 'rxjs/operators';
 import { isNotEmptyStr, onParentScrollOrWindowResize } from '@core/utils';
 import { animate, AnimationBuilder, AnimationMetadata, style } from '@angular/animations';
-import { coerceBoolean } from '@shared/decorators/coerce-boolean';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 export type TbPopoverTrigger = 'click' | 'focus' | 'hover' | null;
 

ui-ngx/src/app/shared/components/string-items-list.component.ts

@@ -19,7 +19,7 @@ import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Valida
 import { MatChipInputEvent } from '@angular/material/chips';
 import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes';
 import { FloatLabelType, MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
-import { coerceBoolean } from '@shared/decorators/coerce-boolean';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
   selector: 'tb-string-items-list',

ui-ngx/src/app/shared/components/time/timeinterval.component.ts

@@ -19,7 +19,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { TimeInterval, TimeService } from '@core/services/time.service';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
 import { SubscriptSizing } from '@angular/material/form-field';
-import { coerceBoolean } from '@shared/decorators/coerce-boolean';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
   selector: 'tb-timeinterval',

ui-ngx/src/app/shared/components/time/timewindow.component.ts

@@ -53,7 +53,7 @@ import { deepClone, isDefinedAndNotNull } from '@core/utils';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
-import { coerceBoolean } from '@shared/decorators/coerce-boolean';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 // @dynamic
 @Component({

ui-ngx/src/app/shared/decorators/coercion.ts

@@ -0,0 +1,108 @@
+///
+/// Copyright © 2016-2023 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import {
+  coerceArray as coerceArrayAngular,
+  coerceBooleanProperty,
+  coerceCssPixelValue as coerceCssPixelValueAngular,
+  coerceNumberProperty,
+  coerceStringArray as coerceStringArrayAngular
+} from '@angular/cdk/coercion';
+
+export const coerceBoolean = () => (target: any, key: string): void => {
+  const getter = function() {
+    return this['__' + key];
+  };
+
+  const setter = function(next: any) {
+    this['__' + key] = coerceBooleanProperty(next);
+  };
+
+  Object.defineProperty(target, key, {
+    get: getter,
+    set: setter,
+    enumerable: true,
+    configurable: true,
+  });
+};
+
+export const coerceNumber = () => (target: any, key: string): void => {
+  const getter = function(): number {
+    return this['__' + key];
+  };
+
+  const setter = function(next: any) {
+    this['__' + key] = coerceNumberProperty(next);
+  };
+
+  Object.defineProperty(target, key, {
+    get: getter,
+    set: setter,
+    enumerable: true,
+    configurable: true,
+  });
+};
+
+export const coerceCssPixelValue = () => (target: any, key: string): void => {
+  const getter = function(): string {
+    return this['__' + key];
+  };
+
+  const setter = function(next: any) {
+    this['__' + key] = coerceCssPixelValueAngular(next);
+  };
+
+  Object.defineProperty(target, key, {
+    get: getter,
+    set: setter,
+    enumerable: true,
+    configurable: true,
+  });
+};
+
+export const coerceArray = () => (target: any, key: string): void => {
+  const getter = function(): any[] {
+    return this['__' + key];
+  };
+
+  const setter = function(next: any) {
+    this['__' + key] = coerceArrayAngular(next);
+  };
+
+  Object.defineProperty(target, key, {
+    get: getter,
+    set: setter,
+    enumerable: true,
+    configurable: true,
+  });
+};
+
+export const coerceStringArray = (separator?: string | RegExp) => (target: any, key: string): void => {
+  const getter = function(): string[] {
+    return this['__' + key];
+  };
+
+  const setter = function(next: any) {
+    this['__' + key] = coerceStringArrayAngular(next, separator);
+  };
+
+  Object.defineProperty(target, key, {
+    get: getter,
+    set: setter,
+    enumerable: true,
+    configurable: true,
+  });
+};

ui-ngx/src/app/shared/decorators/coerce-boolean.ts → ui-ngx/src/app/shared/decorators/public-api.ts

@@ -14,21 +14,6 @@
 /// limitations under the License.
 ///
 
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
+export * from './coercion';
-
+export * from './enumerable';
-export const coerceBoolean = () => (target: any, key: string): void => {
+export * from './tb-inject';
-  const getter = function() {
-    return this['__' + key];
-  };
-
-  const setter = function(next: any) {
-    this['__' + key] = coerceBooleanProperty(next);
-  };
-
-  Object.defineProperty(target, key, {
-    get: getter,
-    set: setter,
-    enumerable: true,
-    configurable: true,
-  });
-};

ui-ngx/src/app/shared/public-api.ts

@@ -15,6 +15,7 @@
 ///
 
 export * from './components/public-api';
+export * from './decorators/public-api';
 export * from './models/public-api';
 export * from './pipe/public-api';
 export * from './shared.module';