Browse Source

Angular 20 migration

pull/14914/head
Igor Kulikov 4 months ago
parent
commit
6da4b7f498
  1. 17
      ui-ngx/.browserslistrc
  2. 5
      ui-ngx/.postcssrc.json
  3. 5
      ui-ngx/angular.json
  4. 12
      ui-ngx/package.json
  5. 15
      ui-ngx/patches/echarts+5.5.1-TB.patch
  6. 4
      ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.ts
  7. 4
      ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
  8. 3
      ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts
  9. 3
      ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.ts
  10. 3
      ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts
  11. 4
      ui-ngx/src/app/modules/home/components/notification/notification-bell.component.ts
  12. 8
      ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.ts
  13. 4
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings.component.ts
  14. 4
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axis-row.component.ts
  15. 8
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-select.component.ts
  16. 6
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-property-row.component.ts
  17. 2
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-keys.component.ts
  18. 4
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-row.component.ts
  19. 4
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-layer-row.component.ts
  20. 6
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-tooltip-tag-actions.component.ts
  21. 4
      ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app.component.ts
  22. 4
      ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/mobile-page-item-row.component.ts
  23. 6
      ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component.ts
  24. 9
      ui-ngx/src/app/shared/components/fab-toolbar.component.ts
  25. 4
      ui-ngx/src/app/shared/components/file-input.component.ts
  26. 34
      ui-ngx/src/app/shared/components/icon.component.ts
  27. 4
      ui-ngx/src/app/shared/components/image-input.component.ts
  28. 42
      ui-ngx/src/app/shared/components/marked-options.service.ts
  29. 6
      ui-ngx/src/app/shared/components/multiple-image-input.component.ts
  30. 3
      ui-ngx/src/app/shared/components/time/datetime.component.ts
  31. 4
      ui-ngx/src/styles.scss
  32. 2
      ui-ngx/tsconfig.json
  33. 706
      ui-ngx/yarn.lock

17
ui-ngx/.browserslistrc

@ -2,18 +2,17 @@
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
# For the full list of supported browsers by the Angular framework, please see:
# For Angular's browser support policy, please see:
# https://angular.dev/reference/versions#browser-support
# You can see what browsers were selected by your queries by running:
# npx browserslist
>0.5%
not dead
last 2 Chrome versions
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
last 2 Android major versions
Chrome >= 107
ChromeAndroid >= 107
Edge >= 107
Firefox >= 104
FirefoxAndroid >= 104
Safari >= 16
iOS >= 16
Firefox ESR

5
ui-ngx/.postcssrc.json

@ -0,0 +1,5 @@
{
"plugins": {
"@tailwindcss/postcss": {}
}
}

5
ui-ngx/angular.json

@ -114,7 +114,10 @@
"stylePreprocessorOptions": {
"includePaths": [
"src/scss"
]
],
"sass": {
"silenceDeprecations": ["mixed-decls", "color-functions", "global-builtin", "import"]
}
},
"scripts": [
"node_modules/tinycolor2/dist/tinycolor-min.js",

12
ui-ngx/package.json

@ -36,7 +36,7 @@
"@ngrx/store-devtools": "^20.1.0",
"@ngx-translate/core": "^17.0.0",
"@svgdotjs/svg.filter.js": "^3.0.9",
"@svgdotjs/svg.js": "^3.2.5",
"@svgdotjs/svg.js": "3.2.4",
"@svgdotjs/svg.panzoom.js": "^2.1.2",
"@tinymce/tinymce-angular": "^8.0.1",
"ace-builds": "1.43.6",
@ -64,7 +64,7 @@
"leaflet.gridlayer.googlemutant": "0.15.0",
"leaflet.markercluster": "1.5.3",
"libphonenumber-js": "^1.12.35",
"maplibre-gl": "^5.16.0",
"maplibre-gl": "5.2.0",
"marked": "~16.4.2",
"moment": "^2.30.1",
"moment-timezone": "^0.6.0",
@ -101,13 +101,14 @@
"@angular/cli": "20.3.15",
"@angular/compiler-cli": "20.3.16",
"@angular/language-service": "20.3.16",
"@tailwindcss/postcss": "^4.1.18",
"@types/ace-diff": "^2.1.4",
"@types/canvas-gauges": "^2.1.8",
"@types/flot": "^0.0.36",
"@types/flowjs": "^2.13.14",
"@types/jquery": "^3.5.33",
"@types/js-beautify": "^1.14.3",
"@types/leaflet": "1.9.20",
"@types/leaflet": "1.9.14",
"@types/leaflet-polylinedecorator": "1.6.4",
"@types/leaflet-providers": "1.2.4",
"@types/leaflet.gridlayer.googlemutant": "0.4.9",
@ -130,13 +131,14 @@
"patch-package": "^8.0.1",
"postcss": "^8.5.6",
"postinstall-prepare": "^2.0.0",
"tailwindcss": "^3.4.15",
"tailwindcss": "^4.1.18",
"ts-node": "^10.9.2",
"typescript": "~5.9.3",
"typescript-eslint": "^8.53.1"
},
"resolutions": {
"ace-builds": "1.43.6",
"tinymce": "6.8.6"
"tinymce": "6.8.6",
"@babel/core": "7.28.3"
}
}

