UNPKG

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