@ifsworld/granite-components 12.3.0 → 12.3.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.
- package/esm2022/lib/contacts/contact-item/contact-item.component.mjs +2 -2
- package/esm2022/lib/contacts/contact-item-title/contact-item-title.component.mjs +2 -2
- package/esm2022/lib/contacts/contacts-profile/contacts-profile.component.mjs +3 -3
- package/esm2022/lib/progress-bar/progress-bar.component.mjs +3 -3
- package/fesm2022/ifsworld-granite-components.mjs +8 -8
- package/fesm2022/ifsworld-granite-components.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -12,13 +12,13 @@ export class GraniteContactItemComponent {
|
|
|
12
12
|
this.selectedContact.emit(selectedContact);
|
|
13
13
|
}
|
|
14
14
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteContactItemComponent, selector: "granite-contact-item", inputs: { contact: "contact" }, outputs: { selectedContact: "selectedContact" }, host: { classAttribute: "granite-contact-item" }, ngImport: i0, template: "<div class=\"contact-item\" [attr.data-fnd]=\"contact.name\">\n <div class=\"contact-item-main\">\n <ng-container\n *ngTemplateOutlet=\"\n contactItem;\n context: {\n contact: contact,\n testName: 'contact',\n selectedContactOutput: { contact }\n }\n \"\n ></ng-container>\n </div>\n\n <ul *ngIf=\"contact.options\" class=\"contact-item-options\">\n <li\n tabindex=\"0\"\n *ngFor=\"let option of contact.options; let i = index\"\n class=\"option-item\"\n [attr.data-fnd]=\"'contact-option-' + i\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n contactItem;\n context: {\n contact: option,\n testName: 'contact-option-' + i,\n selectedContactOutput: { contact: option, parent: contact }\n }\n \"\n ></ng-container>\n </li>\n </ul>\n</div>\n\n<ng-template\n let-testName=\"testName\"\n let-contact=\"contact\"\n let-selectedContactOutput=\"selectedContactOutput\"\n #contactItem\n>\n <granite-icon\n [attr.data-fnd]=\"testName + '-icon'\"\n fontIcon=\"{{ contact.iconName }}\"\n ></granite-icon>\n\n <granite-contact-item-title\n [attr.data-fnd]=\"testName + '-title'\"\n tabindex=\"0\"\n [contact]=\"contact\"\n [class.contact-item-disabled]=\"contact.options || contact.disabled\"\n (click)=\"emitSelectedContact(selectedContactOutput)\"\n ></granite-contact-item-title>\n\n <ng-container *ngIf=\"contact.statusTemplate; else defaultStatus\">\n <ng-container *ngTemplateOutlet=\"contact.statusTemplate\"></ng-container>\n </ng-container>\n\n <ng-template #defaultStatus>\n <granite-contact-item-default-status\n [attr.data-fnd]=\"testName + '-status'\"\n [status]=\"contact.status\"\n ></granite-contact-item-default-status>\n </ng-template>\n</ng-template>\n", styles: [".contact-item{display:flex;flex-direction:column;gap:var(--granite-spacing-8)}.contact-item-main{display:flex;gap:var(--granite-spacing-8);align-self:stretch;align-items:center}.contact-item-disabled{pointer-events:none}.contact-item-options{display:flex;flex-direction:column;padding-inline-start:var(--granite-spacing-24);gap:var(--granite-spacing-
|
|
15
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteContactItemComponent, selector: "granite-contact-item", inputs: { contact: "contact" }, outputs: { selectedContact: "selectedContact" }, host: { classAttribute: "granite-contact-item" }, ngImport: i0, template: "<div class=\"contact-item\" [attr.data-fnd]=\"contact.name\">\n <div class=\"contact-item-main\">\n <ng-container\n *ngTemplateOutlet=\"\n contactItem;\n context: {\n contact: contact,\n testName: 'contact',\n selectedContactOutput: { contact }\n }\n \"\n ></ng-container>\n </div>\n\n <ul *ngIf=\"contact.options\" class=\"contact-item-options\">\n <li\n tabindex=\"0\"\n *ngFor=\"let option of contact.options; let i = index\"\n class=\"option-item\"\n [attr.data-fnd]=\"'contact-option-' + i\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n contactItem;\n context: {\n contact: option,\n testName: 'contact-option-' + i,\n selectedContactOutput: { contact: option, parent: contact }\n }\n \"\n ></ng-container>\n </li>\n </ul>\n</div>\n\n<ng-template\n let-testName=\"testName\"\n let-contact=\"contact\"\n let-selectedContactOutput=\"selectedContactOutput\"\n #contactItem\n>\n <granite-icon\n [attr.data-fnd]=\"testName + '-icon'\"\n fontIcon=\"{{ contact.iconName }}\"\n ></granite-icon>\n\n <granite-contact-item-title\n [attr.data-fnd]=\"testName + '-title'\"\n tabindex=\"0\"\n [contact]=\"contact\"\n [class.contact-item-disabled]=\"contact.options || contact.disabled\"\n (click)=\"emitSelectedContact(selectedContactOutput)\"\n ></granite-contact-item-title>\n\n <ng-container *ngIf=\"contact.statusTemplate; else defaultStatus\">\n <ng-container *ngTemplateOutlet=\"contact.statusTemplate\"></ng-container>\n </ng-container>\n\n <ng-template #defaultStatus>\n <granite-contact-item-default-status\n [attr.data-fnd]=\"testName + '-status'\"\n [status]=\"contact.status\"\n ></granite-contact-item-default-status>\n </ng-template>\n</ng-template>\n", styles: [".contact-item{display:flex;flex-direction:column;gap:var(--granite-spacing-8)}.contact-item-main{display:flex;gap:var(--granite-spacing-8);align-self:stretch;align-items:center}.contact-item-disabled{pointer-events:none}.contact-item-options{display:flex;flex-direction:column;padding-inline-start:var(--granite-spacing-24);gap:var(--granite-spacing-8);list-style:none}.contact-item-options .option-item{display:flex;gap:var(--granite-spacing-8);align-self:stretch;align-items:center}.contact-item granite-contact-item-title,.contact-item granite-contact-item-default-status{display:flex}granite-icon{padding:0;color:var(--granite-color-text-hint);width:var(--granite-size-base-rem);height:var(--granite-size-base-rem)}\n"], dependencies: [{ kind: "component", type: i1.GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.ContactItemDefaultStatusComponent, selector: "granite-contact-item-default-status", inputs: ["status"] }, { kind: "component", type: i4.GraniteContactItemTitleComponent, selector: "granite-contact-item-title", inputs: ["contact"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
16
16
|
}
|
|
17
17
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactItemComponent, decorators: [{
|
|
18
18
|
type: Component,
|
|
19
19
|
args: [{ selector: 'granite-contact-item', host: {
|
|
20
20
|
class: 'granite-contact-item',
|
|
21
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"contact-item\" [attr.data-fnd]=\"contact.name\">\n <div class=\"contact-item-main\">\n <ng-container\n *ngTemplateOutlet=\"\n contactItem;\n context: {\n contact: contact,\n testName: 'contact',\n selectedContactOutput: { contact }\n }\n \"\n ></ng-container>\n </div>\n\n <ul *ngIf=\"contact.options\" class=\"contact-item-options\">\n <li\n tabindex=\"0\"\n *ngFor=\"let option of contact.options; let i = index\"\n class=\"option-item\"\n [attr.data-fnd]=\"'contact-option-' + i\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n contactItem;\n context: {\n contact: option,\n testName: 'contact-option-' + i,\n selectedContactOutput: { contact: option, parent: contact }\n }\n \"\n ></ng-container>\n </li>\n </ul>\n</div>\n\n<ng-template\n let-testName=\"testName\"\n let-contact=\"contact\"\n let-selectedContactOutput=\"selectedContactOutput\"\n #contactItem\n>\n <granite-icon\n [attr.data-fnd]=\"testName + '-icon'\"\n fontIcon=\"{{ contact.iconName }}\"\n ></granite-icon>\n\n <granite-contact-item-title\n [attr.data-fnd]=\"testName + '-title'\"\n tabindex=\"0\"\n [contact]=\"contact\"\n [class.contact-item-disabled]=\"contact.options || contact.disabled\"\n (click)=\"emitSelectedContact(selectedContactOutput)\"\n ></granite-contact-item-title>\n\n <ng-container *ngIf=\"contact.statusTemplate; else defaultStatus\">\n <ng-container *ngTemplateOutlet=\"contact.statusTemplate\"></ng-container>\n </ng-container>\n\n <ng-template #defaultStatus>\n <granite-contact-item-default-status\n [attr.data-fnd]=\"testName + '-status'\"\n [status]=\"contact.status\"\n ></granite-contact-item-default-status>\n </ng-template>\n</ng-template>\n", styles: [".contact-item{display:flex;flex-direction:column;gap:var(--granite-spacing-8)}.contact-item-main{display:flex;gap:var(--granite-spacing-8);align-self:stretch;align-items:center}.contact-item-disabled{pointer-events:none}.contact-item-options{display:flex;flex-direction:column;padding-inline-start:var(--granite-spacing-24);gap:var(--granite-spacing-
|
|
21
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"contact-item\" [attr.data-fnd]=\"contact.name\">\n <div class=\"contact-item-main\">\n <ng-container\n *ngTemplateOutlet=\"\n contactItem;\n context: {\n contact: contact,\n testName: 'contact',\n selectedContactOutput: { contact }\n }\n \"\n ></ng-container>\n </div>\n\n <ul *ngIf=\"contact.options\" class=\"contact-item-options\">\n <li\n tabindex=\"0\"\n *ngFor=\"let option of contact.options; let i = index\"\n class=\"option-item\"\n [attr.data-fnd]=\"'contact-option-' + i\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n contactItem;\n context: {\n contact: option,\n testName: 'contact-option-' + i,\n selectedContactOutput: { contact: option, parent: contact }\n }\n \"\n ></ng-container>\n </li>\n </ul>\n</div>\n\n<ng-template\n let-testName=\"testName\"\n let-contact=\"contact\"\n let-selectedContactOutput=\"selectedContactOutput\"\n #contactItem\n>\n <granite-icon\n [attr.data-fnd]=\"testName + '-icon'\"\n fontIcon=\"{{ contact.iconName }}\"\n ></granite-icon>\n\n <granite-contact-item-title\n [attr.data-fnd]=\"testName + '-title'\"\n tabindex=\"0\"\n [contact]=\"contact\"\n [class.contact-item-disabled]=\"contact.options || contact.disabled\"\n (click)=\"emitSelectedContact(selectedContactOutput)\"\n ></granite-contact-item-title>\n\n <ng-container *ngIf=\"contact.statusTemplate; else defaultStatus\">\n <ng-container *ngTemplateOutlet=\"contact.statusTemplate\"></ng-container>\n </ng-container>\n\n <ng-template #defaultStatus>\n <granite-contact-item-default-status\n [attr.data-fnd]=\"testName + '-status'\"\n [status]=\"contact.status\"\n ></granite-contact-item-default-status>\n </ng-template>\n</ng-template>\n", styles: [".contact-item{display:flex;flex-direction:column;gap:var(--granite-spacing-8)}.contact-item-main{display:flex;gap:var(--granite-spacing-8);align-self:stretch;align-items:center}.contact-item-disabled{pointer-events:none}.contact-item-options{display:flex;flex-direction:column;padding-inline-start:var(--granite-spacing-24);gap:var(--granite-spacing-8);list-style:none}.contact-item-options .option-item{display:flex;gap:var(--granite-spacing-8);align-self:stretch;align-items:center}.contact-item granite-contact-item-title,.contact-item granite-contact-item-default-status{display:flex}granite-icon{padding:0;color:var(--granite-color-text-hint);width:var(--granite-size-base-rem);height:var(--granite-size-base-rem)}\n"] }]
|
|
22
22
|
}], propDecorators: { contact: [{
|
|
23
23
|
type: Input
|
|
24
24
|
}], selectedContact: [{
|
|
@@ -2,13 +2,13 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
|
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
export class GraniteContactItemTitleComponent {
|
|
4
4
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactItemTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteContactItemTitleComponent, selector: "granite-contact-item-title", inputs: { contact: "contact" }, host: { classAttribute: "granite-contact-item-title" }, ngImport: i0, template: "<button\n tabindex=\"0\"\n data-fnd=\"contact-item-title\"\n [class.title-status-active]=\"!contact.disabled && !contact.options\"\n [class.title-status-disabled]=\"contact.disabled\"\n [class.title-status-parent]=\"!contact.disabled && contact.options\"\n>\n {{ contact.label }}\n</button>\n", styles: [".title-status-parent,.title-status-disabled,.title-status-active{font-size:var(--granite-font-size-
|
|
5
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteContactItemTitleComponent, selector: "granite-contact-item-title", inputs: { contact: "contact" }, host: { classAttribute: "granite-contact-item-title" }, ngImport: i0, template: "<button\n tabindex=\"0\"\n data-fnd=\"contact-item-title\"\n [class.title-status-active]=\"!contact.disabled && !contact.options\"\n [class.title-status-disabled]=\"contact.disabled\"\n [class.title-status-parent]=\"!contact.disabled && contact.options\"\n>\n {{ contact.label }}\n</button>\n", styles: [".title-status-parent,.title-status-disabled,.title-status-active{font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular)}.title-status-active{color:var(--granite-color-text-link)}.title-status-active:hover{text-decoration:underline;cursor:pointer}.title-status-disabled{color:var(--granite-color-text-hint)}.title-status-parent{color:var(--granite-color-text)}button{all:unset}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6
6
|
}
|
|
7
7
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactItemTitleComponent, decorators: [{
|
|
8
8
|
type: Component,
|
|
9
9
|
args: [{ selector: 'granite-contact-item-title', host: {
|
|
10
10
|
class: 'granite-contact-item-title',
|
|
11
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n tabindex=\"0\"\n data-fnd=\"contact-item-title\"\n [class.title-status-active]=\"!contact.disabled && !contact.options\"\n [class.title-status-disabled]=\"contact.disabled\"\n [class.title-status-parent]=\"!contact.disabled && contact.options\"\n>\n {{ contact.label }}\n</button>\n", styles: [".title-status-parent,.title-status-disabled,.title-status-active{font-size:var(--granite-font-size-
|
|
11
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n tabindex=\"0\"\n data-fnd=\"contact-item-title\"\n [class.title-status-active]=\"!contact.disabled && !contact.options\"\n [class.title-status-disabled]=\"contact.disabled\"\n [class.title-status-parent]=\"!contact.disabled && contact.options\"\n>\n {{ contact.label }}\n</button>\n", styles: [".title-status-parent,.title-status-disabled,.title-status-active{font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular)}.title-status-active{color:var(--granite-color-text-link)}.title-status-active:hover{text-decoration:underline;cursor:pointer}.title-status-disabled{color:var(--granite-color-text-hint)}.title-status-parent{color:var(--granite-color-text)}button{all:unset}\n"] }]
|
|
12
12
|
}], propDecorators: { contact: [{
|
|
13
13
|
type: Input
|
|
14
14
|
}] } });
|
|
@@ -12,16 +12,16 @@ 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 <img\n data-fnd=\"profile-avatar\"\n *ngIf=\"profile?.avatar; else noProfileAvatar\"\n [src]=\"profile?.avatar\"\n alt=\"profile avatar\"\n class=\"profile-avatar\"\n />\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>\n <p data-fnd=\"profile-info-names\" class=\"profile-
|
|
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 <img\n data-fnd=\"profile-avatar\"\n *ngIf=\"profile?.avatar; else noProfileAvatar\"\n [src]=\"profile?.avatar\"\n alt=\"profile avatar\"\n class=\"profile-avatar\"\n />\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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], 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 <img\n data-fnd=\"profile-avatar\"\n *ngIf=\"profile?.avatar; else noProfileAvatar\"\n [src]=\"profile?.avatar\"\n alt=\"profile avatar\"\n class=\"profile-avatar\"\n />\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>\n <p data-fnd=\"profile-info-names\" class=\"profile-
|
|
21
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"profileClass\" data-fnd=\"profile\" class=\"profile\">\n <img\n data-fnd=\"profile-avatar\"\n *ngIf=\"profile?.avatar; else noProfileAvatar\"\n [src]=\"profile?.avatar\"\n alt=\"profile avatar\"\n class=\"profile-avatar\"\n />\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"] }]
|
|
22
22
|
}], propDecorators: { profile: [{
|
|
23
23
|
type: Input
|
|
24
24
|
}], profileClass: [{
|
|
25
25
|
type: Input
|
|
26
26
|
}] } });
|
|
27
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
27
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udGFjdHMtcHJvZmlsZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2dyYW5pdGUtY29tcG9uZW50cy9zcmMvbGliL2NvbnRhY3RzL2NvbnRhY3RzLXByb2ZpbGUvY29udGFjdHMtcHJvZmlsZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2dyYW5pdGUtY29tcG9uZW50cy9zcmMvbGliL2NvbnRhY3RzL2NvbnRhY3RzLXByb2ZpbGUvY29udGFjdHMtcHJvZmlsZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxLQUFLLEdBR04sTUFBTSxlQUFlLENBQUM7OztBQVl2QixNQUFNLE9BQU8sK0JBQStCO0lBTTFDLFdBQVcsQ0FBQyxPQUFzQjtRQUNoQyxNQUFNLE9BQU8sR0FBRyxPQUFPLENBQUMsT0FBTyxFQUFFLFlBQVksQ0FBQztRQUM5QyxJQUFJLE9BQU8sSUFBSSxPQUFPLENBQUMsSUFBSSxJQUFJLE9BQU8sQ0FBQyxPQUFPLEVBQUUsQ0FBQztZQUMvQyxJQUFJLENBQUMscUJBQXFCLENBQUMsT0FBTyxDQUFDLElBQUksRUFBRSxPQUFPLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDNUQsQ0FBQztJQUNILENBQUM7SUFFTyxxQkFBcUIsQ0FBQyxJQUFZLEVBQUUsT0FBZTtRQUN6RCxJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQyxXQUFXLEVBQUUsR0FBRyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDcEUsQ0FBQzs4R0FmVSwrQkFBK0I7a0dBQS9CLCtCQUErQix5TUNsQjVDLGl6QkE0QkE7OzJGRFZhLCtCQUErQjtrQkFUM0MsU0FBUzsrQkFDRSwwQkFBMEIsUUFDOUI7d0JBQ0osS0FBSyxFQUFFLDBCQUEwQjtxQkFDbEMsbUJBR2dCLHVCQUF1QixDQUFDLE1BQU07OEJBR3RDLE9BQU87c0JBQWYsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgSW5wdXQsXG4gIE9uQ2hhbmdlcyxcbiAgU2ltcGxlQ2hhbmdlcyxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBQcm9maWxlIH0gZnJvbSAnLi4vY29udGFjdHMtdHlwZXMvY29udGFjdHMuY29tcG9uZW50LnB1YmxpYy10eXBlcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2dyYW5pdGUtY29udGFjdHMtcHJvZmlsZScsXG4gIGhvc3Q6IHtcbiAgICBjbGFzczogJ2dyYW5pdGUtY29udGFjdHMtcHJvZmlsZScsXG4gIH0sXG4gIHRlbXBsYXRlVXJsOiAnLi9jb250YWN0cy1wcm9maWxlLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vY29udGFjdHMtcHJvZmlsZS5jb21wb25lbnQuc2NzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgR3Jhbml0ZUNvbnRhY3RzUHJvZmlsZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XG4gIEBJbnB1dCgpIHByb2ZpbGU6IFByb2ZpbGU7XG4gIEBJbnB1dCgpIHByb2ZpbGVDbGFzcztcblxuICBfaW5pdGlhbHM6IHN0cmluZztcblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgY29uc3QgcHJvZmlsZSA9IGNoYW5nZXMucHJvZmlsZT8uY3VycmVudFZhbHVlO1xuICAgIGlmIChwcm9maWxlICYmIHByb2ZpbGUubmFtZSAmJiBwcm9maWxlLnN1cm5hbWUpIHtcbiAgICAgIHRoaXMuY3JlYXRlUHJvZmlsZUluaXRpYWxzKHByb2ZpbGUubmFtZSwgcHJvZmlsZS5zdXJuYW1lKTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIGNyZWF0ZVByb2ZpbGVJbml0aWFscyhuYW1lOiBzdHJpbmcsIHN1cm5hbWU6IHN0cmluZyk6IHZvaWQge1xuICAgIHRoaXMuX2luaXRpYWxzID0gbmFtZVswXS50b1VwcGVyQ2FzZSgpICsgc3VybmFtZVswXS50b1VwcGVyQ2FzZSgpO1xuICB9XG59XG4iLCI8ZGl2IFtjbGFzc109XCJwcm9maWxlQ2xhc3NcIiBkYXRhLWZuZD1cInByb2ZpbGVcIiBjbGFzcz1cInByb2ZpbGVcIj5cbiAgPGltZ1xuICAgIGRhdGEtZm5kPVwicHJvZmlsZS1hdmF0YXJcIlxuICAgICpuZ0lmPVwicHJvZmlsZT8uYXZhdGFyOyBlbHNlIG5vUHJvZmlsZUF2YXRhclwiXG4gICAgW3NyY109XCJwcm9maWxlPy5hdmF0YXJcIlxuICAgIGFsdD1cInByb2ZpbGUgYXZhdGFyXCJcbiAgICBjbGFzcz1cInByb2ZpbGUtYXZhdGFyXCJcbiAgLz5cblxuICA8bmctdGVtcGxhdGUgI25vUHJvZmlsZUF2YXRhcj5cbiAgICA8ZGl2IGNsYXNzPVwibm8tcHJvZmlsZS1hdmF0YXJcIj5cbiAgICAgIDxzcGFuXG4gICAgICAgIGRhdGEtZm5kPVwibm8tcHJvZmlsZS1hdmF0YXItaW5pdGlhbHNcIlxuICAgICAgICBjbGFzcz1cIm5vLXByb2ZpbGUtYXZhdGFyLWluaXRpYWxzXCJcbiAgICAgICAgPnt7IF9pbml0aWFscyB9fTwvc3BhblxuICAgICAgPlxuICAgIDwvZGl2PlxuICA8L25nLXRlbXBsYXRlPlxuXG4gIDxkaXYgY2xhc3M9XCJwcm9maWxlLWluZm9cIj5cbiAgICA8cCBkYXRhLWZuZD1cInByb2ZpbGUtaW5mby1uYW1lc1wiIGNsYXNzPVwicHJvZmlsZS1pbmZvLW5hbWVzXCI+XG4gICAgICB7eyBwcm9maWxlPy5uYW1lIH19IHt7IHByb2ZpbGU/LnN1cm5hbWUgfX1cbiAgICA8L3A+XG4gICAgPHAgZGF0YS1mbmQ9XCJwcm9maWxlLWluZm8tam9iLXRpdGxlXCIgY2xhc3M9XCJwcm9maWxlLWluZm8tam9iLXRpdGxlXCI+XG4gICAgICB7eyBwcm9maWxlPy5qb2JUaXRsZSB9fVxuICAgIDwvcD5cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==
|
|
@@ -65,11 +65,11 @@ export class GraniteProgressBarComponent {
|
|
|
65
65
|
}
|
|
66
66
|
}
|
|
67
67
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
68
|
-
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
|
|
68
|
+
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;height:.5rem;line-height:.5rem;box-sizing:border-box;border-radius:var(--granite-radius-s);font-size:.25rem}.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%}.progress-bar:last-child{justify-content:flex-end;text-align:end;padding-inline-end:var(--granite-spacing-16)}.progress-bar:first-child{justify-content:flex-start;text-align:start;padding-inline-start:var(--granite-spacing-16)}.legend-btn{width:16px;height:16px;margin-inline-start:var(--granite-spacing-16)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i4.GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }, { kind: "component", type: i5.GraniteButtonComponent, selector: "button[graniteButton],\n button[granitePrimaryButton],\n button[graniteFlatButton],\n button[graniteToolbarButton]\n ", inputs: ["disabled", "toggled"], exportAs: ["graniteButton"] }, { kind: "component", type: i6.GraniteProgressBarLegendComponent, selector: "granite-progress-bar-legend", inputs: ["legendItems"] }, { kind: "directive", type: i7.GraniteProgressBarLegendTriggerForDirective, selector: "[graniteProgressBarLegendTriggerFor]", inputs: ["graniteProgressBarLegendTriggerFor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
69
69
|
}
|
|
70
70
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarComponent, decorators: [{
|
|
71
71
|
type: Component,
|
|
72
|
-
args: [{ selector: 'granite-progress-bar', exportAs: 'graniteProgressBar', 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
|
|
72
|
+
args: [{ selector: 'granite-progress-bar', exportAs: 'graniteProgressBar', 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;height:.5rem;line-height:.5rem;box-sizing:border-box;border-radius:var(--granite-radius-s);font-size:.25rem}.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%}.progress-bar:last-child{justify-content:flex-end;text-align:end;padding-inline-end:var(--granite-spacing-16)}.progress-bar:first-child{justify-content:flex-start;text-align:start;padding-inline-start:var(--granite-spacing-16)}.legend-btn{width:16px;height:16px;margin-inline-start:var(--granite-spacing-16)}\n"] }]
|
|
73
73
|
}], propDecorators: { progressBarData: [{
|
|
74
74
|
type: Input
|
|
75
75
|
}], showLabel: [{
|
|
@@ -77,4 +77,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
77
77
|
}], showLegend: [{
|
|
78
78
|
type: Input
|
|
79
79
|
}] } });
|
|
80
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
80
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3MtYmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvZ3Jhbml0ZS1jb21wb25lbnRzL3NyYy9saWIvcHJvZ3Jlc3MtYmFyL3Byb2dyZXNzLWJhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2dyYW5pdGUtY29tcG9uZW50cy9zcmMvbGliL3Byb2dyZXNzLWJhci9wcm9ncmVzcy1iYXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsS0FBSyxHQUdOLE1BQU0sZUFBZSxDQUFDOzs7Ozs7Ozs7QUFhdkIsTUFBTSxPQUFPLDJCQUEyQjtJQVB4QztRQVNFLG9CQUFlLEdBQStCLEVBQUUsQ0FBQztRQUdqRCxjQUFTLEdBQVksS0FBSyxDQUFDO1FBRzNCLGVBQVUsR0FBWSxLQUFLLENBQUM7UUFFNUIsa0JBQWEsR0FBRyxHQUFHLENBQUM7UUFDcEIsdUJBQWtCLEdBQUcscUNBQXFDLENBQUM7UUFDM0Qsd0JBQW1CLEdBQUcsK0JBQStCLENBQUM7UUFDdEQsa0JBQWEsR0FBRyxzQkFBc0IsQ0FBQztRQUV2QyxVQUFLLEdBQVcsSUFBSSxDQUFDLGFBQWEsQ0FBQztRQUNuQyxnQkFBVyxHQUFxQyxFQUFFLENBQUM7S0E0RHBEO0lBMURDLGtCQUFrQjtRQUNoQixPQUFPLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLGtCQUFrQixDQUFDLENBQUM7SUFDbkQsQ0FBQztJQUVELFlBQVksQ0FBQyxLQUFhO1FBQ3hCLE9BQU8sS0FBSztZQUNWLENBQUMsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQztZQUN6QixDQUFDLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7SUFDM0MsQ0FBQztJQUVELGFBQWEsQ0FBQyxLQUFhO1FBQ3pCLE9BQU8sS0FBSztZQUNWLENBQUMsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQztZQUN6QixDQUFDLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsbUJBQW1CLENBQUMsQ0FBQztJQUNqRCxDQUFDO0lBRUQsV0FBVyxDQUFDLEtBQWE7UUFDdkIsT0FBTyxLQUFLLEVBQUUsVUFBVSxDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxPQUFPLEtBQUssR0FBRyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUM7SUFDbEUsQ0FBQztJQUVELFFBQVEsQ0FBQyxLQUFhO1FBQ3BCLE9BQU8sQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxHQUFHLEdBQUcsQ0FBQztJQUNwQyxDQUFDO0lBRUQsZ0JBQWdCLENBQUMsS0FBYTtRQUM1QixPQUFPLE1BQU0sQ0FBQyxLQUFLLENBQUMsR0FBRyxHQUFHLENBQUM7SUFDN0IsQ0FBQztJQUVELGVBQWU7UUFDYixNQUFNLG9CQUFvQixHQUFHLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztRQUNsRCxJQUFJLG9CQUFvQixHQUFHLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztZQUN0QyxJQUFJLENBQUMsS0FBSyxHQUFHLG9CQUFvQixDQUFDO1FBQ3BDLENBQUM7SUFDSCxDQUFDO0lBRUQsYUFBYTtRQUNYLE9BQU8sSUFBSSxDQUFDLGVBQWUsQ0FBQyxNQUFNLENBQUMsQ0FBQyxHQUFHLEVBQUUsSUFBSSxFQUFFLEVBQUUsQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLENBQUMsQ0FBQztJQUN6RSxDQUFDO0lBRUQsY0FBYztRQUNaLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDLGVBQWUsQ0FBQyxHQUFHLENBQ3pDLENBQUMsRUFBRSxLQUFLLEVBQUUsZUFBZSxFQUFFLEVBQUUsRUFBRTtZQUM3QixNQUFNLGVBQWUsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLGVBQWUsQ0FBQyxDQUFDO1lBQzVELE9BQU8sRUFBRSxLQUFLLEVBQUUsZUFBZSxFQUFFLGVBQWUsRUFBRSxDQUFDO1FBQ3JELENBQUMsQ0FDRixDQUFDO0lBQ0osQ0FBQztJQUVELFdBQVcsQ0FBQyxPQUFzQjtRQUNoQyxJQUNFLE9BQU8sQ0FBQyxlQUFlO1lBQ3ZCLElBQUksQ0FBQyxTQUFTLENBQUMsT0FBTyxDQUFDLGVBQWUsQ0FBQyxZQUFZLENBQUM7Z0JBQ2xELElBQUksQ0FBQyxTQUFTLENBQUMsT0FBTyxDQUFDLGVBQWUsQ0FBQyxhQUFhLENBQUMsRUFDdkQsQ0FBQztZQUNELElBQUksQ0FBQyxlQUFlLEVBQUUsQ0FBQztZQUN2QixJQUFJLENBQUMsY0FBYyxFQUFFLENBQUM7UUFDeEIsQ0FBQztJQUNILENBQUM7OEdBM0VVLDJCQUEyQjtrR0FBM0IsMkJBQTJCLHFOQ25CeEMsNi9CQWtDQTs7MkZEZmEsMkJBQTJCO2tCQVB2QyxTQUFTOytCQUNFLHNCQUFzQixZQUN0QixvQkFBb0IsbUJBR2IsdUJBQXVCLENBQUMsTUFBTTs4QkFJL0MsZUFBZTtzQkFEZCxLQUFLO2dCQUlOLFNBQVM7c0JBRFIsS0FBSztnQkFJTixVQUFVO3NCQURULEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBJbnB1dCxcbiAgT25DaGFuZ2VzLFxuICBTaW1wbGVDaGFuZ2VzLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7XG4gIEdyYW5pdGVQcm9ncmVzc0ludGVyZmFjZSxcbiAgR3Jhbml0ZVByb2dyZXNzTGVnZW5kSW50ZXJmYWNlLFxufSBmcm9tICcuL3Byb2dyZXNzLWJhci5tb2RlbCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2dyYW5pdGUtcHJvZ3Jlc3MtYmFyJyxcbiAgZXhwb3J0QXM6ICdncmFuaXRlUHJvZ3Jlc3NCYXInLFxuICB0ZW1wbGF0ZVVybDogJy4vcHJvZ3Jlc3MtYmFyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vcHJvZ3Jlc3MtYmFyLmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBHcmFuaXRlUHJvZ3Jlc3NCYXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xuICBASW5wdXQoKVxuICBwcm9ncmVzc0JhckRhdGE6IEdyYW5pdGVQcm9ncmVzc0ludGVyZmFjZVtdID0gW107XG5cbiAgQElucHV0KClcbiAgc2hvd0xhYmVsOiBib29sZWFuID0gZmFsc2U7XG5cbiAgQElucHV0KClcbiAgc2hvd0xlZ2VuZDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIERFRkFVTFRfVE9UQUwgPSAxMDA7XG4gIERFRkFVTFRfQkFDS0dST1VORCA9ICctLWdyYW5pdGUtY29sb3ItYmFja2dyb3VuZC1zZWxlY3RlZCc7XG4gIERFRkFVTFRfU1RBQ0tfQ09MT1IgPSAnLS1ncmFuaXRlLWNvbG9yLWNhdGVnb3JpY2FsLTMnO1xuICBERUZBVUxUX0NPTE9SID0gJy0tZ3Jhbml0ZS1jb2xvci10ZXh0JztcblxuICB0b3RhbDogbnVtYmVyID0gdGhpcy5ERUZBVUxUX1RPVEFMO1xuICBsZWdlbmRJdGVtczogR3Jhbml0ZVByb2dyZXNzTGVnZW5kSW50ZXJmYWNlW10gPSBbXTtcblxuICBnZXRCYWNrZ3JvdW5kQ29sb3IoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdGhpcy5nZXRDb2xvclZhcih0aGlzLkRFRkFVTFRfQkFDS0dST1VORCk7XG4gIH1cblxuICBnZXRGb250Q29sb3IoY29sb3I6IHN0cmluZyk6IHN0cmluZyB7XG4gICAgcmV0dXJuIGNvbG9yXG4gICAgICA/IHRoaXMuZ2V0Q29sb3JWYXIoY29sb3IpXG4gICAgICA6IHRoaXMuZ2V0Q29sb3JWYXIodGhpcy5ERUZBVUxUX0NPTE9SKTtcbiAgfVxuXG4gIGdldFN0YWNrQ29sb3IoY29sb3I6IHN0cmluZyk6IHN0cmluZyB7XG4gICAgcmV0dXJuIGNvbG9yXG4gICAgICA/IHRoaXMuZ2V0Q29sb3JWYXIoY29sb3IpXG4gICAgICA6IHRoaXMuZ2V0Q29sb3JWYXIodGhpcy5ERUZBVUxUX1NUQUNLX0NPTE9SKTtcbiAgfVxuXG4gIGdldENvbG9yVmFyKGNvbG9yOiBzdHJpbmcpOiBzdHJpbmcge1xuICAgIHJldHVybiBjb2xvcj8uc3RhcnRzV2l0aCgnLS1ncmFuaXRlJykgPyBgdmFyKCR7Y29sb3J9KWAgOiBjb2xvcjtcbiAgfVxuXG4gIGdldFdpZHRoKHZhbHVlOiBudW1iZXIpOiBudW1iZXIge1xuICAgIHJldHVybiAodmFsdWUgLyB0aGlzLnRvdGFsKSAqIDEwMDtcbiAgfVxuXG4gIGdldFN0cmluZ09mV2lkdGgod2lkdGg6IG51bWJlcik6IHN0cmluZyB7XG4gICAgcmV0dXJuIFN0cmluZyh3aWR0aCkgKyAnJSc7XG4gIH1cblxuICBjaGVja1N0YWNrVG90YWwoKTogdm9pZCB7XG4gICAgY29uc3QgdG90YWxPZlN0YWNrZWRWYWx1ZXMgPSB0aGlzLmdldFN0YWNrVG90YWwoKTtcbiAgICBpZiAodG90YWxPZlN0YWNrZWRWYWx1ZXMgPiB0aGlzLnRvdGFsKSB7XG4gICAgICB0aGlzLnRvdGFsID0gdG90YWxPZlN0YWNrZWRWYWx1ZXM7XG4gICAgfVxuICB9XG5cbiAgZ2V0U3RhY2tUb3RhbCgpOiBudW1iZXIge1xuICAgIHJldHVybiB0aGlzLnByb2dyZXNzQmFyRGF0YS5yZWR1Y2UoKGFjYywgY3VycikgPT4gYWNjICsgY3Vyci52YWx1ZSwgMCk7XG4gIH1cblxuICBzZXRMZWdlbmRJdGVtcygpOiB2b2lkIHtcbiAgICB0aGlzLmxlZ2VuZEl0ZW1zID0gdGhpcy5wcm9ncmVzc0JhckRhdGEubWFwKFxuICAgICAgKHsgbGFiZWwsIGJhY2tncm91bmRDb2xvciB9KSA9PiB7XG4gICAgICAgIGNvbnN0IGxlZ2VuZEl0ZW1Db2xvciA9IHRoaXMuZ2V0U3RhY2tDb2xvcihiYWNrZ3JvdW5kQ29sb3IpO1xuICAgICAgICByZXR1cm4geyBsYWJlbCwgYmFja2dyb3VuZENvbG9yOiBsZWdlbmRJdGVtQ29sb3IgfTtcbiAgICAgIH1cbiAgICApO1xuICB9XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgIGlmIChcbiAgICAgIGNoYW5nZXMucHJvZ3Jlc3NCYXJEYXRhICYmXG4gICAgICBKU09OLnN0cmluZ2lmeShjaGFuZ2VzLnByb2dyZXNzQmFyRGF0YS5jdXJyZW50VmFsdWUpICE9PVxuICAgICAgICBKU09OLnN0cmluZ2lmeShjaGFuZ2VzLnByb2dyZXNzQmFyRGF0YS5wcmV2aW91c1ZhbHVlKVxuICAgICkge1xuICAgICAgdGhpcy5jaGVja1N0YWNrVG90YWwoKTtcbiAgICAgIHRoaXMuc2V0TGVnZW5kSXRlbXMoKTtcbiAgICB9XG4gIH1cbn1cbiIsIjxkaXZcbiAgcm9sZT1cInByb2dyZXNzYmFyXCJcbiAgYXJpYS12YWx1ZW1pbj1cIjBcIlxuICBhcmlhLXZhbHVlbWF4PVwiMTAwXCJcbiAgY2xhc3M9XCJwcm9ncmVzc1wiXG4gIFtzdHlsZS5iYWNrZ3JvdW5kLWNvbG9yXT1cImdldEJhY2tncm91bmRDb2xvcigpXCJcbj5cbiAgPGRpdlxuICAgICpuZ0Zvcj1cImxldCBiYXIgb2YgcHJvZ3Jlc3NCYXJEYXRhOyBsZXQgaSA9IGluZGV4XCJcbiAgICBbc3R5bGUuYmFja2dyb3VuZC1jb2xvcl09XCJnZXRTdGFja0NvbG9yKGJhci5iYWNrZ3JvdW5kQ29sb3IpXCJcbiAgICBbc3R5bGUud2lkdGhdPVwiZ2V0U3RyaW5nT2ZXaWR0aChnZXRXaWR0aChiYXIudmFsdWUpKVwiXG4gICAgW3N0eWxlLmNvbG9yXT1cImdldEZvbnRDb2xvcihiYXIuZm9yZWdyb3VuZENvbG9yKVwiXG4gICAgW2dyYW5pdGVUb29sdGlwVHJpZ2dlckZvcl09XCJ0b29sdGlwXCJcbiAgICBjbGFzcz1cInByb2dyZXNzLWJhclwiXG4gID5cbiAgICA8bGFiZWwgKm5nSWY9XCJzaG93TGFiZWxcIiBncmFuaXRlSGlkZU9uT3ZlcmZsb3c+e3sgYmFyLnZhbHVlTGFiZWwgfX08L2xhYmVsPlxuICAgIDxncmFuaXRlLXRvb2x0aXAgI3Rvb2x0aXA+IHt7IGJhci52YWx1ZUxhYmVsIH19IDwvZ3Jhbml0ZS10b29sdGlwPlxuICA8L2Rpdj5cbjwvZGl2PlxuXG48bmctY29udGFpbmVyICpuZ0lmPVwic2hvd0xlZ2VuZFwiPlxuICA8YnV0dG9uXG4gICAgZ3Jhbml0ZUZsYXRCdXR0b25cbiAgICBbZ3Jhbml0ZVByb2dyZXNzQmFyTGVnZW5kVHJpZ2dlckZvcl09XCJsZWdlbmRcIlxuICAgIGNsYXNzPVwibGVnZW5kLWJ0blwiXG4gID5cbiAgICA8Z3Jhbml0ZS1pY29uIGZvbnRJY29uPVwiaWNvbi1jYXJldC1kb3duXCI+PC9ncmFuaXRlLWljb24+XG4gIDwvYnV0dG9uPlxuPC9uZy1jb250YWluZXI+XG5cbjxncmFuaXRlLXByb2dyZXNzLWJhci1sZWdlbmRcbiAgI2xlZ2VuZFxuICBbbGVnZW5kSXRlbXNdPVwibGVnZW5kSXRlbXNcIlxuPjwvZ3Jhbml0ZS1wcm9ncmVzcy1iYXItbGVnZW5kPlxuIl19
|
|
@@ -3993,13 +3993,13 @@ class GraniteContactsProfileComponent {
|
|
|
3993
3993
|
this._initials = name[0].toUpperCase() + surname[0].toUpperCase();
|
|
3994
3994
|
}
|
|
3995
3995
|
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 <img\n data-fnd=\"profile-avatar\"\n *ngIf=\"profile?.avatar; else noProfileAvatar\"\n [src]=\"profile?.avatar\"\n alt=\"profile avatar\"\n class=\"profile-avatar\"\n />\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>\n <p data-fnd=\"profile-info-names\" class=\"profile-
|
|
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 <img\n data-fnd=\"profile-avatar\"\n *ngIf=\"profile?.avatar; else noProfileAvatar\"\n [src]=\"profile?.avatar\"\n alt=\"profile avatar\"\n class=\"profile-avatar\"\n />\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: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3997
3997
|
}
|
|
3998
3998
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsProfileComponent, decorators: [{
|
|
3999
3999
|
type: Component,
|
|
4000
4000
|
args: [{ selector: 'granite-contacts-profile', host: {
|
|
4001
4001
|
class: 'granite-contacts-profile',
|
|
4002
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"profileClass\" data-fnd=\"profile\" class=\"profile\">\n <img\n data-fnd=\"profile-avatar\"\n *ngIf=\"profile?.avatar; else noProfileAvatar\"\n [src]=\"profile?.avatar\"\n alt=\"profile avatar\"\n class=\"profile-avatar\"\n />\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>\n <p data-fnd=\"profile-info-names\" class=\"profile-
|
|
4002
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"profileClass\" data-fnd=\"profile\" class=\"profile\">\n <img\n data-fnd=\"profile-avatar\"\n *ngIf=\"profile?.avatar; else noProfileAvatar\"\n [src]=\"profile?.avatar\"\n alt=\"profile avatar\"\n class=\"profile-avatar\"\n />\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
4003
|
}], propDecorators: { profile: [{
|
|
4004
4004
|
type: Input
|
|
4005
4005
|
}], profileClass: [{
|
|
@@ -4033,13 +4033,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
4033
4033
|
|
|
4034
4034
|
class GraniteContactItemTitleComponent {
|
|
4035
4035
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactItemTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4036
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteContactItemTitleComponent, selector: "granite-contact-item-title", inputs: { contact: "contact" }, host: { classAttribute: "granite-contact-item-title" }, ngImport: i0, template: "<button\n tabindex=\"0\"\n data-fnd=\"contact-item-title\"\n [class.title-status-active]=\"!contact.disabled && !contact.options\"\n [class.title-status-disabled]=\"contact.disabled\"\n [class.title-status-parent]=\"!contact.disabled && contact.options\"\n>\n {{ contact.label }}\n</button>\n", styles: [".title-status-parent,.title-status-disabled,.title-status-active{font-size:var(--granite-font-size-
|
|
4036
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteContactItemTitleComponent, selector: "granite-contact-item-title", inputs: { contact: "contact" }, host: { classAttribute: "granite-contact-item-title" }, ngImport: i0, template: "<button\n tabindex=\"0\"\n data-fnd=\"contact-item-title\"\n [class.title-status-active]=\"!contact.disabled && !contact.options\"\n [class.title-status-disabled]=\"contact.disabled\"\n [class.title-status-parent]=\"!contact.disabled && contact.options\"\n>\n {{ contact.label }}\n</button>\n", styles: [".title-status-parent,.title-status-disabled,.title-status-active{font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular)}.title-status-active{color:var(--granite-color-text-link)}.title-status-active:hover{text-decoration:underline;cursor:pointer}.title-status-disabled{color:var(--granite-color-text-hint)}.title-status-parent{color:var(--granite-color-text)}button{all:unset}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4037
4037
|
}
|
|
4038
4038
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactItemTitleComponent, decorators: [{
|
|
4039
4039
|
type: Component,
|
|
4040
4040
|
args: [{ selector: 'granite-contact-item-title', host: {
|
|
4041
4041
|
class: 'granite-contact-item-title',
|
|
4042
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n tabindex=\"0\"\n data-fnd=\"contact-item-title\"\n [class.title-status-active]=\"!contact.disabled && !contact.options\"\n [class.title-status-disabled]=\"contact.disabled\"\n [class.title-status-parent]=\"!contact.disabled && contact.options\"\n>\n {{ contact.label }}\n</button>\n", styles: [".title-status-parent,.title-status-disabled,.title-status-active{font-size:var(--granite-font-size-
|
|
4042
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n tabindex=\"0\"\n data-fnd=\"contact-item-title\"\n [class.title-status-active]=\"!contact.disabled && !contact.options\"\n [class.title-status-disabled]=\"contact.disabled\"\n [class.title-status-parent]=\"!contact.disabled && contact.options\"\n>\n {{ contact.label }}\n</button>\n", styles: [".title-status-parent,.title-status-disabled,.title-status-active{font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular)}.title-status-active{color:var(--granite-color-text-link)}.title-status-active:hover{text-decoration:underline;cursor:pointer}.title-status-disabled{color:var(--granite-color-text-hint)}.title-status-parent{color:var(--granite-color-text)}button{all:unset}\n"] }]
|
|
4043
4043
|
}], propDecorators: { contact: [{
|
|
4044
4044
|
type: Input
|
|
4045
4045
|
}] } });
|
|
@@ -4052,13 +4052,13 @@ class GraniteContactItemComponent {
|
|
|
4052
4052
|
this.selectedContact.emit(selectedContact);
|
|
4053
4053
|
}
|
|
4054
4054
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4055
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteContactItemComponent, selector: "granite-contact-item", inputs: { contact: "contact" }, outputs: { selectedContact: "selectedContact" }, host: { classAttribute: "granite-contact-item" }, ngImport: i0, template: "<div class=\"contact-item\" [attr.data-fnd]=\"contact.name\">\n <div class=\"contact-item-main\">\n <ng-container\n *ngTemplateOutlet=\"\n contactItem;\n context: {\n contact: contact,\n testName: 'contact',\n selectedContactOutput: { contact }\n }\n \"\n ></ng-container>\n </div>\n\n <ul *ngIf=\"contact.options\" class=\"contact-item-options\">\n <li\n tabindex=\"0\"\n *ngFor=\"let option of contact.options; let i = index\"\n class=\"option-item\"\n [attr.data-fnd]=\"'contact-option-' + i\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n contactItem;\n context: {\n contact: option,\n testName: 'contact-option-' + i,\n selectedContactOutput: { contact: option, parent: contact }\n }\n \"\n ></ng-container>\n </li>\n </ul>\n</div>\n\n<ng-template\n let-testName=\"testName\"\n let-contact=\"contact\"\n let-selectedContactOutput=\"selectedContactOutput\"\n #contactItem\n>\n <granite-icon\n [attr.data-fnd]=\"testName + '-icon'\"\n fontIcon=\"{{ contact.iconName }}\"\n ></granite-icon>\n\n <granite-contact-item-title\n [attr.data-fnd]=\"testName + '-title'\"\n tabindex=\"0\"\n [contact]=\"contact\"\n [class.contact-item-disabled]=\"contact.options || contact.disabled\"\n (click)=\"emitSelectedContact(selectedContactOutput)\"\n ></granite-contact-item-title>\n\n <ng-container *ngIf=\"contact.statusTemplate; else defaultStatus\">\n <ng-container *ngTemplateOutlet=\"contact.statusTemplate\"></ng-container>\n </ng-container>\n\n <ng-template #defaultStatus>\n <granite-contact-item-default-status\n [attr.data-fnd]=\"testName + '-status'\"\n [status]=\"contact.status\"\n ></granite-contact-item-default-status>\n </ng-template>\n</ng-template>\n", styles: [".contact-item{display:flex;flex-direction:column;gap:var(--granite-spacing-8)}.contact-item-main{display:flex;gap:var(--granite-spacing-8);align-self:stretch;align-items:center}.contact-item-disabled{pointer-events:none}.contact-item-options{display:flex;flex-direction:column;padding-inline-start:var(--granite-spacing-24);gap:var(--granite-spacing-
|
|
4055
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteContactItemComponent, selector: "granite-contact-item", inputs: { contact: "contact" }, outputs: { selectedContact: "selectedContact" }, host: { classAttribute: "granite-contact-item" }, ngImport: i0, template: "<div class=\"contact-item\" [attr.data-fnd]=\"contact.name\">\n <div class=\"contact-item-main\">\n <ng-container\n *ngTemplateOutlet=\"\n contactItem;\n context: {\n contact: contact,\n testName: 'contact',\n selectedContactOutput: { contact }\n }\n \"\n ></ng-container>\n </div>\n\n <ul *ngIf=\"contact.options\" class=\"contact-item-options\">\n <li\n tabindex=\"0\"\n *ngFor=\"let option of contact.options; let i = index\"\n class=\"option-item\"\n [attr.data-fnd]=\"'contact-option-' + i\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n contactItem;\n context: {\n contact: option,\n testName: 'contact-option-' + i,\n selectedContactOutput: { contact: option, parent: contact }\n }\n \"\n ></ng-container>\n </li>\n </ul>\n</div>\n\n<ng-template\n let-testName=\"testName\"\n let-contact=\"contact\"\n let-selectedContactOutput=\"selectedContactOutput\"\n #contactItem\n>\n <granite-icon\n [attr.data-fnd]=\"testName + '-icon'\"\n fontIcon=\"{{ contact.iconName }}\"\n ></granite-icon>\n\n <granite-contact-item-title\n [attr.data-fnd]=\"testName + '-title'\"\n tabindex=\"0\"\n [contact]=\"contact\"\n [class.contact-item-disabled]=\"contact.options || contact.disabled\"\n (click)=\"emitSelectedContact(selectedContactOutput)\"\n ></granite-contact-item-title>\n\n <ng-container *ngIf=\"contact.statusTemplate; else defaultStatus\">\n <ng-container *ngTemplateOutlet=\"contact.statusTemplate\"></ng-container>\n </ng-container>\n\n <ng-template #defaultStatus>\n <granite-contact-item-default-status\n [attr.data-fnd]=\"testName + '-status'\"\n [status]=\"contact.status\"\n ></granite-contact-item-default-status>\n </ng-template>\n</ng-template>\n", styles: [".contact-item{display:flex;flex-direction:column;gap:var(--granite-spacing-8)}.contact-item-main{display:flex;gap:var(--granite-spacing-8);align-self:stretch;align-items:center}.contact-item-disabled{pointer-events:none}.contact-item-options{display:flex;flex-direction:column;padding-inline-start:var(--granite-spacing-24);gap:var(--granite-spacing-8);list-style:none}.contact-item-options .option-item{display:flex;gap:var(--granite-spacing-8);align-self:stretch;align-items:center}.contact-item granite-contact-item-title,.contact-item granite-contact-item-default-status{display:flex}granite-icon{padding:0;color:var(--granite-color-text-hint);width:var(--granite-size-base-rem);height:var(--granite-size-base-rem)}\n"], dependencies: [{ kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }, { 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: ContactItemDefaultStatusComponent, selector: "granite-contact-item-default-status", inputs: ["status"] }, { kind: "component", type: GraniteContactItemTitleComponent, selector: "granite-contact-item-title", inputs: ["contact"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4056
4056
|
}
|
|
4057
4057
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactItemComponent, decorators: [{
|
|
4058
4058
|
type: Component,
|
|
4059
4059
|
args: [{ selector: 'granite-contact-item', host: {
|
|
4060
4060
|
class: 'granite-contact-item',
|
|
4061
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"contact-item\" [attr.data-fnd]=\"contact.name\">\n <div class=\"contact-item-main\">\n <ng-container\n *ngTemplateOutlet=\"\n contactItem;\n context: {\n contact: contact,\n testName: 'contact',\n selectedContactOutput: { contact }\n }\n \"\n ></ng-container>\n </div>\n\n <ul *ngIf=\"contact.options\" class=\"contact-item-options\">\n <li\n tabindex=\"0\"\n *ngFor=\"let option of contact.options; let i = index\"\n class=\"option-item\"\n [attr.data-fnd]=\"'contact-option-' + i\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n contactItem;\n context: {\n contact: option,\n testName: 'contact-option-' + i,\n selectedContactOutput: { contact: option, parent: contact }\n }\n \"\n ></ng-container>\n </li>\n </ul>\n</div>\n\n<ng-template\n let-testName=\"testName\"\n let-contact=\"contact\"\n let-selectedContactOutput=\"selectedContactOutput\"\n #contactItem\n>\n <granite-icon\n [attr.data-fnd]=\"testName + '-icon'\"\n fontIcon=\"{{ contact.iconName }}\"\n ></granite-icon>\n\n <granite-contact-item-title\n [attr.data-fnd]=\"testName + '-title'\"\n tabindex=\"0\"\n [contact]=\"contact\"\n [class.contact-item-disabled]=\"contact.options || contact.disabled\"\n (click)=\"emitSelectedContact(selectedContactOutput)\"\n ></granite-contact-item-title>\n\n <ng-container *ngIf=\"contact.statusTemplate; else defaultStatus\">\n <ng-container *ngTemplateOutlet=\"contact.statusTemplate\"></ng-container>\n </ng-container>\n\n <ng-template #defaultStatus>\n <granite-contact-item-default-status\n [attr.data-fnd]=\"testName + '-status'\"\n [status]=\"contact.status\"\n ></granite-contact-item-default-status>\n </ng-template>\n</ng-template>\n", styles: [".contact-item{display:flex;flex-direction:column;gap:var(--granite-spacing-8)}.contact-item-main{display:flex;gap:var(--granite-spacing-8);align-self:stretch;align-items:center}.contact-item-disabled{pointer-events:none}.contact-item-options{display:flex;flex-direction:column;padding-inline-start:var(--granite-spacing-24);gap:var(--granite-spacing-
|
|
4061
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"contact-item\" [attr.data-fnd]=\"contact.name\">\n <div class=\"contact-item-main\">\n <ng-container\n *ngTemplateOutlet=\"\n contactItem;\n context: {\n contact: contact,\n testName: 'contact',\n selectedContactOutput: { contact }\n }\n \"\n ></ng-container>\n </div>\n\n <ul *ngIf=\"contact.options\" class=\"contact-item-options\">\n <li\n tabindex=\"0\"\n *ngFor=\"let option of contact.options; let i = index\"\n class=\"option-item\"\n [attr.data-fnd]=\"'contact-option-' + i\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n contactItem;\n context: {\n contact: option,\n testName: 'contact-option-' + i,\n selectedContactOutput: { contact: option, parent: contact }\n }\n \"\n ></ng-container>\n </li>\n </ul>\n</div>\n\n<ng-template\n let-testName=\"testName\"\n let-contact=\"contact\"\n let-selectedContactOutput=\"selectedContactOutput\"\n #contactItem\n>\n <granite-icon\n [attr.data-fnd]=\"testName + '-icon'\"\n fontIcon=\"{{ contact.iconName }}\"\n ></granite-icon>\n\n <granite-contact-item-title\n [attr.data-fnd]=\"testName + '-title'\"\n tabindex=\"0\"\n [contact]=\"contact\"\n [class.contact-item-disabled]=\"contact.options || contact.disabled\"\n (click)=\"emitSelectedContact(selectedContactOutput)\"\n ></granite-contact-item-title>\n\n <ng-container *ngIf=\"contact.statusTemplate; else defaultStatus\">\n <ng-container *ngTemplateOutlet=\"contact.statusTemplate\"></ng-container>\n </ng-container>\n\n <ng-template #defaultStatus>\n <granite-contact-item-default-status\n [attr.data-fnd]=\"testName + '-status'\"\n [status]=\"contact.status\"\n ></granite-contact-item-default-status>\n </ng-template>\n</ng-template>\n", styles: [".contact-item{display:flex;flex-direction:column;gap:var(--granite-spacing-8)}.contact-item-main{display:flex;gap:var(--granite-spacing-8);align-self:stretch;align-items:center}.contact-item-disabled{pointer-events:none}.contact-item-options{display:flex;flex-direction:column;padding-inline-start:var(--granite-spacing-24);gap:var(--granite-spacing-8);list-style:none}.contact-item-options .option-item{display:flex;gap:var(--granite-spacing-8);align-self:stretch;align-items:center}.contact-item granite-contact-item-title,.contact-item granite-contact-item-default-status{display:flex}granite-icon{padding:0;color:var(--granite-color-text-hint);width:var(--granite-size-base-rem);height:var(--granite-size-base-rem)}\n"] }]
|
|
4062
4062
|
}], propDecorators: { contact: [{
|
|
4063
4063
|
type: Input
|
|
4064
4064
|
}], selectedContact: [{
|
|
@@ -4735,11 +4735,11 @@ class GraniteProgressBarComponent {
|
|
|
4735
4735
|
}
|
|
4736
4736
|
}
|
|
4737
4737
|
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
|
|
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;height:.5rem;line-height:.5rem;box-sizing:border-box;border-radius:var(--granite-radius-s);font-size:.25rem}.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%}.progress-bar:last-child{justify-content:flex-end;text-align:end;padding-inline-end:var(--granite-spacing-16)}.progress-bar:first-child{justify-content:flex-start;text-align:start;padding-inline-start:var(--granite-spacing-16)}.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
4739
|
}
|
|
4740
4740
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarComponent, decorators: [{
|
|
4741
4741
|
type: Component,
|
|
4742
|
-
args: [{ selector: 'granite-progress-bar', exportAs: 'graniteProgressBar', 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
|
|
4742
|
+
args: [{ selector: 'granite-progress-bar', exportAs: 'graniteProgressBar', 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;height:.5rem;line-height:.5rem;box-sizing:border-box;border-radius:var(--granite-radius-s);font-size:.25rem}.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%}.progress-bar:last-child{justify-content:flex-end;text-align:end;padding-inline-end:var(--granite-spacing-16)}.progress-bar:first-child{justify-content:flex-start;text-align:start;padding-inline-start:var(--granite-spacing-16)}.legend-btn{width:16px;height:16px;margin-inline-start:var(--granite-spacing-16)}\n"] }]
|
|
4743
4743
|
}], propDecorators: { progressBarData: [{
|
|
4744
4744
|
type: Input
|
|
4745
4745
|
}], showLabel: [{
|