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 | */
|
6 | import { OnDestroy, OnInit, ElementRef, SimpleChanges, OnChanges, DoCheck, AfterViewInit, Renderer2, NgZone } from '@angular/core';
|
7 | import { Subject, BehaviorSubject } from 'rxjs';
|
8 | import { NbStatusService } from '../../services/status.service';
|
9 | import { NbBooleanInput } from '../helpers';
|
10 | import { NbComponentSize } from '../component-size';
|
11 | import { NbComponentShape } from '../component-shape';
|
12 | import { NbComponentOrCustomStatus } from '../component-status';
|
13 | import { NbFormFieldControl } from '../form-field/form-field-control';
|
14 | import { NbFocusMonitor } from '../cdk/a11y/a11y.module';
|
15 | import * 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 | */
|
203 | export 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 | }
|