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 { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, Renderer2 } from '@angular/core';
|
7 | import { Observable } from 'rxjs';
|
8 | import { NbStatusService } from '../../services/status.service';
|
9 | import { NbHighlightableOption } from '../cdk/a11y/descendant-key-manager';
|
10 | import { NbBooleanInput } from '../helpers';
|
11 | import { NbComponentOrCustomStatus } from '../component-status';
|
12 | import { NbComponentSize } from '../component-size';
|
13 | export declare type NbTagAppearance = 'filled' | 'outline';
|
14 | export interface NbTagSelectionChange {
|
15 | tag: NbTagComponent;
|
16 | selected: boolean;
|
17 | }
|
18 | /**
|
19 | *
|
20 | * To show a cross on a tag and enable `remove` event add the `removable` attribute.
|
21 | * @stacked-example(Removable tags, tag/tag-removable.component)
|
22 | *
|
23 | * You can change appearance via `appearance` input:
|
24 | * @stacked-example(Tag Appearance, tag/tag-appearance.component)
|
25 | *
|
26 | * You can change status via `status` input:
|
27 | * @stacked-example(Tag Status, tag/tag-status.component)
|
28 | *
|
29 | * @styles
|
30 | *
|
31 | * tag-text-font-family:
|
32 | * tag-text-transform:
|
33 | * tag-border-width:
|
34 | * tag-border-style:
|
35 | * tag-border-radius:
|
36 | * tag-tiny-text-font-size:
|
37 | * tag-tiny-text-font-weight:
|
38 | * tag-tiny-text-line-height:
|
39 | * tag-tiny-padding:
|
40 | * tag-tiny-close-offset:
|
41 | * tag-small-text-font-size:
|
42 | * tag-small-text-font-weight:
|
43 | * tag-small-text-line-height:
|
44 | * tag-small-padding:
|
45 | * tag-small-close-offset:
|
46 | * tag-medium-text-font-size:
|
47 | * tag-medium-text-font-weight:
|
48 | * tag-medium-text-line-height:
|
49 | * tag-medium-padding:
|
50 | * tag-medium-close-offset:
|
51 | * tag-large-text-font-size:
|
52 | * tag-large-text-font-weight:
|
53 | * tag-large-text-line-height:
|
54 | * tag-large-padding:
|
55 | * tag-large-close-offset:
|
56 | * tag-giant-text-font-size:
|
57 | * tag-giant-text-font-weight:
|
58 | * tag-giant-text-line-height:
|
59 | * tag-giant-padding:
|
60 | * tag-giant-close-offset:
|
61 | * tag-filled-basic-background-color:
|
62 | * tag-filled-basic-border-color:
|
63 | * tag-filled-basic-text-color:
|
64 | * tag-filled-basic-active-background-color:
|
65 | * tag-filled-basic-active-border-color:
|
66 | * tag-filled-basic-hover-background-color:
|
67 | * tag-filled-basic-hover-border-color:
|
68 | * tag-filled-basic-selected-background-color:
|
69 | * tag-filled-basic-selected-border-color:
|
70 | * tag-filled-primary-background-color:
|
71 | * tag-filled-primary-border-color:
|
72 | * tag-filled-primary-text-color:
|
73 | * tag-filled-primary-active-background-color:
|
74 | * tag-filled-primary-active-border-color:
|
75 | * tag-filled-primary-hover-background-color:
|
76 | * tag-filled-primary-hover-border-color:
|
77 | * tag-filled-primary-selected-background-color:
|
78 | * tag-filled-primary-selected-border-color:
|
79 | * tag-filled-success-background-color:
|
80 | * tag-filled-success-border-color:
|
81 | * tag-filled-success-text-color:
|
82 | * tag-filled-success-active-background-color:
|
83 | * tag-filled-success-active-border-color:
|
84 | * tag-filled-success-hover-background-color:
|
85 | * tag-filled-success-hover-border-color:
|
86 | * tag-filled-success-selected-background-color:
|
87 | * tag-filled-success-selected-border-color:
|
88 | * tag-filled-info-background-color:
|
89 | * tag-filled-info-border-color:
|
90 | * tag-filled-info-text-color:
|
91 | * tag-filled-info-active-background-color:
|
92 | * tag-filled-info-active-border-color:
|
93 | * tag-filled-info-hover-background-color:
|
94 | * tag-filled-info-hover-border-color:
|
95 | * tag-filled-info-selected-background-color:
|
96 | * tag-filled-info-selected-border-color:
|
97 | * tag-filled-warning-background-color:
|
98 | * tag-filled-warning-border-color:
|
99 | * tag-filled-warning-text-color:
|
100 | * tag-filled-warning-active-background-color:
|
101 | * tag-filled-warning-active-border-color:
|
102 | * tag-filled-warning-hover-background-color:
|
103 | * tag-filled-warning-hover-border-color:
|
104 | * tag-filled-warning-selected-background-color:
|
105 | * tag-filled-warning-selected-border-color:
|
106 | * tag-filled-danger-background-color:
|
107 | * tag-filled-danger-border-color:
|
108 | * tag-filled-danger-text-color:
|
109 | * tag-filled-danger-active-background-color:
|
110 | * tag-filled-danger-active-border-color:
|
111 | * tag-filled-danger-hover-background-color:
|
112 | * tag-filled-danger-hover-border-color:
|
113 | * tag-filled-danger-selected-background-color:
|
114 | * tag-filled-danger-selected-border-color:
|
115 | * tag-filled-control-background-color:
|
116 | * tag-filled-control-border-color:
|
117 | * tag-filled-control-text-color:
|
118 | * tag-filled-control-active-background-color:
|
119 | * tag-filled-control-active-border-color:
|
120 | * tag-filled-control-hover-background-color:
|
121 | * tag-filled-control-hover-border-color:
|
122 | * tag-filled-control-selected-background-color:
|
123 | * tag-filled-control-selected-border-color:
|
124 | * tag-outline-basic-background-color:
|
125 | * tag-outline-basic-border-color:
|
126 | * tag-outline-basic-text-color:
|
127 | * tag-outline-basic-active-background-color:
|
128 | * tag-outline-basic-active-border-color:
|
129 | * tag-outline-basic-active-text-color:
|
130 | * tag-outline-basic-hover-background-color:
|
131 | * tag-outline-basic-hover-border-color:
|
132 | * tag-outline-basic-hover-text-color:
|
133 | * tag-outline-basic-selected-background-color:
|
134 | * tag-outline-basic-selected-border-color:
|
135 | * tag-outline-basic-selected-text-color:
|
136 | * tag-outline-primary-background-color:
|
137 | * tag-outline-primary-border-color:
|
138 | * tag-outline-primary-text-color:
|
139 | * tag-outline-primary-active-background-color:
|
140 | * tag-outline-primary-active-border-color:
|
141 | * tag-outline-primary-active-text-color:
|
142 | * tag-outline-primary-hover-background-color:
|
143 | * tag-outline-primary-hover-border-color:
|
144 | * tag-outline-primary-hover-text-color:
|
145 | * tag-outline-primary-selected-background-color:
|
146 | * tag-outline-primary-selected-border-color:
|
147 | * tag-outline-primary-selected-text-color:
|
148 | * tag-outline-success-background-color:
|
149 | * tag-outline-success-border-color:
|
150 | * tag-outline-success-text-color:
|
151 | * tag-outline-success-active-background-color:
|
152 | * tag-outline-success-active-border-color:
|
153 | * tag-outline-success-active-text-color:
|
154 | * tag-outline-success-hover-background-color:
|
155 | * tag-outline-success-hover-border-color:
|
156 | * tag-outline-success-hover-text-color:
|
157 | * tag-outline-success-selected-background-color:
|
158 | * tag-outline-success-selected-border-color:
|
159 | * tag-outline-success-selected-text-color:
|
160 | * tag-outline-info-background-color:
|
161 | * tag-outline-info-border-color:
|
162 | * tag-outline-info-text-color:
|
163 | * tag-outline-info-active-background-color:
|
164 | * tag-outline-info-active-border-color:
|
165 | * tag-outline-info-active-text-color:
|
166 | * tag-outline-info-hover-background-color:
|
167 | * tag-outline-info-hover-border-color:
|
168 | * tag-outline-info-hover-text-color:
|
169 | * tag-outline-info-selected-background-color:
|
170 | * tag-outline-info-selected-border-color:
|
171 | * tag-outline-info-selected-text-color:
|
172 | * tag-outline-warning-background-color:
|
173 | * tag-outline-warning-border-color:
|
174 | * tag-outline-warning-text-color:
|
175 | * tag-outline-warning-active-background-color:
|
176 | * tag-outline-warning-active-border-color:
|
177 | * tag-outline-warning-active-text-color:
|
178 | * tag-outline-warning-hover-background-color:
|
179 | * tag-outline-warning-hover-border-color:
|
180 | * tag-outline-warning-hover-text-color:
|
181 | * tag-outline-warning-selected-background-color:
|
182 | * tag-outline-warning-selected-border-color:
|
183 | * tag-outline-warning-selected-text-color:
|
184 | * tag-outline-danger-background-color:
|
185 | * tag-outline-danger-border-color:
|
186 | * tag-outline-danger-text-color:
|
187 | * tag-outline-danger-active-background-color:
|
188 | * tag-outline-danger-active-border-color:
|
189 | * tag-outline-danger-active-text-color:
|
190 | * tag-outline-danger-hover-background-color:
|
191 | * tag-outline-danger-hover-border-color:
|
192 | * tag-outline-danger-hover-text-color:
|
193 | * tag-outline-danger-selected-background-color:
|
194 | * tag-outline-danger-selected-border-color:
|
195 | * tag-outline-danger-selected-text-color:
|
196 | * tag-outline-control-background-color:
|
197 | * tag-outline-control-border-color:
|
198 | * tag-outline-control-text-color:
|
199 | * tag-outline-control-active-background-color:
|
200 | * tag-outline-control-active-border-color:
|
201 | * tag-outline-control-active-text-color:
|
202 | * tag-outline-control-hover-background-color:
|
203 | * tag-outline-control-hover-border-color:
|
204 | * tag-outline-control-hover-text-color:
|
205 | * tag-outline-control-selected-background-color:
|
206 | * tag-outline-control-selected-border-color:
|
207 | * tag-outline-control-selected-text-color:
|
208 | */
|
209 | export declare class NbTagComponent implements AfterViewInit, OnDestroy, NbHighlightableOption {
|
210 | _hostElement: ElementRef;
|
211 | protected cd: ChangeDetectorRef;
|
212 | protected renderer: Renderer2;
|
213 | protected zone: NgZone;
|
214 | protected statusService: NbStatusService;
|
215 | private _destroy$;
|
216 | get destroy$(): Observable<NbTagComponent>;
|
217 | /**
|
218 | * Tag text.
|
219 | */
|
220 | text: string;
|
221 | get selected(): boolean;
|
222 | set selected(value: boolean);
|
223 | protected _selected: boolean;
|
224 | static ngAcceptInputType_selected: NbBooleanInput;
|
225 | /**
|
226 | * Controls whether the user can remove a tag or not.
|
227 | */
|
228 | get removable(): boolean;
|
229 | set removable(value: boolean);
|
230 | protected _removable: boolean;
|
231 | static ngAcceptInputType_removable: NbBooleanInput;
|
232 | /**
|
233 | * Tag appearance: `filled`, `outline`.
|
234 | */
|
235 | appearance: NbTagAppearance;
|
236 | /**
|
237 | * Tag status: `basic`, `primary`, `info`, `success`, `warning`, `danger`, `control`.
|
238 | */
|
239 | status: NbComponentOrCustomStatus;
|
240 | /**
|
241 | * Tag size: `tiny`, `small`, `medium`, `large`, `giant`.
|
242 | */
|
243 | size: NbComponentSize;
|
244 | role: string;
|
245 | /**
|
246 | * Emits when the user removes the tag
|
247 | * (whether by clicking on the remove button or by pressing `delete` or `backspace` key).
|
248 | */
|
249 | readonly remove: EventEmitter<NbTagComponent>;
|
250 | readonly selectedChange: EventEmitter<NbTagSelectionChange>;
|
251 | _isActive: boolean;
|
252 | _id: string;
|
253 | get filled(): boolean;
|
254 | set filled(value: boolean);
|
255 | get outline(): boolean;
|
256 | set outline(value: boolean);
|
257 | get basic(): boolean;
|
258 | get primary(): boolean;
|
259 | get success(): boolean;
|
260 | get info(): boolean;
|
261 | get warning(): boolean;
|
262 | get danger(): boolean;
|
263 | get control(): boolean;
|
264 | get tiny(): boolean;
|
265 | get small(): boolean;
|
266 | get medium(): boolean;
|
267 | get large(): boolean;
|
268 | get giant(): boolean;
|
269 | get additionalClasses(): string[];
|
270 | _remove(): void;
|
271 | constructor(_hostElement: ElementRef, cd: ChangeDetectorRef, renderer: Renderer2, zone: NgZone, statusService: NbStatusService);
|
272 | ngAfterViewInit(): void;
|
273 | ngOnDestroy(): void;
|
274 | _toggleSelection(): void;
|
275 | setActiveStyles(): void;
|
276 | setInactiveStyles(): void;
|
277 | }
|