@ifsworld/granite-components 12.2.0 → 12.3.0

package/fesm2022/ifsworld-granite-components.mjs

@@ -13,13 +13,13 @@ import { trigger, state, style, transition, group, query, animate, sequence } fr
 import * as i1 from '@angular/cdk/a11y';
 import { FocusKeyManager, isFakeMousedownFromScreenReader } from '@angular/cdk/a11y';
 import { hasModifierKey, SPACE, BACKSPACE, DELETE, ENTER, TAB } from '@angular/cdk/keycodes';
-import * as i3 from '@angular/cdk/bidi';
+import * as i2 from '@angular/cdk/bidi';
 import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
-import * as i2 from '@angular/cdk/collections';
+import * as i2$1 from '@angular/cdk/collections';
 import { SelectionModel } from '@angular/cdk/collections';
-import * as i2$1 from '@angular/forms';
+import * as i2$2 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i3$1 from '@ifsworld/granite-components/tooltip';
+import * as i3 from '@ifsworld/granite-components/tooltip';
 import { GraniteTooltipModule } from '@ifsworld/granite-components/tooltip';
 
 class GraniteArrangeGridItemComponent {
@@ -1923,7 +1923,7 @@ class GraniteMenuTriggerForDirective {
             ? offset + target
             : target * (-Math.pow(2, (-10 * current) / end) + 1) + offset;
     }
-    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: i3.Directionality, optional: true }, { token: i1.FocusMonitor }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
+    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 }); }
     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 }); }
 }
 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
                     type: Optional
                 }, {
                     type: Self
-                }] }, { type: i3.Directionality, decorators: [{
+                }] }, { type: i2.Directionality, decorators: [{
                     type: Optional
                 }] }, { type: i1.FocusMonitor }, { type: undefined, decorators: [{
                     type: Inject,
@@ -2348,7 +2348,7 @@ class GraniteRadioButtonComponent {
     _getInputElement() {
         return this._inputElement.nativeElement;
     }
-    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 }); }
+    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 }); }
     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 }); }
 }
 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
                         '[class.granite-radio-button-checked]': 'checked',
                         '[class.granite-radio-button-readonly]': 'readonly',
                     }, 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"] }]
-        }], ctorParameters: () => [{ type: i1.FocusMonitor }, { type: i2.UniqueSelectionDispatcher }], propDecorators: { value: [{
+        }], ctorParameters: () => [{ type: i1.FocusMonitor }, { type: i2$1.UniqueSelectionDispatcher }], propDecorators: { value: [{
                 type: Input
             }], id: [{
                 type: Input
@@ -3618,7 +3618,7 @@ class GraniteChipListComponent extends GraniteChipListBase {
             });
         }
     }
-    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: i3.Directionality, optional: true }, { token: i2$1.NgForm, optional: true }, { token: i2$1.FormGroupDirective, optional: true }, { token: i2$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    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 }); }
     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 }); }
 }
 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
                         '(blur)': '_blur()',
                         '(keydown)': '_keydown($event)',
                     }, 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"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i3.Directionality, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2.Directionality, decorators: [{
                     type: Optional
