@ifsworld/granite-components 12.2.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/index.mjs +2 -1
- 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-legend/progress-bar-legend.component.mjs +19 -0
- package/esm2022/lib/progress-bar/progress-bar-legend-base.mjs +20 -0
- package/esm2022/lib/progress-bar/progress-bar-legend-trigger-for.directive.mjs +191 -0
- package/esm2022/lib/progress-bar/progress-bar.component.mjs +18 -3
- package/esm2022/lib/progress-bar/progress-bar.model.mjs +2 -0
- package/esm2022/lib/progress-bar/progress-bar.module.mjs +29 -5
- package/fesm2022/ifsworld-granite-components.mjs +271 -27
- package/fesm2022/ifsworld-granite-components.mjs.map +1 -1
- package/index.d.ts +1 -0
- package/lib/progress-bar/progress-bar-legend/progress-bar-legend.component.d.ts +8 -0
- package/lib/progress-bar/progress-bar-legend-base.d.ts +17 -0
- package/lib/progress-bar/progress-bar-legend-trigger-for.directive.d.ts +41 -0
- package/lib/progress-bar/progress-bar.component.d.ts +5 -8
- package/lib/progress-bar/progress-bar.model.d.ts +11 -0
- package/lib/progress-bar/progress-bar.module.d.ts +8 -4
- package/package.json +7 -7
|
@@ -13,13 +13,13 @@ import { trigger, state, style, transition, group, query, animate, sequence } fr
|
|
|
13
13
|
import * as i1 from '@angular/cdk/a11y';
|
|
14
14
|
import { FocusKeyManager, isFakeMousedownFromScreenReader } from '@angular/cdk/a11y';
|
|
15
15
|
import { hasModifierKey, SPACE, BACKSPACE, DELETE, ENTER, TAB } from '@angular/cdk/keycodes';
|
|
16
|
-
import * as
|
|
16
|
+
import * as i2 from '@angular/cdk/bidi';
|
|
17
17
|
import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
|
|
18
|
-
import * as i2 from '@angular/cdk/collections';
|
|
18
|
+
import * as i2$1 from '@angular/cdk/collections';
|
|
19
19
|
import { SelectionModel } from '@angular/cdk/collections';
|
|
20
|
-
import * as i2$
|
|
20
|
+
import * as i2$2 from '@angular/forms';
|
|
21
21
|
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
22
|
-
import * as i3
|
|
22
|
+
import * as i3 from '@ifsworld/granite-components/tooltip';
|
|
23
23
|
import { GraniteTooltipModule } from '@ifsworld/granite-components/tooltip';
|
|
24
24
|
|
|
25
25
|
class GraniteArrangeGridItemComponent {
|
|
@@ -1923,7 +1923,7 @@ class GraniteMenuTriggerForDirective {
|
|
|
1923
1923
|
? offset + target
|
|
1924
1924
|
: target * (-Math.pow(2, (-10 * current) / end) + 1) + offset;
|
|
1925
1925
|
}
|
|
1926
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteMenuTriggerForDirective, deps: [{ token: i1$2.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: GRANITE_MENU_PANEL, optional: true }, { token: GRANITE_CLIENT_INPUT, optional: true }, { token: GRANITE_CLIENT_OUTPUT, optional: true }, { token: GraniteMenuItemComponent, optional: true, self: true }, { token:
|
|
1926
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteMenuTriggerForDirective, deps: [{ token: i1$2.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: GRANITE_MENU_PANEL, optional: true }, { token: GRANITE_CLIENT_INPUT, optional: true }, { token: GRANITE_CLIENT_OUTPUT, optional: true }, { token: GraniteMenuItemComponent, optional: true, self: true }, { token: i2.Directionality, optional: true }, { token: i1.FocusMonitor }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1927
1927
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: GraniteMenuTriggerForDirective, selector: "[graniteMenuTriggerFor]", inputs: { menu: ["graniteMenuTriggerFor", "menu"], openOnClick: "openOnClick" }, host: { attributes: { "aria-haspopup": "true" }, listeners: { "mousedown": "_handleMousedown($event)", "keydown": "_handleKeydown($event)", "click": "_handleClick($event)" }, properties: { "attr.aria-expanded": "isMenuOpened || null", "attr.aria-controls": "isMenuOpened ? menu.panelId : null" }, classAttribute: "granite-menu-trigger" }, exportAs: ["graniteMenuTriggerFor"], usesOnChanges: true, ngImport: i0 }); }
|
|
1928
1928
|
}
|
|
1929
1929
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteMenuTriggerForDirective, decorators: [{
|
|
@@ -1960,7 +1960,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
1960
1960
|
type: Optional
|
|
1961
1961
|
}, {
|
|
1962
1962
|
type: Self
|
|
1963
|
-
}] }, { type:
|
|
1963
|
+
}] }, { type: i2.Directionality, decorators: [{
|
|
1964
1964
|
type: Optional
|
|
1965
1965
|
}] }, { type: i1.FocusMonitor }, { type: undefined, decorators: [{
|
|
1966
1966
|
type: Inject,
|
|
@@ -2348,7 +2348,7 @@ class GraniteRadioButtonComponent {
|
|
|
2348
2348
|
_getInputElement() {
|
|
2349
2349
|
return this._inputElement.nativeElement;
|
|
2350
2350
|
}
|
|
2351
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteRadioButtonComponent, deps: [{ token: i1.FocusMonitor }, { token: i2.UniqueSelectionDispatcher }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2351
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteRadioButtonComponent, deps: [{ token: i1.FocusMonitor }, { token: i2$1.UniqueSelectionDispatcher }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2352
2352
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteRadioButtonComponent, selector: "granite-radio-button", inputs: { value: "value", id: "id", name: "name", checked: "checked", required: "required", disabled: "disabled", readonly: "readonly", labelPosition: "labelPosition", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { radioChange: "radioChange", radioBlur: "radioBlur" }, host: { properties: { "class.granite-radio-button-disabled": "disabled", "class.granite-radio-button-label-before": "_positionBefore", "class.granite-radio-button-checked": "checked", "class.granite-radio-button-readonly": "readonly" }, classAttribute: "granite-radio-button" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["graniteRadioButton"], usesOnChanges: true, ngImport: i0, template: "<label class=\"granite-radio-button-label\">\n <div class=\"granite-radio-button-outer-circle\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-radio-button-input cdk-visually-hidden\"\n type=\"radio\"\n [attr.name]=\"name\"\n [disabled]=\"_radioDisabled\"\n [checked]=\"checked\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-checked]=\"checked.toString()\"\n [value]=\"value\"\n (change)=\"_radioChange($event.target)\"\n (blur)=\"_onBlur()\"\n />\n <div class=\"granite-radio-button-inner-circle\"></div>\n </div>\n <span class=\"granite-radio-button-text\">\n <ng-content></ng-content>\n </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(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-outer-circle:focus-within{border:.0625rem solid var(--granite-color-focus)}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-outer-circle .granite-radio-button-label:hover{cursor:pointer}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-outer-circle .granite-radio-button-label:hover .granite-radio-button-outer-circle{border-color:var(--granite-color-background-active-hover)}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-outer-circle .granite-radio-button-label:hover .granite-radio-button-inner-circle{background-color:var(--granite-color-background-active-hover)}:host(.granite-radio-button-label-before) .granite-radio-button-label{flex-direction:row-reverse}:host(.granite-radio-button-label-before) .granite-radio-button-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-8)}:host(.granite-radio-button-checked) .granite-radio-button-inner-circle{visibility:visible;animation:grow-animation .1s}:host(.granite-radio-button-checked) .granite-radio-button-outer-circle{border-color:var(--granite-color-background-active)}:host(.granite-radio-button-checked).granite-radio-button-disabled .granite-radio-button-inner-circle{background-color:var(--granite-color-text)}:host(.granite-radio-button-checked).granite-radio-button-disabled .granite-radio-button-outer-circle{border:.0625rem solid var(--granite-color-text);background-color:transparent}:host(.granite-radio-button-checked).granite-radio-button-readonly .granite-radio-button-inner-circle{background-color:var(--granite-color-text)}:host(.granite-radio-button-checked).granite-radio-button-readonly .granite-radio-button-outer-circle{border:.0625rem solid var(--granite-color-text)}.granite-radio-button-text{padding-inline-start:var(--granite-spacing-8);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small)}.granite-radio-button-text:empty{display:none}.granite-radio-button-label{display:flex;align-items:center;width:max-content;margin-inline-end:var(--granite-spacing-32);margin-block-end:var(--granite-spacing-4)}:host(.granite-radio-button-disabled) .granite-radio-button-text{opacity:.6}:host(.granite-radio-button-disabled) .granite-radio-button-outer-circle{opacity:.3;background-color:var(--granite-color-border-soft)}.granite-radio-button-outer-circle{height:1rem;width:1rem;border-radius:50%;box-sizing:border-box;border:.0625rem solid var(--granite-color-border-hard);display:flex;justify-content:center;position:relative;align-items:center}.granite-radio-button-inner-circle{width:.625rem;height:.625rem;visibility:hidden;position:absolute;border-radius:50%;background-color:var(--granite-color-background-active);margin:auto}@keyframes grow-animation{0%{transform:scale(0)}to{transform:scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2353
2353
|
}
|
|
2354
2354
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteRadioButtonComponent, decorators: [{
|
|
@@ -2360,7 +2360,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
2360
2360
|
'[class.granite-radio-button-checked]': 'checked',
|
|
2361
2361
|
'[class.granite-radio-button-readonly]': 'readonly',
|
|
2362
2362
|
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"granite-radio-button-label\">\n <div class=\"granite-radio-button-outer-circle\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-radio-button-input cdk-visually-hidden\"\n type=\"radio\"\n [attr.name]=\"name\"\n [disabled]=\"_radioDisabled\"\n [checked]=\"checked\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-checked]=\"checked.toString()\"\n [value]=\"value\"\n (change)=\"_radioChange($event.target)\"\n (blur)=\"_onBlur()\"\n />\n <div class=\"granite-radio-button-inner-circle\"></div>\n </div>\n <span class=\"granite-radio-button-text\">\n <ng-content></ng-content>\n </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(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-outer-circle:focus-within{border:.0625rem solid var(--granite-color-focus)}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-outer-circle .granite-radio-button-label:hover{cursor:pointer}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-outer-circle .granite-radio-button-label:hover .granite-radio-button-outer-circle{border-color:var(--granite-color-background-active-hover)}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-outer-circle .granite-radio-button-label:hover .granite-radio-button-inner-circle{background-color:var(--granite-color-background-active-hover)}:host(.granite-radio-button-label-before) .granite-radio-button-label{flex-direction:row-reverse}:host(.granite-radio-button-label-before) .granite-radio-button-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-8)}:host(.granite-radio-button-checked) .granite-radio-button-inner-circle{visibility:visible;animation:grow-animation .1s}:host(.granite-radio-button-checked) .granite-radio-button-outer-circle{border-color:var(--granite-color-background-active)}:host(.granite-radio-button-checked).granite-radio-button-disabled .granite-radio-button-inner-circle{background-color:var(--granite-color-text)}:host(.granite-radio-button-checked).granite-radio-button-disabled .granite-radio-button-outer-circle{border:.0625rem solid var(--granite-color-text);background-color:transparent}:host(.granite-radio-button-checked).granite-radio-button-readonly .granite-radio-button-inner-circle{background-color:var(--granite-color-text)}:host(.granite-radio-button-checked).granite-radio-button-readonly .granite-radio-button-outer-circle{border:.0625rem solid var(--granite-color-text)}.granite-radio-button-text{padding-inline-start:var(--granite-spacing-8);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small)}.granite-radio-button-text:empty{display:none}.granite-radio-button-label{display:flex;align-items:center;width:max-content;margin-inline-end:var(--granite-spacing-32);margin-block-end:var(--granite-spacing-4)}:host(.granite-radio-button-disabled) .granite-radio-button-text{opacity:.6}:host(.granite-radio-button-disabled) .granite-radio-button-outer-circle{opacity:.3;background-color:var(--granite-color-border-soft)}.granite-radio-button-outer-circle{height:1rem;width:1rem;border-radius:50%;box-sizing:border-box;border:.0625rem solid var(--granite-color-border-hard);display:flex;justify-content:center;position:relative;align-items:center}.granite-radio-button-inner-circle{width:.625rem;height:.625rem;visibility:hidden;position:absolute;border-radius:50%;background-color:var(--granite-color-background-active);margin:auto}@keyframes grow-animation{0%{transform:scale(0)}to{transform:scale(1)}}\n"] }]
|
|
2363
|
-
}], ctorParameters: () => [{ type: i1.FocusMonitor }, { type: i2.UniqueSelectionDispatcher }], propDecorators: { value: [{
|
|
2363
|
+
}], ctorParameters: () => [{ type: i1.FocusMonitor }, { type: i2$1.UniqueSelectionDispatcher }], propDecorators: { value: [{
|
|
2364
2364
|
type: Input
|
|
2365
2365
|
}], id: [{
|
|
2366
2366
|
type: Input
|
|
@@ -3618,7 +3618,7 @@ class GraniteChipListComponent extends GraniteChipListBase {
|
|
|
3618
3618
|
});
|
|
3619
3619
|
}
|
|
3620
3620
|
}
|
|
3621
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteChipListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token:
|
|
3621
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteChipListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2.Directionality, optional: true }, { token: i2$2.NgForm, optional: true }, { token: i2$2.FormGroupDirective, optional: true }, { token: i2$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3622
3622
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteChipListComponent, selector: "granite-chip-list", inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaOrientation: ["aria-orientation", "ariaOrientation"], role: "role", multiselect: "multiselect", disabled: "disabled", selectable: "selectable", tabindex: "tabindex" }, host: { listeners: { "focus": "focus()", "blur": "_blur()", "keydown": "_keydown($event)" }, properties: { "class.granite-chip-list-disabled": "disabled", "attr.tabindex": "disabled ? null : _tabIndex", "attr.role": "role", "attr.aria-label": "ariaLabel", "attr.aria-labelledby": "ariaLabelledby", "attr.aria-disabled": "disabled.toString()", "attr.aria-multiselectable": "multiselect", "attr.aria-orientation": "ariaOrientation", "id": "_uid" }, classAttribute: "granite-chip-list" }, queries: [{ propertyName: "chips", predicate: GraniteChipComponent, descendants: true }], exportAs: ["graniteChipList"], usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host.granite-chip-list{display:flex;flex-direction:row;flex-wrap:wrap;place-content:center flex-start;align-items:center;font-weight:400;font-size:var(--granite-font-size-body-small);line-height:var(--granite-line-height-regular);overflow:auto;padding:0;margin:0}:host ::ng-deep input.granite-chip-input{outline:none;border:none;background-color:transparent;color:var(--granite-color-text);margin:var(--granite-spacing-4)}:host ::ng-deep granite-icon{color:var(--granite-color-text);background-color:transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3623
3623
|
}
|
|
3624
3624
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteChipListComponent, decorators: [{
|
|
@@ -3638,13 +3638,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
3638
3638
|
'(blur)': '_blur()',
|
|
3639
3639
|
'(keydown)': '_keydown($event)',
|
|
3640
3640
|
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host.granite-chip-list{display:flex;flex-direction:row;flex-wrap:wrap;place-content:center flex-start;align-items:center;font-weight:400;font-size:var(--granite-font-size-body-small);line-height:var(--granite-line-height-regular);overflow:auto;padding:0;margin:0}:host ::ng-deep input.granite-chip-input{outline:none;border:none;background-color:transparent;color:var(--granite-color-text);margin:var(--granite-spacing-4)}:host ::ng-deep granite-icon{color:var(--granite-color-text);background-color:transparent}\n"] }]
|
|
3641
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type:
|
|
3641
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2.Directionality, decorators: [{
|
|
3642
3642
|
type: Optional
|
|
3643
|
-
}] }, { type: i2$
|
|
3643
|
+
}] }, { type: i2$2.NgForm, decorators: [{
|
|
3644
3644
|
type: Optional
|
|
3645
|
-
}] }, { type: i2$
|
|
3645
|
+
}] }, { type: i2$2.FormGroupDirective, decorators: [{
|
|
3646
3646
|
type: Optional
|
|
3647
|
-
}] }, { type: i2$
|
|
3647
|
+
}] }, { type: i2$2.NgControl, decorators: [{
|
|
3648
3648
|
type: Optional
|
|
3649
3649
|
}, {
|
|
3650
3650
|
type: Self
|
|
@@ -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: [{
|
|
@@ -4312,7 +4312,7 @@ class GraniteContactsTriggerForDirective {
|
|
|
4312
4312
|
_touchPositionStrategy() {
|
|
4313
4313
|
return this._overlay.position().global();
|
|
4314
4314
|
}
|
|
4315
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsTriggerForDirective, deps: [{ token: i1$2.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1$2.OverlayOutsideClickDispatcher }, { token: GRANITE_CLIENT_INPUT, optional: true }, { token: GRANITE_CLIENT_OUTPUT, optional: true }, { token:
|
|
4315
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsTriggerForDirective, deps: [{ token: i1$2.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1$2.OverlayOutsideClickDispatcher }, { token: GRANITE_CLIENT_INPUT, optional: true }, { token: GRANITE_CLIENT_OUTPUT, optional: true }, { token: i2.Directionality, optional: true }, { token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4316
4316
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: GraniteContactsTriggerForDirective, selector: "[graniteContactsTriggerFor]", inputs: { contacts: ["graniteContactsTriggerFor", "contacts"] }, host: { attributes: { "aria-haspopup": "true" }, listeners: { "keydown": "_handleKeydown($event)", "click": "_handleClick($event)" }, properties: { "attr.aria-expanded": "_isContactsOpen || null", "attr.aria-controls": "_isContactsOpen ? contacts.panelId : null" }, classAttribute: "granite-contacts-trigger" }, ngImport: i0 }); }
|
|
4317
4317
|
}
|
|
4318
4318
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsTriggerForDirective, decorators: [{
|
|
@@ -4338,7 +4338,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
4338
4338
|
args: [GRANITE_CLIENT_OUTPUT]
|
|
4339
4339
|
}, {
|
|
4340
4340
|
type: Optional
|
|
4341
|
-
}] }, { type:
|
|
4341
|
+
}] }, { type: i2.Directionality, decorators: [{
|
|
4342
4342
|
type: Optional
|
|
4343
4343
|
}] }, { type: i1.FocusMonitor }], propDecorators: { contacts: [{
|
|
4344
4344
|
type: Input,
|
|
@@ -4464,15 +4464,230 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
4464
4464
|
}]
|
|
4465
4465
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
|
|
4466
4466
|
|
|
4467
|
+
let legendPanelUid = 0;
|
|
4468
|
+
class LegendBaseComponent {
|
|
4469
|
+
constructor() {
|
|
4470
|
+
this.xPosition = 'after';
|
|
4471
|
+
this.yPosition = 'below';
|
|
4472
|
+
this.panelId = `granite-progress-bar-legend-panel-${legendPanelUid++}`;
|
|
4473
|
+
}
|
|
4474
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: LegendBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4475
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: LegendBaseComponent, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0 }); }
|
|
4476
|
+
}
|
|
4477
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: LegendBaseComponent, decorators: [{
|
|
4478
|
+
type: Directive,
|
|
4479
|
+
args: [{}]
|
|
4480
|
+
}], propDecorators: { templateRef: [{
|
|
4481
|
+
type: ViewChild,
|
|
4482
|
+
args: [TemplateRef]
|
|
4483
|
+
}] } });
|
|
4484
|
+
|
|
4485
|
+
class GraniteProgressBarLegendComponent extends LegendBaseComponent {
|
|
4486
|
+
constructor() {
|
|
4487
|
+
super(...arguments);
|
|
4488
|
+
this.legendItems = [];
|
|
4489
|
+
}
|
|
4490
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarLegendComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
4491
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteProgressBarLegendComponent, selector: "granite-progress-bar-legend", inputs: { legendItems: "legendItems" }, usesInheritance: true, ngImport: i0, template: "<ng-template>\n <div class=\"legend\" data-fnd=\"legend\">\n <div\n *ngFor=\"let item of legendItems\"\n class=\"legend-item\"\n data-fnd=\"legend-item\"\n >\n <div class=\"legend-label-text\">{{ item.label }}</div>\n <div\n [style.background-color]=\"item.backgroundColor\"\n class=\"color-box\"\n ></div>\n </div>\n </div>\n</ng-template>\n", styles: [".legend{display:flex;flex-direction:column;align-items:flex-start;padding:var(--granite-spacing-8);margin-top:var(--granite-spacing-4);gap:var(--granite-spacing-8);background-color:var(--granite-color-background-page);border:solid var(--granite-border-width-regular) var(--granite-color-border-contrast);border-radius:var(--granite-radius-s)}.legend-item{display:flex;align-items:center;justify-content:space-between;align-self:stretch;flex-wrap:wrap;padding:0 var(--granite-spacing-4);gap:var(--granite-spacing-8)}.legend-label-text{font-size:var(--granite-font-size-body-small);line-height:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);color:var(--granite-color-text);width:max-content}.color-box{width:8px;height:8px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4492
|
+
}
|
|
4493
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarLegendComponent, decorators: [{
|
|
4494
|
+
type: Component,
|
|
4495
|
+
args: [{ selector: 'granite-progress-bar-legend', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template>\n <div class=\"legend\" data-fnd=\"legend\">\n <div\n *ngFor=\"let item of legendItems\"\n class=\"legend-item\"\n data-fnd=\"legend-item\"\n >\n <div class=\"legend-label-text\">{{ item.label }}</div>\n <div\n [style.background-color]=\"item.backgroundColor\"\n class=\"color-box\"\n ></div>\n </div>\n </div>\n</ng-template>\n", styles: [".legend{display:flex;flex-direction:column;align-items:flex-start;padding:var(--granite-spacing-8);margin-top:var(--granite-spacing-4);gap:var(--granite-spacing-8);background-color:var(--granite-color-background-page);border:solid var(--granite-border-width-regular) var(--granite-color-border-contrast);border-radius:var(--granite-radius-s)}.legend-item{display:flex;align-items:center;justify-content:space-between;align-self:stretch;flex-wrap:wrap;padding:0 var(--granite-spacing-4);gap:var(--granite-spacing-8)}.legend-label-text{font-size:var(--granite-font-size-body-small);line-height:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);color:var(--granite-color-text);width:max-content}.color-box{width:8px;height:8px}\n"] }]
|
|
4496
|
+
}], propDecorators: { legendItems: [{
|
|
4497
|
+
type: Input
|
|
4498
|
+
}] } });
|
|
4499
|
+
|
|
4500
|
+
class GraniteProgressBarLegendTriggerForDirective {
|
|
4501
|
+
constructor(_overlay, _element, _viewContainerRef, _outsideClickDispatcher,
|
|
4502
|
+
/** Client input device information */
|
|
4503
|
+
_clientInput,
|
|
4504
|
+
/** Client output device information */
|
|
4505
|
+
_clientOutput, _dir, _focusMonitor) {
|
|
4506
|
+
this._overlay = _overlay;
|
|
4507
|
+
this._element = _element;
|
|
4508
|
+
this._viewContainerRef = _viewContainerRef;
|
|
4509
|
+
this._outsideClickDispatcher = _outsideClickDispatcher;
|
|
4510
|
+
this._clientInput = _clientInput;
|
|
4511
|
+
this._clientOutput = _clientOutput;
|
|
4512
|
+
this._dir = _dir;
|
|
4513
|
+
this._focusMonitor = _focusMonitor;
|
|
4514
|
+
this._isLegendOpen = false;
|
|
4515
|
+
this._portal = null;
|
|
4516
|
+
this._overlayRef = null;
|
|
4517
|
+
}
|
|
4518
|
+
ngOnDestroy() {
|
|
4519
|
+
if (this._overlayRef) {
|
|
4520
|
+
this._overlayRef.dispose();
|
|
4521
|
+
this._overlayRef = null;
|
|
4522
|
+
}
|
|
4523
|
+
}
|
|
4524
|
+
openLegend() {
|
|
4525
|
+
if (this._isLegendOpen) {
|
|
4526
|
+
return;
|
|
4527
|
+
}
|
|
4528
|
+
this.legend.direction = this._dir.value === 'rtl' ? 'rtl' : 'ltr';
|
|
4529
|
+
this.legend.clientInput = this._clientInput;
|
|
4530
|
+
this.legend.clientOutput = this._clientOutput;
|
|
4531
|
+
const panelClass = [];
|
|
4532
|
+
if (this._clientOutput?.device === 'touch') {
|
|
4533
|
+
panelClass.push('granite-overlay-pane-center');
|
|
4534
|
+
}
|
|
4535
|
+
const scrollStrategy = this._clientOutput?.device !== 'touch'
|
|
4536
|
+
? this._overlay.scrollStrategies.reposition()
|
|
4537
|
+
: this._overlay.scrollStrategies.block();
|
|
4538
|
+
const hasBackdrop = this._clientOutput?.device === 'touch';
|
|
4539
|
+
if (!this._overlayRef) {
|
|
4540
|
+
const config = new OverlayConfig({
|
|
4541
|
+
positionStrategy: this._positionStrategy(),
|
|
4542
|
+
backdropClass: 'granite-overlay-dark-glass-backdrop',
|
|
4543
|
+
scrollStrategy,
|
|
4544
|
+
direction: this._dir,
|
|
4545
|
+
panelClass,
|
|
4546
|
+
hasBackdrop,
|
|
4547
|
+
});
|
|
4548
|
+
this._overlayRef = this._overlay.create(config);
|
|
4549
|
+
}
|
|
4550
|
+
if (!this._portal || this._portal.templateRef !== this.legend.templateRef) {
|
|
4551
|
+
this._portal = new TemplatePortal(this.legend.templateRef, this._viewContainerRef);
|
|
4552
|
+
}
|
|
4553
|
+
this._overlayRef.attach(this._portal);
|
|
4554
|
+
this._outsideClickDispatcher.add(this._overlayRef);
|
|
4555
|
+
this._overlayRef.outsidePointerEvents().subscribe((event) => {
|
|
4556
|
+
event.stopPropagation();
|
|
4557
|
+
this.closeLegend();
|
|
4558
|
+
});
|
|
4559
|
+
this._isLegendOpen = true;
|
|
4560
|
+
}
|
|
4561
|
+
toggleLegend() {
|
|
4562
|
+
if (this._isLegendOpen) {
|
|
4563
|
+
this.closeLegend();
|
|
4564
|
+
}
|
|
4565
|
+
else {
|
|
4566
|
+
this.openLegend();
|
|
4567
|
+
}
|
|
4568
|
+
}
|
|
4569
|
+
closeLegend() {
|
|
4570
|
+
if (!this._overlayRef || !this._isLegendOpen) {
|
|
4571
|
+
return;
|
|
4572
|
+
}
|
|
4573
|
+
this._outsideClickDispatcher.remove(this._overlayRef);
|
|
4574
|
+
this._overlayRef.detach();
|
|
4575
|
+
this._restoreFocus();
|
|
4576
|
+
this._isLegendOpen = false;
|
|
4577
|
+
}
|
|
4578
|
+
_handleKeydown(event) {
|
|
4579
|
+
if (event.key === 'Enter') {
|
|
4580
|
+
event.preventDefault();
|
|
4581
|
+
this.toggleLegend();
|
|
4582
|
+
}
|
|
4583
|
+
}
|
|
4584
|
+
_handleClick() {
|
|
4585
|
+
this.toggleLegend();
|
|
4586
|
+
}
|
|
4587
|
+
_restoreFocus(origin = 'program', options) {
|
|
4588
|
+
if (this._focusMonitor) {
|
|
4589
|
+
this._focusMonitor.focusVia(this._element, origin, options);
|
|
4590
|
+
}
|
|
4591
|
+
else {
|
|
4592
|
+
this._element.nativeElement.focus(options);
|
|
4593
|
+
}
|
|
4594
|
+
}
|
|
4595
|
+
_desktopPositionStrategy() {
|
|
4596
|
+
const positionStrategy = this._overlay
|
|
4597
|
+
.position()
|
|
4598
|
+
.flexibleConnectedTo(this._element)
|
|
4599
|
+
.withLockedPosition()
|
|
4600
|
+
.withTransformOriginOn('.granite-progress-bar-legend')
|
|
4601
|
+
.withPush(false);
|
|
4602
|
+
this._setPosition(positionStrategy);
|
|
4603
|
+
return positionStrategy;
|
|
4604
|
+
}
|
|
4605
|
+
_setPosition(positionStrategy) {
|
|
4606
|
+
const [originX, originFallbackX] = this.legend.xPosition === 'before' ? ['end', 'start'] : ['start', 'end'];
|
|
4607
|
+
const [overlayY, overlayFallbackY] = this.legend.yPosition === 'above' ? ['bottom', 'top'] : ['top', 'bottom'];
|
|
4608
|
+
let [originY, originFallbackY] = [overlayY, overlayFallbackY];
|
|
4609
|
+
const [overlayX, overlayFallbackX] = [originX, originFallbackX];
|
|
4610
|
+
const offsetY = 0;
|
|
4611
|
+
originY = overlayY === 'top' ? 'bottom' : 'top';
|
|
4612
|
+
originFallbackY = overlayFallbackY === 'top' ? 'bottom' : 'top';
|
|
4613
|
+
positionStrategy.withPositions([
|
|
4614
|
+
{ originX, originY, overlayX, overlayY, offsetY },
|
|
4615
|
+
{
|
|
4616
|
+
originX: originFallbackX,
|
|
4617
|
+
originY,
|
|
4618
|
+
overlayX: overlayFallbackX,
|
|
4619
|
+
overlayY,
|
|
4620
|
+
offsetY,
|
|
4621
|
+
},
|
|
4622
|
+
{
|
|
4623
|
+
originX,
|
|
4624
|
+
originY: originFallbackY,
|
|
4625
|
+
overlayX,
|
|
4626
|
+
overlayY: overlayFallbackY,
|
|
4627
|
+
offsetY: -offsetY,
|
|
4628
|
+
},
|
|
4629
|
+
{
|
|
4630
|
+
originX: originFallbackX,
|
|
4631
|
+
originY: originFallbackY,
|
|
4632
|
+
overlayX: overlayFallbackX,
|
|
4633
|
+
overlayY: overlayFallbackY,
|
|
4634
|
+
offsetY: -offsetY,
|
|
4635
|
+
},
|
|
4636
|
+
]);
|
|
4637
|
+
}
|
|
4638
|
+
_positionStrategy() {
|
|
4639
|
+
if (this._clientOutput?.device !== 'touch') {
|
|
4640
|
+
return this._desktopPositionStrategy();
|
|
4641
|
+
}
|
|
4642
|
+
return this._touchPositionStrategy();
|
|
4643
|
+
}
|
|
4644
|
+
_touchPositionStrategy() {
|
|
4645
|
+
return this._overlay.position().global();
|
|
4646
|
+
}
|
|
4647
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarLegendTriggerForDirective, deps: [{ token: i1$2.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1$2.OverlayOutsideClickDispatcher }, { token: GRANITE_CLIENT_INPUT, optional: true }, { token: GRANITE_CLIENT_OUTPUT, optional: true }, { token: i2.Directionality, optional: true }, { token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4648
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: GraniteProgressBarLegendTriggerForDirective, selector: "[graniteProgressBarLegendTriggerFor]", inputs: { legend: ["graniteProgressBarLegendTriggerFor", "legend"] }, host: { attributes: { "aria-haspopup": "true" }, listeners: { "keydown": "_handleKeydown($event)", "click": "_handleClick($event)" }, properties: { "attr.aria-expanded": "_isLegendOpen || null", "attr.aria-controls": "_isLegendOpen ? legend.panelId : null" }, classAttribute: "granite-progress-bar-legend-trigger" }, ngImport: i0 }); }
|
|
4649
|
+
}
|
|
4650
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarLegendTriggerForDirective, decorators: [{
|
|
4651
|
+
type: Directive,
|
|
4652
|
+
args: [{
|
|
4653
|
+
selector: '[graniteProgressBarLegendTriggerFor]',
|
|
4654
|
+
host: {
|
|
4655
|
+
class: 'granite-progress-bar-legend-trigger',
|
|
4656
|
+
'aria-haspopup': 'true',
|
|
4657
|
+
'[attr.aria-expanded]': '_isLegendOpen || null',
|
|
4658
|
+
'[attr.aria-controls]': '_isLegendOpen ? legend.panelId : null',
|
|
4659
|
+
'(keydown)': '_handleKeydown($event)',
|
|
4660
|
+
'(click)': '_handleClick($event)',
|
|
4661
|
+
},
|
|
4662
|
+
}]
|
|
4663
|
+
}], ctorParameters: () => [{ type: i1$2.Overlay }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i1$2.OverlayOutsideClickDispatcher }, { type: undefined, decorators: [{
|
|
4664
|
+
type: Inject,
|
|
4665
|
+
args: [GRANITE_CLIENT_INPUT]
|
|
4666
|
+
}, {
|
|
4667
|
+
type: Optional
|
|
4668
|
+
}] }, { type: undefined, decorators: [{
|
|
4669
|
+
type: Inject,
|
|
4670
|
+
args: [GRANITE_CLIENT_OUTPUT]
|
|
4671
|
+
}, {
|
|
4672
|
+
type: Optional
|
|
4673
|
+
}] }, { type: i2.Directionality, decorators: [{
|
|
4674
|
+
type: Optional
|
|
4675
|
+
}] }, { type: i1.FocusMonitor }], propDecorators: { legend: [{
|
|
4676
|
+
type: Input,
|
|
4677
|
+
args: ['graniteProgressBarLegendTriggerFor']
|
|
4678
|
+
}] } });
|
|
4679
|
+
|
|
4467
4680
|
class GraniteProgressBarComponent {
|
|
4468
4681
|
constructor() {
|
|
4469
4682
|
this.progressBarData = [];
|
|
4470
4683
|
this.showLabel = false;
|
|
4684
|
+
this.showLegend = false;
|
|
4471
4685
|
this.DEFAULT_TOTAL = 100;
|
|
4472
4686
|
this.DEFAULT_BACKGROUND = '--granite-color-background-selected';
|
|
4473
4687
|
this.DEFAULT_STACK_COLOR = '--granite-color-categorical-3';
|
|
4474
4688
|
this.DEFAULT_COLOR = '--granite-color-text';
|
|
4475
4689
|
this.total = this.DEFAULT_TOTAL;
|
|
4690
|
+
this.legendItems = [];
|
|
4476
4691
|
}
|
|
4477
4692
|
getBackgroundColor() {
|
|
4478
4693
|
return this.getColorVar(this.DEFAULT_BACKGROUND);
|
|
@@ -4505,23 +4720,32 @@ class GraniteProgressBarComponent {
|
|
|
4505
4720
|
getStackTotal() {
|
|
4506
4721
|
return this.progressBarData.reduce((acc, curr) => acc + curr.value, 0);
|
|
4507
4722
|
}
|
|
4723
|
+
setLegendItems() {
|
|
4724
|
+
this.legendItems = this.progressBarData.map(({ label, backgroundColor }) => {
|
|
4725
|
+
const legendItemColor = this.getStackColor(backgroundColor);
|
|
4726
|
+
return { label, backgroundColor: legendItemColor };
|
|
4727
|
+
});
|
|
4728
|
+
}
|
|
4508
4729
|
ngOnChanges(changes) {
|
|
4509
4730
|
if (changes.progressBarData &&
|
|
4510
4731
|
JSON.stringify(changes.progressBarData.currentValue) !==
|
|
4511
4732
|
JSON.stringify(changes.progressBarData.previousValue)) {
|
|
4512
4733
|
this.checkStackTotal();
|
|
4734
|
+
this.setLegendItems();
|
|
4513
4735
|
}
|
|
4514
4736
|
}
|
|
4515
4737
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4516
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteProgressBarComponent, selector: "granite-progress-bar", inputs: { progressBarData: "progressBarData", showLabel: "showLabel" }, exportAs: ["graniteProgressBar"], usesOnChanges: true, ngImport: i0, template: "<div\n role=\"progressbar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n class=\"progress\"\n [style.background-color]=\"getBackgroundColor()\"\n>\n <div\n *ngFor=\"let bar of progressBarData; let i = index\"\n [style.background-color]=\"getStackColor(bar.backgroundColor)\"\n [style.width]=\"getStringOfWidth(getWidth(bar.value))\"\n [style.color]=\"getFontColor(bar.foregroundColor)\"\n [graniteTooltipTriggerFor]=\"tooltip\"\n class=\"progress-bar\"\n >\n <label *ngIf=\"showLabel\" graniteHideOnOverflow>{{ bar.valueLabel }}</label>\n <granite-tooltip #tooltip> {{ bar.valueLabel }} </granite-tooltip>\n </div>\n</div>\n", styles: [":host{width:100%;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)}\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
|
|
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 }); }
|
|
4517
4739
|
}
|
|
4518
4740
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarComponent, decorators: [{
|
|
4519
4741
|
type: Component,
|
|
4520
|
-
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", styles: [":host{width:100%;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)}\n"] }]
|
|
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"] }]
|
|
4521
4743
|
}], propDecorators: { progressBarData: [{
|
|
4522
4744
|
type: Input
|
|
4523
4745
|
}], showLabel: [{
|
|
4524
4746
|
type: Input
|
|
4747
|
+
}], showLegend: [{
|
|
4748
|
+
type: Input
|
|
4525
4749
|
}] } });
|
|
4526
4750
|
|
|
4527
4751
|
/**
|
|
@@ -4664,15 +4888,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
4664
4888
|
|
|
4665
4889
|
class GraniteProgressBarModule {
|
|
4666
4890
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
4667
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarModule, declarations: [GraniteProgressBarComponent
|
|
4668
|
-
|
|
4891
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarModule, declarations: [GraniteProgressBarComponent,
|
|
4892
|
+
GraniteProgressBarLegendComponent,
|
|
4893
|
+
GraniteProgressBarLegendTriggerForDirective], imports: [CommonModule,
|
|
4894
|
+
GraniteCoreModule,
|
|
4895
|
+
GraniteTooltipModule,
|
|
4896
|
+
GraniteIconModule,
|
|
4897
|
+
GraniteButtonModule], exports: [GraniteProgressBarComponent] }); }
|
|
4898
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarModule, imports: [CommonModule,
|
|
4899
|
+
GraniteCoreModule,
|
|
4900
|
+
GraniteTooltipModule,
|
|
4901
|
+
GraniteIconModule,
|
|
4902
|
+
GraniteButtonModule] }); }
|
|
4669
4903
|
}
|
|
4670
4904
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarModule, decorators: [{
|
|
4671
4905
|
type: NgModule,
|
|
4672
4906
|
args: [{
|
|
4673
|
-
declarations: [
|
|
4907
|
+
declarations: [
|
|
4908
|
+
GraniteProgressBarComponent,
|
|
4909
|
+
GraniteProgressBarLegendComponent,
|
|
4910
|
+
GraniteProgressBarLegendTriggerForDirective,
|
|
4911
|
+
],
|
|
4674
4912
|
exports: [GraniteProgressBarComponent],
|
|
4675
|
-
imports: [
|
|
4913
|
+
imports: [
|
|
4914
|
+
CommonModule,
|
|
4915
|
+
GraniteCoreModule,
|
|
4916
|
+
GraniteTooltipModule,
|
|
4917
|
+
GraniteIconModule,
|
|
4918
|
+
GraniteButtonModule,
|
|
4919
|
+
],
|
|
4676
4920
|
}]
|
|
4677
4921
|
}] });
|
|
4678
4922
|
|