nts-ng2-components/src/components/forms/input/input.component.html

Paquete de componentes para Angular2 desarrollado por NITSNETS.

<label [ngClass]="{
  'has-content': ntsModel && ntsModel.length,
  'focused': focused,
  'floating': floating,
  'with-prefix': prefix || type === 'color',
  'with-icon': icon,
  'with-icon-right': iconRight || clear,
  'with-two-icon-right': iconRight && clear
}">
  <div class="label" *ngIf="label || counter">
    <span *ngIf="label">{{label}}</span>
    <span *ngIf="counter">
      {{ntsModel? ntsModel.length : 0}} <span *ngIf="max>-1">/ {{max}}</span>
    </span>
  </div>
  <nts-icon *ngIf="icon" [icon]="icon" class="icon"></nts-icon>
  <nts-icon *ngIf="iconRight" [icon]="iconRight" class="icon-right"></nts-icon>

  <div class="input-container">
    <span class="prefix" *ngIf="prefix &&  type !== 'color'" [innerHtml]="prefix"></span>
    <span class="prefix" *ngIf="type === 'color' && colorSwatch" [style.backgroundColor]="ntsModel"></span>
    <input
      *ngIf="!multiline && type !== 'color'"
      [type]="type"
      [attr.maxlength]="max && max > 0 ? max : 999999"
      [attr.max]="maxValue"
      [attr.min]="minValue"
      [name]="name || 'inputName'"
      [placeholder]="placeholder"
      [value]="value"
      [autofocus]="autofocus"
      [required]="required"
      [ngModel]="ntsModel"
      (ngModelChange)="onNgModelChange($event)"
      (blur)="onInputBlur($event)"
      (focus)="onInputFocus($event)"
      (keypress)="ntsKeypress.emit($event)"
    />
    <nts-button
      class="clear-btn"
      icon="close"
      size="small"
      *ngIf="!multiline && clear && ntsModel && ntsModel.length"
      (click)="onNgModelChange(null)"
    > </nts-button>

    <textarea
      *ngIf="multiline && type !== 'color'"
      [ngClass]="{floating: floating}"
      [attr.maxlength]="max"
      [name]="name"
      [placeholder]="placeholder"
      [value]="value"
      [ngModel]="ntsModel"
      (ngModelChange)="onNgModelChange($event)"
      (blur)="ntsBlur.emit($event)"
      (focus)="ntsFocus.emit($event)"
      (keypress)="ntsKeypress.emit($event)">
    </textarea>

    <input
      *ngIf="type === 'color' && !multiline"
      [colorPicker]="ntsModel"
      (colorPickerChange)="onNgModelChange($event)"
      [cpPosition]="'bottom'"
      [cpOutputFormat]="'hex'"
      [cpSaveClickOutside]="true"
      [cpAlphaChannel]="'disabled'"
      [cpDialogDisplay]="'popup'"
      [value]="ntsModel"/>

    <!--[style.background]="ntsModel"-->

  </div>
  <small *ngIf="hint" class="hint">{{hint}}</small>
  <small *ngIf="error" class="error">{{error}}</small>

</label>