From d6d1ceb115cb395fec712f497e46908ae3ea40aa Mon Sep 17 00:00:00 2001 From: Samir Romdhani Date: Thu, 5 Oct 2023 23:46:04 +0200 Subject: [PATCH] Updates the Angular Material to v16 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit upgrade angular-material to 16 BREAKING CHANGE: ⛵upgrade angular-material to 16 feat(angular-material): Updates the Angular Material to v15 & Angular CDK to v15 upgrade angular-material to 16 BREAKING CHANGE: ⛵upgrade angular-material to 16 feat(angular-material): Generate mdc-migration upgrade angular-material to 16 TO FIX: TODO(mdc-migration) BREAKING CHANGE: ⛵upgrade angular-material to 16 feat(angular-material): Updates the Angular Material to v16 & Angular CDK to v16 upgrade angular-material to 16 BREAKING CHANGE: ⛵upgrade angular-material to 16 feat(angular-material): mat-form-field error fix upgrade angular-material to 16 TO FIX: TODO(mdc-migration) BREAKING CHANGE: ⛵upgrade angular-material to 16 feat(angular-material): (mdc-migration) MatChipsModule fix upgrade angular-material to 16 TO FIX: TODO(mdc-migration) BREAKING CHANGE: ⛵upgrade angular-material to 16 feat(angular-material): keeping only major change of Angular Material upgrade angular-material to 16 TO FIX: TODO(mdc-migration) BREAKING CHANGE: ⛵upgrade angular-material to 16 feat(angular-material): FIX use mat-menu-item directive instead of mat-button in kd-nav components. upgrade angular-material to 16 TO FIX: TODO(mdc-migration) BREAKING CHANGE: ⛵upgrade angular-material to 16 feat(angular-material): (mdc-migration) fix [WIP] upgrade angular-material to 16 FIX: TODO(mdc-migration) BREAKING CHANGE: ⛵upgrade angular-material to 16 feat(angular-material): (mdc-migration) fix form-field-density change [WIP] upgrade angular-material to 16 FIX: TODO(mdc-migration) BREAKING CHANGE: ⛵upgrade angular-material to 16 feat(angular-material): (mdc-migration) fixes [WIP] upgrade angular-material to 16 FIX: TODO(mdc-migration) BREAKING CHANGE: ⛵upgrade angular-material to 16 feat(angular-material): (mdc-migration) fixes [WIP] add unique kd-form-field match new mat.form-field-density upgrade angular-material to 16 FIX: TODO(mdc-migration) BREAKING CHANGE: ⛵upgrade angular-material to 16 feat(angular-material): (mdc-migration) fixes mat card theme & mat-mdc-slider upgrade angular-material to 16 FIX: TODO(mdc-migration) BREAKING CHANGE: ⛵upgrade angular-material to 16 feat(angular-material): (mdc-migration) fixes ns settings global actions dialogs upgrade angular-material to 16 FIX: TODO(mdc-migration) BREAKING CHANGE: ⛵upgrade angular-material to 16 feat(angular-material): (mdc-migration) fix mat-tab-group upgrade angular-material to 16 FIX: TODO(mdc-migration) BREAKING CHANGE: ⛵upgrade angular-material to 16 feat(angular-material): (mdc-migration) fix mat-table upgrade angular-material to 16 FIX: TODO(mdc-migration) BREAKING CHANGE: ⛵upgrade angular-material to 16 feat(angular-material): (mdc-migration) fix kd-dynamic-cell related actions upgrade angular-material to 16 FIX: TODO(mdc-migration) BREAKING CHANGE: ⛵upgrade angular-material to 16 feat(angular-material): review TODO(mdc-migration) upgrade angular-material to 16 FIX: TODO(mdc-migration) BREAKING CHANGE: ⛵upgrade angular-material to 16 feat(angular-material): construct form field appearance standard as deprecated in Material v16, used mat-label instead of placeholder TODO(mdc-migration) upgrade angular-material to 16 FIX: TODO(mdc-migration) BREAKING CHANGE: ⛵upgrade angular-material to 16 feat(angular-material): use kd-standard-form-field with subscriptSizing fixed in settings local TODO(mdc-migration) upgrade angular-material to 16 FIX: TODO(mdc-migration) BREAKING CHANGE: ⛵upgrade angular-material to 16 feat(angular-material): fix icon-button-density and use kd-standard-form-field: WIP(mdc-migration) upgrade angular-material to 16 FIX: TODO(mdc-migration) BREAKING CHANGE: ⛵upgrade angular-material to 16 feat(angular-material): fix secret detail -- code-block-typography, WIP(mdc-migration) upgrade angular-material to 16 FIX: TODO(mdc-migration) BREAKING CHANGE: ⛵upgrade angular-material to 16 feat(angular-material): fix kd-shell related mdc-migration upgrade angular-material to 16 FIX: TODO(mdc-migration) BREAKING CHANGE: ⛵upgrade angular-material to 16 feat(angular-material): fix linting:ts upgrade angular-material to 16 BREAKING CHANGE: ⛵upgrade angular-material to 16 feat(angular-material): fix linting:html upgrade angular-material to 16 BREAKING CHANGE: ⛵upgrade angular-material to 16 feat(angular-material): fix linting:scss upgrade angular-material to 16 BREAKING CHANGE: ⛵upgrade angular-material to 16 feat(angular-material): review kd-theme upgrade angular-material to 16 BREAKING CHANGE: ⛵upgrade angular-material to 16 --- modules/web/src/_theming.scss | 123 +++++----- modules/web/src/chrome/search/component.ts | 10 + modules/web/src/chrome/search/style.scss | 3 +- modules/web/src/chrome/search/template.html | 1 - .../web/src/common/components/card/style.scss | 10 +- .../src/common/components/card/template.html | 4 +- .../src/common/components/chips/component.ts | 1 - .../src/common/components/chips/style.scss | 21 -- .../src/common/components/chips/template.html | 4 +- .../common/components/namespace/component.ts | 35 ++- .../common/components/namespace/style.scss | 32 +-- .../src/common/dialogs/download/style.scss | 6 +- modules/web/src/create/component.ts | 10 + modules/web/src/create/from/form/component.ts | 10 + .../create/from/form/createsecret/dialog.ts | 10 + .../from/form/createsecret/template.html | 4 +- .../create/from/form/deploylabel/component.ts | 8 + .../from/form/portmappings/component.ts | 8 + .../web/src/create/from/form/template.html | 49 ++-- modules/web/src/create/style.scss | 3 +- modules/web/src/create/template.html | 12 +- modules/web/src/index.scss | 229 ++++++++---------- modules/web/src/logs/component.ts | 10 + modules/web/src/plugin/holder.ts | 60 +++++ .../config/secret/detail/component.ts | 1 + .../config/secret/detail/edit/component.ts | 10 + .../config/secret/detail/edit/style.scss | 26 +- modules/web/src/settings/global/component.ts | 9 + .../global/namespace/adddialog/dialog.ts | 10 + .../global/namespace/adddialog/template.html | 1 - .../settings/global/namespace/component.ts | 8 + .../src/settings/global/namespace/style.scss | 5 +- modules/web/src/settings/global/style.scss | 13 +- modules/web/src/settings/local/component.ts | 11 +- modules/web/src/settings/local/style.scss | 24 -- modules/web/src/shell/component.ts | 10 + modules/web/src/shell/styles.scss | 19 +- 37 files changed, 464 insertions(+), 346 deletions(-) delete mode 100644 modules/web/src/common/components/chips/style.scss create mode 100644 modules/web/src/plugin/holder.ts delete mode 100644 modules/web/src/settings/local/style.scss diff --git a/modules/web/src/_theming.scss b/modules/web/src/_theming.scss index 2bbad827b15..3c3088fde27 100644 --- a/modules/web/src/_theming.scss +++ b/modules/web/src/_theming.scss @@ -14,6 +14,7 @@ @use 'sass:map'; @use 'sass:color'; +@use '@angular/material' as mat; @use '@angular/material/theming'; @use 'variables' as *; @@ -38,6 +39,10 @@ // Global style overrides. + // Angular Material 15/16 Density + @include mat.form-field-density(-4); + @include mat.icon-button-density(-3); + a { color: map.get($colors, primary); @@ -174,24 +179,24 @@ background-color: $border; } - .kd-chips-show-button { - color: map.get($colors, primary); - - &:hover { - color: map.get($colors, primary-hover); - } - } - .kd-minimized-card-header:hover { background: $border; } .kd-search { - background-color: color.adjust($background, $lightness: -2.5%); + mat-form-field { + .mdc-text-field__input { + font-size: $subhead-font-size-base; + } - input { - color: theming.mat-color($foreground-palette, base); - } + .mdc-text-field { + background-color: color.adjust($background, $lightness: -2.5%); + } + + .mdc-notched-outline__trailing { + display: none; + } + } } .kd-nav-item-button { @@ -215,31 +220,29 @@ } } - .mat-chip.mat-standard-chip { - background: $card-background-dark; - } + /* MAT chips Theming */ - .mat-active, - .mat-selected { - color: map.get($colors, primary) !important; + .mat-mdc-chip.mat-mdc-standard-chip { + background: $card-background-dark; } - kd-namespace-selector { - border: 1px solid $border; + .kd-chips-show-button { + color: map.get($colors, primary); - .kd-namespace-select { - color: theming.mat-color($foreground-palette, secondary-text); + &:hover { + color: map.get($colors, primary-hover); } + } - .kd-namespace-select-input-container { - .mat-form-field-underline { - display: none; - } + /* MAT chips Theming End */ - .mat-select-arrow { - color: $muted-light !important; - } - } + button.mat-mdc-icon-button { + color: theming.mat-color($foreground-palette, text); + } + + .mat-active, + .mat-mdc-selected { + color: map.get($colors, primary) !important; } .kd-namespace-select-input { @@ -252,8 +255,7 @@ color: theming.mat-color($foreground-palette, secondary-text); } - .kd-namespace-select-input-border, - .kd-shell-toolbar-select { + .kd-namespace-select-input-border { border-bottom: 1px solid $border !important; } @@ -265,14 +267,6 @@ stroke: $background; } - .mat-button-toggle-group { - border: 1px solid $border; - } - - .mat-button-toggle-checked { - background-color: $card-background-dark; - } - .kd-user-help { color: $muted; @@ -285,7 +279,7 @@ border-right: 0; } - .mat-icon-button:hover:not([disabled]) { + .mat-mdc-icon-button:hover:not([disabled]) { background-color: $border !important; } @@ -296,22 +290,13 @@ } .kd-secret-detail-text { - .mat-form-field-infix { - border-top: 0; - } - - .mat-form-field-underline { - background: none; + mat-form-field { + width: 100%; - .mat-form-field-ripple { - background: none; + .mdc-text-field { + background-color: $border; } } - - textarea { - background-color: $border; - border: 0; - } } .kd-edit-active { @@ -322,7 +307,7 @@ border: 1px solid $border; } - .mat-list { + .mat-mdc-list { border: 1px solid $border; } @@ -352,4 +337,32 @@ } } } + + .kd-namespace-select-form-field { + mat-form-field { + width: 100%; + } + + .mdc-notched-outline { + .mdc-notched-outline__leading { + display: none; + } + + .mdc-notched-outline__trailing { + border: 1px solid $border !important; + border-radius: 2px; + } + } + } + + .mat-mdc-card-title, + .mat-mdc-card-content, + .mat-mdc-card-footer { + color: map.get($foreground-palette, text); + } + + .kd-create-from-file-info, + .kd-create-from-input-info { + color: map.get($foreground-palette, text); + } } diff --git a/modules/web/src/chrome/search/component.ts b/modules/web/src/chrome/search/component.ts index a10af11f18f..81e148c1801 100644 --- a/modules/web/src/chrome/search/component.ts +++ b/modules/web/src/chrome/search/component.ts @@ -18,11 +18,21 @@ import {ActivatedRoute, Router} from '@angular/router'; import {SEARCH_QUERY_STATE_PARAM} from '@common/params/params'; import {ParamsService} from '@common/services/global/params'; import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; +import {MAT_FORM_FIELD_DEFAULT_OPTIONS} from '@angular/material/form-field'; @Component({ selector: 'kd-search', templateUrl: './template.html', styleUrls: ['./style.scss'], + providers: [ + { + provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, + useValue: { + appearance: 'outline', + subscriptSizing: 'dynamic', + }, + }, + ], }) export class SearchComponent implements OnInit { query: string; diff --git a/modules/web/src/chrome/search/style.scss b/modules/web/src/chrome/search/style.scss index d0e07ce7366..a831c3fdf24 100644 --- a/modules/web/src/chrome/search/style.scss +++ b/modules/web/src/chrome/search/style.scss @@ -23,11 +23,10 @@ border: 0; font-size: $subhead-font-size-base; outline: none; - padding: $baseline-grid * 1.25; + padding: 0 $baseline-grid * 1.25; } .kd-search-icon { margin-left: $baseline-grid * 2; - padding-right: $baseline-grid * 2; } } diff --git a/modules/web/src/chrome/search/template.html b/modules/web/src/chrome/search/template.html index 07597b01207..e8018feb020 100644 --- a/modules/web/src/chrome/search/template.html +++ b/modules/web/src/chrome/search/template.html @@ -39,4 +39,3 @@ /> -
diff --git a/modules/web/src/common/components/card/style.scss b/modules/web/src/common/components/card/style.scss index 50e966d3da0..31ac7d6f423 100644 --- a/modules/web/src/common/components/card/style.scss +++ b/modules/web/src/common/components/card/style.scss @@ -34,7 +34,7 @@ } } - .mat-card { + .mat-mdc-card { min-width: $min-content-width; padding: 0; @@ -46,7 +46,7 @@ height: auto; width: 100%; - .mat-card-content { + .mat-mdc-card-content { flex-grow: 1; overflow: auto; padding: 0; @@ -57,7 +57,7 @@ box-shadow: none; margin: 0; - .mat-card-content { + .mat-mdc-card-content { padding: 0; } } @@ -67,11 +67,11 @@ } } - .mat-card-title { + .mat-mdc-card-title { margin: 0; } - .mat-card-footer { + .mat-mdc-card-footer { display: inline; margin: 0; } diff --git a/modules/web/src/common/components/card/template.html b/modules/web/src/common/components/card/template.html index 784a0bfb9f1..2439b8064d9 100644 --- a/modules/web/src/common/components/card/template.html +++ b/modules/web/src/common/components/card/template.html @@ -14,8 +14,8 @@ limitations under the License. --> - - + - - + diff --git a/modules/web/src/common/components/namespace/component.ts b/modules/web/src/common/components/namespace/component.ts index 188d22ea7e6..8d5c573240c 100644 --- a/modules/web/src/common/components/namespace/component.ts +++ b/modules/web/src/common/components/namespace/component.ts @@ -32,17 +32,28 @@ import {EndpointManager, Resource} from '../../services/resource/endpoint'; import {ResourceService} from '../../services/resource/resource'; import {NamespaceChangeDialogComponent} from './changedialog/dialog'; import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; +import {MAT_FORM_FIELD_DEFAULT_OPTIONS} from '@angular/material/form-field'; +import {FormControl} from '@angular/forms'; @Component({ selector: 'kd-namespace-selector', templateUrl: './template.html', styleUrls: ['style.scss'], + providers: [ + { + provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, + useValue: { + appearance: 'outline', + subscriptSizing: 'dynamic', + }, + }, + ], }) export class NamespaceSelectorComponent implements OnInit { namespaces: string[] = []; selectNamespaceInput = ''; allNamespacesKey: string; - selectedNamespace: string; + selectedNamespace: FormControl = new FormControl(); resourceNamespaceParam: string; usingFallbackNamespaces = false; @@ -80,7 +91,7 @@ export class NamespaceSelectorComponent implements OnInit { this.namespaceService_.setCurrent(namespace); this.namespaceService_.onNamespaceChangeEvent.emit(namespace); - this.selectedNamespace = namespace; + this.selectedNamespace.setValue(namespace); }); this.resourceNamespaceParam = this._getCurrentResourceNamespaceParam(); @@ -97,8 +108,8 @@ export class NamespaceSelectorComponent implements OnInit { }); this.allNamespacesKey = this.namespaceService_.getAllNamespacesKey(); - this.selectedNamespace = this.namespaceService_.current(); - this.select_.value = this.selectedNamespace; + this.selectedNamespace.setValue(this.namespaceService_.current()); + this.select_.value = this.selectedNamespace.value; this.loadNamespaces_(); } @@ -107,9 +118,9 @@ export class NamespaceSelectorComponent implements OnInit { return; } - this.selectedNamespace = this.selectNamespaceInput; + this.selectedNamespace.setValue(this.selectNamespaceInput); this.select_.close(); - this.changeNamespace_(this.selectedNamespace); + this.changeNamespace_(this.selectedNamespace.value); } onNamespaceToggle(opened: boolean): void { @@ -119,7 +130,7 @@ export class NamespaceSelectorComponent implements OnInit { return; } - this.changeNamespace_(this.selectedNamespace); + this.changeNamespace_(this.selectedNamespace.value); } formatNamespaceName(namespace: string): string { @@ -143,7 +154,7 @@ export class NamespaceSelectorComponent implements OnInit { */ private onNamespaceLoaded_(): void { let newNamespace = this.namespaceService_.getDefaultNamespace(); - const targetNamespace = this.selectedNamespace; + const targetNamespace = this.selectedNamespace.value; if ( targetNamespace && @@ -154,7 +165,7 @@ export class NamespaceSelectorComponent implements OnInit { newNamespace = targetNamespace; } - if (newNamespace !== this.selectedNamespace) { + if (newNamespace !== this.selectedNamespace.value) { this.changeNamespace_(newNamespace); } } @@ -193,17 +204,17 @@ export class NamespaceSelectorComponent implements OnInit { this.dialog_ .open(NamespaceChangeDialogComponent, { data: { - namespace: this.selectedNamespace, + namespace: this.selectedNamespace.value, newNamespace: this._getCurrentResourceNamespaceParam(), }, }) .afterClosed() .subscribe(confirmed => { if (confirmed) { - this.selectedNamespace = this._getCurrentResourceNamespaceParam(); + this.selectedNamespace.setValue(this._getCurrentResourceNamespaceParam()); this.router_.navigate([], { relativeTo: this.activatedRoute_, - queryParams: {[NAMESPACE_STATE_PARAM]: this.selectedNamespace}, + queryParams: {[NAMESPACE_STATE_PARAM]: this.selectedNamespace.value}, queryParamsHandling: 'merge', }); return; diff --git a/modules/web/src/common/components/namespace/style.scss b/modules/web/src/common/components/namespace/style.scss index 23d83a6b71a..09b43a6b6cb 100644 --- a/modules/web/src/common/components/namespace/style.scss +++ b/modules/web/src/common/components/namespace/style.scss @@ -14,36 +14,14 @@ @use '../../../variables' as *; -:host { - border-radius: $baseline-grid * 0.25; - height: 4.75 * $baseline-grid; - line-height: 4.5 * $baseline-grid; - margin-right: 2 * $baseline-grid; - padding-right: 3.5 * $baseline-grid; - - ::ng-deep { - .mat-form-field-infix { - border: 0; - padding: 0; - width: 18 * $baseline-grid; - } - - .mat-form-field-wrapper { - padding: 0; - } - - .kd-namespace-select { - font-family: $font-family-sans; - font-size: $subhead-font-size-base; - line-height: 4.5 * $baseline-grid; - margin-left: 2 * $baseline-grid; - } - } -} - .kd-namespace-select-input { border: 0; height: 3 * $baseline-grid; outline: none; padding: (2 * $baseline-grid) 0 (2 * $baseline-grid) (2 * $baseline-grid); } + +.mat-mdc-option { + overflow: auto !important; + text-overflow: unset !important; +} diff --git a/modules/web/src/common/dialogs/download/style.scss b/modules/web/src/common/dialogs/download/style.scss index 7e208176508..d192ea08622 100644 --- a/modules/web/src/common/dialogs/download/style.scss +++ b/modules/web/src/common/dialogs/download/style.scss @@ -18,8 +18,4 @@ .kd-download-progress-bar { margin-bottom: 2.5 * $baseline-grid; margin-top: 2.5 * $baseline-grid; -} - -mat-dialog-actions { - margin-top: $baseline-grid; -} +} \ No newline at end of file diff --git a/modules/web/src/create/component.ts b/modules/web/src/create/component.ts index d5e85f51a30..68a3f00f8a3 100644 --- a/modules/web/src/create/component.ts +++ b/modules/web/src/create/component.ts @@ -17,11 +17,21 @@ import {ICanDeactivate} from '@common/interfaces/candeactivate'; import {CreateFromFileComponent} from './from/file/component'; import {CreateFromFormComponent} from './from/form/component'; import {CreateFromInputComponent} from './from/input/component'; +import {MAT_TABS_CONFIG} from '@angular/material/tabs'; @Component({ selector: 'kd-create', templateUrl: './template.html', styleUrls: ['./style.scss'], + providers: [ + { + provide: MAT_TABS_CONFIG, + useValue: { + animationDuration: '0ms', + stretchTabs: false, + }, + }, + ], }) export class CreateComponent extends ICanDeactivate { @ViewChild(CreateFromInputComponent) fromInput: CreateFromInputComponent; diff --git a/modules/web/src/create/from/form/component.ts b/modules/web/src/create/from/form/component.ts index b7fcd47cacc..84f376e766b 100644 --- a/modules/web/src/create/from/form/component.ts +++ b/modules/web/src/create/from/form/component.ts @@ -41,6 +41,7 @@ import {validateUniqueName} from './validator/uniquename.validator'; import {FormValidators} from './validator/validators'; import {CreateSecretDialogComponent} from './createsecret/dialog'; import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; +import {MAT_FORM_FIELD_DEFAULT_OPTIONS} from '@angular/material/form-field'; // Label keys for predefined labels const APP_LABEL_KEY = 'k8s-app'; @@ -49,6 +50,15 @@ const APP_LABEL_KEY = 'k8s-app'; selector: 'kd-create-from-form', templateUrl: './template.html', styleUrls: ['./style.scss'], + providers: [ + { + provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, + useValue: { + appearance: 'outline', + subscriptSizing: 'fixed', + }, + }, + ], }) export class CreateFromFormComponent extends ICanDeactivate implements OnInit { showMoreOptions_ = false; diff --git a/modules/web/src/create/from/form/createsecret/dialog.ts b/modules/web/src/create/from/form/createsecret/dialog.ts index 45ff4fe0be3..f3ac2f1f9be 100644 --- a/modules/web/src/create/from/form/createsecret/dialog.ts +++ b/modules/web/src/create/from/form/createsecret/dialog.ts @@ -21,6 +21,7 @@ import {switchMap} from 'rxjs/operators'; import {AlertDialogComponent, AlertDialogConfig} from '@common/dialogs/alert/dialog'; import {CsrfTokenService} from '@common/services/global/csrftoken'; import {CONFIG_DI_TOKEN} from '../../../../index.config'; +import {MAT_FORM_FIELD_DEFAULT_OPTIONS} from '@angular/material/form-field'; export interface CreateSecretDialogMeta { namespace: string; @@ -29,6 +30,15 @@ export interface CreateSecretDialogMeta { @Component({ selector: 'kd-create-secret-dialog', templateUrl: 'template.html', + providers: [ + { + provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, + useValue: { + appearance: 'outline', + subscriptSizing: 'fixed', + }, + }, + ], }) export class CreateSecretDialogComponent implements OnInit { form: UntypedFormGroup; diff --git a/modules/web/src/create/from/form/createsecret/template.html b/modules/web/src/create/from/form/createsecret/template.html index 8d4572735de..b5296c83b4d 100644 --- a/modules/web/src/create/from/form/createsecret/template.html +++ b/modules/web/src/create/from/form/createsecret/template.html @@ -25,7 +25,7 @@
The new secret will be added to the cluster
- + - + DeployLabelComponent), multi: true, }, + { + provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, + useValue: { + appearance: 'outline', + subscriptSizing: 'fixed', + }, + }, ], }) export class DeployLabelComponent implements OnInit, ControlValueAccessor { diff --git a/modules/web/src/create/from/form/portmappings/component.ts b/modules/web/src/create/from/form/portmappings/component.ts index b8d0e421e2f..f3387da6672 100644 --- a/modules/web/src/create/from/form/portmappings/component.ts +++ b/modules/web/src/create/from/form/portmappings/component.ts @@ -30,6 +30,7 @@ import {Observable} from 'rxjs'; import {filter, map, startWith, take} from 'rxjs/operators'; import {FormValidators} from '../validator/validators'; import {validateProtocol} from '../validator/validprotocol.validator'; +import {MAT_FORM_FIELD_DEFAULT_OPTIONS} from '@angular/material/form-field'; const i18n = { MSG_PORT_MAPPINGS_SERVICE_TYPE_NONE_LABEL: 'None', @@ -72,6 +73,13 @@ const EXT_SERVICE: ServiceType = { useExisting: forwardRef(() => PortMappingsComponent), multi: true, }, + { + provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, + useValue: { + appearance: 'outline', + subscriptSizing: 'fixed', + }, + }, ], }) export class PortMappingsComponent implements OnInit, ControlValueAccessor { diff --git a/modules/web/src/create/from/form/template.html b/modules/web/src/create/from/form/template.html index 5fc3545d373..e26fe4ab63e 100644 --- a/modules/web/src/create/from/form/template.html +++ b/modules/web/src/create/from/form/template.html @@ -14,27 +14,21 @@ limitations under the License. --> - - + + - - + App name + + {{ name.value?.length }} / {{ nameMaxLength }} - + - + - +
- +