Input Ng

Input NG

body {
  margin: 0;
}

:global(.inputs) {
  display: flex;
  flex-flow: column wrap;
  max-height: 100vh;
  margin-top: 8px;


  & rg-input {
    margin: 0 16px;
  }
}

div:global(.dark) {
  background: #000;
  margin-left: 0;
  padding-left: 16px;
}

<div
  class="inputs"
  data-test="inputs"
  ng-app="Example.input"
  ng-controller="InputTestCtrl as ctrl"
  ng-strict-di
>
  <rg-input
    size="M"
    label="Type something"
  ></rg-input>

  <rg-input
    name="login"
    size="M"
    label="Label and hint"
    placeholder="Hint"
  ></rg-input>

  <rg-input
    label="Label and value"
    size="M"
    ng-model="ctrl.inputModel"
  ></rg-input>

  <rg-input
    placeholder="Hint"
    size="M"
    ng-model="ctrl.inputModel"
    borderless="true"
  ></rg-input>

  <rg-input
    label="Active input"
    active="true"
    size="M"
    ng-model="ctrl.inputModel"
  ></rg-input>

  <rg-input
    label="Disabled input"
    data-disabled="true"
    size="M"
    ng-model="ctrl.inputModel"
  ></rg-input>

  <rg-input
    label="Invalid input"
    size="M"
    error="Error description that wraps over lines because of being really long"
    ng-model="ctrl.inputModel"
  ></rg-input>

  <rg-input
    label="Short input"
    size="S"
  ></rg-input>

  <rg-input
    label="Long input"
    size="L"
  ></rg-input>

  <rg-input
    label="Autogrowing textarea"
    size="M"
    multiline="true"
  ></rg-input>

  <div class="dark">
    <rg-input
      label="Input on dark background"
      placeholder="Hint on dark background"
      theme="dark"
    ></rg-input>
  </div>
</div>

import angular from 'angular';
import RingInput from '@jetbrains/ring-ui/components/input-ng/input-ng';

const exampleModule = angular.module('Example.input', [RingInput]).
  controller('InputTestCtrl', function controller() {
    const ctrl = this;

    ctrl.inputModel = 'Default value';
  });