@ifsworld/granite-components 13.2.9-beta.1 → 13.3.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/lib/avatar/avatar.component.mjs +24 -7
- package/esm2022/lib/avatar/empty-avatar/empty-avatar.component.mjs +6 -22
- package/esm2022/lib/contacts/contacts-profile/contacts-profile.component.mjs +4 -13
- package/esm2022/lib/contacts/contacts-types/contacts.component.private-types.mjs +1 -1
- package/esm2022/lib/contacts/contacts-types/contacts.component.public-types.mjs +1 -1
- package/esm2022/lib/contacts/contacts.component.mjs +29 -8
- package/esm2022/lib/core/services/names-utils-service.mjs +51 -0
- package/esm2022/lib/input-field/input-field.component.mjs +1 -1
- package/esm2022/lib/toggle-switch/toggle-switch.component.mjs +2 -2
- package/esm2022/table/lib/table.component.mjs +18 -4
- package/esm2022/table/lib/table.model.mjs +2 -0
- package/fesm2022/ifsworld-granite-components-table.mjs +17 -3
- package/fesm2022/ifsworld-granite-components-table.mjs.map +1 -1
- package/fesm2022/ifsworld-granite-components.mjs +106 -44
- package/fesm2022/ifsworld-granite-components.mjs.map +1 -1
- package/lib/avatar/avatar.component.d.ts +9 -4
- package/lib/avatar/empty-avatar/empty-avatar.component.d.ts +3 -8
- package/lib/contacts/contacts-profile/contacts-profile.component.d.ts +3 -7
- package/lib/contacts/contacts-types/contacts.component.private-types.d.ts +4 -1
- package/lib/contacts/contacts-types/contacts.component.public-types.d.ts +2 -1
- package/lib/contacts/contacts.component.d.ts +6 -2
- package/lib/core/services/names-utils-service.d.ts +17 -0
- package/package.json +1 -1
- package/table/lib/table.component.d.ts +10 -3
- package/table/lib/table.model.d.ts +6 -0
|
@@ -2256,7 +2256,7 @@ class GraniteToggleSwitchComponent {
|
|
|
2256
2256
|
return this._inputElement.nativeElement;
|
|
2257
2257
|
}
|
|
2258
2258
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteToggleSwitchComponent, deps: [{ token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2259
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteToggleSwitchComponent, selector: "granite-toggle-switch", inputs: { id: "id", checked: "checked", disabled: "disabled", readonly: "readonly", labelPosition: "labelPosition", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { valueChange: "valueChange", toggleChange: "toggleChange", toggleBlur: "toggleBlur" }, host: { properties: { "class.granite-toggle-switch-checked": "checked", "class.granite-toggle-switch-disabled": "disabled", "class.granite-toggle-switch-readonly": "readonly", "class.granite-toggle-switch-label-before": "_positionBefore" }, classAttribute: "granite-toggle-switch" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["graniteToggleSwitch"], usesOnChanges: true, ngImport: i0, template: "<label [attr.for]=\"id\" class=\"granite-toggle-switch-label\">\n <div class=\"granite-toggle-switch-bar\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-toggle-switch-input cdk-visually-hidden\"\n role=\"switch\"\n type=\"checkbox\"\n [attr.aria-checked]=\"checked.toString()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [checked]=\"checked\"\n [disabled]=\"_toggleSwitchDisabled\"\n [readonly]=\"readonly\"\n (click)=\"_toggleSwitchClick()\"\n (change)=\"_toggleSwitchChange()\"\n (blur)=\"_onBlur()\"\n />\n <div class=\"granite-toggle-switch-thumb\"></div>\n </div>\n <span class=\"granite-toggle-switch-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host(.granite-toggle-switch){color:var(--granite-color-text)}.granite-toggle-switch-bar{width:2rem;height:1rem;border-radius:.5rem;background-color:var(--granite-color-background-inactive);transition:background-color .1s linear;position:relative}.granite-toggle-switch-bar:focus-within{
|
|
2259
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteToggleSwitchComponent, selector: "granite-toggle-switch", inputs: { id: "id", checked: "checked", disabled: "disabled", readonly: "readonly", labelPosition: "labelPosition", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { valueChange: "valueChange", toggleChange: "toggleChange", toggleBlur: "toggleBlur" }, host: { properties: { "class.granite-toggle-switch-checked": "checked", "class.granite-toggle-switch-disabled": "disabled", "class.granite-toggle-switch-readonly": "readonly", "class.granite-toggle-switch-label-before": "_positionBefore" }, classAttribute: "granite-toggle-switch" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["graniteToggleSwitch"], usesOnChanges: true, ngImport: i0, template: "<label [attr.for]=\"id\" class=\"granite-toggle-switch-label\">\n <div class=\"granite-toggle-switch-bar\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-toggle-switch-input cdk-visually-hidden\"\n role=\"switch\"\n type=\"checkbox\"\n [attr.aria-checked]=\"checked.toString()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [checked]=\"checked\"\n [disabled]=\"_toggleSwitchDisabled\"\n [readonly]=\"readonly\"\n (click)=\"_toggleSwitchClick()\"\n (change)=\"_toggleSwitchChange()\"\n (blur)=\"_onBlur()\"\n />\n <div class=\"granite-toggle-switch-thumb\"></div>\n </div>\n <span class=\"granite-toggle-switch-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host(.granite-toggle-switch){color:var(--granite-color-text)}.granite-toggle-switch-bar{width:2rem;height:1rem;border-radius:.5rem;background-color:var(--granite-color-background-inactive);transition:background-color .1s linear;position:relative}.granite-toggle-switch-bar:focus-within{box-shadow:0 0 0 .0625rem var(--granite-color-focus)}.granite-toggle-switch-thumb{width:1rem;height:1rem;border-radius:1rem;background-color:var(--granite-color-text-static-light);border:.0625rem solid var(--granite-color-background-inactive);transition:float .1s linear}html[dir=ltr] .granite-toggle-switch-thumb{float:left}:host-context([dir=ltr]) .granite-toggle-switch-thumb{float:left}html[dir=rtl] .granite-toggle-switch-thumb{float:right}:host-context([dir=rtl]) .granite-toggle-switch-thumb{float:right}:host(.granite-toggle-switch-checked) .granite-toggle-switch-bar{background-color:var(--granite-color-background-active)}:host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{border:.0625rem solid var(--granite-color-background-active)}html[dir=ltr] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}:host-context([dir=ltr]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}html[dir=rtl] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}:host-context([dir=rtl]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}.granite-toggle-switch-label{display:flex;align-items:center;width:max-content}:host(.granite-toggle-switch-disabled) .granite-toggle-switch-label{opacity:.6}:host(.granite-toggle-switch-disabled) *{cursor:default}:host(.granite-toggle-switch-readonly) *{cursor:default}.granite-toggle-switch-text{padding-inline-start:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small)}.granite-toggle-switch-text:empty{display:none}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-label{flex-direction:row-reverse}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-8)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2260
2260
|
}
|
|
2261
2261
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteToggleSwitchComponent, decorators: [{
|
|
2262
2262
|
type: Component,
|
|
@@ -2266,7 +2266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
2266
2266
|
'[class.granite-toggle-switch-disabled]': 'disabled',
|
|
2267
2267
|
'[class.granite-toggle-switch-readonly]': 'readonly',
|
|
2268
2268
|
'[class.granite-toggle-switch-label-before]': '_positionBefore',
|
|
2269
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"id\" class=\"granite-toggle-switch-label\">\n <div class=\"granite-toggle-switch-bar\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-toggle-switch-input cdk-visually-hidden\"\n role=\"switch\"\n type=\"checkbox\"\n [attr.aria-checked]=\"checked.toString()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [checked]=\"checked\"\n [disabled]=\"_toggleSwitchDisabled\"\n [readonly]=\"readonly\"\n (click)=\"_toggleSwitchClick()\"\n (change)=\"_toggleSwitchChange()\"\n (blur)=\"_onBlur()\"\n />\n <div class=\"granite-toggle-switch-thumb\"></div>\n </div>\n <span class=\"granite-toggle-switch-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host(.granite-toggle-switch){color:var(--granite-color-text)}.granite-toggle-switch-bar{width:2rem;height:1rem;border-radius:.5rem;background-color:var(--granite-color-background-inactive);transition:background-color .1s linear;position:relative}.granite-toggle-switch-bar:focus-within{
|
|
2269
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"id\" class=\"granite-toggle-switch-label\">\n <div class=\"granite-toggle-switch-bar\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-toggle-switch-input cdk-visually-hidden\"\n role=\"switch\"\n type=\"checkbox\"\n [attr.aria-checked]=\"checked.toString()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [checked]=\"checked\"\n [disabled]=\"_toggleSwitchDisabled\"\n [readonly]=\"readonly\"\n (click)=\"_toggleSwitchClick()\"\n (change)=\"_toggleSwitchChange()\"\n (blur)=\"_onBlur()\"\n />\n <div class=\"granite-toggle-switch-thumb\"></div>\n </div>\n <span class=\"granite-toggle-switch-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host(.granite-toggle-switch){color:var(--granite-color-text)}.granite-toggle-switch-bar{width:2rem;height:1rem;border-radius:.5rem;background-color:var(--granite-color-background-inactive);transition:background-color .1s linear;position:relative}.granite-toggle-switch-bar:focus-within{box-shadow:0 0 0 .0625rem var(--granite-color-focus)}.granite-toggle-switch-thumb{width:1rem;height:1rem;border-radius:1rem;background-color:var(--granite-color-text-static-light);border:.0625rem solid var(--granite-color-background-inactive);transition:float .1s linear}html[dir=ltr] .granite-toggle-switch-thumb{float:left}:host-context([dir=ltr]) .granite-toggle-switch-thumb{float:left}html[dir=rtl] .granite-toggle-switch-thumb{float:right}:host-context([dir=rtl]) .granite-toggle-switch-thumb{float:right}:host(.granite-toggle-switch-checked) .granite-toggle-switch-bar{background-color:var(--granite-color-background-active)}:host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{border:.0625rem solid var(--granite-color-background-active)}html[dir=ltr] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}:host-context([dir=ltr]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}html[dir=rtl] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}:host-context([dir=rtl]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}.granite-toggle-switch-label{display:flex;align-items:center;width:max-content}:host(.granite-toggle-switch-disabled) .granite-toggle-switch-label{opacity:.6}:host(.granite-toggle-switch-disabled) *{cursor:default}:host(.granite-toggle-switch-readonly) *{cursor:default}.granite-toggle-switch-text{padding-inline-start:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small)}.granite-toggle-switch-text:empty{display:none}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-label{flex-direction:row-reverse}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-8)}\n"] }]
|
|
2270
2270
|
}], ctorParameters: () => [{ type: i1.FocusMonitor }], propDecorators: { id: [{
|
|
2271
2271
|
type: Input
|
|
2272
2272
|
}], checked: [{
|
|
@@ -4005,6 +4005,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
4005
4005
|
}]
|
|
4006
4006
|
}], ctorParameters: () => [{ type: i0.TemplateRef }] });
|
|
4007
4007
|
|
|
4008
|
+
class NamesUtilsService {
|
|
4009
|
+
static getInitialsFrom(firstName) {
|
|
4010
|
+
return firstName
|
|
4011
|
+
.split(' ')
|
|
4012
|
+
.map((part) => part.charAt(0).toUpperCase())
|
|
4013
|
+
.join('');
|
|
4014
|
+
}
|
|
4015
|
+
static buildNameData(namesFormat) {
|
|
4016
|
+
const { firstName, lastName, name } = namesFormat;
|
|
4017
|
+
const getInitials = (fullName) => NamesUtilsService.getInitialsFrom(fullName);
|
|
4018
|
+
if (firstName && lastName) {
|
|
4019
|
+
return {
|
|
4020
|
+
firstName: firstName,
|
|
4021
|
+
lastName: lastName,
|
|
4022
|
+
initials: `${getInitials(firstName)[0]}${getInitials(lastName)[0]}`,
|
|
4023
|
+
};
|
|
4024
|
+
}
|
|
4025
|
+
if (firstName) {
|
|
4026
|
+
const firstNameInitials = getInitials(firstName);
|
|
4027
|
+
return {
|
|
4028
|
+
firstName: firstName,
|
|
4029
|
+
initials: `${firstNameInitials[0]}${firstNameInitials[1] || ''}`,
|
|
4030
|
+
};
|
|
4031
|
+
}
|
|
4032
|
+
if (lastName) {
|
|
4033
|
+
const lastNameInitials = getInitials(lastName);
|
|
4034
|
+
return {
|
|
4035
|
+
lastName: lastName,
|
|
4036
|
+
initials: `${lastNameInitials[0]}${lastNameInitials[1] || ''}`,
|
|
4037
|
+
};
|
|
4038
|
+
}
|
|
4039
|
+
if (name) {
|
|
4040
|
+
const nameInitials = getInitials(name);
|
|
4041
|
+
const nameParts = name.split(' ');
|
|
4042
|
+
const firstNameParts = nameParts.length > 1 ? nameParts.slice(0, -1) : [name];
|
|
4043
|
+
const lastName = nameParts.length > 1 ? nameParts[nameParts.length - 1] : '';
|
|
4044
|
+
const firstName = firstNameParts.join(' ');
|
|
4045
|
+
return {
|
|
4046
|
+
firstName: firstName,
|
|
4047
|
+
lastName: lastName,
|
|
4048
|
+
initials: `${nameInitials[0]}${nameInitials[1] || ''}`,
|
|
4049
|
+
};
|
|
4050
|
+
}
|
|
4051
|
+
return {
|
|
4052
|
+
firstName: '',
|
|
4053
|
+
lastName: '',
|
|
4054
|
+
initials: '',
|
|
4055
|
+
};
|
|
4056
|
+
}
|
|
4057
|
+
}
|
|
4058
|
+
|
|
4008
4059
|
class GraniteCustomAvatarStatusDirective {
|
|
4009
4060
|
constructor(templateRef) {
|
|
4010
4061
|
this.templateRef = templateRef;
|
|
@@ -4062,27 +4113,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
4062
4113
|
}] } });
|
|
4063
4114
|
|
|
4064
4115
|
class GraniteEmptyAvatarComponent {
|
|
4065
|
-
constructor() {
|
|
4066
|
-
this._firstNameLetter = '';
|
|
4067
|
-
this._firstSurnameLetter = '';
|
|
4068
|
-
}
|
|
4069
|
-
ngOnChanges(changes) {
|
|
4070
|
-
if (changes.name) {
|
|
4071
|
-
this._firstNameLetter =
|
|
4072
|
-
changes.name.currentValue?.charAt(0)?.toUpperCase() || '';
|
|
4073
|
-
}
|
|
4074
|
-
if (changes.surname) {
|
|
4075
|
-
this._firstSurnameLetter =
|
|
4076
|
-
changes.surname.currentValue?.charAt(0)?.toUpperCase() || '';
|
|
4077
|
-
}
|
|
4078
|
-
}
|
|
4079
4116
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteEmptyAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4080
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteEmptyAvatarComponent, selector: "granite-empty-avatar", inputs: {
|
|
4117
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteEmptyAvatarComponent, selector: "granite-empty-avatar", inputs: { initials: "initials" }, host: { classAttribute: "granite-empty-avatar" }, ngImport: i0, template: `
|
|
4081
4118
|
<div class="no-profile-avatar">
|
|
4082
4119
|
<span
|
|
4083
4120
|
data-fnd="no-profile-avatar-initials"
|
|
4084
4121
|
class="no-profile-avatar-initials"
|
|
4085
|
-
>{{
|
|
4122
|
+
>{{ initials }}</span
|
|
4086
4123
|
>
|
|
4087
4124
|
</div>
|
|
4088
4125
|
`, 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 }); }
|
|
@@ -4096,17 +4133,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
4096
4133
|
<span
|
|
4097
4134
|
data-fnd="no-profile-avatar-initials"
|
|
4098
4135
|
class="no-profile-avatar-initials"
|
|
4099
|
-
>{{
|
|
4136
|
+
>{{ initials }}</span
|
|
4100
4137
|
>
|
|
4101
4138
|
</div>
|
|
4102
4139
|
`, 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"] }]
|
|
4103
|
-
}], propDecorators: {
|
|
4104
|
-
type: Input
|
|
4105
|
-
}], surname: [{
|
|
4140
|
+
}], propDecorators: { initials: [{
|
|
4106
4141
|
type: Input
|
|
4107
4142
|
}] } });
|
|
4108
4143
|
|
|
4109
4144
|
class GraniteAvatarComponent extends ContactsTriggerDataComponent {
|
|
4145
|
+
constructor(cd) {
|
|
4146
|
+
super();
|
|
4147
|
+
this.cd = cd;
|
|
4148
|
+
}
|
|
4149
|
+
ngOnChanges(changes) {
|
|
4150
|
+
if (changes.firstName || changes.lastName || changes.name) {
|
|
4151
|
+
this._nameInitials = NamesUtilsService.buildNameData({
|
|
4152
|
+
firstName: changes.firstName?.currentValue,
|
|
4153
|
+
lastName: changes.lastName?.currentValue,
|
|
4154
|
+
name: changes.name?.currentValue,
|
|
4155
|
+
}).initials;
|
|
4156
|
+
this.cd.markForCheck();
|
|
4157
|
+
}
|
|
4158
|
+
}
|
|
4110
4159
|
ngAfterContentChecked() {
|
|
4111
4160
|
this._customStatusDirectives = this._customStatusesQueryList
|
|
4112
4161
|
.toArray()
|
|
@@ -4117,17 +4166,19 @@ class GraniteAvatarComponent extends ContactsTriggerDataComponent {
|
|
|
4117
4166
|
};
|
|
4118
4167
|
}, {});
|
|
4119
4168
|
}
|
|
4120
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteAvatarComponent, deps:
|
|
4121
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: GraniteAvatarComponent, selector: "granite-avatar", inputs: { name: "name",
|
|
4169
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteAvatarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4170
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: GraniteAvatarComponent, selector: "granite-avatar", inputs: { name: "name", firstName: "firstName", lastName: "lastName", avatar: "avatar", status: "status" }, host: { classAttribute: "granite-avatar" }, queries: [{ propertyName: "_customStatusesQueryList", predicate: GraniteCustomAvatarStatusDirective }], exportAs: ["graniteAvatar"], usesInheritance: true, usesOnChanges: 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 [initials]=\"_nameInitials\"\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: ["initials"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4122
4171
|
}
|
|
4123
4172
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteAvatarComponent, decorators: [{
|
|
4124
4173
|
type: Component,
|
|
4125
4174
|
args: [{ selector: 'granite-avatar', exportAs: 'graniteAvatar', host: {
|
|
4126
4175
|
class: 'granite-avatar',
|
|
4127
|
-
}, 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 [
|
|
4128
|
-
}], propDecorators: { name: [{
|
|
4176
|
+
}, 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 [initials]=\"_nameInitials\"\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"] }]
|
|
4177
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { name: [{
|
|
4178
|
+
type: Input
|
|
4179
|
+
}], firstName: [{
|
|
4129
4180
|
type: Input
|
|
4130
|
-
}],
|
|
4181
|
+
}], lastName: [{
|
|
4131
4182
|
type: Input
|
|
4132
4183
|
}], avatar: [{
|
|
4133
4184
|
type: Input
|
|
@@ -4139,23 +4190,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
4139
4190
|
}] } });
|
|
4140
4191
|
|
|
4141
4192
|
class GraniteContactsProfileComponent {
|
|
4142
|
-
ngOnChanges(changes) {
|
|
4143
|
-
const profile = changes.profile?.currentValue;
|
|
4144
|
-
if (profile && profile.name && profile.surname) {
|
|
4145
|
-
this.createProfileInitials(profile.name, profile.surname);
|
|
4146
|
-
}
|
|
4147
|
-
}
|
|
4148
|
-
createProfileInitials(name, surname) {
|
|
4149
|
-
this._initials = name[0].toUpperCase() + surname[0].toUpperCase();
|
|
4150
|
-
}
|
|
4151
4193
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4152
|
-
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" },
|
|
4194
|
+
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" }, ngImport: i0, template: "<div [class]=\"profileClass\" data-fnd=\"profile\" class=\"profile\">\n <granite-avatar\n data-fnd=\"profile-avatar\"\n class=\"profile-avatar\"\n [firstName]=\"profile.firstName\"\n [lastName]=\"profile.lastName\"\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 >{{ profile?.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?.firstName }} {{ profile?.lastName }}\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", "firstName", "lastName", "avatar", "status"], exportAs: ["graniteAvatar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4153
4195
|
}
|
|
4154
4196
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsProfileComponent, decorators: [{
|
|
4155
4197
|
type: Component,
|
|
4156
4198
|
args: [{ selector: 'granite-contacts-profile', host: {
|
|
4157
4199
|
class: 'granite-contacts-profile',
|
|
4158
|
-
}, 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 [
|
|
4200
|
+
}, 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 [firstName]=\"profile.firstName\"\n [lastName]=\"profile.lastName\"\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 >{{ profile?.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?.firstName }} {{ profile?.lastName }}\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"] }]
|
|
4159
4201
|
}], propDecorators: { profile: [{
|
|
4160
4202
|
type: Input
|
|
4161
4203
|
}], profileClass: [{
|
|
@@ -4222,8 +4264,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
4222
4264
|
}] } });
|
|
4223
4265
|
|
|
4224
4266
|
class GraniteContactsComponent extends ContactsTriggerDataComponent {
|
|
4225
|
-
constructor() {
|
|
4226
|
-
super(
|
|
4267
|
+
constructor(cd) {
|
|
4268
|
+
super();
|
|
4269
|
+
this.cd = cd;
|
|
4227
4270
|
this.contacts = [];
|
|
4228
4271
|
this.defaultShow = false;
|
|
4229
4272
|
this.selectedContact = new EventEmitter();
|
|
@@ -4233,6 +4276,11 @@ class GraniteContactsComponent extends ContactsTriggerDataComponent {
|
|
|
4233
4276
|
if (changes.contacts && !changes.contacts.currentValue) {
|
|
4234
4277
|
this.contacts = [];
|
|
4235
4278
|
}
|
|
4279
|
+
if (changes.profile?.currentValue) {
|
|
4280
|
+
const profile = changes.profile.currentValue;
|
|
4281
|
+
this._profile = this.createProfileData(profile);
|
|
4282
|
+
}
|
|
4283
|
+
this.cd.markForCheck();
|
|
4236
4284
|
}
|
|
4237
4285
|
ngAfterContentChecked() {
|
|
4238
4286
|
this._contactsExtended = this.setProperCustomStatusTemplates(this._customStatuses.toArray(), this.contacts);
|
|
@@ -4256,15 +4304,29 @@ class GraniteContactsComponent extends ContactsTriggerDataComponent {
|
|
|
4256
4304
|
return result;
|
|
4257
4305
|
});
|
|
4258
4306
|
}
|
|
4259
|
-
|
|
4260
|
-
|
|
4307
|
+
createProfileData(profile) {
|
|
4308
|
+
const nameData = NamesUtilsService.buildNameData({
|
|
4309
|
+
firstName: profile.firstName,
|
|
4310
|
+
lastName: profile.lastName,
|
|
4311
|
+
name: profile.name,
|
|
4312
|
+
});
|
|
4313
|
+
return {
|
|
4314
|
+
firstName: nameData.firstName,
|
|
4315
|
+
lastName: nameData.lastName,
|
|
4316
|
+
initials: nameData.initials,
|
|
4317
|
+
jobTitle: profile.jobTitle,
|
|
4318
|
+
avatar: profile.avatar,
|
|
4319
|
+
};
|
|
4320
|
+
}
|
|
4321
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4322
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteContactsComponent, selector: "granite-contacts", inputs: { contacts: "contacts", contactsClass: "contactsClass", profile: "profile", profileClass: "profileClass", defaultShow: "defaultShow" }, outputs: { selectedContact: "selectedContact" }, host: { classAttribute: "granite-contacts" }, queries: [{ propertyName: "customProfileDirective", first: true, predicate: GraniteCustomProfileDirective, descendants: true }, { propertyName: "_customStatuses", predicate: GraniteCustomStatusDirective }], exportAs: ["graniteContacts"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #contactsTemplate>\n <div data-fnd=\"contacts\" [class]=\"contactsClass\" class=\"granite-contact\">\n <ng-container *ngIf=\"customProfileDirective; else defaultProfile\">\n <ng-container\n *ngTemplateOutlet=\"customProfileDirective.templateRef\"\n ></ng-container>\n </ng-container>\n\n <ng-template #defaultProfile>\n <granite-contacts-profile\n data-fnd=\"default-profile\"\n [profileClass]=\"profileClass\"\n [profile]=\"_profile\"\n ></granite-contacts-profile>\n </ng-template>\n\n <ul class=\"contact-list\">\n <li *ngFor=\"let contact of _contactsExtended\">\n <granite-contact-item\n [contact]=\"contact\"\n (selectedContact)=\"onSelectedContact($event)\"\n ></granite-contact-item>\n </li>\n </ul>\n </div>\n</ng-template>\n\n<ng-container *ngIf=\"defaultShow\">\n <ng-container *ngTemplateOutlet=\"contactsTemplate\"></ng-container>\n</ng-container>\n", styles: [".granite-contact{display:inline-block;font-size:var(--granite-font-size-body);font-family:var(--granite-font-family-default);color:var(--granite-color-text-weak);height:-moz-fit-content;height:fit-content;min-width:10rem;max-width:20rem;padding:var(--granite-spacing-16);box-shadow:var(--granite-shadow-popover);background:var(--granite-color-background-variant)}.granite-contact .contact-list{display:flex;flex-direction:column;align-items:flex-start;gap:var(--granite-spacing-8);list-style-type:none;padding:0;margin:0}\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: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GraniteContactsProfileComponent, selector: "granite-contacts-profile", inputs: ["profile", "profileClass"] }, { kind: "component", type: GraniteContactItemComponent, selector: "granite-contact-item", inputs: ["contact"], outputs: ["selectedContact"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4261
4323
|
}
|
|
4262
4324
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsComponent, decorators: [{
|
|
4263
4325
|
type: Component,
|
|
4264
4326
|
args: [{ selector: 'granite-contacts', exportAs: 'graniteContacts', host: {
|
|
4265
4327
|
class: 'granite-contacts',
|
|
4266
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #contactsTemplate>\n <div data-fnd=\"contacts\" [class]=\"contactsClass\" class=\"granite-contact\">\n <ng-container *ngIf=\"customProfileDirective; else defaultProfile\">\n <ng-container\n *ngTemplateOutlet=\"customProfileDirective.templateRef\"\n ></ng-container>\n </ng-container>\n\n <ng-template #defaultProfile>\n <granite-contacts-profile\n data-fnd=\"default-profile\"\n [profileClass]=\"profileClass\"\n [profile]=\"
|
|
4267
|
-
}], propDecorators: { contacts: [{
|
|
4328
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #contactsTemplate>\n <div data-fnd=\"contacts\" [class]=\"contactsClass\" class=\"granite-contact\">\n <ng-container *ngIf=\"customProfileDirective; else defaultProfile\">\n <ng-container\n *ngTemplateOutlet=\"customProfileDirective.templateRef\"\n ></ng-container>\n </ng-container>\n\n <ng-template #defaultProfile>\n <granite-contacts-profile\n data-fnd=\"default-profile\"\n [profileClass]=\"profileClass\"\n [profile]=\"_profile\"\n ></granite-contacts-profile>\n </ng-template>\n\n <ul class=\"contact-list\">\n <li *ngFor=\"let contact of _contactsExtended\">\n <granite-contact-item\n [contact]=\"contact\"\n (selectedContact)=\"onSelectedContact($event)\"\n ></granite-contact-item>\n </li>\n </ul>\n </div>\n</ng-template>\n\n<ng-container *ngIf=\"defaultShow\">\n <ng-container *ngTemplateOutlet=\"contactsTemplate\"></ng-container>\n</ng-container>\n", styles: [".granite-contact{display:inline-block;font-size:var(--granite-font-size-body);font-family:var(--granite-font-family-default);color:var(--granite-color-text-weak);height:-moz-fit-content;height:fit-content;min-width:10rem;max-width:20rem;padding:var(--granite-spacing-16);box-shadow:var(--granite-shadow-popover);background:var(--granite-color-background-variant)}.granite-contact .contact-list{display:flex;flex-direction:column;align-items:flex-start;gap:var(--granite-spacing-8);list-style-type:none;padding:0;margin:0}\n"] }]
|
|
4329
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { contacts: [{
|
|
4268
4330
|
type: Input
|
|
4269
4331
|
}], contactsClass: [{
|
|
4270
4332
|
type: Input
|