tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Angular 20 migration

pull/14963/head
Igor Kulikov 3 days ago
parent
27da9e26fa
commit
ffe6ba0264
40 changed files with 125 additions and 132 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      ui-ngx/package.json
  2. 2
      ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition.component.scss
  3. 2
      ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-predicate.component.html
  4. 2
      ui-ngx/src/app/modules/home/components/api-key/edit-api-key-description-panel.component.scss
  5. 4
      ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.scss
  6. 2
      ui-ngx/src/app/modules/home/components/calculated-fields/components/output/calculated-field-output.component.html
  7. 10
      ui-ngx/src/app/modules/home/components/github-badge/github-badge.component.scss
  8. 4
      ui-ngx/src/app/modules/home/components/rule-node/enrichment/get-telemetry-from-database-config.component.scss
  9. 16
      ui-ngx/src/app/modules/home/components/widget/lib/cards/api-usage-widget.component.scss
  10. 8
      ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.scss
  11. 2
      ui-ngx/src/app/modules/home/components/widget/lib/maps/map.scss
  12. 4
      ui-ngx/src/app/modules/home/components/widget/lib/maps/panels/map-timeline-panel.component.scss
  13. 2
      ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
  14. 24
      ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.scss
  15. 6
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-keys.component.scss
  16. 2
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-color-settings-panel.component.scss
  17. 2
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.scss
  18. 14
      ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts
  19. 2
      ui-ngx/src/app/modules/home/components/widget/lib/table-widget.scss
  20. 16
      ui-ngx/src/app/modules/home/components/widget/widget.component.ts
  21. 2
      ui-ngx/src/app/modules/home/pages/mobile/applications/remove-app-dialog.component.scss
  22. 2
      ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/custom-mobile-page.component.scss
  23. 2
      ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/default-mobile-page-panel.component.scss
  24. 2
      ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-dialog.component.scss
  25. 4
      ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
  26. 6
      ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.scss
  27. 4
      ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss
  28. 2
      ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.scss
  29. 2
      ui-ngx/src/app/modules/login/pages/login/force-two-factor-auth-login.component.scss
  30. 2
      ui-ngx/src/app/modules/login/pages/login/link-expired.component.scss
  31. 8
      ui-ngx/src/app/modules/login/pages/login/login.component.scss
  32. 2
      ui-ngx/src/app/modules/login/pages/login/password.component.scss
  33. 2
      ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.scss
  34. 2
      ui-ngx/src/app/shared/components/script-lang.component.scss
  35. 6
      ui-ngx/src/app/shared/components/string-pattern-autocomplete.component.scss
  36. 2
      ui-ngx/src/app/shared/components/time/timewindow-panel.component.scss
  37. 22
      ui-ngx/src/form.scss
  38. 18
      ui-ngx/src/styles.scss
  39. 2
      ui-ngx/src/theme-overwrites.scss
  40. 35
      ui-ngx/yarn.lock

6
ui-ngx/package.json
View File