15
ui-ngx/patches/echarts+5.5.1-TB.patch

@ -0,0 +1,15 @@
diff --git a/node_modules/echarts/index.d.ts b/node_modules/echarts/index.d.ts
index 811908a..5f77c60 100644
--- a/node_modules/echarts/index.d.ts
+++ b/node_modules/echarts/index.d.ts
@@ -17,7 +17,7 @@
* under the License.
*/
-import * as echarts from './types/dist/echarts';
+// import * as echarts from './types/dist/echarts';
// Export for UMD module.
export as namespace echarts;
-export = echarts;
\ No newline at end of file
+export * from './types/dist/echarts';

4
ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.ts

@ -44,7 +44,7 @@ import {
CalculatedFieldType,
} from '@shared/models/calculated-field.models';
import { CalculatedFieldArgumentPanelComponent } from '@home/components/calculated-fields/components/public-api';
import { MatButton } from '@angular/material/button';
import { MatIconButton } from '@angular/material/button';
import { TbPopoverService } from '@shared/components/popover.service';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { EntityId } from '@shared/models/id/entity-id';
@ -154,7 +154,7 @@ export class CalculatedFieldArgumentsTableComponent implements ControlValueAcces
this.argumentsFormArray.markAsDirty();
}
manageArgument($event: Event, matButton: MatButton, argument = {} as CalculatedFieldArgumentValue): void {
manageArgument($event: Event, matButton: MatIconButton, argument = {} as CalculatedFieldArgumentValue): void {
$event?.stopPropagation();
if (this.popoverComponent && !this.popoverComponent.tbHidden) {
this.popoverComponent.hide();

4
ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts

@ -146,7 +146,7 @@ import { SafeUrl } from '@angular/platform-browser';
import cssjs from '@core/css/css';
import { IAliasController } from '@core/api/widget-api.models';
import { MatButton } from '@angular/material/button';
import { MatButton, MatIconButton } from '@angular/material/button';
import { VersionControlComponent } from '@home/components/vc/version-control.component';
import { TbPopoverService } from '@shared/components/popover.service';
import { catchError, distinctUntilChanged, map, skip, tap } from 'rxjs/operators';
@ -1754,7 +1754,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
});
}
toggleVersionControl($event: Event, versionControlButton: MatButton) {
toggleVersionControl($event: Event, versionControlButton: MatButton | MatIconButton) {
if ($event) {
$event.stopPropagation();
}

3
ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts

@ -28,7 +28,6 @@ import { IAliasController, IStateController } from '@core/api/widget-api.models'
import { ILayoutController } from './layout/layout.models';
import { DashboardContextMenuItem, WidgetContextMenuItem } from '@home/models/dashboard-component.models';
import { BehaviorSubject, Observable } from 'rxjs';
import { displayGrids } from 'angular-gridster2/lib/gridsterConfig.interface';
import { ElementRef } from '@angular/core';
export declare type DashboardPageScope = 'tenant' | 'customer';
@ -87,7 +86,7 @@ export interface DashboardPageLayoutContext {
ctrl: ILayoutController;
dashboardCtrl: IDashboardController;
ignoreLoading: boolean;
displayGrid: displayGrids;
displayGrid: 'always' | 'onDrag&Resize' | 'none';
}
export interface DashboardPageLayout {

3
ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.ts

@ -36,7 +36,6 @@ import { TbCheatSheetComponent } from '@shared/components/cheatsheet.component';
import { TbPopoverComponent } from '@shared/components/popover.component';
import { ImagePipe } from '@shared/pipe/image.pipe';
import { map } from 'rxjs/operators';
import { displayGrids } from 'angular-gridster2/lib/gridsterConfig.interface';
import { BreakpointId, LayoutType, ViewFormatType } from '@shared/models/dashboard.models';
import { isNotEmptyStr } from '@core/utils';
import { TbContextMenuEvent } from '@shared/models/jquery-event.models';
@ -115,7 +114,7 @@ export class DashboardLayoutComponent extends PageComponent implements ILayoutCo
return this.layoutCtx.gridSettings.minColumns || this.layoutCtx.gridSettings.columns || 24;
}
get displayGrid(): displayGrids {
get displayGrid(): 'always' | 'onDrag&Resize' | 'none' {
return this.layoutCtx.displayGrid || 'onDrag&Resize';
}

3
ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts

@ -58,7 +58,6 @@ import { distinct, take } from 'rxjs/operators';
import { UtilsService } from '@core/services/utils.service';
import { WidgetComponentAction, WidgetComponentActionType } from '@home/components/widget/widget-container.component';
import { TbPopoverComponent } from '@shared/components/popover.component';
import { displayGrids } from 'angular-gridster2/lib/gridsterConfig.interface';
import { coerceBoolean } from '@shared/decorators/coercion';
import { TbContextMenuEvent } from '@shared/models/jquery-event.models';
@ -102,7 +101,7 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
outerMargin: boolean;
@Input()
displayGrid: displayGrids = 'onDrag&Resize';
displayGrid: 'always' | 'onDrag&Resize' | 'none' = 'onDrag&Resize';
@Input()
gridType: GridType;

4
ui-ngx/src/app/modules/home/components/notification/notification-bell.component.ts

@ -26,7 +26,7 @@ import {
import { NotificationWebsocketService } from '@core/ws/notification-websocket.service';
import { BehaviorSubject, ReplaySubject, Subscription } from 'rxjs';
import { distinctUntilChanged, map, share, skip, tap } from 'rxjs/operators';
import { MatButton } from '@angular/material/button';
import { MatIconButton } from '@angular/material/button';
import { TbPopoverService } from '@shared/components/popover.service';
import { ShowNotificationPopoverComponent } from '@home/components/notification/show-notification-popover.component';
import { NotificationSubscriber } from '@shared/models/telemetry/telemetry.models';
@ -74,7 +74,7 @@ export class NotificationBellComponent implements OnDestroy {
this.unsubscribeSubscription();
}
showNotification($event: Event, createVersionButton: MatButton) {
showNotification($event: Event, createVersionButton: MatIconButton) {
if ($event) {
$event.stopPropagation();
}

8
ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.ts

@ -47,7 +47,7 @@ import { BranchAutocompleteComponent } from '@shared/components/vc/branch-autoco
import { isNotEmptyStr } from '@core/utils';
import { TbPopoverService } from '@shared/components/popover.service';
import { EntityVersionCreateComponent } from '@home/components/vc/entity-version-create.component';
import { MatButton } from '@angular/material/button';
import { MatButton, MatIconButton } from '@angular/material/button';
import { EntityVersionRestoreComponent } from '@home/components/vc/entity-version-restore.component';
import { EntityVersionDiffComponent } from '@home/components/vc/entity-version-diff.component';
import { ComplexVersionCreateComponent } from '@home/components/vc/complex-version-create.component';
@ -278,7 +278,7 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
}
}
toggleShowVersionDiff($event: Event, diffVersionButton: MatButton, entityVersion: EntityVersion) {
toggleShowVersionDiff($event: Event, diffVersionButton: MatIconButton, entityVersion: EntityVersion) {
if ($event) {
$event.stopPropagation();
}
@ -308,7 +308,7 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
}
}
toggleRestoreEntityVersion($event: Event, restoreVersionButton: MatButton, entityVersion: EntityVersion) {
toggleRestoreEntityVersion($event: Event, restoreVersionButton: MatIconButton, entityVersion: EntityVersion) {
if ($event) {
$event.stopPropagation();
}
@ -342,7 +342,7 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
}
}
toggleRestoreEntitiesVersion($event: Event, restoreEntitiesVersionButton: MatButton, entityVersion: EntityVersion) {
toggleRestoreEntitiesVersion($event: Event, restoreEntitiesVersionButton: MatIconButton, entityVersion: EntityVersion) {
if ($event) {
$event.stopPropagation();
}

4
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings.component.ts

@ -16,7 +16,7 @@
import { Component, forwardRef, Input, OnInit, Renderer2, ViewContainerRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { MatButton } from '@angular/material/button';
import { MatIconButton } from '@angular/material/button';
import { TbPopoverService } from '@shared/components/popover.service';
import { deepClone } from '@core/utils';
import { coerceBoolean } from '@shared/decorators/coercion';
@ -93,7 +93,7 @@ export class TimeSeriesChartThresholdSettingsComponent implements OnInit, Contro
this.modelValue = value;
}
openThresholdSettingsPopup($event: Event, matButton: MatButton) {
openThresholdSettingsPopup($event: Event, matButton: MatIconButton) {
if ($event) {
$event.stopPropagation();
}

4
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axis-row.component.ts

@ -33,7 +33,7 @@ import {
timeSeriesAxisPositionTranslations,
TimeSeriesChartYAxisSettings
} from '@home/components/widget/lib/chart/time-series-chart.models';
import { MatButton } from '@angular/material/button';
import { MatIconButton } from '@angular/material/button';
import { TbPopoverService } from '@shared/components/popover.service';
import { coerceBoolean } from '@shared/decorators/coercion';
import {
@ -148,7 +148,7 @@ export class TimeSeriesChartYAxisRowComponent implements ControlValueAccessor, O
this.cd.markForCheck();
}
editAxis($event: Event, matButton: MatButton) {
editAxis($event: Event, matButton: MatIconButton) {
if ($event) {
$event.stopPropagation();
}

8
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-select.component.ts

@ -35,7 +35,7 @@ import {
} from '@shared/models/widget-settings.models';
import { TranslateService } from '@ngx-translate/core';
import { DatePipe } from '@angular/common';
import { MatButton } from '@angular/material/button';
import { MatIconButton } from '@angular/material/button';
import { TbPopoverService } from '@shared/components/popover.service';
import { deepClone, mergeDeep } from '@core/utils';
import {
@ -63,7 +63,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
export class DateFormatSelectComponent implements OnInit, ControlValueAccessor {
@ViewChild('customFormatButton', {static: false})
customFormatButton: MatButton;
customFormatButton: MatIconButton;
@Input()
disabled: boolean;
@ -155,7 +155,7 @@ export class DateFormatSelectComponent implements OnInit, ControlValueAccessor {
}
}
openDateFormatSettingsPopup($event: Event, matButton: MatButton) {
openDateFormatSettingsPopup($event: Event, matButton: MatIconButton) {
if ($event) {
$event.stopPropagation();
}
@ -182,7 +182,7 @@ export class DateFormatSelectComponent implements OnInit, ControlValueAccessor {
}
}
openAutoFormatSettingsPopup($event: Event, matButton: MatButton) {
openAutoFormatSettingsPopup($event: Event, matButton: MatIconButton) {
if ($event) {
$event.stopPropagation();
}

6
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-property-row.component.ts

@ -41,7 +41,7 @@ import {
Validators
} from '@angular/forms';
import { deepClone } from '@core/utils';
import { MatButton } from '@angular/material/button';
import { MatIconButton } from '@angular/material/button';
import { TbPopoverService } from '@shared/components/popover.service';
import {
defaultPropertyValue,
@ -83,7 +83,7 @@ export class DynamicFormPropertyRowComponent implements ControlValueAccessor, On
idInput: ElementRef<HTMLInputElement>;
@ViewChild('editButton')
editButton: MatButton;
editButton: MatIconButton;
formPropertyTypes = formPropertyTypes;
formPropertyTypeTranslations = formPropertyTypeTranslations;
@ -161,7 +161,7 @@ export class DynamicFormPropertyRowComponent implements ControlValueAccessor, On
this.cd.markForCheck();
}
editProperty($event: Event, matButton: MatButton, add = false, editCanceled = () => {}) {
editProperty($event: Event, matButton: MatIconButton, add = false, editCanceled = () => {}) {
if ($event) {
$event.stopPropagation();
}

2
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-keys.component.ts

@ -64,7 +64,7 @@ import {
import { deepClone, guid, isDefinedAndNotNull, isObject, isUndefined } from '@core/utils';
import { Dashboard } from '@shared/models/dashboard.models';
import { AggregationType } from '@shared/models/time/time.models';
import { DndDropEvent } from 'ngx-drag-drop/lib/dnd-dropzone.directive';
import { DndDropEvent } from 'ngx-drag-drop';
import { moveItemInArray } from '@angular/cdk/drag-drop';
import { coerceBoolean } from '@shared/decorators/coercion';
import { ColorPickerPanelComponent } from '@shared/components/color-picker/color-picker-panel.component';

4
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-row.component.ts

@ -32,7 +32,7 @@ import {
UntypedFormGroup,
Validators
} from '@angular/forms';
import { MatButton } from '@angular/material/button';
import { MatIconButton } from '@angular/material/button';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import {
CirclesDataLayerSettings,
@ -244,7 +244,7 @@ export class MapDataLayerRowComponent implements ControlValueAccessor, OnInit {
);
}
editDataLayer($event: Event, matButton: MatButton) {
editDataLayer($event: Event, matButton: MatIconButton) {
if ($event) {
$event.stopPropagation();
}

4
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-layer-row.component.ts

@ -34,7 +34,7 @@ import {
UntypedFormGroup,
Validators
} from '@angular/forms';
import { MatButton } from '@angular/material/button';
import { MatIconButton } from '@angular/material/button';
import { TbPopoverService } from '@shared/components/popover.service';
import { TranslateService } from '@ngx-translate/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@ -173,7 +173,7 @@ export class MapLayerRowComponent implements ControlValueAccessor, OnInit {
return this.translate.instant(translationKey);
}
editLayer($event: Event, matButton: MatButton) {
editLayer($event: Event, matButton: MatIconButton) {
if ($event) {
$event.stopPropagation();
}

6
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-tooltip-tag-actions.component.ts

@ -32,7 +32,7 @@ import { MapSettingsContext } from '@home/components/widget/lib/settings/common/
import {
WidgetActionSettingsPanelComponent
} from '@home/components/widget/lib/settings/common/action/widget-action-settings-panel.component';
import { MatButton } from '@angular/material/button';
import { MatIconButton } from '@angular/material/button';
import { TranslateService } from '@ngx-translate/core';
import { deepClone } from '@core/utils';
@ -109,7 +109,7 @@ export class MapTooltipTagActionsComponent implements ControlValueAccessor, OnIn
}
}
addAction($event: Event, matButton: MatButton): void {
addAction($event: Event, matButton: MatIconButton): void {
if ($event) {
$event.stopPropagation();
}
@ -128,7 +128,7 @@ export class MapTooltipTagActionsComponent implements ControlValueAccessor, OnIn
});
}
editAction($event: Event, matButton: MatButton, index: number): void {
editAction($event: Event, matButton: MatIconButton, index: number): void {
if ($event) {
$event.stopPropagation();
}

4
ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app.component.ts

@ -26,7 +26,7 @@ import { EntityType } from '@shared/models/entity-type.models';
import { MobileApp, MobileAppStatus, mobileAppStatusTranslations } from '@shared/models/mobile-app.models';
import { PlatformType, platformTypeTranslations } from '@shared/models/oauth2.models';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { MatButton } from '@angular/material/button';
import { MatIconButton } from '@angular/material/button';
import { TbPopoverService } from '@shared/components/popover.service';
import { EditorPanelComponent } from '@home/pages/mobile/common/editor-panel.component';
@ -153,7 +153,7 @@ export class MobileAppComponent extends EntityComponent<MobileApp> {
this.entityForm.get('appSecret').markAsDirty();
}
editReleaseNote($event: Event, matButton: MatButton, isLatest: boolean) {
editReleaseNote($event: Event, matButton: MatIconButton, isLatest: boolean) {
if ($event) {
$event.stopPropagation();
}

4
ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/mobile-page-item-row.component.ts

@ -49,7 +49,7 @@ import {
mobilePageTypeTranslations
} from '@shared/models/mobile-app.models';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { MatButton } from '@angular/material/button';
import { MatIconButton } from '@angular/material/button';
import { deepClone } from '@core/utils';
import { TbPopoverService } from '@shared/components/popover.service';
import { CustomMobilePagePanelComponent } from '@home/pages/mobile/bundes/layout/custom-mobile-page-panel.component';
@ -216,7 +216,7 @@ export class MobilePageItemRowComponent implements ControlValueAccessor, OnInit,
this.pageRemoved.emit();
}
edit($event: Event, matButton: MatButton) {
edit($event: Event, matButton: MatIconButton) {
if ($event) {
$event.stopPropagation();
}

6
ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component.ts

@ -47,7 +47,7 @@ import {
scadaSymbolBehaviorTypeTranslations, updateBehaviorDefaultSettings
} from '@home/components/widget/lib/scada/scada-symbol.models';
import { deepClone, isUndefinedOrNull } from '@core/utils';
import { MatButton } from '@angular/material/button';
import { MatIconButton } from '@angular/material/button';
import { TbPopoverService } from '@shared/components/popover.service';
import {
ScadaSymbolBehaviorPanelComponent
@ -115,7 +115,7 @@ export class ScadaSymbolBehaviorRowComponent implements ControlValueAccessor, On
idInput: ElementRef<HTMLInputElement>;
@ViewChild('editButton')
editButton: MatButton;
editButton: MatIconButton;
scadaSymbolBehaviorTypes = scadaSymbolBehaviorTypes;
scadaSymbolBehaviorTypeTranslations = scadaSymbolBehaviorTypeTranslations;
@ -196,7 +196,7 @@ export class ScadaSymbolBehaviorRowComponent implements ControlValueAccessor, On
this.cd.markForCheck();
}
editBehavior($event: Event, matButton: MatButton, add = false, editCanceled = () => {}) {
editBehavior($event: Event, matButton: MatIconButton, add = false, editCanceled = () => {}) {
if ($event) {
$event.stopPropagation();
}

9
ui-ngx/src/app/shared/components/fab-toolbar.component.ts

@ -28,15 +28,15 @@ import {
ViewEncapsulation
} from '@angular/core';
import { WINDOW } from '@core/services/window.service';
import { _Constructor, CanColor, mixinColor, ThemePalette } from '@angular/material/core';
import { ThemePalette } from '@angular/material/core';
export declare type FabToolbarDirection = 'left' | 'right';
class MatFabToolbarBase {
// eslint-disable-next-line @typescript-eslint/naming-convention, no-underscore-dangle, id-blacklist, id-match
constructor(public _elementRef: ElementRef) {}
}
const MatFabToolbarMixinBase: _Constructor<CanColor> & typeof MatFabToolbarBase = mixinColor(MatFabToolbarBase);
@Directive({
// eslint-disable-next-line @angular-eslint/directive-selector
@ -77,7 +77,7 @@ export class FabActionsDirective implements OnInit {
encapsulation: ViewEncapsulation.None,
standalone: false
})
export class FabToolbarComponent extends MatFabToolbarMixinBase implements OnInit, OnDestroy, AfterViewInit, OnChanges {
export class FabToolbarComponent extends MatFabToolbarBase implements OnInit, OnDestroy, AfterViewInit, OnChanges {
private fabToolbarResize$: ResizeObserver;
@ -90,6 +90,9 @@ export class FabToolbarComponent extends MatFabToolbarMixinBase implements OnIni
@Input()
color: ThemePalette;
@Input()
defaultColor: ThemePalette | undefined;
constructor(private el: ElementRef<HTMLElement>,
@Inject(WINDOW) private window: Window) {
super(el);

4
ui-ngx/src/app/shared/components/file-input.component.ts

@ -32,7 +32,7 @@ import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { Subscription } from 'rxjs';
import { FlowDirective } from '@flowjs/ngx-flow';
import { FlowConfig } from '@flowjs/ngx-flow';
import { TranslateService } from '@ngx-translate/core';
import { UtilsService } from '@core/services/utils.service';
import { DialogService } from '@core/services/dialog.service';
@ -140,7 +140,7 @@ export class FileInputComponent extends PageComponent implements AfterViewInit,
mediaType: string;
@ViewChild('flow', {static: true})
flow: FlowDirective;
flow: FlowConfig;
@ViewChild('flowInput', {static: true})
flowInput: ElementRef;

34
ui-ngx/src/app/shared/components/icon.component.ts

@ -14,15 +14,15 @@
/// limitations under the License.
///
import { CanColor, mixinColor } from '@angular/material/core';
import { ThemePalette } from '@angular/material/core';
import {
AfterContentInit,
AfterViewChecked,
ChangeDetectionStrategy,
Component,
ElementRef,
ErrorHandler,
Inject,
ErrorHandler, inject,
Inject, Input,
OnDestroy,
Renderer2,
ViewChild,
@ -34,12 +34,6 @@ import { take } from 'rxjs/operators';
import { isSvgIcon, splitIconName } from '@shared/models/icon.models';
import { ContentObserver } from '@angular/cdk/observers';
const _TbIconBase = mixinColor(
class {
constructor(public _elementRef: ElementRef) {}
},
);
const funcIriAttributes = [
'clip-path',
'color-profile',
@ -64,8 +58,6 @@ const funcIriPattern = /^url\(['"]?#(.*?)['"]?\)$/;
selector: 'tb-icon',
exportAs: 'tbIcon',
styleUrls: [],
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['color'],
// eslint-disable-next-line @angular-eslint/no-host-metadata-property
host: {
role: 'img',
@ -79,12 +71,24 @@ const funcIriPattern = /^url\(['"]?#(.*?)['"]?\)$/;
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: false
})
export class TbIconComponent extends _TbIconBase
implements AfterContentInit, AfterViewChecked, CanColor, OnDestroy {
export class TbIconComponent implements AfterContentInit, AfterViewChecked, OnDestroy {
@ViewChild('iconNameContent', {static: true})
_iconNameContent: ElementRef;
readonly _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
private _defaultColor: ThemePalette;
@Input()
get color() {
return this._color || this._defaultColor;
}
set color(value: string | null | undefined) {
this._color = value;
}
private _color: string | null | undefined;
private icon: string;
get viewValue(): string {
@ -106,13 +110,11 @@ export class TbIconComponent extends _TbIconBase
private _currentIconFetch = Subscription.EMPTY;
constructor(elementRef: ElementRef<HTMLElement>,
private contentObserver: ContentObserver,
constructor(private contentObserver: ContentObserver,
private renderer: Renderer2,
private _iconRegistry: MatIconRegistry,
@Inject(MAT_ICON_LOCATION) private _location: MatIconLocation,
private readonly _errorHandler: ErrorHandler) {
super(elementRef);
}
ngAfterContentInit(): void {

4
ui-ngx/src/app/shared/components/image-input.component.ts

@ -30,7 +30,7 @@ import { AppState } from '@core/core.state';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, } from '@angular/forms';
import { Subscription } from 'rxjs';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { FlowDirective } from '@flowjs/ngx-flow';
import { FlowConfig } from '@flowjs/ngx-flow';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import { UtilsService } from '@core/services/utils.service';
import { DialogService } from '@core/services/dialog.service';
@ -116,7 +116,7 @@ export class ImageInputComponent extends PageComponent implements AfterViewInit,
safeImageUrl: SafeUrl;
@ViewChild('flow', {static: true})
flow: FlowDirective;
flow: FlowConfig;
autoUploadSubscription: Subscription;

42
ui-ngx/src/app/shared/components/marked-options.service.ts

@ -70,47 +70,47 @@ export class MarkedOptionsService implements MarkedOptions {
}
};
marked.use({tokenizer});
this.renderer.code = (code: string, language: string | undefined, isEscaped: boolean) => {
const codeContext = processCode(code);
this.renderer.code = (code: Tokens.Code) => {
const codeContext = processCode(code.text);
code.text = codeContext.code;
if (codeContext.copyCode) {
const content = postProcessCodeContent(this.renderer2.code(codeContext.code, language, isEscaped), codeContext);
const content = postProcessCodeContent(this.renderer2.code(code), codeContext);
this.id++;
return this.wrapCopyCode(this.id, content, codeContext);
} else {
return this.wrapDiv(postProcessCodeContent(this.renderer2.code(codeContext.code, language, isEscaped), codeContext));
return this.wrapDiv(postProcessCodeContent(this.renderer2.code(code), codeContext));
}
};
this.renderer.table = (header: string, body: string) => {
this.renderer.table = (token: Tokens.Table) => {
let autoLayout = false;
if (header.includes(autoBlock)) {
autoLayout = true;
header = header.replace(autoBlock, '');
for (const h of token.header) {
if (h.text.includes(autoBlock)) {
autoLayout = true;
h.text = h.text.replace(autoBlock, '');
}
}
let table = this.renderer2.table(header, body);
let table = this.renderer2.table(token);
if (autoLayout) {
table = table.replace('<table', '<table class="auto"');
}
return table;
};
this.renderer.tablecell = (content: string, flags: {
header: boolean;
align: 'center' | 'left' | 'right' | null;
}) => {
const codeContext = processCode(content);
this.renderer.tablecell = (token: Tokens.TableCell) => {
const codeContext = processCode(token.text);
codeContext.multiline = false;
if (codeContext.copyCode) {
this.id++;
content = this.wrapCopyCode(this.id, codeContext.code, codeContext);
token.text = this.wrapCopyCode(this.id, codeContext.code, codeContext);
}
return this.renderer2.tablecell(content, flags);
return this.renderer2.tablecell(token);
};
this.renderer.link = (href: string | null, title: string | null, text: string) => {
if (text.endsWith(targetBlankBlock)) {
text = text.substring(0, text.length - targetBlankBlock.length);
const content = this.renderer2.link(href, title, text);
this.renderer.link = (token: Tokens.Link) => {
if (token.text.endsWith(targetBlankBlock)) {
token.text = token.text.substring(0, token.text.length - targetBlankBlock.length);
const content = this.renderer2.link(token);
return content.replace('<a href=', '<a target="_blank" href=');
} else {
return this.renderer2.link(href, title, text);
return this.renderer2.link(token);
}
};
this.document.addEventListener('selectionchange', this.onSelectionChange.bind(this));

6
ui-ngx/src/app/shared/components/multiple-image-input.component.ts

@ -21,7 +21,7 @@ import { AppState } from '@core/core.state';
import { ControlValueAccessor, FormArray, NG_VALUE_ACCESSOR, } from '@angular/forms';
import { Subscription } from 'rxjs';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { DropDirective, FlowDirective } from '@flowjs/ngx-flow';
import { FlowConfig, FlowDrop } from '@flowjs/ngx-flow';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import { UtilsService } from '@core/services/utils.service';
import { DialogService } from '@core/services/dialog.service';
@ -78,10 +78,10 @@ export class MultipleImageInputComponent extends PageComponent implements AfterV
dragIndex: number;
@ViewChild('flow', {static: true})
flow: FlowDirective;
flow: FlowConfig;
@ViewChild('flowDrop', {static: true})
flowDrop: DropDirective;
flowDrop: FlowDrop;
autoUploadSubscription: Subscription;

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

@ -18,7 +18,6 @@ import { Component, forwardRef, Input, OnInit } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { FloatLabelType, MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
import { MatDatetimepickerType } from '@mat-datetimepicker/core/datetimepicker/datetimepicker-type';
import { coerceBoolean } from '@shared/decorators/coercion';
@Component({
@ -55,7 +54,7 @@ export class DatetimeComponent implements OnInit, ControlValueAccessor {
appearance: MatFormFieldAppearance = 'fill';
@Input()
type: MatDatetimepickerType = 'datetime';
type: 'date' | 'time' | 'month' | 'year' | 'datetime' = 'datetime';
@Input()
disabled: boolean;

4
ui-ngx/src/styles.scss

@ -1311,6 +1311,4 @@ pre.tb-highlight {
* TAILWIND CSS
***************/
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "tailwindcss";

2
ui-ngx/tsconfig.json

@ -9,7 +9,7 @@
"esModuleInterop": true,
"declaration": false,
"experimentalDecorators": true,
"moduleResolution": "bundler",
"moduleResolution": "node",
"importHelpers": true,
"target": "ES2022",
"module": "es2020",

706
ui-ngx/yarn.lock

File diff suppressed because it is too large
Loading…
Cancel
Save