@litigiovirtual/ius-design-components 1.0.236 → 1.0.237
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,26 +1,27 @@
|
|
|
1
1
|
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { AvatarV2Component } from '../avatar-v2/avatar-v2.component';
|
|
3
3
|
import { IconMdComponent } from '../icon-md/icon-md.component';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
5
|
export class ChipUserComponent {
|
|
6
6
|
constructor() {
|
|
7
|
-
this.imageUrl = 'https://media.istockphoto.com/id/1389348844/es/foto/foto-de-estudio-de-una-hermosa-joven-sonriendo-mientras-est%C3%A1-de-pie-sobre-un-fondo-gris.jpg?s=612x612&w=0&k=20&c=kUufmNoTnDcRbyeHhU1wRiip-fNjTWP9owjHf75frFQ=';
|
|
8
7
|
this.onRemoveEvent = new EventEmitter();
|
|
9
8
|
}
|
|
10
9
|
remove() {
|
|
11
10
|
this.onRemoveEvent.emit(null);
|
|
12
11
|
}
|
|
13
12
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChipUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ChipUserComponent, isStandalone: true, selector: "ius-chip-user", inputs: { imageUrl: "imageUrl", text: "text" }, outputs: { onRemoveEvent: "onRemoveEvent" }, ngImport: i0, template: "<div class=\"container-general\">\r\n <div class=\"content\">\r\n <ius-avatar-
|
|
13
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ChipUserComponent, isStandalone: true, selector: "ius-chip-user", inputs: { imageUrl: "imageUrl", name: "name", text: "text" }, outputs: { onRemoveEvent: "onRemoveEvent" }, ngImport: i0, template: "<div class=\"container-general\">\r\n <div class=\"content\">\r\n <ius-avatar-v2 [imageUrl]=\"imageUrl\" [name]=\"name\" size=\"md\" shape=\"circle\"></ius-avatar-v2>\r\n <span class=\"text-name\">{{text}}</span>\r\n <div class=\"actions\">\r\n <button (click)=\"remove()\" class=\"button-remove\">\r\n <ius-icon-md iconName=\"icon-cancel\"></ius-icon-md>\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-general{position:relative;height:100%}.content{display:flex;height:30px;padding:8px;align-items:center;gap:10px;border-radius:8px;border:.5px solid #bfbfbf}.content:hover{background:transparent!important}.content:hover .actions{display:block;right:0}.text-name{color:#000;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;text-align:left;flex:1 0 0;min-width:0}.actions{display:none}.button-remove{border:none;cursor:pointer;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:100px;background:#f5f5f5}.button-remove:hover{background:#eaeaea}\n"], dependencies: [{ kind: "component", type: AvatarV2Component, selector: "ius-avatar-v2", inputs: ["imageUrl", "name", "size", "shape", "showEditButton", "backgroundColor", "fallbackIconName"], outputs: ["editClicked"] }, { kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }] }); }
|
|
15
14
|
}
|
|
16
15
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChipUserComponent, decorators: [{
|
|
17
16
|
type: Component,
|
|
18
|
-
args: [{ selector: 'ius-chip-user', standalone: true, imports: [
|
|
17
|
+
args: [{ selector: 'ius-chip-user', standalone: true, imports: [AvatarV2Component, IconMdComponent], template: "<div class=\"container-general\">\r\n <div class=\"content\">\r\n <ius-avatar-v2 [imageUrl]=\"imageUrl\" [name]=\"name\" size=\"md\" shape=\"circle\"></ius-avatar-v2>\r\n <span class=\"text-name\">{{text}}</span>\r\n <div class=\"actions\">\r\n <button (click)=\"remove()\" class=\"button-remove\">\r\n <ius-icon-md iconName=\"icon-cancel\"></ius-icon-md>\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-general{position:relative;height:100%}.content{display:flex;height:30px;padding:8px;align-items:center;gap:10px;border-radius:8px;border:.5px solid #bfbfbf}.content:hover{background:transparent!important}.content:hover .actions{display:block;right:0}.text-name{color:#000;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;text-align:left;flex:1 0 0;min-width:0}.actions{display:none}.button-remove{border:none;cursor:pointer;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:100px;background:#f5f5f5}.button-remove:hover{background:#eaeaea}\n"] }]
|
|
19
18
|
}], propDecorators: { imageUrl: [{
|
|
20
19
|
type: Input
|
|
20
|
+
}], name: [{
|
|
21
|
+
type: Input
|
|
21
22
|
}], text: [{
|
|
22
23
|
type: Input
|
|
23
24
|
}], onRemoveEvent: [{
|
|
24
25
|
type: Output
|
|
25
26
|
}] } });
|
|
26
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
27
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hpcC11c2VyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2l1cy1kZXNpZ24tY29tcG9uZW50cy9zcmMvbGliL2NoaXAtdXNlci9jaGlwLXVzZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvaXVzLWRlc2lnbi1jb21wb25lbnRzL3NyYy9saWIvY2hpcC11c2VyL2NoaXAtdXNlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGtDQUFrQyxDQUFDO0FBQ3JFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQzs7QUFTL0QsTUFBTSxPQUFPLGlCQUFpQjtJQVA5QjtRQVdZLGtCQUFhLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztLQUtuRDtJQUhDLE1BQU07UUFDSixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUNoQyxDQUFDOytHQVJVLGlCQUFpQjttR0FBakIsaUJBQWlCLG9MQ1g5QiwwZEFVTSw0dEVESE0saUJBQWlCLDRMQUFFLGVBQWU7OzRGQUlqQyxpQkFBaUI7a0JBUDdCLFNBQVM7K0JBQ0UsZUFBZSxjQUNiLElBQUksV0FDUCxDQUFDLGlCQUFpQixFQUFFLGVBQWUsQ0FBQzs4QkFLcEMsUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNJLGFBQWE7c0JBQXRCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBBdmF0YXJWMkNvbXBvbmVudCB9IGZyb20gJy4uL2F2YXRhci12Mi9hdmF0YXItdjIuY29tcG9uZW50JztcclxuaW1wb3J0IHsgSWNvbk1kQ29tcG9uZW50IH0gZnJvbSAnLi4vaWNvbi1tZC9pY29uLW1kLmNvbXBvbmVudCc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2l1cy1jaGlwLXVzZXInLFxyXG4gIHN0YW5kYWxvbmU6IHRydWUsXHJcbiAgaW1wb3J0czogW0F2YXRhclYyQ29tcG9uZW50LCBJY29uTWRDb21wb25lbnRdLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9jaGlwLXVzZXIuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsOiAnLi9jaGlwLXVzZXIuY29tcG9uZW50LnNjc3MnLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgQ2hpcFVzZXJDb21wb25lbnQge1xyXG4gIEBJbnB1dCgpIGltYWdlVXJsPzogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIG5hbWU/OiBzdHJpbmc7XHJcbiAgQElucHV0KCkgdGV4dD86IHN0cmluZztcclxuICBAT3V0cHV0KCkgb25SZW1vdmVFdmVudCA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xyXG5cclxuICByZW1vdmUoKSB7XHJcbiAgICB0aGlzLm9uUmVtb3ZlRXZlbnQuZW1pdChudWxsKTtcclxuICB9XHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cImNvbnRhaW5lci1nZW5lcmFsXCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwiY29udGVudFwiPlxyXG4gICAgICAgIDxpdXMtYXZhdGFyLXYyIFtpbWFnZVVybF09XCJpbWFnZVVybFwiIFtuYW1lXT1cIm5hbWVcIiBzaXplPVwibWRcIiBzaGFwZT1cImNpcmNsZVwiPjwvaXVzLWF2YXRhci12Mj5cclxuICAgICAgICA8c3BhbiBjbGFzcz1cInRleHQtbmFtZVwiPnt7dGV4dH19PC9zcGFuPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJhY3Rpb25zXCI+XHJcbiAgICAgICAgICAgIDxidXR0b24gKGNsaWNrKT1cInJlbW92ZSgpXCIgY2xhc3M9XCJidXR0b24tcmVtb3ZlXCI+XHJcbiAgICAgICAgICAgICAgICA8aXVzLWljb24tbWQgaWNvbk5hbWU9XCJpY29uLWNhbmNlbFwiPjwvaXVzLWljb24tbWQ+XHJcbiAgICAgICAgICAgIDwvYnV0dG9uPlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgPC9kaXY+XHJcbjwvZGl2PiJdfQ==
|
|
@@ -3757,22 +3757,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3757
3757
|
args: ['document:click', ['$event']]
|
|
3758
3758
|
}] } });
|
|
3759
3759
|
|
|
3760
|
+
class AvatarV2Component {
|
|
3761
|
+
constructor() {
|
|
3762
|
+
this.size = 'md';
|
|
3763
|
+
this.shape = 'circle';
|
|
3764
|
+
this.showEditButton = false;
|
|
3765
|
+
this.fallbackIconName = 'icon-account-circle';
|
|
3766
|
+
this.editClicked = new EventEmitter();
|
|
3767
|
+
this.initials = '';
|
|
3768
|
+
}
|
|
3769
|
+
get containerStyle() {
|
|
3770
|
+
if (!this.imageUrl && this.backgroundColor) {
|
|
3771
|
+
return { 'background-color': this.backgroundColor };
|
|
3772
|
+
}
|
|
3773
|
+
return {};
|
|
3774
|
+
}
|
|
3775
|
+
ngOnChanges(changes) {
|
|
3776
|
+
if (changes['name']) {
|
|
3777
|
+
this.initials = this.extractInitials(this.name);
|
|
3778
|
+
}
|
|
3779
|
+
}
|
|
3780
|
+
onEditClick(event) {
|
|
3781
|
+
event.stopPropagation();
|
|
3782
|
+
this.editClicked.emit();
|
|
3783
|
+
}
|
|
3784
|
+
extractInitials(name) {
|
|
3785
|
+
if (!name?.trim())
|
|
3786
|
+
return '';
|
|
3787
|
+
const parts = name.trim().split(/\s+/);
|
|
3788
|
+
if (parts.length === 1)
|
|
3789
|
+
return parts[0].charAt(0).toUpperCase();
|
|
3790
|
+
return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
|
|
3791
|
+
}
|
|
3792
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3793
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: AvatarV2Component, isStandalone: true, selector: "ius-avatar-v2", inputs: { imageUrl: "imageUrl", name: "name", size: "size", shape: "shape", showEditButton: "showEditButton", backgroundColor: "backgroundColor", fallbackIconName: "fallbackIconName" }, outputs: { editClicked: "editClicked" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"avatar\"\r\n [ngClass]=\"[size, shape]\"\r\n [ngStyle]=\"containerStyle\"\r\n>\r\n @if (imageUrl) {\r\n <img [src]=\"imageUrl\" [alt]=\"name || 'avatar'\" class=\"avatar__image\" />\r\n } @else if (initials) {\r\n <span class=\"body-large\" style=\"color: var(--ColorText-colorTextPrimary, #333);\">{{ initials }}</span>\r\n } @else {\r\n @switch (size) {\r\n @case ('xs') {\r\n <ius-icon-xs [iconName]=\"fallbackIconName\"></ius-icon-xs>\r\n }\r\n @case ('sm') {\r\n <ius-icon-sm [iconName]=\"fallbackIconName\"></ius-icon-sm>\r\n }\r\n @case ('md') {\r\n <ius-icon-md [iconName]=\"fallbackIconName\"></ius-icon-md>\r\n }\r\n @case ('lg') {\r\n <ius-icon-lg [iconName]=\"fallbackIconName\"></ius-icon-lg>\r\n }\r\n @case ('xl') {\r\n <ius-icon-xl [iconName]=\"fallbackIconName\"></ius-icon-xl>\r\n }\r\n @case ('xxl') {\r\n <ius-icon-xxl [iconName]=\"fallbackIconName\"></ius-icon-xxl>\r\n }\r\n }\r\n }\r\n\r\n @if (showEditButton) {\r\n <div class=\"avatar__edit-overlay\" (click)=\"onEditClick($event)\">\r\n <div class=\"avatar__edit-btn\">\r\n <ius-icon-sm iconName=\"icon-edit\"></ius-icon-sm>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}:host{display:inline-block}.avatar{position:relative;display:flex;justify-content:center;align-items:center;background-color:#e6fdff;overflow:hidden;flex-shrink:0}.avatar.circle{border-radius:50%}.avatar.square{border-radius:8px}.avatar.xs{width:14px;height:14px}.avatar.sm{width:24px;height:24px}.avatar.md{width:32px;height:32px}.avatar.lg{width:40px;height:40px}.avatar.xl{width:64px;height:64px}.avatar.xxl{width:96px;height:96px}.avatar__image{width:100%;height:100%;object-fit:cover;display:block}.avatar__edit-overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background-color:var(--Info-Color-Info-200, #C4DFFF);opacity:0;transition:opacity .2s ease;cursor:pointer}.avatar__edit-btn{display:flex;justify-content:center;align-items:center;width:28px;height:28px;border-radius:50%;background-color:#fff;color:#333;pointer-events:none}.avatar:hover .avatar__edit-overlay{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconXsComponent, selector: "ius-icon-xs", inputs: ["iconName", "color"] }, { kind: "component", type: IconSmComponent, selector: "ius-icon-sm", inputs: ["iconName", "color"] }, { kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "component", type: IconXlComponent, selector: "ius-icon-xl", inputs: ["iconName", "color"] }, { kind: "component", type: IconXxlComponent, selector: "ius-icon-xxl", inputs: ["iconName", "color"] }, { kind: "component", type: IconLgComponent, selector: "ius-icon-lg", inputs: ["iconName", "color"] }] }); }
|
|
3794
|
+
}
|
|
3795
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarV2Component, decorators: [{
|
|
3796
|
+
type: Component,
|
|
3797
|
+
args: [{ selector: 'ius-avatar-v2', standalone: true, imports: [
|
|
3798
|
+
CommonModule,
|
|
3799
|
+
IconXsComponent,
|
|
3800
|
+
IconSmComponent,
|
|
3801
|
+
IconMdComponent,
|
|
3802
|
+
IconXlComponent,
|
|
3803
|
+
IconXxlComponent,
|
|
3804
|
+
IconLgComponent
|
|
3805
|
+
], template: "<div\r\n class=\"avatar\"\r\n [ngClass]=\"[size, shape]\"\r\n [ngStyle]=\"containerStyle\"\r\n>\r\n @if (imageUrl) {\r\n <img [src]=\"imageUrl\" [alt]=\"name || 'avatar'\" class=\"avatar__image\" />\r\n } @else if (initials) {\r\n <span class=\"body-large\" style=\"color: var(--ColorText-colorTextPrimary, #333);\">{{ initials }}</span>\r\n } @else {\r\n @switch (size) {\r\n @case ('xs') {\r\n <ius-icon-xs [iconName]=\"fallbackIconName\"></ius-icon-xs>\r\n }\r\n @case ('sm') {\r\n <ius-icon-sm [iconName]=\"fallbackIconName\"></ius-icon-sm>\r\n }\r\n @case ('md') {\r\n <ius-icon-md [iconName]=\"fallbackIconName\"></ius-icon-md>\r\n }\r\n @case ('lg') {\r\n <ius-icon-lg [iconName]=\"fallbackIconName\"></ius-icon-lg>\r\n }\r\n @case ('xl') {\r\n <ius-icon-xl [iconName]=\"fallbackIconName\"></ius-icon-xl>\r\n }\r\n @case ('xxl') {\r\n <ius-icon-xxl [iconName]=\"fallbackIconName\"></ius-icon-xxl>\r\n }\r\n }\r\n }\r\n\r\n @if (showEditButton) {\r\n <div class=\"avatar__edit-overlay\" (click)=\"onEditClick($event)\">\r\n <div class=\"avatar__edit-btn\">\r\n <ius-icon-sm iconName=\"icon-edit\"></ius-icon-sm>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}:host{display:inline-block}.avatar{position:relative;display:flex;justify-content:center;align-items:center;background-color:#e6fdff;overflow:hidden;flex-shrink:0}.avatar.circle{border-radius:50%}.avatar.square{border-radius:8px}.avatar.xs{width:14px;height:14px}.avatar.sm{width:24px;height:24px}.avatar.md{width:32px;height:32px}.avatar.lg{width:40px;height:40px}.avatar.xl{width:64px;height:64px}.avatar.xxl{width:96px;height:96px}.avatar__image{width:100%;height:100%;object-fit:cover;display:block}.avatar__edit-overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background-color:var(--Info-Color-Info-200, #C4DFFF);opacity:0;transition:opacity .2s ease;cursor:pointer}.avatar__edit-btn{display:flex;justify-content:center;align-items:center;width:28px;height:28px;border-radius:50%;background-color:#fff;color:#333;pointer-events:none}.avatar:hover .avatar__edit-overlay{opacity:1}\n"] }]
|
|
3806
|
+
}], propDecorators: { imageUrl: [{
|
|
3807
|
+
type: Input
|
|
3808
|
+
}], name: [{
|
|
3809
|
+
type: Input
|
|
3810
|
+
}], size: [{
|
|
3811
|
+
type: Input
|
|
3812
|
+
}], shape: [{
|
|
3813
|
+
type: Input
|
|
3814
|
+
}], showEditButton: [{
|
|
3815
|
+
type: Input
|
|
3816
|
+
}], backgroundColor: [{
|
|
3817
|
+
type: Input
|
|
3818
|
+
}], fallbackIconName: [{
|
|
3819
|
+
type: Input
|
|
3820
|
+
}], editClicked: [{
|
|
3821
|
+
type: Output
|
|
3822
|
+
}] } });
|
|
3823
|
+
|
|
3760
3824
|
class ChipUserComponent {
|
|
3761
3825
|
constructor() {
|
|
3762
|
-
this.imageUrl = 'https://media.istockphoto.com/id/1389348844/es/foto/foto-de-estudio-de-una-hermosa-joven-sonriendo-mientras-est%C3%A1-de-pie-sobre-un-fondo-gris.jpg?s=612x612&w=0&k=20&c=kUufmNoTnDcRbyeHhU1wRiip-fNjTWP9owjHf75frFQ=';
|
|
3763
3826
|
this.onRemoveEvent = new EventEmitter();
|
|
3764
3827
|
}
|
|
3765
3828
|
remove() {
|
|
3766
3829
|
this.onRemoveEvent.emit(null);
|
|
3767
3830
|
}
|
|
3768
3831
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChipUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3769
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ChipUserComponent, isStandalone: true, selector: "ius-chip-user", inputs: { imageUrl: "imageUrl", text: "text" }, outputs: { onRemoveEvent: "onRemoveEvent" }, ngImport: i0, template: "<div class=\"container-general\">\r\n <div class=\"content\">\r\n <ius-avatar-
|
|
3832
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ChipUserComponent, isStandalone: true, selector: "ius-chip-user", inputs: { imageUrl: "imageUrl", name: "name", text: "text" }, outputs: { onRemoveEvent: "onRemoveEvent" }, ngImport: i0, template: "<div class=\"container-general\">\r\n <div class=\"content\">\r\n <ius-avatar-v2 [imageUrl]=\"imageUrl\" [name]=\"name\" size=\"md\" shape=\"circle\"></ius-avatar-v2>\r\n <span class=\"text-name\">{{text}}</span>\r\n <div class=\"actions\">\r\n <button (click)=\"remove()\" class=\"button-remove\">\r\n <ius-icon-md iconName=\"icon-cancel\"></ius-icon-md>\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-general{position:relative;height:100%}.content{display:flex;height:30px;padding:8px;align-items:center;gap:10px;border-radius:8px;border:.5px solid #bfbfbf}.content:hover{background:transparent!important}.content:hover .actions{display:block;right:0}.text-name{color:#000;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;text-align:left;flex:1 0 0;min-width:0}.actions{display:none}.button-remove{border:none;cursor:pointer;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:100px;background:#f5f5f5}.button-remove:hover{background:#eaeaea}\n"], dependencies: [{ kind: "component", type: AvatarV2Component, selector: "ius-avatar-v2", inputs: ["imageUrl", "name", "size", "shape", "showEditButton", "backgroundColor", "fallbackIconName"], outputs: ["editClicked"] }, { kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }] }); }
|
|
3770
3833
|
}
|
|
3771
3834
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChipUserComponent, decorators: [{
|
|
3772
3835
|
type: Component,
|
|
3773
|
-
args: [{ selector: 'ius-chip-user', standalone: true, imports: [
|
|
3836
|
+
args: [{ selector: 'ius-chip-user', standalone: true, imports: [AvatarV2Component, IconMdComponent], template: "<div class=\"container-general\">\r\n <div class=\"content\">\r\n <ius-avatar-v2 [imageUrl]=\"imageUrl\" [name]=\"name\" size=\"md\" shape=\"circle\"></ius-avatar-v2>\r\n <span class=\"text-name\">{{text}}</span>\r\n <div class=\"actions\">\r\n <button (click)=\"remove()\" class=\"button-remove\">\r\n <ius-icon-md iconName=\"icon-cancel\"></ius-icon-md>\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-general{position:relative;height:100%}.content{display:flex;height:30px;padding:8px;align-items:center;gap:10px;border-radius:8px;border:.5px solid #bfbfbf}.content:hover{background:transparent!important}.content:hover .actions{display:block;right:0}.text-name{color:#000;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;text-align:left;flex:1 0 0;min-width:0}.actions{display:none}.button-remove{border:none;cursor:pointer;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:100px;background:#f5f5f5}.button-remove:hover{background:#eaeaea}\n"] }]
|
|
3774
3837
|
}], propDecorators: { imageUrl: [{
|
|
3775
3838
|
type: Input
|
|
3839
|
+
}], name: [{
|
|
3840
|
+
type: Input
|
|
3776
3841
|
}], text: [{
|
|
3777
3842
|
type: Input
|
|
3778
3843
|
}], onRemoveEvent: [{
|
|
@@ -7674,70 +7739,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
7674
7739
|
type: Output
|
|
7675
7740
|
}] } });
|
|
7676
7741
|
|
|
7677
|
-
class AvatarV2Component {
|
|
7678
|
-
constructor() {
|
|
7679
|
-
this.size = 'md';
|
|
7680
|
-
this.shape = 'circle';
|
|
7681
|
-
this.showEditButton = false;
|
|
7682
|
-
this.fallbackIconName = 'icon-account-circle';
|
|
7683
|
-
this.editClicked = new EventEmitter();
|
|
7684
|
-
this.initials = '';
|
|
7685
|
-
}
|
|
7686
|
-
get containerStyle() {
|
|
7687
|
-
if (!this.imageUrl && this.backgroundColor) {
|
|
7688
|
-
return { 'background-color': this.backgroundColor };
|
|
7689
|
-
}
|
|
7690
|
-
return {};
|
|
7691
|
-
}
|
|
7692
|
-
ngOnChanges(changes) {
|
|
7693
|
-
if (changes['name']) {
|
|
7694
|
-
this.initials = this.extractInitials(this.name);
|
|
7695
|
-
}
|
|
7696
|
-
}
|
|
7697
|
-
onEditClick(event) {
|
|
7698
|
-
event.stopPropagation();
|
|
7699
|
-
this.editClicked.emit();
|
|
7700
|
-
}
|
|
7701
|
-
extractInitials(name) {
|
|
7702
|
-
if (!name?.trim())
|
|
7703
|
-
return '';
|
|
7704
|
-
const parts = name.trim().split(/\s+/);
|
|
7705
|
-
if (parts.length === 1)
|
|
7706
|
-
return parts[0].charAt(0).toUpperCase();
|
|
7707
|
-
return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
|
|
7708
|
-
}
|
|
7709
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7710
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: AvatarV2Component, isStandalone: true, selector: "ius-avatar-v2", inputs: { imageUrl: "imageUrl", name: "name", size: "size", shape: "shape", showEditButton: "showEditButton", backgroundColor: "backgroundColor", fallbackIconName: "fallbackIconName" }, outputs: { editClicked: "editClicked" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"avatar\"\r\n [ngClass]=\"[size, shape]\"\r\n [ngStyle]=\"containerStyle\"\r\n>\r\n @if (imageUrl) {\r\n <img [src]=\"imageUrl\" [alt]=\"name || 'avatar'\" class=\"avatar__image\" />\r\n } @else if (initials) {\r\n <span class=\"body-large\" style=\"color: var(--ColorText-colorTextPrimary, #333);\">{{ initials }}</span>\r\n } @else {\r\n @switch (size) {\r\n @case ('xs') {\r\n <ius-icon-xs [iconName]=\"fallbackIconName\"></ius-icon-xs>\r\n }\r\n @case ('sm') {\r\n <ius-icon-sm [iconName]=\"fallbackIconName\"></ius-icon-sm>\r\n }\r\n @case ('md') {\r\n <ius-icon-md [iconName]=\"fallbackIconName\"></ius-icon-md>\r\n }\r\n @case ('lg') {\r\n <ius-icon-lg [iconName]=\"fallbackIconName\"></ius-icon-lg>\r\n }\r\n @case ('xl') {\r\n <ius-icon-xl [iconName]=\"fallbackIconName\"></ius-icon-xl>\r\n }\r\n @case ('xxl') {\r\n <ius-icon-xxl [iconName]=\"fallbackIconName\"></ius-icon-xxl>\r\n }\r\n }\r\n }\r\n\r\n @if (showEditButton) {\r\n <div class=\"avatar__edit-overlay\" (click)=\"onEditClick($event)\">\r\n <div class=\"avatar__edit-btn\">\r\n <ius-icon-sm iconName=\"icon-edit\"></ius-icon-sm>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}:host{display:inline-block}.avatar{position:relative;display:flex;justify-content:center;align-items:center;background-color:#e6fdff;overflow:hidden;flex-shrink:0}.avatar.circle{border-radius:50%}.avatar.square{border-radius:8px}.avatar.xs{width:14px;height:14px}.avatar.sm{width:24px;height:24px}.avatar.md{width:32px;height:32px}.avatar.lg{width:40px;height:40px}.avatar.xl{width:64px;height:64px}.avatar.xxl{width:96px;height:96px}.avatar__image{width:100%;height:100%;object-fit:cover;display:block}.avatar__edit-overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background-color:var(--Info-Color-Info-200, #C4DFFF);opacity:0;transition:opacity .2s ease;cursor:pointer}.avatar__edit-btn{display:flex;justify-content:center;align-items:center;width:28px;height:28px;border-radius:50%;background-color:#fff;color:#333;pointer-events:none}.avatar:hover .avatar__edit-overlay{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconXsComponent, selector: "ius-icon-xs", inputs: ["iconName", "color"] }, { kind: "component", type: IconSmComponent, selector: "ius-icon-sm", inputs: ["iconName", "color"] }, { kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "component", type: IconXlComponent, selector: "ius-icon-xl", inputs: ["iconName", "color"] }, { kind: "component", type: IconXxlComponent, selector: "ius-icon-xxl", inputs: ["iconName", "color"] }, { kind: "component", type: IconLgComponent, selector: "ius-icon-lg", inputs: ["iconName", "color"] }] }); }
|
|
7711
|
-
}
|
|
7712
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarV2Component, decorators: [{
|
|
7713
|
-
type: Component,
|
|
7714
|
-
args: [{ selector: 'ius-avatar-v2', standalone: true, imports: [
|
|
7715
|
-
CommonModule,
|
|
7716
|
-
IconXsComponent,
|
|
7717
|
-
IconSmComponent,
|
|
7718
|
-
IconMdComponent,
|
|
7719
|
-
IconXlComponent,
|
|
7720
|
-
IconXxlComponent,
|
|
7721
|
-
IconLgComponent
|
|
7722
|
-
], template: "<div\r\n class=\"avatar\"\r\n [ngClass]=\"[size, shape]\"\r\n [ngStyle]=\"containerStyle\"\r\n>\r\n @if (imageUrl) {\r\n <img [src]=\"imageUrl\" [alt]=\"name || 'avatar'\" class=\"avatar__image\" />\r\n } @else if (initials) {\r\n <span class=\"body-large\" style=\"color: var(--ColorText-colorTextPrimary, #333);\">{{ initials }}</span>\r\n } @else {\r\n @switch (size) {\r\n @case ('xs') {\r\n <ius-icon-xs [iconName]=\"fallbackIconName\"></ius-icon-xs>\r\n }\r\n @case ('sm') {\r\n <ius-icon-sm [iconName]=\"fallbackIconName\"></ius-icon-sm>\r\n }\r\n @case ('md') {\r\n <ius-icon-md [iconName]=\"fallbackIconName\"></ius-icon-md>\r\n }\r\n @case ('lg') {\r\n <ius-icon-lg [iconName]=\"fallbackIconName\"></ius-icon-lg>\r\n }\r\n @case ('xl') {\r\n <ius-icon-xl [iconName]=\"fallbackIconName\"></ius-icon-xl>\r\n }\r\n @case ('xxl') {\r\n <ius-icon-xxl [iconName]=\"fallbackIconName\"></ius-icon-xxl>\r\n }\r\n }\r\n }\r\n\r\n @if (showEditButton) {\r\n <div class=\"avatar__edit-overlay\" (click)=\"onEditClick($event)\">\r\n <div class=\"avatar__edit-btn\">\r\n <ius-icon-sm iconName=\"icon-edit\"></ius-icon-sm>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}:host{display:inline-block}.avatar{position:relative;display:flex;justify-content:center;align-items:center;background-color:#e6fdff;overflow:hidden;flex-shrink:0}.avatar.circle{border-radius:50%}.avatar.square{border-radius:8px}.avatar.xs{width:14px;height:14px}.avatar.sm{width:24px;height:24px}.avatar.md{width:32px;height:32px}.avatar.lg{width:40px;height:40px}.avatar.xl{width:64px;height:64px}.avatar.xxl{width:96px;height:96px}.avatar__image{width:100%;height:100%;object-fit:cover;display:block}.avatar__edit-overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background-color:var(--Info-Color-Info-200, #C4DFFF);opacity:0;transition:opacity .2s ease;cursor:pointer}.avatar__edit-btn{display:flex;justify-content:center;align-items:center;width:28px;height:28px;border-radius:50%;background-color:#fff;color:#333;pointer-events:none}.avatar:hover .avatar__edit-overlay{opacity:1}\n"] }]
|
|
7723
|
-
}], propDecorators: { imageUrl: [{
|
|
7724
|
-
type: Input
|
|
7725
|
-
}], name: [{
|
|
7726
|
-
type: Input
|
|
7727
|
-
}], size: [{
|
|
7728
|
-
type: Input
|
|
7729
|
-
}], shape: [{
|
|
7730
|
-
type: Input
|
|
7731
|
-
}], showEditButton: [{
|
|
7732
|
-
type: Input
|
|
7733
|
-
}], backgroundColor: [{
|
|
7734
|
-
type: Input
|
|
7735
|
-
}], fallbackIconName: [{
|
|
7736
|
-
type: Input
|
|
7737
|
-
}], editClicked: [{
|
|
7738
|
-
type: Output
|
|
7739
|
-
}] } });
|
|
7740
|
-
|
|
7741
7742
|
class AvatarBusinessComponent {
|
|
7742
7743
|
constructor() {
|
|
7743
7744
|
this.size = 'md';
|