@nepwork/dashboards
Version:
Dashboards for emergencies and monitoring
449 lines • 14.6 kB
JavaScript
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { __decorate, __metadata } from "tslib";
import { Component, Input, HostBinding } from '@angular/core';
/**
* Component intended to be used within the `<nb-card>` component.
* It adds styles for a preset header section.
*
* @styles
*
* card-header-text-color:
* card-header-text-font-family:
* card-header-text-font-size:
* card-header-text-font-weight:
* card-header-text-line-height:
* card-header-basic-background-color:
* card-header-basic-text-color:
* card-header-primary-background-color:
* card-header-primary-text-color:
* card-header-info-background-color:
* card-header-info-text-color:
* card-header-success-background-color:
* card-header-success-text-color:
* card-header-warning-background-color:
* card-header-warning-text-color:
* card-header-danger-background-color:
* card-header-danger-text-color:
* card-header-control-background-color:
* card-header-control-text-color:
*/
var NbCardHeaderComponent = /** @class */ (function () {
function NbCardHeaderComponent() {
}
NbCardHeaderComponent = __decorate([
Component({
selector: 'nb-card-header',
template: "<ng-content></ng-content>"
})
], NbCardHeaderComponent);
return NbCardHeaderComponent;
}());
export { NbCardHeaderComponent };
/**
* Component intended to be used within the `<nb-card>` component.
* Adds styles for a preset body section.
*/
var NbCardBodyComponent = /** @class */ (function () {
function NbCardBodyComponent() {
}
NbCardBodyComponent = __decorate([
Component({
selector: 'nb-card-body',
template: "<ng-content></ng-content>"
})
], NbCardBodyComponent);
return NbCardBodyComponent;
}());
export { NbCardBodyComponent };
/**
* Component intended to be used within the `<nb-card>` component.
* Adds styles for a preset footer section.
*/
var NbCardFooterComponent = /** @class */ (function () {
function NbCardFooterComponent() {
}
NbCardFooterComponent = __decorate([
Component({
selector: 'nb-card-footer',
template: "<ng-content></ng-content>"
})
], NbCardFooterComponent);
return NbCardFooterComponent;
}());
export { NbCardFooterComponent };
/**
* Basic content container component.
*
* Basic card example:
* @stacked-example(Showcase, card/card-showcase.component)
*
* Basic card configuration:
*
* ```html
* <nb-card>
* <nb-card-body>
* Card
* </nb-card-body>
* </nb-card>
* ```
*
* ### Installation
*
* Import `NbCardModule` to your feature module.
* ```ts
* @NgModule({
* imports: [
* // ...
* NbCardModule,
* ],
* })
* export class PageModule { }
* ```
* ### Usage
*
* Card with header and footer:
* @stacked-example(With Header & Footer, card/card-full.component)
*
* Most of the time main card content goes to `nb-card-body`,
* so it is styled and aligned in accordance with the header and footer.
* In case you need a higher level of control, you can pass contend directly to `nb-card`,
* so `nb-card-body` styling will not be applied.
*
* Consider an example with `nb-list` component:
* @stacked-example(Card with list, card/card-without-body.component)
*
* Colored cards could be simply configured by providing a `status` property:
* @stacked-example(Colored Card, card/card-colors.component)
*
* It is also possible to assign an `accent` property for a slight card highlight
* as well as combine it with `status`:
* @stacked-example(Accent Card, card/card-accents.component)
*
* Cards of smaller sizes could be combined and put on the same row with a bigger card so they have the same heights.
* @stacked-example(Card sizes combinations, card/card-sizes-combinations.component)
*
* @additional-example(Multiple Sizes, card/card-sizes.component)
*
* @styles
*
* card-background-color:
* card-text-color:
* card-text-font-family:
* card-text-font-size:
* card-text-font-weight:
* card-text-line-height:
* card-border-width:
* card-border-style:
* card-border-color:
* card-border-radius:
* card-padding:
* card-shadow:
* card-divider-color:
* card-divider-style:
* card-divider-width:
* card-height-tiny:
* card-height-small:
* card-height-medium:
* card-height-large:
* card-height-giant:
* card-margin-bottom:
* card-scrollbar-color:
* card-scrollbar-background-color:
* card-scrollbar-width:
*/
var NbCardComponent = /** @class */ (function () {
function NbCardComponent() {
this._size = '';
/**
* Card status:
* `basic`, `primary`, `info`, `success`, `warning`, `danger`, `control`
*/
this.status = '';
/**
* Card accent (color of the top border):
* `basic`, `primary`, `info`, `success`, `warning`, `danger`, `control`
*/
this.accent = '';
}
Object.defineProperty(NbCardComponent.prototype, "size", {
/**
* Card size, available sizes:
* tiny, small, medium, large, giant
*/
get: function () {
return this._size;
},
set: function (value) {
this._size = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbCardComponent.prototype, "tiny", {
get: function () {
return this.size === 'tiny';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbCardComponent.prototype, "small", {
get: function () {
return this.size === 'small';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbCardComponent.prototype, "medium", {
get: function () {
return this.size === 'medium';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbCardComponent.prototype, "large", {
get: function () {
return this.size === 'large';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbCardComponent.prototype, "giant", {
get: function () {
return this.size === 'giant';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbCardComponent.prototype, "primary", {
get: function () {
return this.status === 'primary';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbCardComponent.prototype, "info", {
get: function () {
return this.status === 'info';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbCardComponent.prototype, "success", {
get: function () {
return this.status === 'success';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbCardComponent.prototype, "warning", {
get: function () {
return this.status === 'warning';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbCardComponent.prototype, "danger", {
get: function () {
return this.status === 'danger';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbCardComponent.prototype, "basic", {
get: function () {
return this.status === 'basic';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbCardComponent.prototype, "control", {
get: function () {
return this.status === 'control';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbCardComponent.prototype, "hasAccent", {
get: function () {
return this.accent;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbCardComponent.prototype, "primaryAccent", {
get: function () {
return this.accent === 'primary';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbCardComponent.prototype, "infoAccent", {
get: function () {
return this.accent === 'info';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbCardComponent.prototype, "successAccent", {
get: function () {
return this.accent === 'success';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbCardComponent.prototype, "warningAccent", {
get: function () {
return this.accent === 'warning';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbCardComponent.prototype, "dangerAccent", {
get: function () {
return this.accent === 'danger';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbCardComponent.prototype, "basicAccent", {
get: function () {
return this.accent === 'basic';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbCardComponent.prototype, "controlAccent", {
get: function () {
return this.accent === 'control';
},
enumerable: true,
configurable: true
});
__decorate([
Input(),
__metadata("design:type", String),
__metadata("design:paramtypes", [String])
], NbCardComponent.prototype, "size", null);
__decorate([
Input(),
__metadata("design:type", String)
], NbCardComponent.prototype, "status", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], NbCardComponent.prototype, "accent", void 0);
__decorate([
HostBinding('class.size-tiny'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NbCardComponent.prototype, "tiny", null);
__decorate([
HostBinding('class.size-small'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NbCardComponent.prototype, "small", null);
__decorate([
HostBinding('class.size-medium'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NbCardComponent.prototype, "medium", null);
__decorate([
HostBinding('class.size-large'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NbCardComponent.prototype, "large", null);
__decorate([
HostBinding('class.size-giant'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NbCardComponent.prototype, "giant", null);
__decorate([
HostBinding('class.status-primary'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NbCardComponent.prototype, "primary", null);
__decorate([
HostBinding('class.status-info'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NbCardComponent.prototype, "info", null);
__decorate([
HostBinding('class.status-success'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NbCardComponent.prototype, "success", null);
__decorate([
HostBinding('class.status-warning'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NbCardComponent.prototype, "warning", null);
__decorate([
HostBinding('class.status-danger'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NbCardComponent.prototype, "danger", null);
__decorate([
HostBinding('class.status-basic'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NbCardComponent.prototype, "basic", null);
__decorate([
HostBinding('class.status-control'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NbCardComponent.prototype, "control", null);
__decorate([
HostBinding('class.accent'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NbCardComponent.prototype, "hasAccent", null);
__decorate([
HostBinding('class.accent-primary'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NbCardComponent.prototype, "primaryAccent", null);
__decorate([
HostBinding('class.accent-info'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NbCardComponent.prototype, "infoAccent", null);
__decorate([
HostBinding('class.accent-success'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NbCardComponent.prototype, "successAccent", null);
__decorate([
HostBinding('class.accent-warning'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NbCardComponent.prototype, "warningAccent", null);
__decorate([
HostBinding('class.accent-danger'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NbCardComponent.prototype, "dangerAccent", null);
__decorate([
HostBinding('class.accent-basic'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NbCardComponent.prototype, "basicAccent", null);
__decorate([
HostBinding('class.accent-control'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NbCardComponent.prototype, "controlAccent", null);
NbCardComponent = __decorate([
Component({
selector: 'nb-card',
template: "\n <ng-content select=\"nb-card-header\"></ng-content>\n <ng-content select=\"nb-card-body\"></ng-content>\n <ng-content></ng-content>\n <ng-content select=\"nb-card-footer\"></ng-content>\n ",
styles: [":host{display:flex;flex-direction:column}\n"]
})
], NbCardComponent);
return NbCardComponent;
}());
export { NbCardComponent };
//# sourceMappingURL=card.component.js.map