@ifsworld/granite-components 12.1.2 → 12.3.0

package/fesm2022/ifsworld-granite-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, HostBinding, ContentChildren, NgModule, InjectionToken, Attribute, Inject, Optional, EventEmitter, QueryList, TemplateRef, Directive, ViewChild, Output, Self, HostListener, ContentChild, Pipe, inject } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, HostBinding, ContentChildren, NgModule, InjectionToken, Attribute, Inject, Optional, EventEmitter, QueryList, TemplateRef, Directive, ViewChild, Output, Self, HostListener, ContentChild, Pipe, ElementRef, inject } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
@@ -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,
+                    ],
                 }]
         }] });
 
@@ -4864,6 +5108,329 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                 }]
         }] });
 
+const fileSizes = [
+    'Bytes',
+    'KB',
+    'MB',
+    'GB',
+    'TB',
+    'PB',
+    'EB',
+    'ZB',
+    'YB',
+];
+var FileUploadStatus;
+(function (FileUploadStatus) {
+    FileUploadStatus["NotStarted"] = "NotStarted";
+    FileUploadStatus["InProgress"] = "InProgress";
+    FileUploadStatus["Completed"] = "Completed";
+    FileUploadStatus["Failed"] = "Failed";
+    FileUploadStatus["Cancelled"] = "Cancelled";
+})(FileUploadStatus || (FileUploadStatus = {}));
+var FilUploadErrorTypes;
+(function (FilUploadErrorTypes) {
+    FilUploadErrorTypes["ExtensionNotSupported"] = "ExtensionNotSupported";
+    FilUploadErrorTypes["MultipleFilesNotSupported"] = "MultipleFilesNotSupported";
+})(FilUploadErrorTypes || (FilUploadErrorTypes = {}));
+const DEFAULT_MULTI_FILE_SUPPORT = false;
+const DEFAULT_ACCEPT_TYPE = '*.*';
+const DEFAULT_UPLOAD_TITLE = 'Upload Files';
+const DEFAULT_UPLOAD_ICON = 'icon-upload';
+const DEFAULT_FILE_BROWSE_BUTTON_ICON = 'icon-folder-alt';
+const DEFAULT_UPLOAD_FAILURE_ICON = 'icon-error';
+const DEFAULT_DROPZONE_TEXT = 'Drop here or';
+const DEFAULT_BROWSE_BUTTON_TEXT = 'Browse';
+const DEFAULT_DROP_PLACEHOLDER_TEXT = 'Drop files here';
+const DEFAULT_DROPZONE_HINT = '';
+const DEFAULT_REMOVE_BUTTON_TEXT = 'Remove';
+const DEFAULT_UPLOAD_BUTTON_TEXT = 'Upload';
+const DEFAULT_RETRY_BUTTON_TEXT = 'Retry';
+const DEFAULT_CANCEL_BUTTON_TEXT = 'Cancel';
+
+function validFileTypes(mimeTypesStringToCheck, files) {
+    const supportedFileMimeTypes = mimeTypesStringToCheck
+        .split(',')
+        .map((ext) => ext.trim());
+    if (!files || files.length === 0) {
+        return false;
+    }
+    return files.every((file) => {
+        const fileType = file['type'];
+        return fileType && supportedFileMimeTypes.includes(fileType);
+    });
+}
+
+class GraniteFileDragAndDropDirective {
+    constructor() {
+        this.currentFiles = [];
+        this.droppedFiles = new EventEmitter();
+        this.isFileOver = new EventEmitter();
+        this.fileUploadValidation = new EventEmitter();
+    }
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const transferFiles = event.dataTransfer?.items ?? [];
+        if (!validFileTypes(this.accept, Array.from(transferFiles))) {
+            this.fileBrowseError = true;
+            this.fileUploadValidation.emit({
+                isError: this.fileBrowseError,
+                type: FilUploadErrorTypes.ExtensionNotSupported,
+            });
+            return;
+        }
+        if (!this.multiFileUploadEnabled &&
+            (transferFiles.length > 1 || this.currentFiles.length >= 1)) {
+            this.fileBrowseError = true;
+            this.fileUploadValidation.emit({
+                isError: this.fileBrowseError,
+                type: FilUploadErrorTypes.MultipleFilesNotSupported,
+            });
+            return;
+        }
+        this.fileOver = true;
+        this.isFileOver.emit(this.fileOver);
+    }
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.fileOver = false;
+        this.fileBrowseError = false;
+        this.fileUploadValidation.emit({ isError: false, type: null });
+        this.isFileOver.emit(this.fileOver);
+    }
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.fileBrowseError) {
+            this.fileBrowseError = false;
+            this.fileUploadValidation.emit({
+                isError: this.fileBrowseError,
+                type: null,
+            });
+            return;
+        }
+        this.currentFiles = [
+            ...this.currentFiles,
+            ...Array.from(event.dataTransfer.files),
+        ];
+        this.fileOver = false;
+        this.isFileOver.emit(this.fileOver);
+        if (this.currentFiles.length > 0) {
+            this.droppedFiles.emit(this.currentFiles);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteFileDragAndDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: GraniteFileDragAndDropDirective, selector: "[graniteFileDragAndDrop]", inputs: { multiFileUploadEnabled: "multiFileUploadEnabled", accept: "accept", currentFiles: "currentFiles" }, outputs: { droppedFiles: "droppedFiles", isFileOver: "isFileOver", fileUploadValidation: "fileUploadValidation" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "class.file-over": "this.fileOver", "class.file-error": "this.fileBrowseError" } }, exportAs: ["graniteFileDragAndDrop"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteFileDragAndDropDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[graniteFileDragAndDrop]',
+                    exportAs: 'graniteFileDragAndDrop',
+                }]
+        }], propDecorators: { fileOver: [{
+                type: HostBinding,
+                args: ['class.file-over']
+            }], fileBrowseError: [{
+                type: HostBinding,
+                args: ['class.file-error']
+            }], multiFileUploadEnabled: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], currentFiles: [{
+                type: Input
+            }], droppedFiles: [{
+                type: Output
+            }], isFileOver: [{
+                type: Output
+            }], fileUploadValidation: [{
+                type: Output
+            }], onDragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }], onDragLeave: [{
+                type: HostListener,
+                args: ['dragleave', ['$event']]
+            }], onDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] } });
+
+class GraniteFileUploadComponent {
+    constructor() {
+        this.accept = DEFAULT_ACCEPT_TYPE;
+        this.uploadTitle = DEFAULT_UPLOAD_TITLE;
+        this.uploadIcon = DEFAULT_UPLOAD_ICON;
+        this.browseIcon = DEFAULT_FILE_BROWSE_BUTTON_ICON;
+        this.errorIcon = DEFAULT_UPLOAD_FAILURE_ICON;
+        this.dropZoneText = DEFAULT_DROPZONE_TEXT;
+        this.browseButtonText = DEFAULT_BROWSE_BUTTON_TEXT;
+        this.dropPlaceholderText = DEFAULT_DROP_PLACEHOLDER_TEXT;
+        this.dropZoneHint = DEFAULT_DROPZONE_HINT;
+        this.removeButtonText = DEFAULT_REMOVE_BUTTON_TEXT;
+        this.uploadButtonText = DEFAULT_UPLOAD_BUTTON_TEXT;
+        this.retryButtonText = DEFAULT_RETRY_BUTTON_TEXT;
+        this.cancelButtonText = DEFAULT_CANCEL_BUTTON_TEXT;
+        this.browseOrDragFiles = new EventEmitter();
+        this.removeFiles = new EventEmitter();
+        this.filesUpload = new EventEmitter();
+        this.fileUploadValidation = new EventEmitter();
+        this.selectedFiles = [];
+        this.previewReadyFiles = [];
+        this.isFileOnDropzone = false;
+        this.FileUploadStatus = FileUploadStatus;
+        this.fileError = false;
+        // TODO: this becomes input when multiple file upload support with carousel component was done.
+        this.supportMultiFileUpload = DEFAULT_MULTI_FILE_SUPPORT;
+        this._uploadStatus = FileUploadStatus.NotStarted;
+        this._autoUpload = true;
+    }
+    get uploadStatus() {
+        return this._uploadStatus;
+    }
+    set uploadStatus(status) {
+        this._uploadStatus = status;
+    }
+    get autoUpload() {
+        return this._autoUpload;
+    }
+    set autoUpload(value) {
+        this._autoUpload = coerceBooleanProperty(value);
+    }
+    fileBrowseHandler(event) {
+        const target = event.target;
+        const files = Array.from(target.files);
+        if (!validFileTypes(this.accept, files)) {
+            this.fileUploadValidation.emit({
+                isError: true,
+                type: FilUploadErrorTypes.ExtensionNotSupported,
+            });
+            this.fileDropRef.nativeElement.value = null;
+            return;
+        }
+        this.selectedFiles = [...this.selectedFiles, ...files];
+        this.previewReadyFiles = this.prepareSelectedFiles(this.selectedFiles);
+        this.browseOrDragFiles.emit(this.previewReadyFiles);
+    }
+    fileRemoveHandler(index) {
+        this.selectedFiles.splice(index, 1);
+        this.previewReadyFiles.splice(index, 1);
+        if (this.selectedFiles.length === 0 &&
+            this.previewReadyFiles.length === 0) {
+            this.fileDropRef.nativeElement.value = null;
+            this.uploadStatus = FileUploadStatus.NotStarted;
+        }
+        this.removeFiles.emit(this.previewReadyFiles);
+    }
+    onFilesDropHandler(files) {
+        if (!this.supportMultiFileUpload &&
+            (this.selectedFiles.length === 1 || files.length !== 1)) {
+            this.fileError = true;
+            return;
+        }
+        this.selectedFiles = files;
+        this.previewReadyFiles = this.prepareSelectedFiles(this.selectedFiles);
+        this.browseOrDragFiles.emit(this.previewReadyFiles);
+    }
+    onFileOverDropzone(isFileOver) {
+        this.isFileOnDropzone = isFileOver;
+    }
+    onFileDropError(validation) {
+        this.fileError = validation.isError;
+        this.fileDropErrorType = validation.type;
+    }
+    prepareSelectedFiles(files) {
+        return files.map((file) => ({
+            file,
+            readableSize: this.formatBytesToReadableSize(file.size, 2),
+            imageUrl: URL.createObjectURL(file),
+        }));
+    }
+    uploadFiles() {
+        this.filesUpload.emit();
+    }
+    retryUpload() {
+        this.filesUpload.emit();
+    }
+    cancelUpload() {
+        for (let i = 0; i < this.previewReadyFiles.length; i++) {
+            this.fileRemoveHandler(i);
+        }
+    }
+    formatBytesToReadableSize(bytes, decimals) {
+        if (bytes === 0) {
+            return `0 ${fileSizes[0]}`;
+        }
+        const bytesPerKB = 1024;
+        const decimalPoints = decimals <= 0 ? 0 : decimals || 2;
+        const exp = Math.floor(Math.log(bytes) / Math.log(bytesPerKB));
+        return `${parseFloat((bytes / Math.pow(bytesPerKB, exp)).toFixed(decimalPoints))} ${fileSizes[exp]}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteFileUploadComponent, selector: "granite-file-upload", inputs: { accept: "accept", uploadTitle: "uploadTitle", uploadIcon: "uploadIcon", browseIcon: "browseIcon", errorIcon: "errorIcon", dropZoneText: "dropZoneText", browseButtonText: "browseButtonText", dropPlaceholderText: "dropPlaceholderText", dropZoneHint: "dropZoneHint", removeButtonText: "removeButtonText", uploadButtonText: "uploadButtonText", retryButtonText: "retryButtonText", cancelButtonText: "cancelButtonText", uploadStatus: "uploadStatus", autoUpload: "autoUpload" }, outputs: { browseOrDragFiles: "browseOrDragFiles", removeFiles: "removeFiles", filesUpload: "filesUpload", fileUploadValidation: "fileUploadValidation" }, viewQueries: [{ propertyName: "fileDropRef", first: true, predicate: ["fileDropRef"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"file-upload-wrapper\">\n  <h2 class=\"file-upload-title\">{{ uploadTitle }}</h2>\n  <div\n    class=\"file-dropzone\"\n    graniteFileDragAndDrop\n    (droppedFiles)=\"onFilesDropHandler($event)\"\n    (isFileOver)=\"onFileOverDropzone($event)\"\n    (fileUploadValidation)=\"onFileDropError($event)\"\n    [multiFileUploadEnabled]=\"supportMultiFileUpload\"\n    [accept]=\"accept\"\n    [currentFiles]=\"selectedFiles\"\n  >\n    <input\n      class=\"file-input\"\n      #fileDropRef\n      type=\"file\"\n      title=\"fileUpload\"\n      (change)=\"fileBrowseHandler($event)\"\n      [multiple]=\"supportMultiFileUpload\"\n      [accept]=\"accept\"\n    />\n    <div class=\"file-upload-body\">\n      <ng-template #dropPlaceholder>\n        <p class=\"drop-area-placeholder\">\n          {{ dropPlaceholderText }}\n        </p>\n      </ng-template>\n      <ng-container\n        *ngIf=\"!isFileOnDropzone && !fileError; else dropPlaceholder\"\n      >\n        <div\n          class=\"file-upload-browse\"\n          *ngIf=\"previewReadyFiles.length === 0; else filePreview\"\n        >\n          <granite-icon\n            class=\"file-upload-icon\"\n            [fontIcon]=\"uploadIcon\"\n          ></granite-icon>\n          <div class=\"file-selection\">\n            <h2 class=\"file-upload-body-text\">{{ dropZoneText }}</h2>\n            <button\n              class=\"file-select-button\"\n              graniteButton\n              (click)=\"fileDropRef.click()\"\n            >\n              <granite-icon\n                class=\"browse-button-icon\"\n                [fontIcon]=\"browseIcon\"\n              ></granite-icon>\n              <div class=\"browse-button-text\">{{ browseButtonText }}</div>\n            </button>\n          </div>\n          <p *ngIf=\"dropZoneHint\" class=\"file-upload-hint\">\n            {{ dropZoneHint }}\n          </p>\n        </div>\n        <ng-template #filePreview>\n          <div\n            class=\"file-preview-container\"\n            *ngFor=\"let previewFile of previewReadyFiles; let i = index\"\n          >\n            <a\n              class=\"file-preview-link\"\n              [ngClass]=\"{\n                'uploading-in-progress':\n                  uploadStatus === FileUploadStatus.InProgress,\n                'upload-failed': uploadStatus === FileUploadStatus.Failed\n              }\"\n              [href]=\"previewFile?.imageUrl\"\n              target=\"_blank\"\n            >\n              <div class=\"file-preview-holder\">\n                <img\n                  role=\"presentation\"\n                  [src]=\"previewFile?.imageUrl\"\n                  [alt]=\"previewFile?.file?.name\"\n                />\n              </div>\n              <p class=\"file-name\" [title]=\"previewFile?.file?.name\">\n                {{ previewFile?.file?.name }}\n              </p>\n              <p class=\"file-size\">{{ previewFile?.readableSize }}</p>\n            </a>\n            <div\n              class=\"loading-container\"\n              *ngIf=\"uploadStatus === FileUploadStatus.InProgress\"\n            >\n              <div class=\"uploading-spinner\"></div>\n            </div>\n            <div\n              class=\"failed-icon-container\"\n              *ngIf=\"uploadStatus === FileUploadStatus.Failed\"\n            >\n              <granite-icon\n                class=\"error-icon\"\n                [fontIcon]=\"errorIcon\"\n              ></granite-icon>\n            </div>\n            <button\n              graniteButton\n              *ngIf=\"\n                [\n                  FileUploadStatus.Completed,\n                  FileUploadStatus.NotStarted\n                ].includes(uploadStatus)\n              \"\n              (click)=\"fileRemoveHandler(i)\"\n            >\n              {{ removeButtonText }}\n            </button>\n          </div>\n        </ng-template>\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"file-upload-footer\">\n    <div class=\"footer-container\" *ngIf=\"previewReadyFiles.length > 0\">\n      <button\n        *ngIf=\"!autoUpload && uploadStatus === FileUploadStatus.NotStarted\"\n        granitePrimaryButton\n        (click)=\"uploadFiles()\"\n      >\n        {{ uploadButtonText }}\n      </button>\n      <ng-container *ngIf=\"uploadStatus === FileUploadStatus.Failed\">\n        <button graniteButton (click)=\"cancelUpload()\">\n          {{ cancelButtonText }}\n        </button>\n        <button\n          class=\"retry-upload-button\"\n          granitePrimaryButton\n          (click)=\"retryUpload()\"\n        >\n          {{ retryButtonText }}\n        </button>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [":host{width:100%}.file-upload-wrapper{display:flex;flex-direction:column;background-color:var(--granite-color-background);box-shadow:var(--granite-shadow-s);height:100%;width:100%}.file-upload-wrapper .file-upload-title{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-medium);font-weight:var(--granite-font-weight-bold);line-height:var(--granite-line-height-base-rem);color:var(--granite-color-text-weak);margin:0;padding:var(--granite-spacing-8) calc(var(--granite-spacing-16) * .813)}.file-upload-wrapper .file-dropzone{display:flex;flex-direction:column;border-width:var(--granite-border-width-focus);border-style:dashed;border-color:var(--granite-color-background-selected);border-radius:var(--granite-radius-m);margin:var(--granite-spacing-8);height:100%}.file-upload-wrapper .file-dropzone.file-error{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;background-color:var(--granite-color-background-lobby-failure);border-color:var(--granite-color-state-error);transition:background .15s ease}.file-upload-wrapper .file-dropzone.file-error .drop-area-placeholder{margin:0}.file-upload-wrapper .file-dropzone.file-over{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;background-color:var(--granite-color-background-lobby-info);border-color:var(--granite-color-background-active);transition:background .15s ease}.file-upload-wrapper .file-dropzone.file-over .drop-area-placeholder{margin:0}.file-upload-wrapper .file-dropzone .file-input{opacity:0;position:absolute;width:0}.file-upload-wrapper .file-dropzone .file-upload-body{display:flex;align-items:center;justify-content:center;height:100%}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse{display:flex;flex-direction:column;gap:var(--granite-spacing-4);justify-content:center;align-items:center;padding:0 var(--granite-spacing-16)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-upload-icon{font-size:var(--granite-font-size-display-small);color:var(--granite-color-text)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection{display:flex;justify-content:space-between;align-items:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-upload-body-text{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;width:100%;margin-inline-end:var(--granite-spacing-4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button{display:flex;justify-content:space-between;align-items:center;color:var(--granite-color-text-link);padding-top:calc(var(--granite-spacing-24) / 4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button .browse-button-icon{font-size:var(--granite-font-size-body);color:var(--granite-color-text-link);margin-inline-end:var(--granite-spacing-4);padding:0}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button .browse-button-text{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:calc(var(--granite-line-height-flowing) / 2);margin-top:var(--granite-spacing-4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button:hover .browse-button-icon,.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button:hover .browse-button-text{color:var(--granite-color-text-inverse)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-upload-hint{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:18px;text-align:center;color:var(--granite-color-text-hint);margin:10px 0 0}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container{display:flex;flex-direction:column;align-items:center;width:100%;max-height:100%;padding:6px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link{display:flex;flex-direction:column;align-items:center;width:100%;text-decoration:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed{opacity:.6;pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link:hover .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link:hover .file-size{text-decoration:underline}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder{width:80px;height:114px;background-color:var(--granite-color-background-variant)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder img{max-width:100%;max-height:100%;aspect-ratio:2/1;object-fit:cover;object-position:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-name{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:10px;color:var(--granite-color-text-link);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:6px 0 0;width:100%;text-align:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-size{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:10px;color:var(--granite-color-text-link);margin:0 0 14px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container{position:absolute;transform:translateY(100%)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container .uploading-spinner,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container .uploading-spinner{width:50px;height:50px;border-radius:50%;border:6px solid;border-color:var(--granite-color-background-page);border-right-color:var(--granite-color-background-active);animation:loading-keyframe 1s infinite linear}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container .error-icon,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container .error-icon{color:var(--granite-color-state-error);font-size:35px;padding:0}.file-upload-wrapper .file-upload-footer{margin-inline:var(--granite-spacing-8);margin-bottom:var(--granite-spacing-8)}.file-upload-wrapper .file-upload-footer .footer-container{display:flex;justify-content:flex-end;align-items:center}.file-upload-wrapper .file-upload-footer .footer-container .retry-upload-button{margin-inline-start:var(--granite-spacing-8)}@keyframes loading-keyframe{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "component", type: GraniteButtonComponent, selector: "button[graniteButton],\n    button[granitePrimaryButton],\n    button[graniteFlatButton],\n    button[graniteToolbarButton]\n  ", inputs: ["disabled", "toggled"], exportAs: ["graniteButton"] }, { kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }, { kind: "directive", type: GraniteFileDragAndDropDirective, selector: "[graniteFileDragAndDrop]", inputs: ["multiFileUploadEnabled", "accept", "currentFiles"], outputs: ["droppedFiles", "isFileOver", "fileUploadValidation"], exportAs: ["graniteFileDragAndDrop"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteFileUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'granite-file-upload', template: "<div class=\"file-upload-wrapper\">\n  <h2 class=\"file-upload-title\">{{ uploadTitle }}</h2>\n  <div\n    class=\"file-dropzone\"\n    graniteFileDragAndDrop\n    (droppedFiles)=\"onFilesDropHandler($event)\"\n    (isFileOver)=\"onFileOverDropzone($event)\"\n    (fileUploadValidation)=\"onFileDropError($event)\"\n    [multiFileUploadEnabled]=\"supportMultiFileUpload\"\n    [accept]=\"accept\"\n    [currentFiles]=\"selectedFiles\"\n  >\n    <input\n      class=\"file-input\"\n      #fileDropRef\n      type=\"file\"\n      title=\"fileUpload\"\n      (change)=\"fileBrowseHandler($event)\"\n      [multiple]=\"supportMultiFileUpload\"\n      [accept]=\"accept\"\n    />\n    <div class=\"file-upload-body\">\n      <ng-template #dropPlaceholder>\n        <p class=\"drop-area-placeholder\">\n          {{ dropPlaceholderText }}\n        </p>\n      </ng-template>\n      <ng-container\n        *ngIf=\"!isFileOnDropzone && !fileError; else dropPlaceholder\"\n      >\n        <div\n          class=\"file-upload-browse\"\n          *ngIf=\"previewReadyFiles.length === 0; else filePreview\"\n        >\n          <granite-icon\n            class=\"file-upload-icon\"\n            [fontIcon]=\"uploadIcon\"\n          ></granite-icon>\n          <div class=\"file-selection\">\n            <h2 class=\"file-upload-body-text\">{{ dropZoneText }}</h2>\n            <button\n              class=\"file-select-button\"\n              graniteButton\n              (click)=\"fileDropRef.click()\"\n            >\n              <granite-icon\n                class=\"browse-button-icon\"\n                [fontIcon]=\"browseIcon\"\n              ></granite-icon>\n              <div class=\"browse-button-text\">{{ browseButtonText }}</div>\n            </button>\n          </div>\n          <p *ngIf=\"dropZoneHint\" class=\"file-upload-hint\">\n            {{ dropZoneHint }}\n          </p>\n        </div>\n        <ng-template #filePreview>\n          <div\n            class=\"file-preview-container\"\n            *ngFor=\"let previewFile of previewReadyFiles; let i = index\"\n          >\n            <a\n              class=\"file-preview-link\"\n              [ngClass]=\"{\n                'uploading-in-progress':\n                  uploadStatus === FileUploadStatus.InProgress,\n                'upload-failed': uploadStatus === FileUploadStatus.Failed\n              }\"\n              [href]=\"previewFile?.imageUrl\"\n              target=\"_blank\"\n            >\n              <div class=\"file-preview-holder\">\n                <img\n                  role=\"presentation\"\n                  [src]=\"previewFile?.imageUrl\"\n                  [alt]=\"previewFile?.file?.name\"\n                />\n              </div>\n              <p class=\"file-name\" [title]=\"previewFile?.file?.name\">\n                {{ previewFile?.file?.name }}\n              </p>\n              <p class=\"file-size\">{{ previewFile?.readableSize }}</p>\n            </a>\n            <div\n              class=\"loading-container\"\n              *ngIf=\"uploadStatus === FileUploadStatus.InProgress\"\n            >\n              <div class=\"uploading-spinner\"></div>\n            </div>\n            <div\n              class=\"failed-icon-container\"\n              *ngIf=\"uploadStatus === FileUploadStatus.Failed\"\n            >\n              <granite-icon\n                class=\"error-icon\"\n                [fontIcon]=\"errorIcon\"\n              ></granite-icon>\n            </div>\n            <button\n              graniteButton\n              *ngIf=\"\n                [\n                  FileUploadStatus.Completed,\n                  FileUploadStatus.NotStarted\n                ].includes(uploadStatus)\n              \"\n              (click)=\"fileRemoveHandler(i)\"\n            >\n              {{ removeButtonText }}\n            </button>\n          </div>\n        </ng-template>\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"file-upload-footer\">\n    <div class=\"footer-container\" *ngIf=\"previewReadyFiles.length > 0\">\n      <button\n        *ngIf=\"!autoUpload && uploadStatus === FileUploadStatus.NotStarted\"\n        granitePrimaryButton\n        (click)=\"uploadFiles()\"\n      >\n        {{ uploadButtonText }}\n      </button>\n      <ng-container *ngIf=\"uploadStatus === FileUploadStatus.Failed\">\n        <button graniteButton (click)=\"cancelUpload()\">\n          {{ cancelButtonText }}\n        </button>\n        <button\n          class=\"retry-upload-button\"\n          granitePrimaryButton\n          (click)=\"retryUpload()\"\n        >\n          {{ retryButtonText }}\n        </button>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [":host{width:100%}.file-upload-wrapper{display:flex;flex-direction:column;background-color:var(--granite-color-background);box-shadow:var(--granite-shadow-s);height:100%;width:100%}.file-upload-wrapper .file-upload-title{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-medium);font-weight:var(--granite-font-weight-bold);line-height:var(--granite-line-height-base-rem);color:var(--granite-color-text-weak);margin:0;padding:var(--granite-spacing-8) calc(var(--granite-spacing-16) * .813)}.file-upload-wrapper .file-dropzone{display:flex;flex-direction:column;border-width:var(--granite-border-width-focus);border-style:dashed;border-color:var(--granite-color-background-selected);border-radius:var(--granite-radius-m);margin:var(--granite-spacing-8);height:100%}.file-upload-wrapper .file-dropzone.file-error{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;background-color:var(--granite-color-background-lobby-failure);border-color:var(--granite-color-state-error);transition:background .15s ease}.file-upload-wrapper .file-dropzone.file-error .drop-area-placeholder{margin:0}.file-upload-wrapper .file-dropzone.file-over{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;background-color:var(--granite-color-background-lobby-info);border-color:var(--granite-color-background-active);transition:background .15s ease}.file-upload-wrapper .file-dropzone.file-over .drop-area-placeholder{margin:0}.file-upload-wrapper .file-dropzone .file-input{opacity:0;position:absolute;width:0}.file-upload-wrapper .file-dropzone .file-upload-body{display:flex;align-items:center;justify-content:center;height:100%}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse{display:flex;flex-direction:column;gap:var(--granite-spacing-4);justify-content:center;align-items:center;padding:0 var(--granite-spacing-16)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-upload-icon{font-size:var(--granite-font-size-display-small);color:var(--granite-color-text)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection{display:flex;justify-content:space-between;align-items:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-upload-body-text{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;width:100%;margin-inline-end:var(--granite-spacing-4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button{display:flex;justify-content:space-between;align-items:center;color:var(--granite-color-text-link);padding-top:calc(var(--granite-spacing-24) / 4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button .browse-button-icon{font-size:var(--granite-font-size-body);color:var(--granite-color-text-link);margin-inline-end:var(--granite-spacing-4);padding:0}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button .browse-button-text{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:calc(var(--granite-line-height-flowing) / 2);margin-top:var(--granite-spacing-4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button:hover .browse-button-icon,.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button:hover .browse-button-text{color:var(--granite-color-text-inverse)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-upload-hint{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:18px;text-align:center;color:var(--granite-color-text-hint);margin:10px 0 0}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container{display:flex;flex-direction:column;align-items:center;width:100%;max-height:100%;padding:6px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link{display:flex;flex-direction:column;align-items:center;width:100%;text-decoration:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed{opacity:.6;pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link:hover .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link:hover .file-size{text-decoration:underline}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder{width:80px;height:114px;background-color:var(--granite-color-background-variant)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder img{max-width:100%;max-height:100%;aspect-ratio:2/1;object-fit:cover;object-position:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-name{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:10px;color:var(--granite-color-text-link);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:6px 0 0;width:100%;text-align:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-size{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:10px;color:var(--granite-color-text-link);margin:0 0 14px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container{position:absolute;transform:translateY(100%)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container .uploading-spinner,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container .uploading-spinner{width:50px;height:50px;border-radius:50%;border:6px solid;border-color:var(--granite-color-background-page);border-right-color:var(--granite-color-background-active);animation:loading-keyframe 1s infinite linear}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container .error-icon,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container .error-icon{color:var(--granite-color-state-error);font-size:35px;padding:0}.file-upload-wrapper .file-upload-footer{margin-inline:var(--granite-spacing-8);margin-bottom:var(--granite-spacing-8)}.file-upload-wrapper .file-upload-footer .footer-container{display:flex;justify-content:flex-end;align-items:center}.file-upload-wrapper .file-upload-footer .footer-container .retry-upload-button{margin-inline-start:var(--granite-spacing-8)}@keyframes loading-keyframe{to{transform:rotate(360deg)}}\n"] }]
+        }], propDecorators: { fileDropRef: [{
+                type: ViewChild,
+                args: ['fileDropRef', { read: ElementRef }]
+            }], accept: [{
+                type: Input
+            }], uploadTitle: [{
+                type: Input
+            }], uploadIcon: [{
+                type: Input
+            }], browseIcon: [{
+                type: Input
+            }], errorIcon: [{
+                type: Input
+            }], dropZoneText: [{
+                type: Input
+            }], browseButtonText: [{
+                type: Input
+            }], dropPlaceholderText: [{
+                type: Input
+            }], dropZoneHint: [{
+                type: Input
+            }], removeButtonText: [{
+                type: Input
+            }], uploadButtonText: [{
+                type: Input
+            }], retryButtonText: [{
+                type: Input
+            }], cancelButtonText: [{
+                type: Input
+            }], browseOrDragFiles: [{
+                type: Output
+            }], removeFiles: [{
+                type: Output
+            }], filesUpload: [{
+                type: Output
+            }], fileUploadValidation: [{
+                type: Output
+            }], uploadStatus: [{
+                type: Input
+            }], autoUpload: [{
+                type: Input
+            }] } });
+
+class GraniteFileUploadModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteFileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: GraniteFileUploadModule, declarations: [GraniteFileUploadComponent, GraniteFileDragAndDropDirective], imports: [CommonModule, GraniteButtonModule, GraniteIconModule], exports: [GraniteFileUploadComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteFileUploadModule, imports: [CommonModule, GraniteButtonModule, GraniteIconModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteFileUploadModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [GraniteFileUploadComponent, GraniteFileDragAndDropDirective],
+                    exports: [GraniteFileUploadComponent],
+                    imports: [CommonModule, GraniteButtonModule, GraniteIconModule],
+                }]
+        }] });
+
 class GraniteCollapsibleConditionalBodyDirective {
     constructor() {
         this.template = inject(TemplateRef);
@@ -4961,5 +5528,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonSelectors, CONTACT_DEFAULT_STATUS, ClientInputDesktopDirective, ClientInputTouchDirective, ClientOutputDesktopDirective, ClientOutputTouchDirective, ContactItemDefaultStatusComponent, GRANITE_CLIENT_INPUT, GRANITE_CLIENT_OUTPUT, GraniteAnchorComponent, GraniteArrangeGridComponent, GraniteArrangeGridItemComponent, GraniteArrangeGridModule, GraniteArrangeGridOrientation, GraniteBadgeComponent, GraniteBadgeHarness, GraniteBadgeModule, GraniteButtonComponent, GraniteButtonModule, GraniteCardActionsComponent, GraniteCardAvatarComponent, GraniteCardBodyComponent, GraniteCardComponent, GraniteCardContentComponent, GraniteCardFooterComponent, GraniteCardHeaderComponent, GraniteCardHeaderSubTitleComponent, GraniteCardHeaderTitleComponent, GraniteCardListComponent, GraniteCardListModule, GraniteCheckboxComponent, GraniteCheckboxGroupComponent, GraniteCheckboxModule, GraniteChipComponent, GraniteChipInputDirective, GraniteChipListComponent, GraniteChipSelectionChangeEvent, GraniteChipsModule, GraniteCollapsibleConditionalBodyDirective, GraniteCollapsibleConditionalHeaderDirective, GraniteCollapsibleGroupComponent, GraniteCollapsibleGroupModule, GraniteContactItemComponent, GraniteContactItemTitleComponent, GraniteContactsComponent, GraniteContactsModule, GraniteContactsProfileComponent, GraniteContactsTriggerForDirective, GraniteCoreModule, GraniteCustomProfileDirective, GraniteCustomStatusDirective, GraniteDividerDirective, GraniteGridComponent, GraniteGridItemComponent, GraniteGridModule, GraniteHideOnOverflowDirective, GraniteIconComponent, GraniteIconModule, GraniteInputFieldComponent, GraniteInputFieldModule, GraniteLabelComponent, GraniteLabelModule, GraniteMenuComponent, GraniteMenuHarness, GraniteMenuItemComponent, GraniteMenuItemHarness, GraniteMenuModule, GraniteMenuTouchCloseComponent, GraniteMenuTouchTitleItemComponent, GraniteMenuTriggerForDirective, GraniteProgressBarComponent, GraniteProgressBarModule, GraniteRadioButtonComponent, GraniteRadioButtonModule, GraniteRadioGroupComponent, GraniteTitleDirective, GraniteTitlePipe, GraniteToggleSwitchComponent, GraniteToggleSwitchModule, PurePipesModule, deviceDesktop, deviceTouch, disabledMixin, graniteMenuDesktopAnimations, graniteMenuTouchAnimations };
+export { ButtonSelectors, CONTACT_DEFAULT_STATUS, ClientInputDesktopDirective, ClientInputTouchDirective, ClientOutputDesktopDirective, ClientOutputTouchDirective, ContactItemDefaultStatusComponent, GRANITE_CLIENT_INPUT, GRANITE_CLIENT_OUTPUT, GraniteAnchorComponent, GraniteArrangeGridComponent, GraniteArrangeGridItemComponent, GraniteArrangeGridModule, GraniteArrangeGridOrientation, GraniteBadgeComponent, GraniteBadgeHarness, GraniteBadgeModule, GraniteButtonComponent, GraniteButtonModule, GraniteCardActionsComponent, GraniteCardAvatarComponent, GraniteCardBodyComponent, GraniteCardComponent, GraniteCardContentComponent, GraniteCardFooterComponent, GraniteCardHeaderComponent, GraniteCardHeaderSubTitleComponent, GraniteCardHeaderTitleComponent, GraniteCardListComponent, GraniteCardListModule, GraniteCheckboxComponent, GraniteCheckboxGroupComponent, GraniteCheckboxModule, GraniteChipComponent, GraniteChipInputDirective, GraniteChipListComponent, GraniteChipSelectionChangeEvent, GraniteChipsModule, GraniteCollapsibleConditionalBodyDirective, GraniteCollapsibleConditionalHeaderDirective, GraniteCollapsibleGroupComponent, GraniteCollapsibleGroupModule, GraniteContactItemComponent, GraniteContactItemTitleComponent, GraniteContactsComponent, GraniteContactsModule, GraniteContactsProfileComponent, GraniteContactsTriggerForDirective, GraniteCoreModule, GraniteCustomProfileDirective, GraniteCustomStatusDirective, GraniteDividerDirective, GraniteFileUploadComponent, GraniteFileUploadModule, GraniteGridComponent, GraniteGridItemComponent, GraniteGridModule, GraniteHideOnOverflowDirective, GraniteIconComponent, GraniteIconModule, GraniteInputFieldComponent, GraniteInputFieldModule, GraniteLabelComponent, GraniteLabelModule, GraniteMenuComponent, GraniteMenuHarness, GraniteMenuItemComponent, GraniteMenuItemHarness, GraniteMenuModule, GraniteMenuTouchCloseComponent, GraniteMenuTouchTitleItemComponent, GraniteMenuTriggerForDirective, GraniteProgressBarComponent, GraniteProgressBarModule, GraniteRadioButtonComponent, GraniteRadioButtonModule, GraniteRadioGroupComponent, GraniteTitleDirective, GraniteTitlePipe, GraniteToggleSwitchComponent, GraniteToggleSwitchModule, PurePipesModule, deviceDesktop, deviceTouch, disabledMixin, graniteMenuDesktopAnimations, graniteMenuTouchAnimations };
 //# sourceMappingURL=ifsworld-granite-components.mjs.map