feat(theme): add new Input directive (#569)

docs/structure.ts

@@ -327,6 +327,12 @@ export const structure = [
           'NbAccordionItemBodyComponent',
         ],
       },
+      {
+        type: 'tabs',
+        name: 'Input',
+        icon: 'input.svg',
+        source: ['NbInputDirective'],
+      },
     ],
   },
   {

src/framework/theme/components/input/_input-colors.scss

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@mixin input-colors() {
+  &.input-info {
+    border-color: nb-theme(form-control-info-border-color);
+  }
+  &.input-success {
+    border-color: nb-theme(form-control-success-border-color);
+  }
+  &.input-warning {
+    border-color: nb-theme(form-control-warning-border-color);
+  }
+  &.input-danger {
+    border-color: nb-theme(form-control-danger-border-color);
+  }
+}

src/framework/theme/components/input/_input-shapes.scss

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@mixin input-shapes() {
+  &.input-rectangle {
+    border-radius: nb-theme(form-control-border-radius);
+  }
+  &.input-semi-round {
+    border-radius: nb-theme(form-control-semi-round-border-radius);
+  }
+  &.input-round {
+    border-radius: nb-theme(form-control-round-border-radius);
+  }
+}

src/framework/theme/components/input/_input-sizes.scss

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@mixin input-sizes() {
+  &.input-sm {
+    font-size: nb-theme(form-control-font-size-sm);
+    padding: nb-theme(form-control-padding-sm);
+  }
+  &.input-md {
+    font-size: nb-theme(form-control-font-size);
+    padding: nb-theme(form-control-padding);
+  }
+  &.input-lg {
+    font-size: nb-theme(form-control-font-size-lg);
+    padding: nb-theme(form-control-padding-lg);
+  }
+}

src/framework/theme/components/input/_input.directive.theme.scss

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import './input-colors';
+@import './input-sizes';
+@import './input-shapes';
+
+@mixin nb-input-theme() {
+  $border-width: nb-theme(form-control-border-width);
+  $border-type: nb-theme(form-control-border-type);
+  $border-color: nb-theme(form-control-border-color);
+
+  [nbInput] {
+    background-color: nb-theme(form-control-bg);
+    border: $border-width $border-type $border-color;
+    color: nb-theme(form-control-text-primary-color);
+
+    &:focus {
+      outline: none;
+      background-color: nb-theme(form-control-focus-bg);
+      border-color: nb-theme(form-control-selected-border-color);
+    }
+
+    &[disabled] {
+      @include install-placeholder(
+        rgba(nb-theme(form-control-placeholder-color), 0.5),
+        nb-theme(form-control-placeholder-font-size)
+      );
+    }
+
+    &.input-full-width {
+      width: 100%;
+    }
+
+    @include input-colors();
+    @include input-sizes();
+    @include input-shapes();
+
+    @include install-placeholder(
+      nb-theme(form-control-placeholder-color),
+      nb-theme(form-control-placeholder-font-size)
+    );
+  }
+}

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

@@ -0,0 +1,167 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Directive, Input, HostBinding } from '@angular/core';
+import { convertToBoolProperty } from '../helpers';
+
+/**
+ * Basic input directive.
+ *
+ * ```html
+ * <input nbInput></input>
+ * ```
+ *
+ * Default input size is `medium`:
+ * @stacked-example(Showcase, input/input-showcase.component)
+ *
+ * Inputs are available in multiple colors using `status` property:
+ * @stacked-example(Input Colors, input/input-colors.component)
+ *
+ * There are three input sizes:
+ *
+ * @stacked-example(Input Sizes, input/input-sizes.component)
+ *
+ * Inputs available in different shapes, which could be combined with the other properties:
+ * @stacked-example(Input Shapes, input/input-shapes.component)
+ *
+ * `nbInput` could be applied to the following selectors - `input`, `textarea`:
+ * @stacked-example(Input Elements, input/input-types.component)
+ *
+ * You can add `fullWidth` attribute to make element fill container:
+ * @stacked-example(Full width inputs, input/input-full-width.component)
+ *
+ * @styles
+ *
+ * form-control-bg:
+ * form-control-border-width:
+ * form-control-border-type:
+ * form-control-border-color:
+ * form-control-text-primary-color:
+ * form-control-focus-bg:
+ * form-control-selected-border-color:
+ * form-control-placeholder-font-size:
+ * form-control-placeholder-color:
+ * form-control-font-size:
+ * form-control-padding:
+ * form-control-font-size-sm:
+ * form-control-padding-sm:
+ * form-control-font-size-lg:
+ * form-control-padding-lg:
+ * form-control-border-radius:
+ * form-control-semi-round-border-radius:
+ * form-control-round-border-radius:
+ * form-control-info-border-color:
+ * form-control-success-border-color:
+ * form-control-warning-border-color:
+ * form-control-danger-border-color:
+ */
+@Directive({
+  selector: 'input[nbInput],textarea[nbInput]',
+})
+export class NbInputDirective {
+
+  static readonly SIZE_SMALL = 'small';
+  static readonly SIZE_MEDIUM = 'medium';
+  static readonly SIZE_LARGE = 'large';
+
+  static readonly STATUS_INFO = 'info';
+  static readonly STATUS_SUCCESS = 'success';
+  static readonly STATUS_WARNING = 'warning';
+  static readonly STATUS_DANGER = 'danger';
+
+  static readonly SHAPE_RECTANGLE = 'rectangle';
+  static readonly SHAPE_SEMI_ROUND = 'semi-round';
+  static readonly SHAPE_ROUND = 'round';
+
+  size: string = NbInputDirective.SIZE_MEDIUM;
+
+  /**
+   * Field size, available sizes:
+   * `small`, `medium`, `large`
+   * @param {string} val
+   */
+  @Input('fieldSize')
+  set setSize(value: string) {
+    this.size = value;
+  }
+
+  /**
+   * Field status (adds specific styles):
+   * `info`, `success`, `warning`, `danger`
+   * @param {string} val
+   */
+  @Input('status')
+  status: string;
+
+  /**
+   * Field shapes: `rectangle`, `round`, `semi-round`
+   * @param {string} val
+   */
+  @Input('shape')
+  shape: string = NbInputDirective.SHAPE_RECTANGLE;
+
+  /**
+   * If set element will fill container
+   * @param {string}
+   */
+  @Input('fullWidth')
+  set setFullWidth(value) {
+    this.fullWidth = convertToBoolProperty(value);
+  }
+
+  @HostBinding('class.input-full-width')
+  fullWidth = false;
+
+  @HostBinding('class.input-sm')
+  get small() {
+    return this.size === NbInputDirective.SIZE_SMALL;
+  }
+
+  @HostBinding('class.input-md')
+  get medium() {
+    return this.size === NbInputDirective.SIZE_MEDIUM;
+  }
+
+  @HostBinding('class.input-lg')
+  get large() {
+    return this.size === NbInputDirective.SIZE_LARGE;
+  }
+
+  @HostBinding('class.input-info')
+  get info() {
+    return this.status === NbInputDirective.STATUS_INFO;
+  }
+
+  @HostBinding('class.input-success')
+  get success() {
+    return this.status === NbInputDirective.STATUS_SUCCESS;
+  }
+
+  @HostBinding('class.input-warning')
+  get warning() {
+    return this.status === NbInputDirective.STATUS_WARNING;
+  }
+
+  @HostBinding('class.input-danger')
+  get danger() {
+    return this.status === NbInputDirective.STATUS_DANGER;
+  }
+
+  @HostBinding('class.input-rectangle')
+  get rectangle() {
+    return this.shape === NbInputDirective.SHAPE_RECTANGLE;
+  }
+
+  @HostBinding('class.input-semi-round')
+  get semiRound() {
+    return this.shape === NbInputDirective.SHAPE_SEMI_ROUND;
+  }
+
+  @HostBinding('class.input-round')
+  get round() {
+    return this.shape === NbInputDirective.SHAPE_ROUND;
+  }
+}

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

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { NgModule } from '@angular/core';
+import { NbSharedModule } from '../shared/shared.module';
+import { NbInputDirective } from './input.directive';
+
+const NB_INPUT_COMPONENTS = [
+  NbInputDirective,
+];
+
+@NgModule({
+  imports: [ NbSharedModule ],
+  declarations: NB_INPUT_COMPONENTS,
+  exports: NB_INPUT_COMPONENTS,
+})
+export class NbInputModule {}