diff --git a/src/framework/theme/components/alert/_alert.component.theme.scss b/src/framework/theme/components/alert/_alert.component.theme.scss index b9472502e5..8a09f036dd 100644 --- a/src/framework/theme/components/alert/_alert.component.theme.scss +++ b/src/framework/theme/components/alert/_alert.component.theme.scss @@ -16,123 +16,27 @@ @mixin nb-alert-theme() { nb-alert { - font-size: nb-theme(alert-font-size); - line-height: nb-theme(alert-line-height); - font-weight: nb-theme(alert-font-weight); - - background: nb-theme(alert-bg); - color: nb-theme(alert-outline-fg); - // TODO: move alert margin style to layout - margin-bottom: nb-theme(alert-margin); + background-color: nb-theme(alert-background-color); border-radius: nb-theme(alert-border-radius); box-shadow: nb-theme(alert-shadow); + color: nb-theme(alert-text-color); + font-family: nb-theme(alert-text-font-family); + font-size: nb-theme(alert-text-font-size); + font-weight: nb-theme(alert-text-font-weight); + line-height: nb-theme(alert-text-line-height); padding: nb-theme(alert-padding); - @include nb-scrollbars( - nb-theme(scrollbar-fg), - nb-theme(scrollbar-bg), - nb-theme(scrollbar-width)); - - &.status { - color: nb-theme(alert-fg); - } - - &.xxsmall-alert { - height: nb-theme(alert-height-xxsmall); - } - &.xsmall-alert { - height: nb-theme(alert-height-xsmall); - } - &.small-alert { - height: nb-theme(alert-height-small); - } - &.medium-alert { - height: nb-theme(alert-height-medium); - } - &.large-alert { - height: nb-theme(alert-height-large); - } - &.xlarge-alert { - height: nb-theme(alert-height-xlarge); - } - &.xxlarge-alert { - height: nb-theme(alert-height-xxlarge); - } - - &.active-alert { - background-color: nb-theme(alert-active-bg); - } - &.disabled-alert { - background-color: nb-theme(alert-disabled-bg); - color: nb-theme(alert-disabled-fg); - } - &.primary-alert { - background-color: nb-theme(alert-primary-bg); - } - &.info-alert { - background-color: nb-theme(alert-info-bg); - } - &.success-alert { - background-color: nb-theme(alert-success-bg); - } - &.warning-alert { - background-color: nb-theme(alert-warning-bg); - } - &.danger-alert { - background-color: nb-theme(alert-danger-bg); - } - - &.accent { - border-top-style: solid; - border-top-width: nb-theme(alert-border-radius); - - & nb-alert-header { - border-radius: 0; - } - } + // TODO: move alert margin style to layout + margin-bottom: nb-theme(alert-bottom-margin); - &.accent-active { - border-top-color: nb-theme(alert-active-bg); - } - &.accent-disabled { - border-top-color: nb-theme(alert-disabled-bg); - } - &.accent-primary { - border-top-color: nb-theme(alert-primary-bg); - } - &.accent-success { - border-top-color: nb-theme(alert-success-bg); - } - &.accent-info { - border-top-color: nb-theme(alert-info-bg); - } - &.accent-warning { - border-top-color: nb-theme(alert-warning-bg); - } - &.accent-danger { - border-top-color: nb-theme(alert-danger-bg); - } + @include nb-scrollbars( + nb-theme(alert-scrollbar-color), + nb-theme(alert-scrollbar-background-color), + nb-theme(alert-scrollbar-width)); - &.outline-active { - border: 2px solid nb-theme(alert-active-bg); - } - &.outline-disabled { - border: 2px solid nb-theme(alert-disabled-bg); - } - &.outline-primary { - border: 2px solid nb-theme(alert-primary-bg); - } - &.outline-success { - border: 2px solid nb-theme(alert-success-bg); - } - &.outline-info { - border: 2px solid nb-theme(alert-info-bg); - } - &.outline-warning { - border: 2px solid nb-theme(alert-warning-bg); - } - &.outline-danger { - border: 2px solid nb-theme(alert-danger-bg); + &.closable { + @include nb-ltr(padding-right, nb-theme(alert-closable-start-padding)); + @include nb-rtl(padding-left, nb-theme(alert-closable-start-padding)); } .close { @@ -142,9 +46,28 @@ cursor: pointer; font-family: monospace; } + } - &.closable { - padding-right: nb-theme(alert-closable-padding); + @each $size in nb-get-sizes() { + nb-alert.size-#{$size} { + height: nb-theme(alert-#{$size}-height); + } + } + + @each $status in nb-get-statuses() { + nb-alert { + &.status-#{$status} { + color: nb-theme(alert-#{$status}-text-color); + background-color: nb-theme(alert-#{$status}-background-color); + } + + &.accent-#{$status} { + border-top: nb-theme(alert-border-radius) solid nb-theme(alert-accent-#{$status}-color); + } + + &.outline-#{$status} { + border: nb-theme(alert-outline-width) solid nb-theme(alert-outline-#{$status}-color); + } } } } diff --git a/src/framework/theme/components/alert/alert.component.scss b/src/framework/theme/components/alert/alert.component.scss index 72a40f1f47..fcb5d145c9 100644 --- a/src/framework/theme/components/alert/alert.component.scss +++ b/src/framework/theme/components/alert/alert.component.scss @@ -4,18 +4,24 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@import '../../styles/core/mixins'; + :host { display: flex; flex-direction: column; position: relative; + + .close { + @include nb-ltr(right, 0); + @include nb-rtl(left, 0); + } } .close { position: absolute; top: 0; - right: 0; color: inherit; background-color: transparent; border: 0; - -webkit-appearance: none; + appearance: none; } diff --git a/src/framework/theme/components/alert/alert.component.ts b/src/framework/theme/components/alert/alert.component.ts index 366b95416a..fadba9bd57 100644 --- a/src/framework/theme/components/alert/alert.component.ts +++ b/src/framework/theme/components/alert/alert.component.ts @@ -5,6 +5,9 @@ */ import { Component, Input, HostBinding, Output, EventEmitter } from '@angular/core'; + +import { NbComponentSize } from '../component-size'; +import { NbComponentStatus } from '../component-status'; import { convertToBoolProperty } from '../helpers'; @@ -27,7 +30,7 @@ import { convertToBoolProperty } from '../helpers'; * ```ts * @NgModule({ * imports: [ - * // ... + * // ... * NbAlertModule, * ], * }) @@ -56,39 +59,52 @@ import { convertToBoolProperty } from '../helpers'; * * @styles * - * alert-font-size: - * alert-line-height: - * alert-font-weight: - * alert-fg: - * alert-outline-fg: - * alert-bg: - * alert-active-bg: - * alert-disabled-bg: - * alert-disabled-fg: - * alert-primary-bg: - * alert-info-bg: - * alert-success-bg: - * alert-warning-bg: - * alert-danger-bg: - * alert-height-xxsmall: - * alert-height-xsmall: - * alert-height-small: - * alert-height-medium: - * alert-height-large: - * alert-height-xlarge: - * alert-height-xxlarge: - * alert-shadow: + * alert-background-color: * alert-border-radius: + * alert-bottom-margin: * alert-padding: - * alert-closable-padding: - * alert-button-padding: - * alert-margin: + * alert-scrollbar-color: + * alert-scrollbar-background-color: + * alert-scrollbar-width: + * alert-shadow: + * alert-text-color: + * alert-text-font-family: + * alert-text-font-size: + * alert-text-font-weight: + * alert-text-line-height: + * alert-closable-start-padding: + * alert-tiny-height: + * alert-small-height: + * alert-medium-height: + * alert-medium-padding: + * alert-large-height: + * alert-giant-height: + * alert-primary-background-color: + * alert-primary-text-color: + * alert-success-background-color: + * alert-success-text-color: + * alert-info-background-color: + * alert-info-text-color: + * alert-warning-background-color: + * alert-warning-text-color: + * alert-danger-background-color: + * alert-danger-text-color: + * alert-accent-primary-color: + * alert-accent-info-color: + * alert-accent-success-color: + * alert-accent-warning-color: + * alert-accent-danger-color: + * alert-outline-primary-color: + * alert-outline-info-color: + * alert-outline-success-color: + * alert-outline-warning-color: + * alert-outline-danger-color: */ @Component({ selector: 'nb-alert', styleUrls: ['./alert.component.scss'], template: ` - @@ -96,259 +112,157 @@ import { convertToBoolProperty } from '../helpers'; }) export class NbAlertComponent { - static readonly SIZE_XXSMALL = 'xxsmall'; - static readonly SIZE_XSMALL = 'xsmall'; - static readonly SIZE_SMALL = 'small'; - static readonly SIZE_MEDIUM = 'medium'; - static readonly SIZE_LARGE = 'large'; - static readonly SIZE_XLARGE = 'xlarge'; - static readonly SIZE_XXLARGE = 'xxlarge'; - - static readonly STATUS_ACTIVE = 'active'; - static readonly STATUS_DISABLED = 'disabled'; - static readonly STATUS_PRIMARY = 'primary'; - static readonly STATUS_INFO = 'info'; - static readonly STATUS_SUCCESS = 'success'; - static readonly STATUS_WARNING = 'warning'; - static readonly STATUS_DANGER = 'danger'; - - static readonly ACCENT_ACTIVE = 'active'; - static readonly ACCENT_DISABLED = 'disabled'; - static readonly ACCENT_PRIMARY = 'primary'; - static readonly ACCENT_INFO = 'info'; - static readonly ACCENT_SUCCESS = 'success'; - static readonly ACCENT_WARNING = 'warning'; - static readonly ACCENT_DANGER = 'danger'; + /** + * Alert size, available sizes: + * `tiny`, `small`, `medium`, `large`, `giant` + * Unset by default. + */ + @Input() size: '' | NbComponentSize = ''; - static readonly OUTLINE_ACTIVE = 'active'; - static readonly OUTLINE_DISABLED = 'disabled'; - static readonly OUTLINE_PRIMARY = 'primary'; - static readonly OUTLINE_INFO = 'info'; - static readonly OUTLINE_SUCCESS = 'success'; - static readonly OUTLINE_WARNING = 'warning'; - static readonly OUTLINE_DANGER = 'danger'; + /** + * Alert status (adds specific styles): + * `primary`, `success`, `info`, `warning`, `danger`. + * Unset by default. + */ + @Input() status: '' | NbComponentStatus = ''; - size: string; - status: string; - accent: string; - outline: string; + /** + * Alert accent (color of the top border): + * `primary`, `success`, `info`, `warning`, `danger`. + * Unset by default. + */ + @Input() accent: '' | NbComponentStatus = ''; - @HostBinding('class.closable') - closableValue: boolean = false; + /** + * Alert outline (color of the border): + * `primary`, `success`, `info`, `warning`, `danger`. + * Unset by default. + */ + @Input() outline: '' | NbComponentStatus = ''; /** * Shows `close` icon */ @Input() - set closable(val: boolean) { - this.closableValue = convertToBoolProperty(val); + @HostBinding('class.closable') + get closable(): boolean { + return this._closable; + } + set closable(value: boolean) { + this._closable = convertToBoolProperty(value); } + protected _closable: boolean = false; + + /** + * Emits when chip is removed + * @type EventEmitter + */ + @Output() close = new EventEmitter(); - @HostBinding('class.xxsmall-alert') - get xxsmall() { - return this.size === NbAlertComponent.SIZE_XXSMALL; + /** + * Emits the removed chip event + */ + onClose() { + this.close.emit(); } - @HostBinding('class.xsmall-alert') - get xsmall() { - return this.size === NbAlertComponent.SIZE_XSMALL; + @HostBinding('class.size-tiny') + get tiny() { + return this.size === 'tiny'; } - @HostBinding('class.small-alert') + @HostBinding('class.size-small') get small() { - return this.size === NbAlertComponent.SIZE_SMALL; + return this.size === 'small'; } - @HostBinding('class.medium-alert') + @HostBinding('class.size-medium') get medium() { - return this.size === NbAlertComponent.SIZE_MEDIUM; + return this.size === 'medium'; } - @HostBinding('class.large-alert') + @HostBinding('class.size-large') get large() { - return this.size === NbAlertComponent.SIZE_LARGE; - } - - @HostBinding('class.xlarge-alert') - get xlarge() { - return this.size === NbAlertComponent.SIZE_XLARGE; + return this.size === 'large'; } - @HostBinding('class.xxlarge-alert') - get xxlarge() { - return this.size === NbAlertComponent.SIZE_XXLARGE; + @HostBinding('class.size-giant') + get giant() { + return this.size === 'giant'; } - @HostBinding('class.active-alert') - get active() { - return this.status === NbAlertComponent.STATUS_ACTIVE; - } - - @HostBinding('class.disabled-alert') - get disabled() { - return this.status === NbAlertComponent.STATUS_DISABLED; - } - - @HostBinding('class.primary-alert') + @HostBinding('class.status-primary') get primary() { - return this.status === NbAlertComponent.STATUS_PRIMARY; + return this.status === 'primary'; } - @HostBinding('class.info-alert') - get info() { - return this.status === NbAlertComponent.STATUS_INFO; + @HostBinding('class.status-success') + get success() { + return this.status === 'success'; } - @HostBinding('class.success-alert') - get success() { - return this.status === NbAlertComponent.STATUS_SUCCESS; + @HostBinding('class.status-info') + get info() { + return this.status === 'info'; } - @HostBinding('class.warning-alert') + @HostBinding('class.status-warning') get warning() { - return this.status === NbAlertComponent.STATUS_WARNING; + return this.status === 'warning'; } - @HostBinding('class.danger-alert') + @HostBinding('class.status-danger') get danger() { - return this.status === NbAlertComponent.STATUS_DANGER; - } - - @HostBinding('class.accent') - get hasAccent() { - return this.accent; - } - - @HostBinding('class.status') - get hasStatus() { - return this.status; + return this.status === 'danger'; } @HostBinding('class.accent-primary') get primaryAccent() { - return this.accent === NbAlertComponent.ACCENT_PRIMARY; - } - - @HostBinding('class.accent-info') - get infoAccent() { - return this.accent === NbAlertComponent.ACCENT_INFO; + return this.accent === 'primary'; } @HostBinding('class.accent-success') get successAccent() { - return this.accent === NbAlertComponent.ACCENT_SUCCESS; + return this.accent === 'success'; + } + + @HostBinding('class.accent-info') + get infoAccent() { + return this.accent === 'info'; } @HostBinding('class.accent-warning') get warningAccent() { - return this.accent === NbAlertComponent.ACCENT_WARNING; + return this.accent === 'warning'; } @HostBinding('class.accent-danger') get dangerAccent() { - return this.accent === NbAlertComponent.ACCENT_DANGER; - } - - @HostBinding('class.accent-active') - get activeAccent() { - return this.accent === NbAlertComponent.ACCENT_ACTIVE; - } - - @HostBinding('class.accent-disabled') - get disabledAccent() { - return this.accent === NbAlertComponent.ACCENT_DISABLED; - } - - @HostBinding('class.outline') - get hasOutline() { - return this.outline; + return this.accent === 'danger'; } @HostBinding('class.outline-primary') get primaryOutline() { - return this.outline === NbAlertComponent.OUTLINE_PRIMARY; - } - - @HostBinding('class.outline-info') - get infoOutline() { - return this.outline === NbAlertComponent.OUTLINE_INFO; + return this.outline === 'primary'; } @HostBinding('class.outline-success') get successOutline() { - return this.outline === NbAlertComponent.OUTLINE_SUCCESS; + return this.outline === 'success'; + } + + @HostBinding('class.outline-info') + get infoOutline() { + return this.outline === 'info'; } @HostBinding('class.outline-warning') get warningOutline() { - return this.outline === NbAlertComponent.OUTLINE_WARNING; + return this.outline === 'warning'; } @HostBinding('class.outline-danger') get dangerOutline() { - return this.outline === NbAlertComponent.OUTLINE_DANGER; - } - - @HostBinding('class.outline-active') - get activeOutline() { - return this.outline === NbAlertComponent.OUTLINE_ACTIVE; - } - - @HostBinding('class.outline-disabled') - get disabledOutline() { - return this.outline === NbAlertComponent.OUTLINE_DISABLED; - } - - /** - * Alert size, available sizes: - * xxsmall, xsmall, small, medium, large, xlarge, xxlarge - * @param {string} val - */ - @Input('size') - private set setSize(val: string) { - this.size = val; - } - - /** - * Alert status (adds specific styles): - * active, disabled, primary, info, success, warning, danger - * @param {string} val - */ - @Input('status') - private set setStatus(val: string) { - this.status = val; - } - - /** - * Alert accent (color of the top border): - * active, disabled, primary, info, success, warning, danger - * @param {string} val - */ - @Input('accent') - private set setAccent(val: string) { - this.accent = val; - } - - /** - * Alert outline (color of the border): - * active, disabled, primary, info, success, warning, danger - * @param {string} val - */ - @Input('outline') - private set setOutline(val: string) { - this.outline = val; - } - - /** - * Emits when chip is removed - * @type EventEmitter - */ - @Output() close = new EventEmitter(); - - /** - * Emits the removed chip event - */ - onClose() { - this.close.emit(); + return this.outline === 'danger'; } } diff --git a/src/framework/theme/components/alert/alert.spec.ts b/src/framework/theme/components/alert/alert.spec.ts index 27a4643243..baf2a24ebc 100644 --- a/src/framework/theme/components/alert/alert.spec.ts +++ b/src/framework/theme/components/alert/alert.spec.ts @@ -26,7 +26,7 @@ describe('Component: NbAlert', () => { fixture.detectChanges(); expect( fixture - .debugElement.nativeElement.classList.contains('danger-alert')) + .debugElement.nativeElement.classList.contains('status-danger')) .toBeTruthy() }); @@ -49,11 +49,11 @@ describe('Component: NbAlert', () => { }); it('should set size class', () => { - alert.size = 'xxsmall'; + alert.size = 'small'; fixture.detectChanges(); expect( fixture - .debugElement.nativeElement.classList.contains('xxsmall-alert')) + .debugElement.nativeElement.classList.contains('size-small')) .toBeTruthy() }); }); diff --git a/src/framework/theme/components/search/search.component.ts b/src/framework/theme/components/search/search.component.ts index ec5c00cf6e..2569008265 100644 --- a/src/framework/theme/components/search/search.component.ts +++ b/src/framework/theme/components/search/search.component.ts @@ -178,7 +178,7 @@ export class NbSearchFieldComponent implements OnChanges, AfterViewInit { * ```ts * @NgModule({ * imports: [ - * // ... + * // ... * NbSearchModule, * ], * }) diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss index 0ca8d0d161..972c0a5e9d 100644 --- a/src/framework/theme/styles/themes/_default.scss +++ b/src/framework/theme/styles/themes/_default.scss @@ -1162,33 +1162,51 @@ $theme: ( progress-bar-danger-filled-background-color: color-danger, progress-bar-danger-text-color: text-light-color, - alert-font-size: font-size, - alert-line-height: line-height, - alert-font-weight: font-weight-normal, - alert-fg: color-white, - alert-outline-fg: color-fg, - alert-bg: color-bg, - alert-active-bg: color-fg, - alert-disabled-bg: color-basic-200, - alert-disabled-fg: color-fg, - alert-primary-bg: color-primary, - alert-info-bg: color-info, - alert-success-bg: color-success, - alert-warning-bg: color-warning, - alert-danger-bg: color-danger, - alert-height-xxsmall: 52px, - alert-height-xsmall: 72px, - alert-height-small: 92px, - alert-height-medium: 112px, - alert-height-large: 132px, - alert-height-xlarge: 152px, - alert-height-xxlarge: 172px, - alert-shadow: none, - alert-border-radius: radius, + alert-background-color: color-basic-100, + alert-border-radius: 0.5rem, + alert-bottom-margin: 1.5rem, alert-padding: 1rem 1.125rem, - alert-closable-padding: 3rem, - alert-button-padding: 3rem, - alert-margin: margin, + alert-scrollbar-color: scrollbar-color, + alert-scrollbar-background-color: scrollbar-background-color, + alert-scrollbar-width: scrollbar-width, + alert-shadow: none, + alert-text-color: text-dark-color, + alert-text-font-family: text-paragraph-font-family, + alert-text-font-size: text-paragraph-font-size, + alert-text-font-weight: text-paragraph-font-weight, + alert-text-line-height: text-paragraph-line-height, + + alert-closable-start-padding: 3rem, + + alert-tiny-height: 4.5rem, + alert-small-height: 5.75rem, + alert-medium-height: 7rem, + alert-medium-padding: 1rem 1.125rem, + alert-large-height: 8.25rem, + alert-giant-height: 9.5rem, + + alert-primary-background-color: color-primary, + alert-primary-text-color: text-light-color, + alert-success-background-color: color-success, + alert-success-text-color: text-light-color, + alert-info-background-color: color-info, + alert-info-text-color: text-light-color, + alert-warning-background-color: color-warning, + alert-warning-text-color: text-light-color, + alert-danger-background-color: color-danger, + alert-danger-text-color: text-light-color, + + alert-accent-primary-color: color-primary, + alert-accent-info-color: color-info, + alert-accent-success-color: color-success, + alert-accent-warning-color: color-warning, + alert-accent-danger-color: color-danger, + + alert-outline-primary-color: color-primary, + alert-outline-info-color: color-info, + alert-outline-success-color: color-success, + alert-outline-warning-color: color-warning, + alert-outline-danger-color: color-danger, chat-font-size: font-size, chat-fg: color-white, diff --git a/src/playground/with-layout/alert/alert-accents.component.html b/src/playground/with-layout/alert/alert-accents.component.html index 7bd184223f..af384d0772 100644 --- a/src/playground/with-layout/alert/alert-accents.component.html +++ b/src/playground/with-layout/alert/alert-accents.component.html @@ -1,11 +1,9 @@ - You have been successfully authenticated! - You have been successfully authenticated! - You have been successfully authenticated! - You have been successfully authenticated! - You have been successfully authenticated! - You have been successfully authenticated! - You have been successfully authenticated! + Primary. You have been successfully authenticated! + Success. You have been successfully authenticated! + Info. You have been successfully authenticated! + Warning. You have been successfully authenticated! + Danger. You have been successfully authenticated! diff --git a/src/playground/with-layout/alert/alert-colors.component.html b/src/playground/with-layout/alert/alert-colors.component.html index 29a0a6ec77..a536924635 100644 --- a/src/playground/with-layout/alert/alert-colors.component.html +++ b/src/playground/with-layout/alert/alert-colors.component.html @@ -1,11 +1,9 @@ - You have been successfully authenticated! - You have been successfully authenticated! - You have been successfully authenticated! - You have been successfully authenticated! - You have been successfully authenticated! - You have been successfully authenticated! - You have been successfully authenticated! + Primary. You have been successfully authenticated! + Success. You have been successfully authenticated! + Info. You have been successfully authenticated! + Danger. You have been successfully authenticated! + Warning. You have been successfully authenticated! diff --git a/src/playground/with-layout/alert/alert-outline.component.html b/src/playground/with-layout/alert/alert-outline.component.html index 975a78847f..fcccc3ddea 100644 --- a/src/playground/with-layout/alert/alert-outline.component.html +++ b/src/playground/with-layout/alert/alert-outline.component.html @@ -1,11 +1,9 @@ - You have been successfully authenticated! - You have been successfully authenticated! - You have been successfully authenticated! - You have been successfully authenticated! - You have been successfully authenticated! - You have been successfully authenticated! - You have been successfully authenticated! + Primary. You have been successfully authenticated! + Success. You have been successfully authenticated! + Info. You have been successfully authenticated! + Danger. You have been successfully authenticated! + Warning. You have been successfully authenticated! diff --git a/src/playground/with-layout/alert/alert-sizes.component.html b/src/playground/with-layout/alert/alert-sizes.component.html index 36e08797d0..9b49f6387e 100644 --- a/src/playground/with-layout/alert/alert-sizes.component.html +++ b/src/playground/with-layout/alert/alert-sizes.component.html @@ -1,8 +1,9 @@ - You have been successfully authenticated! - You have been successfully authenticated! - - You have been successfully authenticated! + Tiny. You have been successfully authenticated! + Small. You have been successfully authenticated! + Medium. You have been successfully authenticated! + Large. You have been successfully authenticated! + Giant. You have been successfully authenticated! diff --git a/src/playground/with-layout/alert/alert-test.component.ts b/src/playground/with-layout/alert/alert-test.component.ts index f825d40a82..a52f88a9b4 100644 --- a/src/playground/with-layout/alert/alert-test.component.ts +++ b/src/playground/with-layout/alert/alert-test.component.ts @@ -29,9 +29,9 @@ import { Component } from '@angular/core'; }) export class AlertTestComponent { - sizes = ['xxsmall', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge']; - statuses = ['primary', 'success', 'info', 'warning', 'danger', 'active', 'disabled']; - accents = ['primary', 'success', 'info', 'warning', 'danger', 'active', 'disabled']; + sizes = [ 'tiny', 'small', 'medium', 'large', 'giant' ]; + statuses = [ 'primary', 'success', 'info', 'warning', 'danger' ]; + accents = [ 'primary', 'success', 'info', 'warning', 'danger' ]; alerts: any[]; accentAlerts: any;