-                }] }, { type: i2$1.NgForm, decorators: [{
+                }] }, { type: i2$2.NgForm, decorators: [{
                     type: Optional
-                }] }, { type: i2$1.FormGroupDirective, decorators: [{
+                }] }, { type: i2$2.FormGroupDirective, decorators: [{
                     type: Optional
-                }] }, { type: i2$1.NgControl, decorators: [{
+                }] }, { type: i2$2.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
@@ -4312,7 +4312,7 @@ class GraniteContactsTriggerForDirective {
     _touchPositionStrategy() {
         return this._overlay.position().global();
     }
-    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: i3.Directionality, optional: true }, { token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Directive }); }
+    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 }); }
     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 }); }
 }
 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
                     args: [GRANITE_CLIENT_OUTPUT]
                 }, {
                     type: Optional
-                }] }, { type: i3.Directionality, decorators: [{
+                }] }, { type: i2.Directionality, decorators: [{
                     type: Optional
                 }] }, { type: i1.FocusMonitor }], propDecorators: { contacts: [{
                 type: Input,
@@ -4464,15 +4464,230 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
+let legendPanelUid = 0;
+class LegendBaseComponent {
+    constructor() {
+        this.xPosition = 'after';
+        this.yPosition = 'below';
+        this.panelId = `granite-progress-bar-legend-panel-${legendPanelUid++}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: LegendBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: LegendBaseComponent, decorators: [{
+            type: Directive,
+            args: [{}]
+        }], propDecorators: { templateRef: [{
+                type: ViewChild,
+                args: [TemplateRef]
+            }] } });
+
+class GraniteProgressBarLegendComponent extends LegendBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.legendItems = [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarLegendComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarLegendComponent, decorators: [{
+            type: Component,
+            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"] }]
+        }], propDecorators: { legendItems: [{
+                type: Input
+            }] } });
+
+class GraniteProgressBarLegendTriggerForDirective {
+    constructor(_overlay, _element, _viewContainerRef, _outsideClickDispatcher, 
+    /** Client input device information */
+    _clientInput, 
+    /** Client output device information */
+    _clientOutput, _dir, _focusMonitor) {
+        this._overlay = _overlay;
+        this._element = _element;
+        this._viewContainerRef = _viewContainerRef;
+        this._outsideClickDispatcher = _outsideClickDispatcher;
+        this._clientInput = _clientInput;
+        this._clientOutput = _clientOutput;
+        this._dir = _dir;
+        this._focusMonitor = _focusMonitor;
+        this._isLegendOpen = false;
+        this._portal = null;
+        this._overlayRef = null;
+    }
+    ngOnDestroy() {
+        if (this._overlayRef) {
+            this._overlayRef.dispose();
+            this._overlayRef = null;
+        }
+    }
+    openLegend() {
+        if (this._isLegendOpen) {
+            return;
+        }
+        this.legend.direction = this._dir.value === 'rtl' ? 'rtl' : 'ltr';
+        this.legend.clientInput = this._clientInput;
+        this.legend.clientOutput = this._clientOutput;
+        const panelClass = [];
+        if (this._clientOutput?.device === 'touch') {
+            panelClass.push('granite-overlay-pane-center');
+        }
+        const scrollStrategy = this._clientOutput?.device !== 'touch'
+            ? this._overlay.scrollStrategies.reposition()
+            : this._overlay.scrollStrategies.block();
+        const hasBackdrop = this._clientOutput?.device === 'touch';
+        if (!this._overlayRef) {
+            const config = new OverlayConfig({
+                positionStrategy: this._positionStrategy(),
+                backdropClass: 'granite-overlay-dark-glass-backdrop',
+                scrollStrategy,
+                direction: this._dir,
+                panelClass,
+                hasBackdrop,
+            });
+            this._overlayRef = this._overlay.create(config);
+        }
+        if (!this._portal || this._portal.templateRef !== this.legend.templateRef) {
+            this._portal = new TemplatePortal(this.legend.templateRef, this._viewContainerRef);
+        }
+        this._overlayRef.attach(this._portal);
+        this._outsideClickDispatcher.add(this._overlayRef);
+        this._overlayRef.outsidePointerEvents().subscribe((event) => {
+            event.stopPropagation();
+            this.closeLegend();
+        });
+        this._isLegendOpen = true;
+    }
+    toggleLegend() {
+        if (this._isLegendOpen) {
+            this.closeLegend();
+        }
+        else {
+            this.openLegend();
+        }
+    }
+    closeLegend() {
+        if (!this._overlayRef || !this._isLegendOpen) {
+            return;
+        }
+        this._outsideClickDispatcher.remove(this._overlayRef);
+        this._overlayRef.detach();
+        this._restoreFocus();
+        this._isLegendOpen = false;
+    }
+    _handleKeydown(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.toggleLegend();
+        }
+    }
+    _handleClick() {
+        this.toggleLegend();
+    }
+    _restoreFocus(origin = 'program', options) {
+        if (this._focusMonitor) {
+            this._focusMonitor.focusVia(this._element, origin, options);
+        }
+        else {
+            this._element.nativeElement.focus(options);
+        }
+    }
+    _desktopPositionStrategy() {
+        const positionStrategy = this._overlay
+            .position()
+            .flexibleConnectedTo(this._element)
+            .withLockedPosition()
+            .withTransformOriginOn('.granite-progress-bar-legend')
+            .withPush(false);
+        this._setPosition(positionStrategy);
+        return positionStrategy;
+    }
+    _setPosition(positionStrategy) {
+        const [originX, originFallbackX] = this.legend.xPosition === 'before' ? ['end', 'start'] : ['start', 'end'];
+        const [overlayY, overlayFallbackY] = this.legend.yPosition === 'above' ? ['bottom', 'top'] : ['top', 'bottom'];
+        let [originY, originFallbackY] = [overlayY, overlayFallbackY];
+        const [overlayX, overlayFallbackX] = [originX, originFallbackX];
+        const offsetY = 0;
+        originY = overlayY === 'top' ? 'bottom' : 'top';
+        originFallbackY = overlayFallbackY === 'top' ? 'bottom' : 'top';
+        positionStrategy.withPositions([
+            { originX, originY, overlayX, overlayY, offsetY },
+            {
+                originX: originFallbackX,
+                originY,
+                overlayX: overlayFallbackX,
+                overlayY,
+                offsetY,
+            },
+            {
+                originX,
+                originY: originFallbackY,
+                overlayX,
+                overlayY: overlayFallbackY,
+                offsetY: -offsetY,
+            },
+            {
+                originX: originFallbackX,
+                originY: originFallbackY,
+                overlayX: overlayFallbackX,
+                overlayY: overlayFallbackY,
+                offsetY: -offsetY,
+            },
+        ]);
+    }
+    _positionStrategy() {
+        if (this._clientOutput?.device !== 'touch') {
+            return this._desktopPositionStrategy();
+        }
+        return this._touchPositionStrategy();
+    }
+    _touchPositionStrategy() {
+        return this._overlay.position().global();
+    }
+    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 }); }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarLegendTriggerForDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[graniteProgressBarLegendTriggerFor]',
+                    host: {
+                        class: 'granite-progress-bar-legend-trigger',
+                        'aria-haspopup': 'true',
+                        '[attr.aria-expanded]': '_isLegendOpen || null',
+                        '[attr.aria-controls]': '_isLegendOpen ? legend.panelId : null',
+                        '(keydown)': '_handleKeydown($event)',
+                        '(click)': '_handleClick($event)',
+                    },
+                }]
+        }], ctorParameters: () => [{ type: i1$2.Overlay }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i1$2.OverlayOutsideClickDispatcher }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [GRANITE_CLIENT_INPUT]
+                }, {
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [GRANITE_CLIENT_OUTPUT]
+                }, {
+                    type: Optional
+                }] }, { type: i2.Directionality, decorators: [{
+                    type: Optional
+                }] }, { type: i1.FocusMonitor }], propDecorators: { legend: [{
+                type: Input,
+                args: ['graniteProgressBarLegendTriggerFor']
+            }] } });
+
 class GraniteProgressBarComponent {
     constructor() {
         this.progressBarData = [];
         this.showLabel = false;
+        this.showLegend = false;
         this.DEFAULT_TOTAL = 100;
         this.DEFAULT_BACKGROUND = '--granite-color-background-selected';
         this.DEFAULT_STACK_COLOR = '--granite-color-categorical-3';
         this.DEFAULT_COLOR = '--granite-color-text';
         this.total = this.DEFAULT_TOTAL;
+        this.legendItems = [];
     }
     getBackgroundColor() {
         return this.getColorVar(this.DEFAULT_BACKGROUND);
@@ -4505,23 +4720,32 @@ class GraniteProgressBarComponent {
     getStackTotal() {
         return this.progressBarData.reduce((acc, curr) => acc + curr.value, 0);
     }
+    setLegendItems() {
+        this.legendItems = this.progressBarData.map(({ label, backgroundColor }) => {
+            const legendItemColor = this.getStackColor(backgroundColor);
+            return { label, backgroundColor: legendItemColor };
+        });
+    }
     ngOnChanges(changes) {
         if (changes.progressBarData &&
             JSON.stringify(changes.progressBarData.currentValue) !==
                 JSON.stringify(changes.progressBarData.previousValue)) {
             this.checkStackTotal();
+            this.setLegendItems();
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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$1.GraniteTooltipComponent, selector: "granite-tooltip" }, { kind: "directive", type: i3$1.GraniteTooltipTriggerForDirective, selector: "[graniteTooltipTriggerFor]", inputs: ["graniteTooltipTriggerFor", "hideDelay", "showDelay", "showOnKeyboardFocus", "showOnClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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>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;gap:var(--granite-spacing-16);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}\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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarComponent, decorators: [{
             type: Component,
-            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"] }]
+            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>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;gap:var(--granite-spacing-16);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}\n"] }]
         }], propDecorators: { progressBarData: [{
                 type: Input
             }], showLabel: [{
                 type: Input
+            }], showLegend: [{
+                type: Input
             }] } });
 
 /**
@@ -4664,15 +4888,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
 
 class GraniteProgressBarModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarModule, declarations: [GraniteProgressBarComponent], imports: [CommonModule, GraniteCoreModule, GraniteTooltipModule], exports: [GraniteProgressBarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarModule, imports: [CommonModule, GraniteCoreModule, GraniteTooltipModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarModule, declarations: [GraniteProgressBarComponent,
+            GraniteProgressBarLegendComponent,
+            GraniteProgressBarLegendTriggerForDirective], imports: [CommonModule,
+            GraniteCoreModule,
+            GraniteTooltipModule,
+            GraniteIconModule,
+            GraniteButtonModule], exports: [GraniteProgressBarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarModule, imports: [CommonModule,
+            GraniteCoreModule,
+            GraniteTooltipModule,
+            GraniteIconModule,
+            GraniteButtonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [GraniteProgressBarComponent],
+                    declarations: [
+                        GraniteProgressBarComponent,
+                        GraniteProgressBarLegendComponent,
+                        GraniteProgressBarLegendTriggerForDirective,
+                    ],
                     exports: [GraniteProgressBarComponent],
-                    imports: [CommonModule, GraniteCoreModule, GraniteTooltipModule],
+                    imports: [
+                        CommonModule,
+                        GraniteCoreModule,
+                        GraniteTooltipModule,
+                        GraniteIconModule,
+                        GraniteButtonModule,
+                    ],
                 }]
         }] });