fix(form field): addon alignment (#2460)

src/framework/theme/components/form-field/_form-field.component.theme.scss

@@ -5,6 +5,14 @@
  */
 
 @mixin nb-form-field-theme() {
+ .nb-form-control-container {
+ max-width: inherit;
+
+ input {
+ width: 100%;
+ }
+ }
+
  .nb-form-field-addon {
  display: flex;
  justify-content: center;
@@ -31,9 +39,14 @@
  }
 
  @each $size in nb-get-sizes() {
+ $form-field-max-width: nb-theme(form-field-#{$size}-max-width);
  $addon-height: nb-theme(form-field-addon-#{$size}-height);
  $addon-width: nb-theme(form-field-addon-#{$size}-width);
 
+ .nb-form-field-limited-width.nb-form-field-size-#{$size} {
+ max-width: $form-field-max-width;
+ }
+
  .nb-form-field-prefix-#{$size},
  .nb-form-field-suffix-#{$size} {
  height: $addon-height;

src/framework/theme/components/form-field/form-field-control.ts

@@ -18,6 +18,7 @@ export abstract class NbFormFieldControl {
  size$: Observable<NbComponentSize>;
  focused$: Observable<boolean>;
  disabled$: Observable<boolean>;
+ fullWidth$: Observable<boolean>;
 }
 
 /*
@@ -32,6 +33,7 @@ export class NbFormFieldControlConfig {
 export interface NbFormControlState {
  status: NbComponentStatus;
  size: NbComponentSize;
+ fullWidth: boolean;
  focused: boolean;
  disabled: boolean;
 }

src/framework/theme/components/form-field/form-field.component.ts

@@ -18,9 +18,10 @@ import {
  ElementRef,
  Renderer2,
  AfterViewInit,
+ HostBinding,
 } from '@angular/core';
 import { merge, Subject, Observable, combineLatest, ReplaySubject } from 'rxjs';
-import { takeUntil, distinctUntilChanged, map } from 'rxjs/operators';
+import { takeUntil, distinctUntilChanged, map, tap } from 'rxjs/operators';
 
 import { NbPrefixDirective } from './prefix.directive';
 import { NbSuffixDirective } from './suffix.directive';
@@ -103,6 +104,8 @@ export class NbFormFieldComponent implements AfterContentChecked, AfterContentIn
  @ContentChild(NbFormFieldControl, { static: false }) formControl: NbFormFieldControl;
  @ContentChild(NbFormFieldControlConfig, { static: false }) formControlConfig: NbFormFieldControlConfig;
 
+ @HostBinding('class') formFieldClasses;
+
  constructor(
  protected cd: ChangeDetectorRef,
  protected zone: NgZone,
@@ -142,12 +145,19 @@ export class NbFormFieldComponent implements AfterContentChecked, AfterContentIn
  }
 
  protected subscribeToFormControlStateChange() {
- const { disabled$, focused$, size$, status$ } = this.formControl;
+ const { disabled$, focused$, size$, status$, fullWidth$ } = this.formControl;
 
- combineLatest([disabled$, focused$, size$, status$])
+ combineLatest([disabled$, focused$, size$, status$, fullWidth$])
  .pipe(
- map(([disabled, focused, size, status]) => ({ disabled, focused, size, status })),
+ map(([disabled, focused, size, status, fullWidth]) => ({ disabled, focused, size, status, fullWidth })),
  distinctUntilChanged((oldState, state) => this.isStatesEqual(oldState, state)),
+ tap(({ size, fullWidth }) => {
+ const formFieldClasses = [`nb-form-field-size-${size}`];
+ if (!fullWidth) {
+ formFieldClasses.push('nb-form-field-limited-width')
+ }
+ this.formFieldClasses = formFieldClasses.join(' ');
+ }),
  takeUntil(this.destroy$),
  )
  .subscribe(this.formControlState$);
@@ -184,6 +194,7 @@ export class NbFormFieldComponent implements AfterContentChecked, AfterContentIn
  return oldState.status === state.status &&
  oldState.disabled === state.disabled &&
  oldState.focused === state.focused &&
+ oldState.fullWidth === state.fullWidth &&
  oldState.size === state.size;
  }
 }

src/framework/theme/components/input/input.directive.ts

@@ -284,13 +284,16 @@ export class NbInputDirective implements DoCheck, OnChanges, OnInit, AfterViewIn
  }
  }
 
- ngOnChanges({ status, fieldSize }: SimpleChanges) {
+ ngOnChanges({ status, fieldSize, fullWidth }: SimpleChanges) {
  if (status) {
  this.status$.next(this.status);
  }
  if (fieldSize) {
  this.size$.next(this.fieldSize);
  }
+ if (fullWidth) {
+ this.fullWidth$.next(this.fullWidth);
+ }
  }
 
  ngOnInit() {
@@ -408,4 +411,9 @@ export class NbInputDirective implements DoCheck, OnChanges, OnInit, AfterViewIn
  * @docs-private
  **/
  disabled$ = new BehaviorSubject<boolean>(false);
+
+ /*
+ * @docs-private
+ **/
+ fullWidth$ = new BehaviorSubject<boolean>(this.fullWidth);
 }

src/framework/theme/components/select/select.component.ts

@@ -723,6 +723,11 @@ export class NbSelectComponent implements OnChanges, AfterViewInit, AfterContent
  **/
  disabled$ = new BehaviorSubject<boolean>(this.disabled);
 
+ /*
+ * @docs-private
+ **/
+ fullWidth$ = new BehaviorSubject<boolean>(this.fullWidth);
+
  constructor(@Inject(NB_DOCUMENT) protected document,
  protected overlay: NbOverlayService,
  protected hostRef: ElementRef<HTMLElement>,
@@ -776,7 +781,7 @@ export class NbSelectComponent implements OnChanges, AfterViewInit, AfterContent
  return this.selectionModel[0].content;
  }
 
- ngOnChanges({ disabled, status, size}: SimpleChanges) {
+ ngOnChanges({ disabled, status, size, fullWidth }: SimpleChanges) {
  if (disabled) {
  this.disabled$.next(disabled.currentValue);
  }
@@ -786,6 +791,9 @@ export class NbSelectComponent implements OnChanges, AfterViewInit, AfterContent
  if (size) {
  this.size$.next(size.currentValue);
  }
+ if (fullWidth) {
+ this.fullWidth$.next(fullWidth.currentValue);
+ }
  }
 
  ngAfterContentInit() {

src/framework/theme/styles/themes/_mapping.scss

@@ -2735,6 +2735,12 @@ $eva-mapping: (
  toggle-control-disabled-checked-switcher-checkmark-color: color-basic-100,
  toggle-control-disabled-text-color: text-control-color,
 
+ form-field-tiny-max-width: input-tiny-max-width,
+ form-field-small-max-width: input-small-max-width,
+ form-field-medium-max-width: input-medium-max-width,
+ form-field-large-max-width: input-large-max-width,
+ form-field-giant-max-width: input-giant-max-width,
+
  form-field-addon-basic-text-color: color-basic-600,
  form-field-addon-basic-highlight-text-color: color-primary-500,
  form-field-addon-primary-text-color: color-primary-500,