@ifsworld/granite-components 12.3.3 → 13.0.0
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/index.mjs +7 -1
- package/esm2022/lib/avatar/avatar-default-status/avatar-default-status.component.mjs +36 -0
- package/esm2022/lib/avatar/avatar.component.mjs +39 -0
- package/esm2022/lib/avatar/avatar.component.public-types.mjs +7 -0
- package/esm2022/lib/avatar/avatar.module.mjs +37 -0
- package/esm2022/lib/avatar/custom-avatar-status.directive.mjs +18 -0
- package/esm2022/lib/avatar/empty-avatar/empty-avatar.component.mjs +47 -0
- package/esm2022/lib/contacts/contacts-profile/contacts-profile.component.mjs +4 -4
- package/esm2022/lib/contacts/contacts.module.mjs +5 -4
- package/esm2022/lib/progress-bar/progress-bar.component.mjs +19 -7
- package/fesm2022/ifsworld-granite-components.mjs +187 -12
- package/fesm2022/ifsworld-granite-components.mjs.map +1 -1
- package/index.d.ts +6 -0
- package/lib/avatar/avatar-default-status/avatar-default-status.component.d.ts +15 -0
- package/lib/avatar/avatar.component.d.ts +16 -0
- package/lib/avatar/avatar.component.public-types.d.ts +7 -0
- package/lib/avatar/avatar.module.d.ts +11 -0
- package/lib/avatar/custom-avatar-status.directive.d.ts +9 -0
- package/lib/avatar/empty-avatar/empty-avatar.component.d.ts +11 -0
- package/lib/contacts/contacts.module.d.ts +3 -2
- package/lib/progress-bar/progress-bar.component.d.ts +3 -1
- package/package.json +1 -1
|
@@ -3982,6 +3982,139 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
3982
3982
|
}]
|
|
3983
3983
|
}], ctorParameters: () => [{ type: i0.TemplateRef }] });
|
|
3984
3984
|
|
|
3985
|
+
class GraniteCustomAvatarStatusDirective {
|
|
3986
|
+
constructor(templateRef) {
|
|
3987
|
+
this.templateRef = templateRef;
|
|
3988
|
+
}
|
|
3989
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteCustomAvatarStatusDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3990
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: GraniteCustomAvatarStatusDirective, selector: "[graniteCustomAvatarStatus]", inputs: { graniteCustomAvatarStatus: "graniteCustomAvatarStatus" }, ngImport: i0 }); }
|
|
3991
|
+
}
|
|
3992
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteCustomAvatarStatusDirective, decorators: [{
|
|
3993
|
+
type: Directive,
|
|
3994
|
+
args: [{
|
|
3995
|
+
selector: '[graniteCustomAvatarStatus]',
|
|
3996
|
+
}]
|
|
3997
|
+
}], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { graniteCustomAvatarStatus: [{
|
|
3998
|
+
type: Input
|
|
3999
|
+
}] } });
|
|
4000
|
+
|
|
4001
|
+
const AVATAR_DEFAULT_STATUS = {
|
|
4002
|
+
AVAILABLE: 'Available',
|
|
4003
|
+
DO_NOT_DISTURB: 'DoNotDisturb',
|
|
4004
|
+
DISABLED: 'Disabled',
|
|
4005
|
+
AWAY: 'Away',
|
|
4006
|
+
};
|
|
4007
|
+
|
|
4008
|
+
class GraniteAvatarDefaultStatusComponent {
|
|
4009
|
+
constructor() {
|
|
4010
|
+
this.AVATAR_STATUS = AVATAR_DEFAULT_STATUS;
|
|
4011
|
+
}
|
|
4012
|
+
get statusClass() {
|
|
4013
|
+
switch (this.status) {
|
|
4014
|
+
case this.AVATAR_STATUS.AVAILABLE:
|
|
4015
|
+
return 'available';
|
|
4016
|
+
case this.AVATAR_STATUS.DO_NOT_DISTURB:
|
|
4017
|
+
return 'do-not-disturb';
|
|
4018
|
+
case this.AVATAR_STATUS.DISABLED: {
|
|
4019
|
+
return 'disabled';
|
|
4020
|
+
}
|
|
4021
|
+
case this.AVATAR_STATUS.AWAY: {
|
|
4022
|
+
return 'away';
|
|
4023
|
+
}
|
|
4024
|
+
}
|
|
4025
|
+
}
|
|
4026
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteAvatarDefaultStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4027
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteAvatarDefaultStatusComponent, selector: "granite-avatar-default-status", inputs: { status: "status" }, host: { properties: { "class": "this.statusClass" }, classAttribute: "granite-avatar-default-status" }, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;width:.5rem;height:.5rem;outline:.125rem solid var(--granite-color-background);border-radius:100%}:host.available{background:var(--granite-color-signal-ok)}:host.do-not-disturb{background:var(--granite-color-signal-failure)}:host.disabled{background:var(--granite-color-signal-neutral)}:host.away{background:var(--granite-color-signal-warning)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4028
|
+
}
|
|
4029
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteAvatarDefaultStatusComponent, decorators: [{
|
|
4030
|
+
type: Component,
|
|
4031
|
+
args: [{ selector: 'granite-avatar-default-status', host: {
|
|
4032
|
+
class: 'granite-avatar-default-status',
|
|
4033
|
+
}, template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:.5rem;height:.5rem;outline:.125rem solid var(--granite-color-background);border-radius:100%}:host.available{background:var(--granite-color-signal-ok)}:host.do-not-disturb{background:var(--granite-color-signal-failure)}:host.disabled{background:var(--granite-color-signal-neutral)}:host.away{background:var(--granite-color-signal-warning)}\n"] }]
|
|
4034
|
+
}], propDecorators: { status: [{
|
|
4035
|
+
type: Input
|
|
4036
|
+
}], statusClass: [{
|
|
4037
|
+
type: HostBinding,
|
|
4038
|
+
args: ['class']
|
|
4039
|
+
}] } });
|
|
4040
|
+
|
|
4041
|
+
class GraniteEmptyAvatarComponent {
|
|
4042
|
+
constructor() {
|
|
4043
|
+
this._firstNameLetter = '';
|
|
4044
|
+
this._firstSurnameLetter = '';
|
|
4045
|
+
}
|
|
4046
|
+
ngOnChanges(changes) {
|
|
4047
|
+
if (changes.name) {
|
|
4048
|
+
this._firstNameLetter =
|
|
4049
|
+
changes.name.currentValue?.charAt(0)?.toUpperCase() || '';
|
|
4050
|
+
}
|
|
4051
|
+
if (changes.surname) {
|
|
4052
|
+
this._firstSurnameLetter =
|
|
4053
|
+
changes.surname.currentValue?.charAt(0)?.toUpperCase() || '';
|
|
4054
|
+
}
|
|
4055
|
+
}
|
|
4056
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteEmptyAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4057
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteEmptyAvatarComponent, selector: "granite-empty-avatar", inputs: { name: "name", surname: "surname" }, host: { classAttribute: "granite-empty-avatar" }, usesOnChanges: true, ngImport: i0, template: `
|
|
4058
|
+
<div class="no-profile-avatar">
|
|
4059
|
+
<span
|
|
4060
|
+
data-fnd="no-profile-avatar-initials"
|
|
4061
|
+
class="no-profile-avatar-initials"
|
|
4062
|
+
>{{ _firstNameLetter }}{{ _firstSurnameLetter }}</span
|
|
4063
|
+
>
|
|
4064
|
+
</div>
|
|
4065
|
+
`, isInline: true, styles: [":host{width:inherit;height:inherit}:host .no-profile-avatar{display:flex;width:inherit;height:inherit;border-radius:100%;background:var(--granite-color-background-info);justify-content:center;align-items:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4066
|
+
}
|
|
4067
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteEmptyAvatarComponent, decorators: [{
|
|
4068
|
+
type: Component,
|
|
4069
|
+
args: [{ selector: 'granite-empty-avatar', host: {
|
|
4070
|
+
class: 'granite-empty-avatar',
|
|
4071
|
+
}, template: `
|
|
4072
|
+
<div class="no-profile-avatar">
|
|
4073
|
+
<span
|
|
4074
|
+
data-fnd="no-profile-avatar-initials"
|
|
4075
|
+
class="no-profile-avatar-initials"
|
|
4076
|
+
>{{ _firstNameLetter }}{{ _firstSurnameLetter }}</span
|
|
4077
|
+
>
|
|
4078
|
+
</div>
|
|
4079
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{width:inherit;height:inherit}:host .no-profile-avatar{display:flex;width:inherit;height:inherit;border-radius:100%;background:var(--granite-color-background-info);justify-content:center;align-items:center}\n"] }]
|
|
4080
|
+
}], propDecorators: { name: [{
|
|
4081
|
+
type: Input
|
|
4082
|
+
}], surname: [{
|
|
4083
|
+
type: Input
|
|
4084
|
+
}] } });
|
|
4085
|
+
|
|
4086
|
+
class GraniteAvatarComponent extends ContactsTriggerDataComponent {
|
|
4087
|
+
ngAfterContentChecked() {
|
|
4088
|
+
this._customStatusDirectives = this._customStatusesQueryList
|
|
4089
|
+
.toArray()
|
|
4090
|
+
.reduce((directives, next) => {
|
|
4091
|
+
return {
|
|
4092
|
+
...directives,
|
|
4093
|
+
[next.graniteCustomAvatarStatus]: next.templateRef,
|
|
4094
|
+
};
|
|
4095
|
+
}, {});
|
|
4096
|
+
}
|
|
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 }); }
|
|
4099
|
+
}
|
|
4100
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteAvatarComponent, decorators: [{
|
|
4101
|
+
type: Component,
|
|
4102
|
+
args: [{ selector: 'granite-avatar', exportAs: 'graniteAvatar', host: {
|
|
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"] }]
|
|
4105
|
+
}], propDecorators: { name: [{
|
|
4106
|
+
type: Input
|
|
4107
|
+
}], surname: [{
|
|
4108
|
+
type: Input
|
|
4109
|
+
}], avatar: [{
|
|
4110
|
+
type: Input
|
|
4111
|
+
}], status: [{
|
|
4112
|
+
type: Input
|
|
4113
|
+
}], _customStatusesQueryList: [{
|
|
4114
|
+
type: ContentChildren,
|
|
4115
|
+
args: [GraniteCustomAvatarStatusDirective]
|
|
4116
|
+
}] } });
|
|
4117
|
+
|
|
3985
4118
|
class GraniteContactsProfileComponent {
|
|
3986
4119
|
ngOnChanges(changes) {
|
|
3987
4120
|
const profile = changes.profile?.currentValue;
|
|
@@ -3993,13 +4126,13 @@ class GraniteContactsProfileComponent {
|
|
|
3993
4126
|
this._initials = name[0].toUpperCase() + surname[0].toUpperCase();
|
|
3994
4127
|
}
|
|
3995
4128
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3996
|
-
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 <
|
|
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%;object-fit:cover}.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 }); }
|
|
3997
4130
|
}
|
|
3998
4131
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsProfileComponent, decorators: [{
|
|
3999
4132
|
type: Component,
|
|
4000
4133
|
args: [{ selector: 'granite-contacts-profile', host: {
|
|
4001
4134
|
class: 'granite-contacts-profile',
|
|
4002
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"profileClass\" data-fnd=\"profile\" class=\"profile\">\n <
|
|
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%;object-fit:cover}.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"] }]
|
|
4003
4136
|
}], propDecorators: { profile: [{
|
|
4004
4137
|
type: Input
|
|
4005
4138
|
}], profileClass: [{
|
|
@@ -4345,6 +4478,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
4345
4478
|
args: ['graniteContactsTriggerFor']
|
|
4346
4479
|
}] } });
|
|
4347
4480
|
|
|
4481
|
+
class GraniteAvatarModule {
|
|
4482
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
4483
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: GraniteAvatarModule, declarations: [GraniteAvatarComponent,
|
|
4484
|
+
GraniteAvatarDefaultStatusComponent,
|
|
4485
|
+
GraniteCustomAvatarStatusDirective,
|
|
4486
|
+
GraniteEmptyAvatarComponent], imports: [CommonModule], exports: [GraniteAvatarComponent,
|
|
4487
|
+
GraniteAvatarDefaultStatusComponent,
|
|
4488
|
+
GraniteCustomAvatarStatusDirective,
|
|
4489
|
+
GraniteEmptyAvatarComponent] }); }
|
|
4490
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteAvatarModule, imports: [CommonModule] }); }
|
|
4491
|
+
}
|
|
4492
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteAvatarModule, decorators: [{
|
|
4493
|
+
type: NgModule,
|
|
4494
|
+
args: [{
|
|
4495
|
+
imports: [CommonModule],
|
|
4496
|
+
declarations: [
|
|
4497
|
+
GraniteAvatarComponent,
|
|
4498
|
+
GraniteAvatarDefaultStatusComponent,
|
|
4499
|
+
GraniteCustomAvatarStatusDirective,
|
|
4500
|
+
GraniteEmptyAvatarComponent,
|
|
4501
|
+
],
|
|
4502
|
+
exports: [
|
|
4503
|
+
GraniteAvatarComponent,
|
|
4504
|
+
GraniteAvatarDefaultStatusComponent,
|
|
4505
|
+
GraniteCustomAvatarStatusDirective,
|
|
4506
|
+
GraniteEmptyAvatarComponent,
|
|
4507
|
+
],
|
|
4508
|
+
}]
|
|
4509
|
+
}] });
|
|
4510
|
+
|
|
4348
4511
|
class GraniteContactsModule {
|
|
4349
4512
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
4350
4513
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsModule, declarations: [GraniteContactsComponent,
|
|
@@ -4354,17 +4517,17 @@ class GraniteContactsModule {
|
|
|
4354
4517
|
GraniteContactItemTitleComponent,
|
|
4355
4518
|
GraniteContactsTriggerForDirective,
|
|
4356
4519
|
GraniteCustomStatusDirective,
|
|
4357
|
-
GraniteCustomProfileDirective], imports: [GraniteIconModule, CommonModule], exports: [GraniteContactsComponent,
|
|
4520
|
+
GraniteCustomProfileDirective], imports: [GraniteIconModule, GraniteAvatarModule, CommonModule], exports: [GraniteContactsComponent,
|
|
4358
4521
|
GraniteContactsTriggerForDirective,
|
|
4359
4522
|
GraniteContactItemComponent,
|
|
4360
4523
|
GraniteCustomStatusDirective,
|
|
4361
4524
|
GraniteCustomProfileDirective] }); }
|
|
4362
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsModule, imports: [GraniteIconModule, CommonModule] }); }
|
|
4525
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsModule, imports: [GraniteIconModule, GraniteAvatarModule, CommonModule] }); }
|
|
4363
4526
|
}
|
|
4364
4527
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsModule, decorators: [{
|
|
4365
4528
|
type: NgModule,
|
|
4366
4529
|
args: [{
|
|
4367
|
-
imports: [GraniteIconModule, CommonModule],
|
|
4530
|
+
imports: [GraniteIconModule, GraniteAvatarModule, CommonModule],
|
|
4368
4531
|
declarations: [
|
|
4369
4532
|
GraniteContactsComponent,
|
|
4370
4533
|
GraniteContactsProfileComponent,
|
|
@@ -4680,6 +4843,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
4680
4843
|
class GraniteProgressBarComponent {
|
|
4681
4844
|
constructor() {
|
|
4682
4845
|
this.progressBarData = [];
|
|
4846
|
+
this.legendData = [];
|
|
4683
4847
|
this.showLabel = false;
|
|
4684
4848
|
this.showLegend = false;
|
|
4685
4849
|
this.DEFAULT_TOTAL = 100;
|
|
@@ -4721,27 +4885,38 @@ class GraniteProgressBarComponent {
|
|
|
4721
4885
|
return this.progressBarData.reduce((acc, curr) => acc + curr.value, 0);
|
|
4722
4886
|
}
|
|
4723
4887
|
setLegendItems() {
|
|
4724
|
-
this.legendItems =
|
|
4888
|
+
this.legendItems =
|
|
4889
|
+
this.legendData.length > 0
|
|
4890
|
+
? this.getLegendItems(this.legendData)
|
|
4891
|
+
: this.getLegendItems(this.progressBarData);
|
|
4892
|
+
}
|
|
4893
|
+
getLegendItems(data) {
|
|
4894
|
+
return data.map(({ label, backgroundColor, }) => {
|
|
4725
4895
|
const legendItemColor = this.getStackColor(backgroundColor);
|
|
4726
4896
|
return { label, backgroundColor: legendItemColor };
|
|
4727
4897
|
});
|
|
4728
4898
|
}
|
|
4729
4899
|
ngOnChanges(changes) {
|
|
4730
|
-
if (changes.progressBarData
|
|
4731
|
-
JSON.stringify(changes.progressBarData.currentValue) !==
|
|
4732
|
-
JSON.stringify(changes.progressBarData.previousValue)) {
|
|
4900
|
+
if (changes.progressBarData) {
|
|
4733
4901
|
this.checkStackTotal();
|
|
4734
4902
|
this.setLegendItems();
|
|
4735
4903
|
}
|
|
4904
|
+
if (changes.legendData) {
|
|
4905
|
+
this.setLegendItems();
|
|
4906
|
+
}
|
|
4736
4907
|
}
|
|
4737
4908
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4738
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteProgressBarComponent, selector: "granite-progress-bar", inputs: { progressBarData: "progressBarData", showLabel: "showLabel", showLegend: "showLegend" }, exportAs: ["graniteProgressBar"], usesOnChanges: true, ngImport: i0, template: "<div\n role=\"progressbar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n class=\"progress\"\n [style.background-color]=\"getBackgroundColor()\"\n>\n <div\n *ngFor=\"let bar of progressBarData; let i = index\"\n [style.background-color]=\"getStackColor(bar.backgroundColor)\"\n [style.width]=\"getStringOfWidth(getWidth(bar.value))\"\n [style.color]=\"getFontColor(bar.foregroundColor)\"\n [graniteTooltipTriggerFor]=\"tooltip\"\n class=\"progress-bar\"\n >\n <label *ngIf=\"showLabel\" graniteHideOnOverflow>{{ bar.valueLabel }}</label>\n <granite-tooltip #tooltip> {{ bar.valueLabel }} </granite-tooltip>\n </div>\n</div>\n\n<ng-container *ngIf=\"showLegend\">\n <button\n graniteFlatButton\n [graniteProgressBarLegendTriggerFor]=\"legend\"\n class=\"legend-btn\"\n >\n <granite-icon fontIcon=\"icon-caret-down\"></granite-icon>\n </button>\n</ng-container>\n\n<granite-progress-bar-legend\n #legend\n [legendItems]=\"legendItems\"\n></granite-progress-bar-legend>\n", styles: [":host{width:100%;display:flex;align-items:center;
|
|
4909
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteProgressBarComponent, selector: "granite-progress-bar", inputs: { progressBarData: "progressBarData", legendData: "legendData", showLabel: "showLabel", showLegend: "showLegend" }, host: { properties: { "class.label-present": "showLabel" } }, exportAs: ["graniteProgressBar"], usesOnChanges: true, ngImport: i0, template: "<div\n role=\"progressbar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n class=\"progress\"\n [style.background-color]=\"getBackgroundColor()\"\n>\n <div\n *ngFor=\"let bar of progressBarData; let i = index\"\n [style.background-color]=\"getStackColor(bar.backgroundColor)\"\n [style.width]=\"getStringOfWidth(getWidth(bar.value))\"\n [style.color]=\"getFontColor(bar.foregroundColor)\"\n [graniteTooltipTriggerFor]=\"tooltip\"\n class=\"progress-bar\"\n >\n <label *ngIf=\"showLabel\" graniteHideOnOverflow>{{ bar.valueLabel }}</label>\n <granite-tooltip #tooltip> {{ bar.valueLabel }} </granite-tooltip>\n </div>\n</div>\n\n<ng-container *ngIf=\"showLegend\">\n <button\n graniteFlatButton\n [graniteProgressBarLegendTriggerFor]=\"legend\"\n class=\"legend-btn\"\n >\n <granite-icon fontIcon=\"icon-caret-down\"></granite-icon>\n </button>\n</ng-container>\n\n<granite-progress-bar-legend\n #legend\n [legendItems]=\"legendItems\"\n></granite-progress-bar-legend>\n", styles: [":host{width:100%;display:flex;align-items:center;box-sizing:border-box;height:.5rem;border-radius:var(--granite-radius-m);font-size:var(--granite-font-size-body-small);line-height:var(--granite-font-size-body-small)}:host(.label-present){height:auto!important}.progress{display:flex;width:inherit;height:inherit;overflow:hidden;border-radius:inherit;background-color:var(--granite-color-background-selected)}.progress-bar{display:flex;align-items:center;box-sizing:border-box;width:inherit;height:inherit;line-height:inherit;font-size:inherit;vertical-align:middle;text-overflow:ellipsis;white-space:nowrap;color:var(--granite-color-text);overflow:hidden;text-align:center;justify-content:center}.progress-bar label{width:100%;padding:var(--granite-spacing-4) 0}.legend-btn{width:16px;height:16px;margin-inline-start:var(--granite-spacing-16)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: GraniteHideOnOverflowDirective, selector: "[graniteHideOnOverflow]", exportAs: ["graniteHideOnOverflow"] }, { kind: "component", type: i3.GraniteTooltipComponent, selector: "granite-tooltip" }, { kind: "directive", type: i3.GraniteTooltipTriggerForDirective, selector: "[graniteTooltipTriggerFor]", inputs: ["graniteTooltipTriggerFor", "hideDelay", "showDelay", "showOnKeyboardFocus", "showOnClick"] }, { kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }, { kind: "component", type: GraniteButtonComponent, selector: "button[graniteButton],\n button[granitePrimaryButton],\n button[graniteFlatButton],\n button[graniteToolbarButton]\n ", inputs: ["disabled", "toggled"], exportAs: ["graniteButton"] }, { kind: "component", type: GraniteProgressBarLegendComponent, selector: "granite-progress-bar-legend", inputs: ["legendItems"] }, { kind: "directive", type: GraniteProgressBarLegendTriggerForDirective, selector: "[graniteProgressBarLegendTriggerFor]", inputs: ["graniteProgressBarLegendTriggerFor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4739
4910
|
}
|
|
4740
4911
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarComponent, decorators: [{
|
|
4741
4912
|
type: Component,
|
|
4742
|
-
args: [{ selector: 'granite-progress-bar', exportAs: 'graniteProgressBar',
|
|
4913
|
+
args: [{ selector: 'granite-progress-bar', exportAs: 'graniteProgressBar', host: {
|
|
4914
|
+
'[class.label-present]': 'showLabel',
|
|
4915
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n role=\"progressbar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n class=\"progress\"\n [style.background-color]=\"getBackgroundColor()\"\n>\n <div\n *ngFor=\"let bar of progressBarData; let i = index\"\n [style.background-color]=\"getStackColor(bar.backgroundColor)\"\n [style.width]=\"getStringOfWidth(getWidth(bar.value))\"\n [style.color]=\"getFontColor(bar.foregroundColor)\"\n [graniteTooltipTriggerFor]=\"tooltip\"\n class=\"progress-bar\"\n >\n <label *ngIf=\"showLabel\" graniteHideOnOverflow>{{ bar.valueLabel }}</label>\n <granite-tooltip #tooltip> {{ bar.valueLabel }} </granite-tooltip>\n </div>\n</div>\n\n<ng-container *ngIf=\"showLegend\">\n <button\n graniteFlatButton\n [graniteProgressBarLegendTriggerFor]=\"legend\"\n class=\"legend-btn\"\n >\n <granite-icon fontIcon=\"icon-caret-down\"></granite-icon>\n </button>\n</ng-container>\n\n<granite-progress-bar-legend\n #legend\n [legendItems]=\"legendItems\"\n></granite-progress-bar-legend>\n", styles: [":host{width:100%;display:flex;align-items:center;box-sizing:border-box;height:.5rem;border-radius:var(--granite-radius-m);font-size:var(--granite-font-size-body-small);line-height:var(--granite-font-size-body-small)}:host(.label-present){height:auto!important}.progress{display:flex;width:inherit;height:inherit;overflow:hidden;border-radius:inherit;background-color:var(--granite-color-background-selected)}.progress-bar{display:flex;align-items:center;box-sizing:border-box;width:inherit;height:inherit;line-height:inherit;font-size:inherit;vertical-align:middle;text-overflow:ellipsis;white-space:nowrap;color:var(--granite-color-text);overflow:hidden;text-align:center;justify-content:center}.progress-bar label{width:100%;padding:var(--granite-spacing-4) 0}.legend-btn{width:16px;height:16px;margin-inline-start:var(--granite-spacing-16)}\n"] }]
|
|
4743
4916
|
}], propDecorators: { progressBarData: [{
|
|
4744
4917
|
type: Input
|
|
4918
|
+
}], legendData: [{
|
|
4919
|
+
type: Input
|
|
4745
4920
|
}], showLabel: [{
|
|
4746
4921
|
type: Input
|
|
4747
4922
|
}], showLegend: [{
|
|
@@ -5528,5 +5703,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
5528
5703
|
* Generated bundle index. Do not edit.
|
|
5529
5704
|
*/
|
|
5530
5705
|
|
|
5531
|
-
export { ButtonSelectors, CONTACT_DEFAULT_STATUS, ClientInputDesktopDirective, ClientInputTouchDirective, ClientOutputDesktopDirective, ClientOutputTouchDirective, ContactItemDefaultStatusComponent, GRANITE_CLIENT_INPUT, GRANITE_CLIENT_OUTPUT, GraniteAnchorComponent, GraniteArrangeGridComponent, GraniteArrangeGridItemComponent, GraniteArrangeGridModule, GraniteArrangeGridOrientation, GraniteBadgeComponent, GraniteBadgeHarness, GraniteBadgeModule, GraniteButtonComponent, GraniteButtonModule, GraniteCardActionsComponent, GraniteCardAvatarComponent, GraniteCardBodyComponent, GraniteCardComponent, GraniteCardContentComponent, GraniteCardFooterComponent, GraniteCardHeaderComponent, GraniteCardHeaderSubTitleComponent, GraniteCardHeaderTitleComponent, GraniteCardListComponent, GraniteCardListModule, GraniteCheckboxComponent, GraniteCheckboxGroupComponent, GraniteCheckboxModule, GraniteChipComponent, GraniteChipInputDirective, GraniteChipListComponent, GraniteChipSelectionChangeEvent, GraniteChipsModule, GraniteCollapsibleConditionalBodyDirective, GraniteCollapsibleConditionalHeaderDirective, GraniteCollapsibleGroupComponent, GraniteCollapsibleGroupModule, GraniteContactItemComponent, GraniteContactItemTitleComponent, GraniteContactsComponent, GraniteContactsModule, GraniteContactsProfileComponent, GraniteContactsTriggerForDirective, GraniteCoreModule, GraniteCustomProfileDirective, GraniteCustomStatusDirective, GraniteDividerDirective, GraniteFileUploadComponent, GraniteFileUploadModule, GraniteGridComponent, GraniteGridItemComponent, GraniteGridModule, GraniteHideOnOverflowDirective, GraniteIconComponent, GraniteIconModule, GraniteInputFieldComponent, GraniteInputFieldModule, GraniteLabelComponent, GraniteLabelModule, GraniteMenuComponent, GraniteMenuHarness, GraniteMenuItemComponent, GraniteMenuItemHarness, GraniteMenuModule, GraniteMenuTouchCloseComponent, GraniteMenuTouchTitleItemComponent, GraniteMenuTriggerForDirective, GraniteProgressBarComponent, GraniteProgressBarModule, GraniteRadioButtonComponent, GraniteRadioButtonModule, GraniteRadioGroupComponent, GraniteTitleDirective, GraniteTitlePipe, GraniteToggleSwitchComponent, GraniteToggleSwitchModule, PurePipesModule, deviceDesktop, deviceTouch, disabledMixin, graniteMenuDesktopAnimations, graniteMenuTouchAnimations };
|
|
5706
|
+
export { AVATAR_DEFAULT_STATUS, ButtonSelectors, CONTACT_DEFAULT_STATUS, ClientInputDesktopDirective, ClientInputTouchDirective, ClientOutputDesktopDirective, ClientOutputTouchDirective, ContactItemDefaultStatusComponent, GRANITE_CLIENT_INPUT, GRANITE_CLIENT_OUTPUT, GraniteAnchorComponent, GraniteArrangeGridComponent, GraniteArrangeGridItemComponent, GraniteArrangeGridModule, GraniteArrangeGridOrientation, GraniteAvatarComponent, GraniteAvatarDefaultStatusComponent, GraniteAvatarModule, GraniteBadgeComponent, GraniteBadgeHarness, GraniteBadgeModule, GraniteButtonComponent, GraniteButtonModule, GraniteCardActionsComponent, GraniteCardAvatarComponent, GraniteCardBodyComponent, GraniteCardComponent, GraniteCardContentComponent, GraniteCardFooterComponent, GraniteCardHeaderComponent, GraniteCardHeaderSubTitleComponent, GraniteCardHeaderTitleComponent, GraniteCardListComponent, GraniteCardListModule, GraniteCheckboxComponent, GraniteCheckboxGroupComponent, GraniteCheckboxModule, GraniteChipComponent, GraniteChipInputDirective, GraniteChipListComponent, GraniteChipSelectionChangeEvent, GraniteChipsModule, GraniteCollapsibleConditionalBodyDirective, GraniteCollapsibleConditionalHeaderDirective, GraniteCollapsibleGroupComponent, GraniteCollapsibleGroupModule, GraniteContactItemComponent, GraniteContactItemTitleComponent, GraniteContactsComponent, GraniteContactsModule, GraniteContactsProfileComponent, GraniteContactsTriggerForDirective, GraniteCoreModule, GraniteCustomAvatarStatusDirective, GraniteCustomProfileDirective, GraniteCustomStatusDirective, GraniteDividerDirective, GraniteEmptyAvatarComponent, GraniteFileUploadComponent, GraniteFileUploadModule, GraniteGridComponent, GraniteGridItemComponent, GraniteGridModule, GraniteHideOnOverflowDirective, GraniteIconComponent, GraniteIconModule, GraniteInputFieldComponent, GraniteInputFieldModule, GraniteLabelComponent, GraniteLabelModule, GraniteMenuComponent, GraniteMenuHarness, GraniteMenuItemComponent, GraniteMenuItemHarness, GraniteMenuModule, GraniteMenuTouchCloseComponent, GraniteMenuTouchTitleItemComponent, GraniteMenuTriggerForDirective, GraniteProgressBarComponent, GraniteProgressBarModule, GraniteRadioButtonComponent, GraniteRadioButtonModule, GraniteRadioGroupComponent, GraniteTitleDirective, GraniteTitlePipe, GraniteToggleSwitchComponent, GraniteToggleSwitchModule, PurePipesModule, deviceDesktop, deviceTouch, disabledMixin, graniteMenuDesktopAnimations, graniteMenuTouchAnimations };
|
|
5532
5707
|
//# sourceMappingURL=ifsworld-granite-components.mjs.map
|