| 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, Renderer2, NgZone } from '@angular/core';
|
| 7 | import { NbStatusService } from '../../services/status.service';
|
| 8 | import { NbBooleanInput } from '../helpers';
|
| 9 | import { NbButton } from './base-button';
|
| 10 | /**
|
| 11 | * Basic button component.
|
| 12 | *
|
| 13 | * Default button size is `medium` and status color is `basic`:
|
| 14 | * @stacked-example(Button Showcase, button/button-showcase.component)
|
| 15 | *
|
| 16 | * ```html
|
| 17 | * <button nbButton></button>
|
| 18 | * ```
|
| 19 | * ### Installation
|
| 20 | *
|
| 21 | * Import `NbButtonModule` to your feature module.
|
| 22 | * ```ts
|
| 23 | * @NgModule({
|
| 24 | * imports: [
|
| 25 | * // ...
|
| 26 | * NbButtonModule,
|
| 27 | * ],
|
| 28 | * })
|
| 29 | * export class PageModule { }
|
| 30 | * ```
|
| 31 | * ### Usage
|
| 32 | *
|
| 33 | * Buttons are available in multiple colors using `status` property:
|
| 34 | * @stacked-example(Button Colors, button/button-colors.component.html)
|
| 35 | *
|
| 36 | * There are three button sizes:
|
| 37 | *
|
| 38 | * @stacked-example(Button Sizes, button/button-sizes.component.html)
|
| 39 | *
|
| 40 | * And two additional style types - `outline`:
|
| 41 | *
|
| 42 | * @stacked-example(Outline Buttons, button/button-outline.component.html)
|
| 43 | *
|
| 44 | * and `hero`:
|
| 45 | *
|
| 46 | * @stacked-example(Button Hero, button/button-hero.component.html)
|
| 47 | *
|
| 48 | * Buttons available in different shapes, which could be combined with the other properties:
|
| 49 | * @stacked-example(Button Shapes, button/button-shapes.component)
|
| 50 | *
|
| 51 | * `nbButton` could be applied to the following selectors - `button`, `input[type="button"]`, `input[type="submit"]`
|
| 52 | * and `a`:
|
| 53 | * @stacked-example(Button Elements, button/button-types.component.html)
|
| 54 | *
|
| 55 | * Button can be made `fullWidth`:
|
| 56 | * @stacked-example(Full Width Button, button/button-full-width.component.html)
|
| 57 | *
|
| 58 | * Icon can be placed inside of a button as a child element:
|
| 59 | * @stacked-example(Icon Button, button/button-icon.component.html)
|
| 60 | *
|
| 61 | * @additional-example(Interactive example, button/button-interactive.component)
|
| 62 | *
|
| 63 | * @styles
|
| 64 | *
|
| 65 | * button-cursor:
|
| 66 | * button-outline-width:
|
| 67 | * button-outline-color:
|
| 68 | * button-text-font-family:
|
| 69 | * button-text-font-weight:
|
| 70 | * button-disabled-cursor:
|
| 71 | * button-tiny-text-font-size:
|
| 72 | * button-tiny-text-line-height:
|
| 73 | * button-tiny-icon-size:
|
| 74 | * button-tiny-icon-vertical-margin:
|
| 75 | * button-tiny-icon-offset:
|
| 76 | * button-small-text-font-size:
|
| 77 | * button-small-text-line-height:
|
| 78 | * button-small-icon-size:
|
| 79 | * button-small-icon-vertical-margin:
|
| 80 | * button-small-icon-offset:
|
| 81 | * button-medium-text-font-size:
|
| 82 | * button-medium-text-line-height:
|
| 83 | * button-medium-icon-size:
|
| 84 | * button-medium-icon-vertical-margin:
|
| 85 | * button-medium-icon-offset:
|
| 86 | * button-large-text-font-size:
|
| 87 | * button-large-text-line-height:
|
| 88 | * button-large-icon-size:
|
| 89 | * button-large-icon-vertical-margin:
|
| 90 | * button-large-icon-offset:
|
| 91 | * button-giant-text-font-size:
|
| 92 | * button-giant-text-line-height:
|
| 93 | * button-giant-icon-size:
|
| 94 | * button-giant-icon-vertical-margin:
|
| 95 | * button-giant-icon-offset:
|
| 96 | * button-rectangle-border-radius:
|
| 97 | * button-semi-round-border-radius:
|
| 98 | * button-round-border-radius:
|
| 99 | * button-filled-border-style:
|
| 100 | * button-filled-border-width:
|
| 101 | * button-filled-text-transform:
|
| 102 | * button-filled-tiny-padding:
|
| 103 | * button-filled-small-padding:
|
| 104 | * button-filled-medium-padding:
|
| 105 | * button-filled-large-padding:
|
| 106 | * button-filled-giant-padding:
|
| 107 | * button-filled-basic-background-color:
|
| 108 | * button-filled-basic-border-color:
|
| 109 | * button-filled-basic-text-color:
|
| 110 | * button-filled-basic-focus-background-color:
|
| 111 | * button-filled-basic-focus-border-color:
|
| 112 | * button-filled-basic-hover-background-color:
|
| 113 | * button-filled-basic-hover-border-color:
|
| 114 | * button-filled-basic-active-background-color:
|
| 115 | * button-filled-basic-active-border-color:
|
| 116 | * button-filled-basic-disabled-background-color:
|
| 117 | * button-filled-basic-disabled-border-color:
|
| 118 | * button-filled-basic-disabled-text-color:
|
| 119 | * button-filled-primary-background-color:
|
| 120 | * button-filled-primary-border-color:
|
| 121 | * button-filled-primary-text-color:
|
| 122 | * button-filled-primary-focus-background-color:
|
| 123 | * button-filled-primary-focus-border-color:
|
| 124 | * button-filled-primary-hover-background-color:
|
| 125 | * button-filled-primary-hover-border-color:
|
| 126 | * button-filled-primary-active-background-color:
|
| 127 | * button-filled-primary-active-border-color:
|
| 128 | * button-filled-primary-disabled-background-color:
|
| 129 | * button-filled-primary-disabled-border-color:
|
| 130 | * button-filled-primary-disabled-text-color:
|
| 131 | * button-filled-success-background-color:
|
| 132 | * button-filled-success-border-color:
|
| 133 | * button-filled-success-text-color:
|
| 134 | * button-filled-success-focus-background-color:
|
| 135 | * button-filled-success-focus-border-color:
|
| 136 | * button-filled-success-hover-background-color:
|
| 137 | * button-filled-success-hover-border-color:
|
| 138 | * button-filled-success-active-background-color:
|
| 139 | * button-filled-success-active-border-color:
|
| 140 | * button-filled-success-disabled-background-color:
|
| 141 | * button-filled-success-disabled-border-color:
|
| 142 | * button-filled-success-disabled-text-color:
|
| 143 | * button-filled-info-background-color:
|
| 144 | * button-filled-info-border-color:
|
| 145 | * button-filled-info-text-color:
|
| 146 | * button-filled-info-focus-background-color:
|
| 147 | * button-filled-info-focus-border-color:
|
| 148 | * button-filled-info-hover-background-color:
|
| 149 | * button-filled-info-hover-border-color:
|
| 150 | * button-filled-info-active-background-color:
|
| 151 | * button-filled-info-active-border-color:
|
| 152 | * button-filled-info-disabled-background-color:
|
| 153 | * button-filled-info-disabled-border-color:
|
| 154 | * button-filled-info-disabled-text-color:
|
| 155 | * button-filled-warning-background-color:
|
| 156 | * button-filled-warning-border-color:
|
| 157 | * button-filled-warning-text-color:
|
| 158 | * button-filled-warning-focus-background-color:
|
| 159 | * button-filled-warning-focus-border-color:
|
| 160 | * button-filled-warning-hover-background-color:
|
| 161 | * button-filled-warning-hover-border-color:
|
| 162 | * button-filled-warning-active-background-color:
|
| 163 | * button-filled-warning-active-border-color:
|
| 164 | * button-filled-warning-disabled-background-color:
|
| 165 | * button-filled-warning-disabled-border-color:
|
| 166 | * button-filled-warning-disabled-text-color:
|
| 167 | * button-filled-danger-background-color:
|
| 168 | * button-filled-danger-border-color:
|
| 169 | * button-filled-danger-text-color:
|
| 170 | * button-filled-danger-focus-background-color:
|
| 171 | * button-filled-danger-focus-border-color:
|
| 172 | * button-filled-danger-hover-background-color:
|
| 173 | * button-filled-danger-hover-border-color:
|
| 174 | * button-filled-danger-active-background-color:
|
| 175 | * button-filled-danger-active-border-color:
|
| 176 | * button-filled-danger-disabled-background-color:
|
| 177 | * button-filled-danger-disabled-border-color:
|
| 178 | * button-filled-danger-disabled-text-color:
|
| 179 | * button-filled-control-background-color:
|
| 180 | * button-filled-control-border-color:
|
| 181 | * button-filled-control-text-color:
|
| 182 | * button-filled-control-focus-background-color:
|
| 183 | * button-filled-control-focus-border-color:
|
| 184 | * button-filled-control-hover-background-color:
|
| 185 | * button-filled-control-hover-border-color:
|
| 186 | * button-filled-control-active-background-color:
|
| 187 | * button-filled-control-active-border-color:
|
| 188 | * button-filled-control-disabled-background-color:
|
| 189 | * button-filled-control-disabled-border-color:
|
| 190 | * button-filled-control-disabled-text-color:
|
| 191 | * button-outline-border-style:
|
| 192 | * button-outline-border-width:
|
| 193 | * button-outline-text-transform:
|
| 194 | * button-outline-focus-inset-shadow-length:
|
| 195 | * button-outline-tiny-padding:
|
| 196 | * button-outline-small-padding:
|
| 197 | * button-outline-medium-padding:
|
| 198 | * button-outline-large-padding:
|
| 199 | * button-outline-giant-padding:
|
| 200 | * button-outline-basic-background-color:
|
| 201 | * button-outline-basic-border-color:
|
| 202 | * button-outline-basic-text-color:
|
| 203 | * button-outline-basic-focus-background-color:
|
| 204 | * button-outline-basic-focus-border-color:
|
| 205 | * button-outline-basic-focus-text-color:
|
| 206 | * button-outline-basic-hover-background-color:
|
| 207 | * button-outline-basic-hover-border-color:
|
| 208 | * button-outline-basic-hover-text-color:
|
| 209 | * button-outline-basic-active-background-color:
|
| 210 | * button-outline-basic-active-border-color:
|
| 211 | * button-outline-basic-active-text-color:
|
| 212 | * button-outline-basic-disabled-background-color:
|
| 213 | * button-outline-basic-disabled-border-color:
|
| 214 | * button-outline-basic-disabled-text-color:
|
| 215 | * button-outline-primary-background-color:
|
| 216 | * button-outline-primary-border-color:
|
| 217 | * button-outline-primary-text-color:
|
| 218 | * button-outline-primary-focus-background-color:
|
| 219 | * button-outline-primary-focus-border-color:
|
| 220 | * button-outline-primary-focus-text-color:
|
| 221 | * button-outline-primary-hover-background-color:
|
| 222 | * button-outline-primary-hover-border-color:
|
| 223 | * button-outline-primary-hover-text-color:
|
| 224 | * button-outline-primary-active-background-color:
|
| 225 | * button-outline-primary-active-border-color:
|
| 226 | * button-outline-primary-active-text-color:
|
| 227 | * button-outline-primary-disabled-background-color:
|
| 228 | * button-outline-primary-disabled-border-color:
|
| 229 | * button-outline-primary-disabled-text-color:
|
| 230 | * button-outline-success-background-color:
|
| 231 | * button-outline-success-border-color:
|
| 232 | * button-outline-success-text-color:
|
| 233 | * button-outline-success-focus-background-color:
|
| 234 | * button-outline-success-focus-border-color:
|
| 235 | * button-outline-success-focus-text-color:
|
| 236 | * button-outline-success-hover-background-color:
|
| 237 | * button-outline-success-hover-border-color:
|
| 238 | * button-outline-success-hover-text-color:
|
| 239 | * button-outline-success-active-background-color:
|
| 240 | * button-outline-success-active-border-color:
|
| 241 | * button-outline-success-active-text-color:
|
| 242 | * button-outline-success-disabled-background-color:
|
| 243 | * button-outline-success-disabled-border-color:
|
| 244 | * button-outline-success-disabled-text-color:
|
| 245 | * button-outline-info-background-color:
|
| 246 | * button-outline-info-border-color:
|
| 247 | * button-outline-info-text-color:
|
| 248 | * button-outline-info-focus-background-color:
|
| 249 | * button-outline-info-focus-border-color:
|
| 250 | * button-outline-info-focus-text-color:
|
| 251 | * button-outline-info-hover-background-color:
|
| 252 | * button-outline-info-hover-border-color:
|
| 253 | * button-outline-info-hover-text-color:
|
| 254 | * button-outline-info-active-background-color:
|
| 255 | * button-outline-info-active-border-color:
|
| 256 | * button-outline-info-active-text-color:
|
| 257 | * button-outline-info-disabled-background-color:
|
| 258 | * button-outline-info-disabled-border-color:
|
| 259 | * button-outline-info-disabled-text-color:
|
| 260 | * button-outline-warning-background-color:
|
| 261 | * button-outline-warning-border-color:
|
| 262 | * button-outline-warning-text-color:
|
| 263 | * button-outline-warning-focus-background-color:
|
| 264 | * button-outline-warning-focus-border-color:
|
| 265 | * button-outline-warning-focus-text-color:
|
| 266 | * button-outline-warning-hover-background-color:
|
| 267 | * button-outline-warning-hover-border-color:
|
| 268 | * button-outline-warning-hover-text-color:
|
| 269 | * button-outline-warning-active-background-color:
|
| 270 | * button-outline-warning-active-border-color:
|
| 271 | * button-outline-warning-active-text-color:
|
| 272 | * button-outline-warning-disabled-background-color:
|
| 273 | * button-outline-warning-disabled-border-color:
|
| 274 | * button-outline-warning-disabled-text-color:
|
| 275 | * button-outline-danger-background-color:
|
| 276 | * button-outline-danger-border-color:
|
| 277 | * button-outline-danger-text-color:
|
| 278 | * button-outline-danger-focus-background-color:
|
| 279 | * button-outline-danger-focus-border-color:
|
| 280 | * button-outline-danger-focus-text-color:
|
| 281 | * button-outline-danger-hover-background-color:
|
| 282 | * button-outline-danger-hover-border-color:
|
| 283 | * button-outline-danger-hover-text-color:
|
| 284 | * button-outline-danger-active-background-color:
|
| 285 | * button-outline-danger-active-border-color:
|
| 286 | * button-outline-danger-active-text-color:
|
| 287 | * button-outline-danger-disabled-background-color:
|
| 288 | * button-outline-danger-disabled-border-color:
|
| 289 | * button-outline-danger-disabled-text-color:
|
| 290 | * button-outline-control-background-color:
|
| 291 | * button-outline-control-border-color:
|
| 292 | * button-outline-control-text-color:
|
| 293 | * button-outline-control-focus-background-color:
|
| 294 | * button-outline-control-focus-border-color:
|
| 295 | * button-outline-control-focus-text-color:
|
| 296 | * button-outline-control-hover-background-color:
|
| 297 | * button-outline-control-hover-border-color:
|
| 298 | * button-outline-control-hover-text-color:
|
| 299 | * button-outline-control-active-background-color:
|
| 300 | * button-outline-control-active-border-color:
|
| 301 | * button-outline-control-active-text-color:
|
| 302 | * button-outline-control-disabled-background-color:
|
| 303 | * button-outline-control-disabled-border-color:
|
| 304 | * button-outline-control-disabled-text-color:
|
| 305 | * button-ghost-background-color:
|
| 306 | * button-ghost-border-color:
|
| 307 | * button-ghost-border-style:
|
| 308 | * button-ghost-border-width:
|
| 309 | * button-ghost-text-transform:
|
| 310 | * button-ghost-focus-inset-shadow-length:
|
| 311 | * button-ghost-tiny-padding:
|
| 312 | * button-ghost-small-padding:
|
| 313 | * button-ghost-medium-padding:
|
| 314 | * button-ghost-large-padding:
|
| 315 | * button-ghost-giant-padding:
|
| 316 | * button-ghost-basic-text-color:
|
| 317 | * button-ghost-basic-focus-background-color:
|
| 318 | * button-ghost-basic-focus-border-color:
|
| 319 | * button-ghost-basic-focus-text-color:
|
| 320 | * button-ghost-basic-hover-background-color:
|
| 321 | * button-ghost-basic-hover-border-color:
|
| 322 | * button-ghost-basic-hover-text-color:
|
| 323 | * button-ghost-basic-active-background-color:
|
| 324 | * button-ghost-basic-active-border-color:
|
| 325 | * button-ghost-basic-active-text-color:
|
| 326 | * button-ghost-basic-disabled-background-color:
|
| 327 | * button-ghost-basic-disabled-border-color:
|
| 328 | * button-ghost-basic-disabled-text-color:
|
| 329 | * button-ghost-primary-text-color:
|
| 330 | * button-ghost-primary-focus-background-color:
|
| 331 | * button-ghost-primary-focus-border-color:
|
| 332 | * button-ghost-primary-focus-text-color:
|
| 333 | * button-ghost-primary-hover-background-color:
|
| 334 | * button-ghost-primary-hover-border-color:
|
| 335 | * button-ghost-primary-hover-text-color:
|
| 336 | * button-ghost-primary-active-background-color:
|
| 337 | * button-ghost-primary-active-border-color:
|
| 338 | * button-ghost-primary-active-text-color:
|
| 339 | * button-ghost-primary-disabled-background-color:
|
| 340 | * button-ghost-primary-disabled-border-color:
|
| 341 | * button-ghost-primary-disabled-text-color:
|
| 342 | * button-ghost-success-text-color:
|
| 343 | * button-ghost-success-focus-background-color:
|
| 344 | * button-ghost-success-focus-border-color:
|
| 345 | * button-ghost-success-focus-text-color:
|
| 346 | * button-ghost-success-hover-background-color:
|
| 347 | * button-ghost-success-hover-border-color:
|
| 348 | * button-ghost-success-hover-text-color:
|
| 349 | * button-ghost-success-active-background-color:
|
| 350 | * button-ghost-success-active-border-color:
|
| 351 | * button-ghost-success-active-text-color:
|
| 352 | * button-ghost-success-disabled-background-color:
|
| 353 | * button-ghost-success-disabled-border-color:
|
| 354 | * button-ghost-success-disabled-text-color:
|
| 355 | * button-ghost-info-text-color:
|
| 356 | * button-ghost-info-focus-background-color:
|
| 357 | * button-ghost-info-focus-border-color:
|
| 358 | * button-ghost-info-focus-text-color:
|
| 359 | * button-ghost-info-hover-background-color:
|
| 360 | * button-ghost-info-hover-border-color:
|
| 361 | * button-ghost-info-hover-text-color:
|
| 362 | * button-ghost-info-active-background-color:
|
| 363 | * button-ghost-info-active-border-color:
|
| 364 | * button-ghost-info-active-text-color:
|
| 365 | * button-ghost-info-disabled-background-color:
|
| 366 | * button-ghost-info-disabled-border-color:
|
| 367 | * button-ghost-info-disabled-text-color:
|
| 368 | * button-ghost-warning-text-color:
|
| 369 | * button-ghost-warning-focus-background-color:
|
| 370 | * button-ghost-warning-focus-border-color:
|
| 371 | * button-ghost-warning-focus-text-color:
|
| 372 | * button-ghost-warning-hover-background-color:
|
| 373 | * button-ghost-warning-hover-border-color:
|
| 374 | * button-ghost-warning-hover-text-color:
|
| 375 | * button-ghost-warning-active-background-color:
|
| 376 | * button-ghost-warning-active-border-color:
|
| 377 | * button-ghost-warning-active-text-color:
|
| 378 | * button-ghost-warning-disabled-background-color:
|
| 379 | * button-ghost-warning-disabled-border-color:
|
| 380 | * button-ghost-warning-disabled-text-color:
|
| 381 | * button-ghost-danger-text-color:
|
| 382 | * button-ghost-danger-focus-background-color:
|
| 383 | * button-ghost-danger-focus-border-color:
|
| 384 | * button-ghost-danger-focus-text-color:
|
| 385 | * button-ghost-danger-hover-background-color:
|
| 386 | * button-ghost-danger-hover-border-color:
|
| 387 | * button-ghost-danger-hover-text-color:
|
| 388 | * button-ghost-danger-active-background-color:
|
| 389 | * button-ghost-danger-active-border-color:
|
| 390 | * button-ghost-danger-active-text-color:
|
| 391 | * button-ghost-danger-disabled-background-color:
|
| 392 | * button-ghost-danger-disabled-border-color:
|
| 393 | * button-ghost-danger-disabled-text-color:
|
| 394 | * button-ghost-control-text-color:
|
| 395 | * button-ghost-control-focus-background-color:
|
| 396 | * button-ghost-control-focus-border-color:
|
| 397 | * button-ghost-control-focus-text-color:
|
| 398 | * button-ghost-control-hover-background-color:
|
| 399 | * button-ghost-control-hover-border-color:
|
| 400 | * button-ghost-control-hover-text-color:
|
| 401 | * button-ghost-control-active-background-color:
|
| 402 | * button-ghost-control-active-border-color:
|
| 403 | * button-ghost-control-active-text-color:
|
| 404 | * button-ghost-control-disabled-background-color:
|
| 405 | * button-ghost-control-disabled-border-color:
|
| 406 | * button-ghost-control-disabled-text-color:
|
| 407 | * button-hero-border-color:
|
| 408 | * button-hero-border-style:
|
| 409 | * button-hero-border-width:
|
| 410 | * button-hero-text-transform:
|
| 411 | * button-hero-tiny-padding:
|
| 412 | * button-hero-small-padding:
|
| 413 | * button-hero-medium-padding:
|
| 414 | * button-hero-large-padding:
|
| 415 | * button-hero-giant-padding:
|
| 416 | * button-hero-shadow:
|
| 417 | * button-hero-text-shadow:
|
| 418 | * button-hero-bevel-size:
|
| 419 | * button-hero-glow-size:
|
| 420 | * button-hero-outline-color:
|
| 421 | * button-hero-outline-width:
|
| 422 | * button-hero-basic-text-color:
|
| 423 | * button-hero-basic-bevel-color:
|
| 424 | * button-hero-basic-glow-color:
|
| 425 | * button-hero-basic-left-background-color:
|
| 426 | * button-hero-basic-right-background-color:
|
| 427 | * button-hero-basic-focus-left-background-color:
|
| 428 | * button-hero-basic-focus-right-background-color:
|
| 429 | * button-hero-basic-hover-left-background-color:
|
| 430 | * button-hero-basic-hover-right-background-color:
|
| 431 | * button-hero-basic-active-left-background-color:
|
| 432 | * button-hero-basic-active-right-background-color:
|
| 433 | * button-hero-basic-disabled-background-color:
|
| 434 | * button-hero-basic-disabled-text-color:
|
| 435 | * button-hero-primary-text-color:
|
| 436 | * button-hero-primary-bevel-color:
|
| 437 | * button-hero-primary-glow-color:
|
| 438 | * button-hero-primary-left-background-color:
|
| 439 | * button-hero-primary-right-background-color:
|
| 440 | * button-hero-primary-focus-left-background-color:
|
| 441 | * button-hero-primary-focus-right-background-color:
|
| 442 | * button-hero-primary-hover-left-background-color:
|
| 443 | * button-hero-primary-hover-right-background-color:
|
| 444 | * button-hero-primary-active-left-background-color:
|
| 445 | * button-hero-primary-active-right-background-color:
|
| 446 | * button-hero-primary-disabled-background-color:
|
| 447 | * button-hero-primary-disabled-text-color:
|
| 448 | * button-hero-success-text-color:
|
| 449 | * button-hero-success-bevel-color:
|
| 450 | * button-hero-success-glow-color:
|
| 451 | * button-hero-success-left-background-color:
|
| 452 | * button-hero-success-right-background-color:
|
| 453 | * button-hero-success-focus-left-background-color:
|
| 454 | * button-hero-success-focus-right-background-color:
|
| 455 | * button-hero-success-hover-left-background-color:
|
| 456 | * button-hero-success-hover-right-background-color:
|
| 457 | * button-hero-success-active-left-background-color:
|
| 458 | * button-hero-success-active-right-background-color:
|
| 459 | * button-hero-success-disabled-background-color:
|
| 460 | * button-hero-success-disabled-text-color:
|
| 461 | * button-hero-info-text-color:
|
| 462 | * button-hero-info-bevel-color:
|
| 463 | * button-hero-info-glow-color:
|
| 464 | * button-hero-info-left-background-color:
|
| 465 | * button-hero-info-right-background-color:
|
| 466 | * button-hero-info-focus-left-background-color:
|
| 467 | * button-hero-info-focus-right-background-color:
|
| 468 | * button-hero-info-hover-left-background-color:
|
| 469 | * button-hero-info-hover-right-background-color:
|
| 470 | * button-hero-info-active-left-background-color:
|
| 471 | * button-hero-info-active-right-background-color:
|
| 472 | * button-hero-info-disabled-background-color:
|
| 473 | * button-hero-info-disabled-text-color:
|
| 474 | * button-hero-warning-text-color:
|
| 475 | * button-hero-warning-bevel-color:
|
| 476 | * button-hero-warning-glow-color:
|
| 477 | * button-hero-warning-left-background-color:
|
| 478 | * button-hero-warning-right-background-color:
|
| 479 | * button-hero-warning-focus-left-background-color:
|
| 480 | * button-hero-warning-focus-right-background-color:
|
| 481 | * button-hero-warning-hover-left-background-color:
|
| 482 | * button-hero-warning-hover-right-background-color:
|
| 483 | * button-hero-warning-active-left-background-color:
|
| 484 | * button-hero-warning-active-right-background-color:
|
| 485 | * button-hero-warning-disabled-background-color:
|
| 486 | * button-hero-warning-disabled-text-color:
|
| 487 | * button-hero-danger-text-color:
|
| 488 | * button-hero-danger-bevel-color:
|
| 489 | * button-hero-danger-glow-color:
|
| 490 | * button-hero-danger-left-background-color:
|
| 491 | * button-hero-danger-right-background-color:
|
| 492 | * button-hero-danger-focus-left-background-color:
|
| 493 | * button-hero-danger-focus-right-background-color:
|
| 494 | * button-hero-danger-hover-left-background-color:
|
| 495 | * button-hero-danger-hover-right-background-color:
|
| 496 | * button-hero-danger-active-left-background-color:
|
| 497 | * button-hero-danger-active-right-background-color:
|
| 498 | * button-hero-danger-disabled-background-color:
|
| 499 | * button-hero-danger-disabled-text-color:
|
| 500 | * button-hero-control-text-color:
|
| 501 | * button-hero-control-bevel-color:
|
| 502 | * button-hero-control-glow-color:
|
| 503 | * button-hero-control-left-background-color:
|
| 504 | * button-hero-control-right-background-color:
|
| 505 | * button-hero-control-focus-left-background-color:
|
| 506 | * button-hero-control-focus-right-background-color:
|
| 507 | * button-hero-control-hover-left-background-color:
|
| 508 | * button-hero-control-hover-right-background-color:
|
| 509 | * button-hero-control-active-left-background-color:
|
| 510 | * button-hero-control-active-right-background-color:
|
| 511 | * button-hero-control-disabled-background-color:
|
| 512 | * button-hero-control-disabled-text-color:
|
| 513 | */
|
| 514 | export declare class NbButtonComponent extends NbButton implements AfterViewInit {
|
| 515 | protected renderer: Renderer2;
|
| 516 | protected hostElement: ElementRef<HTMLElement>;
|
| 517 | protected cd: ChangeDetectorRef;
|
| 518 | protected zone: NgZone;
|
| 519 | protected statusService: NbStatusService;
|
| 520 | /**
|
| 521 | * Sets `hero` appearance
|
| 522 | */
|
| 523 | get hero(): boolean;
|
| 524 | set hero(value: boolean);
|
| 525 | static ngAcceptInputType_hero: NbBooleanInput;
|
| 526 | get primary(): boolean;
|
| 527 | get info(): boolean;
|
| 528 | get success(): boolean;
|
| 529 | get warning(): boolean;
|
| 530 | get danger(): boolean;
|
| 531 | get basic(): boolean;
|
| 532 | get control(): boolean;
|
| 533 | /**
|
| 534 | * @private
|
| 535 | * Keep this handler to partially support anchor disabling.
|
| 536 | * Unlike button, anchor doesn't have 'disabled' DOM property,
|
| 537 | * so handler will be called anyway. We preventing navigation and bubbling.
|
| 538 | * Disabling is partial due to click handlers precedence. Consider example:
|
| 539 | * <a nbButton [disabled]="true" (click)="clickHandler()">...</a>
|
| 540 | * 'clickHandler' will be called before our host listener below. We can't prevent
|
| 541 | * such handlers call.
|
| 542 | */
|
| 543 | onClick(event: any): void;
|
| 544 | constructor(renderer: Renderer2, hostElement: ElementRef<HTMLElement>, cd: ChangeDetectorRef, zone: NgZone, statusService: NbStatusService);
|
| 545 | }
|