@wizco/fenixds-ngx
Version:
Componentes fenix design system para Angular.
59 lines • 13.5 kB
JavaScript
import { CommonModule } from '@angular/common';
import { Component, Input, ViewEncapsulation } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class UserAvatarComponent {
/** Nome do usuário */
userName = "";
/** Url da imagem opcional */
userAvatar = "";
/** Tamanho do componente */
size = 'md';
/** Theme mudança de cores do componente */
theme = 'secondary';
/** solid tipo com bg predominant */
solid = false;
/**
* @ignore
*/
userNameLetters = "";
constructor() { }
/** Mudança de parâmetros dinâmicos */
ngOnChanges() {
this._prepareNameLetters();
}
/** Retorne o nome abreviado */
_prepareNameLetters() {
let capitalizeLetters = "";
if (this.userName) {
capitalizeLetters = this.userName.charAt(0);
let _arrUserName = this.userName.split(' ');
if (_arrUserName.length > 1) {
capitalizeLetters += _arrUserName[_arrUserName.length - 1].charAt(0);
}
}
this.userNameLetters = capitalizeLetters.toUpperCase();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserAvatarComponent, isStandalone: true, selector: "wco-avatar", inputs: { userName: ["name", "userName"], userAvatar: ["image", "userAvatar"], size: "size", theme: "theme", solid: "solid" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n [class]=\"\r\n 'wco-user-avatar wco-user-avatar__size--' + size + ' wco-user-avatar__theme--' + theme + ' ' + (solid ? 'wco-user-solid' : '') \"\r\n [title]=\"userName\" >\r\n <span>{{userNameLetters}}</span>\r\n <img *ngIf=\"userAvatar\" [src]=\"userAvatar\" [alt]=\"userName\" />\r\n</div>\r\n", styles: [".wco-user-avatar{--wco-user-avatar-bg: var(--wco-color-secondary-50);--wco-user-avatar-color: var(--wco-color-secondary-500);overflow:hidden;position:relative;border-radius:50%;background:var(--wco-user-avatar-bg);display:flex;align-items:center;justify-content:center;border:1px solid var(--wco-user-avatar-color, #576ff7);width:var(--wco-size-xy-user-photo, 48px);height:var(--wco-size-xy-user-photo, 48px)}.wco-user-avatar.wco-user-avatar__size--xs{--wco-size-xy-user-photo: 24px;--wco-size-user-photo: 11px}.wco-user-avatar.wco-user-avatar__size--sm{--wco-size-xy-user-photo: 32px;--wco-size-user-photo: 14px}.wco-user-avatar.wco-user-avatar__size--md{--wco-size-xy-user-photo: 48px;--wco-size-user-photo: 16px}.wco-user-avatar.wco-user-avatar__size--lg{--wco-size-xy-user-photo: 56px;--wco-size-user-photo: 18px}.wco-user-avatar.wco-user-avatar__size--xl{--wco-size-xy-user-photo: 90px;--wco-size-user-photo: 20px}.wco-user-avatar.wco-user-avatar__theme--primary{--wco-user-avatar-color: var(--wco-color-primary-500);--wco-user-avatar-bg: var(--wco-color-primary-50)}.wco-user-avatar.wco-user-avatar__theme--secondary{--wco-user-avatar-color: var(--wco-color-secondary-500);--wco-user-avatar-bg: var(--wco-color-secondary-50)}.wco-user-avatar.wco-user-avatar__theme--light{--wco-user-avatar-color: var(--wco-color-neutral-100);--wco-user-avatar-bg: var(--wco-color-neutral-900)}.wco-user-avatar.wco-user-avatar__theme--dark{--wco-user-avatar-color: var(--wco-color-neutral-700);--wco-user-avatar-bg: var(--wco-color-neutral-50)}.wco-user-avatar.wco-user-solid.wco-user-avatar__theme--primary{--wco-user-avatar-bg: var(--wco-color-primary-500);--wco-user-avatar-color: var(--wco-color-primary-50)}.wco-user-avatar.wco-user-solid.wco-user-avatar__theme--secondary{--wco-user-avatar-bg: var(--wco-color-secondary-500);--wco-user-avatar-color: var(--wco-color-secondary-50)}.wco-user-avatar.wco-user-solid.wco-user-avatar__theme--light{--wco-user-avatar-bg: var(--wco-color-neutral-100);--wco-user-avatar-color: var(--wco-color-neutral-900)}.wco-user-avatar.wco-user-solid.wco-user-avatar__theme--dark{--wco-user-avatar-bg: var(--wco-color-neutral-700);--wco-user-avatar-color: var(--wco-color-neutral-50)}.wco-user-avatar span,.wco-user-avatar img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:0;margin:0;display:block}.wco-user-avatar img{width:var(--wco-size-xy-user-photo);height:var(--wco-size-xy-user-photo);object-fit:cover}.wco-user-avatar span{font-family:var(--wco-font-family, \"Roboto\", sans-serif);width:var(--wco-size-xy-user-photo);text-align:center;font-weight:700;font-size:var(--wco-size-user-photo, 18px);color:var(--wco-user-avatar-color, #ffffff);letter-spacing:.4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAvatarComponent, decorators: [{
type: Component,
args: [{ selector: 'wco-avatar', standalone: true, encapsulation: ViewEncapsulation.None, imports: [CommonModule], template: "<div\r\n [class]=\"\r\n 'wco-user-avatar wco-user-avatar__size--' + size + ' wco-user-avatar__theme--' + theme + ' ' + (solid ? 'wco-user-solid' : '') \"\r\n [title]=\"userName\" >\r\n <span>{{userNameLetters}}</span>\r\n <img *ngIf=\"userAvatar\" [src]=\"userAvatar\" [alt]=\"userName\" />\r\n</div>\r\n", styles: [".wco-user-avatar{--wco-user-avatar-bg: var(--wco-color-secondary-50);--wco-user-avatar-color: var(--wco-color-secondary-500);overflow:hidden;position:relative;border-radius:50%;background:var(--wco-user-avatar-bg);display:flex;align-items:center;justify-content:center;border:1px solid var(--wco-user-avatar-color, #576ff7);width:var(--wco-size-xy-user-photo, 48px);height:var(--wco-size-xy-user-photo, 48px)}.wco-user-avatar.wco-user-avatar__size--xs{--wco-size-xy-user-photo: 24px;--wco-size-user-photo: 11px}.wco-user-avatar.wco-user-avatar__size--sm{--wco-size-xy-user-photo: 32px;--wco-size-user-photo: 14px}.wco-user-avatar.wco-user-avatar__size--md{--wco-size-xy-user-photo: 48px;--wco-size-user-photo: 16px}.wco-user-avatar.wco-user-avatar__size--lg{--wco-size-xy-user-photo: 56px;--wco-size-user-photo: 18px}.wco-user-avatar.wco-user-avatar__size--xl{--wco-size-xy-user-photo: 90px;--wco-size-user-photo: 20px}.wco-user-avatar.wco-user-avatar__theme--primary{--wco-user-avatar-color: var(--wco-color-primary-500);--wco-user-avatar-bg: var(--wco-color-primary-50)}.wco-user-avatar.wco-user-avatar__theme--secondary{--wco-user-avatar-color: var(--wco-color-secondary-500);--wco-user-avatar-bg: var(--wco-color-secondary-50)}.wco-user-avatar.wco-user-avatar__theme--light{--wco-user-avatar-color: var(--wco-color-neutral-100);--wco-user-avatar-bg: var(--wco-color-neutral-900)}.wco-user-avatar.wco-user-avatar__theme--dark{--wco-user-avatar-color: var(--wco-color-neutral-700);--wco-user-avatar-bg: var(--wco-color-neutral-50)}.wco-user-avatar.wco-user-solid.wco-user-avatar__theme--primary{--wco-user-avatar-bg: var(--wco-color-primary-500);--wco-user-avatar-color: var(--wco-color-primary-50)}.wco-user-avatar.wco-user-solid.wco-user-avatar__theme--secondary{--wco-user-avatar-bg: var(--wco-color-secondary-500);--wco-user-avatar-color: var(--wco-color-secondary-50)}.wco-user-avatar.wco-user-solid.wco-user-avatar__theme--light{--wco-user-avatar-bg: var(--wco-color-neutral-100);--wco-user-avatar-color: var(--wco-color-neutral-900)}.wco-user-avatar.wco-user-solid.wco-user-avatar__theme--dark{--wco-user-avatar-bg: var(--wco-color-neutral-700);--wco-user-avatar-color: var(--wco-color-neutral-50)}.wco-user-avatar span,.wco-user-avatar img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:0;margin:0;display:block}.wco-user-avatar img{width:var(--wco-size-xy-user-photo);height:var(--wco-size-xy-user-photo);object-fit:cover}.wco-user-avatar span{font-family:var(--wco-font-family, \"Roboto\", sans-serif);width:var(--wco-size-xy-user-photo);text-align:center;font-weight:700;font-size:var(--wco-size-user-photo, 18px);color:var(--wco-user-avatar-color, #ffffff);letter-spacing:.4px}\n"] }]
}], ctorParameters: () => [], propDecorators: { userName: [{
type: Input,
args: ['name']
}], userAvatar: [{
type: Input,
args: ['image']
}], size: [{
type: Input,
args: ['size']
}], theme: [{
type: Input,
args: ['theme']
}], solid: [{
type: Input,
args: ['solid']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlci1hdmF0YXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWNvbXBvbmVudHMvc3JjL2xpYi91c2VyLWF2YXRhci91c2VyLWF2YXRhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtY29tcG9uZW50cy9zcmMvbGliL3VzZXItYXZhdGFyL3VzZXItYXZhdGFyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBYSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBVS9FLE1BQU0sT0FBTyxtQkFBbUI7SUFFOUIsc0JBQXNCO0lBQ1AsUUFBUSxHQUFXLEVBQUUsQ0FBQztJQUNyQyw2QkFBNkI7SUFDYixVQUFVLEdBQVcsRUFBRSxDQUFDO0lBQ3hDLDZCQUE2QjtJQUNkLElBQUksR0FBcUMsSUFBSSxDQUFDO0lBQzdELDRDQUE0QztJQUM1QixLQUFLLEdBQStDLFdBQVcsQ0FBQztJQUVoRixxQ0FBcUM7SUFDckIsS0FBSyxHQUFZLEtBQUssQ0FBQztJQUV2Qzs7TUFFRTtJQUNLLGVBQWUsR0FBVyxFQUFFLENBQUM7SUFFcEMsZ0JBQWdCLENBQUM7SUFHakIsc0NBQXNDO0lBQ3RDLFdBQVc7UUFDVCxJQUFJLENBQUMsbUJBQW1CLEVBQUUsQ0FBQztJQUM3QixDQUFDO0lBRUQsK0JBQStCO0lBQ3ZCLG1CQUFtQjtRQUN6QixJQUFJLGlCQUFpQixHQUFXLEVBQUUsQ0FBQztRQUNuQyxJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUcsQ0FBQztZQUNuQixpQkFBaUIsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUM1QyxJQUFJLFlBQVksR0FBYSxJQUFJLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQztZQUN0RCxJQUFJLFlBQVksQ0FBQyxNQUFNLEdBQUcsQ0FBQyxFQUFFLENBQUM7Z0JBQzVCLGlCQUFpQixJQUFJLFlBQVksQ0FBQyxZQUFZLENBQUMsTUFBTSxHQUFFLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUN0RSxDQUFDO1FBQ0gsQ0FBQztRQUNELElBQUksQ0FBQyxlQUFlLEdBQUcsaUJBQWlCLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDekQsQ0FBQzt3R0F0Q1UsbUJBQW1COzRGQUFuQixtQkFBbUIsME5DWGhDLHlUQU9BLHl0RkRDWSxZQUFZOzs0RkFHWCxtQkFBbUI7a0JBUi9CLFNBQVM7K0JBQ0UsWUFBWSxjQUNWLElBQUksaUJBRUQsaUJBQWlCLENBQUMsSUFBSSxXQUM1QixDQUFDLFlBQVksQ0FBQzt3REFNUixRQUFRO3NCQUF0QixLQUFLO3VCQUFDLE1BQU07Z0JBRUcsVUFBVTtzQkFBekIsS0FBSzt1QkFBQyxPQUFPO2dCQUVDLElBQUk7c0JBQWxCLEtBQUs7dUJBQUMsTUFBTTtnQkFFRyxLQUFLO3NCQUFwQixLQUFLO3VCQUFDLE9BQU87Z0JBR0UsS0FBSztzQkFBcEIsS0FBSzt1QkFBQyxPQUFPIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25DaGFuZ2VzLCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICd3Y28tYXZhdGFyJyxcclxuICBzdGFuZGFsb25lOiB0cnVlLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi91c2VyLWF2YXRhci5jb21wb25lbnQuaHRtbCcsXHJcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcclxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlXSxcclxuICBzdHlsZVVybHM6IFsnLi91c2VyLWF2YXRhci5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBVc2VyQXZhdGFyQ29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzIHtcclxuXHJcbiAgLyoqIE5vbWUgZG8gdXN1w6FyaW8gKi9cclxuICBASW5wdXQoJ25hbWUnKSB1c2VyTmFtZTogc3RyaW5nID0gXCJcIjtcclxuICAvKiogVXJsIGRhIGltYWdlbSBvcGNpb25hbCAqL1xyXG4gIEBJbnB1dCgnaW1hZ2UnKSB1c2VyQXZhdGFyOiBzdHJpbmcgPSBcIlwiO1xyXG4gIC8qKiBUYW1hbmhvIGRvIGNvbXBvbmVudGUgICovXHJcbiAgQElucHV0KCdzaXplJykgc2l6ZTogJ3hzJyB8ICdzbScgfCAnbWQnIHwgJ2xnJyB8ICd4bCcgPSAnbWQnO1xyXG4gIC8qKiBUaGVtZSBtdWRhbsOnYSBkZSBjb3JlcyBkbyBjb21wb25lbnRlICAqL1xyXG4gIEBJbnB1dCgndGhlbWUnKSB0aGVtZTogJ3ByaW1hcnknIHwgJ3NlY29uZGFyeScgfCAnbGlnaHQnIHwgJ2RhcmsnID0gJ3NlY29uZGFyeSc7XHJcblxyXG4gIC8qKiBzb2xpZCB0aXBvIGNvbSBiZyBwcmVkb21pbmFudCAgKi9cclxuICBASW5wdXQoJ3NvbGlkJykgc29saWQ6IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgLyoqXHJcbiAgKiBAaWdub3JlXHJcbiAgKi9cclxuICBwdWJsaWMgdXNlck5hbWVMZXR0ZXJzOiBzdHJpbmcgPSBcIlwiO1xyXG5cclxuICBjb25zdHJ1Y3RvcigpIHsgfVxyXG5cclxuXHJcbiAgLyoqIE11ZGFuw6dhIGRlIHBhcsOibWV0cm9zIGRpbsOibWljb3MgKi9cclxuICBuZ09uQ2hhbmdlcygpIHtcclxuICAgIHRoaXMuX3ByZXBhcmVOYW1lTGV0dGVycygpO1xyXG4gIH1cclxuXHJcbiAgLyoqIFJldG9ybmUgbyBub21lIGFicmV2aWFkbyAqL1xyXG4gIHByaXZhdGUgX3ByZXBhcmVOYW1lTGV0dGVycygpOiB2b2lkIHtcclxuICAgIGxldCBjYXBpdGFsaXplTGV0dGVyczogc3RyaW5nID0gXCJcIjtcclxuICAgIGlmKCB0aGlzLnVzZXJOYW1lICkge1xyXG4gICAgICBjYXBpdGFsaXplTGV0dGVycyA9IHRoaXMudXNlck5hbWUuY2hhckF0KDApO1xyXG4gICAgICBsZXQgX2FyclVzZXJOYW1lOiBzdHJpbmdbXSA9IHRoaXMudXNlck5hbWUuc3BsaXQoJyAnKTtcclxuICAgICAgaWYgKF9hcnJVc2VyTmFtZS5sZW5ndGggPiAxKSB7XHJcbiAgICAgICAgY2FwaXRhbGl6ZUxldHRlcnMgKz0gX2FyclVzZXJOYW1lW19hcnJVc2VyTmFtZS5sZW5ndGggLTFdLmNoYXJBdCgwKTtcclxuICAgICAgfVxyXG4gICAgfVxyXG4gICAgdGhpcy51c2VyTmFtZUxldHRlcnMgPSBjYXBpdGFsaXplTGV0dGVycy50b1VwcGVyQ2FzZSgpO1xyXG4gIH1cclxuXHJcbn1cclxuIiwiPGRpdlxyXG4gIFtjbGFzc109XCJcclxuICAgICd3Y28tdXNlci1hdmF0YXIgd2NvLXVzZXItYXZhdGFyX19zaXplLS0nICsgc2l6ZSArICcgd2NvLXVzZXItYXZhdGFyX190aGVtZS0tJyArIHRoZW1lICsgJyAnICsgKHNvbGlkID8gJ3djby11c2VyLXNvbGlkJyA6ICcnKSBcIlxyXG4gIFt0aXRsZV09XCJ1c2VyTmFtZVwiID5cclxuICA8c3Bhbj57e3VzZXJOYW1lTGV0dGVyc319PC9zcGFuPlxyXG4gIDxpbWcgKm5nSWY9XCJ1c2VyQXZhdGFyXCIgW3NyY109XCJ1c2VyQXZhdGFyXCIgW2FsdF09XCJ1c2VyTmFtZVwiIC8+XHJcbjwvZGl2PlxyXG4iXX0=