@ifsworld/granite-components 13.0.0 → 13.0.1
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.
|
@@ -17,13 +17,13 @@ export class GraniteAvatarComponent extends ContactsTriggerDataComponent {
|
|
|
17
17
|
}, {});
|
|
18
18
|
}
|
|
19
19
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteAvatarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
20
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: GraniteAvatarComponent, selector: "granite-avatar", inputs: { name: "name", surname: "surname", avatar: "avatar", status: "status" }, host: { classAttribute: "granite-avatar" }, queries: [{ propertyName: "_customStatusesQueryList", predicate: GraniteCustomAvatarStatusDirective }], exportAs: ["graniteAvatar"], usesInheritance: true, ngImport: i0, template: "<img\n data-fnd=\"profile-avatar\"\n *ngIf=\"avatar; else noProfileAvatar\"\n [src]=\"avatar\"\n alt=\"avatar\"\n class=\"profile-avatar profile-size\"\n/>\n\n<ng-template #noProfileAvatar>\n <granite-empty-avatar\n class=\"profile-size\"\n [name]=\"name\"\n [surname]=\"surname\"\n ></granite-empty-avatar>\n</ng-template>\n\n@if (status && _customStatusDirectives[status]) {\n <ng-container *ngTemplateOutlet=\"customStatus\"></ng-container>\n} @else if (status) {\n <ng-container *ngTemplateOutlet=\"defaultStatus\"></ng-container>\n}\n\n<ng-template #defaultStatus>\n <granite-avatar-default-status\n class=\"profile-default-status\"\n [attr.data-fnd]=\"status + '-status'\"\n [status]=\"status\"\n ></granite-avatar-default-status>\n</ng-template>\n\n<ng-template #customStatus>\n <div\n [attr.data-fnd]=\"'profile-status-custom'\"\n [class]=\"'profile-status-' + status\"\n class=\"profile-custom-status\"\n >\n <ng-container\n *ngTemplateOutlet=\"_customStatusDirectives[status]\"\n ></ng-container>\n </div>\n</ng-template>\n", styles: [":host .profile-default-status,:host .profile-custom-status{position:absolute;inset-inline-end:0;bottom:0}:host{display:block;position:relative;width:1.5rem;height:1.5rem;color:var(--granite-color-signal-info);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular)}:host .profile{display:flex;align-items:center;margin-bottom:var(--granite-spacing-8);gap:var(--granite-spacing-4)}:host .profile-avatar{width:inherit;height:inherit;border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.GraniteAvatarDefaultStatusComponent, selector: "granite-avatar-default-status", inputs: ["status"] }, { kind: "component", type: i3.GraniteEmptyAvatarComponent, selector: "granite-empty-avatar", inputs: ["name", "surname"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
20
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: GraniteAvatarComponent, selector: "granite-avatar", inputs: { name: "name", surname: "surname", avatar: "avatar", status: "status" }, host: { classAttribute: "granite-avatar" }, queries: [{ propertyName: "_customStatusesQueryList", predicate: GraniteCustomAvatarStatusDirective }], exportAs: ["graniteAvatar"], usesInheritance: true, ngImport: i0, template: "<img\n data-fnd=\"profile-avatar\"\n *ngIf=\"avatar; else noProfileAvatar\"\n [src]=\"avatar\"\n alt=\"avatar\"\n class=\"profile-avatar profile-size\"\n/>\n\n<ng-template #noProfileAvatar>\n <granite-empty-avatar\n class=\"profile-size\"\n [name]=\"name\"\n [surname]=\"surname\"\n ></granite-empty-avatar>\n</ng-template>\n\n@if (status && _customStatusDirectives[status]) {\n <ng-container *ngTemplateOutlet=\"customStatus\"></ng-container>\n} @else if (status) {\n <ng-container *ngTemplateOutlet=\"defaultStatus\"></ng-container>\n}\n\n<ng-template #defaultStatus>\n <granite-avatar-default-status\n class=\"profile-default-status\"\n [attr.data-fnd]=\"status + '-status'\"\n [status]=\"status\"\n ></granite-avatar-default-status>\n</ng-template>\n\n<ng-template #customStatus>\n <div\n [attr.data-fnd]=\"'profile-status-custom'\"\n [class]=\"'profile-status-' + status\"\n class=\"profile-custom-status\"\n >\n <ng-container\n *ngTemplateOutlet=\"_customStatusDirectives[status]\"\n ></ng-container>\n </div>\n</ng-template>\n", styles: [":host .profile-default-status,:host .profile-custom-status{position:absolute;inset-inline-end:0;bottom:0}:host{display:block;position:relative;width:1.5rem;height:1.5rem;color:var(--granite-color-signal-info);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);object-fit:contain}:host .profile{display:flex;align-items:center;margin-bottom:var(--granite-spacing-8);gap:var(--granite-spacing-4)}:host .profile-avatar{width:inherit;height:inherit;border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.GraniteAvatarDefaultStatusComponent, selector: "granite-avatar-default-status", inputs: ["status"] }, { kind: "component", type: i3.GraniteEmptyAvatarComponent, selector: "granite-empty-avatar", inputs: ["name", "surname"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
21
21
|
}
|
|
22
22
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteAvatarComponent, decorators: [{
|
|
23
23
|
type: Component,
|
|
24
24
|
args: [{ selector: 'granite-avatar', exportAs: 'graniteAvatar', host: {
|
|
25
25
|
class: 'granite-avatar',
|
|
26
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<img\n data-fnd=\"profile-avatar\"\n *ngIf=\"avatar; else noProfileAvatar\"\n [src]=\"avatar\"\n alt=\"avatar\"\n class=\"profile-avatar profile-size\"\n/>\n\n<ng-template #noProfileAvatar>\n <granite-empty-avatar\n class=\"profile-size\"\n [name]=\"name\"\n [surname]=\"surname\"\n ></granite-empty-avatar>\n</ng-template>\n\n@if (status && _customStatusDirectives[status]) {\n <ng-container *ngTemplateOutlet=\"customStatus\"></ng-container>\n} @else if (status) {\n <ng-container *ngTemplateOutlet=\"defaultStatus\"></ng-container>\n}\n\n<ng-template #defaultStatus>\n <granite-avatar-default-status\n class=\"profile-default-status\"\n [attr.data-fnd]=\"status + '-status'\"\n [status]=\"status\"\n ></granite-avatar-default-status>\n</ng-template>\n\n<ng-template #customStatus>\n <div\n [attr.data-fnd]=\"'profile-status-custom'\"\n [class]=\"'profile-status-' + status\"\n class=\"profile-custom-status\"\n >\n <ng-container\n *ngTemplateOutlet=\"_customStatusDirectives[status]\"\n ></ng-container>\n </div>\n</ng-template>\n", styles: [":host .profile-default-status,:host .profile-custom-status{position:absolute;inset-inline-end:0;bottom:0}:host{display:block;position:relative;width:1.5rem;height:1.5rem;color:var(--granite-color-signal-info);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular)}:host .profile{display:flex;align-items:center;margin-bottom:var(--granite-spacing-8);gap:var(--granite-spacing-4)}:host .profile-avatar{width:inherit;height:inherit;border-radius:50%}\n"] }]
|
|
26
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<img\n data-fnd=\"profile-avatar\"\n *ngIf=\"avatar; else noProfileAvatar\"\n [src]=\"avatar\"\n alt=\"avatar\"\n class=\"profile-avatar profile-size\"\n/>\n\n<ng-template #noProfileAvatar>\n <granite-empty-avatar\n class=\"profile-size\"\n [name]=\"name\"\n [surname]=\"surname\"\n ></granite-empty-avatar>\n</ng-template>\n\n@if (status && _customStatusDirectives[status]) {\n <ng-container *ngTemplateOutlet=\"customStatus\"></ng-container>\n} @else if (status) {\n <ng-container *ngTemplateOutlet=\"defaultStatus\"></ng-container>\n}\n\n<ng-template #defaultStatus>\n <granite-avatar-default-status\n class=\"profile-default-status\"\n [attr.data-fnd]=\"status + '-status'\"\n [status]=\"status\"\n ></granite-avatar-default-status>\n</ng-template>\n\n<ng-template #customStatus>\n <div\n [attr.data-fnd]=\"'profile-status-custom'\"\n [class]=\"'profile-status-' + status\"\n class=\"profile-custom-status\"\n >\n <ng-container\n *ngTemplateOutlet=\"_customStatusDirectives[status]\"\n ></ng-container>\n </div>\n</ng-template>\n", styles: [":host .profile-default-status,:host .profile-custom-status{position:absolute;inset-inline-end:0;bottom:0}:host{display:block;position:relative;width:1.5rem;height:1.5rem;color:var(--granite-color-signal-info);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);object-fit:contain}:host .profile{display:flex;align-items:center;margin-bottom:var(--granite-spacing-8);gap:var(--granite-spacing-4)}:host .profile-avatar{width:inherit;height:inherit;border-radius:50%}\n"] }]
|
|
27
27
|
}], propDecorators: { name: [{
|
|
28
28
|
type: Input
|
|
29
29
|
}], surname: [{
|
|
@@ -12,13 +12,13 @@ export class GraniteContactsProfileComponent {
|
|
|
12
12
|
this._initials = name[0].toUpperCase() + surname[0].toUpperCase();
|
|
13
13
|
}
|
|
14
14
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteContactsProfileComponent, selector: "granite-contacts-profile", inputs: { profile: "profile", profileClass: "profileClass" }, host: { classAttribute: "granite-contacts-profile" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"profileClass\" data-fnd=\"profile\" class=\"profile\">\n <granite-avatar\n data-fnd=\"profile-avatar\"\n class=\"profile-avatar\"\n [name]=\"profile.name\"\n [surname]=\"profile.surname\"\n [avatar]=\"profile.avatar\"\n ></granite-avatar>\n\n <ng-template #noProfileAvatar>\n <div class=\"no-profile-avatar\">\n <span\n data-fnd=\"no-profile-avatar-initials\"\n class=\"no-profile-avatar-initials\"\n >{{ _initials }}</span\n >\n </div>\n </ng-template>\n\n <div class=\"profile-info\">\n <p data-fnd=\"profile-info-names\" class=\"profile-info-names\">\n {{ profile?.name }} {{ profile?.surname }}\n </p>\n <p data-fnd=\"profile-info-job-title\" class=\"profile-info-job-title\">\n {{ profile?.jobTitle }}\n </p>\n </div>\n</div>\n", styles: [".profile{display:flex;align-items:center;margin-bottom:var(--granite-spacing-8);gap:var(--granite-spacing-4)}.profile-avatar{width:3rem;height:3rem;border-radius:50
|
|
15
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteContactsProfileComponent, selector: "granite-contacts-profile", inputs: { profile: "profile", profileClass: "profileClass" }, host: { classAttribute: "granite-contacts-profile" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"profileClass\" data-fnd=\"profile\" class=\"profile\">\n <granite-avatar\n data-fnd=\"profile-avatar\"\n class=\"profile-avatar\"\n [name]=\"profile.name\"\n [surname]=\"profile.surname\"\n [avatar]=\"profile.avatar\"\n ></granite-avatar>\n\n <ng-template #noProfileAvatar>\n <div class=\"no-profile-avatar\">\n <span\n data-fnd=\"no-profile-avatar-initials\"\n class=\"no-profile-avatar-initials\"\n >{{ _initials }}</span\n >\n </div>\n </ng-template>\n\n <div class=\"profile-info\">\n <p data-fnd=\"profile-info-names\" class=\"profile-info-names\">\n {{ profile?.name }} {{ profile?.surname }}\n </p>\n <p data-fnd=\"profile-info-job-title\" class=\"profile-info-job-title\">\n {{ profile?.jobTitle }}\n </p>\n </div>\n</div>\n", styles: [".profile{display:flex;align-items:center;margin-bottom:var(--granite-spacing-8);gap:var(--granite-spacing-4)}.profile-avatar{width:3rem;height:3rem;border-radius:50%}.profile-info{display:flex;flex-direction:column;gap:var(--granite-spacing-8)}.profile-info-names{color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);margin:0}.profile-info-job-title{color:var(--granite-color-text-hint);font-size:var(--granite-font-size-body-small);margin:0}.no-profile-avatar{display:flex;width:3rem;height:3rem;border-radius:360px;background:var(--granite-color-background-info);justify-content:center;align-items:center}.no-profile-avatar-initials{font-size:var(--granite-font-size-micro);color:var(--granite-color-signal-info);font-weight:var(--granite-font-weight-regular)}\n"], dependencies: [{ kind: "component", type: i1.GraniteAvatarComponent, selector: "granite-avatar", inputs: ["name", "surname", "avatar", "status"], exportAs: ["graniteAvatar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
16
16
|
}
|
|
17
17
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsProfileComponent, decorators: [{
|
|
18
18
|
type: Component,
|
|
19
19
|
args: [{ selector: 'granite-contacts-profile', host: {
|
|
20
20
|
class: 'granite-contacts-profile',
|
|
21
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"profileClass\" data-fnd=\"profile\" class=\"profile\">\n <granite-avatar\n data-fnd=\"profile-avatar\"\n class=\"profile-avatar\"\n [name]=\"profile.name\"\n [surname]=\"profile.surname\"\n [avatar]=\"profile.avatar\"\n ></granite-avatar>\n\n <ng-template #noProfileAvatar>\n <div class=\"no-profile-avatar\">\n <span\n data-fnd=\"no-profile-avatar-initials\"\n class=\"no-profile-avatar-initials\"\n >{{ _initials }}</span\n >\n </div>\n </ng-template>\n\n <div class=\"profile-info\">\n <p data-fnd=\"profile-info-names\" class=\"profile-info-names\">\n {{ profile?.name }} {{ profile?.surname }}\n </p>\n <p data-fnd=\"profile-info-job-title\" class=\"profile-info-job-title\">\n {{ profile?.jobTitle }}\n </p>\n </div>\n</div>\n", styles: [".profile{display:flex;align-items:center;margin-bottom:var(--granite-spacing-8);gap:var(--granite-spacing-4)}.profile-avatar{width:3rem;height:3rem;border-radius:50
|
|
21
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"profileClass\" data-fnd=\"profile\" class=\"profile\">\n <granite-avatar\n data-fnd=\"profile-avatar\"\n class=\"profile-avatar\"\n [name]=\"profile.name\"\n [surname]=\"profile.surname\"\n [avatar]=\"profile.avatar\"\n ></granite-avatar>\n\n <ng-template #noProfileAvatar>\n <div class=\"no-profile-avatar\">\n <span\n data-fnd=\"no-profile-avatar-initials\"\n class=\"no-profile-avatar-initials\"\n >{{ _initials }}</span\n >\n </div>\n </ng-template>\n\n <div class=\"profile-info\">\n <p data-fnd=\"profile-info-names\" class=\"profile-info-names\">\n {{ profile?.name }} {{ profile?.surname }}\n </p>\n <p data-fnd=\"profile-info-job-title\" class=\"profile-info-job-title\">\n {{ profile?.jobTitle }}\n </p>\n </div>\n</div>\n", styles: [".profile{display:flex;align-items:center;margin-bottom:var(--granite-spacing-8);gap:var(--granite-spacing-4)}.profile-avatar{width:3rem;height:3rem;border-radius:50%}.profile-info{display:flex;flex-direction:column;gap:var(--granite-spacing-8)}.profile-info-names{color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);margin:0}.profile-info-job-title{color:var(--granite-color-text-hint);font-size:var(--granite-font-size-body-small);margin:0}.no-profile-avatar{display:flex;width:3rem;height:3rem;border-radius:360px;background:var(--granite-color-background-info);justify-content:center;align-items:center}.no-profile-avatar-initials{font-size:var(--granite-font-size-micro);color:var(--granite-color-signal-info);font-weight:var(--granite-font-weight-regular)}\n"] }]
|
|
22
22
|
}], propDecorators: { profile: [{
|
|
23
23
|
type: Input
|
|
24
24
|
}], profileClass: [{
|
|
@@ -4095,13 +4095,13 @@ class GraniteAvatarComponent extends ContactsTriggerDataComponent {
|
|
|
4095
4095
|
}, {});
|
|
4096
4096
|
}
|
|
4097
4097
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteAvatarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
4098
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: GraniteAvatarComponent, selector: "granite-avatar", inputs: { name: "name", surname: "surname", avatar: "avatar", status: "status" }, host: { classAttribute: "granite-avatar" }, queries: [{ propertyName: "_customStatusesQueryList", predicate: GraniteCustomAvatarStatusDirective }], exportAs: ["graniteAvatar"], usesInheritance: true, ngImport: i0, template: "<img\n data-fnd=\"profile-avatar\"\n *ngIf=\"avatar; else noProfileAvatar\"\n [src]=\"avatar\"\n alt=\"avatar\"\n class=\"profile-avatar profile-size\"\n/>\n\n<ng-template #noProfileAvatar>\n <granite-empty-avatar\n class=\"profile-size\"\n [name]=\"name\"\n [surname]=\"surname\"\n ></granite-empty-avatar>\n</ng-template>\n\n@if (status && _customStatusDirectives[status]) {\n <ng-container *ngTemplateOutlet=\"customStatus\"></ng-container>\n} @else if (status) {\n <ng-container *ngTemplateOutlet=\"defaultStatus\"></ng-container>\n}\n\n<ng-template #defaultStatus>\n <granite-avatar-default-status\n class=\"profile-default-status\"\n [attr.data-fnd]=\"status + '-status'\"\n [status]=\"status\"\n ></granite-avatar-default-status>\n</ng-template>\n\n<ng-template #customStatus>\n <div\n [attr.data-fnd]=\"'profile-status-custom'\"\n [class]=\"'profile-status-' + status\"\n class=\"profile-custom-status\"\n >\n <ng-container\n *ngTemplateOutlet=\"_customStatusDirectives[status]\"\n ></ng-container>\n </div>\n</ng-template>\n", styles: [":host .profile-default-status,:host .profile-custom-status{position:absolute;inset-inline-end:0;bottom:0}:host{display:block;position:relative;width:1.5rem;height:1.5rem;color:var(--granite-color-signal-info);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular)}:host .profile{display:flex;align-items:center;margin-bottom:var(--granite-spacing-8);gap:var(--granite-spacing-4)}:host .profile-avatar{width:inherit;height:inherit;border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GraniteAvatarDefaultStatusComponent, selector: "granite-avatar-default-status", inputs: ["status"] }, { kind: "component", type: GraniteEmptyAvatarComponent, selector: "granite-empty-avatar", inputs: ["name", "surname"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4098
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: GraniteAvatarComponent, selector: "granite-avatar", inputs: { name: "name", surname: "surname", avatar: "avatar", status: "status" }, host: { classAttribute: "granite-avatar" }, queries: [{ propertyName: "_customStatusesQueryList", predicate: GraniteCustomAvatarStatusDirective }], exportAs: ["graniteAvatar"], usesInheritance: true, ngImport: i0, template: "<img\n data-fnd=\"profile-avatar\"\n *ngIf=\"avatar; else noProfileAvatar\"\n [src]=\"avatar\"\n alt=\"avatar\"\n class=\"profile-avatar profile-size\"\n/>\n\n<ng-template #noProfileAvatar>\n <granite-empty-avatar\n class=\"profile-size\"\n [name]=\"name\"\n [surname]=\"surname\"\n ></granite-empty-avatar>\n</ng-template>\n\n@if (status && _customStatusDirectives[status]) {\n <ng-container *ngTemplateOutlet=\"customStatus\"></ng-container>\n} @else if (status) {\n <ng-container *ngTemplateOutlet=\"defaultStatus\"></ng-container>\n}\n\n<ng-template #defaultStatus>\n <granite-avatar-default-status\n class=\"profile-default-status\"\n [attr.data-fnd]=\"status + '-status'\"\n [status]=\"status\"\n ></granite-avatar-default-status>\n</ng-template>\n\n<ng-template #customStatus>\n <div\n [attr.data-fnd]=\"'profile-status-custom'\"\n [class]=\"'profile-status-' + status\"\n class=\"profile-custom-status\"\n >\n <ng-container\n *ngTemplateOutlet=\"_customStatusDirectives[status]\"\n ></ng-container>\n </div>\n</ng-template>\n", styles: [":host .profile-default-status,:host .profile-custom-status{position:absolute;inset-inline-end:0;bottom:0}:host{display:block;position:relative;width:1.5rem;height:1.5rem;color:var(--granite-color-signal-info);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);object-fit:contain}:host .profile{display:flex;align-items:center;margin-bottom:var(--granite-spacing-8);gap:var(--granite-spacing-4)}:host .profile-avatar{width:inherit;height:inherit;border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GraniteAvatarDefaultStatusComponent, selector: "granite-avatar-default-status", inputs: ["status"] }, { kind: "component", type: GraniteEmptyAvatarComponent, selector: "granite-empty-avatar", inputs: ["name", "surname"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4099
4099
|
}
|
|
4100
4100
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteAvatarComponent, decorators: [{
|
|
4101
4101
|
type: Component,
|
|
4102
4102
|
args: [{ selector: 'granite-avatar', exportAs: 'graniteAvatar', host: {
|
|
4103
4103
|
class: 'granite-avatar',
|
|
4104
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<img\n data-fnd=\"profile-avatar\"\n *ngIf=\"avatar; else noProfileAvatar\"\n [src]=\"avatar\"\n alt=\"avatar\"\n class=\"profile-avatar profile-size\"\n/>\n\n<ng-template #noProfileAvatar>\n <granite-empty-avatar\n class=\"profile-size\"\n [name]=\"name\"\n [surname]=\"surname\"\n ></granite-empty-avatar>\n</ng-template>\n\n@if (status && _customStatusDirectives[status]) {\n <ng-container *ngTemplateOutlet=\"customStatus\"></ng-container>\n} @else if (status) {\n <ng-container *ngTemplateOutlet=\"defaultStatus\"></ng-container>\n}\n\n<ng-template #defaultStatus>\n <granite-avatar-default-status\n class=\"profile-default-status\"\n [attr.data-fnd]=\"status + '-status'\"\n [status]=\"status\"\n ></granite-avatar-default-status>\n</ng-template>\n\n<ng-template #customStatus>\n <div\n [attr.data-fnd]=\"'profile-status-custom'\"\n [class]=\"'profile-status-' + status\"\n class=\"profile-custom-status\"\n >\n <ng-container\n *ngTemplateOutlet=\"_customStatusDirectives[status]\"\n ></ng-container>\n </div>\n</ng-template>\n", styles: [":host .profile-default-status,:host .profile-custom-status{position:absolute;inset-inline-end:0;bottom:0}:host{display:block;position:relative;width:1.5rem;height:1.5rem;color:var(--granite-color-signal-info);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular)}:host .profile{display:flex;align-items:center;margin-bottom:var(--granite-spacing-8);gap:var(--granite-spacing-4)}:host .profile-avatar{width:inherit;height:inherit;border-radius:50%}\n"] }]
|
|
4104
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<img\n data-fnd=\"profile-avatar\"\n *ngIf=\"avatar; else noProfileAvatar\"\n [src]=\"avatar\"\n alt=\"avatar\"\n class=\"profile-avatar profile-size\"\n/>\n\n<ng-template #noProfileAvatar>\n <granite-empty-avatar\n class=\"profile-size\"\n [name]=\"name\"\n [surname]=\"surname\"\n ></granite-empty-avatar>\n</ng-template>\n\n@if (status && _customStatusDirectives[status]) {\n <ng-container *ngTemplateOutlet=\"customStatus\"></ng-container>\n} @else if (status) {\n <ng-container *ngTemplateOutlet=\"defaultStatus\"></ng-container>\n}\n\n<ng-template #defaultStatus>\n <granite-avatar-default-status\n class=\"profile-default-status\"\n [attr.data-fnd]=\"status + '-status'\"\n [status]=\"status\"\n ></granite-avatar-default-status>\n</ng-template>\n\n<ng-template #customStatus>\n <div\n [attr.data-fnd]=\"'profile-status-custom'\"\n [class]=\"'profile-status-' + status\"\n class=\"profile-custom-status\"\n >\n <ng-container\n *ngTemplateOutlet=\"_customStatusDirectives[status]\"\n ></ng-container>\n </div>\n</ng-template>\n", styles: [":host .profile-default-status,:host .profile-custom-status{position:absolute;inset-inline-end:0;bottom:0}:host{display:block;position:relative;width:1.5rem;height:1.5rem;color:var(--granite-color-signal-info);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);object-fit:contain}:host .profile{display:flex;align-items:center;margin-bottom:var(--granite-spacing-8);gap:var(--granite-spacing-4)}:host .profile-avatar{width:inherit;height:inherit;border-radius:50%}\n"] }]
|
|
4105
4105
|
}], propDecorators: { name: [{
|
|
4106
4106
|
type: Input
|
|
4107
4107
|
}], surname: [{
|
|
@@ -4126,13 +4126,13 @@ class GraniteContactsProfileComponent {
|
|
|
4126
4126
|
this._initials = name[0].toUpperCase() + surname[0].toUpperCase();
|
|
4127
4127
|
}
|
|
4128
4128
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4129
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteContactsProfileComponent, selector: "granite-contacts-profile", inputs: { profile: "profile", profileClass: "profileClass" }, host: { classAttribute: "granite-contacts-profile" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"profileClass\" data-fnd=\"profile\" class=\"profile\">\n <granite-avatar\n data-fnd=\"profile-avatar\"\n class=\"profile-avatar\"\n [name]=\"profile.name\"\n [surname]=\"profile.surname\"\n [avatar]=\"profile.avatar\"\n ></granite-avatar>\n\n <ng-template #noProfileAvatar>\n <div class=\"no-profile-avatar\">\n <span\n data-fnd=\"no-profile-avatar-initials\"\n class=\"no-profile-avatar-initials\"\n >{{ _initials }}</span\n >\n </div>\n </ng-template>\n\n <div class=\"profile-info\">\n <p data-fnd=\"profile-info-names\" class=\"profile-info-names\">\n {{ profile?.name }} {{ profile?.surname }}\n </p>\n <p data-fnd=\"profile-info-job-title\" class=\"profile-info-job-title\">\n {{ profile?.jobTitle }}\n </p>\n </div>\n</div>\n", styles: [".profile{display:flex;align-items:center;margin-bottom:var(--granite-spacing-8);gap:var(--granite-spacing-4)}.profile-avatar{width:3rem;height:3rem;border-radius:50
|
|
4129
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteContactsProfileComponent, selector: "granite-contacts-profile", inputs: { profile: "profile", profileClass: "profileClass" }, host: { classAttribute: "granite-contacts-profile" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"profileClass\" data-fnd=\"profile\" class=\"profile\">\n <granite-avatar\n data-fnd=\"profile-avatar\"\n class=\"profile-avatar\"\n [name]=\"profile.name\"\n [surname]=\"profile.surname\"\n [avatar]=\"profile.avatar\"\n ></granite-avatar>\n\n <ng-template #noProfileAvatar>\n <div class=\"no-profile-avatar\">\n <span\n data-fnd=\"no-profile-avatar-initials\"\n class=\"no-profile-avatar-initials\"\n >{{ _initials }}</span\n >\n </div>\n </ng-template>\n\n <div class=\"profile-info\">\n <p data-fnd=\"profile-info-names\" class=\"profile-info-names\">\n {{ profile?.name }} {{ profile?.surname }}\n </p>\n <p data-fnd=\"profile-info-job-title\" class=\"profile-info-job-title\">\n {{ profile?.jobTitle }}\n </p>\n </div>\n</div>\n", styles: [".profile{display:flex;align-items:center;margin-bottom:var(--granite-spacing-8);gap:var(--granite-spacing-4)}.profile-avatar{width:3rem;height:3rem;border-radius:50%}.profile-info{display:flex;flex-direction:column;gap:var(--granite-spacing-8)}.profile-info-names{color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);margin:0}.profile-info-job-title{color:var(--granite-color-text-hint);font-size:var(--granite-font-size-body-small);margin:0}.no-profile-avatar{display:flex;width:3rem;height:3rem;border-radius:360px;background:var(--granite-color-background-info);justify-content:center;align-items:center}.no-profile-avatar-initials{font-size:var(--granite-font-size-micro);color:var(--granite-color-signal-info);font-weight:var(--granite-font-weight-regular)}\n"], dependencies: [{ kind: "component", type: GraniteAvatarComponent, selector: "granite-avatar", inputs: ["name", "surname", "avatar", "status"], exportAs: ["graniteAvatar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4130
4130
|
}
|
|
4131
4131
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsProfileComponent, decorators: [{
|
|
4132
4132
|
type: Component,
|
|
4133
4133
|
args: [{ selector: 'granite-contacts-profile', host: {
|
|
4134
4134
|
class: 'granite-contacts-profile',
|
|
4135
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"profileClass\" data-fnd=\"profile\" class=\"profile\">\n <granite-avatar\n data-fnd=\"profile-avatar\"\n class=\"profile-avatar\"\n [name]=\"profile.name\"\n [surname]=\"profile.surname\"\n [avatar]=\"profile.avatar\"\n ></granite-avatar>\n\n <ng-template #noProfileAvatar>\n <div class=\"no-profile-avatar\">\n <span\n data-fnd=\"no-profile-avatar-initials\"\n class=\"no-profile-avatar-initials\"\n >{{ _initials }}</span\n >\n </div>\n </ng-template>\n\n <div class=\"profile-info\">\n <p data-fnd=\"profile-info-names\" class=\"profile-info-names\">\n {{ profile?.name }} {{ profile?.surname }}\n </p>\n <p data-fnd=\"profile-info-job-title\" class=\"profile-info-job-title\">\n {{ profile?.jobTitle }}\n </p>\n </div>\n</div>\n", styles: [".profile{display:flex;align-items:center;margin-bottom:var(--granite-spacing-8);gap:var(--granite-spacing-4)}.profile-avatar{width:3rem;height:3rem;border-radius:50
|
|
4135
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"profileClass\" data-fnd=\"profile\" class=\"profile\">\n <granite-avatar\n data-fnd=\"profile-avatar\"\n class=\"profile-avatar\"\n [name]=\"profile.name\"\n [surname]=\"profile.surname\"\n [avatar]=\"profile.avatar\"\n ></granite-avatar>\n\n <ng-template #noProfileAvatar>\n <div class=\"no-profile-avatar\">\n <span\n data-fnd=\"no-profile-avatar-initials\"\n class=\"no-profile-avatar-initials\"\n >{{ _initials }}</span\n >\n </div>\n </ng-template>\n\n <div class=\"profile-info\">\n <p data-fnd=\"profile-info-names\" class=\"profile-info-names\">\n {{ profile?.name }} {{ profile?.surname }}\n </p>\n <p data-fnd=\"profile-info-job-title\" class=\"profile-info-job-title\">\n {{ profile?.jobTitle }}\n </p>\n </div>\n</div>\n", styles: [".profile{display:flex;align-items:center;margin-bottom:var(--granite-spacing-8);gap:var(--granite-spacing-4)}.profile-avatar{width:3rem;height:3rem;border-radius:50%}.profile-info{display:flex;flex-direction:column;gap:var(--granite-spacing-8)}.profile-info-names{color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);margin:0}.profile-info-job-title{color:var(--granite-color-text-hint);font-size:var(--granite-font-size-body-small);margin:0}.no-profile-avatar{display:flex;width:3rem;height:3rem;border-radius:360px;background:var(--granite-color-background-info);justify-content:center;align-items:center}.no-profile-avatar-initials{font-size:var(--granite-font-size-micro);color:var(--granite-color-signal-info);font-weight:var(--granite-font-weight-regular)}\n"] }]
|
|
4136
4136
|
}], propDecorators: { profile: [{
|
|
4137
4137
|
type: Input
|
|
4138
4138
|
}], profileClass: [{
|