@nepwork/dashboards
Version:
Dashboards for emergencies and monitoring
370 lines • 13.4 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, HostBinding, Input } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { convertToBoolProperty } from '../helpers';
/**
* Represents a component showing a user avatar (picture) with a user name on the right.
* @stacked-example(Showcase, user/user-showcase.component)
*
* ```ts
* <nb-user name="John Doe" title="Engineer"></nb-user>
* ```
*
* ### Installation
*
* Import `NbUserModule` to your feature module.
* ```ts
* @NgModule({
* imports: [
* // ...
* NbUserModule,
* ],
* })
* export class PageModule { }
* ```
* ### Usage
*
* Available in multiple sizes:
* @stacked-example(Multiple Sizes, user/user-sizes.component)
*
*
* You can hide unnecessary captions (name, title or both):
* @stacked-example(Hide captions in user component, user/user-hide-captions.component)
*
*
* You can set custom avatar background-color, user image (as link or BASE64 string) and disable user initials:
* @stacked-example(Avatar image settings, user/user-avatar-settings.component)
*
* Component shape could be controlled with `shape` input.
* @stacked-example(Shapes, user/user-shape.component)
*
* @styles
*
* user-picture-box-background-color:
* user-picture-box-border-color:
* user-picture-box-border-width:
* user-initials-text-color:
* user-initials-text-font-family:
* user-initials-text-font-weight:
* user-name-text-color:
* user-name-text-font-family:
* user-name-text-font-weight:
* user-title-text-color:
* user-title-text-font-family:
* user-title-text-font-weight:
* user-rectangle-border-radius:
* user-semi-round-border-radius:
* user-round-border-radius:
* user-tiny-height:
* user-tiny-width:
* user-tiny-initials-text-font-size:
* user-tiny-initials-text-line-height:
* user-tiny-name-text-font-size:
* user-tiny-name-text-line-height:
* user-tiny-title-text-font-size:
* user-tiny-title-text-line-height:
* user-small-height:
* user-small-width:
* user-small-initials-text-font-size:
* user-small-initials-text-line-height:
* user-small-name-text-font-size:
* user-small-name-text-line-height:
* user-small-title-text-font-size:
* user-small-title-text-line-height:
* user-medium-height:
* user-medium-width:
* user-medium-initials-text-font-size:
* user-medium-initials-text-line-height:
* user-medium-name-text-font-size:
* user-medium-name-text-line-height:
* user-medium-title-text-font-size:
* user-medium-title-text-line-height:
* user-large-height:
* user-large-width:
* user-large-initials-text-font-size:
* user-large-initials-text-line-height:
* user-large-name-text-font-size:
* user-large-name-text-line-height:
* user-large-title-text-font-size:
* user-large-title-text-line-height:
* user-giant-height:
* user-giant-width:
* user-giant-initials-text-font-size:
* user-giant-initials-text-line-height:
* user-giant-name-text-font-size:
* user-giant-name-text-line-height:
* user-giant-title-text-font-size:
* user-giant-title-text-line-height:
*/
var NbUserComponent = /** @class */ (function () {
function NbUserComponent(domSanitizer) {
this.domSanitizer = domSanitizer;
/**
* Specifies a name to be shown on the right of a user picture
* @type string
*/
this.name = 'Anonymous';
/**
* Size of the component.
* Possible values: `tiny`, `small`, `medium` (default), `large`, 'giant'.
*/
this.size = 'medium';
/**
* Shape of the picture box.
* Possible values: `rectangle`, `semi-round`, `round`.
*/
this.shape = 'round';
this._showName = true;
this._showTitle = true;
this._showInitials = true;
/**
* Badge status (adds specific styles):
* `primary`, `info`, `success`, `warning`, `danger`
* @param {string} val
*/
this.badgeStatus = 'basic';
}
Object.defineProperty(NbUserComponent.prototype, "picture", {
/**
* Absolute path to a user picture or base64 image.
* User name initials will be shown if no picture specified (JD for John Doe).
* @type string
*/
set: function (value) {
this.imageBackgroundStyle = value ? this.domSanitizer.bypassSecurityTrustStyle("url(" + value + ")") : null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbUserComponent.prototype, "showName", {
/**
* Whether to show a user name or not
*/
get: function () {
return this._showName;
},
set: function (val) {
this._showName = convertToBoolProperty(val);
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbUserComponent.prototype, "showTitle", {
/**
* Whether to show a user title or not
* @type boolean
*/
get: function () {
return this._showTitle;
},
set: function (val) {
this._showTitle = convertToBoolProperty(val);
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbUserComponent.prototype, "showInitials", {
/**
* Whether to show a user initials (if no picture specified) or not
* @type boolean
*/
get: function () {
return this._showInitials;
},
set: function (val) {
this._showInitials = convertToBoolProperty(val);
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbUserComponent.prototype, "onlyPicture", {
/**
* Whether to show only a picture or also show the name and title
* @type boolean
*/
get: function () {
return !this.showName && !this.showTitle;
},
set: function (val) {
this.showName = this.showTitle = !convertToBoolProperty(val);
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbUserComponent.prototype, "tiny", {
get: function () {
return this.size === 'tiny';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbUserComponent.prototype, "small", {
get: function () {
return this.size === 'small';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbUserComponent.prototype, "medium", {
get: function () {
return this.size === 'medium';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbUserComponent.prototype, "large", {
get: function () {
return this.size === 'large';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbUserComponent.prototype, "giant", {
get: function () {
return this.size === 'giant';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbUserComponent.prototype, "rectangle", {
get: function () {
return this.shape === 'rectangle';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbUserComponent.prototype, "semiRound", {
get: function () {
return this.shape === 'semi-round';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbUserComponent.prototype, "round", {
get: function () {
return this.shape === 'round';
},
enumerable: true,
configurable: true
});
NbUserComponent.prototype.getInitials = function () {
if (this.name) {
var names = this.name.split(' ');
return names.map(function (n) { return n.charAt(0); }).splice(0, 2).join('').toUpperCase();
}
return '';
};
__decorate([
Input(),
__metadata("design:type", String)
], NbUserComponent.prototype, "name", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], NbUserComponent.prototype, "title", void 0);
__decorate([
Input(),
__metadata("design:type", String),
__metadata("design:paramtypes", [String])
], NbUserComponent.prototype, "picture", null);
__decorate([
Input(),
__metadata("design:type", String)
], NbUserComponent.prototype, "color", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], NbUserComponent.prototype, "size", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], NbUserComponent.prototype, "shape", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], NbUserComponent.prototype, "showName", null);
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], NbUserComponent.prototype, "showTitle", null);
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], NbUserComponent.prototype, "showInitials", null);
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], NbUserComponent.prototype, "onlyPicture", null);
__decorate([
Input(),
__metadata("design:type", String)
], NbUserComponent.prototype, "badgeText", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], NbUserComponent.prototype, "badgeStatus", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], NbUserComponent.prototype, "badgePosition", void 0);
__decorate([
HostBinding('class.size-tiny'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], NbUserComponent.prototype, "tiny", null);
__decorate([
HostBinding('class.size-small'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], NbUserComponent.prototype, "small", null);
__decorate([
HostBinding('class.size-medium'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], NbUserComponent.prototype, "medium", null);
__decorate([
HostBinding('class.size-large'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], NbUserComponent.prototype, "large", null);
__decorate([
HostBinding('class.size-giant'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], NbUserComponent.prototype, "giant", null);
__decorate([
HostBinding('class.shape-rectangle'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], NbUserComponent.prototype, "rectangle", null);
__decorate([
HostBinding('class.shape-semi-round'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], NbUserComponent.prototype, "semiRound", null);
__decorate([
HostBinding('class.shape-round'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], NbUserComponent.prototype, "round", null);
NbUserComponent = __decorate([
Component({
selector: 'nb-user',
template: "<div class=\"user-container\">\n <div *ngIf=\"imageBackgroundStyle\" class=\"user-picture image\" [style.background-image]=\"imageBackgroundStyle\">\n <nb-badge *ngIf=\"badgeText\" [text]=\"badgeText\" [status]=\"badgeStatus\" [position]=\"badgePosition\"></nb-badge>\n </div>\n <div *ngIf=\"!imageBackgroundStyle\" class=\"user-picture initials\" [style.background-color]=\"color\">\n <ng-container *ngIf=\"showInitials\">\n {{ getInitials() }}\n </ng-container>\n <nb-badge *ngIf=\"badgeText\" [text]=\"badgeText\" [status]=\"badgeStatus\" [position]=\"badgePosition\"></nb-badge>\n </div>\n\n <div class=\"info-container\">\n <div *ngIf=\"showName && name\" class=\"user-name\">{{ name }}</div>\n <div *ngIf=\"showTitle && title\" class=\"user-title\">{{ title }}</div>\n </div>\n</div>\n",
styles: [":host{display:flex}:host .user-container{position:relative;display:flex;align-items:center}:host .user-picture{position:relative;flex-shrink:0}:host .user-picture.image{background-size:cover;background-repeat:no-repeat}:host .user-picture.initials{display:flex;align-items:center;justify-content:center}[dir=rtl] :host .user-name,[dir=rtl] :host .user-title{text-align:right}[dir=ltr] :host .info-container{margin-left:.5rem}[dir=rtl] :host .info-container{margin-right:.5rem}\n"]
}),
__metadata("design:paramtypes", [DomSanitizer])
], NbUserComponent);
return NbUserComponent;
}());
export { NbUserComponent };
//# sourceMappingURL=user.component.js.map