@nepwork/dashboards
Version:
Dashboards for emergencies and monitoring
243 lines • 7.25 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 { ChangeDetectionStrategy, Component, ElementRef, HostBinding, Input, Renderer2, } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { NbIconLibraries } from './icon-libraries';
/**
* Icon component. Allows to render both `svg` and `font` icons.
* Starting from Nebular 4.0 uses [Eva Icons](https://akveo.github.io/eva-icons/) pack by default.
*
* Basic icon example:
* @stacked-example(Showcase, icon/icon-showcase.component)
*
* Icon configuration:
*
* ```html
* <nb-icon icon="star"></nb-icon>
* ```
* ### Installation
*
* By default Nebular comes without any pre-installed icon pack.
* Starting with Nebular 4.0.0 we ship separate package called `@nebular/eva-icons`
* which integrates SVG [Eva Icons](https://akveo.github.io/eva-icons/) pack to Nebular. To add it to your
* project run:
* ```sh
* npm i @nebular/eva-icons
* ```
* This command will install Eva Icons pack. Then register `NbEvaIconsModule` into your app module:
* ```ts
* import { NbEvaIconsModule } from '@nebular/eva-icons';
*
* @NgModule({
* imports: [
* // ...
* NbEvaIconsModule,
* ],
* })
* export class AppModule { }
* ```
* Last thing, import `NbIconModule` to your feature module where you need to show an icon:
* ```ts
* import { NbIconModule } from '@nebular/theme';
*
* @NgModule({
* imports: [
* // ...
* NbIconModule,
* ],
* })
* export class PageModule { }
* ```
* ### Usage
*
* Icon can be colored using `status` input:
* ```html
* <nb-icon icon="star" status="warning"></nb-icon>
* ```
*
* Colored icons:
* @stacked-example(Colored Icons, icon/icon-colors.component)
*
* In case you need to specify an icon from a specific icon pack, this could be done using `pack` input property:
* ```html
* <nb-icon icon="star" pack="font-awesome"></nb-icon>
* ```
* Additional icon settings (if available by the icon pack) could be passed using `options` input:
*
* ```html
* <nb-icon icon="star" [options]="{ animation: { type: 'zoom' } }"></nb-icon>
* ```
*
* @styles
*
* icon-font-size:
* icon-line-height:
* icon-width:
* icon-height:
* icon-svg-vertical-align:
* icon-basic-color:
* icon-primary-color:
* icon-info-color:
* icon-success-color:
* icon-warning-color:
* icon-danger-color:
* icon-control-color:
*/
let NbIconComponent = class NbIconComponent {
constructor(sanitizer, iconLibrary, el, renderer) {
this.sanitizer = sanitizer;
this.iconLibrary = iconLibrary;
this.el = el;
this.renderer = renderer;
this.prevClasses = [];
this.html = '';
}
get primary() {
return this.status === 'primary';
}
get info() {
return this.status === 'info';
}
get success() {
return this.status === 'success';
}
get warning() {
return this.status === 'warning';
}
get danger() {
return this.status === 'danger';
}
get basic() {
return this.status === 'basic';
}
get control() {
return this.status === 'control';
}
/**
* Sets all icon configurable properties via config object.
* If passed value is a string set icon name.
* @docs-private
*/
get config() {
return this._config;
}
set config(value) {
if (!value) {
return;
}
this._config = value;
if (typeof value === 'string') {
this.icon = value;
}
else {
this.icon = value.icon;
this.pack = value.pack;
this.status = value.status;
this.options = value.options;
}
}
ngOnInit() {
this.iconDef = this.renderIcon(this.icon, this.pack, this.options);
}
ngOnChanges() {
if (this.iconDef) {
this.iconDef = this.renderIcon(this.icon, this.pack, this.options);
}
}
renderIcon(name, pack, options) {
const iconDefinition = this.iconLibrary.getIcon(name, pack);
const content = iconDefinition.icon.getContent(options);
if (content) {
this.html = this.sanitizer.bypassSecurityTrustHtml(content);
}
this.assignClasses(iconDefinition.icon.getClasses(options));
return iconDefinition;
}
assignClasses(classes) {
this.prevClasses.forEach((className) => {
this.renderer.removeClass(this.el.nativeElement, className);
});
classes.forEach((className) => {
this.renderer.addClass(this.el.nativeElement, className);
});
this.prevClasses = classes;
}
};
__decorate([
HostBinding('innerHtml'),
__metadata("design:type", Object)
], NbIconComponent.prototype, "html", void 0);
__decorate([
HostBinding('class.status-primary'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NbIconComponent.prototype, "primary", null);
__decorate([
HostBinding('class.status-info'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NbIconComponent.prototype, "info", null);
__decorate([
HostBinding('class.status-success'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NbIconComponent.prototype, "success", null);
__decorate([
HostBinding('class.status-warning'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NbIconComponent.prototype, "warning", null);
__decorate([
HostBinding('class.status-danger'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NbIconComponent.prototype, "danger", null);
__decorate([
HostBinding('class.status-basic'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NbIconComponent.prototype, "basic", null);
__decorate([
HostBinding('class.status-control'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NbIconComponent.prototype, "control", null);
__decorate([
Input(),
__metadata("design:type", String)
], NbIconComponent.prototype, "icon", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], NbIconComponent.prototype, "pack", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], NbIconComponent.prototype, "options", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], NbIconComponent.prototype, "status", void 0);
__decorate([
Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], NbIconComponent.prototype, "config", null);
NbIconComponent = __decorate([
Component({
selector: 'nb-icon',
template: '',
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [":host{display:inline-block}\n"]
}),
__metadata("design:paramtypes", [DomSanitizer,
NbIconLibraries,
ElementRef,
Renderer2])
], NbIconComponent);
export { NbIconComponent };
//# sourceMappingURL=icon.component.js.map