feat(theme): form field component (#2238)

src/app/playground-components.ts

@@ -1405,6 +1405,29 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
       },
     ],
   },
+  {
+    path: 'form-field',
+    children: [
+      {
+        path: 'form-field-showcase.component',
+        link: '/form-field/form-field-showcase.component',
+        component: 'FormFieldShowcaseComponent',
+        name: 'Form Field Showcase',
+      },
+      {
+        path: 'form-field-password.component',
+        link: '/form-field/form-field-password.component',
+        component: 'FormFieldPasswordComponent',
+        name: 'Form Field Password',
+      },
+      {
+        path: 'form-field-input.component',
+        link: '/form-field/form-field-input.component',
+        component: 'FormFieldInputComponent',
+        name: 'Form Field Input',
+      },
+    ],
+  },
   {
     path: 'context-menu',
     children: [

src/framework/theme/components/button/_button.component.theme.scss

@@ -33,6 +33,8 @@
           font-size: nb-theme(button-#{$size}-text-font-size);
           height: nb-theme(button-#{$size}-icon-size);
           width: nb-theme(button-#{$size}-icon-size);
+          margin-top: nb-theme(button-#{$size}-icon-vertical-margin);
+          margin-bottom: nb-theme(button-#{$size}-icon-vertical-margin);
         }
 
         $icon-offset: nb-theme(button-#{$size}-icon-offset);
@@ -44,6 +46,12 @@
           @include nb-ltr(margin-left, $icon-offset);
           @include nb-rtl(margin-right, $icon-offset);
         }
+
+        @each $appearance in ('filled', 'outline', 'ghost', 'hero') {
+          &.icon-start.icon-end.appearance-#{$appearance} {
+            padding: nb-theme(icon-button-#{$appearance}-#{$size}-padding);
+          }
+        }
       }
     }
 

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

@@ -87,22 +87,27 @@ export type NbButtonAppearance = 'filled' | 'outline' | 'ghost' | 'hero';
  * button-tiny-text-font-size:
  * button-tiny-text-line-height:
  * button-tiny-icon-size:
+ * button-tiny-icon-vertical-margin:
  * button-tiny-icon-offset:
  * button-small-text-font-size:
  * button-small-text-line-height:
  * button-small-icon-size:
+ * button-small-icon-vertical-margin:
  * button-small-icon-offset:
  * button-medium-text-font-size:
  * button-medium-text-line-height:
  * button-medium-icon-size:
+ * button-medium-icon-vertical-margin:
  * button-medium-icon-offset:
  * button-large-text-font-size:
  * button-large-text-line-height:
  * button-large-icon-size:
+ * button-large-icon-vertical-margin:
  * button-large-icon-offset:
  * button-giant-text-font-size:
  * button-giant-text-line-height:
  * button-giant-icon-size:
+ * button-giant-icon-vertical-margin:
  * button-giant-icon-offset:
  * button-rectangle-border-radius:
  * button-semi-round-border-radius:

src/framework/theme/components/cdk/a11y/a11y.module.ts

@@ -1,8 +1,12 @@
-import { ModuleWithProviders, NgModule } from '@angular/core';
+import { ModuleWithProviders, NgModule, Injectable } from '@angular/core';
 
 import { NbFocusTrapFactoryService } from './focus-trap';
 import { NbFocusKeyManagerFactoryService } from './focus-key-manager';
 import { NbActiveDescendantKeyManagerFactoryService } from './descendant-key-manager';
+import { FocusMonitor } from '@angular/cdk/a11y';
+
+@Injectable()
+export class NbFocusMonitor extends FocusMonitor {}
 
 @NgModule({})
 export class NbA11yModule {
@@ -13,6 +17,7 @@ export class NbA11yModule {
         NbFocusTrapFactoryService,
         NbFocusKeyManagerFactoryService,
         NbActiveDescendantKeyManagerFactoryService,
+        { provide: NbFocusMonitor, useClass: FocusMonitor },
       ],
     };
   }

src/framework/theme/components/chat/chat-form.component.spec.ts

@@ -1,13 +1,13 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { NbChatFormComponent, NbChatModule } from '@nebular/theme';
+import { NbChatFormComponent, NbChatModule, NbThemeModule } from '@nebular/theme';
 
 describe('NbChatFormComponent', () => {
   let fixture: ComponentFixture<NbChatFormComponent>;
   let chatFormComponent: NbChatFormComponent;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [ NbChatModule.forRoot() ],
+      imports: [ NbThemeModule.forRoot(), NbChatModule.forRoot() ],
     });
 
     fixture = TestBed.createComponent(NbChatFormComponent);

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

@@ -0,0 +1,76 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@mixin nb-form-field-theme() {
+  .nb-form-field-addon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+    @include nb-component-animation(color);
+
+    &-disabled {
+      color: nb-theme(form-field-addon-disabled-text-color);
+    }
+  }
+
+  @each $status in nb-get-statuses() {
+    .nb-form-field-addon-#{$status} {
+      color: nb-theme(form-field-addon-#{$status}-text-color);
+
+      &-highlight {
+        color: nb-theme(form-field-addon-#{$status}-highlight-text-color);
+      }
+    }
+  }
+
+  @each $size in nb-get-sizes() {
+    $addon-height: nb-theme(form-field-addon-#{$size}-height);
+    $addon-width: nb-theme(form-field-addon-#{$size}-width);
+
+    .nb-form-field-prefix-#{$size},
+    .nb-form-field-suffix-#{$size} {
+      height: $addon-height;
+      width: $addon-width;
+      font-size: nb-theme(form-field-addon-#{$size}-font-size);
+      line-height: nb-theme(form-field-addon-#{$size}-line-height);
+      font-weight: nb-theme(form-field-addon-#{$size}-font-weight);
+
+      nb-icon {
+        font-size: nb-theme(form-field-addon-#{$size}-icon-size);
+        line-height: nb-theme(form-field-addon-#{$size}-icon-size);
+      }
+    }
+
+    .nb-form-field-prefix-#{$size} {
+      @include nb-ltr(margin-right, calc(#{$addon-width} * -1));
+      @include nb-rtl(margin-left, calc(#{$addon-width} * -1));
+    }
+
+    .nb-form-field-suffix-#{$size} {
+      @include nb-ltr(margin-left, calc(#{$addon-width} * -1));
+      @include nb-rtl(margin-right, calc(#{$addon-width} * -1));
+    }
+  }
+}
+
+@mixin nb-form-field-with-prefix($selector, $size) {
+  $addon-width: nb-theme(form-field-addon-#{$size}-width);
+
+  .nb-form-field-control-with-prefix #{$selector} {
+    @include nb-ltr(padding-left, $addon-width);
+    @include nb-rtl(padding-right, $addon-width);
+  }
+}
+
+@mixin nb-form-field-with-suffix($selector, $size) {
+  $addon-width: nb-theme(form-field-addon-#{$size}-width);
+
+  .nb-form-field-control-with-suffix #{$selector} {
+    @include nb-ltr(padding-right, $addon-width);
+    @include nb-rtl(padding-left, $addon-width);
+  }
+}

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

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Injectable } from '@angular/core';
+import { NbComponentStatus } from '../component-status';
+import { NbComponentSize } from '../component-size';
+import { Observable } from 'rxjs';
+
+/*
+ * Class used as injection token to provide form element.
+ **/
+@Injectable()
+export abstract class NbFormFieldControl {
+  status$: Observable<NbComponentStatus>;
+  size$: Observable<NbComponentSize>;
+  focused$: Observable<boolean>;
+  disabled$: Observable<boolean>;
+}
+
+/*
+ * Optional config to be provided on NbFormFieldControl to alter default settings.
+ **/
+@Injectable()
+export class NbFormFieldControlConfig {
+  supportsPrefix = true;
+  supportsSuffix = true;
+}
+
+export interface NbFormControlState {
+  status: NbComponentStatus;
+  size: NbComponentSize;
+  focused: boolean;
+  disabled: boolean;
+}

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

@@ -0,0 +1,12 @@
+<div *ngIf="shouldShowPrefix()" [ngClass]="prefixClasses$ | async">
+  <ng-content select="[nbPrefix]"></ng-content>
+</div>
+
+<div [class.nb-form-field-control-with-prefix]="shouldShowPrefix()"
+     [class.nb-form-field-control-with-suffix]="shouldShowSuffix()">
+  <ng-content></ng-content>
+</div>
+
+<div *ngIf="shouldShowSuffix()" [ngClass]="suffixClasses$ | async">
+  <ng-content select="[nbSuffix]"></ng-content>
+</div>

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

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+:host {
+  display: flex;
+  align-items: center;
+}