@litigiovirtual/ius-design-components 1.0.242 → 1.0.244
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.
- package/esm2022/lib/avatar-business/avatar-business.component.mjs +3 -3
- package/esm2022/lib/avatar-v2/avatar-v2.component.mjs +3 -3
- package/esm2022/lib/dropdown-user-menu/dropdown-user-menu.component.mjs +5 -5
- package/fesm2022/litigiovirtual-ius-design-components.mjs +154 -154
- package/fesm2022/litigiovirtual-ius-design-components.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -3042,6 +3042,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3042
3042
|
args: ['document:click', ['$event']]
|
|
3043
3043
|
}] } });
|
|
3044
3044
|
|
|
3045
|
+
class IconXsComponent {
|
|
3046
|
+
constructor(sanitizer) {
|
|
3047
|
+
this.sanitizer = sanitizer;
|
|
3048
|
+
this.iconName = 'icon-add';
|
|
3049
|
+
this.color = 'currentColor';
|
|
3050
|
+
this.svg = '';
|
|
3051
|
+
}
|
|
3052
|
+
ngOnChanges() {
|
|
3053
|
+
const rawSvg = ICONS[this.iconName];
|
|
3054
|
+
this.svg = rawSvg ? this.sanitizer.bypassSecurityTrustHtml(rawSvg) : '';
|
|
3055
|
+
}
|
|
3056
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconXsComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3057
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: IconXsComponent, isStandalone: true, selector: "ius-icon-xs", inputs: { iconName: "iconName", color: "color" }, usesOnChanges: true, ngImport: i0, template: "<span [ngStyle]=\"{'color': color}\" [innerHTML]=\"svg\"></span>", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:14px;height:14px;color:currentColor}span svg{width:100%;height:100%;fill:\\a0 currentColor}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
3058
|
+
}
|
|
3059
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconXsComponent, decorators: [{
|
|
3060
|
+
type: Component,
|
|
3061
|
+
args: [{ selector: 'ius-icon-xs', standalone: true, imports: [CommonModule], template: "<span [ngStyle]=\"{'color': color}\" [innerHTML]=\"svg\"></span>", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:14px;height:14px;color:currentColor}span svg{width:100%;height:100%;fill:\\a0 currentColor}\n"] }]
|
|
3062
|
+
}], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { iconName: [{
|
|
3063
|
+
type: Input
|
|
3064
|
+
}], color: [{
|
|
3065
|
+
type: Input
|
|
3066
|
+
}] } });
|
|
3067
|
+
|
|
3045
3068
|
class IconXlComponent {
|
|
3046
3069
|
constructor(sanitizer) {
|
|
3047
3070
|
this.sanitizer = sanitizer;
|
|
@@ -3065,6 +3088,135 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3065
3088
|
type: Input
|
|
3066
3089
|
}] } });
|
|
3067
3090
|
|
|
3091
|
+
class IconXxlComponent {
|
|
3092
|
+
constructor(sanitizer) {
|
|
3093
|
+
this.sanitizer = sanitizer;
|
|
3094
|
+
this.iconName = 'icon-add';
|
|
3095
|
+
this.color = 'currentColor';
|
|
3096
|
+
this.svg = '';
|
|
3097
|
+
}
|
|
3098
|
+
ngOnChanges() {
|
|
3099
|
+
const rawSvg = ICONS[this.iconName];
|
|
3100
|
+
this.svg = rawSvg ? this.sanitizer.bypassSecurityTrustHtml(rawSvg) : '';
|
|
3101
|
+
}
|
|
3102
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconXxlComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3103
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: IconXxlComponent, isStandalone: true, selector: "ius-icon-xxl", inputs: { iconName: "iconName", color: "color" }, usesOnChanges: true, ngImport: i0, template: "<span [ngStyle]=\"{'color': color}\" [innerHTML]=\"svg\"></span>", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:64px;height:64px;color:currentColor}span svg{width:100%;height:100%;fill:\\a0 currentColor}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
3104
|
+
}
|
|
3105
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconXxlComponent, decorators: [{
|
|
3106
|
+
type: Component,
|
|
3107
|
+
args: [{ selector: 'ius-icon-xxl', standalone: true, imports: [CommonModule], template: "<span [ngStyle]=\"{'color': color}\" [innerHTML]=\"svg\"></span>", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:64px;height:64px;color:currentColor}span svg{width:100%;height:100%;fill:\\a0 currentColor}\n"] }]
|
|
3108
|
+
}], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { iconName: [{
|
|
3109
|
+
type: Input
|
|
3110
|
+
}], color: [{
|
|
3111
|
+
type: Input
|
|
3112
|
+
}] } });
|
|
3113
|
+
|
|
3114
|
+
class AvatarV2Component {
|
|
3115
|
+
constructor() {
|
|
3116
|
+
this.size = 'md';
|
|
3117
|
+
this.shape = 'circle';
|
|
3118
|
+
this.showEditButton = false;
|
|
3119
|
+
this.fallbackIconName = 'icon-account-circle';
|
|
3120
|
+
this.editClicked = new EventEmitter();
|
|
3121
|
+
this.initials = '';
|
|
3122
|
+
}
|
|
3123
|
+
get containerStyle() {
|
|
3124
|
+
if (!this.imageUrl && this.backgroundColor) {
|
|
3125
|
+
return { 'background-color': this.backgroundColor };
|
|
3126
|
+
}
|
|
3127
|
+
return {};
|
|
3128
|
+
}
|
|
3129
|
+
ngOnChanges(changes) {
|
|
3130
|
+
if (changes['name']) {
|
|
3131
|
+
this.initials = this.extractInitials(this.name);
|
|
3132
|
+
}
|
|
3133
|
+
}
|
|
3134
|
+
onEditClick(event) {
|
|
3135
|
+
event.stopPropagation();
|
|
3136
|
+
this.editClicked.emit();
|
|
3137
|
+
}
|
|
3138
|
+
extractInitials(name) {
|
|
3139
|
+
if (!name?.trim())
|
|
3140
|
+
return '';
|
|
3141
|
+
const parts = name.trim().split(/\s+/);
|
|
3142
|
+
if (parts.length === 1)
|
|
3143
|
+
return parts[0].charAt(0).toUpperCase();
|
|
3144
|
+
return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
|
|
3145
|
+
}
|
|
3146
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3147
|
+
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 && 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 class=\"icon\" [iconName]=\"fallbackIconName\"></ius-icon-xs>\r\n }\r\n @case ('sm') {\r\n <ius-icon-sm class=\"icon\" [iconName]=\"fallbackIconName\"></ius-icon-sm>\r\n }\r\n @case ('md') {\r\n <ius-icon-md class=\"icon\" [iconName]=\"fallbackIconName\"></ius-icon-md>\r\n }\r\n @case ('lg') {\r\n <ius-icon-lg class=\"icon\" [iconName]=\"fallbackIconName\"></ius-icon-lg>\r\n }\r\n @case ('xl') {\r\n <ius-icon-xl class=\"icon\" [iconName]=\"fallbackIconName\"></ius-icon-xl>\r\n }\r\n @case ('xxl') {\r\n <ius-icon-xxl class=\"icon\" [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:#edf6ff;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}.icon{color:#c4dfff}\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"] }] }); }
|
|
3148
|
+
}
|
|
3149
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarV2Component, decorators: [{
|
|
3150
|
+
type: Component,
|
|
3151
|
+
args: [{ selector: 'ius-avatar-v2', standalone: true, imports: [
|
|
3152
|
+
CommonModule,
|
|
3153
|
+
IconXsComponent,
|
|
3154
|
+
IconSmComponent,
|
|
3155
|
+
IconMdComponent,
|
|
3156
|
+
IconXlComponent,
|
|
3157
|
+
IconXxlComponent,
|
|
3158
|
+
IconLgComponent
|
|
3159
|
+
], template: "<div\r\n class=\"avatar\"\r\n [ngClass]=\"[size, shape]\"\r\n [ngStyle]=\"containerStyle\"\r\n>\r\n @if (imageUrl && 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 class=\"icon\" [iconName]=\"fallbackIconName\"></ius-icon-xs>\r\n }\r\n @case ('sm') {\r\n <ius-icon-sm class=\"icon\" [iconName]=\"fallbackIconName\"></ius-icon-sm>\r\n }\r\n @case ('md') {\r\n <ius-icon-md class=\"icon\" [iconName]=\"fallbackIconName\"></ius-icon-md>\r\n }\r\n @case ('lg') {\r\n <ius-icon-lg class=\"icon\" [iconName]=\"fallbackIconName\"></ius-icon-lg>\r\n }\r\n @case ('xl') {\r\n <ius-icon-xl class=\"icon\" [iconName]=\"fallbackIconName\"></ius-icon-xl>\r\n }\r\n @case ('xxl') {\r\n <ius-icon-xxl class=\"icon\" [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:#edf6ff;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}.icon{color:#c4dfff}\n"] }]
|
|
3160
|
+
}], propDecorators: { imageUrl: [{
|
|
3161
|
+
type: Input
|
|
3162
|
+
}], name: [{
|
|
3163
|
+
type: Input
|
|
3164
|
+
}], size: [{
|
|
3165
|
+
type: Input
|
|
3166
|
+
}], shape: [{
|
|
3167
|
+
type: Input
|
|
3168
|
+
}], showEditButton: [{
|
|
3169
|
+
type: Input
|
|
3170
|
+
}], backgroundColor: [{
|
|
3171
|
+
type: Input
|
|
3172
|
+
}], fallbackIconName: [{
|
|
3173
|
+
type: Input
|
|
3174
|
+
}], editClicked: [{
|
|
3175
|
+
type: Output
|
|
3176
|
+
}] } });
|
|
3177
|
+
|
|
3178
|
+
class AvatarBusinessComponent {
|
|
3179
|
+
constructor() {
|
|
3180
|
+
this.size = 'md';
|
|
3181
|
+
this.shape = 'circle';
|
|
3182
|
+
this.showEditButton = false;
|
|
3183
|
+
this.fallbackIconName = 'icon-business-center';
|
|
3184
|
+
this.editClicked = new EventEmitter();
|
|
3185
|
+
}
|
|
3186
|
+
onEditClick(event) {
|
|
3187
|
+
event.stopPropagation();
|
|
3188
|
+
this.editClicked.emit();
|
|
3189
|
+
}
|
|
3190
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarBusinessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3191
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: AvatarBusinessComponent, isStandalone: true, selector: "ius-avatar-business", inputs: { imageUrl: "imageUrl", label: "label", size: "size", shape: "shape", showEditButton: "showEditButton", fallbackIconName: "fallbackIconName" }, outputs: { editClicked: "editClicked" }, ngImport: i0, template: "<div\r\n class=\"avatar-business\"\r\n [ngClass]=\"[size, shape]\"\r\n>\r\n @if (imageUrl && imageUrl !== '') {\r\n <img [src]=\"imageUrl\" [alt]=\"label || 'avatar'\" class=\"avatar-business__image\" />\r\n } @else if (label) {\r\n <span class=\"body-large avatar-business__label\">{{ label }}</span>\r\n } @else {\r\n @switch (size) {\r\n @case ('xs') {\r\n <ius-icon-xs class=\"icon\" [iconName]=\"fallbackIconName\"></ius-icon-xs>\r\n }\r\n @case ('sm') {\r\n <ius-icon-sm class=\"icon\" [iconName]=\"fallbackIconName\"></ius-icon-sm>\r\n }\r\n @case ('md') {\r\n <ius-icon-md class=\"icon\" [iconName]=\"fallbackIconName\"></ius-icon-md>\r\n }\r\n @case ('lg') {\r\n <ius-icon-lg class=\"icon\" [iconName]=\"fallbackIconName\"></ius-icon-lg>\r\n }\r\n @case ('xl') {\r\n <ius-icon-xl class=\"icon\" [iconName]=\"fallbackIconName\"></ius-icon-xl>\r\n }\r\n @case ('xxl') {\r\n <ius-icon-xxl class=\"icon\" [iconName]=\"fallbackIconName\"></ius-icon-xxl>\r\n }\r\n }\r\n }\r\n\r\n @if (showEditButton) {\r\n <div class=\"avatar-business__edit-overlay\" (click)=\"onEditClick($event)\">\r\n <div class=\"avatar-business__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: [":host{display:inline-block}.avatar-business{position:relative;display:flex;justify-content:center;align-items:center;background-color:#edf6ff;overflow:hidden;flex-shrink:0}.avatar-business.circle{border-radius:50%}.avatar-business.square{border-radius:8px}.avatar-business.xs{width:14px;height:14px}.avatar-business.sm{width:24px;height:24px}.avatar-business.md{width:32px;height:32px}.avatar-business.lg{width:40px;height:40px}.avatar-business.xl{width:64px;height:64px}.avatar-business.xxl{width:96px;height:96px}.avatar-business__image{width:100%;height:100%;object-fit:cover;display:block}.avatar-business__label{color:var(--ColorText-colorTextPrimary, #333);-webkit-user-select:none;user-select:none}.avatar-business__edit-overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background-color:#f5f5f5;border:.5px solid var(--Stroke, #EAEAEA);opacity:0;transition:opacity .2s ease;cursor:pointer}.avatar-business__edit-overlay:active{background-color:#fafafa}.avatar-business__edit-btn{display:flex;justify-content:center;align-items:center;width:38px;height:38px;border-radius:50%;background-color:#fff;color:#333;pointer-events:none}.avatar-business:hover .avatar-business__edit-overlay{opacity:1}.icon{color:#c4dfff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: IconLgComponent, selector: "ius-icon-lg", 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"] }] }); }
|
|
3192
|
+
}
|
|
3193
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarBusinessComponent, decorators: [{
|
|
3194
|
+
type: Component,
|
|
3195
|
+
args: [{ selector: 'ius-avatar-business', standalone: true, imports: [
|
|
3196
|
+
CommonModule,
|
|
3197
|
+
IconXsComponent,
|
|
3198
|
+
IconSmComponent,
|
|
3199
|
+
IconMdComponent,
|
|
3200
|
+
IconLgComponent,
|
|
3201
|
+
IconXlComponent,
|
|
3202
|
+
IconXxlComponent,
|
|
3203
|
+
], template: "<div\r\n class=\"avatar-business\"\r\n [ngClass]=\"[size, shape]\"\r\n>\r\n @if (imageUrl && imageUrl !== '') {\r\n <img [src]=\"imageUrl\" [alt]=\"label || 'avatar'\" class=\"avatar-business__image\" />\r\n } @else if (label) {\r\n <span class=\"body-large avatar-business__label\">{{ label }}</span>\r\n } @else {\r\n @switch (size) {\r\n @case ('xs') {\r\n <ius-icon-xs class=\"icon\" [iconName]=\"fallbackIconName\"></ius-icon-xs>\r\n }\r\n @case ('sm') {\r\n <ius-icon-sm class=\"icon\" [iconName]=\"fallbackIconName\"></ius-icon-sm>\r\n }\r\n @case ('md') {\r\n <ius-icon-md class=\"icon\" [iconName]=\"fallbackIconName\"></ius-icon-md>\r\n }\r\n @case ('lg') {\r\n <ius-icon-lg class=\"icon\" [iconName]=\"fallbackIconName\"></ius-icon-lg>\r\n }\r\n @case ('xl') {\r\n <ius-icon-xl class=\"icon\" [iconName]=\"fallbackIconName\"></ius-icon-xl>\r\n }\r\n @case ('xxl') {\r\n <ius-icon-xxl class=\"icon\" [iconName]=\"fallbackIconName\"></ius-icon-xxl>\r\n }\r\n }\r\n }\r\n\r\n @if (showEditButton) {\r\n <div class=\"avatar-business__edit-overlay\" (click)=\"onEditClick($event)\">\r\n <div class=\"avatar-business__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: [":host{display:inline-block}.avatar-business{position:relative;display:flex;justify-content:center;align-items:center;background-color:#edf6ff;overflow:hidden;flex-shrink:0}.avatar-business.circle{border-radius:50%}.avatar-business.square{border-radius:8px}.avatar-business.xs{width:14px;height:14px}.avatar-business.sm{width:24px;height:24px}.avatar-business.md{width:32px;height:32px}.avatar-business.lg{width:40px;height:40px}.avatar-business.xl{width:64px;height:64px}.avatar-business.xxl{width:96px;height:96px}.avatar-business__image{width:100%;height:100%;object-fit:cover;display:block}.avatar-business__label{color:var(--ColorText-colorTextPrimary, #333);-webkit-user-select:none;user-select:none}.avatar-business__edit-overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background-color:#f5f5f5;border:.5px solid var(--Stroke, #EAEAEA);opacity:0;transition:opacity .2s ease;cursor:pointer}.avatar-business__edit-overlay:active{background-color:#fafafa}.avatar-business__edit-btn{display:flex;justify-content:center;align-items:center;width:38px;height:38px;border-radius:50%;background-color:#fff;color:#333;pointer-events:none}.avatar-business:hover .avatar-business__edit-overlay{opacity:1}.icon{color:#c4dfff}\n"] }]
|
|
3204
|
+
}], propDecorators: { imageUrl: [{
|
|
3205
|
+
type: Input
|
|
3206
|
+
}], label: [{
|
|
3207
|
+
type: Input
|
|
3208
|
+
}], size: [{
|
|
3209
|
+
type: Input
|
|
3210
|
+
}], shape: [{
|
|
3211
|
+
type: Input
|
|
3212
|
+
}], showEditButton: [{
|
|
3213
|
+
type: Input
|
|
3214
|
+
}], fallbackIconName: [{
|
|
3215
|
+
type: Input
|
|
3216
|
+
}], editClicked: [{
|
|
3217
|
+
type: Output
|
|
3218
|
+
}] } });
|
|
3219
|
+
|
|
3068
3220
|
class DropdownUserMenuComponent {
|
|
3069
3221
|
constructor() {
|
|
3070
3222
|
this.isActive = false;
|
|
@@ -3091,11 +3243,11 @@ class DropdownUserMenuComponent {
|
|
|
3091
3243
|
}
|
|
3092
3244
|
}
|
|
3093
3245
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownUserMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3094
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
3246
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DropdownUserMenuComponent, isStandalone: true, selector: "ius-dropdown-user-menu", inputs: { isActive: "isActive", nameUser: "nameUser", logo: "logo", avatar: "avatar", disabled: "disabled", iconColor: "iconColor" }, outputs: { buttonClicked: "buttonClicked" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, ngImport: i0, template: "<div class=\"dropdown-container\" id=\"userMenu\">\r\n <button [disabled]=\"disabled\" (click)=\"onClick()\" class=\"ius-btn\" [ngClass]=\"{ isOpen: isOpen }\">\r\n <ius-avatar-business [imageUrl]=\"logo\" size=\"md\" shape=\"circle\"></ius-avatar-business>\r\n <span class=\"name\">{{nameUser}}</span>\r\n <ius-avatar-v2 [imageUrl]=\"avatar\" [name]=\"nameUser\" size=\"md\" shape=\"circle\"></ius-avatar-v2>\r\n </button>\r\n\r\n <div class=\"dropdown-menu\" [class.is-open]=\"isOpen\">\r\n <ng-content></ng-content>\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}.ius-btn{display:inline-flex;padding:8px 12px;align-items:center;gap:8px;border-radius:8px;background-color:#fff;color:#333;border:1px solid #eaeaea;cursor:pointer;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;font-style:normal;line-height:20px;letter-spacing:.28px}.ius-btn:hover:not(:disabled){border:1px solid #5892FF;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.ius-btn:active:not(:disabled){border:1px solid #5892FF;background-color:#edf6ff}.ius-btn.isOpen{border:1px solid #eaeaea;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014;background-color:#fff}.logo{display:flex;width:32px;height:32px;border-radius:100px;justify-content:center;align-items:center;aspect-ratio:1/1;border:.5px solid #f5f5f5;object-fit:cover}.avatar{display:flex;width:32px;height:32px;border-radius:100px;justify-content:center;align-items:center;aspect-ratio:1/1;border:.5px solid #f5f5f5;background:#fff3;object-fit:cover}.icon-placeholder{color:#8c8c8c}.ctn-icon-1{display:flex;width:26px;height:26px;border-radius:100px;justify-content:center;align-items:center;aspect-ratio:1/1;border:3.8px solid #8c8c8c}.dropdown-container{position:relative;display:inline-block}.dropdown-menu{position:absolute;top:100%;right:0;z-index:10;margin-top:4px;display:inline-flex;padding:4px;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px;border-radius:8px;background-color:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .25s ease,transform .25s ease}.dropdown-menu.is-open{opacity:1;transform:translateY(0);pointer-events:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AvatarV2Component, selector: "ius-avatar-v2", inputs: ["imageUrl", "name", "size", "shape", "showEditButton", "backgroundColor", "fallbackIconName"], outputs: ["editClicked"] }, { kind: "component", type: AvatarBusinessComponent, selector: "ius-avatar-business", inputs: ["imageUrl", "label", "size", "shape", "showEditButton", "fallbackIconName"], outputs: ["editClicked"] }] }); }
|
|
3095
3247
|
}
|
|
3096
3248
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownUserMenuComponent, decorators: [{
|
|
3097
3249
|
type: Component,
|
|
3098
|
-
args: [{ selector: 'ius-dropdown-user-menu', standalone: true, imports: [CommonModule,
|
|
3250
|
+
args: [{ selector: 'ius-dropdown-user-menu', standalone: true, imports: [CommonModule, AvatarV2Component, AvatarBusinessComponent], template: "<div class=\"dropdown-container\" id=\"userMenu\">\r\n <button [disabled]=\"disabled\" (click)=\"onClick()\" class=\"ius-btn\" [ngClass]=\"{ isOpen: isOpen }\">\r\n <ius-avatar-business [imageUrl]=\"logo\" size=\"md\" shape=\"circle\"></ius-avatar-business>\r\n <span class=\"name\">{{nameUser}}</span>\r\n <ius-avatar-v2 [imageUrl]=\"avatar\" [name]=\"nameUser\" size=\"md\" shape=\"circle\"></ius-avatar-v2>\r\n </button>\r\n\r\n <div class=\"dropdown-menu\" [class.is-open]=\"isOpen\">\r\n <ng-content></ng-content>\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}.ius-btn{display:inline-flex;padding:8px 12px;align-items:center;gap:8px;border-radius:8px;background-color:#fff;color:#333;border:1px solid #eaeaea;cursor:pointer;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;font-style:normal;line-height:20px;letter-spacing:.28px}.ius-btn:hover:not(:disabled){border:1px solid #5892FF;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.ius-btn:active:not(:disabled){border:1px solid #5892FF;background-color:#edf6ff}.ius-btn.isOpen{border:1px solid #eaeaea;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014;background-color:#fff}.logo{display:flex;width:32px;height:32px;border-radius:100px;justify-content:center;align-items:center;aspect-ratio:1/1;border:.5px solid #f5f5f5;object-fit:cover}.avatar{display:flex;width:32px;height:32px;border-radius:100px;justify-content:center;align-items:center;aspect-ratio:1/1;border:.5px solid #f5f5f5;background:#fff3;object-fit:cover}.icon-placeholder{color:#8c8c8c}.ctn-icon-1{display:flex;width:26px;height:26px;border-radius:100px;justify-content:center;align-items:center;aspect-ratio:1/1;border:3.8px solid #8c8c8c}.dropdown-container{position:relative;display:inline-block}.dropdown-menu{position:absolute;top:100%;right:0;z-index:10;margin-top:4px;display:inline-flex;padding:4px;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px;border-radius:8px;background-color:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .25s ease,transform .25s ease}.dropdown-menu.is-open{opacity:1;transform:translateY(0);pointer-events:auto}\n"] }]
|
|
3099
3251
|
}], propDecorators: { isActive: [{
|
|
3100
3252
|
type: Input
|
|
3101
3253
|
}], nameUser: [{
|
|
@@ -3142,52 +3294,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3142
3294
|
type: Output
|
|
3143
3295
|
}] } });
|
|
3144
3296
|
|
|
3145
|
-
class IconXsComponent {
|
|
3146
|
-
constructor(sanitizer) {
|
|
3147
|
-
this.sanitizer = sanitizer;
|
|
3148
|
-
this.iconName = 'icon-add';
|
|
3149
|
-
this.color = 'currentColor';
|
|
3150
|
-
this.svg = '';
|
|
3151
|
-
}
|
|
3152
|
-
ngOnChanges() {
|
|
3153
|
-
const rawSvg = ICONS[this.iconName];
|
|
3154
|
-
this.svg = rawSvg ? this.sanitizer.bypassSecurityTrustHtml(rawSvg) : '';
|
|
3155
|
-
}
|
|
3156
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconXsComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3157
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: IconXsComponent, isStandalone: true, selector: "ius-icon-xs", inputs: { iconName: "iconName", color: "color" }, usesOnChanges: true, ngImport: i0, template: "<span [ngStyle]=\"{'color': color}\" [innerHTML]=\"svg\"></span>", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:14px;height:14px;color:currentColor}span svg{width:100%;height:100%;fill:\\a0 currentColor}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
3158
|
-
}
|
|
3159
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconXsComponent, decorators: [{
|
|
3160
|
-
type: Component,
|
|
3161
|
-
args: [{ selector: 'ius-icon-xs', standalone: true, imports: [CommonModule], template: "<span [ngStyle]=\"{'color': color}\" [innerHTML]=\"svg\"></span>", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:14px;height:14px;color:currentColor}span svg{width:100%;height:100%;fill:\\a0 currentColor}\n"] }]
|
|
3162
|
-
}], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { iconName: [{
|
|
3163
|
-
type: Input
|
|
3164
|
-
}], color: [{
|
|
3165
|
-
type: Input
|
|
3166
|
-
}] } });
|
|
3167
|
-
|
|
3168
|
-
class IconXxlComponent {
|
|
3169
|
-
constructor(sanitizer) {
|
|
3170
|
-
this.sanitizer = sanitizer;
|
|
3171
|
-
this.iconName = 'icon-add';
|
|
3172
|
-
this.color = 'currentColor';
|
|
3173
|
-
this.svg = '';
|
|
3174
|
-
}
|
|
3175
|
-
ngOnChanges() {
|
|
3176
|
-
const rawSvg = ICONS[this.iconName];
|
|
3177
|
-
this.svg = rawSvg ? this.sanitizer.bypassSecurityTrustHtml(rawSvg) : '';
|
|
3178
|
-
}
|
|
3179
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconXxlComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3180
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: IconXxlComponent, isStandalone: true, selector: "ius-icon-xxl", inputs: { iconName: "iconName", color: "color" }, usesOnChanges: true, ngImport: i0, template: "<span [ngStyle]=\"{'color': color}\" [innerHTML]=\"svg\"></span>", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:64px;height:64px;color:currentColor}span svg{width:100%;height:100%;fill:\\a0 currentColor}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
3181
|
-
}
|
|
3182
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconXxlComponent, decorators: [{
|
|
3183
|
-
type: Component,
|
|
3184
|
-
args: [{ selector: 'ius-icon-xxl', standalone: true, imports: [CommonModule], template: "<span [ngStyle]=\"{'color': color}\" [innerHTML]=\"svg\"></span>", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:64px;height:64px;color:currentColor}span svg{width:100%;height:100%;fill:\\a0 currentColor}\n"] }]
|
|
3185
|
-
}], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { iconName: [{
|
|
3186
|
-
type: Input
|
|
3187
|
-
}], color: [{
|
|
3188
|
-
type: Input
|
|
3189
|
-
}] } });
|
|
3190
|
-
|
|
3191
3297
|
class LinearProgressBarComponent {
|
|
3192
3298
|
constructor() {
|
|
3193
3299
|
this.porcentaje = 0; // de 0 a 100
|
|
@@ -3767,70 +3873,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3767
3873
|
args: ['document:click', ['$event']]
|
|
3768
3874
|
}] } });
|
|
3769
3875
|
|
|
3770
|
-
class AvatarV2Component {
|
|
3771
|
-
constructor() {
|
|
3772
|
-
this.size = 'md';
|
|
3773
|
-
this.shape = 'circle';
|
|
3774
|
-
this.showEditButton = false;
|
|
3775
|
-
this.fallbackIconName = 'icon-account-circle';
|
|
3776
|
-
this.editClicked = new EventEmitter();
|
|
3777
|
-
this.initials = '';
|
|
3778
|
-
}
|
|
3779
|
-
get containerStyle() {
|
|
3780
|
-
if (!this.imageUrl && this.backgroundColor) {
|
|
3781
|
-
return { 'background-color': this.backgroundColor };
|
|
3782
|
-
}
|
|
3783
|
-
return {};
|
|
3784
|
-
}
|
|
3785
|
-
ngOnChanges(changes) {
|
|
3786
|
-
if (changes['name']) {
|
|
3787
|
-
this.initials = this.extractInitials(this.name);
|
|
3788
|
-
}
|
|
3789
|
-
}
|
|
3790
|
-
onEditClick(event) {
|
|
3791
|
-
event.stopPropagation();
|
|
3792
|
-
this.editClicked.emit();
|
|
3793
|
-
}
|
|
3794
|
-
extractInitials(name) {
|
|
3795
|
-
if (!name?.trim())
|
|
3796
|
-
return '';
|
|
3797
|
-
const parts = name.trim().split(/\s+/);
|
|
3798
|
-
if (parts.length === 1)
|
|
3799
|
-
return parts[0].charAt(0).toUpperCase();
|
|
3800
|
-
return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
|
|
3801
|
-
}
|
|
3802
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3803
|
-
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"] }] }); }
|
|
3804
|
-
}
|
|
3805
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarV2Component, decorators: [{
|
|
3806
|
-
type: Component,
|
|
3807
|
-
args: [{ selector: 'ius-avatar-v2', standalone: true, imports: [
|
|
3808
|
-
CommonModule,
|
|
3809
|
-
IconXsComponent,
|
|
3810
|
-
IconSmComponent,
|
|
3811
|
-
IconMdComponent,
|
|
3812
|
-
IconXlComponent,
|
|
3813
|
-
IconXxlComponent,
|
|
3814
|
-
IconLgComponent
|
|
3815
|
-
], 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"] }]
|
|
3816
|
-
}], propDecorators: { imageUrl: [{
|
|
3817
|
-
type: Input
|
|
3818
|
-
}], name: [{
|
|
3819
|
-
type: Input
|
|
3820
|
-
}], size: [{
|
|
3821
|
-
type: Input
|
|
3822
|
-
}], shape: [{
|
|
3823
|
-
type: Input
|
|
3824
|
-
}], showEditButton: [{
|
|
3825
|
-
type: Input
|
|
3826
|
-
}], backgroundColor: [{
|
|
3827
|
-
type: Input
|
|
3828
|
-
}], fallbackIconName: [{
|
|
3829
|
-
type: Input
|
|
3830
|
-
}], editClicked: [{
|
|
3831
|
-
type: Output
|
|
3832
|
-
}] } });
|
|
3833
|
-
|
|
3834
3876
|
class ChipUserComponent {
|
|
3835
3877
|
constructor() {
|
|
3836
3878
|
this.onRemoveEvent = new EventEmitter();
|
|
@@ -7844,48 +7886,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
7844
7886
|
type: Output
|
|
7845
7887
|
}] } });
|
|
7846
7888
|
|
|
7847
|
-
class AvatarBusinessComponent {
|
|
7848
|
-
constructor() {
|
|
7849
|
-
this.size = 'md';
|
|
7850
|
-
this.shape = 'circle';
|
|
7851
|
-
this.showEditButton = false;
|
|
7852
|
-
this.fallbackIconName = 'icon-business-center';
|
|
7853
|
-
this.editClicked = new EventEmitter();
|
|
7854
|
-
}
|
|
7855
|
-
onEditClick(event) {
|
|
7856
|
-
event.stopPropagation();
|
|
7857
|
-
this.editClicked.emit();
|
|
7858
|
-
}
|
|
7859
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarBusinessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7860
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: AvatarBusinessComponent, isStandalone: true, selector: "ius-avatar-business", inputs: { imageUrl: "imageUrl", label: "label", size: "size", shape: "shape", showEditButton: "showEditButton", fallbackIconName: "fallbackIconName" }, outputs: { editClicked: "editClicked" }, ngImport: i0, template: "<div\r\n class=\"avatar-business\"\r\n [ngClass]=\"[size, shape]\"\r\n>\r\n @if (imageUrl) {\r\n <img [src]=\"imageUrl\" [alt]=\"label || 'avatar'\" class=\"avatar-business__image\" />\r\n } @else if (label) {\r\n <span class=\"body-large avatar-business__label\">{{ label }}</span>\r\n } @else {\r\n @switch (size) {\r\n @case ('xs') {\r\n <ius-icon-xs class=\"icon\" [iconName]=\"fallbackIconName\"></ius-icon-xs>\r\n }\r\n @case ('sm') {\r\n <ius-icon-sm class=\"icon\" [iconName]=\"fallbackIconName\"></ius-icon-sm>\r\n }\r\n @case ('md') {\r\n <ius-icon-md class=\"icon\" [iconName]=\"fallbackIconName\"></ius-icon-md>\r\n }\r\n @case ('lg') {\r\n <ius-icon-lg class=\"icon\" [iconName]=\"fallbackIconName\"></ius-icon-lg>\r\n }\r\n @case ('xl') {\r\n <ius-icon-xl class=\"icon\" [iconName]=\"fallbackIconName\"></ius-icon-xl>\r\n }\r\n @case ('xxl') {\r\n <ius-icon-xxl class=\"icon\" [iconName]=\"fallbackIconName\"></ius-icon-xxl>\r\n }\r\n }\r\n }\r\n\r\n @if (showEditButton) {\r\n <div class=\"avatar-business__edit-overlay\" (click)=\"onEditClick($event)\">\r\n <div class=\"avatar-business__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: [":host{display:inline-block}.avatar-business{position:relative;display:flex;justify-content:center;align-items:center;background-color:#edf6ff;overflow:hidden;flex-shrink:0}.avatar-business.circle{border-radius:50%}.avatar-business.square{border-radius:8px}.avatar-business.xs{width:14px;height:14px}.avatar-business.sm{width:24px;height:24px}.avatar-business.md{width:32px;height:32px}.avatar-business.lg{width:40px;height:40px}.avatar-business.xl{width:64px;height:64px}.avatar-business.xxl{width:96px;height:96px}.avatar-business__image{width:100%;height:100%;object-fit:cover;display:block}.avatar-business__label{color:var(--ColorText-colorTextPrimary, #333);-webkit-user-select:none;user-select:none}.avatar-business__edit-overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background-color:#f5f5f5;border:.5px solid var(--Stroke, #EAEAEA);opacity:0;transition:opacity .2s ease;cursor:pointer}.avatar-business__edit-overlay:active{background-color:#fafafa}.avatar-business__edit-btn{display:flex;justify-content:center;align-items:center;width:38px;height:38px;border-radius:50%;background-color:#fff;color:#333;pointer-events:none}.avatar-business:hover .avatar-business__edit-overlay{opacity:1}.icon{color:#c4dfff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: IconLgComponent, selector: "ius-icon-lg", 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"] }] }); }
|
|
7861
|
-
}
|
|
7862
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarBusinessComponent, decorators: [{
|
|
7863
|
-
type: Component,
|
|
7864
|
-
args: [{ selector: 'ius-avatar-business', standalone: true, imports: [
|
|
7865
|
-
CommonModule,
|
|
7866
|
-
IconXsComponent,
|
|
7867
|
-
IconSmComponent,
|
|
7868
|
-
IconMdComponent,
|
|
7869
|
-
IconLgComponent,
|
|
7870
|
-
IconXlComponent,
|
|
7871
|
-
IconXxlComponent,
|
|
7872
|
-
], template: "<div\r\n class=\"avatar-business\"\r\n [ngClass]=\"[size, shape]\"\r\n>\r\n @if (imageUrl) {\r\n <img [src]=\"imageUrl\" [alt]=\"label || 'avatar'\" class=\"avatar-business__image\" />\r\n } @else if (label) {\r\n <span class=\"body-large avatar-business__label\">{{ label }}</span>\r\n } @else {\r\n @switch (size) {\r\n @case ('xs') {\r\n <ius-icon-xs class=\"icon\" [iconName]=\"fallbackIconName\"></ius-icon-xs>\r\n }\r\n @case ('sm') {\r\n <ius-icon-sm class=\"icon\" [iconName]=\"fallbackIconName\"></ius-icon-sm>\r\n }\r\n @case ('md') {\r\n <ius-icon-md class=\"icon\" [iconName]=\"fallbackIconName\"></ius-icon-md>\r\n }\r\n @case ('lg') {\r\n <ius-icon-lg class=\"icon\" [iconName]=\"fallbackIconName\"></ius-icon-lg>\r\n }\r\n @case ('xl') {\r\n <ius-icon-xl class=\"icon\" [iconName]=\"fallbackIconName\"></ius-icon-xl>\r\n }\r\n @case ('xxl') {\r\n <ius-icon-xxl class=\"icon\" [iconName]=\"fallbackIconName\"></ius-icon-xxl>\r\n }\r\n }\r\n }\r\n\r\n @if (showEditButton) {\r\n <div class=\"avatar-business__edit-overlay\" (click)=\"onEditClick($event)\">\r\n <div class=\"avatar-business__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: [":host{display:inline-block}.avatar-business{position:relative;display:flex;justify-content:center;align-items:center;background-color:#edf6ff;overflow:hidden;flex-shrink:0}.avatar-business.circle{border-radius:50%}.avatar-business.square{border-radius:8px}.avatar-business.xs{width:14px;height:14px}.avatar-business.sm{width:24px;height:24px}.avatar-business.md{width:32px;height:32px}.avatar-business.lg{width:40px;height:40px}.avatar-business.xl{width:64px;height:64px}.avatar-business.xxl{width:96px;height:96px}.avatar-business__image{width:100%;height:100%;object-fit:cover;display:block}.avatar-business__label{color:var(--ColorText-colorTextPrimary, #333);-webkit-user-select:none;user-select:none}.avatar-business__edit-overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background-color:#f5f5f5;border:.5px solid var(--Stroke, #EAEAEA);opacity:0;transition:opacity .2s ease;cursor:pointer}.avatar-business__edit-overlay:active{background-color:#fafafa}.avatar-business__edit-btn{display:flex;justify-content:center;align-items:center;width:38px;height:38px;border-radius:50%;background-color:#fff;color:#333;pointer-events:none}.avatar-business:hover .avatar-business__edit-overlay{opacity:1}.icon{color:#c4dfff}\n"] }]
|
|
7873
|
-
}], propDecorators: { imageUrl: [{
|
|
7874
|
-
type: Input
|
|
7875
|
-
}], label: [{
|
|
7876
|
-
type: Input
|
|
7877
|
-
}], size: [{
|
|
7878
|
-
type: Input
|
|
7879
|
-
}], shape: [{
|
|
7880
|
-
type: Input
|
|
7881
|
-
}], showEditButton: [{
|
|
7882
|
-
type: Input
|
|
7883
|
-
}], fallbackIconName: [{
|
|
7884
|
-
type: Input
|
|
7885
|
-
}], editClicked: [{
|
|
7886
|
-
type: Output
|
|
7887
|
-
}] } });
|
|
7888
|
-
|
|
7889
7889
|
class InfiniteScrollDirective {
|
|
7890
7890
|
constructor(host) {
|
|
7891
7891
|
this.host = host;
|