Input examples

import { Component } from '@angular/core';

@Component({
  template: `
    <nb-card>
      <nb-card-body class="example-items-rows">
        <input type="text" nbInput placeholder="Text field">
        <input type="text" nbInput placeholder="Disabled Text field" disabled>
      </nb-card-body>
    </nb-card>
  `,
})
export class InputsShowcaseComponent {}

import { Component } from '@angular/core';

@Component({
  template: `
    <nb-card>
      <nb-card-body class="example-items-col">
        <input type="text" nbInput fullWidth status="basic" placeholder="Default">
        <input type="text" nbInput fullWidth status="primary" placeholder="Primary">
        <input type="text" nbInput fullWidth status="info" placeholder="Info">
        <input type="text" nbInput fullWidth status="success" placeholder="Success">
        <input type="text" nbInput fullWidth status="warning" placeholder="Warning">
        <input type="text" nbInput fullWidth status="danger" placeholder="Danger">
        <div class="control-status-example">
          <input type="text" nbInput fullWidth status="control" placeholder="Control">
        </div>
      </nb-card-body>
    </nb-card>
  `,
  styleUrls: [`./input-colors.component.scss`],
})
export class InputColorsComponent {}

import { Component } from '@angular/core';

@Component({
  template: `
    <nb-card>
      <nb-card-body class="example-items-col">
        <input type="text" nbInput fullWidth fieldSize="tiny" placeholder="Tiny">
        <input type="text" nbInput fullWidth fieldSize="small" placeholder="Small">
        <input type="text" nbInput fullWidth fieldSize="medium" placeholder="Medium">
        <input type="text" nbInput fullWidth fieldSize="large" placeholder="Large">
        <input type="text" nbInput fullWidth fieldSize="giant" placeholder="Giant">
      </nb-card-body>
    </nb-card>
  `,
})
export class InputSizesComponent {}

import { Component } from '@angular/core';

@Component({
  template: `
    <nb-card>
      <nb-card-body class="example-items-col">
        <input type="text" nbInput fullWidth shape="rectangle" placeholder="Rectangle">
        <input type="text" nbInput fullWidth shape="semi-round" placeholder="Semi round">
        <input type="text" nbInput fullWidth shape="round" placeholder="Round">
      </nb-card-body>
    </nb-card>
  `,
})
export class InputShapesComponent {}

import { Component } from '@angular/core';

@Component({
  template: `
    <nb-card>
      <nb-card-body class="example-items-col">
        <input type="text" nbInput fullWidth fieldSize="small" placeholder="Input">
        <textarea nbInput fullWidth placeholder="Textarea"></textarea>
      </nb-card-body>
    </nb-card>
  `,
})
export class InputTypesComponent {}

import { Component } from '@angular/core';

@Component({
  template: `
    <nb-card>
      <nb-card-body class="example-items-col">
        <input type="text" nbInput placeholder="Initial width">
        <input type="text" nbInput fullWidth placeholder="Full width">
        <textarea nbInput placeholder="Initial width"></textarea>
        <textarea nbInput fullWidth placeholder="Full width"></textarea>
      </nb-card-body>
    </nb-card>
  `,
})
export class InputFullWidthComponent {}

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  template: `
    <nb-card>
      <nb-card-body class="example-items-col">
        <input type="text" nbInput fullWidth fieldSize="small" placeholder="Input" [(ngModel)]="inputItemNgModel">
        <textarea nbInput fullWidth placeholder="Textarea" [(ngModel)]="textareaItemNgModel"></textarea>
        <input type="text" nbInput fullWidth fieldSize="small" placeholder="Input" [formControl]="inputItemFormControl">
        <textarea nbInput fullWidth placeholder="Textarea" [formControl]="textareaItemFormControl">
        </textarea>
      </nb-card-body>
    </nb-card>
  `,
})

export class InputFormComponent {
  inputItemNgModel;
  textareaItemNgModel;
  inputItemFormControl = new FormControl();
  textareaItemFormControl = new FormControl();
}

import { Component } from '@angular/core';

@Component({
  template: `
    <nb-card size="small">
      <nb-card-body>

        <nb-form-field>
          <nb-icon nbPrefix icon="at-outline" pack="eva"></nb-icon>
          <input type="text" nbInput>
        </nb-form-field>

      </nb-card-body>
    </nb-card>
  `,
})
export class FormFieldInputComponent {
}

import { Component } from '@angular/core';

@Component({
 template: `
   <nb-card size="small">
     <nb-card-body>

       <nb-form-field>
         <input [type]="getInputType()" nbInput>
         <button nbSuffix nbButton ghost (click)="toggleShowPassword()">
           <nb-icon [icon]="showPassword ? 'eye-outline' : 'eye-off-2-outline'"
                    pack="eva"
                    [attr.aria-label]="showPassword ? 'hide password' : 'show password'">
           </nb-icon>
         </button>
       </nb-form-field>

     </nb-card-body>
   </nb-card>
 `,
})
export class FormFieldPasswordComponent {
  showPassword = true;

  getInputType() {
    if (this.showPassword) {
      return 'text';
    }
    return 'password';
  }

  toggleShowPassword() {
    this.showPassword = !this.showPassword;
  }
}