@litigiovirtual/ius-design-components 1.0.241 → 1.0.243
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-v2/avatar-v2.component.mjs +2 -2
- package/esm2022/lib/card-actividad-evento/card-actividad-evento.component.mjs +90 -13
- package/esm2022/lib/dropdown-user-menu/dropdown-user-menu.component.mjs +5 -5
- package/fesm2022/litigiovirtual-ius-design-components.mjs +240 -165
- package/fesm2022/litigiovirtual-ius-design-components.mjs.map +1 -1
- package/lib/card-actividad-evento/card-actividad-evento.component.d.ts +13 -2
- 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) {\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:#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}\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) {\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:#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}\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) {\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) {\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();
|
|
@@ -7020,10 +7062,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
7020
7062
|
|
|
7021
7063
|
registerLocaleData(localeEs);
|
|
7022
7064
|
class CardActividadEventoComponent {
|
|
7023
|
-
constructor() {
|
|
7065
|
+
constructor(datePipe) {
|
|
7066
|
+
this.datePipe = datePipe;
|
|
7024
7067
|
this.read = true;
|
|
7025
7068
|
this.warning = false;
|
|
7026
7069
|
this.collapse = true;
|
|
7070
|
+
this.done = false;
|
|
7027
7071
|
this.onClickButtonCopy = new EventEmitter();
|
|
7028
7072
|
this.onClickButtonRead = new EventEmitter();
|
|
7029
7073
|
this.onClickButtonEdit = new EventEmitter();
|
|
@@ -7031,11 +7075,78 @@ class CardActividadEventoComponent {
|
|
|
7031
7075
|
this.onClickButtonDone = new EventEmitter();
|
|
7032
7076
|
}
|
|
7033
7077
|
toggleCollapse() {
|
|
7078
|
+
const wasCollapsed = this.collapse;
|
|
7034
7079
|
this.collapse = !this.collapse;
|
|
7080
|
+
if (wasCollapsed && !this.read) {
|
|
7081
|
+
this.onClickButtonRead.emit(new Event('autoExpand'));
|
|
7082
|
+
}
|
|
7035
7083
|
}
|
|
7036
|
-
|
|
7084
|
+
get headerFechaLabel() {
|
|
7085
|
+
return this.estado === 'FINALIZADA' ? 'Realizada el' : 'Programada para el';
|
|
7086
|
+
}
|
|
7087
|
+
get estadoLabel() {
|
|
7088
|
+
if (this.estado === 'FINALIZADA')
|
|
7089
|
+
return 'Finalizada';
|
|
7090
|
+
if (this.warning)
|
|
7091
|
+
return 'Sin reporte de asistencia';
|
|
7092
|
+
return 'Programada';
|
|
7093
|
+
}
|
|
7094
|
+
get estadoLabelClass() {
|
|
7095
|
+
if (this.estado === 'FINALIZADA')
|
|
7096
|
+
return 'txt-ter';
|
|
7097
|
+
if (this.warning)
|
|
7098
|
+
return 'tx-warn';
|
|
7099
|
+
return 'tx-read';
|
|
7100
|
+
}
|
|
7101
|
+
async clickButtonCopy(event) {
|
|
7037
7102
|
event.stopImmediatePropagation();
|
|
7038
|
-
|
|
7103
|
+
try {
|
|
7104
|
+
await navigator.clipboard.writeText(this.getCardSummary());
|
|
7105
|
+
this.onClickButtonCopy.emit(event);
|
|
7106
|
+
}
|
|
7107
|
+
catch {
|
|
7108
|
+
// clipboard write failed; no emit
|
|
7109
|
+
}
|
|
7110
|
+
}
|
|
7111
|
+
getCardSummary() {
|
|
7112
|
+
const lines = [];
|
|
7113
|
+
lines.push('Actividades y eventos');
|
|
7114
|
+
if (this.titulo)
|
|
7115
|
+
lines.push(`Título: ${this.titulo}`);
|
|
7116
|
+
if (this.usuarioAsignado)
|
|
7117
|
+
lines.push(`Asignado a: ${this.usuarioAsignado}`);
|
|
7118
|
+
if (this.fechaProgramacion)
|
|
7119
|
+
lines.push(`${this.headerFechaLabel}: ${this.formatDateTime(this.fechaProgramacion)}`);
|
|
7120
|
+
if (this.text1)
|
|
7121
|
+
lines.push(this.text1);
|
|
7122
|
+
lines.push(`Estado: ${this.estadoLabel}`);
|
|
7123
|
+
if (this.fechaInicio || this.fechaFin) {
|
|
7124
|
+
const partes = [];
|
|
7125
|
+
if (this.fechaInicio)
|
|
7126
|
+
partes.push(this.formatDateTime(this.fechaInicio));
|
|
7127
|
+
if (this.fechaFin)
|
|
7128
|
+
partes.push(this.formatDateTime(this.fechaFin));
|
|
7129
|
+
lines.push(`Rango: ${partes.join(' - ')}`);
|
|
7130
|
+
}
|
|
7131
|
+
if (this.descripcion) {
|
|
7132
|
+
lines.push('');
|
|
7133
|
+
lines.push('Descripción:');
|
|
7134
|
+
lines.push(this.descripcion);
|
|
7135
|
+
}
|
|
7136
|
+
if (this.link) {
|
|
7137
|
+
lines.push('');
|
|
7138
|
+
lines.push(`Link: ${this.link}`);
|
|
7139
|
+
}
|
|
7140
|
+
return lines.join('\n');
|
|
7141
|
+
}
|
|
7142
|
+
openLink(event) {
|
|
7143
|
+
event.stopImmediatePropagation();
|
|
7144
|
+
if (this.link) {
|
|
7145
|
+
window.open(this.link, '_blank', 'noopener,noreferrer');
|
|
7146
|
+
}
|
|
7147
|
+
}
|
|
7148
|
+
formatDateTime(d) {
|
|
7149
|
+
return this.datePipe.transform(d, 'dd MMM yyyy h:mm a') ?? '';
|
|
7039
7150
|
}
|
|
7040
7151
|
clickButtonRead(event) {
|
|
7041
7152
|
event.stopImmediatePropagation();
|
|
@@ -7053,22 +7164,26 @@ class CardActividadEventoComponent {
|
|
|
7053
7164
|
event.stopImmediatePropagation();
|
|
7054
7165
|
this.onClickButtonDone.emit(event);
|
|
7055
7166
|
}
|
|
7056
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardActividadEventoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7057
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CardActividadEventoComponent, isStandalone: true, selector: "ius-card-actividad-evento", inputs: { read: "read", warning: "warning", collapse: "collapse", titulo: "titulo", usuarioAsignado: "usuarioAsignado", fechaProgramacion: "fechaProgramacion", fechaPrincipal: "fechaPrincipal", text1: "text1", estado: "estado", fechaInicio: "fechaInicio", fechaFin: "fechaFin", descripcion: "descripcion" }, outputs: { onClickButtonCopy: "onClickButtonCopy", onClickButtonRead: "onClickButtonRead", onClickButtonEdit: "onClickButtonEdit", onClickButtonDelete: "onClickButtonDelete", onClickButtonDone: "onClickButtonDone" }, providers: [
|
|
7058
|
-
{ provide: LOCALE_ID, useValue: 'es' }
|
|
7059
|
-
|
|
7167
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardActividadEventoComponent, deps: [{ token: i1$1.DatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7168
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CardActividadEventoComponent, isStandalone: true, selector: "ius-card-actividad-evento", inputs: { read: "read", warning: "warning", collapse: "collapse", done: "done", titulo: "titulo", usuarioAsignado: "usuarioAsignado", fechaProgramacion: "fechaProgramacion", fechaPrincipal: "fechaPrincipal", text1: "text1", estado: "estado", fechaInicio: "fechaInicio", fechaFin: "fechaFin", descripcion: "descripcion", link: "link" }, outputs: { onClickButtonCopy: "onClickButtonCopy", onClickButtonRead: "onClickButtonRead", onClickButtonEdit: "onClickButtonEdit", onClickButtonDelete: "onClickButtonDelete", onClickButtonDone: "onClickButtonDone" }, providers: [
|
|
7169
|
+
{ provide: LOCALE_ID, useValue: 'es' },
|
|
7170
|
+
DatePipe
|
|
7171
|
+
], ngImport: i0, template: "<div class=\"ctn-gnrl\" (click)=\"toggleCollapse()\">\n <div class=\"ctn-card\">\n <div class=\"ctn-inf\">\n <ius-icon-sm iconName=\"icon-calendar-clock\" class=\"priority-tx\"\n [ngClass]=\"{'icon-calendar-clock': estado === 'FINALIZADA' }\"></ius-icon-sm>\n <div class=\"info\">\n <span class=\"caption-sm txt-ter\">Actividades y eventos</span>\n <span class=\"label-base txt-pry\" [ngClass]=\"{'body-base-1': read}\">{{titulo}}</span>\n <div class=\"tx-asig\">\n <div class=\"row-text-2\">\n <span class=\"caption-sm txt-ter\">Asignado a</span>\n <span class=\"body-base-1 txt-sec\">{{usuarioAsignado}}</span>\n </div>\n <div class=\"row-text-2\">\n <span class=\"caption-sm txt-ter\">{{ headerFechaLabel }}</span>\n <span class=\"body-base-1 txt-sec\">{{fechaProgramacion | date: 'dd MMM yyyy h:mm a'}}</span>\n </div>\n </div>\n <span class=\"body-base-1 txt-sec\">{{text1}}</span>\n </div>\n </div>\n <div class=\"ctn-icons\">\n <div class=\"row-text-2\">\n @if (!read) {\n <div class=\"icon-dot\"></div>\n }\n @if (warning && estado !== 'FINALIZADA') {\n <ius-icon-xs iconName=\"icon-emergency-home\" class=\"icon-emergency-home\"></ius-icon-xs>\n }\n <span class=\"body-sm txt-ter fecha\">{{fechaPrincipal | date: 'd MMM y'}}</span>\n <span class=\"buttons-hove\">\n <ius-button-circle-tertiary iconName=\"icon-mark-chat-read\"\n [iusPopoverContent]=\"read ? 'Marcar como no le\u00EDdo' : 'Marcar como le\u00EDdo'\"\n (buttonClicked)=\"clickButtonRead($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-content-copy\"\n iusPopoverContent=\"Copiar informaci\u00F3n\"\n (buttonClicked)=\"clickButtonCopy($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-done-outline\"\n [iusPopoverContent]=\"done ? 'Marcar como abierta' : 'Marcar como hecha'\"\n (buttonClicked)=\"clickButtonDone($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-edit\"\n iusPopoverContent=\"Editar\"\n (buttonClicked)=\"clickButtonEdit($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-delete\"\n iusPopoverContent=\"Eliminar\"\n (buttonClicked)=\"clickButtonDelete($event)\"></ius-button-circle-tertiary>\n </span>\n </div>\n <ius-icon-sm [iconName]=\"collapse ? 'icon-keyboard-arrow-down' : 'icon-keyboard-arrow-up'\"\n class=\"txt-pry\"></ius-icon-sm>\n </div>\n </div>\n <div class=\"ctn-collapse-card\" [ngClass]=\"{'collapsed': collapse}\">\n <ius-simple-divider></ius-simple-divider>\n <div class=\"ctn-clp\">\n <div class=\"ctn-info-clp\">\n <div class=\"text-info\">\n <span class=\"label-base\" [ngClass]=\"estadoLabelClass\">{{ estadoLabel }}</span>\n <div class=\"row-text-1 body-sm txt-ter\">\n <span>{{fechaInicio | date: 'dd MMM yyyy h:mm a'}}</span>\n @if (fechaFin) {\n <span>-</span>\n <span>{{fechaFin | date: 'dd MMM yyyy h:mm a'}}</span>\n }\n </div>\n <span class=\"body-base-1 txt-pry\">{{descripcion}}</span>\n @if (link) {\n <a class=\"body-sm link-actividad\" (click)=\"openLink($event)\">\n <ius-icon-xs iconName=\"icon-link-2\"></ius-icon-xs>\n <span>{{ link }}</span>\n </a>\n }\n </div>\n </div>\n </div>\n </div>\n</div>\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}.ctn-gnrl{position:relative;display:flex;flex-direction:column;cursor:pointer;padding:8px 12px;box-sizing:border-box;border-radius:4px;border:1px solid #eaeaea}.ctn-gnrl:hover{border:1px solid #C4DFFF;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.ctn-gnrl:hover .fecha{display:none;pointer-events:none}.ctn-gnrl:hover .buttons-hove{display:flex;pointer-events:auto}.ctn-card{position:relative;display:flex;align-items:center;gap:24px}.ctn-inf{display:flex;flex:1 0 0;align-items:center;gap:16px}.icon-calendar-clock{color:#8c8c8c!important}.priority-tx{color:#184fdb}.tx-asig{display:flex;gap:24px}.info{display:flex;flex:1 0 0;flex-direction:column;align-items:flex-start}.ctn-icons{display:flex;align-items:center;gap:16px}.icon-dot{display:flex;align-items:center;width:8px;height:8px;aspect-ratio:1/1;background-color:#2167ff;border-radius:100px}.icon-dot-warning{display:flex;align-items:center;width:8px;height:8px;aspect-ratio:1/1;background-color:#ffae00;border-radius:100px}.icon-emergency-home{color:#ffae00}.fecha{width:76px}.buttons-hove{display:none;pointer-events:none;gap:4px}.ctn-collapse-card{max-height:1000px;overflow:hidden;transition:max-height .3s ease-in-out}.ctn-collapse-card.collapsed{max-height:0px}.ctn-clp{display:flex;gap:8px}.ctn-info-clp{display:flex;padding:4px 8px;flex-direction:column;gap:12px;flex:1 0 0}.text-info{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}.tx-read{color:#629219}.tx-warn{color:#db8e00}ius-simple-divider{margin:8px 0}.row-text-1{display:flex;align-items:center;gap:8px}.row-text-2{display:flex;align-items:center;gap:4px}.txt-pry{color:#333}.txt-sec{color:#595959}.txt-ter{color:#8c8c8c}.link-actividad{display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:4px 8px;border-radius:4px;color:#595959;cursor:pointer;text-decoration:none;word-break:break-all}.link-actividad:hover{background-color:#edf6ff;text-decoration:underline}\n"], dependencies: [{ kind: "component", type: IconSmComponent, selector: "ius-icon-sm", inputs: ["iconName", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonCircleTertiaryComponent, selector: "ius-button-circle-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }, { kind: "component", type: SimpleDividerComponent, selector: "ius-simple-divider" }, { kind: "component", type: IconXsComponent, selector: "ius-icon-xs", inputs: ["iconName", "color"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "directive", type: PopoverDirective, selector: "[iusPopover], [iusPopoverTitle], [iusPopoverContent]", inputs: ["iusPopover", "iusPopoverTitle", "iusPopoverContent", "iusPopoverPosition", "iusPopoverOpenDelay", "iusPopoverCloseDelay"] }] }); }
|
|
7060
7172
|
}
|
|
7061
7173
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardActividadEventoComponent, decorators: [{
|
|
7062
7174
|
type: Component,
|
|
7063
|
-
args: [{ selector: 'ius-card-actividad-evento', standalone: true, imports: [IconSmComponent, NgClass, ButtonCircleTertiaryComponent, SimpleDividerComponent, IconXsComponent, DatePipe], providers: [
|
|
7064
|
-
{ provide: LOCALE_ID, useValue: 'es' }
|
|
7065
|
-
|
|
7066
|
-
}]
|
|
7175
|
+
args: [{ selector: 'ius-card-actividad-evento', standalone: true, imports: [IconSmComponent, NgClass, ButtonCircleTertiaryComponent, SimpleDividerComponent, IconXsComponent, DatePipe, PopoverDirective], providers: [
|
|
7176
|
+
{ provide: LOCALE_ID, useValue: 'es' },
|
|
7177
|
+
DatePipe
|
|
7178
|
+
], template: "<div class=\"ctn-gnrl\" (click)=\"toggleCollapse()\">\n <div class=\"ctn-card\">\n <div class=\"ctn-inf\">\n <ius-icon-sm iconName=\"icon-calendar-clock\" class=\"priority-tx\"\n [ngClass]=\"{'icon-calendar-clock': estado === 'FINALIZADA' }\"></ius-icon-sm>\n <div class=\"info\">\n <span class=\"caption-sm txt-ter\">Actividades y eventos</span>\n <span class=\"label-base txt-pry\" [ngClass]=\"{'body-base-1': read}\">{{titulo}}</span>\n <div class=\"tx-asig\">\n <div class=\"row-text-2\">\n <span class=\"caption-sm txt-ter\">Asignado a</span>\n <span class=\"body-base-1 txt-sec\">{{usuarioAsignado}}</span>\n </div>\n <div class=\"row-text-2\">\n <span class=\"caption-sm txt-ter\">{{ headerFechaLabel }}</span>\n <span class=\"body-base-1 txt-sec\">{{fechaProgramacion | date: 'dd MMM yyyy h:mm a'}}</span>\n </div>\n </div>\n <span class=\"body-base-1 txt-sec\">{{text1}}</span>\n </div>\n </div>\n <div class=\"ctn-icons\">\n <div class=\"row-text-2\">\n @if (!read) {\n <div class=\"icon-dot\"></div>\n }\n @if (warning && estado !== 'FINALIZADA') {\n <ius-icon-xs iconName=\"icon-emergency-home\" class=\"icon-emergency-home\"></ius-icon-xs>\n }\n <span class=\"body-sm txt-ter fecha\">{{fechaPrincipal | date: 'd MMM y'}}</span>\n <span class=\"buttons-hove\">\n <ius-button-circle-tertiary iconName=\"icon-mark-chat-read\"\n [iusPopoverContent]=\"read ? 'Marcar como no le\u00EDdo' : 'Marcar como le\u00EDdo'\"\n (buttonClicked)=\"clickButtonRead($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-content-copy\"\n iusPopoverContent=\"Copiar informaci\u00F3n\"\n (buttonClicked)=\"clickButtonCopy($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-done-outline\"\n [iusPopoverContent]=\"done ? 'Marcar como abierta' : 'Marcar como hecha'\"\n (buttonClicked)=\"clickButtonDone($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-edit\"\n iusPopoverContent=\"Editar\"\n (buttonClicked)=\"clickButtonEdit($event)\"></ius-button-circle-tertiary>\n <ius-button-circle-tertiary iconName=\"icon-delete\"\n iusPopoverContent=\"Eliminar\"\n (buttonClicked)=\"clickButtonDelete($event)\"></ius-button-circle-tertiary>\n </span>\n </div>\n <ius-icon-sm [iconName]=\"collapse ? 'icon-keyboard-arrow-down' : 'icon-keyboard-arrow-up'\"\n class=\"txt-pry\"></ius-icon-sm>\n </div>\n </div>\n <div class=\"ctn-collapse-card\" [ngClass]=\"{'collapsed': collapse}\">\n <ius-simple-divider></ius-simple-divider>\n <div class=\"ctn-clp\">\n <div class=\"ctn-info-clp\">\n <div class=\"text-info\">\n <span class=\"label-base\" [ngClass]=\"estadoLabelClass\">{{ estadoLabel }}</span>\n <div class=\"row-text-1 body-sm txt-ter\">\n <span>{{fechaInicio | date: 'dd MMM yyyy h:mm a'}}</span>\n @if (fechaFin) {\n <span>-</span>\n <span>{{fechaFin | date: 'dd MMM yyyy h:mm a'}}</span>\n }\n </div>\n <span class=\"body-base-1 txt-pry\">{{descripcion}}</span>\n @if (link) {\n <a class=\"body-sm link-actividad\" (click)=\"openLink($event)\">\n <ius-icon-xs iconName=\"icon-link-2\"></ius-icon-xs>\n <span>{{ link }}</span>\n </a>\n }\n </div>\n </div>\n </div>\n </div>\n</div>\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}.ctn-gnrl{position:relative;display:flex;flex-direction:column;cursor:pointer;padding:8px 12px;box-sizing:border-box;border-radius:4px;border:1px solid #eaeaea}.ctn-gnrl:hover{border:1px solid #C4DFFF;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.ctn-gnrl:hover .fecha{display:none;pointer-events:none}.ctn-gnrl:hover .buttons-hove{display:flex;pointer-events:auto}.ctn-card{position:relative;display:flex;align-items:center;gap:24px}.ctn-inf{display:flex;flex:1 0 0;align-items:center;gap:16px}.icon-calendar-clock{color:#8c8c8c!important}.priority-tx{color:#184fdb}.tx-asig{display:flex;gap:24px}.info{display:flex;flex:1 0 0;flex-direction:column;align-items:flex-start}.ctn-icons{display:flex;align-items:center;gap:16px}.icon-dot{display:flex;align-items:center;width:8px;height:8px;aspect-ratio:1/1;background-color:#2167ff;border-radius:100px}.icon-dot-warning{display:flex;align-items:center;width:8px;height:8px;aspect-ratio:1/1;background-color:#ffae00;border-radius:100px}.icon-emergency-home{color:#ffae00}.fecha{width:76px}.buttons-hove{display:none;pointer-events:none;gap:4px}.ctn-collapse-card{max-height:1000px;overflow:hidden;transition:max-height .3s ease-in-out}.ctn-collapse-card.collapsed{max-height:0px}.ctn-clp{display:flex;gap:8px}.ctn-info-clp{display:flex;padding:4px 8px;flex-direction:column;gap:12px;flex:1 0 0}.text-info{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}.tx-read{color:#629219}.tx-warn{color:#db8e00}ius-simple-divider{margin:8px 0}.row-text-1{display:flex;align-items:center;gap:8px}.row-text-2{display:flex;align-items:center;gap:4px}.txt-pry{color:#333}.txt-sec{color:#595959}.txt-ter{color:#8c8c8c}.link-actividad{display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:4px 8px;border-radius:4px;color:#595959;cursor:pointer;text-decoration:none;word-break:break-all}.link-actividad:hover{background-color:#edf6ff;text-decoration:underline}\n"] }]
|
|
7179
|
+
}], ctorParameters: () => [{ type: i1$1.DatePipe }], propDecorators: { read: [{
|
|
7067
7180
|
type: Input
|
|
7068
7181
|
}], warning: [{
|
|
7069
7182
|
type: Input
|
|
7070
7183
|
}], collapse: [{
|
|
7071
7184
|
type: Input
|
|
7185
|
+
}], done: [{
|
|
7186
|
+
type: Input
|
|
7072
7187
|
}], titulo: [{
|
|
7073
7188
|
type: Input
|
|
7074
7189
|
}], usuarioAsignado: [{
|
|
@@ -7087,6 +7202,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
7087
7202
|
type: Input
|
|
7088
7203
|
}], descripcion: [{
|
|
7089
7204
|
type: Input
|
|
7205
|
+
}], link: [{
|
|
7206
|
+
type: Input
|
|
7090
7207
|
}], onClickButtonCopy: [{
|
|
7091
7208
|
type: Output
|
|
7092
7209
|
}], onClickButtonRead: [{
|
|
@@ -7769,48 +7886,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
7769
7886
|
type: Output
|
|
7770
7887
|
}] } });
|
|
7771
7888
|
|
|
7772
|
-
class AvatarBusinessComponent {
|
|
7773
|
-
constructor() {
|
|
7774
|
-
this.size = 'md';
|
|
7775
|
-
this.shape = 'circle';
|
|
7776
|
-
this.showEditButton = false;
|
|
7777
|
-
this.fallbackIconName = 'icon-business-center';
|
|
7778
|
-
this.editClicked = new EventEmitter();
|
|
7779
|
-
}
|
|
7780
|
-
onEditClick(event) {
|
|
7781
|
-
event.stopPropagation();
|
|
7782
|
-
this.editClicked.emit();
|
|
7783
|
-
}
|
|
7784
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarBusinessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7785
|
-
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"] }] }); }
|
|
7786
|
-
}
|
|
7787
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarBusinessComponent, decorators: [{
|
|
7788
|
-
type: Component,
|
|
7789
|
-
args: [{ selector: 'ius-avatar-business', standalone: true, imports: [
|
|
7790
|
-
CommonModule,
|
|
7791
|
-
IconXsComponent,
|
|
7792
|
-
IconSmComponent,
|
|
7793
|
-
IconMdComponent,
|
|
7794
|
-
IconLgComponent,
|
|
7795
|
-
IconXlComponent,
|
|
7796
|
-
IconXxlComponent,
|
|
7797
|
-
], 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"] }]
|
|
7798
|
-
}], propDecorators: { imageUrl: [{
|
|
7799
|
-
type: Input
|
|
7800
|
-
}], label: [{
|
|
7801
|
-
type: Input
|
|
7802
|
-
}], size: [{
|
|
7803
|
-
type: Input
|
|
7804
|
-
}], shape: [{
|
|
7805
|
-
type: Input
|
|
7806
|
-
}], showEditButton: [{
|
|
7807
|
-
type: Input
|
|
7808
|
-
}], fallbackIconName: [{
|
|
7809
|
-
type: Input
|
|
7810
|
-
}], editClicked: [{
|
|
7811
|
-
type: Output
|
|
7812
|
-
}] } });
|
|
7813
|
-
|
|
7814
7889
|
class InfiniteScrollDirective {
|
|
7815
7890
|
constructor(host) {
|
|
7816
7891
|
this.host = host;
|