UNPKG

9.36 kBTypeScriptView Raw
1/**
2 * @license
3 * Copyright Akveo. All Rights Reserved.
4 * Licensed under the MIT License. See License.txt in the project root for license information.
5 */
6import { OnDestroy, OnInit, ElementRef, SimpleChanges, OnChanges, DoCheck, AfterViewInit, Renderer2, NgZone } from '@angular/core';
7import { Subject, BehaviorSubject } from 'rxjs';
8import { NbStatusService } from '../../services/status.service';
9import { NbBooleanInput } from '../helpers';
10import { NbComponentSize } from '../component-size';
11import { NbComponentShape } from '../component-shape';
12import { NbComponentOrCustomStatus } from '../component-status';
13import { NbFormFieldControl } from '../form-field/form-field-control';
14import { NbFocusMonitor } from '../cdk/a11y/a11y.module';
15/**
16 * Basic input directive.
17 *
18 * ```html
19 * <input nbInput></input>
20 * ```
21 *
22 * ### Installation
23 *
24 * Import `NbInputModule` to your feature module.
25 * ```ts
26 * @NgModule({
27 * imports: [
28 * // ...
29 * NbInputModule,
30 * ],
31 * })
32 * export class PageModule { }
33 * ```
34 * ### Usage
35 *
36 * Default input size is `medium`:
37 * @stacked-example(Showcase, input/input-showcase.component)
38 *
39 * Inputs are available in multiple colors using `status` property:
40 * @stacked-example(Input Colors, input/input-colors.component)
41 *
42 * There are three input sizes:
43 *
44 * @stacked-example(Input Sizes, input/input-sizes.component)
45 *
46 * Inputs available in different shapes, which could be combined with the other properties:
47 * @stacked-example(Input Shapes, input/input-shapes.component)
48 *
49 * `nbInput` could be applied to the following selectors - `input`, `textarea`:
50 * @stacked-example(Input Elements, input/input-types.component)
51 *
52 * You can add `fullWidth` attribute to make element fill container:
53 * @stacked-example(Full width inputs, input/input-full-width.component)
54 *
55 * Or you can bind control with form controls or ngModel:
56 * @stacked-example(Input form binding, input/input-form.component)
57 *
58 * Use `<nb-form-field>` to add custom content to the input field.
59 * First import `NbFormFieldModule`. Then put the input field and custom content into
60 * `<nb-form-field>` and add `nbPrefix` or `nbSuffix` directive to the custom content.
61 * `nbPrefix` puts content before input and `nbSuffix` after.
62 *
63 * @stacked-example(Input with icon, form-field/form-field-input.component)
64 * @stacked-example(Input with button, form-field/form-field-password.component)
65 *
66 * @styles
67 *
68 * input-border-style:
69 * input-border-width:
70 * input-outline-color:
71 * input-outline-width:
72 * input-placeholder-text-font-family:
73 * input-text-font-family:
74 * input-basic-text-color:
75 * input-basic-placeholder-text-color:
76 * input-basic-background-color:
77 * input-basic-border-color:
78 * input-basic-focus-background-color:
79 * input-basic-focus-border-color:
80 * input-basic-hover-background-color:
81 * input-basic-hover-border-color:
82 * input-basic-disabled-background-color:
83 * input-basic-disabled-border-color:
84 * input-basic-disabled-text-color:
85 * input-basic-disabled-placeholder-text-color:
86 * input-primary-text-color:
87 * input-primary-placeholder-text-color:
88 * input-primary-background-color:
89 * input-primary-border-color:
90 * input-primary-focus-background-color:
91 * input-primary-focus-border-color:
92 * input-primary-hover-background-color:
93 * input-primary-hover-border-color:
94 * input-primary-disabled-background-color:
95 * input-primary-disabled-border-color:
96 * input-primary-disabled-text-color:
97 * input-primary-disabled-placeholder-text-color:
98 * input-success-text-color:
99 * input-success-placeholder-text-color:
100 * input-success-background-color:
101 * input-success-border-color:
102 * input-success-focus-background-color:
103 * input-success-focus-border-color:
104 * input-success-hover-background-color:
105 * input-success-hover-border-color:
106 * input-success-disabled-background-color:
107 * input-success-disabled-border-color:
108 * input-success-disabled-text-color:
109 * input-success-disabled-placeholder-text-color:
110 * input-info-text-color:
111 * input-info-placeholder-text-color:
112 * input-info-background-color:
113 * input-info-border-color:
114 * input-info-focus-background-color:
115 * input-info-focus-border-color:
116 * input-info-hover-background-color:
117 * input-info-hover-border-color:
118 * input-info-disabled-background-color:
119 * input-info-disabled-border-color:
120 * input-info-disabled-text-color:
121 * input-info-disabled-placeholder-text-color:
122 * input-warning-text-color:
123 * input-warning-placeholder-text-color:
124 * input-warning-background-color:
125 * input-warning-border-color:
126 * input-warning-focus-background-color:
127 * input-warning-focus-border-color:
128 * input-warning-hover-background-color:
129 * input-warning-hover-border-color:
130 * input-warning-disabled-background-color:
131 * input-warning-disabled-border-color:
132 * input-warning-disabled-text-color:
133 * input-warning-disabled-placeholder-text-color:
134 * input-danger-text-color:
135 * input-danger-placeholder-text-color:
136 * input-danger-background-color:
137 * input-danger-border-color:
138 * input-danger-focus-background-color:
139 * input-danger-focus-border-color:
140 * input-danger-hover-background-color:
141 * input-danger-hover-border-color:
142 * input-danger-disabled-background-color:
143 * input-danger-disabled-border-color:
144 * input-danger-disabled-text-color:
145 * input-danger-disabled-placeholder-text-color:
146 * input-control-text-color:
147 * input-control-placeholder-text-color:
148 * input-control-background-color:
149 * input-control-border-color:
150 * input-control-focus-background-color:
151 * input-control-focus-border-color:
152 * input-control-hover-background-color:
153 * input-control-hover-border-color:
154 * input-control-disabled-background-color:
155 * input-control-disabled-border-color:
156 * input-control-disabled-text-color:
157 * input-control-disabled-placeholder-text-color:
158 * input-rectangle-border-radius:
159 * input-semi-round-border-radius:
160 * input-round-border-radius:
161 * input-tiny-text-font-size:
162 * input-tiny-text-font-weight:
163 * input-tiny-text-line-height:
164 * input-tiny-placeholder-text-font-size:
165 * input-tiny-placeholder-text-font-weight:
166 * input-tiny-placeholder-text-line-height:
167 * input-tiny-padding:
168 * input-tiny-max-width:
169 * input-small-text-font-size:
170 * input-small-text-font-weight:
171 * input-small-text-line-height:
172 * input-small-placeholder-text-font-size:
173 * input-small-placeholder-text-font-weight:
174 * input-small-placeholder-text-line-height:
175 * input-small-padding:
176 * input-small-max-width:
177 * input-medium-text-font-size:
178 * input-medium-text-font-weight:
179 * input-medium-text-line-height:
180 * input-medium-placeholder-text-font-size:
181 * input-medium-placeholder-text-font-weight:
182 * input-medium-placeholder-text-line-height:
183 * input-medium-padding:
184 * input-medium-max-width:
185 * input-large-text-font-size:
186 * input-large-text-font-weight:
187 * input-large-text-line-height:
188 * input-large-placeholder-text-font-size:
189 * input-large-placeholder-text-font-weight:
190 * input-large-placeholder-text-line-height:
191 * input-large-padding:
192 * input-large-max-width:
193 * input-giant-text-font-size:
194 * input-giant-text-font-weight:
195 * input-giant-text-line-height:
196 * input-giant-placeholder-text-font-size:
197 * input-giant-placeholder-text-font-weight:
198 * input-giant-placeholder-text-line-height:
199 * input-giant-padding:
200 * input-giant-max-width:
201 */
202export declare class NbInputDirective implements DoCheck, OnChanges, OnInit, AfterViewInit, OnDestroy, NbFormFieldControl {
203 protected elementRef: ElementRef<HTMLInputElement | HTMLTextAreaElement>;
204 protected focusMonitor: NbFocusMonitor;
205 protected renderer: Renderer2;
206 protected zone: NgZone;
207 protected statusService: NbStatusService;
208 protected destroy$: Subject<void>;
209 /**
210 * Field size modifications. Possible values: `small`, `medium` (default), `large`.
211 */
212 fieldSize: NbComponentSize;
213 /**
214 * Field status (adds specific styles):
215 * `basic`, `primary`, `info`, `success`, `warning`, `danger`, `control`
216 */
217 status: NbComponentOrCustomStatus;
218 /**
219 * Field shapes modifications. Possible values: `rectangle` (default), `round`, `semi-round`.
220 */
221 shape: NbComponentShape;
222 /**
223 * If set element will fill container. `false` by default.
224 */
225 get fullWidth(): boolean;
226 set fullWidth(value: boolean);
227 private _fullWidth;
228 static ngAcceptInputType_fullWidth: NbBooleanInput;
229 get additionalClasses(): string[];
230 constructor(elementRef: ElementRef<HTMLInputElement | HTMLTextAreaElement>, focusMonitor: NbFocusMonitor, renderer: Renderer2, zone: NgZone, statusService: NbStatusService);
231 ngDoCheck(): void;
232 ngOnChanges({ status, fieldSize, fullWidth }: SimpleChanges): void;
233 ngOnInit(): void;
234 ngAfterViewInit(): void;
235 ngOnDestroy(): void;
236 get tiny(): boolean;
237 get small(): boolean;
238 get medium(): boolean;
239 get large(): boolean;
240 get giant(): boolean;
241 get primary(): boolean;
242 get info(): boolean;
243 get success(): boolean;
244 get warning(): boolean;
245 get danger(): boolean;
246 get basic(): boolean;
247 get control(): boolean;
248 get rectangle(): boolean;
249 get semiRound(): boolean;
250 get round(): boolean;
251 status$: BehaviorSubject<string>;
252 size$: BehaviorSubject<NbComponentSize>;
253 focused$: BehaviorSubject<boolean>;
254 disabled$: BehaviorSubject<boolean>;
255 fullWidth$: BehaviorSubject<boolean>;
256}