@progressio_resources/gravity-design-system 3.1.3 → 3.1.5
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/components/gravity-generic-avatar-secondary/gravity-generic-avatar-secondary.component.mjs +14 -7
- package/fesm2022/progressio_resources-gravity-design-system.mjs +11 -5
- package/fesm2022/progressio_resources-gravity-design-system.mjs.map +1 -1
- package/lib/components/gravity-generic-avatar-secondary/gravity-generic-avatar-secondary.component.d.ts +5 -3
- package/package.json +1 -1
- package/src/lib/assets/images/hero-avatar/hero-avatar-active-admin.svg +15 -0
- package/src/lib/assets/images/hero-avatar/hero-avatar-active-regular.svg +15 -0
- package/src/lib/assets/images/hero-avatar/hero-avatar-active-support.svg +15 -0
- package/src/lib/assets/images/hero-avatar/hero-avatar-blocked-all.svg +15 -0
- package/src/lib/assets/images/hero-avatar/hero-avatar-inactive-admin.svg +15 -0
- package/src/lib/assets/images/hero-avatar/hero-avatar-inactive-regular.svg +15 -0
- package/src/lib/assets/images/hero-avatar/hero-avatar-inactive-support.svg +15 -0
- package/src/lib/assets/json/icons.json +20 -8
- package/src/lib/assets/images/hero-avatar/gr-hero-avatar-admin.svg +0 -20
- package/src/lib/assets/images/hero-avatar/gr-hero-avatar-blocked.svg +0 -22
- package/src/lib/assets/images/hero-avatar/gr-hero-avatar-regular.svg +0 -20
- package/src/lib/assets/images/hero-avatar/gr-hero-avatar-support.svg +0 -22
|
@@ -1,21 +1,28 @@
|
|
|
1
1
|
import { Component, Input } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
|
-
import * as i1 from "
|
|
3
|
+
import * as i1 from "@angular/common";
|
|
4
|
+
import * as i2 from "../gravity-icon/gravity-icon.component";
|
|
4
5
|
export class GravityGenericAvatarSecondaryComponent {
|
|
5
6
|
constructor() {
|
|
6
|
-
this.
|
|
7
|
+
this.userRole = '';
|
|
8
|
+
this.userState = '';
|
|
9
|
+
this.type = 'neutral';
|
|
7
10
|
}
|
|
8
11
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityGenericAvatarSecondaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityGenericAvatarSecondaryComponent, selector: "gravity-generic-avatar-secondary", inputs: { label: "label",
|
|
12
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityGenericAvatarSecondaryComponent, selector: "gravity-generic-avatar-secondary", inputs: { label: "label", initials: "initials", userRole: "userRole", userState: "userState", type: "type" }, ngImport: i0, template: "<div class=\"generic-avatar-secondary {{ type }}\">\n <div class=\"avatar-outer-circle\">\n <div class=\"avatar-inner-circle\">\n <h1 *ngIf=\"initials\" class=\"hr-title lg-regular\"> {{ initials }} </h1>\n\n <gravity-icon *ngIf=\"!initials && userState && userRole\" [iconName]=\"userState === 'blocked' ? 'hero-avatar-blocked-all' :\n 'hero-avatar-' + userState + '-' + userRole\"> </gravity-icon>\n </div>\n </div>\n <div class=\"state-name\"><span class=\"hr-body sm-regular\"> {{ label }} </span></div>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.generic-avatar-secondary{width:70px;display:flex;position:relative;align-items:center;flex-direction:column;justify-content:center}.generic-avatar-secondary .avatar-outer-circle{width:70px;height:70px;display:flex;align-items:center;justify-content:center;border-radius:6.25rem}.generic-avatar-secondary .avatar-outer-circle .avatar-inner-circle{width:64px;height:64px;display:flex;position:relative;align-items:center;justify-content:center;border-radius:6.25rem}.generic-avatar-secondary .state-name{height:17px;bottom:-8px;position:absolute;white-space:nowrap;border-radius:.3125rem;padding:var(--gravity-spacing-xxs);margin-top:calc(-1 * var(--gravity-spacing-xs))}.generic-avatar-secondary .state-name span{height:9px;display:block;margin-top:-4px}.generic-avatar-secondary.attention .avatar-outer-circle{border:1.5px solid var(--bg-button-active-primary)}.generic-avatar-secondary.attention .avatar-outer-circle .avatar-inner-circle{background:var(--bg-button-hover-tertiary)}.generic-avatar-secondary.attention .avatar-outer-circle .avatar-inner-circle h1{color:var(--on-bg-button-active-tertiary)}.generic-avatar-secondary.attention .state-name{color:var(--on-bg-button-active-primary);background:var(--bg-button-active-primary)}.generic-avatar-secondary.positive .avatar-outer-circle{border:1.5px solid var(--on-bg-button-active-positive)}.generic-avatar-secondary.positive .avatar-outer-circle .avatar-inner-circle{background:var(--bg-button-active-positive)}.generic-avatar-secondary.positive .avatar-outer-circle .avatar-inner-circle h1{color:var(--on-bg-button-active-positive)}.generic-avatar-secondary.positive .state-name{color:var(--bg-button-active-positive);background:var(--on-bg-button-active-positive)}.generic-avatar-secondary.negative .avatar-outer-circle{border:1.5px solid var(--on-bg-button-active-negative)}.generic-avatar-secondary.negative .avatar-outer-circle .avatar-inner-circle{background:var(--bg-button-active-negative)}.generic-avatar-secondary.negative .avatar-outer-circle .avatar-inner-circle h1{color:var(--on-bg-button-active-negative)}.generic-avatar-secondary.negative .state-name{color:var(--bg-button-active-negative);background:var(--on-bg-button-active-negative)}.generic-avatar-secondary.neutral .avatar-outer-circle{border:1.5px solid var(--text-primary)}.generic-avatar-secondary.neutral .avatar-outer-circle .avatar-inner-circle{background:var(--bg-disabled)}.generic-avatar-secondary.neutral .avatar-outer-circle .avatar-inner-circle h1{color:var(--text-primary)}.generic-avatar-secondary.neutral .state-name{color:var(--bg-disabled);background:var(--text-primary)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
|
|
10
13
|
}
|
|
11
14
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityGenericAvatarSecondaryComponent, decorators: [{
|
|
12
15
|
type: Component,
|
|
13
|
-
args: [{ selector: 'gravity-generic-avatar-secondary', template: "<div class=\"generic-avatar-secondary {{
|
|
16
|
+
args: [{ selector: 'gravity-generic-avatar-secondary', template: "<div class=\"generic-avatar-secondary {{ type }}\">\n <div class=\"avatar-outer-circle\">\n <div class=\"avatar-inner-circle\">\n <h1 *ngIf=\"initials\" class=\"hr-title lg-regular\"> {{ initials }} </h1>\n\n <gravity-icon *ngIf=\"!initials && userState && userRole\" [iconName]=\"userState === 'blocked' ? 'hero-avatar-blocked-all' :\n 'hero-avatar-' + userState + '-' + userRole\"> </gravity-icon>\n </div>\n </div>\n <div class=\"state-name\"><span class=\"hr-body sm-regular\"> {{ label }} </span></div>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.generic-avatar-secondary{width:70px;display:flex;position:relative;align-items:center;flex-direction:column;justify-content:center}.generic-avatar-secondary .avatar-outer-circle{width:70px;height:70px;display:flex;align-items:center;justify-content:center;border-radius:6.25rem}.generic-avatar-secondary .avatar-outer-circle .avatar-inner-circle{width:64px;height:64px;display:flex;position:relative;align-items:center;justify-content:center;border-radius:6.25rem}.generic-avatar-secondary .state-name{height:17px;bottom:-8px;position:absolute;white-space:nowrap;border-radius:.3125rem;padding:var(--gravity-spacing-xxs);margin-top:calc(-1 * var(--gravity-spacing-xs))}.generic-avatar-secondary .state-name span{height:9px;display:block;margin-top:-4px}.generic-avatar-secondary.attention .avatar-outer-circle{border:1.5px solid var(--bg-button-active-primary)}.generic-avatar-secondary.attention .avatar-outer-circle .avatar-inner-circle{background:var(--bg-button-hover-tertiary)}.generic-avatar-secondary.attention .avatar-outer-circle .avatar-inner-circle h1{color:var(--on-bg-button-active-tertiary)}.generic-avatar-secondary.attention .state-name{color:var(--on-bg-button-active-primary);background:var(--bg-button-active-primary)}.generic-avatar-secondary.positive .avatar-outer-circle{border:1.5px solid var(--on-bg-button-active-positive)}.generic-avatar-secondary.positive .avatar-outer-circle .avatar-inner-circle{background:var(--bg-button-active-positive)}.generic-avatar-secondary.positive .avatar-outer-circle .avatar-inner-circle h1{color:var(--on-bg-button-active-positive)}.generic-avatar-secondary.positive .state-name{color:var(--bg-button-active-positive);background:var(--on-bg-button-active-positive)}.generic-avatar-secondary.negative .avatar-outer-circle{border:1.5px solid var(--on-bg-button-active-negative)}.generic-avatar-secondary.negative .avatar-outer-circle .avatar-inner-circle{background:var(--bg-button-active-negative)}.generic-avatar-secondary.negative .avatar-outer-circle .avatar-inner-circle h1{color:var(--on-bg-button-active-negative)}.generic-avatar-secondary.negative .state-name{color:var(--bg-button-active-negative);background:var(--on-bg-button-active-negative)}.generic-avatar-secondary.neutral .avatar-outer-circle{border:1.5px solid var(--text-primary)}.generic-avatar-secondary.neutral .avatar-outer-circle .avatar-inner-circle{background:var(--bg-disabled)}.generic-avatar-secondary.neutral .avatar-outer-circle .avatar-inner-circle h1{color:var(--text-primary)}.generic-avatar-secondary.neutral .state-name{color:var(--bg-disabled);background:var(--text-primary)}\n"] }]
|
|
14
17
|
}], propDecorators: { label: [{
|
|
15
18
|
type: Input
|
|
16
|
-
}],
|
|
19
|
+
}], initials: [{
|
|
17
20
|
type: Input
|
|
18
|
-
}],
|
|
21
|
+
}], userRole: [{
|
|
22
|
+
type: Input
|
|
23
|
+
}], userState: [{
|
|
24
|
+
type: Input
|
|
25
|
+
}], type: [{
|
|
19
26
|
type: Input
|
|
20
27
|
}] } });
|
|
21
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
28
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3Jhdml0eS1nZW5lcmljLWF2YXRhci1zZWNvbmRhcnkuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZ3Jhdml0eS1kZXNpZ24tc3lzdGVtL3NyYy9saWIvY29tcG9uZW50cy9ncmF2aXR5LWdlbmVyaWMtYXZhdGFyLXNlY29uZGFyeS9ncmF2aXR5LWdlbmVyaWMtYXZhdGFyLXNlY29uZGFyeS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9ncmF2aXR5LWRlc2lnbi1zeXN0ZW0vc3JjL2xpYi9jb21wb25lbnRzL2dyYXZpdHktZ2VuZXJpYy1hdmF0YXItc2Vjb25kYXJ5L2dyYXZpdHktZ2VuZXJpYy1hdmF0YXItc2Vjb25kYXJ5LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsS0FBSyxFQUFDLE1BQU0sZUFBZSxDQUFDOzs7O0FBTy9DLE1BQU0sT0FBTyxzQ0FBc0M7SUFMbkQ7UUFRVyxhQUFRLEdBQXlDLEVBQUUsQ0FBQTtRQUNuRCxjQUFTLEdBQTJDLEVBQUUsQ0FBQTtRQUN0RCxTQUFJLEdBQXNELFNBQVMsQ0FBQTtLQUM3RTsrR0FOWSxzQ0FBc0M7bUdBQXRDLHNDQUFzQyxzTENQbkQsK2pCQVdBOzs0RkRKYSxzQ0FBc0M7a0JBTGxELFNBQVM7K0JBQ0Usa0NBQWtDOzhCQUtuQyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnQsIElucHV0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZ3Jhdml0eS1nZW5lcmljLWF2YXRhci1zZWNvbmRhcnknLFxuICB0ZW1wbGF0ZVVybDogJy4vZ3Jhdml0eS1nZW5lcmljLWF2YXRhci1zZWNvbmRhcnkuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9ncmF2aXR5LWdlbmVyaWMtYXZhdGFyLXNlY29uZGFyeS5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIEdyYXZpdHlHZW5lcmljQXZhdGFyU2Vjb25kYXJ5Q29tcG9uZW50IHtcbiAgQElucHV0KCkgbGFiZWw6IHN0cmluZztcbiAgQElucHV0KCkgaW5pdGlhbHM6IHN0cmluZztcbiAgQElucHV0KCkgdXNlclJvbGU6ICdhZG1pbicgfCAncmVndWxhcicgfCAnc3VwcG9ydCcgfCAnJyA9ICcnXG4gIEBJbnB1dCgpIHVzZXJTdGF0ZTogJ2FjdGl2ZScgfCAnaW5hY3RpdmUnIHwgJ2Jsb2NrZWQnIHwgJycgPSAnJ1xuICBASW5wdXQoKSB0eXBlOiAnYXR0ZW50aW9uJyB8ICdwb3NpdGl2ZScgfCAnbmVnYXRpdmUnIHwgJ25ldXRyYWwnID0gJ25ldXRyYWwnXG59XG4iLCI8ZGl2IGNsYXNzPVwiZ2VuZXJpYy1hdmF0YXItc2Vjb25kYXJ5IHt7IHR5cGUgfX1cIj5cbiAgICA8ZGl2IGNsYXNzPVwiYXZhdGFyLW91dGVyLWNpcmNsZVwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiYXZhdGFyLWlubmVyLWNpcmNsZVwiPlxuICAgICAgICAgICAgPGgxICpuZ0lmPVwiaW5pdGlhbHNcIiBjbGFzcz1cImhyLXRpdGxlIGxnLXJlZ3VsYXJcIj4ge3sgaW5pdGlhbHMgfX0gPC9oMT5cblxuICAgICAgICAgICAgPGdyYXZpdHktaWNvbiAqbmdJZj1cIiFpbml0aWFscyAmJiB1c2VyU3RhdGUgJiYgdXNlclJvbGVcIiBbaWNvbk5hbWVdPVwidXNlclN0YXRlID09PSAnYmxvY2tlZCcgPyAnaGVyby1hdmF0YXItYmxvY2tlZC1hbGwnIDpcbiAgICAgICAgICAgICdoZXJvLWF2YXRhci0nICsgdXNlclN0YXRlICsgJy0nICsgdXNlclJvbGVcIj4gPC9ncmF2aXR5LWljb24+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJzdGF0ZS1uYW1lXCI+PHNwYW4gY2xhc3M9XCJoci1ib2R5IHNtLXJlZ3VsYXJcIj4ge3sgbGFiZWwgfX0gPC9zcGFuPjwvZGl2PlxuPC9kaXY+XG4iXX0=
|
|
@@ -5973,19 +5973,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
5973
5973
|
|
|
5974
5974
|
class GravityGenericAvatarSecondaryComponent {
|
|
5975
5975
|
constructor() {
|
|
5976
|
-
this.
|
|
5976
|
+
this.userRole = '';
|
|
5977
|
+
this.userState = '';
|
|
5978
|
+
this.type = 'neutral';
|
|
5977
5979
|
}
|
|
5978
5980
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityGenericAvatarSecondaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5979
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityGenericAvatarSecondaryComponent, selector: "gravity-generic-avatar-secondary", inputs: { label: "label",
|
|
5981
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityGenericAvatarSecondaryComponent, selector: "gravity-generic-avatar-secondary", inputs: { label: "label", initials: "initials", userRole: "userRole", userState: "userState", type: "type" }, ngImport: i0, template: "<div class=\"generic-avatar-secondary {{ type }}\">\n <div class=\"avatar-outer-circle\">\n <div class=\"avatar-inner-circle\">\n <h1 *ngIf=\"initials\" class=\"hr-title lg-regular\"> {{ initials }} </h1>\n\n <gravity-icon *ngIf=\"!initials && userState && userRole\" [iconName]=\"userState === 'blocked' ? 'hero-avatar-blocked-all' :\n 'hero-avatar-' + userState + '-' + userRole\"> </gravity-icon>\n </div>\n </div>\n <div class=\"state-name\"><span class=\"hr-body sm-regular\"> {{ label }} </span></div>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.generic-avatar-secondary{width:70px;display:flex;position:relative;align-items:center;flex-direction:column;justify-content:center}.generic-avatar-secondary .avatar-outer-circle{width:70px;height:70px;display:flex;align-items:center;justify-content:center;border-radius:6.25rem}.generic-avatar-secondary .avatar-outer-circle .avatar-inner-circle{width:64px;height:64px;display:flex;position:relative;align-items:center;justify-content:center;border-radius:6.25rem}.generic-avatar-secondary .state-name{height:17px;bottom:-8px;position:absolute;white-space:nowrap;border-radius:.3125rem;padding:var(--gravity-spacing-xxs);margin-top:calc(-1 * var(--gravity-spacing-xs))}.generic-avatar-secondary .state-name span{height:9px;display:block;margin-top:-4px}.generic-avatar-secondary.attention .avatar-outer-circle{border:1.5px solid var(--bg-button-active-primary)}.generic-avatar-secondary.attention .avatar-outer-circle .avatar-inner-circle{background:var(--bg-button-hover-tertiary)}.generic-avatar-secondary.attention .avatar-outer-circle .avatar-inner-circle h1{color:var(--on-bg-button-active-tertiary)}.generic-avatar-secondary.attention .state-name{color:var(--on-bg-button-active-primary);background:var(--bg-button-active-primary)}.generic-avatar-secondary.positive .avatar-outer-circle{border:1.5px solid var(--on-bg-button-active-positive)}.generic-avatar-secondary.positive .avatar-outer-circle .avatar-inner-circle{background:var(--bg-button-active-positive)}.generic-avatar-secondary.positive .avatar-outer-circle .avatar-inner-circle h1{color:var(--on-bg-button-active-positive)}.generic-avatar-secondary.positive .state-name{color:var(--bg-button-active-positive);background:var(--on-bg-button-active-positive)}.generic-avatar-secondary.negative .avatar-outer-circle{border:1.5px solid var(--on-bg-button-active-negative)}.generic-avatar-secondary.negative .avatar-outer-circle .avatar-inner-circle{background:var(--bg-button-active-negative)}.generic-avatar-secondary.negative .avatar-outer-circle .avatar-inner-circle h1{color:var(--on-bg-button-active-negative)}.generic-avatar-secondary.negative .state-name{color:var(--bg-button-active-negative);background:var(--on-bg-button-active-negative)}.generic-avatar-secondary.neutral .avatar-outer-circle{border:1.5px solid var(--text-primary)}.generic-avatar-secondary.neutral .avatar-outer-circle .avatar-inner-circle{background:var(--bg-disabled)}.generic-avatar-secondary.neutral .avatar-outer-circle .avatar-inner-circle h1{color:var(--text-primary)}.generic-avatar-secondary.neutral .state-name{color:var(--bg-disabled);background:var(--text-primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
|
|
5980
5982
|
}
|
|
5981
5983
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityGenericAvatarSecondaryComponent, decorators: [{
|
|
5982
5984
|
type: Component,
|
|
5983
|
-
args: [{ selector: 'gravity-generic-avatar-secondary', template: "<div class=\"generic-avatar-secondary {{
|
|
5985
|
+
args: [{ selector: 'gravity-generic-avatar-secondary', template: "<div class=\"generic-avatar-secondary {{ type }}\">\n <div class=\"avatar-outer-circle\">\n <div class=\"avatar-inner-circle\">\n <h1 *ngIf=\"initials\" class=\"hr-title lg-regular\"> {{ initials }} </h1>\n\n <gravity-icon *ngIf=\"!initials && userState && userRole\" [iconName]=\"userState === 'blocked' ? 'hero-avatar-blocked-all' :\n 'hero-avatar-' + userState + '-' + userRole\"> </gravity-icon>\n </div>\n </div>\n <div class=\"state-name\"><span class=\"hr-body sm-regular\"> {{ label }} </span></div>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.generic-avatar-secondary{width:70px;display:flex;position:relative;align-items:center;flex-direction:column;justify-content:center}.generic-avatar-secondary .avatar-outer-circle{width:70px;height:70px;display:flex;align-items:center;justify-content:center;border-radius:6.25rem}.generic-avatar-secondary .avatar-outer-circle .avatar-inner-circle{width:64px;height:64px;display:flex;position:relative;align-items:center;justify-content:center;border-radius:6.25rem}.generic-avatar-secondary .state-name{height:17px;bottom:-8px;position:absolute;white-space:nowrap;border-radius:.3125rem;padding:var(--gravity-spacing-xxs);margin-top:calc(-1 * var(--gravity-spacing-xs))}.generic-avatar-secondary .state-name span{height:9px;display:block;margin-top:-4px}.generic-avatar-secondary.attention .avatar-outer-circle{border:1.5px solid var(--bg-button-active-primary)}.generic-avatar-secondary.attention .avatar-outer-circle .avatar-inner-circle{background:var(--bg-button-hover-tertiary)}.generic-avatar-secondary.attention .avatar-outer-circle .avatar-inner-circle h1{color:var(--on-bg-button-active-tertiary)}.generic-avatar-secondary.attention .state-name{color:var(--on-bg-button-active-primary);background:var(--bg-button-active-primary)}.generic-avatar-secondary.positive .avatar-outer-circle{border:1.5px solid var(--on-bg-button-active-positive)}.generic-avatar-secondary.positive .avatar-outer-circle .avatar-inner-circle{background:var(--bg-button-active-positive)}.generic-avatar-secondary.positive .avatar-outer-circle .avatar-inner-circle h1{color:var(--on-bg-button-active-positive)}.generic-avatar-secondary.positive .state-name{color:var(--bg-button-active-positive);background:var(--on-bg-button-active-positive)}.generic-avatar-secondary.negative .avatar-outer-circle{border:1.5px solid var(--on-bg-button-active-negative)}.generic-avatar-secondary.negative .avatar-outer-circle .avatar-inner-circle{background:var(--bg-button-active-negative)}.generic-avatar-secondary.negative .avatar-outer-circle .avatar-inner-circle h1{color:var(--on-bg-button-active-negative)}.generic-avatar-secondary.negative .state-name{color:var(--bg-button-active-negative);background:var(--on-bg-button-active-negative)}.generic-avatar-secondary.neutral .avatar-outer-circle{border:1.5px solid var(--text-primary)}.generic-avatar-secondary.neutral .avatar-outer-circle .avatar-inner-circle{background:var(--bg-disabled)}.generic-avatar-secondary.neutral .avatar-outer-circle .avatar-inner-circle h1{color:var(--text-primary)}.generic-avatar-secondary.neutral .state-name{color:var(--bg-disabled);background:var(--text-primary)}\n"] }]
|
|
5984
5986
|
}], propDecorators: { label: [{
|
|
5985
5987
|
type: Input
|
|
5986
|
-
}],
|
|
5988
|
+
}], initials: [{
|
|
5987
5989
|
type: Input
|
|
5988
|
-
}],
|
|
5990
|
+
}], userRole: [{
|
|
5991
|
+
type: Input
|
|
5992
|
+
}], userState: [{
|
|
5993
|
+
type: Input
|
|
5994
|
+
}], type: [{
|
|
5989
5995
|
type: Input
|
|
5990
5996
|
}] } });
|
|
5991
5997
|
|