@ -14,12 +14,12 @@
"private": true,
"dependencies": {
"@angular/animations": "20.3.16",
"@angular/cdk": "19.2.19",
"@angular/cdk": "20.2.14",
"@angular/common": "20.3.16",
"@angular/compiler": "20.3.16",
"@angular/core": "20.3.16",
"@angular/forms": "20.3.16",
"@angular/material": "19.2.19",
"@angular/material": "20.2.14",
"@angular/platform-browser": "20.3.16",
"@angular/platform-browser-dynamic": "20.3.16",
"@angular/router": "20.3.16",
@ -28,7 +28,7 @@
"@flowjs/ngx-flow": "20.0.2",
"@geoman-io/leaflet-geoman-free": "2.18.3",
"@iplab/ngx-color-picker": "^20.0.0",
"@mat-datetimepicker/core": "~15.0.2",
"@mat-datetimepicker/core": "~16.0.1",
"@mdi/svg": "^7.4.47",
"@messageformat/core": "^3.4.0",
"@ngrx/effects": "^20.1.0",

2
ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition.component.scss
View File

@ -21,7 +21,7 @@
display: flex;
flex: 1;
&-button {
--mat-outlined-button-horizontal-padding: 3px 0px 12px;
--mat-button-outlined-horizontal-padding: 3px 0px 12px;
display: block;
width: 100%;
}

2
ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-predicate.component.html
View File

@ -58,7 +58,7 @@
}
@case (filterPredicateType.COMPLEX) {
<div class="tb-form-row no-border no-padding flex-1">
<button type="button" style="--mat-outlined-button-horizontal-padding: 3px 0px 12px;"
<button type="button" style="--mat-button-outlined-horizontal-padding: 3px 0px 12px;"
class="block w-full"
mat-stroked-button [color]="predicateValid ? 'primary' : 'warn'"
(click)="openComplexFilterDialog()">

2
ui-ngx/src/app/modules/home/components/api-key/edit-api-key-description-panel.component.scss
View File

@ -15,7 +15,7 @@
*/
.tb-edit-api-key-description-panel {
--mdc-outlined-text-field-outline-color: rgba(0,0,0,0.12);
--mat-form-field-outlined-outline-color: rgba(0,0,0,0.12);
width: 400px;
max-width: 90vw;

4
ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.scss
View File

@ -18,8 +18,8 @@
max-width: 100%;
display: grid;
grid-template-rows: min-content minmax(auto, 1fr) min-content;
--mdc-outlined-text-field-outline-color: rgba(0,0,0,0.12);
--mdc-outlined-text-field-container-shape: 6px;
--mat-form-field-outlined-outline-color: rgba(0,0,0,0.12);
--mat-form-field-outlined-container-shape: 6px;
--mat-form-field-trailing-icon-color: rgba(0, 0, 0, 0.56);
}

2
ui-ngx/src/app/modules/home/components/calculated-fields/components/output/calculated-field-output.component.html
View File

@ -80,7 +80,7 @@
<mat-expansion-panel-header class="flex flex-row flex-wrap">
<mat-panel-title>
<div class="flex flex-1 flex-row items-center justify-between xs:flex-col xs:items-start xs:gap-3">
<div class="tb-form-panel-title" [style.color]="disabled ? 'var(--mdc-outlined-text-field-disabled-input-text-color)' : 'var(--mat-expansion-header-text-color)'" tb-hint-tooltip-icon="{{ 'calculated-fields.output-strategy.hint.strategy' | translate }}">
<div class="tb-form-panel-title" [style.color]="disabled ? 'var(--mat-form-field-outlined-disabled-input-text-color)' : 'var(--mat-expansion-header-text-color)'" tb-hint-tooltip-icon="{{ 'calculated-fields.output-strategy.hint.strategy' | translate }}">
{{ 'calculated-fields.output-strategy.strategy' | translate }}
</div>
<tb-toggle-select formControlName="type" selectMediaBreakpoint="xs" disablePagination appearance="fill" (click)="$event.stopPropagation()">

10
ui-ngx/src/app/modules/home/components/github-badge/github-badge.component.scss
View File

@ -17,10 +17,10 @@
&:has(section) {
height: 100%;
}
--mat-outlined-button-horizontal-padding: 8px;
--mdc-outlined-button-container-height: 30px;
--mdc-outlined-button-label-text-size: 12px;
--mat-outlined-button-hover-state-layer-opacity: 0;
--mat-button-outlined-horizontal-padding: 8px;
--mat-button-outlined-container-height: 30px;
--mat-button-outlined-label-text-size: 12px;
--mat-button-outlined-hover-state-layer-opacity: 0;
--mat-icon-button-hover-state-layer-opacity: 0;
.group {
@ -45,6 +45,6 @@
.button-label {
height: 28px;
--mat-divider-color: var(--mdc-outlined-button-label-text-color);
--mat-divider-color: var(--mat-button-outlined-label-text-color);
}
}

4
ui-ngx/src/app/modules/home/components/rule-node/enrichment/get-telemetry-from-database-config.component.scss
View File

@ -44,10 +44,10 @@
}
&.error {
color: var(--mdc-theme-error, #f44336);
color: var(--mat-theme-error, #f44336);
.description-icon {
color: var(--mdc-theme-error, #f44336);
color: var(--mat-theme-error, #f44336);
}
}
}

16
ui-ngx/src/app/modules/home/components/widget/lib/cards/api-usage-widget.component.scss
View File

@ -50,8 +50,8 @@ $warning-color: #FAA405;
color: $enabled-color;
}
.mat-mdc-progress-bar {
--mdc-linear-progress-track-color: #{rgba($enabled-color, 0.06)};
--mdc-linear-progress-active-indicator-color: #{$enabled-color};
--mat-progress-bar-track-color: #{rgba($enabled-color, 0.06)};
--mat-progress-bar-active-indicator-color: #{$enabled-color};
}
}
&.disabled {
@ -59,8 +59,8 @@ $warning-color: #FAA405;
color: $disabled-color;
}
.mat-mdc-progress-bar {
--mdc-linear-progress-track-color: #{rgba($disabled-color, 0.06)};
--mdc-linear-progress-active-indicator-color: #{$disabled-color};
--mat-progress-bar-track-color: #{rgba($disabled-color, 0.06)};
--mat-progress-bar-active-indicator-color: #{$disabled-color};
}
}
&.warning {
@ -68,8 +68,8 @@ $warning-color: #FAA405;
color: $warning-color;
}
.mat-mdc-progress-bar {
--mdc-linear-progress-track-color: #{rgba($warning-color, 0.06)};
--mdc-linear-progress-active-indicator-color: #{$warning-color};
--mat-progress-bar-track-color: #{rgba($warning-color, 0.06)};
--mat-progress-bar-active-indicator-color: #{$warning-color};
}
}
@ -120,8 +120,8 @@ $warning-color: #FAA405;
font-size: 14px;
}
&-progress {
--mdc-linear-progress-track-height: 8px;
--mdc-linear-progress-active-indicator-height: 8px;
--mat-progress-bar-track-height: 8px;
--mat-progress-bar-active-indicator-height: 8px;
padding: 4px 0;
.mat-mdc-progress-bar {
border-radius: 6px;

8
ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.scss
View File

@ -44,16 +44,16 @@
}
.tb-usage-items-progress {
--mdc-linear-progress-track-height: 8px;
--mdc-linear-progress-active-indicator-height: 8px;
--mat-progress-bar-track-height: 8px;
--mat-progress-bar-active-indicator-height: 8px;
width: 34px;
@media #{$mat-md} {
display: none;
}
.mat-mdc-progress-bar {
&.critical {
--mdc-linear-progress-track-color: rgba(209, 39, 48, 0.06);
--mdc-linear-progress-active-indicator-color: #D12730;
--mat-progress-bar-track-color: rgba(209, 39, 48, 0.06);
--mat-progress-bar-active-indicator-color: #D12730;
}
}
.mdc-linear-progress {

2
ui-ngx/src/app/modules/home/components/widget/lib/maps/map.scss
View File

@ -416,7 +416,7 @@ div.tb-widget .tb-widget-content.tb-no-interaction {
min-height: 20px;
margin: 4px;
cursor: pointer;
accent-color: var(--mdc-checkbox-selected-icon-color, var(--mat-app-primary));
accent-color: var(--mat-checkbox-selected-icon-color, var(--mat-app-primary));
}
.tb-group-label {
padding-left: 12px;

4
ui-ngx/src/app/modules/home/components/widget/lib/maps/panels/map-timeline-panel.component.scss
View File

@ -36,9 +36,9 @@
}
.tb-timeline-buttons {
.mat-mdc-mini-fab.mat-primary {
--mdc-fab-small-container-color: rgba(0,0,0,0);
--mat-fab-small-container-color: rgba(0,0,0,0);
--mat-fab-small-foreground-color: rgba(0,0,0,0.54);
--mdc-fab-small-container-elevation-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.15);
--mat-fab-small-container-elevation-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.15);
&:before {
opacity: 0.1;
}

2
ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
View File

@ -573,7 +573,7 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
public radioButtonSelectedColor(radioColor: string) {
if (isDefinedAndNotNull(radioColor)) {
return `--mdc-radio-selected-icon-color: ${radioColor}; --mdc-radio-selected-focus-icon-color: ${radioColor}; --mdc-radio-selected-hover-icon-color: ${radioColor}; --mdc-radio-selected-pressed-icon-color: ${radioColor}; --mat-radio-checked-ripple-color: ${radioColor};`
return `--mat-radio-selected-icon-color: ${radioColor}; --mat-radio-selected-focus-icon-color: ${radioColor}; --mat-radio-selected-hover-icon-color: ${radioColor}; --mat-radio-selected-pressed-icon-color: ${radioColor}; --mat-radio-checked-ripple-color: ${radioColor};`
}
}

24
ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.scss
View File

@ -25,27 +25,27 @@ $backgroundColorDisabled: var(--tb-slider-background-color-disabled, #D5D7E5);
.tb-slider-panel {
.mat-mdc-slider.mat-primary.tb-slider {
--mdc-slider-active-track-color: #{$mainColor};
--mdc-slider-handle-color: #{$mainColor};
--mdc-slider-focus-handle-color: #{$mainColor};
--mdc-slider-hover-handle-color: #{$mainColor};
--mat-slider-active-track-color: #{$mainColor};
--mat-slider-handle-color: #{$mainColor};
--mat-slider-focus-handle-color: #{$mainColor};
--mat-slider-hover-handle-color: #{$mainColor};
--mdc-slider-with-tick-marks-inactive-container-color: #{$tickMarksColor};
--mat-slider-with-tick-marks-inactive-container-color: #{$tickMarksColor};
--mat-mdc-slider-ripple-color: #{$mainColor};
--mat-mdc-slider-hover-ripple-color: #{$hoverRippleColor};
--mat-mdc-slider-focus-ripple-color: #{$focusRippleColor};
--mdc-slider-inactive-track-color: #{$backgroundColor};
--mat-slider-inactive-track-color: #{$backgroundColor};
--mdc-slider-disabled-active-track-color: #{$mainColorDisabled};
--mdc-slider-disabled-handle-color: #{$mainColorDisabled};
--mat-slider-disabled-active-track-color: #{$mainColorDisabled};
--mat-slider-disabled-handle-color: #{$mainColorDisabled};
--mdc-slider-disabled-inactive-track-color: #{$backgroundColorDisabled};
--mdc-slider-with-tick-marks-disabled-container-color: #{$mainColorDisabled};
--mat-slider-disabled-inactive-track-color: #{$backgroundColorDisabled};
--mat-slider-with-tick-marks-disabled-container-color: #{$mainColorDisabled};
--mdc-slider-handle-width: 16px;
--mdc-slider-handle-height: 16px;
--mat-slider-handle-width: 16px;
--mat-slider-handle-height: 16px;
}
width: 100%;

6
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-keys.component.scss
View File

@ -126,13 +126,13 @@
}
.tb-dragging-chip-image-fill {
background-color: rgba(0,0,0,0.3);
border-radius: var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px);
border-radius: var(--mat-chip-container-shape-radius, 16px 16px 16px 16px);
display: none;
pointer-events: none;
}
.tb-dragging-chip-image {
background-color: var(--mdc-chip-elevated-container-color, transparent);
border-radius: var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px);
background-color: var(--mat-chip-elevated-container-color, transparent);
border-radius: var(--mat-chip-container-shape-radius, 16px 16px 16px 16px);
overflow: hidden;
height: 32px;
line-height: 20px;

2
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-color-settings-panel.component.scss
View File

@ -16,7 +16,7 @@
@import '../../../../../../../../../scss/constants';
.tb-data-layer-color-settings-panel {
--mdc-outlined-text-field-outline-color: rgba(0,0,0,0.12);
--mat-form-field-outlined-outline-color: rgba(0,0,0,0.12);
--mat-form-field-trailing-icon-color: rgba(0,0,0,0.38);
width: 700px;
max-width: 90vw;

2
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.scss
View File

@ -14,7 +14,7 @@
* limitations under the License.
*/
.tb-map-data-layer-dialog {
--mdc-outlined-text-field-outline-color: rgba(0,0,0,0.12);
--mat-form-field-outlined-outline-color: rgba(0,0,0,0.12);
--mat-form-field-trailing-icon-color: rgba(0,0,0,0.38);
.tb-inline-chips {
--mat-form-field-container-vertical-padding: 12px;

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

@ -454,23 +454,23 @@ export function constructTableCssString(widgetConfig: WidgetConfig): string {
const cssString = ` {
--mat-toolbar-container-text-color: ${mdDark};
--mat-tab-header-active-label-text-color: ${mdDark};
--mat-tab-header-inactive-label-text-color: ${mdDark};
--mat-tab-header-pagination-icon-color: ${mdDark};
--mat-tab-header-pagination-disabled-icon-color: ${mdDarkDisabled2};
--mat-tab-active-label-text-color: ${mdDark};
--mat-tab-inactive-label-text-color: ${mdDark};
--mat-tab-pagination-icon-color: ${mdDark};
--mat-tab-pagination-disabled-icon-color: ${mdDarkDisabled2};
--mat-table-header-headline-color: ${mdDarkSecondary};
--mat-table-row-item-label-text-color: ${mdDark};
--mat-icon-color: ${mdDarkSecondary};
--mdc-icon-button-disabled-icon-color: ${mdDarkDisabled};
--mat-icon-button-disabled-icon-color: ${mdDarkDisabled};
--mat-divider-color: ${mdDarkDivider};
--mat-paginator-container-text-color: ${mdDarkSecondary};
--mdc-icon-button-icon-color: ${mdDarkSecondary};
--mat-icon-button-icon-color: ${mdDarkSecondary};
--mat-paginator-enabled-icon-color: ${mdDarkSecondary};
--mat-paginator-disabled-icon-color: ${mdDarkDisabled};
--mat-select-enabled-trigger-text-color: ${mdDarkSecondary};
--mat-select-disabled-trigger-text-color: ${mdDarkDisabled};
--mat-table-row-item-outline-color: ${mdDarkDivider};
--mdc-checkbox-unselected-focus-icon-color: ${mdDarkSecondary};
--mat-checkbox-unselected-focus-icon-color: ${mdDarkSecondary};
--tb-orig-background-color: ${origBackgroundColor};
--tb-current-entity-color: ${currentEntityColor};

2
ui-ngx/src/app/modules/home/components/widget/lib/table-widget.scss
View File

@ -46,7 +46,7 @@
}
.mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron {
border-color: var(--mat-tab-header-pagination-disabled-icon-color);
border-color: var(--mat-tab-pagination-disabled-icon-color);
}
}

16
ui-ngx/src/app/modules/home/components/widget/widget.component.ts
View File

@ -378,23 +378,23 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
const buttonStyle = {};
switch (buttonType) {
case WidgetHeaderActionButtonType.basic:
buttonStyle['--mdc-text-button-label-text-color'] = buttonColor;
buttonStyle['--mat-button-text-label-text-color'] = buttonColor;
break;
case WidgetHeaderActionButtonType.raised:
buttonStyle['--mdc-protected-button-label-text-color'] = buttonColor;
buttonStyle['--mdc-protected-button-container-color'] = backgroundColor;
buttonStyle['--mat-button-protected-label-text-color'] = buttonColor;
buttonStyle['--mat-button-protected-container-color'] = backgroundColor;
break;
case WidgetHeaderActionButtonType.stroked:
buttonStyle['--mdc-outlined-button-label-text-color'] = buttonColor;
buttonStyle['--mdc-outlined-button-outline-color'] = borderColor;
buttonStyle['--mat-button-outlined-label-text-color'] = buttonColor;
buttonStyle['--mat-button-outlined-outline-color'] = borderColor;
break;
case WidgetHeaderActionButtonType.flat:
buttonStyle['--mdc-filled-button-label-text-color'] = buttonColor;
buttonStyle['--mdc-filled-button-container-color'] = backgroundColor;
buttonStyle['--mat-button-filled-label-text-color'] = buttonColor;
buttonStyle['--mat-button-filled-container-color'] = backgroundColor;
break;
case WidgetHeaderActionButtonType.miniFab:
buttonStyle['--mat-fab-small-foreground-color'] = buttonColor;
buttonStyle['--mdc-fab-small-container-color'] = backgroundColor;
buttonStyle['--mat-fab-small-container-color'] = backgroundColor;
break;
default:
buttonStyle['--mat-icon-color'] = buttonColor;

2
ui-ngx/src/app/modules/home/pages/mobile/applications/remove-app-dialog.component.scss
View File

@ -20,5 +20,5 @@
max-height: 100vh;
display: grid;
grid-template-rows: min-content 4px minmax(auto, 1fr) min-content;
--mdc-outlined-text-field-outline-color: rgba(0,0,0,0.12);
--mat-form-field-outlined-outline-color: rgba(0,0,0,0.12);
}

2
ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/custom-mobile-page.component.scss
View File

@ -14,7 +14,7 @@
* limitations under the License.
*/
:host{
--mdc-outlined-text-field-outline-color: rgba(0,0,0,0.12);
--mat-form-field-outlined-outline-color: rgba(0,0,0,0.12);
.mobile-page-form {
display: flex;

2
ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/default-mobile-page-panel.component.scss
View File

@ -20,7 +20,7 @@
display: flex;
flex-direction: column;
gap: 16px;
--mdc-outlined-text-field-outline-color: rgba(0,0,0,0.12);
--mat-form-field-outlined-outline-color: rgba(0,0,0,0.12);
@media #{$mat-lt-md} {
width: 90vw;
}

2
ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-dialog.component.scss
View File

@ -22,7 +22,7 @@
max-height: 100vh;
display: grid;
grid-template-rows: min-content 4px minmax(auto, 1fr) min-content;
--mdc-outlined-text-field-outline-color: rgba(0,0,0,0.12);
--mat-form-field-outlined-outline-color: rgba(0,0,0,0.12);
.mat-mdc-slide-toggle {
margin-bottom: 16px;

4
ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
View File

@ -52,10 +52,10 @@
}
&.tb-error {
color: var(--mdc-theme-error, #f44336);
color: var(--mat-theme-error, #f44336);
&.tb-required::after {
color: var(--mdc-theme-error, #f44336);
color: var(--mat-theme-error, #f44336);
}
}
}

6
ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.scss
View File

@ -19,7 +19,7 @@
top: 0;
z-index: 5;
padding-bottom: 12px;
background-color: var(--mdc-dialog-container-color, white);
background-color: var(--mat-dialog-container-color, white);
.tb-hint-available-params {
color: rgba(0, 0, 0, 0.54);
@ -54,10 +54,10 @@
}
&.tb-error {
color: var(--mdc-theme-error, #f44336);
color: var(--mat-theme-error, #f44336);
&.tb-required::after {
color: var(--mdc-theme-error, #f44336);
color: var(--mat-theme-error, #f44336);
}
}
}

4
ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss
View File

@ -54,10 +54,10 @@
}
&.tb-error {
color: var(--mdc-theme-error, #f44336);
color: var(--mat-theme-error, #f44336);
&.tb-required::after {
color: var(--mdc-theme-error, #f44336);
color: var(--mat-theme-error, #f44336);
}
}
}

2
ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.scss
View File

@ -29,7 +29,7 @@
.tb-error {
letter-spacing: 0.25px;
color: var(--mdc-theme-error, #f44336);
color: var(--mat-theme-error, #f44336);
}
.tb-required::after {

2
ui-ngx/src/app/modules/login/pages/login/force-two-factor-auth-login.component.scss
View File

@ -23,7 +23,7 @@
.tb-two-factor-auth-login-content {
background-color: #eee;
--mdc-elevated-card-container-elevation: none;
--mat-card-elevated-container-elevation: none;
.progress-bar {
z-index: 10;

2
ui-ngx/src/app/modules/login/pages/login/link-expired.component.scss
View File

@ -20,7 +20,7 @@
flex: 1 1 0;
.tb-expired-link-content {
background-color: #eee;
--mdc-elevated-card-container-elevation: none;
--mat-card-elevated-container-elevation: none;
.tb-expired-link-card {
letter-spacing: 0.15px;
line-height: 24px;

8
ui-ngx/src/app/modules/login/pages/login/login.component.scss
View File

@ -23,15 +23,15 @@
margin-top: 36px;
margin-bottom: 76px;
background-color: #eee;
--mdc-elevated-card-container-elevation: none;
--mat-card-elevated-container-elevation: none;
.tb-login-form {
@media #{$mat-gt-xs} {
width: 480px !important;
}
.forgot-password {
--mat-text-button-horizontal-padding: 0;
--mdc-text-button-container-height: 20px;
--mat-button-text-horizontal-padding: 0;
--mat-button-text-container-height: 20px;
}
.tb-action-button{
@ -48,7 +48,7 @@
margin-bottom: 16px;
.mat-divider-horizontal{
--mat-divider-color: var(--mdc-outlined-text-field-outline-color);
--mat-divider-color: var(--mat-form-field-outlined-outline-color);
}
.text {

2
ui-ngx/src/app/modules/login/pages/login/password.component.scss
View File

@ -20,7 +20,7 @@
flex: 1 1 0;
.tb-password-content {
background-color: #eee;
--mdc-elevated-card-container-elevation: none;
--mat-card-elevated-container-elevation: none;
.tb-password-card {
@media #{$mat-gt-xs} {
width: 450px !important;

2
ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.scss
View File

@ -21,7 +21,7 @@
.tb-two-factor-auth-login-content {
background-color: #eee;
--mdc-elevated-card-container-elevation: none;
--mat-card-elevated-container-elevation: none;
.tb-two-factor-auth-login-card {
padding: 48px 48px 48px 16px;

2
ui-ngx/src/app/shared/components/script-lang.component.scss
View File

@ -23,7 +23,7 @@
}
}
.mat-button-toggle {
--mat-standard-button-toggle-disabled-selected-state-background-color: rgba(0, 0, 0, 0.06);
--mat-button-toggle-disabled-selected-state-background-color: rgba(0, 0, 0, 0.06);
background: rgba(0, 0, 0, 0.06);
height: 36px;
align-items: center;

6
ui-ngx/src/app/shared/components/string-pattern-autocomplete.component.scss
View File

@ -29,10 +29,10 @@
text-decoration: inherit;
text-transform: inherit;
overflow: hidden;
color: var(--mdc-filled-text-field-input-text-color, var(--mat-app-on-surface));
color: var(--mat-form-field-filled-input-text-color, var(--mat-app-on-surface));
&.disabled {
color: var(--mdc-filled-text-field-disabled-input-text-color);
color: var(--mat-form-field-filled-disabled-input-text-color);
}
}
@ -63,7 +63,7 @@
&.disabled {
.highlight {
color: $tb-primary-color-light;
text-shadow: 0 0 0.5px var($tb-primary-color-light, var(--mdc-filled-text-field-disabled-input-text-color));
text-shadow: 0 0 0.5px var($tb-primary-color-light, var(--mat-form-field-filled-disabled-input-text-color));
}
}
}

2
ui-ngx/src/app/shared/components/time/timewindow-panel.component.scss
View File

@ -41,7 +41,7 @@
}
&-checkbox {
--mdc-checkbox-state-layer-size: 24px;
--mat-checkbox-state-layer-size: 24px;
}
}
}

22
ui-ngx/src/form.scss
View File

@ -108,7 +108,7 @@
}
}
&.disabled {
color: var(--mdc-outlined-text-field-disabled-input-text-color);
color: var(--mat-form-field-outlined-disabled-input-text-color);
}
.mat-expansion-panel {
&.tb-settings {
@ -164,9 +164,9 @@
}
.tb-form-panel-disabled {
color: var(--mdc-outlined-text-field-disabled-input-text-color);
color: var(--mat-form-field-outlined-disabled-input-text-color);
.tb-form-panel {
color: var(--mdc-outlined-text-field-disabled-input-text-color);
color: var(--mat-form-field-outlined-disabled-input-text-color);
}
}
@ -191,10 +191,10 @@
}
.tb-form-hint {
padding: 12px 16px;
font-size: var(--mdc-typography-caption-font-size, 12px);
line-height: var(--mdc-typography-caption-line-height, 20px);
font-weight: var(--mdc-typography-caption-font-weight, 400);
letter-spacing: var(--mdc-typography-caption-letter-spacing, 0.0333333333em);
font-size: var(--mat-typography-caption-font-size, 12px);
line-height: var(--mat-typography-caption-line-height, 20px);
font-weight: var(--mat-typography-caption-font-weight, 400);
letter-spacing: var(--mat-typography-caption-letter-spacing, 0.0333333333em);
color: rgba(0, 0, 0, 0.6);
white-space: normal;
border-radius: 6px;
@ -845,8 +845,8 @@
}
.tb-form-panel.outlined {
--mdc-outlined-text-field-outline-color: rgba(0,0,0,0.12);
--mdc-outlined-text-field-container-shape: 6px;
--mat-form-field-outlined-outline-color: rgba(0,0,0,0.12);
--mat-form-field-outlined-container-shape: 6px;
--mat-form-field-trailing-icon-color: rgba(0, 0, 0, 0.56);
box-shadow: none;
@ -875,8 +875,8 @@
height: 56px;
margin-bottom: 22px;
&.disabled {
border-color: var(--mdc-outlined-text-field-disabled-outline-color);
color: var(--mdc-outlined-text-field-disabled-input-text-color);
border-color: var(--mat-form-field-outlined-disabled-outline-color);
color: var(--mat-form-field-outlined-disabled-input-text-color);
}
}
}

18
ui-ngx/src/styles.scss
View File

@ -224,10 +224,10 @@ div {
.tb-hint {
padding: 0 16px 16px;
font-size: var(--mdc-typography-caption-font-size, 12px);
line-height: var(--mdc-typography-caption-line-height, 20px);
font-weight: var(--mdc-typography-caption-font-weight, 400);
letter-spacing: var(--mdc-typography-caption-letter-spacing, 0.0333333333em);
font-size: var(--mat-typography-caption-font-size, 12px);
line-height: var(--mat-typography-caption-line-height, 20px);
font-weight: var(--mat-typography-caption-font-weight, 400);
letter-spacing: var(--mat-typography-caption-letter-spacing, 0.0333333333em);
color: rgba(0, 0, 0, 0.6);
white-space: normal;
}
@ -637,8 +637,8 @@ pre.tb-highlight {
}
.tb-autofilled:has(input:-webkit-autofill){
--mdc-outlined-text-field-label-text-color: var(--mdc-outlined-text-field-input-text-color);
--mdc-outlined-text-field-hover-label-text-color: var(--mdc-outlined-text-field-input-text-color);
--mat-form-field-outlined-label-text-color: var(--mat-form-field-outlined-input-text-color);
--mat-form-field-outlined-hover-label-text-color: var(--mat-form-field-outlined-input-text-color);
.mat-mdc-form-field-flex {
&:before {
display: block;
@ -663,10 +663,10 @@ pre.tb-highlight {
&:-webkit-autofill:focus,
&:-webkit-autofill:active {
-webkit-background-clip: text !important;
-webkit-text-fill-color: var(--mdc-outlined-text-field-input-text-color);
-webkit-text-fill-color: var(--mat-form-field-outlined-input-text-color);
}
&::spelling-error {
color: var(--mdc-outlined-text-field-input-text-color);
color: var(--mat-form-field-outlined-input-text-color);
text-decoration: none;
}
}
@ -1329,7 +1329,7 @@ pre.tb-highlight {
}
&.active:not(:disabled) {
--mdc-outlined-button-outline-color: $primary;
--mat-button-outlined-outline-color: $primary;
}
&:disabled {

2
ui-ngx/src/theme-overwrites.scss
View File

@ -63,7 +63,7 @@
@mixin _mat-button-overwrites($primary, $config-or-theme) {
.mat-toolbar {
.mat-mdc-outlined-button {
--mdc-outlined-button-outline-color: inherit;
--mat-button-outlined-outline-color: inherit;
&:not(:disabled) {
border-color: inherit;
}

35
ui-ngx/yarn.lock
View File

@ -392,12 +392,12 @@
optionalDependencies:
lmdb "3.4.2"
"@angular/cdk@19.2.19":
version "19.2.19"
resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-19.2.19.tgz#25ba3b8f565e6bcd9cd59159c0d9a4244cf3c7ee"
integrity sha512-PCpJagurPBqciqcq4Z8+3OtKLb7rSl4w/qBJoIMua8CgnrjvA1i+SWawhdtfI1zlY8FSwhzLwXV0CmWWfFzQPg==
"@angular/cdk@20.2.14":
version "20.2.14"
resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-20.2.14.tgz#5da8d29a0688cf0c6f58db77aee8afa0a05faaea"
integrity sha512-7bZxc01URbiPiIBWThQ69XwOxVduqEKN4PhpbF2AAyfMc/W8Hcr4VoIJOwL0O1Nkq5beS8pCAqoOeIgFyXd/kg==
dependencies:
parse5 "^7.1.2"
parse5 "^8.0.0"
tslib "^2.3.0"
"@angular/cli@20.3.15":
@ -471,10 +471,10 @@
resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-20.3.16.tgz#8d570c24ca2347a2c884b96be34077e181e08ff3"
integrity sha512-0A/tSQPq5geIz2mMcZA5fzzbzT39v+ADQksnfPr8htNxtkYWy+EI5+d0+++k59NuvjLY4uTBqhRTRB9b1PKrjw==
"@angular/material@19.2.19":
version "19.2.19"
resolved "https://registry.yarnpkg.com/@angular/material/-/material-19.2.19.tgz#dd10669e260109c4f944303dcff3d92fed2e5566"
integrity sha512-auIE6JUzTIA3LyYklh9J/T7u64crmphxUBgAa0zcOMDog6SYfwbNe9YeLQqua5ek4OUAOdK/BHHfVl5W5iaUoQ==
"@angular/material@20.2.14":
version "20.2.14"
resolved "https://registry.yarnpkg.com/@angular/material/-/material-20.2.14.tgz#93027a9eb052d639e8e4f1bd7a3d65e072dc2702"
integrity sha512-IbAgV6XLsvmHiJzxycVhcNC1PA4M30qi+ERCOir6cT333Bxm8vDV32gsOjfL52uzG5YRARroPC+8s1XqR2oxeA==
dependencies:
tslib "^2.3.0"
@ -2345,10 +2345,10 @@
rw "^1.3.3"
tinyqueue "^3.0.0"
"@mat-datetimepicker/core@~15.0.2":
version "15.0.2"
resolved "https://registry.yarnpkg.com/@mat-datetimepicker/core/-/core-15.0.2.tgz#ea0749b7c749dc2975c28d570a623ca3a212f05e"
integrity sha512-2vyKub5uCSAWoKC7UlUbNFOwHrHu9gdaK1xluMiimj8GibkxuP0uh2AP1tRsYz2514CAFvsSkD39X6qy0kz7Iw==
"@mat-datetimepicker/core@~16.0.1":
version "16.0.1"
resolved "https://registry.yarnpkg.com/@mat-datetimepicker/core/-/core-16.0.1.tgz#f2b19b6ed85f83a83f93be866af1a9564ac0d978"
integrity sha512-WknoCOBP3E9VQfRrFGQ5oQlm6EHvfaGjjlHdat7mP0qdfIHqq1efVXZ4/0aXEhiV6s9KM5m4y9ZUfJDLWIz0Zg==
dependencies:
tslib "~2.8.1"
@ -5635,7 +5635,7 @@ enhanced-resolve@^5.17.4:
graceful-fs "^4.2.4"
tapable "^2.2.0"
entities@^4.2.0, entities@^4.5.0:
entities@^4.2.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
@ -8757,13 +8757,6 @@ parse5-sax-parser@^8.0.0:
dependencies:
parse5 "^8.0.0"
parse5@^7.1.2:
version "7.2.1"
resolved "https://registry.yarnpkg.com/parse5/-/parse5-7.2.1.tgz#8928f55915e6125f430cc44309765bf17556a33a"
integrity sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==
dependencies:
entities "^4.5.0"
parse5@^8.0.0:
version "8.0.0"
resolved "https://registry.yarnpkg.com/parse5/-/parse5-8.0.0.tgz#aceb267f6b15f9b6e6ba9e35bfdd481fc2167b12"

Write Preview
Loading…
Cancel
Save