@ifsworld/granite-components 13.2.5 → 13.2.7

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, ElementRef, inject } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, HostBinding, ContentChildren, NgModule, InjectionToken, Attribute, Inject, Optional, EventEmitter, QueryList, TemplateRef, Directive, ViewChild, Output, Self, HostListener, ContentChild, Injectable, inject, ElementRef, ViewContainerRef, Pipe } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
@@ -7,20 +7,23 @@ import { Subject, BehaviorSubject, combineLatest, Subscription, merge, of, asapS
 import { takeUntil, filter, map, startWith, switchMap, take, delay, debounceTime } from 'rxjs/operators';
 import { ComponentHarness, HarnessPredicate, TestKey } from '@angular/cdk/testing';
 import * as i1$2 from '@angular/cdk/overlay';
-import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
+import { OverlayConfig, OverlayModule, Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal, PortalModule } from '@angular/cdk/portal';
 import { trigger, state, style, transition, group, query, animate, sequence } from '@angular/animations';
 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 i2 from '@angular/cdk/bidi';
+import * as i3 from '@angular/cdk/bidi';
+import { Directionality } from '@angular/cdk/bidi';
 import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
-import * as i2$1 from '@angular/cdk/collections';
+import * as i2 from '@angular/cdk/collections';
 import { SelectionModel } from '@angular/cdk/collections';
-import * as i2$2 from '@angular/forms';
+import * as i2$1 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i3 from '@ifsworld/granite-components/tooltip';
+import * as i3$1 from '@ifsworld/granite-components/tooltip';
 import { GraniteTooltipModule } from '@ifsworld/granite-components/tooltip';
+import * as i1$3 from '@angular/cdk/scrolling';
+import { ScrollingModule } from '@angular/cdk/scrolling';
 
 class GraniteArrangeGridItemComponent {
     constructor(element) {
@@ -868,6 +871,7 @@ class _MenuBaseComponent {
     constructor(_changeDetectorRef) {
         this._changeDetectorRef = _changeDetectorRef;
         this.openOnHover = true;
+        this.scrollStrategy = 'reposition';
         /**
          * Event emitted when the menu is closed
          */
@@ -1145,7 +1149,7 @@ class _MenuBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: _MenuBaseComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: _MenuBaseComponent, inputs: { xPosition: "xPosition", yPosition: "yPosition", title: "title", closeLabel: "closeLabel", openOnHover: "openOnHover" }, outputs: { closed: "closed", opened: "opened" }, queries: [{ propertyName: "_allItems", predicate: GraniteMenuItemComponent, descendants: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: _MenuBaseComponent, inputs: { xPosition: "xPosition", yPosition: "yPosition", title: "title", closeLabel: "closeLabel", openOnHover: "openOnHover", scrollStrategy: "scrollStrategy" }, outputs: { closed: "closed", opened: "opened" }, queries: [{ propertyName: "_allItems", predicate: GraniteMenuItemComponent, descendants: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: _MenuBaseComponent, decorators: [{
             type: Directive
@@ -1159,6 +1163,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                 type: Input
             }], openOnHover: [{
                 type: Input
+            }], scrollStrategy: [{
+                type: Input
             }], templateRef: [{
                 type: ViewChild,
                 args: [TemplateRef]
@@ -1524,9 +1530,8 @@ class GraniteMenuTriggerForDirective {
         if (this._clientOutput.device === 'touch') {
             panelClass.push('granite-overlay-pane-fill-width-bottom');
         }
-        const scrollStrategy = this._clientOutput.device !== 'touch'
-            ? this._overlay.scrollStrategies.reposition()
-            : undefined;
+        // setting scrollStrategy options to overlay
+        const scrollStrategy = this.setScrollStrategyToOverylay(this._clientOutput.device, this.menu.scrollStrategy);
         const hasBackdrop = this._clientOutput.device === 'touch' && !this.triggersSubmenu();
         //#endregion --- Touch device customizations ---
         // Create an overlay to stuff the menu (portal) into below
@@ -1923,7 +1928,30 @@ 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: i2.Directionality, optional: true }, { token: i1.FocusMonitor }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /**
+     * Sets the scroll strategy for the overlay based on the client output device and menu scroll strategy input.
+     *
+     * @param {OutputDeviceTypes} clientOutputDevice - The type of client output device (e.g., 'touch').
+     * @param {'reposition' | 'close'} menuScrollStrategyInput - The scroll strategy input for the menu.
+     * @returns {ScrollStrategy} The appropriate scroll strategy for the overlay.
+     */
+    setScrollStrategyToOverylay(clientOutputDevice, menuScrollStrategyInput) {
+        if (clientOutputDevice === 'touch') {
+            return undefined;
+        }
+        else {
+            if (menuScrollStrategyInput === 'close') {
+                return this._overlay.scrollStrategies.close();
+            }
+            else if (menuScrollStrategyInput === 'reposition') {
+                return this._overlay.scrollStrategies.reposition();
+            }
+            else {
+                return undefined;
+            }
+        }
+    }
+    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.ɵ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 +1988,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                     type: Optional
                 }, {
                     type: Self
-                }] }, { type: i2.Directionality, decorators: [{
+                }] }, { type: i3.Directionality, decorators: [{
                     type: Optional
                 }] }, { type: i1.FocusMonitor }, { type: undefined, decorators: [{
                     type: Inject,
@@ -2348,7 +2376,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$1.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.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 +2388,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$1.UniqueSelectionDispatcher }], propDecorators: { value: [{
+        }], ctorParameters: () => [{ type: i1.FocusMonitor }, { type: i2.UniqueSelectionDispatcher }], propDecorators: { value: [{
                 type: Input
             }], id: [{
                 type: Input
@@ -3618,7 +3646,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: 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.ɵ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.ɵ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 +3666,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: i2.Directionality, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i3.Directionality, decorators: [{
                     type: Optional
-                }] }, { type: i2$2.NgForm, decorators: [{
+                }] }, { type: i2$1.NgForm, decorators: [{
                     type: Optional
-                }] }, { type: i2$2.FormGroupDirective, decorators: [{
+                }] }, { type: i2$1.FormGroupDirective, decorators: [{
                     type: Optional
-                }] }, { type: i2$2.NgControl, decorators: [{
+                }] }, { type: i2$1.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
@@ -4447,7 +4475,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: i2.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: i3.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: [{
@@ -4473,7 +4501,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                     args: [GRANITE_CLIENT_OUTPUT]
                 }, {
                     type: Optional
-                }] }, { type: i2.Directionality, decorators: [{
+                }] }, { type: i3.Directionality, decorators: [{
                     type: Optional
                 }] }, { type: i1.FocusMonitor }], propDecorators: { contacts: [{
                 type: Input,
@@ -4629,17 +4657,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
-let legendPanelUid = 0;
-class LegendBaseComponent {
+class OverlayBaseComponent {
     constructor() {
-        this.xPosition = 'before';
+        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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: OverlayBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: OverlayBaseComponent, 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: OverlayBaseComponent, decorators: [{
             type: Directive,
             args: [{}]
         }], propDecorators: { templateRef: [{
@@ -4647,134 +4673,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                 args: [TemplateRef]
             }] } });
 
+let legendPanelUid = 0;
+class LegendBaseComponent extends OverlayBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.panelId = `granite-progress-bar-legend-panel-${legendPanelUid++}`;
+        this.xPosition = 'before';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: LegendBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: LegendBaseComponent, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: LegendBaseComponent, decorators: [{
+            type: Directive
+        }] });
+
 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);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 }); }
+    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);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);height:-moz-fit-content;height:fit-content}.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);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"] }]
+            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);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);height:-moz-fit-content;height:fit-content}.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) {
+class OverlayService {
+    constructor(_overlay, _focusMonitor, _outsideClickDispatcher) {
         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;
+        this._outsideClickDispatcher = _outsideClickDispatcher;
     }
-    _handleKeydown(event) {
-        if (event.key === 'Enter') {
-            event.preventDefault();
-            this.toggleLegend();
-        }
+    createOverlay(config, component, viewContainerRef) {
+        const overlayRef = this._overlay.create(config);
+        const portal = new TemplatePortal(component.templateRef, viewContainerRef);
+        overlayRef.attach(portal);
+        return overlayRef;
     }
-    _handleClick() {
-        this.toggleLegend();
+    closeOverlay(overlayRef, element) {
+        this._outsideClickDispatcher.remove(overlayRef);
+        overlayRef.detach();
+        this.restoreFocus(element);
     }
-    _restoreFocus(origin = 'program', options) {
+    restoreFocus(element, origin = 'program', options) {
         if (this._focusMonitor) {
-            this._focusMonitor.focusVia(this._element, origin, options);
+            this._focusMonitor.focusVia(element, origin, options);
         }
         else {
-            this._element.nativeElement.focus(options);
+            element.nativeElement.focus(options);
         }
     }
-    _desktopPositionStrategy() {
-        const positionStrategy = this._overlay
+    desktopPositionStrategy(element, selector) {
+        return this._overlay
             .position()
-            .flexibleConnectedTo(this._element)
+            .flexibleConnectedTo(element)
             .withLockedPosition()
-            .withTransformOriginOn('.granite-progress-bar-legend')
+            .withTransformOriginOn(selector)
             .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 = 4;
-        originY = overlayY === 'top' ? 'bottom' : 'top';
-        originFallbackY = overlayFallbackY === 'top' ? 'bottom' : 'top';
+    touchPositionStrategy() {
+        return this._overlay.position().global();
+    }
+    setPosition(positionStrategy, positionConfig) {
+        const { originX, originFallbackX, originY, originFallbackY, overlayX, overlayFallbackX, overlayY, overlayFallbackY, offsetX, offsetY, } = positionConfig;
         positionStrategy.withPositions([
             { originX, originY, overlayX, overlayY, offsetY },
             {
@@ -4799,18 +4764,173 @@ class GraniteProgressBarLegendTriggerForDirective {
                 offsetY: -offsetY,
             },
         ]);
+        return positionStrategy;
     }
-    _positionStrategy() {
-        if (this._clientOutput?.device !== 'touch') {
-            return this._desktopPositionStrategy();
+    subscribeOutsideClick(overlayRef, callback) {
+        this._outsideClickDispatcher.add(overlayRef);
+        overlayRef.outsidePointerEvents().subscribe((event) => {
+            event.stopPropagation();
+            if (callback) {
+                callback();
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: OverlayService, deps: [{ token: i1$2.Overlay }, { token: i1.FocusMonitor }, { token: i1$2.OverlayOutsideClickDispatcher }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: OverlayService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: OverlayService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1$2.Overlay }, { type: i1.FocusMonitor }, { type: i1$2.OverlayOutsideClickDispatcher }] });
+
+class GraniteOverlayTriggerForBaseDirective {
+    constructor() {
+        /** Client output device information */
+        this._clientOutput = inject(GRANITE_CLIENT_OUTPUT);
+        /** Client input device information */
+        this._clientInput = inject(GRANITE_CLIENT_INPUT);
+        this._dir = inject(Directionality);
+        this.offsetX = 0;
+        this.offsetY = 0;
+        this._overlayRef = null;
+        this._overlay = inject(Overlay);
+        this._element = inject((ElementRef));
+        this._viewContainerRef = inject(ViewContainerRef);
+        this._overlayService = inject(OverlayService);
+    }
+    ngOnDestroy() {
+        if (this._overlayRef) {
+            this._overlayRef.dispose();
+            this._overlayRef = null;
         }
-        return this._touchPositionStrategy();
     }
-    _touchPositionStrategy() {
-        return this._overlay.position().global();
+    getPositionConfig() {
+        const [originX, originFallbackX] = this.componentRef.xPosition === 'before'
+            ? ['end', 'start']
+            : ['start', 'end'];
+        const [overlayY, overlayFallbackY] = this.componentRef.yPosition === 'above'
+            ? ['bottom', 'top']
+            : ['top', 'bottom'];
+        let [originY, originFallbackY] = [overlayY, overlayFallbackY];
+        const [overlayX, overlayFallbackX] = [originX, originFallbackX];
+        originY = overlayY === 'top' ? 'bottom' : 'top';
+        originFallbackY = overlayFallbackY === 'top' ? 'bottom' : 'top';
+        return {
+            originX,
+            originFallbackX,
+            originY,
+            originFallbackY,
+            overlayX,
+            overlayFallbackX,
+            overlayY,
+            overlayFallbackY,
+            offsetX: this.offsetX,
+            offsetY: this.offsetY,
+        };
+    }
+    getPositionStrategy() {
+        let positionStrategy = this._overlayService.desktopPositionStrategy(this._element, this.selector);
+        const positionConfig = this.getPositionConfig();
+        positionStrategy = this._overlayService.setPosition(positionStrategy, positionConfig);
+        return positionStrategy;
+    }
+    getScrollStrategy() {
+        return this.setScrollStrategy('close');
+    }
+    setScrollStrategy(scrollStrategy) {
+        switch (scrollStrategy) {
+            case 'reposition':
+                return this._overlay.scrollStrategies.reposition();
+            case 'block':
+                return this._overlay.scrollStrategies.block();
+            case 'close':
+                return this._overlay.scrollStrategies.close();
+            default:
+                return this._overlay.scrollStrategies.close();
+        }
+    }
+    toggleOverlay(isOpen) {
+        isOpen ? this._closeOverlay() : this._openOverlay();
+        return !isOpen;
+    }
+    onOutsideClick() {
+        this._closeOverlay();
+    }
+    _openOverlay() {
+        this.componentRef.direction = this._dir.value === 'rtl' ? 'rtl' : 'ltr';
+        this.componentRef.clientInput = this._clientInput;
+        this.componentRef.clientOutput = this._clientOutput;
+        const panelClass = [];
+        if (this._clientOutput?.device === 'touch') {
+            panelClass.push('granite-overlay-pane-center');
+        }
+        const hasBackdrop = this._clientOutput?.device === 'touch';
+        const config = new OverlayConfig({
+            positionStrategy: this.getPositionStrategy(),
+            backdropClass: 'granite-overlay-dark-glass-backdrop',
+            scrollStrategy: this.getScrollStrategy(),
+            direction: this._dir,
+            panelClass,
+            hasBackdrop,
+        });
+        this._overlayRef = this._overlayService.createOverlay(config, this.componentRef, this._viewContainerRef);
+        this._overlayService.subscribeOutsideClick(this._overlayRef, () => this.onOutsideClick());
+    }
+    _closeOverlay() {
+        if (!this._overlayRef) {
+            return;
+        }
+        this._overlayService.closeOverlay(this._overlayRef, this._element);
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteOverlayTriggerForBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: GraniteOverlayTriggerForBaseDirective, selector: "[graniteOverlayTriggerForBase]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteOverlayTriggerForBaseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[graniteOverlayTriggerForBase]',
+                }]
+        }], propDecorators: { _clientOutput: [{
+                type: Optional
+            }], _clientInput: [{
+                type: Optional
+            }], _dir: [{
+                type: Optional
+            }] } });
+
+class GraniteProgressBarLegendTriggerForDirective extends GraniteOverlayTriggerForBaseDirective {
+    constructor() {
+        super(...arguments);
+        this.isLegendOpen = false;
+        this.selector = '.granite-progress-bar-legend';
+        this.offsetY = 4;
+    }
+    get legend() {
+        return this.componentRef;
+    }
+    set legend(value) {
+        this.componentRef = value;
+    }
+    handleKeydown(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.isLegendOpen = this.toggleOverlay(this.isLegendOpen);
+        }
+    }
+    handleClick() {
+        this.isLegendOpen = this.toggleOverlay(this.isLegendOpen);
+    }
+    onOutsideClick() {
+        super.onOutsideClick();
+        this.isLegendOpen = false;
+    }
+    getScrollStrategy() {
+        return this.setScrollStrategy('reposition');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarLegendTriggerForDirective, deps: null, 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" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarLegendTriggerForDirective, decorators: [{
             type: Directive,
@@ -4819,25 +4939,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                     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)',
+                        '[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: [{
+        }], propDecorators: { legend: [{
                 type: Input,
                 args: ['graniteProgressBarLegendTriggerFor']
             }] } });
@@ -4908,7 +5016,7 @@ class GraniteProgressBarComponent {
         }
     }
     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", legendData: "legendData", showLabel: "showLabel", showLegend: "showLegend" }, host: { properties: { "class.label-present": "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\n<ng-container *ngIf=\"showLegend\">\n  <button\n    graniteFlatButton\n    [graniteProgressBarLegendTriggerFor]=\"legend\"\n    class=\"legend-btn\"\n  >\n    <granite-icon fontIcon=\"icon-caret-down\"></granite-icon>\n  </button>\n</ng-container>\n\n<granite-progress-bar-legend\n  #legend\n  [legendItems]=\"legendItems\"\n></granite-progress-bar-legend>\n", styles: [":host{width:100%;display:flex;align-items:center;box-sizing:border-box;height:.5rem;border-radius:var(--granite-radius-m);font-size:var(--granite-font-size-body-small);line-height:var(--granite-font-size-body-small)}:host(.label-present){height:auto!important}.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%;padding:var(--granite-spacing-4) 0}.legend-btn{width:16px;height:16px;margin-inline-start:var(--granite-spacing-16)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: GraniteHideOnOverflowDirective, selector: "[graniteHideOnOverflow]", exportAs: ["graniteHideOnOverflow"] }, { kind: "component", type: i3.GraniteTooltipComponent, selector: "granite-tooltip" }, { kind: "directive", type: i3.GraniteTooltipTriggerForDirective, selector: "[graniteTooltipTriggerFor]", inputs: ["graniteTooltipTriggerFor", "hideDelay", "showDelay", "showOnKeyboardFocus", "showOnClick"] }, { kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }, { kind: "component", type: GraniteButtonComponent, selector: "button[graniteButton],\n    button[granitePrimaryButton],\n    button[graniteFlatButton],\n    button[graniteToolbarButton]\n  ", inputs: ["disabled", "toggled"], exportAs: ["graniteButton"] }, { kind: "component", type: GraniteProgressBarLegendComponent, selector: "granite-progress-bar-legend", inputs: ["legendItems"] }, { kind: "directive", type: GraniteProgressBarLegendTriggerForDirective, selector: "[graniteProgressBarLegendTriggerFor]", inputs: ["graniteProgressBarLegendTriggerFor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteProgressBarComponent, selector: "granite-progress-bar", inputs: { progressBarData: "progressBarData", legendData: "legendData", showLabel: "showLabel", showLegend: "showLegend" }, host: { properties: { "class.label-present": "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\n<ng-container *ngIf=\"showLegend\">\n  <button\n    graniteFlatButton\n    [graniteProgressBarLegendTriggerFor]=\"legend\"\n    class=\"legend-btn\"\n  >\n    <granite-icon fontIcon=\"icon-caret-down\"></granite-icon>\n  </button>\n</ng-container>\n\n<granite-progress-bar-legend\n  #legend\n  [legendItems]=\"legendItems\"\n></granite-progress-bar-legend>\n", styles: [":host{width:100%;display:flex;align-items:center;box-sizing:border-box;height:.5rem;border-radius:var(--granite-radius-m);font-size:var(--granite-font-size-body-small);line-height:var(--granite-font-size-body-small)}:host(.label-present){height:auto!important}.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%;padding:var(--granite-spacing-4) 0}.legend-btn{width:16px;height:16px;margin-inline-start:var(--granite-spacing-16)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: GraniteHideOnOverflowDirective, selector: "[graniteHideOnOverflow]", exportAs: ["graniteHideOnOverflow"] }, { kind: "component", type: i3$1.GraniteTooltipComponent, selector: "granite-tooltip" }, { kind: "directive", type: i3$1.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,
@@ -5036,7 +5144,8 @@ class GraniteCoreModule {
             ClientOutputTouchDirective,
             ClientInputDesktopDirective,
             ClientInputTouchDirective,
-            GraniteHideOnOverflowDirective], exports: [ClientOutputDesktopDirective,
+            GraniteHideOnOverflowDirective,
+            GraniteOverlayTriggerForBaseDirective], exports: [ClientOutputDesktopDirective,
             ClientOutputTouchDirective,
             ClientInputDesktopDirective,
             ClientInputTouchDirective,
@@ -5052,6 +5161,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                         ClientInputDesktopDirective,
                         ClientInputTouchDirective,
                         GraniteHideOnOverflowDirective,
+                        GraniteOverlayTriggerForBaseDirective,
                     ],
                     exports: [
                         ClientOutputDesktopDirective,
@@ -5146,11 +5256,11 @@ class GraniteCardListComponent {
         this.gap = 'small';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteCardListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteCardListComponent, selector: "granite-card-list", inputs: { orientation: "orientation", wrap: "wrap", gap: "gap" }, ngImport: i0, template: "<div\n  class=\"card-list-wrapper\"\n  [class.vertical]=\"orientation === 'vertical'\"\n  [class.horizontal]=\"orientation === 'horizontal'\"\n  [class.wrap]=\"wrap === 'wrap'\"\n  [class.nowrap]=\"wrap === 'nowrap'\"\n  [class.small]=\"gap === 'small'\"\n  [class.medium]=\"gap === 'medium'\"\n  [class.large]=\"gap === 'large'\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [":host{width:100%}.card-list-wrapper{display:flex;flex-direction:row;padding:var(--granite-spacing-4)}.card-list-wrapper.horizontal.nowrap{overflow-x:auto}.card-list-wrapper.horizontal.wrap{overflow-y:auto}.card-list-wrapper.vertical{flex-direction:column}.card-list-wrapper.vertical.nowrap{overflow-y:auto}.card-list-wrapper.vertical.wrap{overflow-x:auto}.card-list-wrapper.small{gap:var(--granite-spacing-2)}.card-list-wrapper.medium{gap:var(--granite-spacing-4)}.card-list-wrapper.large{gap:var(--granite-spacing-8)}.card-list-wrapper.wrap{flex-wrap:wrap}.card-list-wrapper.nowrap{flex-wrap:nowrap}.card-list-wrapper::-webkit-scrollbar{width:calc(var(--granite-size-base-rem) * .25);height:calc(var(--granite-size-base-rem) * .25);border-radius:var(--granite-radius-s)}.card-list-wrapper::-webkit-scrollbar-thumb{background:var(--granite-color-border-hard);border-radius:var(--granite-radius-s)}.card-list-wrapper::-webkit-scrollbar-track{background:var(--granite-color-background-page)}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteCardListComponent, selector: "granite-card-list", inputs: { orientation: "orientation", wrap: "wrap", gap: "gap" }, ngImport: i0, template: "<div\n  class=\"card-list-wrapper\"\n  [class.vertical]=\"orientation === 'vertical'\"\n  [class.horizontal]=\"orientation === 'horizontal'\"\n  [class.wrap]=\"wrap === 'wrap'\"\n  [class.nowrap]=\"wrap === 'nowrap'\"\n  [class.small]=\"gap === 'small'\"\n  [class.medium]=\"gap === 'medium'\"\n  [class.large]=\"gap === 'large'\"\n  cdkScrollable\n>\n  <ng-content></ng-content>\n</div>\n", styles: [":host{width:100%}.card-list-wrapper{display:flex;flex-direction:row;padding:var(--granite-spacing-4)}.card-list-wrapper.horizontal.nowrap{overflow-x:auto}.card-list-wrapper.horizontal.wrap{overflow-y:auto}.card-list-wrapper.vertical{flex-direction:column}.card-list-wrapper.vertical.nowrap{overflow-y:auto}.card-list-wrapper.vertical.wrap{overflow-x:auto}.card-list-wrapper.small{gap:var(--granite-spacing-2)}.card-list-wrapper.medium{gap:var(--granite-spacing-4)}.card-list-wrapper.large{gap:var(--granite-spacing-8)}.card-list-wrapper.wrap{flex-wrap:wrap}.card-list-wrapper.nowrap{flex-wrap:nowrap}.card-list-wrapper::-webkit-scrollbar{width:calc(var(--granite-size-base-rem) * .25);height:calc(var(--granite-size-base-rem) * .25);border-radius:var(--granite-radius-s)}.card-list-wrapper::-webkit-scrollbar-thumb{background:var(--granite-color-border-hard);border-radius:var(--granite-radius-s)}.card-list-wrapper::-webkit-scrollbar-track{background:var(--granite-color-background-page)}\n"], dependencies: [{ kind: "directive", type: i1$3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteCardListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'granite-card-list', template: "<div\n  class=\"card-list-wrapper\"\n  [class.vertical]=\"orientation === 'vertical'\"\n  [class.horizontal]=\"orientation === 'horizontal'\"\n  [class.wrap]=\"wrap === 'wrap'\"\n  [class.nowrap]=\"wrap === 'nowrap'\"\n  [class.small]=\"gap === 'small'\"\n  [class.medium]=\"gap === 'medium'\"\n  [class.large]=\"gap === 'large'\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [":host{width:100%}.card-list-wrapper{display:flex;flex-direction:row;padding:var(--granite-spacing-4)}.card-list-wrapper.horizontal.nowrap{overflow-x:auto}.card-list-wrapper.horizontal.wrap{overflow-y:auto}.card-list-wrapper.vertical{flex-direction:column}.card-list-wrapper.vertical.nowrap{overflow-y:auto}.card-list-wrapper.vertical.wrap{overflow-x:auto}.card-list-wrapper.small{gap:var(--granite-spacing-2)}.card-list-wrapper.medium{gap:var(--granite-spacing-4)}.card-list-wrapper.large{gap:var(--granite-spacing-8)}.card-list-wrapper.wrap{flex-wrap:wrap}.card-list-wrapper.nowrap{flex-wrap:nowrap}.card-list-wrapper::-webkit-scrollbar{width:calc(var(--granite-size-base-rem) * .25);height:calc(var(--granite-size-base-rem) * .25);border-radius:var(--granite-radius-s)}.card-list-wrapper::-webkit-scrollbar-thumb{background:var(--granite-color-border-hard);border-radius:var(--granite-radius-s)}.card-list-wrapper::-webkit-scrollbar-track{background:var(--granite-color-background-page)}\n"] }]
+            args: [{ selector: 'granite-card-list', template: "<div\n  class=\"card-list-wrapper\"\n  [class.vertical]=\"orientation === 'vertical'\"\n  [class.horizontal]=\"orientation === 'horizontal'\"\n  [class.wrap]=\"wrap === 'wrap'\"\n  [class.nowrap]=\"wrap === 'nowrap'\"\n  [class.small]=\"gap === 'small'\"\n  [class.medium]=\"gap === 'medium'\"\n  [class.large]=\"gap === 'large'\"\n  cdkScrollable\n>\n  <ng-content></ng-content>\n</div>\n", styles: [":host{width:100%}.card-list-wrapper{display:flex;flex-direction:row;padding:var(--granite-spacing-4)}.card-list-wrapper.horizontal.nowrap{overflow-x:auto}.card-list-wrapper.horizontal.wrap{overflow-y:auto}.card-list-wrapper.vertical{flex-direction:column}.card-list-wrapper.vertical.nowrap{overflow-y:auto}.card-list-wrapper.vertical.wrap{overflow-x:auto}.card-list-wrapper.small{gap:var(--granite-spacing-2)}.card-list-wrapper.medium{gap:var(--granite-spacing-4)}.card-list-wrapper.large{gap:var(--granite-spacing-8)}.card-list-wrapper.wrap{flex-wrap:wrap}.card-list-wrapper.nowrap{flex-wrap:nowrap}.card-list-wrapper::-webkit-scrollbar{width:calc(var(--granite-size-base-rem) * .25);height:calc(var(--granite-size-base-rem) * .25);border-radius:var(--granite-radius-s)}.card-list-wrapper::-webkit-scrollbar-thumb{background:var(--granite-color-border-hard);border-radius:var(--granite-radius-s)}.card-list-wrapper::-webkit-scrollbar-track{background:var(--granite-color-background-page)}\n"] }]
         }], propDecorators: { orientation: [{
                 type: Input
             }], wrap: [{
@@ -5242,7 +5352,7 @@ class GraniteCardListModule {
             GraniteCardFooterComponent,
             GraniteCardAvatarComponent,
             GraniteCardHeaderTitleComponent,
-            GraniteCardHeaderSubTitleComponent], imports: [CommonModule], exports: [GraniteCardComponent,
+            GraniteCardHeaderSubTitleComponent], imports: [CommonModule, ScrollingModule], exports: [GraniteCardComponent,
             GraniteCardListComponent,
             GraniteCardContentComponent,
             GraniteCardHeaderComponent,
@@ -5252,7 +5362,7 @@ class GraniteCardListModule {
             GraniteCardAvatarComponent,
             GraniteCardHeaderTitleComponent,
             GraniteCardHeaderSubTitleComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteCardListModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteCardListModule, imports: [CommonModule, ScrollingModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteCardListModule, decorators: [{
             type: NgModule,
@@ -5269,7 +5379,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                         GraniteCardHeaderTitleComponent,
                         GraniteCardHeaderSubTitleComponent,
                     ],
-                    imports: [CommonModule],
+                    imports: [CommonModule, ScrollingModule],
                     exports: [
                         GraniteCardComponent,
                         GraniteCardListComponent,