@ifsworld/granite-components 10.0.1 → 11.0.0

package/fesm2015/ifsworld-granite-components.mjs

@@ -1,4132 +0,0 @@
-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, ViewEncapsulation, Pipe } from '@angular/core';
-import * as i1$1 from '@angular/common';
-import { CommonModule, DOCUMENT } from '@angular/common';
-import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
-import { Subject, BehaviorSubject, combineLatest, Subscription, merge, of, asapScheduler, fromEvent } from 'rxjs';
-import { takeUntil, filter, map, startWith, switchMap, take, delay } from 'rxjs/operators';
-import { __awaiter } from 'tslib';
-import { ComponentHarness, HarnessPredicate, TestKey } from '@angular/cdk/testing';
-import * as i1$2 from '@angular/cdk/overlay';
-import { OverlayConfig, OverlayModule } 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 { normalizePassiveListenerOptions } from '@angular/cdk/platform';
-import * as i3 from '@angular/cdk/bidi';
-import * as i2 from '@angular/cdk/collections';
-import { SelectionModel } from '@angular/cdk/collections';
-import * as i2$1 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-
-class GraniteArrangeGridItemComponent {
-    /**
-     * Number of cells the item would span. Used by arrange grid in column
-     * orientation to fill any unused space caused by wrapped items.
-     */
-    set columnSpan(value) {
-        this._columnSpan = value;
-        this.updateStyles();
-    }
-    constructor(element) {
-        this.element = element;
-        /**
-         * Column span to render.
-         * For use in template only. Do not use outside of this component.
-         * @ignore
-         */
-        this._columnSpan = null;
-        /* no-op */
-    }
-    /**
-     * Update element styles
-     */
-    updateStyles() {
-        this.setCssProperty('--column-span', this._columnSpan ? this._columnSpan.toString() : null);
-    }
-    /**
-     * Set CSS variable value or remove it if a null value is given.
-     * Would of course rather have used property binding but that is not
-     * supported until (perhaps) Angular 9.
-     * See: https://github.com/angular/angular/issues/9343
-     */
-    setCssProperty(variable, value) {
-        this.element.nativeElement.style.setProperty(variable, value);
-    }
-}
-GraniteArrangeGridItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteArrangeGridItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-GraniteArrangeGridItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GraniteArrangeGridItemComponent, selector: "granite-arrange-grid-item", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{--column-span: $default-column-span;display:grid;grid-column:span var(--column-span, 1)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteArrangeGridItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'granite-arrange-grid-item', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--column-span: $default-column-span;display:grid;grid-column:span var(--column-span, 1)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
-
-var GraniteArrangeGridOrientation;
-(function (GraniteArrangeGridOrientation) {
-    GraniteArrangeGridOrientation["columns"] = "columns";
-    GraniteArrangeGridOrientation["rows"] = "rows";
-})(GraniteArrangeGridOrientation || (GraniteArrangeGridOrientation = {}));
-class GraniteArrangeGridComponent {
-    /**
-     * Number of grid columns to use when orientation is set to `column`. The
-     * default is two columns.
-     */
-    set cols(value) {
-        this._cols = Math.max(1, Math.round(coerceNumberProperty(value)));
-    }
-    get cols() {
-        return this._cols;
-    }
-    set rows(value) {
-        // Prevent pointless usage
-        throw Error('Explicitly setting rows value for arrange grid is unsupported');
-    }
-    get rows() {
-        return this._rows;
-    }
-    constructor(element) {
-        this.element = element;
-        /** How to present grid items; `columns` (default) or `rows` */
-        this.orientation = GraniteArrangeGridOrientation.columns;
-        /** Exposes column orientation to template */
-        this.classColumnOrientation = false;
-        /** Exposes row orientation to template */
-        this.classRowOrientation = false;
-        /** Number of columns to render */
-        this._cols = GraniteArrangeGridComponent.defaultCols;
-        /** Nexted on component destruction to complete other observables. */
-        this.destroy$ = new Subject();
-        /* no-op */
-    }
-    ngAfterContentInit() {
-        // Update style whenever grid item components change in content
-        this.arrangeGridItemComponents.changes
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => this.updateStyles());
-        this.updateStyles();
-    }
-    ngOnChanges(changes) {
-        if ((changes.orientation && !changes.orientation.isFirstChange()) ||
-            (changes.cols && !changes.cols.isFirstChange())) {
-            this.updateStyles();
-        }
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-    }
-    /**
-     * Update grid row template style.
-     *
-     * Use content height of all but last row and let the last grow
-     * to take up any remaining space.
-     */
-    updateStyles() {
-        const children = (this.arrangeGridItemComponents || []).length;
-        if (this.orientation === GraniteArrangeGridOrientation.columns) {
-            // If too many items was placed into too few colums, there would
-            // be some wrapping. Take that into account when calculating the
-            // number of rows.
-            this._rows = Math.trunc((children - 1) / (this._cols || 1)) + 1;
-            this.classColumnOrientation = true;
-            this.classRowOrientation = false;
-            if (children > 0) {
-                // Fill any unused space caused by wrapped items by making the
-                // last item also span over remaining cells.
-                this.arrangeGridItemComponents.forEach((c) => (c.columnSpan = null));
-                this.arrangeGridItemComponents.last.columnSpan =
-                    this._rows * this._cols - children + 1;
-            }
-        }
-        else {
-            this._cols = 1; // In row orientation, there is just a single column
-            this._rows = children;
-            this.classColumnOrientation = false;
-            this.classRowOrientation = true;
-        }
-        this.setCssProperty('--cols', this._cols.toString());
-        this.setCssProperty('--rows', this._rows.toString());
-    }
-    /**
-     * Set CSS variable value or remove it if a null value is given.
-     * Would of course rather have used property binding but that is not
-     * supported until (perhaps) Angular 9.
-     * See: https://github.com/angular/angular/issues/9343
-     *
-     * TODO: Replace with property binding with Angular 9 upgrade
-     */
-    setCssProperty(variable, value) {
-        this.element.nativeElement.style.setProperty(variable, value);
-    }
-}
-/** Default number of columns to use in column orientation */
-GraniteArrangeGridComponent.defaultCols = 2;
-GraniteArrangeGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteArrangeGridComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-GraniteArrangeGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GraniteArrangeGridComponent, selector: "granite-arrange-grid", inputs: { orientation: "orientation", cols: "cols" }, host: { properties: { "class.column-orientation": "this.classColumnOrientation", "class.row-orientation": "this.classRowOrientation" } }, queries: [{ propertyName: "arrangeGridItemComponents", predicate: GraniteArrangeGridItemComponent }], usesOnChanges: true, ngImport: i0, template: "<ng-content select=\"granite-arrange-grid-item\"></ng-content>\n", styles: ["@media only screen and (min-width: 960px){:host{--cols: 1;--rows: 1;display:grid;grid-template-columns:repeat(var(--cols, 1),1fr);column-gap:.5rem;row-gap:.5rem}:host.row-orientation{grid-template-columns:auto;grid-template-rows:repeat(calc(var(--rows, 1) - 1),max-content)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteArrangeGridComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'granite-arrange-grid', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"granite-arrange-grid-item\"></ng-content>\n", styles: ["@media only screen and (min-width: 960px){:host{--cols: 1;--rows: 1;display:grid;grid-template-columns:repeat(var(--cols, 1),1fr);column-gap:.5rem;row-gap:.5rem}:host.row-orientation{grid-template-columns:auto;grid-template-rows:repeat(calc(var(--rows, 1) - 1),max-content)}}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { orientation: [{
-                type: Input
-            }], classColumnOrientation: [{
-                type: HostBinding,
-                args: ['class.column-orientation']
-            }], classRowOrientation: [{
-                type: HostBinding,
-                args: ['class.row-orientation']
-            }], arrangeGridItemComponents: [{
-                type: ContentChildren,
-                args: [GraniteArrangeGridItemComponent]
-            }], cols: [{
-                type: Input
-            }] } });
-
-class GraniteArrangeGridModule {
-}
-GraniteArrangeGridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteArrangeGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-GraniteArrangeGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: GraniteArrangeGridModule, declarations: [GraniteArrangeGridComponent, GraniteArrangeGridItemComponent], imports: [CommonModule], exports: [GraniteArrangeGridComponent, GraniteArrangeGridItemComponent] });
-GraniteArrangeGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteArrangeGridModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteArrangeGridModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [GraniteArrangeGridComponent, GraniteArrangeGridItemComponent],
-                    imports: [CommonModule],
-                    exports: [GraniteArrangeGridComponent, GraniteArrangeGridItemComponent],
-                }]
-        }] });
-
-/**
- * Grid item component
- *
- * Merely a wrapper for CSS Grid items, accepting item style as input parameters.
- */
-class GraniteGridItemComponent {
-    constructor(element, renderer) {
-        this.element = element;
-        this.renderer = renderer;
-    }
-    ngOnChanges() {
-        this.updateStyles();
-    }
-    /**
-     * Update element styles
-     */
-    updateStyles() {
-        this.setStyle('gridColumnStart', this.columnStart);
-        this.setStyle('gridColumnEnd', this.columnEnd);
-        this.setStyle('gridRowStart', this.rowStart);
-        this.setStyle('gridRowEnd', this.rowEnd);
-    }
-    /**
-     * Sets the element style. Needs to be set manually to avoid "Changed after
-     * checked" errors that would occur with HostBinding.
-     */
-    setStyle(property, value) {
-        this.renderer.setStyle(this.element.nativeElement, property, value || '');
-    }
-}
-GraniteGridItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteGridItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-GraniteGridItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GraniteGridItemComponent, selector: "granite-grid-item", inputs: { columnStart: "columnStart", columnEnd: "columnEnd", rowStart: "rowStart", rowEnd: "rowEnd" }, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteGridItemComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'granite-grid-item',
-                    template: '<ng-content></ng-content>',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { columnStart: [{
-                type: Input
-            }], columnEnd: [{
-                type: Input
-            }], rowStart: [{
-                type: Input
-            }], rowEnd: [{
-                type: Input
-            }] } });
-/**
- * Grid
- *
- * A wrapper around a native CSS Grid. Anything can be used for grid items, but
- * `GridItemComponent` is recommended for common cases.
- */
-class GraniteGridComponent {
-    /**
-     * Number of grid columns, unless set via styling (grid-template-columns)
-     *
-     * Setting this value will produce equally sized columns
-     */
-    set cols(value) {
-        this._cols = Math.max(1, Math.round(coerceNumberProperty(value)));
-    }
-    get cols() {
-        return this._cols;
-    }
-    /**
-     * Number of grid rows, unless set via styling (grid-template-rows)
-     *
-     * Setting this value will produce equally sized rows
-     */
-    set rows(value) {
-        this._rows = Math.max(1, Math.round(coerceNumberProperty(value)));
-    }
-    get rows() {
-        return this._rows;
-    }
-    constructor(element) {
-        this.element = element;
-    }
-    ngAfterContentInit() {
-        this.updateStyles();
-    }
-    ngOnChanges(changes) {
-        if ((changes.cols && !changes.cols.isFirstChange()) ||
-            (changes.rows && !changes.rows.isFirstChange())) {
-            this.updateStyles();
-        }
-    }
-    /** Update element styles */
-    updateStyles() {
-        this.updateColumnStyles();
-        this.updateRowStyles();
-    }
-    /**
-     * Set CSS variable value or remove it if a null value is given.
-     * Would of course rather have used property binding but that is not
-     * supported until (perhaps) Angular 9.
-     * See: https://github.com/angular/angular/issues/9343
-     *
-     * TODO: Replace with property binding with Angular 9 upgrade
-     */
-    setCssProperty(variable, value) {
-        this.element.nativeElement.style.setProperty(variable, value);
-    }
-    /** Update grid column template style  */
-    updateColumnStyles() {
-        this.setCssProperty('--cols', (this._cols && this._cols.toString()) || null);
-    }
-    /** Update grid row template style  */
-    updateRowStyles() {
-        this.setCssProperty('--rows', (this._rows && this._rows.toString()) || null);
-    }
-}
-GraniteGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteGridComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-GraniteGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GraniteGridComponent, selector: "granite-grid", inputs: { cols: "cols", rows: "rows" }, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{--cols: 1;--rows: 1;display:grid;grid-template-columns:repeat(var(--cols, 1),1fr);grid-template-rows:repeat(var(--rows, 1),1fr)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteGridComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'granite-grid', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--cols: 1;--rows: 1;display:grid;grid-template-columns:repeat(var(--cols, 1),1fr);grid-template-rows:repeat(var(--rows, 1),1fr)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { cols: [{
-                type: Input
-            }], rows: [{
-                type: Input
-            }] } });
-
-class GraniteGridModule {
-}
-GraniteGridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-GraniteGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: GraniteGridModule, declarations: [GraniteGridComponent, GraniteGridItemComponent], imports: [CommonModule], exports: [GraniteGridComponent, GraniteGridItemComponent] });
-GraniteGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteGridModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteGridModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [GraniteGridComponent, GraniteGridItemComponent],
-                    imports: [CommonModule],
-                    exports: [GraniteGridComponent, GraniteGridItemComponent],
-                }]
-        }] });
-
-const TOKEN_PREFIX = 'granite-';
-const TOKEN_PREFIX_OLD = 'fnd-'; // TODO: Remove this when all tokens have 'granite-' as the prefix
-/**
- * Get the theme that corresponds to a given ID
- */
-function getThemeById(themes, id) {
-    const theme = id !== undefined ? themes.find((t) => t.id === id) : undefined;
-    return theme;
-}
-/**
- * Apply a theme to a DOM element by iterating though all tokens,
- * setting a CSS variable for each one.
- *
- * @param theme Theme to set
- * @param element Target element
- */
-function applyTheme(theme, element) {
-    applyTokens(theme.tokens, element);
-}
-/**
- * Set a CSS variable for each token on the specified element.
- *
- * @param theme Theme to set
- * @param element Target element
- */
-function applyTokens(tokens, element) {
-    for (const token of Object.keys(tokens)) {
-        element.style.setProperty(token, tokens[token]);
-    }
-}
-/**
- * Remove theme token CSS variables from an element using the specified keys
- *
- * @param theme Theme with tokens to clear
- * @param element Target element
- */
-function clearTheme(theme, element) {
-    clearTokens(Object.keys(theme.tokens), element);
-}
-/**
- * Remove token CSS variables from an element using the specified keys.
- *
- * @param keys Token keys
- * @param element Target element
- */
-function clearTokens(keys, element) {
-    for (const token of keys) {
-        element.style.removeProperty(token);
-    }
-}
-function isValidToken(key) {
-    return (key && (key.startsWith(TOKEN_PREFIX) || key.startsWith(TOKEN_PREFIX_OLD)));
-}
-function setPropertyValue(name, value, element) {
-    if (element && element.style && value != null) {
-        element.style.setProperty(name, isValidToken(value) ? `var(--${value})` : value);
-    }
-}
-
-class GraniteBadgeComponent {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        /** Pill style badge */
-        this.pill = false;
-    }
-    ngOnChanges(changes) {
-        if (changes.backgroundColor) {
-            if (changes.backgroundColor.previousValue !==
-                changes.backgroundColor.currentValue) {
-                setPropertyValue('background-color', changes.backgroundColor.currentValue, this.elementRef.nativeElement);
-            }
-        }
-        if (changes.color) {
-            if (changes.color.previousValue !== changes.color.currentValue) {
-                setPropertyValue('color', changes.color.currentValue, this.elementRef.nativeElement);
-            }
-        }
-    }
-}
-GraniteBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteBadgeComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-GraniteBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GraniteBadgeComponent, selector: "granite-badge", inputs: { backgroundColor: "backgroundColor", color: "color", pill: "pill" }, host: { properties: { "class.granite-badge-pill": "pill" }, classAttribute: "granite-badge" }, exportAs: ["graniteBadge"], usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:-moz-inline-flex;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;align-items:center;background-color:var(--granite-color-signal-neutral);color:var(--granite-color-text-static-light);border-radius:var(--granite-radius-s);font-size:var(--granite-font-size-body-small);padding-inline:var(--granite-spacing-8);padding-block:var(--granite-spacing-4)}:host(.granite-badge-pill){border-radius:var(--granite-radius-l)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteBadgeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'granite-badge', exportAs: 'graniteBadge', host: {
-                        class: 'granite-badge',
-                        '[class.granite-badge-pill]': 'pill',
-                    }, template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:-moz-inline-flex;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;align-items:center;background-color:var(--granite-color-signal-neutral);color:var(--granite-color-text-static-light);border-radius:var(--granite-radius-s);font-size:var(--granite-font-size-body-small);padding-inline:var(--granite-spacing-8);padding-block:var(--granite-spacing-4)}:host(.granite-badge-pill){border-radius:var(--granite-radius-l)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { backgroundColor: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], pill: [{
-                type: Input
-            }] } });
-
-class GraniteBadgeModule {
-}
-GraniteBadgeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-GraniteBadgeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: GraniteBadgeModule, declarations: [GraniteBadgeComponent], imports: [CommonModule], exports: [GraniteBadgeComponent] });
-GraniteBadgeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteBadgeModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteBadgeModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [GraniteBadgeComponent],
-                    imports: [CommonModule],
-                    exports: [GraniteBadgeComponent],
-                }]
-        }] });
-
-class GraniteBadgeHarness extends ComponentHarness {
-    /**
-     * Gets a `HarnessPredicate` that can be used to search for a `GraniteBadgeHarness` that meets
-     * certain criteria.
-     * @param options Options for filtering which badge instances are considered a match.
-     * @return a `HarnessPredicate` configured with the given options.
-     */
-    static with(options = {}) {
-        const predicate = new HarnessPredicate(GraniteBadgeHarness, options);
-        predicate.addOption('text', options.text, (harness, label) => HarnessPredicate.stringMatches(harness.getText(), label));
-        predicate.addOption('pill', options.pill, (harness, pill) => __awaiter(this, void 0, void 0, function* () { return (yield harness.isPill()) === pill; }));
-        return predicate;
-    }
-    /** Gets the Badge text. */
-    getText() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return (yield this.host()).text();
-        });
-    }
-    /** Whether it's a Pill type badge. */
-    isPill() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return (yield this.host()).hasClass('granite-badge-pill');
-        });
-    }
-}
-GraniteBadgeHarness.hostSelector = 'granite-badge';
-
-/**
- * Returns an ease-out CSS animation string with a slightly steeper curve
- * than usual.
- *
- * @param duration Duration in milliseconds
- * @param delay Delay in milliseconds
- */
-function getEaseOutSteep(duration, delay) {
-    return (`${duration}ms ` +
-        (delay !== undefined ? ` ${delay}ms ` : '') +
-        'cubic-bezier(0, 0, 0.2, 1)');
-}
-/**
- * Returns an ease-out-back CSS animation string with a slightly steeper
- * curve than usual.
- *
- * @param duration Duration in milliseconds
- * @param delay Delay in milliseconds
- */
-function getEaseOutSteepBack(duration, delay) {
-    return (`${duration}ms ` +
-        (delay !== undefined ? ` ${delay}ms ` : '') +
-        'cubic-bezier(.37,1.3,.77,1)');
-}
-/**
- * Returns a linear CSS animation string
- *
- * @param duration Duration in milliseconds
- * @param delay Delay in milliseconds
- */
-function getEaseLinear(duration, delay) {
-    return (`${duration}ms ` + (delay !== undefined ? ` ${delay}ms ` : '') + 'linear');
-}
-
-const easeOut120 = getEaseOutSteep(120);
-/**
- * Animations used by the `granite-menu` component, showing the desktop interface.
- * @docs-private
- */
-const graniteMenuDesktopAnimations = {
-    transformMenuDesktop: trigger('transformMenuDesktop', [
-        state('void', style({
-            opacity: 0,
-            transform: 'scale(0.9)',
-        })),
-        transition('void => enter', group([
-            query('.granite-menu-content', animate(getEaseLinear(100), style({
-                opacity: 1,
-            }))),
-            animate(easeOut120, style({ transform: 'scale(1)' })),
-        ])),
-        transition('* => void', animate(getEaseLinear(100, 25), style({ opacity: 0 }))),
-    ]),
-};
-
-const defaultDuration = 300;
-const defaultDelay = 200;
-const easeOut = getEaseOutSteep(defaultDuration);
-const linear = getEaseLinear(defaultDuration);
-const linearDelayed = getEaseLinear(defaultDuration, defaultDelay);
-/**
- * Insanely fast travel somewhere on or off the stage,
- * to set a great starting position.
- *
- * For some reason this has to be animated with > 0ms time.
- * Setting style directly gets ignored.
- */
-const teleport = '1ms linear';
-/**
- * Style used by our menu stars to make grand entrée et sortie from/to below
- * the viewport stage.
- */
-const inTheOrchestraPit = style({
-    transform: 'translateX(0) translateY(100%)',
-    opacity: 0,
-});
-/** Style for a menu at the center of attention, on the viewport stage */
-const onStage = style({
-    opacity: 1,
-    transform: 'translateX(0) translateY(0)',
-});
-/**
- * Style for a (sub) menu starting position at the side of the stage, waiting
- * to make an entrance by sliding into view, pushing the previous (parent)
- * menu off.
- */
-const awaitingCue = style({
-    opacity: 0,
-    transform: 'translateX(100vw) translateY(0)',
-});
-/**
- * Style for a (parent) menu that has been pushed aside by a debutant
- * (sub) menu and therefore, although maybe temporarily, left the spotlight.
- *
- * @param translateY Where to place on Y axis
- */
-const retired = style({
-    opacity: 1,
-    transform: `translateX(-100vw) translateY(0)`,
-});
-/**
- * Style for an active (sub) menu that dances across the stage, along with its
- * parent menu, as a result of the user panning. Requires an `xOffset`
- * parameter for the distance.
- */
-const futsalShuffle = style({
-    transform: 'translateX({{ xOffset }}px)',
-});
-/**
- * Style for a parent menu sweeping across the stage, right beside the
- * starlet sub menu, either off the stage or back onto it (for a great comeback).
- * Requires an `xOffset` parameter for the distance.
- */
-const moonwalk = style({
-    transform: 'translateX(calc(-100vw + {{ xOffset }}px))',
-});
-const onStageHidden = style({
-    opacity: 0,
-    transform: 'translateX(0) translateY(0)',
-});
-/**
- * Animations used by the `granite-menu` component, showing the touch interface.
- * @docs-private
- */
-const graniteMenuTouchAnimations = {
-    transformMenuTouch: trigger('transformMenuTouch', [
-        // Set up cast positions
-        state('void', awaitingCue),
-        state('enter, enter-from-below', onStage),
-        state('pan-hidden', moonwalk, { params: { xOffset: 0 } }),
-        state('pan', futsalShuffle, { params: { xOffset: 0 } }),
-        state('below-with-delay', inTheOrchestraPit),
-        state('hide', retired),
-        // General movement across the stage. Transitions to 'pan' and 'pan-hidden'
-        // states are intentionally left out as we want the menu position to update
-        // instantly as the user moves their finger.
-        transition('pan => enter, ' +
-            'pan => enter-from-below, ' +
-            'pan => void, ' +
-            'enter <=> hide, ' +
-            'enter-from-below <=> hide, ' +
-            'pan-hidden => hide, ' +
-            'pan-hidden => enter', animate(easeOut)),
-        transition(
-        // Jump straight onto the stage, from the orchestra pit.
-        // Excitement fills the air. Spotlight. Showtime.
-        'void => enter-from-below', sequence([
-            animate(teleport, inTheOrchestraPit),
-            animate(easeOut, onStage),
-        ])),
-        transition(
-        // Go stand in the curtains, then make a grand entrance from the side
-        'void => enter', sequence([animate(teleport, awaitingCue), animate(easeOut, onStage)])),
-        transition(
-        // Get off the stage, back into the curtains on the side
-        'enter => void', animate(easeOut, awaitingCue)),
-        transition(
-        // Take the side stairs down from the stage
-        'hide => below', animate(linear, retired)),
-        transition(
-        // Wait for a bit, then take the side stairs down from the stage
-        'hide => below-with-delay', sequence([animate(teleport, retired), animate(linearDelayed, retired)])),
-        transition(
-        // Stage dive into the orchestra pit
-        'enter => below, enter-from-below => below', sequence([animate(teleport, onStage), animate(linear, inTheOrchestraPit)])),
-        transition(
-        // Receive the standing ovations, then stage dive into the orchestra pit
-        'enter => below-with-delay, enter-from-below => below-with-delay', sequence([
-            animate(teleport, onStage),
-            animate(linearDelayed, inTheOrchestraPit),
-        ])),
-    ]),
-    transformCloseButton: trigger('transformCloseButton', [
-        state('void, below, below-with-delay', onStageHidden),
-        state('enter, enter-from-below, pan-hidden, pan, hide', onStage),
-        transition('void => enter-from-below', sequence([
-            animate(teleport, onStageHidden),
-            animate(getEaseLinear(50, defaultDuration / 2), onStage),
-        ])),
-        transition('enter => below, enter-from-below => below', sequence([
-            animate(teleport, onStage),
-            animate(getEaseLinear(25), onStageHidden),
-        ])),
-        transition('enter => below-with-delay, enter-from-below => below-with-delay', sequence([
-            animate(teleport, onStage),
-            animate(getEaseLinear(50, defaultDelay), onStageHidden),
-        ])),
-    ]),
-};
-
-/**
- * Injection token used to provide the parent menu to menu-specific components.
- * @docs-private
- */
-const GRANITE_MENU_PANEL = new InjectionToken('GRANITE_MENU_PANEL');
-
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-/**
- * Throws an exception for the case when menu trigger doesn't have a valid granite-menu instance
- * @docs-private
- */
-function throwGraniteMenuMissingError() {
-    throw Error(`graniteMenuTriggerFor: must pass in an granite-menu instance.
-
-    Example:
-      <granite-menu #menu="graniteMenu"></granite-menu>
-      <button [graniteMenuTriggerFor]="menu"></button>`);
-}
-/**
- * Throws an exception for the case when menu's x-position value isn't valid.
- * In other words, it doesn't match 'before' or 'after'.
- * @docs-private
- */
-function throwGraniteMenuInvalidPositionX() {
-    throw Error(`xPosition value must be either 'before' or after'.
-      Example: <granite-menu xPosition="before" #menu="graniteMenu"></granite-menu>`);
-}
-/**
- * Throws an exception for the case when menu's y-position value isn't valid.
- * In other words, it doesn't match 'above' or 'below'.
- * @docs-private
- */
-function throwGraniteMenuInvalidPositionY() {
-    throw Error(`yPosition value must be either 'above' or below'.
-      Example: <granite-menu yPosition="above" #menu="graniteMenu"></granite-menu>`);
-}
-
-class GraniteIconComponent {
-    constructor(_elementRef, renderer, ariaHidden) {
-        this._elementRef = _elementRef;
-        this.renderer = renderer;
-        // aria-hidden will be set to true by default, unless it's overridden by the developer
-        if (!ariaHidden) {
-            this.renderer.setAttribute(_elementRef.nativeElement, 'aria-hidden', 'true');
-        }
-    }
-    ngOnChanges(changes) {
-        if (changes.fontIcon) {
-            this._updateFontIcon();
-        }
-    }
-    _updateFontIcon() {
-        if (this.fontIcon !== this._previousFontIconClass) {
-            if (this._previousFontIconClass) {
-                this.renderer.removeClass(this._elementRef.nativeElement, this._previousFontIconClass);
-            }
-            if (this.fontIcon) {
-                this.renderer.addClass(this._elementRef.nativeElement, this.fontIcon);
-            }
-            this._previousFontIconClass = this.fontIcon;
-        }
-    }
-}
-GraniteIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteIconComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: 'aria-hidden', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
-GraniteIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GraniteIconComponent, selector: "granite-icon", inputs: { fontIcon: "fontIcon" }, host: { attributes: { "role": "img" }, classAttribute: "granite-icon" }, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host.granite-icon{background-repeat:no-repeat;display:inline-block;padding:0 calc(var(--granite-spacing-4) / 2);font-size:1em;line-height:1em;position:relative;top:.1em}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteIconComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'granite-icon', template: '<ng-content></ng-content>', host: {
-                        role: 'img',
-                        class: 'granite-icon',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host.granite-icon{background-repeat:no-repeat;display:inline-block;padding:0 calc(var(--granite-spacing-4) / 2);font-size:1em;line-height:1em;position:relative;top:.1em}\n"] }]
-        }], ctorParameters: function () {
-        return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
-                        type: Attribute,
-                        args: ['aria-hidden']
-                    }] }];
-    }, propDecorators: { fontIcon: [{
-                type: Input
-            }] } });
-
-class GraniteMenuItemComponent {
-    constructor(_elementRef, _focusMonitor, _parentMenu) {
-        this._elementRef = _elementRef;
-        this._focusMonitor = _focusMonitor;
-        this._parentMenu = _parentMenu;
-        /** ARIA role for the menu item. */
-        this.role = 'menuitem';
-        /** Stream that emits when the menu item is hovered. */
-        // eslint-disable-next-line rxjs/no-exposed-subjects
-        this._hovered = new Subject();
-        /** Stream that emits when the menu item is focused. */
-        // eslint-disable-next-line rxjs/no-exposed-subjects
-        this._focused = new Subject();
-        /** Whether the menu item acts as a trigger for a sub-menu (used for styling) */
-        this._triggersSubmenu = false;
-        /**
-         * Whether the menu item is highlighted, e.g. in the "breadcrumb" parent chain
-         * of sub menu trigger items
-         */
-        this._highlighted = false;
-        // Start monitoring the element so it gets the appropriate focused classes. We want
-        // to show the focus style for menu items only when the focus was not caused by a
-        // mouse or touch interaction.
-        _focusMonitor.monitor(this._elementRef, false);
-    }
-    ngOnDestroy() {
-        this._focusMonitor.stopMonitoring(this._elementRef);
-        this._hovered.complete();
-        this._focused.complete();
-    }
-    /** Focuses the menu item. */
-    focus(origin = 'program', options) {
-        this._focusMonitor.focusVia(this._getHostElement(), origin, options);
-        this._focused.next(this);
-    }
-    /** Returns the host DOM element. */
-    _getHostElement() {
-        return this._elementRef.nativeElement;
-    }
-}
-GraniteMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteMenuItemComponent, deps: [{ token: i0.ElementRef }, { token: i1.FocusMonitor }, { token: GRANITE_MENU_PANEL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-GraniteMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GraniteMenuItemComponent, selector: "[graniteMenuItem]", inputs: { role: "role" }, host: { listeners: { "mouseenter": "_hovered.next(this)" }, properties: { "attr.role": "role", "class.granite-menu-item": "true", "class.granite-menu-item-highlighted": "_highlighted", "class.granite-menu-item-submenu-trigger": "_triggersSubmenu", "class.granite-device-output-touch": "_clientOutput?.device === \"touch\"" } }, exportAs: ["graniteMenuItem"], ngImport: i0, template: `<ng-content></ng-content>
-    <ng-container *ngIf="_triggersSubmenu">
-      <granite-icon
-        class="caret-left"
-        [fontIcon]="'icon-caret-left'"
-      ></granite-icon>
-      <granite-icon
-        class="caret-right"
-        [fontIcon]="'icon-caret-right'"
-      ></granite-icon>
-    </ng-container>`, isInline: true, styles: [":host{display:block;position:relative;line-height:2rem;padding:0 var(--granite-spacing-8);width:100%;max-width:100%;-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover: hover) and (pointer: fine){:host:hover:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover: none) and (pointer: coarse){:host:active:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-webkit-user-select:none;user-select:none;display:flex;align-items:center;line-height:1.5rem;width:100%;outline:none;border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--granite-color-text);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-bold);cursor:default}:host.cdk-program-focused,:host.cdk-keyboard-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{padding-inline-end:var(--granite-spacing-24)}html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:3rem;font-size:var(--granite-font-size-body-small);text-align:center;padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-title{padding:0;justify-content:center;line-height:1.5rem;font-size:var(--granite-font-size-micro)}:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-menu-item-title{line-height:3rem;height:3rem;font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}@media (hover: none) and (pointer: coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right{display:none}:host:disabled:not(.granite-menu-item-title){opacity:.4;cursor:default}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteMenuItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: '[graniteMenuItem]', template: `<ng-content></ng-content>
-    <ng-container *ngIf="_triggersSubmenu">
-      <granite-icon
-        class="caret-left"
-        [fontIcon]="'icon-caret-left'"
-      ></granite-icon>
-      <granite-icon
-        class="caret-right"
-        [fontIcon]="'icon-caret-right'"
-      ></granite-icon>
-    </ng-container>`, exportAs: 'graniteMenuItem', host: {
-                        '[attr.role]': 'role',
-                        '[class.granite-menu-item]': 'true',
-                        '[class.granite-menu-item-highlighted]': '_highlighted',
-                        '[class.granite-menu-item-submenu-trigger]': '_triggersSubmenu',
-                        //#region --- Touch device customizations ---
-                        '[class.granite-device-output-touch]': '_clientOutput?.device === "touch"',
-                        //#endregion --- Touch device customizations ---
-                        '(mouseenter)': '_hovered.next(this)',
-                    }, styles: [":host{display:block;position:relative;line-height:2rem;padding:0 var(--granite-spacing-8);width:100%;max-width:100%;-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover: hover) and (pointer: fine){:host:hover:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover: none) and (pointer: coarse){:host:active:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-webkit-user-select:none;user-select:none;display:flex;align-items:center;line-height:1.5rem;width:100%;outline:none;border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--granite-color-text);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-bold);cursor:default}:host.cdk-program-focused,:host.cdk-keyboard-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{padding-inline-end:var(--granite-spacing-24)}html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:3rem;font-size:var(--granite-font-size-body-small);text-align:center;padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-title{padding:0;justify-content:center;line-height:1.5rem;font-size:var(--granite-font-size-micro)}:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-menu-item-title{line-height:3rem;height:3rem;font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}@media (hover: none) and (pointer: coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right{display:none}:host:disabled:not(.granite-menu-item-title){opacity:.4;cursor:default}\n"] }]
-        }], ctorParameters: function () {
-        return [{ type: i0.ElementRef }, { type: i1.FocusMonitor }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [GRANITE_MENU_PANEL]
-                    }, {
-                        type: Optional
-                    }] }];
-    }, propDecorators: { role: [{
-                type: Input
-            }] } });
-
-/** Counter for panel ID generation */
-let menuPanelUid = 0;
-/** Menu panel animation default transform values */
-const transformMenuDefault = {
-    value: 'void',
-    params: {
-        xOffset: 0,
-    },
-};
-/** Base class with all of the menu functionality. */
-// eslint-disable-next-line @angular-eslint/directive-class-suffix
-class _MenuBaseComponent {
-    /** Position of the menu in the X axis. */
-    get xPosition() {
-        return this._xPosition;
-    }
-    set xPosition(value) {
-        if (value !== 'before' && value !== 'after') {
-            throwGraniteMenuInvalidPositionX();
-        }
-        this._xPosition = value;
-    }
-    /** Position of the menu in the Y axis. */
-    get yPosition() {
-        return this._yPosition;
-    }
-    set yPosition(value) {
-        if (value !== 'above' && value !== 'below') {
-            throwGraniteMenuInvalidPositionY();
-        }
-        this._yPosition = value;
-    }
-    /** Current state of the panel animation. */
-    set _panelAnimationState(state) {
-        this._transformMenu.next({
-            value: state,
-            params: { xOffset: this.xOffset },
-        });
-    }
-    constructor(_changeDetectorRef) {
-        this._changeDetectorRef = _changeDetectorRef;
-        this.openOnHover = true;
-        /**
-         * Event emitted when the menu is closed
-         */
-        this.closed = new EventEmitter();
-        /**
-         * Used for locating the panel in tests and setting the aria-control attribute
-         * for the menu trigger.
-         */
-        this.panelId = `granite-menu-panel-${menuPanelUid++}`;
-        /** Whether to show back button in touch menu title bar */
-        this.showBackButton = false;
-        /** Whether to show touch menu title bar */
-        this.showTitle = false;
-        /** Whether to add a close button below the menu */
-        this.showCloseButton = false;
-        /** Observable current state of the panel animation. */
-        // eslint-disable-next-line rxjs/no-exposed-subjects
-        this._transformMenu = new BehaviorSubject(transformMenuDefault);
-        /** Emits whenever an animation on the menu completes. */
-        // eslint-disable-next-line rxjs/no-exposed-subjects
-        this._animationDone = new Subject();
-        this._menuEmpty$ = new BehaviorSubject(false);
-        // eslint-disable-next-line @typescript-eslint/member-ordering
-        this._isMenuEmpty$ = combineLatest([
-            this._menuEmpty$,
-            this._animationDone,
-        ]).pipe(filter(([m, a]) => m && a != null), map(() => true));
-        /** Only the direct descendant menu items. */
-        this._directDescendantItems = new QueryList();
-        /** Subscription to tab events on the menu panel */
-        this._tabSubscription = Subscription.EMPTY;
-        this._xPosition = 'after';
-        this._yPosition = 'below';
-        /**
-         * Current horizontal offset. Used with `pan` and `pan-hidden`
-         * animation states.
-         */
-        this.xOffset = 0;
-    }
-    ngAfterContentChecked() {
-        this._menuEmpty$.next(this._allItems.length < 1 ? true : false);
-    }
-    ngAfterContentInit() {
-        this._updateDirectDescendants();
-        this._keyManager = new FocusKeyManager(this._directDescendantItems)
-            .withWrap()
-            .skipPredicate((menuItem) => {
-            const hostElement = menuItem._getHostElement();
-            return hostElement instanceof HTMLButtonElement
-                ? hostElement.disabled
-                : hostElement.hasAttribute('graniteTitle');
-        });
-        this._tabSubscription = this._keyManager.tabOut.subscribe(() => {
-            this.closed.emit('tab');
-        });
-        // If a user manually (programatically) focuses a menu item, we need to reflect that focus
-        // change back to the key manager. Note that we don't need to unsubscribe here because _focused
-        // is internal and we know that it gets completed on destroy.
-        this._directDescendantItems.changes
-            .pipe(startWith(this._directDescendantItems), switchMap((items) => merge(...items.map((item) => item._focused))))
-            .subscribe((focusedItem) => this._keyManager.updateActiveItem(focusedItem));
-    }
-    ngOnDestroy() {
-        this._directDescendantItems.destroy();
-        this._tabSubscription.unsubscribe();
-        this.closed.complete();
-    }
-    /**
-     * Stream that combines the `_hovered` observables of all the menu's items
-     * into a single observable. Emits whenever the hovered menu item changes.
-     */
-    _hovered() {
-        // Coerce the `changes` property because Angular types it as `Observable<any>`
-        const itemChanges = this._directDescendantItems.changes;
-        return itemChanges.pipe(startWith(this._directDescendantItems), 
-        // Hovering is not applicable when producing touch output
-        filter(() => {
-            var _a;
-            return ((_a = this._clientOutput) === null || _a === void 0 ? void 0 : _a.device) !== 'touch';
-        }), switchMap((items) => merge(...items.map((item) => item._hovered))));
-    }
-    /** Handle a keyboard event from the menu, delegating to the appropriate action. */
-    _handleKeydown(event) {
-        const key = event.key;
-        const manager = this._keyManager;
-        switch (key) {
-            case 'Escape':
-                if (!hasModifierKey(event)) {
-                    event.preventDefault();
-                    this.closed.emit('keydown');
-                }
-                break;
-            case 'ArrowLeft':
-                if (this.parentMenu && this.direction === 'ltr') {
-                    this.closed.emit('keydown');
-                }
-                break;
-            case 'ArrowRight':
-                if (this.parentMenu && this.direction === 'rtl') {
-                    this.closed.emit('keydown');
-                }
-                break;
-            case 'Home':
-            case 'End':
-                if (!hasModifierKey(event)) {
-                    key === 'Home'
-                        ? manager.setFirstItemActive()
-                        : manager.setLastItemActive();
-                    event.preventDefault();
-                }
-                break;
-            default:
-                if (key === 'ArrowUp' || key === 'ArrowDown') {
-                    manager.setFocusOrigin('keyboard');
-                }
-                manager.onKeydown(event);
-        }
-    }
-    /**
-     * Focus the first item in the menu.
-     * @param origin Action from which the focus originated. Used to set the correct styling.
-     */
-    focusFirstItem(origin = 'program') {
-        this._keyManager.setFocusOrigin(origin).setFirstItemActive();
-    }
-    /** Updates the `showTitle` property for touch device UI */
-    _updateShowTitle() {
-        this.showTitle = !!this.title || this.showBackButton;
-    }
-    /** Starts the enter animation */
-    _startAnimation() {
-        this._panelAnimationState = 'enter';
-    }
-    /** Resets the panel animation to its initial state. */
-    _resetAnimation() {
-        this._panelAnimationState = 'void';
-    }
-    /**
-     * Starts the 'below' animation, moving a menu down, out of view below the
-     * viewport. Used to close the whole menu, for example when clicking
-     * the backdrop.
-     */
-    _startTouchCloseDownAnimation() {
-        this._panelAnimationState = 'below';
-    }
-    /**
-     * Starts the 'below-with-delay' animation, moving a menu down, out of view below the
-     * viewport. Used to close the whole menu as a response to the user tapping
-     * a menu item. There is a short delay before the animation starts, to that
-     * the user gets a visual feedback on what item was selected.
-     */
-    _startTouchCloseDownAnimationWithDelay() {
-        this._panelAnimationState = 'below-with-delay';
-    }
-    /**
-     * Starts the 'void' animation, moving a (sub) menu out of view to the side
-     * of the viewport. Used when going "back" from a sub menu.
-     */
-    _startTouchCloseSideAnimation() {
-        this._resetAnimation();
-    }
-    /**
-     * Starts the enter-from-below animation, moving a (root) menu into view,
-     * Animates upwards from a starting position below the viewport.
-     */
-    _startTouchRootEnterAnimation() {
-        this._panelAnimationState = 'enter-from-below';
-        this.xOffset = 0;
-    }
-    /** Starts the enter animation, moving a (sub) menu into view. */
-    _startTouchSubmenuEnterAnimation() {
-        this._panelAnimationState = 'enter';
-        this.xOffset = 0;
-    }
-    /**
-     * Starts the pan animation, to position a submenu in a response
-     * to user dragging sideways (panning).
-     */
-    _startTouchPanAnimation(xOffset) {
-        this._panelAnimationState = 'pan';
-        this.xOffset = xOffset;
-    }
-    /**
-     * Starts the pan-hidden animation, to position a parent menu next to an
-     * active submenu that the user is dragging sideways (panning).
-     */
-    _startTouchHidePanAnimation(xOffset) {
-        this._panelAnimationState = 'pan-hidden';
-        this.xOffset = xOffset;
-    }
-    /**
-     * Starts the hide animation, to make a parent menu slide out to leave
-     * space for a submenu.
-     */
-    _startTouchHideAnimation() {
-        this._panelAnimationState = 'hide';
-        this.xOffset = 0;
-    }
-    /** Callback that is invoked when the panel animation completes. */
-    _onAnimationDone(event) {
-        this._animationDone.next(event);
-        this._isAnimating = false;
-    }
-    _onAnimationStart(event) {
-        this._isAnimating = true;
-        // Scroll the content element to the top as soon as the animation starts. This is necessary,
-        // because we move focus to the first item while it's still being animated, which can throw
-        // the browser off when it determines the scroll position. Alternatively we can move focus
-        // when the animation is done, however moving focus asynchronously will interrupt screen
-        // readers which are in the process of reading out the menu already. We take the `element`
-        // from the `event` since we can't use a `ViewChild` to access the pane.
-        if ((event.toState === 'enter' || event.toState === 'enter-from-below') &&
-            this._keyManager.activeItemIndex === 0) {
-            event.element.scrollTop = 0;
-        }
-    }
-    /**
-     * Handle click on the menu by emitting on the `closed` emitter
-     * with a `click` reason
-     */
-    _handleClick() {
-        this.closed.emit('click');
-    }
-    /**
-     * Handle click on the close button by emitting on the `closed` emitter
-     * without any particular reason
-     */
-    _handleCloseClick() {
-        this.closed.emit();
-    }
-    /**
-     * Handle click on the back icon by emitting on the `clicked` emitter
-     */
-    _handleBackClick(e) {
-        if (this.showBackButton) {
-            // Close submenu keydown-style: close only this menu and leave parents open
-            this.closed.emit('keydown');
-        }
-        e.stopPropagation();
-    }
-    /**
-     * Update client device information for the menu and its menu items.
-     */
-    _setDevice(clientInput, clientOutput) {
-        this._clientInput = clientInput;
-        this._clientOutput = clientOutput;
-        this._directDescendantItems.forEach((item) => {
-            item._clientInput = clientInput;
-            item._clientOutput = clientOutput;
-        });
-        this._changeDetectorRef.markForCheck();
-    }
-    /**
-     * Resets the active item in the menu. This is used when the menu is opened, allowing
-     * the user to start from the first option when pressing the down arrow.
-     */
-    resetActiveItem() {
-        this._keyManager.setActiveItem(-1);
-    }
-    /**
-     * Sets up a stream that will keep track of any newly-added menu items and will update the list
-     * of direct descendants. We collect the descendants this way, because `_allItems` can include
-     * items that are part of child menus, and using a custom way of registering items is unreliable
-     * when it comes to maintaining the item order.
-     */
-    _updateDirectDescendants() {
-        this._allItems.changes
-            .pipe(startWith(this._allItems))
-            .subscribe((items) => {
-            this._directDescendantItems.reset(items.filter((item) => item._parentMenu === this));
-            this._directDescendantItems.notifyOnChanges();
-        });
-    }
-}
-_MenuBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: _MenuBaseComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-_MenuBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: _MenuBaseComponent, inputs: { xPosition: "xPosition", yPosition: "yPosition", title: "title", closeLabel: "closeLabel", openOnHover: "openOnHover" }, outputs: { closed: "closed" }, 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: "15.2.9", ngImport: i0, type: _MenuBaseComponent, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { xPosition: [{
-                type: Input
-            }], yPosition: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], closeLabel: [{
-                type: Input
-            }], openOnHover: [{
-                type: Input
-            }], templateRef: [{
-                type: ViewChild,
-                args: [TemplateRef]
-            }], _allItems: [{
-                type: ContentChildren,
-                args: [GraniteMenuItemComponent, { descendants: true }]
-            }], closed: [{
-                type: Output
-            }] } });
-
-class GraniteMenuTouchCloseComponent {
-}
-GraniteMenuTouchCloseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteMenuTouchCloseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GraniteMenuTouchCloseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GraniteMenuTouchCloseComponent, selector: "[graniteMenuTouchCloseItem]", host: { properties: { "class.granite-device-output-touch": "true" } }, exportAs: ["graniteMenuTouchCloseItem"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block;position:relative;line-height:2rem;padding:0 var(--granite-spacing-8);width:100%;max-width:100%;-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover: hover) and (pointer: fine){:host:hover:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover: none) and (pointer: coarse){:host:active:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-webkit-user-select:none;user-select:none;display:flex;align-items:center;line-height:1.5rem;width:100%;outline:none;border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--granite-color-text);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-bold);cursor:default}:host.cdk-program-focused,:host.cdk-keyboard-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{padding-inline-end:var(--granite-spacing-24)}html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:3rem;font-size:var(--granite-font-size-body-small);text-align:center;padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-title{padding:0;justify-content:center;line-height:1.5rem;font-size:var(--granite-font-size-micro)}:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-menu-item-title{line-height:3rem;height:3rem;font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}@media (hover: none) and (pointer: coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right{display:none}:host:disabled:not(.granite-menu-item-title){opacity:.4;cursor:default}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteMenuTouchCloseComponent, decorators: [{
-            type: Component,
-            args: [{ selector: '[graniteMenuTouchCloseItem]', template: '<ng-content></ng-content>', exportAs: 'graniteMenuTouchCloseItem', host: {
-                        '[class.granite-device-output-touch]': 'true',
-                    }, styles: [":host{display:block;position:relative;line-height:2rem;padding:0 var(--granite-spacing-8);width:100%;max-width:100%;-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover: hover) and (pointer: fine){:host:hover:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover: none) and (pointer: coarse){:host:active:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-webkit-user-select:none;user-select:none;display:flex;align-items:center;line-height:1.5rem;width:100%;outline:none;border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--granite-color-text);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-bold);cursor:default}:host.cdk-program-focused,:host.cdk-keyboard-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{padding-inline-end:var(--granite-spacing-24)}html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:3rem;font-size:var(--granite-font-size-body-small);text-align:center;padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-title{padding:0;justify-content:center;line-height:1.5rem;font-size:var(--granite-font-size-micro)}:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-menu-item-title{line-height:3rem;height:3rem;font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}@media (hover: none) and (pointer: coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right{display:none}:host:disabled:not(.granite-menu-item-title){opacity:.4;cursor:default}\n"] }]
-        }] });
-
-class GraniteMenuTouchTitleItemComponent {
-    constructor(
-    /** If this is an item on a _submenu_, its parent menu will have a parent */
-    _parentMenu) {
-        /**
-         * Whether the menu item acts as a trigger to return to a parent menu
-         * (used for styling)
-         */
-        this._triggersBack = false;
-        this._triggersBack = !!_parentMenu.parentMenu;
-    }
-}
-GraniteMenuTouchTitleItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteMenuTouchTitleItemComponent, deps: [{ token: GRANITE_MENU_PANEL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-GraniteMenuTouchTitleItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GraniteMenuTouchTitleItemComponent, selector: "[graniteMenuTouchTitleItem]", host: { properties: { "class.granite-menu-item-title": "true", "class.granite-menu-item-back-trigger": "_triggersBack", "class.granite-device-output-touch": "true" } }, exportAs: ["graniteMenuTouchTitleItem"], ngImport: i0, template: `
-    <ng-container *ngIf="_triggersBack">
-      <granite-icon
-        class="caret-left"
-        [fontIcon]="'icon-caret-left'"
-      ></granite-icon>
-      <granite-icon
-        class="caret-right"
-        [fontIcon]="'icon-caret-right'"
-      ></granite-icon>
-    </ng-container>
-    <ng-content></ng-content>
-  `, isInline: true, styles: [":host{display:block;position:relative;line-height:2rem;padding:0 var(--granite-spacing-8);width:100%;max-width:100%;-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover: hover) and (pointer: fine){:host:hover:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover: none) and (pointer: coarse){:host:active:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-webkit-user-select:none;user-select:none;display:flex;align-items:center;line-height:1.5rem;width:100%;outline:none;border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--granite-color-text);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-bold);cursor:default}:host.cdk-program-focused,:host.cdk-keyboard-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{padding-inline-end:var(--granite-spacing-24)}html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:3rem;font-size:var(--granite-font-size-body-small);text-align:center;padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-title{padding:0;justify-content:center;line-height:1.5rem;font-size:var(--granite-font-size-micro)}:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-menu-item-title{line-height:3rem;height:3rem;font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}@media (hover: none) and (pointer: coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right{display:none}:host:disabled:not(.granite-menu-item-title){opacity:.4;cursor:default}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteMenuTouchTitleItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: '[graniteMenuTouchTitleItem]', template: `
-    <ng-container *ngIf="_triggersBack">
-      <granite-icon
-        class="caret-left"
-        [fontIcon]="'icon-caret-left'"
-      ></granite-icon>
-      <granite-icon
-        class="caret-right"
-        [fontIcon]="'icon-caret-right'"
-      ></granite-icon>
-    </ng-container>
-    <ng-content></ng-content>
-  `, exportAs: 'graniteMenuTouchTitleItem', host: {
-                        '[class.granite-menu-item-title]': 'true',
-                        '[class.granite-menu-item-back-trigger]': '_triggersBack',
-                        '[class.granite-device-output-touch]': 'true',
-                    }, styles: [":host{display:block;position:relative;line-height:2rem;padding:0 var(--granite-spacing-8);width:100%;max-width:100%;-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover: hover) and (pointer: fine){:host:hover:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover: none) and (pointer: coarse){:host:active:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-webkit-user-select:none;user-select:none;display:flex;align-items:center;line-height:1.5rem;width:100%;outline:none;border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--granite-color-text);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-bold);cursor:default}:host.cdk-program-focused,:host.cdk-keyboard-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{padding-inline-end:var(--granite-spacing-24)}html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:3rem;font-size:var(--granite-font-size-body-small);text-align:center;padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-title{padding:0;justify-content:center;line-height:1.5rem;font-size:var(--granite-font-size-micro)}:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-menu-item-title{line-height:3rem;height:3rem;font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}@media (hover: none) and (pointer: coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right{display:none}:host:disabled:not(.granite-menu-item-title){opacity:.4;cursor:default}\n"] }]
-        }], ctorParameters: function () {
-        return [{ type: _MenuBaseComponent, decorators: [{
-                        type: Inject,
-                        args: [GRANITE_MENU_PANEL]
-                    }, {
-                        type: Optional
-                    }] }];
-    } });
-
-class GraniteMenuComponent extends _MenuBaseComponent {
-}
-GraniteMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-GraniteMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GraniteMenuComponent, selector: "granite-menu", providers: [
-        { provide: GRANITE_MENU_PANEL, useExisting: GraniteMenuComponent },
-    ], exportAs: ["graniteMenu"], usesInheritance: true, ngImport: i0, template: "<!--\n  Using separate template part for desktop and touch output, because of\n  animation triggers and slightly different content.\n-->\n<ng-template>\n  <!-- Desktop -->\n  <ng-container *ngIf=\"_clientOutput.device === 'desktop'\">\n    <div\n      #menu\n      class=\"granite-menu\"\n      [class.is-menu-empty]=\"_isMenuEmpty$ | async\"\n      tabindex=\"-1\"\n      [id]=\"panelId\"\n      [@transformMenuDesktop]=\"_transformMenu | async\"\n      (@transformMenuDesktop.start)=\"_onAnimationStart($event)\"\n      (@transformMenuDesktop.done)=\"_onAnimationDone($event)\"\n      (click)=\"_handleClick()\"\n      (keydown)=\"_handleKeydown($event)\"\n    >\n      <div class=\"granite-menu-content\">\n        <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- Touch -->\n  <ng-container *ngIf=\"_clientOutput?.device === 'touch'\">\n    <div\n      #menu\n      class=\"granite-menu granite-device-output-touch\"\n      tabindex=\"-1\"\n      [id]=\"panelId\"\n      [@transformMenuTouch]=\"_transformMenu | async\"\n      (@transformMenuTouch.start)=\"_onAnimationStart($event)\"\n      (@transformMenuTouch.done)=\"_onAnimationDone($event)\"\n      (click)=\"_handleClick()\"\n      (keydown)=\"_handleKeydown($event)\"\n    >\n      <div class=\"granite-menu-content\">\n        <div *ngIf=\"showTitle\" class=\"header-container\">\n          <button\n            [disabled]=\"!showBackButton\"\n            graniteMenuTouchTitleItem\n            (click)=\"_handleBackClick($event)\"\n          >\n            {{ title }}\n          </button>\n        </div>\n\n        <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n\n        <div class=\"footer-container\"></div>\n      </div>\n    </div>\n\n    <!-- Close button -->\n    <div class=\"close\" [@transformCloseButton]=\"_transformMenu | async\">\n      <button\n        *ngIf=\"showCloseButton\"\n        graniteMenuTouchCloseItem\n        (click)=\"_handleCloseClick()\"\n      >\n        {{ closeLabel }}\n      </button>\n    </div>\n  </ng-container>\n\n  <!--\n    Content template shared between desktop and touch parts, as <ng-content>\n    can't be used in two places in the same template\n  -->\n  <ng-template #content>\n    <ng-content></ng-content>\n  </ng-template>\n</ng-template>\n", styles: [".granite-menu:not(.granite-device-output-touch){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;outline:0;-webkit-user-select:none;user-select:none;filter:drop-shadow(var(--granite-shadow-l));min-width:7rem;overflow-x:hidden;overflow-y:hidden}.granite-menu:not(.granite-device-output-touch).ng-animating{pointer-events:none}.granite-menu:not(.granite-device-output-touch):not(.is-menu-empty){min-height:2rem}.granite-menu:not(.granite-device-output-touch):hover{overflow-y:auto}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar{width:var(--granite-spacing-4)}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar-thumb{background-color:var(--granite-color-border-hard);border-radius:calc(var(--granite-spacing-16) * .125)}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar-track{background-color:var(--granite-color-background-hover)}.granite-menu.granite-device-output-touch{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;outline:0;-webkit-user-select:none;user-select:none;filter:drop-shadow(var(--granite-shadow-l));border-radius:.25rem}.granite-menu.granite-device-output-touch.ng-animating{pointer-events:none}.granite-menu.granite-device-output-touch:not(.is-menu-empty){min-height:3rem}.granite-menu.granite-device-output-touch:not(.close){margin:var(--granite-spacing-4)}.granite-menu.granite-device-output-touch.close{margin-inline-start:var(--granite-spacing-4);margin-inline-end:var(--granite-spacing-4);margin-block-end:var(--granite-spacing-4)}.granite-menu.granite-device-output-touch .header-container{position:sticky;top:0;background-color:var(--granite-color-background-variant);z-index:1}.granite-menu.granite-device-output-touch .footer-container{position:sticky;bottom:0;height:0}.close:not(:empty){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;outline:0;-webkit-user-select:none;user-select:none;filter:drop-shadow(var(--granite-shadow-l));border-radius:.25rem}.close:not(:empty).ng-animating{pointer-events:none}.close:not(:empty):not(.is-menu-empty){min-height:3rem}.close:not(:empty):not(.close){margin:var(--granite-spacing-4)}.close:not(:empty).close{margin-inline-start:var(--granite-spacing-4);margin-inline-end:var(--granite-spacing-4);margin-block-end:var(--granite-spacing-4)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GraniteMenuTouchCloseComponent, selector: "[graniteMenuTouchCloseItem]", exportAs: ["graniteMenuTouchCloseItem"] }, { kind: "component", type: GraniteMenuTouchTitleItemComponent, selector: "[graniteMenuTouchTitleItem]", exportAs: ["graniteMenuTouchTitleItem"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], animations: [
-        graniteMenuDesktopAnimations.transformMenuDesktop,
-        graniteMenuTouchAnimations.transformMenuTouch,
-        graniteMenuTouchAnimations.transformCloseButton,
-    ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteMenuComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'granite-menu', changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'graniteMenu', animations: [
-                        graniteMenuDesktopAnimations.transformMenuDesktop,
-                        graniteMenuTouchAnimations.transformMenuTouch,
-                        graniteMenuTouchAnimations.transformCloseButton,
-                    ], providers: [
-                        { provide: GRANITE_MENU_PANEL, useExisting: GraniteMenuComponent },
-                    ], template: "<!--\n  Using separate template part for desktop and touch output, because of\n  animation triggers and slightly different content.\n-->\n<ng-template>\n  <!-- Desktop -->\n  <ng-container *ngIf=\"_clientOutput.device === 'desktop'\">\n    <div\n      #menu\n      class=\"granite-menu\"\n      [class.is-menu-empty]=\"_isMenuEmpty$ | async\"\n      tabindex=\"-1\"\n      [id]=\"panelId\"\n      [@transformMenuDesktop]=\"_transformMenu | async\"\n      (@transformMenuDesktop.start)=\"_onAnimationStart($event)\"\n      (@transformMenuDesktop.done)=\"_onAnimationDone($event)\"\n      (click)=\"_handleClick()\"\n      (keydown)=\"_handleKeydown($event)\"\n    >\n      <div class=\"granite-menu-content\">\n        <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- Touch -->\n  <ng-container *ngIf=\"_clientOutput?.device === 'touch'\">\n    <div\n      #menu\n      class=\"granite-menu granite-device-output-touch\"\n      tabindex=\"-1\"\n      [id]=\"panelId\"\n      [@transformMenuTouch]=\"_transformMenu | async\"\n      (@transformMenuTouch.start)=\"_onAnimationStart($event)\"\n      (@transformMenuTouch.done)=\"_onAnimationDone($event)\"\n      (click)=\"_handleClick()\"\n      (keydown)=\"_handleKeydown($event)\"\n    >\n      <div class=\"granite-menu-content\">\n        <div *ngIf=\"showTitle\" class=\"header-container\">\n          <button\n            [disabled]=\"!showBackButton\"\n            graniteMenuTouchTitleItem\n            (click)=\"_handleBackClick($event)\"\n          >\n            {{ title }}\n          </button>\n        </div>\n\n        <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n\n        <div class=\"footer-container\"></div>\n      </div>\n    </div>\n\n    <!-- Close button -->\n    <div class=\"close\" [@transformCloseButton]=\"_transformMenu | async\">\n      <button\n        *ngIf=\"showCloseButton\"\n        graniteMenuTouchCloseItem\n        (click)=\"_handleCloseClick()\"\n      >\n        {{ closeLabel }}\n      </button>\n    </div>\n  </ng-container>\n\n  <!--\n    Content template shared between desktop and touch parts, as <ng-content>\n    can't be used in two places in the same template\n  -->\n  <ng-template #content>\n    <ng-content></ng-content>\n  </ng-template>\n</ng-template>\n", styles: [".granite-menu:not(.granite-device-output-touch){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;outline:0;-webkit-user-select:none;user-select:none;filter:drop-shadow(var(--granite-shadow-l));min-width:7rem;overflow-x:hidden;overflow-y:hidden}.granite-menu:not(.granite-device-output-touch).ng-animating{pointer-events:none}.granite-menu:not(.granite-device-output-touch):not(.is-menu-empty){min-height:2rem}.granite-menu:not(.granite-device-output-touch):hover{overflow-y:auto}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar{width:var(--granite-spacing-4)}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar-thumb{background-color:var(--granite-color-border-hard);border-radius:calc(var(--granite-spacing-16) * .125)}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar-track{background-color:var(--granite-color-background-hover)}.granite-menu.granite-device-output-touch{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;outline:0;-webkit-user-select:none;user-select:none;filter:drop-shadow(var(--granite-shadow-l));border-radius:.25rem}.granite-menu.granite-device-output-touch.ng-animating{pointer-events:none}.granite-menu.granite-device-output-touch:not(.is-menu-empty){min-height:3rem}.granite-menu.granite-device-output-touch:not(.close){margin:var(--granite-spacing-4)}.granite-menu.granite-device-output-touch.close{margin-inline-start:var(--granite-spacing-4);margin-inline-end:var(--granite-spacing-4);margin-block-end:var(--granite-spacing-4)}.granite-menu.granite-device-output-touch .header-container{position:sticky;top:0;background-color:var(--granite-color-background-variant);z-index:1}.granite-menu.granite-device-output-touch .footer-container{position:sticky;bottom:0;height:0}.close:not(:empty){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;outline:0;-webkit-user-select:none;user-select:none;filter:drop-shadow(var(--granite-shadow-l));border-radius:.25rem}.close:not(:empty).ng-animating{pointer-events:none}.close:not(:empty):not(.is-menu-empty){min-height:3rem}.close:not(:empty):not(.close){margin:var(--granite-spacing-4)}.close:not(:empty).close{margin-inline-start:var(--granite-spacing-4);margin-inline-end:var(--granite-spacing-4);margin-block-end:var(--granite-spacing-4)}\n"] }]
-        }] });
-
-/**
- * Injection token used to provide components knowledge of what device types
- * are being used for input.
- */
-const GRANITE_CLIENT_INPUT = new InjectionToken('GRANITE_CLIENT_INPUT');
-/**
- * Injection token used to provide components knowledge of what device type
- * is being used for output.
- */
-const GRANITE_CLIENT_OUTPUT = new InjectionToken('GRANITE_CLIENT_OUTPUT');
-const deviceDesktop = {
-    input: { devices: ['mouse', 'keyboard'] },
-    output: { device: 'desktop' },
-};
-const deviceTouch = {
-    input: { devices: ['touch', 'onscreen-keyboard'] },
-    output: { device: 'touch' },
-};
-
-/** Options for binding a passive event listener. */
-const passiveEventListenerOptions = normalizePassiveListenerOptions({
-    passive: true,
-});
-//#endregion --- Touch device customizations ---
-/**
- * Directive used to turn a button element into a (popup) menu trigger
- *
- * Stripped-down version of Angular Material's menu trigger directive (.../menu/menu-trigger.ts)
- */
-class GraniteMenuTriggerForDirective {
-    constructor(_overlay, _element, _viewContainerRef, 
-    /** If this is a _submenu_ trigger, it will have a parent menu */
-    _parentMenu, 
-    //#region --- Touch device customizations ---
-    /** Client input device information */
-    _clientInput, 
-    /** Client output device information */
-    _clientOutput, 
-    //#endregion --- Touch device customizations ---
-    /**
-     * If this is a _submenu_ trigger, there should be a corresponding menu
-     * item directive present as well:
-     *
-     *     <button graniteMenuItem [graniteMenuTriggerFor]="...">
-     *                   ^-- This one
-     */
-    _menuItemInstance, _dir, _focusMonitor, 
-    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-    document) {
-        this._overlay = _overlay;
-        this._element = _element;
-        this._viewContainerRef = _viewContainerRef;
-        this._parentMenu = _parentMenu;
-        this._clientInput = _clientInput;
-        this._clientOutput = _clientOutput;
-        this._menuItemInstance = _menuItemInstance;
-        this._dir = _dir;
-        this._focusMonitor = _focusMonitor;
-        this.openOnClick = true;
-        /** Whether the associated menu is open */
-        this._isMenuOpen = false;
-        // Tracking input type is necessary so it's possible to only auto-focus
-        // the first item of the list when the menu is opened via the keyboard
-        this._openedBy = null;
-        this._hoverSubscription = Subscription.EMPTY;
-        this._menuCloseSubscription = Subscription.EMPTY;
-        this._closingActionsSubscription = Subscription.EMPTY;
-        this._portal = null;
-        this._overlayRef = null;
-        this._touchTouchingElement = false;
-        /**
-         * Handles touch start events on the trigger.
-         * Needs to be an arrow function so we can easily use addEventListener and removeEventListener.
-         */
-        this._handleTouchStart = () => {
-            this._openedBy = 'touch';
-        };
-        // ----------------------------------------- //
-        // --- Here be poor man's touch gestures --- //
-        // ----------------------------------------- //
-        // TODO: Replace with Hammer or other gesture library
-        /**
-         * Handles touch start events on the overlay host element (wrapper).
-         * Needs to be an arrow function so we can easily use addEventListener and removeEventListener.
-         */
-        this._handleOverlayTouchStart = (event) => {
-            if (this.menu._isAnimating) {
-                return;
-            }
-            this._touchStartTime = new Date().getTime();
-            this._touchStartX = event.changedTouches[0].clientX;
-            this._touchStartY = event.changedTouches[0].clientY;
-            this._touchCurrentX = this._touchStartX;
-            this._touchCurrentY = this._touchStartY;
-            this._touchTranslateX = 0;
-            this._touchMaxX =
-                this._overlayRef.hostElement.getBoundingClientRect().width;
-            this._touchLockedX = null;
-            this._touchTouchingElement = true;
-        };
-        this._handleOverlayTouchMove = (event) => {
-            if (!this._touchTouchingElement || this.menu._isAnimating) {
-                return;
-            }
-            if (this._touchLockedX) {
-                return;
-            }
-            this._touchCurrentX = event.changedTouches[0].clientX;
-            this._touchCurrentY = event.changedTouches[0].clientY;
-            // Lock X-axis pan if initiating pan on Y-axis
-            if (this._touchLockedX === null) {
-                const dy = Math.abs(this._touchCurrentY - this._touchStartY);
-                const dx = Math.abs(this._touchCurrentX - this._touchStartX);
-                if (dx > 10 || dy > 10) {
-                    this._touchLockedX = dy > dx;
-                    return;
-                }
-            }
-            // Restrict to right pan/swipe and make menu movement extremely slow when
-            // moved past allowed limits.
-            const menuMargin = 16;
-            this._touchTranslateX = this._touchCurrentX - this._touchStartX;
-            if (this._touchTranslateX < 0) {
-                this._touchTranslateX = this.easeOutExpo(this._touchTranslateX, 0, -menuMargin / 2, this._touchMaxX * -4);
-            }
-            else if (!this._parentMenu) {
-                this._touchTranslateX = this.easeOutExpo(this._touchTranslateX, 0, menuMargin / 2, this._touchMaxX * 4);
-            }
-            else if (this._touchTranslateX > this._touchMaxX) {
-                this._touchTranslateX = this.easeOutExpo(this._touchTranslateX - this._touchMaxX, this._touchMaxX, menuMargin / 2, this._touchMaxX * 4);
-            }
-            // Set new sub menu position and tell any parent to follow;
-            this.animateSetMenuPosition(this._touchTranslateX);
-        };
-        this._handleOverlayTouchEnd = () => {
-            if (!this._touchTouchingElement || this.menu._isAnimating) {
-                return;
-            }
-            this._touchTranslateX = this._touchCurrentX - this._touchStartX;
-            if (this._touchTranslateX === 0) {
-                return;
-            }
-            this._touchTouchingElement = false;
-            this._touchTimeTaken = new Date().getTime() - this._touchStartTime;
-            const swipeMinDistance = 10;
-            const swipeMinTime = 50;
-            const swipeMaxTime = 300;
-            const pannedHalfwayRight = this._touchTranslateX > this._touchMaxX / 2;
-            const swipedRight = this._touchTranslateX > this._touchMaxX / swipeMinDistance &&
-                this._touchTimeTaken > swipeMinTime &&
-                this._touchTimeTaken < swipeMaxTime;
-            if (!!this._parentMenu && (swipedRight || pannedHalfwayRight)) {
-                // Close submenu keydown-style: close only this menu and leave parents open
-                this.menu.closed.emit('keydown');
-            }
-            else {
-                // Pan ended but the menu was not moved far enough. Reset menus to
-                // where they were before panning stared.
-                this.animateOpenMenu();
-            }
-        };
-        _element.nativeElement.addEventListener('touchstart', this._handleTouchStart, passiveEventListenerOptions);
-        if (_menuItemInstance) {
-            _menuItemInstance._triggersSubmenu = this.triggersSubmenu();
-        }
-        this._document = document;
-    }
-    ngOnChanges(changes) {
-        if (changes.menu) {
-            this._handleMenuChange();
-        }
-    }
-    ngAfterContentInit() {
-        // removed checkMenu here to avoid errors in dynamically genarated menus
-        // menu is checked when opening the menu
-        // this._checkMenu();
-        this._handleHover();
-    }
-    ngOnDestroy() {
-        if (this._overlayRef) {
-            //#region --- Touch device customizations ---
-            this.removeOverlayListeners();
-            //#endregion --- Touch device customizations ---
-            this._overlayRef.dispose();
-            this._overlayRef = null;
-        }
-        this._element.nativeElement.removeEventListener('touchstart', this._handleTouchStart, passiveEventListenerOptions);
-        this._hoverSubscription.unsubscribe();
-        this._menuCloseSubscription.unsubscribe();
-        this._closingActionsSubscription.unsubscribe();
-    }
-    /** Handles change of associated menu */
-    _handleMenuChange() {
-        this._menuCloseSubscription.unsubscribe();
-        // Close the menu overlay when the menu itself says it wants to be closed
-        if (this.menu) {
-            const closed = this.menu.closed;
-            this._menuCloseSubscription = closed.subscribe((reason) => {
-                //#region --- Touch device customizations ---
-                if (this.menu._isClosing) {
-                    return;
-                }
-                this.menu._isClosing = true;
-                // Get rid of the menu and tell any parent to restore its position
-                if (this._clientOutput.device === 'touch') {
-                    // First we wait for any running animation to complete
-                    const runningAnimationDone = this.menu._isAnimating
-                        ? this.menu._animationDone
-                        : of([null]);
-                    runningAnimationDone
-                        .pipe(take(1), delay(0, asapScheduler))
-                        // eslint-disable-next-line rxjs/no-nested-subscribe
-                        .subscribe(() => {
-                        this.animateCloseMenu(reason !== 'keydown', reason === 'click');
-                        this.menu._animationDone
-                            .pipe(take(1), delay(0, asapScheduler))
-                            // eslint-disable-next-line rxjs/no-nested-subscribe
-                            .subscribe(() => this._destroyMenu());
-                    });
-                }
-                else {
-                    //#endregion --- Touch device customizations ---
-                    this._destroyMenu();
-                }
-                // If a click closed the menu, we should close the entire chain of nested menus.
-                if ((reason === 'click' || reason === 'tab') && this._parentMenu) {
-                    this._parentMenu.closed.emit(reason);
-                }
-            });
-        }
-    }
-    isOpen() {
-        return this._isMenuOpen;
-    }
-    /** Open the associated menu */
-    openMenu() {
-        var _a;
-        if (this._isMenuOpen) {
-            return;
-        }
-        this._checkMenu();
-        this.menu.parentMenu = this.triggersSubmenu()
-            ? this._parentMenu
-            : undefined;
-        this.menu.direction = this._dir.value === 'rtl' ? 'rtl' : 'ltr';
-        if (this._parentMenu) {
-            // Menu triggers inherit target device types from their parent.
-            // Ultimately it is the root trigger that determines device types for
-            // the whole menu hierarchy.
-            this._clientInput = this._parentMenu._clientInput;
-            this._clientOutput = this._parentMenu._clientOutput;
-        }
-        //#region --- Touch device customizations ---
-        // Make the menu we're about to open use the same devices as the trigger
-        this.menu._setDevice(this._clientInput, this._clientOutput);
-        if (this._clientOutput.device === 'touch') {
-            this.menu.showBackButton = !!this._parentMenu;
-            this.menu._updateShowTitle();
-            if (!this.menu.closeLabel) {
-                this.menu.closeLabel = (_a = this._parentMenu) === null || _a === void 0 ? void 0 : _a.closeLabel;
-            }
-            this.menu.showCloseButton = !!this.menu.closeLabel;
-        }
-        this.menu._isClosing = false;
-        const panelClass = [];
-        if (this._clientOutput.device === 'touch') {
-            panelClass.push('granite-overlay-pane-fill-width-bottom');
-        }
-        const scrollStrategy = this._clientOutput.device !== 'touch'
-            ? this._overlay.scrollStrategies.reposition()
-            : undefined;
-        const hasBackdrop = this._clientOutput.device === 'touch' && !this.triggersSubmenu();
-        //#endregion --- Touch device customizations ---
-        // Create an overlay to stuff the menu (portal) into below
-        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);
-            //#region --- Touch device customizations ---
-            // Add touch listener for submenu back pan/swipe
-            if (this._clientOutput.device === 'touch') {
-                this.addOverlayListeners();
-            }
-            //#endregion --- Touch device customizations ---
-        }
-        else {
-            // Reset animation state for reused overlays
-            if (this._clientOutput.device === 'touch') {
-                this.menu._panelAnimationState = 'void';
-            }
-        }
-        // Create portal from associated menu's template
-        if (!this._portal || this._portal.templateRef !== this.menu.templateRef) {
-            this._portal = new TemplatePortal(this.menu.templateRef, this._viewContainerRef);
-        }
-        // Attach menu portal to overlay ref (which is a portal outlet)
-        this._overlayRef.attach(this._portal);
-        // Subscribe to stream that emits whenever an action that should close the menu occurs
-        this._closingActionsSubscription = this._menuClosingActions().subscribe(() => this.closeMenu());
-        this.animateOpenMenu();
-        this._setIsMenuOpen(true);
-        this.menu.focusFirstItem(this._openedBy || 'program');
-    }
-    /** Whether the menu triggers a sub-menu or a top-level one. */
-    triggersSubmenu() {
-        return !!(this._menuItemInstance && this._parentMenu);
-    }
-    /** Toggles the menu between the open and closed states. */
-    toggleMenu() {
-        if (this._isMenuOpen) {
-            this.closeMenu();
-        }
-        else if (this.openOnClick) {
-            this.openMenu();
-        }
-    }
-    /** Close the associated menu */
-    closeMenu() {
-        this.menu.closed.emit();
-    }
-    /**
-     * Focuses the menu trigger.
-     * @param origin Source of the menu trigger's focus.
-     */
-    focus(origin = 'program', options) {
-        if (this._focusMonitor) {
-            this._focusMonitor.focusVia(this._element, origin, options);
-        }
-        else {
-            this._element.nativeElement.focus(options);
-        }
-    }
-    /** Detach menu portal from overlay and update open state */
-    _destroyMenu() {
-        if (!this._overlayRef || !this._isMenuOpen) {
-            return;
-        }
-        this._closingActionsSubscription.unsubscribe();
-        this._overlayRef.detach();
-        this._restoreFocus();
-        this.menu._resetAnimation();
-        this._setIsMenuOpen(false);
-    }
-    /** Handles mouse presses on the trigger. */
-    _handleMousedown(event) {
-        if (!isFakeMousedownFromScreenReader(event)) {
-            if (this._openedBy !== 'touch') {
-                // Since right or middle button clicks won't trigger the `click` event,
-                // we shouldn't consider the menu as opened by mouse in those cases.
-                this._openedBy = event.button === 0 ? 'mouse' : null;
-            }
-            // Since clicking on the trigger won't close the menu if it opens a sub-menu,
-            // we should prevent focus from moving onto it via click to avoid the
-            // highlight from lingering on the menu item.
-            if (this.triggersSubmenu() && !this._toggleOnSubmenuClick()) {
-                event.preventDefault();
-            }
-        }
-    }
-    /** Handles key presses on the trigger. */
-    _handleKeydown(event) {
-        const key = event.key;
-        if (this.triggersSubmenu() &&
-            ((key === 'ArrowRight' && this._dir.value === 'ltr') ||
-                (key === 'ArrowLeft' && this._dir.value === 'rtl'))) {
-            this.openMenu();
-        }
-    }
-    /** Handles click events on the trigger. */
-    _handleClick(event) {
-        if (this.triggersSubmenu()) {
-            // Stop event propagation to avoid closing the parent menu.
-            event.stopPropagation();
-            this._toggleOnSubmenuClick() ? this.toggleMenu() : this.openMenu();
-        }
-        else {
-            this.toggleMenu();
-        }
-    }
-    /** Handles the cases where the user hovers over the trigger. */
-    _handleHover() {
-        // Subscribe to changes in the hovered item in order to toggle the panel.
-        if (!this.triggersSubmenu() || !this._parentMenu) {
-            return;
-        }
-        this._hoverSubscription = this._parentMenu
-            ._hovered()
-            .pipe(filter(() => this._openOnHover()), 
-        // Since we might have multiple competing triggers for the same menu (e.g. a sub-menu
-        // with different data and triggers), we have to delay it by a tick to ensure that
-        // it won't be closed immediately after it is opened.
-        filter((active) => active === this._menuItemInstance /*&& !active.disabled*/), delay(0, asapScheduler))
-            .subscribe(() => {
-            this._openedBy = 'mouse';
-            // If the same menu is used between multiple triggers, it might still be animating
-            // while the new trigger tries to re-open it. Wait for the animation to finish
-            // before doing so. Also interrupt if the user moves to another item.
-            if (this.menu instanceof _MenuBaseComponent && this.menu._isAnimating) {
-                // We need the `delay(0)` here in order to avoid
-                // 'changed after checked' errors in some cases. See Angular Material #12194.
-                this.menu._animationDone
-                    .pipe(take(1), delay(0, asapScheduler), takeUntil(this._parentMenu._hovered()))
-                    // eslint-disable-next-line rxjs/no-nested-subscribe
-                    .subscribe(() => this.openMenu());
-            }
-            else {
-                this.openMenu();
-            }
-        });
-    }
-    /**
-     * Restores focus to the element that was focused before the menu was open.
-     * Could be the root trigger button or a submenu trigger item
-     */
-    _restoreFocus() {
-        // We should reset focus if the user is navigating using a keyboard or
-        // if we have a top-level trigger which might cause focus to be lost
-        // when clicking outside of the menu.
-        if (!this._openedBy) {
-            // Note that the focus style will show up both for `program` and
-            // `keyboard` so we don't have to specify which one it is.
-            this.focus();
-        }
-        else if (!this.triggersSubmenu()) {
-            this.focus(this._openedBy);
-        }
-        this._openedBy = null;
-    }
-    // Set state rather than toggle to support triggers sharing a menu
-    _setIsMenuOpen(isOpen) {
-        this._isMenuOpen = isOpen;
-        if (this.triggersSubmenu()) {
-            this._menuItemInstance._highlighted =
-                isOpen && this._clientOutput.device !== 'touch';
-        }
-    }
-    /**
-     * This method checks that a valid instance of MenuComponent has been passed into
-     * graniteMenuTriggerFor. If not, an exception is thrown.
-     */
-    _checkMenu() {
-        if (!this.menu) {
-            throwGraniteMenuMissingError();
-        }
-    }
-    /**
-     * Returns strategy for positioning the overlay for desktop devices:
-     * Place adjacent to the trigger button (preferably immediately below)
-     * in order to show as much of the menu as possible.
-     */
-    _desktopPositionStrategy() {
-        const positionStrategy = this._overlay
-            .position()
-            .flexibleConnectedTo(this._element)
-            .withLockedPosition()
-            .withTransformOriginOn('.granite-menu');
-        this._setPosition(positionStrategy);
-        return positionStrategy;
-    }
-    /**
-     * Sets the appropriate positions on a position strategy
-     * so the overlay connects with the trigger correctly.
-     * @param positionStrategy Strategy whose position to update.
-     */
-    _setPosition(positionStrategy) {
-        const MENU_PANEL_TOP_PADDING = 0;
-        let [originX, originFallbackX] = this.menu.xPosition === 'before' ? ['end', 'start'] : ['start', 'end'];
-        const [overlayY, overlayFallbackY] = this.menu.yPosition === 'above' ? ['bottom', 'top'] : ['top', 'bottom'];
-        let [originY, originFallbackY] = [overlayY, overlayFallbackY];
-        let [overlayX, overlayFallbackX] = [originX, originFallbackX];
-        let offsetY = 0;
-        if (this.triggersSubmenu()) {
-            // When the menu is a sub-menu, it should always align itself
-            // to the edges of the trigger, instead of overlapping it.
-            overlayFallbackX = originX =
-                this.menu.xPosition === 'before' ? 'start' : 'end';
-            originFallbackX = overlayX = originX === 'end' ? 'start' : 'end';
-            offsetY =
-                overlayY === 'bottom'
-                    ? MENU_PANEL_TOP_PADDING
-                    : -MENU_PANEL_TOP_PADDING;
-        }
-        else {
-            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,
-            },
-        ]);
-    }
-    /** Returns a stream that emits whenever an action that should close the menu occurs. */
-    _menuClosingActions() {
-        var _a;
-        const detachments = (_a = this._overlayRef) === null || _a === void 0 ? void 0 : _a.detachments();
-        const parentClose = this._parentMenu
-            ? this._parentMenu.closed
-            : of();
-        const hover = this._clientOutput.device === 'desktop' && this._parentMenu
-            ? this._parentMenu._hovered().pipe(filter((item) => item !== this._menuItemInstance), filter(() => this._isMenuOpen))
-            : of();
-        // Note: Quick fix. Feature reportedly exists in CDK for Angular 10
-        // Filter to prevent closing when animating added though. Applied to
-        // root menu only.
-        const outsideClick = !this._parentMenu
-            ? fromEvent(this._document, 'click').pipe(filter((e) => e.target !== this._element.nativeElement &&
-                e.target.closest('.granite-menu') === null), filter(() => !this.menu._isAnimating))
-            : of();
-        return merge(detachments, hover, parentClose, outsideClick);
-    }
-    /**
-     * Whether to automatically open submenus on hover. This is true when showing
-     * desktop menus and having mouse support.
-     */
-    _openOnHover() {
-        var _a, _b;
-        return ((this.triggersSubmenu()
-            ? this._parentMenu.openOnHover
-            : this.menu.openOnHover) &&
-            ((_a = this._parentMenu._clientOutput) === null || _a === void 0 ? void 0 : _a.device) === 'desktop' &&
-            ((_b = this._parentMenu._clientInput) === null || _b === void 0 ? void 0 : _b.devices.includes('mouse')));
-    }
-    /**
-     * Whether to toggle submenus on click. This is true when showing desktop menus
-     * without mouse support. Which, by the way, is not a great idea to begin with.
-     */
-    _toggleOnSubmenuClick() {
-        var _a, _b;
-        return (!(this.triggersSubmenu()
-            ? this._parentMenu.openOnHover
-            : this.menu.openOnHover) ||
-            (((_a = this._parentMenu._clientOutput) === null || _a === void 0 ? void 0 : _a.device) === 'desktop' &&
-                !((_b = this._parentMenu._clientInput) === null || _b === void 0 ? void 0 : _b.devices.includes('mouse'))));
-    }
-    // ------------------------------------------- //
-    // --- Here be touch device customizations --- //
-    // ------------------------------------------- //
-    /** Set animation state to bring a newly opened menu into view */
-    animateOpenMenu() {
-        this._clientOutput.device === 'touch'
-            ? this.animateTouchOpenMenu()
-            : this.menu._startAnimation();
-    }
-    animateTouchOpenMenu() {
-        if (this.triggersSubmenu()) {
-            // Slide newly opened sub menu into view from the side,
-            // pushing any parent menu out of view on the other side
-            this.menu._startTouchSubmenuEnterAnimation();
-            this._parentMenu._startTouchHideAnimation();
-        }
-        else {
-            // Slide root menu into view from below
-            this.menu._startTouchRootEnterAnimation();
-        }
-    }
-    /** Set animation state to close the active menu */
-    animateCloseMenu(toBelow, withDelay) {
-        this._clientOutput.device === 'touch'
-            ? this._animateTouchCloseMenu(toBelow, withDelay)
-            : this._parentMenu._resetAnimation();
-    }
-    _animateTouchCloseMenu(toBelow, withDelay) {
-        var _a;
-        if (toBelow) {
-            // Slide menu out of view below the viewport
-            withDelay
-                ? this.menu._startTouchCloseDownAnimationWithDelay()
-                : this.menu._startTouchCloseDownAnimation();
-        }
-        else {
-            // Slide the closed menu out of view to the side
-            // and slide any parent menu back into view
-            this.menu._startTouchCloseSideAnimation();
-            (_a = this._parentMenu) === null || _a === void 0 ? void 0 : _a._startTouchSubmenuEnterAnimation();
-        }
-    }
-    /**
-     * Set animation state to place the menu and any parent at the given
-     * horizontal position, i.e. following touch pan movement.
-     *
-     * @param xOffset Horizontal offset
-     */
-    animateSetMenuPosition(xOffset) {
-        this.menu._startTouchPanAnimation(xOffset);
-        if (this._parentMenu) {
-            this._parentMenu._startTouchHidePanAnimation(xOffset);
-        }
-    }
-    /**
-     * Returns strategy for positioning the overlay depending on what type of
-     * device the menu is being shown on
-     */
-    _positionStrategy() {
-        return this._clientOutput.device === 'touch'
-            ? this._touchPositionStrategy()
-            : this._desktopPositionStrategy();
-    }
-    /**
-     * Returns strategy for positioning the overlay for touch devices:
-     * Place centered at the bottom of the screen.
-     */
-    _touchPositionStrategy() {
-        return this._overlay.position().global();
-    }
-    /**
-     * Remove touch device pan/swipe listeners from overlay host element
-     */
-    addOverlayListeners() {
-        this._overlayRef.hostElement.addEventListener('touchstart', this._handleOverlayTouchStart, passiveEventListenerOptions);
-        this._overlayRef.hostElement.addEventListener('touchmove', this._handleOverlayTouchMove, passiveEventListenerOptions);
-        this._overlayRef.hostElement.addEventListener('touchend', this._handleOverlayTouchEnd, passiveEventListenerOptions);
-    }
-    /**
-     * Remove touch device pan/swipe listeners from overlay host element
-     */
-    removeOverlayListeners() {
-        this._overlayRef.hostElement.removeEventListener('touchstart', this._handleOverlayTouchStart, passiveEventListenerOptions);
-        this._overlayRef.hostElement.removeEventListener('touchmove', this._handleOverlayTouchMove, passiveEventListenerOptions);
-        this._overlayRef.hostElement.removeEventListener('touchend', this._handleOverlayTouchEnd, passiveEventListenerOptions);
-    }
-    /**
-     * Standard exponential ease out function
-     *
-     * @param current Current value
-     * @param offset Offset value, to which calculated value will be added
-     * @param target The target value
-     * @param end Value to which current value is compared
-     */
-    easeOutExpo(current, offset, target, end) {
-        return current === end
-            ? offset + target
-            : target * (-Math.pow(2, (-10 * current) / end) + 1) + offset;
-    }
-}
-GraniteMenuTriggerForDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteMenuTriggerForDirective, deps: [{ token: i1$2.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { 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 });
-GraniteMenuTriggerForDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", 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": "_isMenuOpen || null", "attr.aria-controls": "_isMenuOpen ? menu.panelId : null" }, classAttribute: "granite-menu-trigger" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteMenuTriggerForDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: `[graniteMenuTriggerFor]`,
-                    host: {
-                        class: 'granite-menu-trigger',
-                        'aria-haspopup': 'true',
-                        '[attr.aria-expanded]': '_isMenuOpen || null',
-                        '[attr.aria-controls]': '_isMenuOpen ? menu.panelId : null',
-                        '(mousedown)': '_handleMousedown($event)',
-                        '(keydown)': '_handleKeydown($event)',
-                        '(click)': '_handleClick($event)',
-                    },
-                }]
-        }], ctorParameters: function () {
-        return [{ type: i1$2.Overlay }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: _MenuBaseComponent, decorators: [{
-                        type: Inject,
-                        args: [GRANITE_MENU_PANEL]
-                    }, {
-                        type: Optional
-                    }] }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [GRANITE_CLIENT_INPUT]
-                    }, {
-                        type: Optional
-                    }] }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [GRANITE_CLIENT_OUTPUT]
-                    }, {
-                        type: Optional
-                    }] }, { type: GraniteMenuItemComponent, decorators: [{
-                        type: Optional
-                    }, {
-                        type: Self
-                    }] }, { type: i3.Directionality, decorators: [{
-                        type: Optional
-                    }] }, { type: i1.FocusMonitor }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [DOCUMENT]
-                    }] }];
-    }, propDecorators: { menu: [{
-                type: Input,
-                args: ['graniteMenuTriggerFor']
-            }], openOnClick: [{
-                type: Input
-            }] } });
-
-class GraniteDividerDirective {
-    constructor() {
-        this.dividerDirection = 'top';
-    }
-}
-GraniteDividerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteDividerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-GraniteDividerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: GraniteDividerDirective, selector: "[graniteDivider]", inputs: { dividerDirection: "dividerDirection" }, host: { properties: { "class.granite-divider-top": "dividerDirection === \"top\"", "class.granite-divider-bottom": "dividerDirection === \"bottom\"" } }, exportAs: ["graniteDivider"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteDividerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[graniteDivider]',
-                    exportAs: 'graniteDivider',
-                    host: {
-                        '[class.granite-divider-top]': 'dividerDirection === "top"',
-                        '[class.granite-divider-bottom]': 'dividerDirection === "bottom"',
-                    },
-                }]
-        }], propDecorators: { dividerDirection: [{
-                type: Input
-            }] } });
-
-class GraniteIconModule {
-}
-GraniteIconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-GraniteIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: GraniteIconModule, declarations: [GraniteIconComponent], exports: [GraniteIconComponent] });
-GraniteIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteIconModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteIconModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [GraniteIconComponent],
-                    exports: [GraniteIconComponent],
-                }]
-        }] });
-
-class GraniteTitleDirective {
-}
-GraniteTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-GraniteTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: GraniteTitleDirective, selector: "[graniteTitle]", host: { properties: { "class.granite-title": "true" } }, exportAs: ["graniteTitle"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteTitleDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[graniteTitle]',
-                    exportAs: 'graniteTitle',
-                    host: {
-                        '[class.granite-title]': 'true',
-                    },
-                }]
-        }] });
-
-class GraniteMenuModule {
-}
-GraniteMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-GraniteMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: GraniteMenuModule, declarations: [GraniteMenuComponent,
-        GraniteMenuItemComponent,
-        GraniteMenuTriggerForDirective,
-        GraniteMenuTouchCloseComponent,
-        GraniteMenuTouchTitleItemComponent,
-        GraniteDividerDirective,
-        GraniteTitleDirective], imports: [CommonModule, OverlayModule, PortalModule, GraniteIconModule], exports: [GraniteMenuComponent,
-        GraniteMenuItemComponent,
-        GraniteMenuTriggerForDirective,
-        GraniteMenuTouchCloseComponent,
-        GraniteMenuTouchTitleItemComponent,
-        GraniteDividerDirective,
-        GraniteTitleDirective] });
-GraniteMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteMenuModule, imports: [CommonModule, OverlayModule, PortalModule, GraniteIconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteMenuModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        GraniteMenuComponent,
-                        GraniteMenuItemComponent,
-                        GraniteMenuTriggerForDirective,
-                        GraniteMenuTouchCloseComponent,
-                        GraniteMenuTouchTitleItemComponent,
-                        GraniteDividerDirective,
-                        GraniteTitleDirective,
-                    ],
-                    imports: [CommonModule, OverlayModule, PortalModule, GraniteIconModule],
-                    exports: [
-                        GraniteMenuComponent,
-                        GraniteMenuItemComponent,
-                        GraniteMenuTriggerForDirective,
-                        GraniteMenuTouchCloseComponent,
-                        GraniteMenuTouchTitleItemComponent,
-                        GraniteDividerDirective,
-                        GraniteTitleDirective,
-                    ],
-                }]
-        }] });
-
-/**
- * Test harness for menu component
- *
- * Stripped-down version of the Angular Material menu test harness (.../menu/menu-harness.ts)
- * just to get things going.
- */
-class GraniteMenuHarness extends ComponentHarness {
-    constructor() {
-        super(...arguments);
-        this._documentRootLocator = this.documentRootLocatorFactory();
-    }
-    /**
-     * Gets a `HarnessPredicate` that can be used to search for a `MenuHarness` that meets
-     * certain criteria.
-     * @param options Options for filtering which menu item instances are considered a match.
-     * @return a `HarnessPredicate` configured with the given options.
-     */
-    static with(options = {}) {
-        return new HarnessPredicate(GraniteMenuHarness, options).addOption('text', options.text, 
-        /* @dynamic */ (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text));
-    }
-    /** Gets the text of the menu trigger */
-    getText() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return (yield this.host()).text();
-        });
-    }
-    /** Opens the menu, unless already open */
-    open() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!(yield this.isOpen())) {
-                yield (yield this.host()).click();
-                // This is necessary so that we wait for the opening animation to finish.
-                return this.forceStabilize();
-            }
-        });
-    }
-    /** Closes the menu, unless already closed */
-    close() {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            yield ((_a = (yield this._getMenuPanel())) === null || _a === void 0 ? void 0 : _a.sendKeys(TestKey.ESCAPE));
-            // This is necessary so that we wait for the closing animation to finish.
-            return this.forceStabilize();
-        });
-    }
-    /** Whether the menu is open */
-    isOpen() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return !!(yield this._getMenuPanel());
-        });
-    }
-    /**
-     * Gets a list of `GraniteMenuItemHarness` representing the items in the menu.
-     * @param filters Optionally filters which menu items are included.
-     */
-    getItems(filters = {}) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const panelId = yield this._getPanelId();
-            if (panelId) {
-                return this._documentRootLocator.locatorForAll(GraniteMenuItemHarness.with(Object.assign(Object.assign({}, filters), { ancestor: `#${panelId}` })))();
-            }
-            return [];
-        });
-    }
-    /** Gets the menu panel (popup) associated with the menu */
-    _getMenuPanel() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const panelId = yield this._getPanelId();
-            return panelId
-                ? this._documentRootLocator.locatorForOptional(`#${panelId}`)()
-                : null;
-        });
-    }
-    /** Gets the id of the menu panel (popup) associated with this menu */
-    _getPanelId() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const panelId = yield (yield this.host()).getAttribute('aria-controls');
-            return panelId || null;
-        });
-    }
-}
-/**
- * The selector for the host element of a `MenuComponent` instance,
- * i.e. the button element used to open the menu.
- */
-GraniteMenuHarness.hostSelector = '.granite-menu-trigger';
-class GraniteMenuItemHarness extends ComponentHarness {
-    /**
-     * Gets a `HarnessPredicate` that can be used to search for a `GraniteMenuItemHarness` that meets
-     * certain criteria.
-     * @param options Options for filtering which menu item instances are considered a match.
-     * @return a `HarnessPredicate` configured with the given options.
-     */
-    static with(options = {}) {
-        return new HarnessPredicate(GraniteMenuItemHarness, options).addOption('text', options.text, 
-        /* @dynamic */ (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text));
-    }
-    /** Gets the text of the menu item. */
-    getText() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return (yield this.host()).text();
-        });
-    }
-    /** Whether this item has a submenu. */
-    hasSubmenu() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return (yield this.host()).matchesSelector(GraniteMenuHarness.hostSelector);
-        });
-    }
-    /** Gets the submenu associated with this menu item, or null if none. */
-    getSubmenu() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (yield this.hasSubmenu()) {
-                return new GraniteMenuHarness(this.locatorFactory);
-            }
-            return null;
-        });
-    }
-    /** Clicks the menu item. */
-    click() {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield (yield this.host()).click();
-            // This is necessary so that we wait for the opening animation to finish. (i.e. if it opens another menu)
-            return this.forceStabilize();
-        });
-    }
-}
-/** The selector for the host element of a `MenuItemComponent` instance. */
-GraniteMenuItemHarness.hostSelector = '.granite-menu-item';
-
-class GraniteToggleSwitchComponent {
-    constructor(_focusMonitor) {
-        this._focusMonitor = _focusMonitor;
-        this.id = null;
-        this.checked = false;
-        this.disabled = false;
-        this.readonly = false;
-        this.labelPosition = 'after';
-        this.ariaLabel = null;
-        this.ariaLabelledby = null;
-        this.valueChange = new EventEmitter();
-        this.toggleChange = new EventEmitter();
-        this.toggleBlur = new EventEmitter();
-        this._positionBefore = false;
-        this._toggleSwitchDisabled = false;
-    }
-    ngOnChanges(changes) {
-        if (changes.checked) {
-            this.checked = coerceBooleanProperty(changes.checked.currentValue);
-        }
-        if (changes.disabled) {
-            this.disabled = coerceBooleanProperty(changes.disabled.currentValue);
-        }
-        if (changes.readonly) {
-            this.readonly = coerceBooleanProperty(changes.readonly.currentValue);
-        }
-        if (changes.labelPosition != null) {
-            this._positionBefore =
-                changes.labelPosition.currentValue != null &&
-                    changes.labelPosition.currentValue === 'before';
-        }
-        // conditional checker if the control is either/both in readonly or disabled state
-        if (changes.disabled || changes.readonly) {
-            if (this.disabled || this.readonly) {
-                this._toggleSwitchDisabled = true;
-            }
-            else
-                this._toggleSwitchDisabled = false;
-        }
-    }
-    focus(origin = 'program', options) {
-        this._focusMonitor.focusVia(this._getInputElement(), origin, options);
-    }
-    _onBlur() {
-        this.toggleBlur.emit();
-    }
-    _toggleSwitchChange() {
-        this.checked = this._getInputElement().checked;
-        this.valueChange.emit(this.checked);
-    }
-    _toggleSwitchClick() {
-        this.toggleChange.emit();
-    }
-    _getInputElement() {
-        return this._inputElement.nativeElement;
-    }
-}
-GraniteToggleSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteToggleSwitchComponent, deps: [{ token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component });
-GraniteToggleSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GraniteToggleSwitchComponent, selector: "granite-toggle-switch", inputs: { id: "id", checked: "checked", disabled: "disabled", readonly: "readonly", labelPosition: "labelPosition", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { valueChange: "valueChange", toggleChange: "toggleChange", toggleBlur: "toggleBlur" }, host: { properties: { "class.granite-toggle-switch-checked": "checked", "class.granite-toggle-switch-disabled": "disabled", "class.granite-toggle-switch-readonly": "readonly", "class.granite-toggle-switch-label-before": "_positionBefore" }, classAttribute: "granite-toggle-switch" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["graniteToggleSwitch"], usesOnChanges: true, ngImport: i0, template: "<label [attr.for]=\"id\" class=\"granite-toggle-switch-label\">\n  <div class=\"granite-toggle-switch-bar\">\n    <input\n      #input\n      [id]=\"id\"\n      class=\"granite-toggle-switch-input cdk-visually-hidden\"\n      role=\"switch\"\n      type=\"checkbox\"\n      [attr.aria-checked]=\"checked.toString()\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      [checked]=\"checked\"\n      [disabled]=\"_toggleSwitchDisabled\"\n      [readonly]=\"readonly\"\n      (click)=\"_toggleSwitchClick()\"\n      (change)=\"_toggleSwitchChange()\"\n      (blur)=\"_onBlur()\"\n    />\n    <div class=\"granite-toggle-switch-thumb\"></div>\n  </div>\n  <span class=\"granite-toggle-switch-text\"><ng-content></ng-content></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{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host(.granite-toggle-switch){color:var(--granite-color-text)}.granite-toggle-switch-bar{width:2rem;height:1rem;border-radius:.5rem;background-color:var(--granite-color-background-inactive);transition:background-color .1s linear;position:relative}.granite-toggle-switch-bar:focus-within{box-shadow:0 0 0 .0625rem var(--granite-color-focus)}.granite-toggle-switch-thumb{width:1rem;height:1rem;border-radius:1rem;background-color:var(--granite-color-text-static-light);border:.0625rem solid var(--granite-color-background-inactive);transition:float .1s linear}html[dir=ltr] .granite-toggle-switch-thumb{float:left}:host-context([dir=ltr]) .granite-toggle-switch-thumb{float:left}html[dir=rtl] .granite-toggle-switch-thumb{float:right}:host-context([dir=rtl]) .granite-toggle-switch-thumb{float:right}:host(.granite-toggle-switch-checked) .granite-toggle-switch-bar{background-color:var(--granite-color-background-active)}:host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{border:.0625rem solid var(--granite-color-background-active)}html[dir=ltr] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}:host-context([dir=ltr]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}html[dir=rtl] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}:host-context([dir=rtl]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}.granite-toggle-switch-label{display:flex;align-items:center;width:max-content}:host(.granite-toggle-switch-disabled) .granite-toggle-switch-label{opacity:.6}:host(.granite-toggle-switch-disabled) *{cursor:default}:host(.granite-toggle-switch-readonly) *{cursor:default}.granite-toggle-switch-text{padding-inline-start:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small)}.granite-toggle-switch-text:empty{display:none}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-label{flex-direction:row-reverse}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-8)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteToggleSwitchComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'granite-toggle-switch', exportAs: 'graniteToggleSwitch', host: {
-                        class: 'granite-toggle-switch',
-                        '[class.granite-toggle-switch-checked]': 'checked',
-                        '[class.granite-toggle-switch-disabled]': 'disabled',
-                        '[class.granite-toggle-switch-readonly]': 'readonly',
-                        '[class.granite-toggle-switch-label-before]': '_positionBefore',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"id\" class=\"granite-toggle-switch-label\">\n  <div class=\"granite-toggle-switch-bar\">\n    <input\n      #input\n      [id]=\"id\"\n      class=\"granite-toggle-switch-input cdk-visually-hidden\"\n      role=\"switch\"\n      type=\"checkbox\"\n      [attr.aria-checked]=\"checked.toString()\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      [checked]=\"checked\"\n      [disabled]=\"_toggleSwitchDisabled\"\n      [readonly]=\"readonly\"\n      (click)=\"_toggleSwitchClick()\"\n      (change)=\"_toggleSwitchChange()\"\n      (blur)=\"_onBlur()\"\n    />\n    <div class=\"granite-toggle-switch-thumb\"></div>\n  </div>\n  <span class=\"granite-toggle-switch-text\"><ng-content></ng-content></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{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host(.granite-toggle-switch){color:var(--granite-color-text)}.granite-toggle-switch-bar{width:2rem;height:1rem;border-radius:.5rem;background-color:var(--granite-color-background-inactive);transition:background-color .1s linear;position:relative}.granite-toggle-switch-bar:focus-within{box-shadow:0 0 0 .0625rem var(--granite-color-focus)}.granite-toggle-switch-thumb{width:1rem;height:1rem;border-radius:1rem;background-color:var(--granite-color-text-static-light);border:.0625rem solid var(--granite-color-background-inactive);transition:float .1s linear}html[dir=ltr] .granite-toggle-switch-thumb{float:left}:host-context([dir=ltr]) .granite-toggle-switch-thumb{float:left}html[dir=rtl] .granite-toggle-switch-thumb{float:right}:host-context([dir=rtl]) .granite-toggle-switch-thumb{float:right}:host(.granite-toggle-switch-checked) .granite-toggle-switch-bar{background-color:var(--granite-color-background-active)}:host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{border:.0625rem solid var(--granite-color-background-active)}html[dir=ltr] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}:host-context([dir=ltr]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}html[dir=rtl] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}:host-context([dir=rtl]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}.granite-toggle-switch-label{display:flex;align-items:center;width:max-content}:host(.granite-toggle-switch-disabled) .granite-toggle-switch-label{opacity:.6}:host(.granite-toggle-switch-disabled) *{cursor:default}:host(.granite-toggle-switch-readonly) *{cursor:default}.granite-toggle-switch-text{padding-inline-start:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small)}.granite-toggle-switch-text:empty{display:none}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-label{flex-direction:row-reverse}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-8)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.FocusMonitor }]; }, propDecorators: { id: [{
-                type: Input
-            }], checked: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], labelPosition: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input,
-                args: ['aria-label']
-            }], ariaLabelledby: [{
-                type: Input,
-                args: ['aria-labelledby']
-            }], valueChange: [{
-                type: Output
-            }], toggleChange: [{
-                type: Output
-            }], toggleBlur: [{
-                type: Output
-            }], _inputElement: [{
-                type: ViewChild,
-                args: ['input']
-            }] } });
-
-class GraniteToggleSwitchModule {
-}
-GraniteToggleSwitchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteToggleSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-GraniteToggleSwitchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: GraniteToggleSwitchModule, declarations: [GraniteToggleSwitchComponent], exports: [GraniteToggleSwitchComponent] });
-GraniteToggleSwitchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteToggleSwitchModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteToggleSwitchModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [GraniteToggleSwitchComponent],
-                    exports: [GraniteToggleSwitchComponent],
-                }]
-        }] });
-
-class GraniteRadioButtonComponent {
-    constructor(_focusMonitor, _radioDispatcher) {
-        this._focusMonitor = _focusMonitor;
-        this._radioDispatcher = _radioDispatcher;
-        this.id = null;
-        this.checked = false;
-        this.required = false;
-        this.disabled = false;
-        this.readonly = false;
-        this.labelPosition = 'after';
-        this.ariaLabel = null;
-        this.ariaLabelledby = null;
-        this.radioChange = new EventEmitter();
-        this.radioBlur = new EventEmitter();
-        this._positionBefore = false;
-        this._radioDisabled = false;
-        this._removeUniqueSelectionListenerFn = _radioDispatcher.listen((id, name) => {
-            if (id !== this.id && name === this.name) {
-                this.checked = false;
-            }
-        });
-    }
-    ngOnChanges(changes) {
-        if (changes.checked) {
-            this.checked = coerceBooleanProperty(changes.checked.currentValue);
-        }
-        if (changes.required) {
-            this.required = coerceBooleanProperty(changes.required.currentValue);
-        }
-        if (changes.readonly) {
-            this.readonly = coerceBooleanProperty(changes.readonly.currentValue);
-        }
-        if (changes.disabled) {
-            this.disabled = coerceBooleanProperty(changes.disabled.currentValue);
-        }
-        if (changes.labelPosition != null) {
-            this._positionBefore =
-                changes.labelPosition.currentValue != null &&
-                    changes.labelPosition.currentValue === 'before';
-        }
-        if (changes.disabled || changes.readonly) {
-            if (this.disabled || this.readonly) {
-                this._radioDisabled = true;
-            }
-            else
-                this._radioDisabled = false;
-        }
-    }
-    ngOnDestroy() {
-        if (this._removeUniqueSelectionListenerFn instanceof Function) {
-            this._removeUniqueSelectionListenerFn();
-        }
-    }
-    // Focuses the radio button.
-    focus(origin = 'program', options) {
-        this._focusMonitor.focusVia(this._getInputElement(), origin, options);
-    }
-    _radioChange(element) {
-        this.checked = this._getInputElement().checked;
-        // Notify all radio buttons with the same name to un-check
-        this._radioDispatcher.notify(this.id, this.name);
-        this.radioChange.emit(element === null || element === void 0 ? void 0 : element.value);
-    }
-    _onBlur() {
-        this.radioBlur.emit();
-    }
-    _getInputElement() {
-        return this._inputElement.nativeElement;
-    }
-}
-GraniteRadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteRadioButtonComponent, deps: [{ token: i1.FocusMonitor }, { token: i2.UniqueSelectionDispatcher }], target: i0.ɵɵFactoryTarget.Component });
-GraniteRadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: "15.2.9", ngImport: i0, type: GraniteRadioButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'granite-radio-button', exportAs: 'graniteRadioButton', host: {
-                        class: 'granite-radio-button',
-                        '[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',
-                    }, 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: function () { return [{ type: i1.FocusMonitor }, { type: i2.UniqueSelectionDispatcher }]; }, propDecorators: { value: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], checked: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], labelPosition: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input,
-                args: ['aria-label']
-            }], ariaLabelledby: [{
-                type: Input,
-                args: ['aria-labelledby']
-            }], radioChange: [{
-                type: Output
-            }], radioBlur: [{
-                type: Output
-            }], _inputElement: [{
-                type: ViewChild,
-                args: ['input']
-            }] } });
-
-class GraniteRadioCheckboxBase {
-    constructor() {
-        this.layout = 'horizontal';
-        this.ariaLabelledby = null;
-    }
-}
-GraniteRadioCheckboxBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteRadioCheckboxBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-GraniteRadioCheckboxBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: GraniteRadioCheckboxBase, inputs: { layout: "layout", ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteRadioCheckboxBase, decorators: [{
-            type: Directive
-        }], propDecorators: { layout: [{
-                type: Input
-            }], ariaLabelledby: [{
-                type: Input,
-                args: ['aria-labelledby']
-            }] } });
-
-class GraniteRadioGroupComponent extends GraniteRadioCheckboxBase {
-}
-GraniteRadioGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteRadioGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-GraniteRadioGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GraniteRadioGroupComponent, selector: "granite-radio-group", host: { properties: { "attr.role": "\"radiogroup\"", "attr.aria-labelledby": "ariaLabelledby", "class.granite-radio-checkbox-base-layout-horizontal": "layout === \"horizontal\"" }, classAttribute: "granite-radio-group" }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host(.granite-radio-checkbox-base-layout-horizontal){display:flex;align-items:flex-start}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteRadioGroupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'granite-radio-group', host: {
-                        class: 'granite-radio-group',
-                        '[attr.role]': '"radiogroup"',
-                        '[attr.aria-labelledby]': 'ariaLabelledby',
-                        '[class.granite-radio-checkbox-base-layout-horizontal]': 'layout === "horizontal"',
-                    }, template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host(.granite-radio-checkbox-base-layout-horizontal){display:flex;align-items:flex-start}\n"] }]
-        }] });
-
-class GraniteRadioButtonModule {
-}
-GraniteRadioButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteRadioButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-GraniteRadioButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: GraniteRadioButtonModule, declarations: [GraniteRadioButtonComponent, GraniteRadioGroupComponent], exports: [GraniteRadioButtonComponent, GraniteRadioGroupComponent] });
-GraniteRadioButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteRadioButtonModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteRadioButtonModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [GraniteRadioButtonComponent, GraniteRadioGroupComponent],
-                    exports: [GraniteRadioButtonComponent, GraniteRadioGroupComponent],
-                }]
-        }] });
-
-class GraniteCheckboxComponent {
-    constructor(_focusMonitor) {
-        this._focusMonitor = _focusMonitor;
-        this.id = null;
-        this.checked = false;
-        this.disabled = false;
-        this.readonly = false;
-        this.labelPosition = 'after';
-        this.ariaLabel = null;
-        this.ariaLabelledby = null;
-        this.valueChange = new EventEmitter();
-        this.checkboxChange = new EventEmitter();
-        this.checkboxBlur = new EventEmitter();
-        this._positionBefore = false;
-        this._checkboxDisabled = false;
-    }
-    ngOnChanges(changes) {
-        if (changes.checked) {
-            this.checked = coerceBooleanProperty(changes.checked.currentValue);
-        }
-        if (changes.disabled) {
-            this.disabled = coerceBooleanProperty(changes.disabled.currentValue);
-        }
-        if (changes.readonly) {
-            this.readonly = coerceBooleanProperty(changes.readonly.currentValue);
-        }
-        if (changes.labelPosition != null) {
-            this._positionBefore =
-                changes.labelPosition.currentValue != null &&
-                    changes.labelPosition.currentValue === 'before';
-        }
-        if (changes.disabled || changes.readonly) {
-            if (this.disabled || this.readonly) {
-                this._checkboxDisabled = true;
-            }
-            else
-                this._checkboxDisabled = false;
-        }
-    }
-    focus(origin = 'program', options) {
-        this._focusMonitor.focusVia(this._getInputElement(), origin, options);
-    }
-    _onBlur() {
-        this.checkboxBlur.emit();
-    }
-    _checkboxChange() {
-        this.checked = this._getInputElement().checked;
-        this.valueChange.emit(this.checked);
-    }
-    _checkboxClick() {
-        this.checkboxChange.emit();
-    }
-    _getInputElement() {
-        return this._inputElement.nativeElement;
-    }
-}
-GraniteCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteCheckboxComponent, deps: [{ token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component });
-GraniteCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GraniteCheckboxComponent, selector: "granite-checkbox", inputs: { id: "id", checked: "checked", disabled: "disabled", readonly: "readonly", labelPosition: "labelPosition", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { valueChange: "valueChange", checkboxChange: "checkboxChange", checkboxBlur: "checkboxBlur" }, host: { properties: { "class.granite-checkbox-checked": "checked", "class.granite-checkbox-disabled": "disabled", "class.granite-checkbox-readonly": "readonly", "class.granite-checkbox-label-before": "_positionBefore" }, classAttribute: "granite-checkbox" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["graniteCheckbox"], usesOnChanges: true, ngImport: i0, template: "<label [attr.for]=\"id\" class=\"granite-checkbox-label\">\n  <div class=\"granite-checkbox-box\">\n    <input\n      #input\n      [id]=\"id\"\n      class=\"granite-checkbox-input cdk-visually-hidden\"\n      role=\"checkbox\"\n      type=\"checkbox\"\n      [attr.aria-checked]=\"checked.toString()\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      [checked]=\"checked\"\n      [disabled]=\"_checkboxDisabled\"\n      [readonly]=\"readonly\"\n      (click)=\"_checkboxClick()\"\n      (change)=\"_checkboxChange()\"\n      (blur)=\"_onBlur()\"\n    />\n    <div class=\"granite-checkbox-check\"></div>\n  </div>\n  <span class=\"granite-checkbox-text\"><ng-content></ng-content></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{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host(.granite-checkbox){color:var(--granite-color-text)}:host(.granite-checkbox):not(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-label:hover .granite-checkbox-box{border-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-box{animation:fade-in-animation .2s;animation-iteration-count:1}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-label:hover .granite-checkbox-box{background-color:var(--granite-color-background-active-hover);border-color:var(--granite-color-background-active-hover)}:host(.granite-checkbox-checked) .granite-checkbox-box{border-color:var(--granite-color-background-active);background-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked) .granite-checkbox-box:focus-within{border-color:var(--granite-color-focus)}:host(.granite-checkbox-checked) .granite-checkbox-check{display:flex}:host(:not(.granite-checkbox-checked)) .granite-checkbox-box{animation:fade-out-animation .2s;animation-iteration-count:1}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box{background-color:var(--granite-color-text);border-color:var(--granite-color-text)}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box .granite-checkbox-check{border-color:var(--granite-color-background)}:host(.granite-checkbox-disabled) .granite-checkbox-box{opacity:.3;background-color:var(--granite-color-border-soft)}:host(.granite-checkbox-disabled) .granite-checkbox-label{opacity:.6}:host(.granite-checkbox-disabled) *{cursor:default}:host(.granite-checkbox-readonly) *{cursor:default}:host(.granite-checkbox-label-before) .granite-checkbox-label{flex-direction:row-reverse}:host(.granite-checkbox-label-before) .granite-checkbox-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-8)}.granite-checkbox-label{display:flex;align-items:center;width:max-content;margin-inline-end:var(--granite-spacing-32);margin-block-end:var(--granite-spacing-4)}.granite-checkbox-box{width:1rem;height:1rem;border:solid var(--granite-color-background-inactive);border-width:.0625rem;border-radius:.25rem;display:flex;justify-content:center;position:relative}.granite-checkbox-box:focus-within{border:.0625rem solid var(--granite-color-focus)}.granite-checkbox-check{position:relative;display:none;width:.5625rem;height:.3125rem;background-color:transparent;border:solid var(--granite-color-text-static-light);transform:rotate(-45deg);margin-top:var(--granite-spacing-4);border-width:0 0 .125rem .125rem}.granite-checkbox-text{padding-inline-start:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small)}.granite-checkbox-text:empty{display:none}@keyframes fade-in-animation{0%{opacity:0}to{opacity:1}}@keyframes fade-out-animation{0%{opacity:1}to{opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteCheckboxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'granite-checkbox', exportAs: 'graniteCheckbox', host: {
-                        class: 'granite-checkbox',
-                        '[class.granite-checkbox-checked]': 'checked',
-                        '[class.granite-checkbox-disabled]': 'disabled',
-                        '[class.granite-checkbox-readonly]': 'readonly',
-                        '[class.granite-checkbox-label-before]': '_positionBefore',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"id\" class=\"granite-checkbox-label\">\n  <div class=\"granite-checkbox-box\">\n    <input\n      #input\n      [id]=\"id\"\n      class=\"granite-checkbox-input cdk-visually-hidden\"\n      role=\"checkbox\"\n      type=\"checkbox\"\n      [attr.aria-checked]=\"checked.toString()\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      [checked]=\"checked\"\n      [disabled]=\"_checkboxDisabled\"\n      [readonly]=\"readonly\"\n      (click)=\"_checkboxClick()\"\n      (change)=\"_checkboxChange()\"\n      (blur)=\"_onBlur()\"\n    />\n    <div class=\"granite-checkbox-check\"></div>\n  </div>\n  <span class=\"granite-checkbox-text\"><ng-content></ng-content></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{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host(.granite-checkbox){color:var(--granite-color-text)}:host(.granite-checkbox):not(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-label:hover .granite-checkbox-box{border-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-box{animation:fade-in-animation .2s;animation-iteration-count:1}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-label:hover .granite-checkbox-box{background-color:var(--granite-color-background-active-hover);border-color:var(--granite-color-background-active-hover)}:host(.granite-checkbox-checked) .granite-checkbox-box{border-color:var(--granite-color-background-active);background-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked) .granite-checkbox-box:focus-within{border-color:var(--granite-color-focus)}:host(.granite-checkbox-checked) .granite-checkbox-check{display:flex}:host(:not(.granite-checkbox-checked)) .granite-checkbox-box{animation:fade-out-animation .2s;animation-iteration-count:1}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box{background-color:var(--granite-color-text);border-color:var(--granite-color-text)}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box .granite-checkbox-check{border-color:var(--granite-color-background)}:host(.granite-checkbox-disabled) .granite-checkbox-box{opacity:.3;background-color:var(--granite-color-border-soft)}:host(.granite-checkbox-disabled) .granite-checkbox-label{opacity:.6}:host(.granite-checkbox-disabled) *{cursor:default}:host(.granite-checkbox-readonly) *{cursor:default}:host(.granite-checkbox-label-before) .granite-checkbox-label{flex-direction:row-reverse}:host(.granite-checkbox-label-before) .granite-checkbox-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-8)}.granite-checkbox-label{display:flex;align-items:center;width:max-content;margin-inline-end:var(--granite-spacing-32);margin-block-end:var(--granite-spacing-4)}.granite-checkbox-box{width:1rem;height:1rem;border:solid var(--granite-color-background-inactive);border-width:.0625rem;border-radius:.25rem;display:flex;justify-content:center;position:relative}.granite-checkbox-box:focus-within{border:.0625rem solid var(--granite-color-focus)}.granite-checkbox-check{position:relative;display:none;width:.5625rem;height:.3125rem;background-color:transparent;border:solid var(--granite-color-text-static-light);transform:rotate(-45deg);margin-top:var(--granite-spacing-4);border-width:0 0 .125rem .125rem}.granite-checkbox-text{padding-inline-start:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small)}.granite-checkbox-text:empty{display:none}@keyframes fade-in-animation{0%{opacity:0}to{opacity:1}}@keyframes fade-out-animation{0%{opacity:1}to{opacity:0}}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.FocusMonitor }]; }, propDecorators: { id: [{
-                type: Input
-            }], checked: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], labelPosition: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input,
-                args: ['aria-label']
-            }], ariaLabelledby: [{
-                type: Input,
-                args: ['aria-labelledby']
-            }], valueChange: [{
-                type: Output
-            }], checkboxChange: [{
-                type: Output
-            }], checkboxBlur: [{
-                type: Output
-            }], _inputElement: [{
-                type: ViewChild,
-                args: ['input']
-            }] } });
-
-class GraniteCheckboxGroupComponent extends GraniteRadioCheckboxBase {
-}
-GraniteCheckboxGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteCheckboxGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-GraniteCheckboxGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GraniteCheckboxGroupComponent, selector: "granite-checkbox-group", host: { properties: { "attr.role": "\"group\"", "attr.aria-labelledby": "ariaLabelledby", "class.granite-radio-checkbox-base-layout-horizontal": "layout === \"horizontal\"" }, classAttribute: "granite-checkbox-group" }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host(.granite-radio-checkbox-base-layout-horizontal){display:flex;align-items:flex-start}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteCheckboxGroupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'granite-checkbox-group', host: {
-                        class: 'granite-checkbox-group',
-                        '[attr.role]': '"group"',
-                        '[attr.aria-labelledby]': 'ariaLabelledby',
-                        '[class.granite-radio-checkbox-base-layout-horizontal]': 'layout === "horizontal"',
-                    }, template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host(.granite-radio-checkbox-base-layout-horizontal){display:flex;align-items:flex-start}\n"] }]
-        }] });
-
-class GraniteCheckboxModule {
-}
-GraniteCheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-GraniteCheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: GraniteCheckboxModule, declarations: [GraniteCheckboxComponent, GraniteCheckboxGroupComponent], exports: [GraniteCheckboxComponent, GraniteCheckboxGroupComponent] });
-GraniteCheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteCheckboxModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteCheckboxModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [GraniteCheckboxComponent, GraniteCheckboxGroupComponent],
-                    exports: [GraniteCheckboxComponent, GraniteCheckboxGroupComponent],
-                }]
-        }] });
-
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-const disabledMixin = (Base = class {
-}) => {
-    class Derived extends Base {
-        constructor() {
-            super(...arguments);
-            this.disabled = false;
-        }
-        ngOnChanges(changes) {
-            if (changes.disabled) {
-                this.disabled = coerceBooleanProperty(changes.disabled.currentValue);
-            }
-        }
-    }
-    Derived.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Derived, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    Derived.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: Derived, inputs: { disabled: "disabled" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-    i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Derived, decorators: [{
-                type: Directive
-            }], propDecorators: { disabled: [{
-                    type: Input
-                }] } });
-    return Derived;
-};
-
-var ButtonSelectors;
-(function (ButtonSelectors) {
-    ButtonSelectors["graniteButton"] = "granite-button";
-    ButtonSelectors["granitePrimaryButton"] = "granite-primary-button";
-    ButtonSelectors["graniteFlatButton"] = "granite-flat-button";
-    ButtonSelectors["graniteToolbarButton"] = "granite-toolbar-button";
-})(ButtonSelectors || (ButtonSelectors = {}));
-const ButtonComponentMixin = disabledMixin();
-class GraniteButtonComponent extends ButtonComponentMixin {
-    constructor(_focusMonitor, _elementRef) {
-        super();
-        this._focusMonitor = _focusMonitor;
-        this._elementRef = _elementRef;
-        this.toggled = false;
-        this._buttonToggled = false;
-        for (const selector of Object.keys(ButtonSelectors)) {
-            if (this._getHostElement().hasAttribute(selector)) {
-                this._getHostElement().classList.add(ButtonSelectors[selector]);
-            }
-        }
-    }
-    ngOnChanges(changes) {
-        super.ngOnChanges(changes);
-        if (changes.toggled) {
-            this._buttonToggled = coerceBooleanProperty(changes.toggled.currentValue);
-        }
-    }
-    focus(origin = 'program', options) {
-        this._focusMonitor.focusVia(this._getHostElement(), origin, options);
-    }
-    _getHostElement() {
-        return this._elementRef.nativeElement;
-    }
-}
-GraniteButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteButtonComponent, deps: [{ token: i1.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-GraniteButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GraniteButtonComponent, selector: "button[graniteButton],\n    button[granitePrimaryButton],\n    button[graniteFlatButton],\n    button[graniteToolbarButton]\n  ", inputs: { disabled: "disabled", toggled: "toggled" }, host: { properties: { "class.granite-button-disabled": "disabled", "class.granite-button-toggled": "_buttonToggled", "attr.disabled": "disabled || null" }, classAttribute: "granite-button-base" }, exportAs: ["graniteButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host.granite-button-base{border-radius:.25rem;font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);padding:var(--granite-spacing-8) var(--granite-spacing-8);position:relative;line-height:var(--granite-font-size-body);display:flex;justify-content:center;align-items:center;width:-moz-fit-content;width:fit-content}:host:focus:not(.granite-button-disabled):not(:active){outline-offset:-2px;outline-width:.125rem;outline-color:var(--granite-color-focus);outline-style:solid}button:host{background-color:inherit;-webkit-appearance:none;appearance:none;outline:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-button.granite-flat-button.granite-button-toggled,button:host.granite-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}button:host.granite-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none;outline:none}}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:none;outline:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled,button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:none}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-flat-button.granite-flat-button.granite-button-toggled,button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus)}button:host.granite-flat-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-flat-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-toolbar-button{background-color:var(--granite-color-background);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-toolbar-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-toolbar-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled,button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus)}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-button-disabled,button:host.granite-button-disabled:active,button:host.granite-button-disabled:focus,button:host.granite-button-disabled:hover{opacity:.4;cursor:default}a:host{outline:none}a:host.granite-button{background-color:var(--granite-color-background);color:var(--granite-color-text-link);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-button.granite-flat-button.granite-button-toggled,a:host.granite-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}a:host.granite-button.granite-flat-button.granite-button-toggled:not(:focus),a:host.granite-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}a:host.granite-button.granite-flat-button.granite-button-toggled:hover,a:host.granite-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text-link);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){a:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}a:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled,a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled:not(:focus),a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled:hover,a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-button-disabled,a:host.granite-button-disabled:active,a:host.granite-button-disabled:focus,a:host.granite-button-disabled:hover{opacity:.4;text-decoration:none;cursor:default;pointer-events:none;-webkit-user-select:none;user-select:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: `button[graniteButton],
-    button[granitePrimaryButton],
-    button[graniteFlatButton],
-    button[graniteToolbarButton]
-  `, host: {
-                        class: 'granite-button-base',
-                        '[class.granite-button-disabled]': 'disabled',
-                        '[class.granite-button-toggled]': '_buttonToggled',
-                        '[attr.disabled]': 'disabled || null',
-                    }, exportAs: 'graniteButton', template: '<ng-content></ng-content>', inputs: ['disabled'], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host.granite-button-base{border-radius:.25rem;font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);padding:var(--granite-spacing-8) var(--granite-spacing-8);position:relative;line-height:var(--granite-font-size-body);display:flex;justify-content:center;align-items:center;width:-moz-fit-content;width:fit-content}:host:focus:not(.granite-button-disabled):not(:active){outline-offset:-2px;outline-width:.125rem;outline-color:var(--granite-color-focus);outline-style:solid}button:host{background-color:inherit;-webkit-appearance:none;appearance:none;outline:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-button.granite-flat-button.granite-button-toggled,button:host.granite-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}button:host.granite-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none;outline:none}}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:none;outline:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled,button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:none}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-flat-button.granite-flat-button.granite-button-toggled,button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus)}button:host.granite-flat-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-flat-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-toolbar-button{background-color:var(--granite-color-background);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-toolbar-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-toolbar-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled,button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus)}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-button-disabled,button:host.granite-button-disabled:active,button:host.granite-button-disabled:focus,button:host.granite-button-disabled:hover{opacity:.4;cursor:default}a:host{outline:none}a:host.granite-button{background-color:var(--granite-color-background);color:var(--granite-color-text-link);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-button.granite-flat-button.granite-button-toggled,a:host.granite-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}a:host.granite-button.granite-flat-button.granite-button-toggled:not(:focus),a:host.granite-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}a:host.granite-button.granite-flat-button.granite-button-toggled:hover,a:host.granite-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text-link);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){a:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}a:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled,a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled:not(:focus),a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled:hover,a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-button-disabled,a:host.granite-button-disabled:active,a:host.granite-button-disabled:focus,a:host.granite-button-disabled:hover{opacity:.4;text-decoration:none;cursor:default;pointer-events:none;-webkit-user-select:none;user-select:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.FocusMonitor }, { type: i0.ElementRef }]; }, propDecorators: { toggled: [{
-                type: Input
-            }] } });
-class GraniteAnchorComponent extends GraniteButtonComponent {
-    constructor(_focusMonitor, _elementRef) {
-        super(_focusMonitor, _elementRef);
-        this._focusMonitor = _focusMonitor;
-        this._elementRef = _elementRef;
-    }
-    _anchorClick(event) {
-        if (this.disabled) {
-            event.preventDefault();
-        }
-    }
-    ngOnChanges(changes) {
-        super.ngOnChanges(changes);
-    }
-}
-GraniteAnchorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteAnchorComponent, deps: [{ token: i1.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-GraniteAnchorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GraniteAnchorComponent, selector: "a[graniteButton],\n  a[graniteFlatButton]", inputs: { disabled: "disabled" }, host: { listeners: { "click": "_anchorClick($event)" }, properties: { "attr.tabindex": "disabled ? -1 : 0", "class.granite-button-disabled": "disabled" }, classAttribute: "granite-button-base" }, exportAs: ["graniteAnchor"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host.granite-button-base{border-radius:.25rem;font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);padding:var(--granite-spacing-8) var(--granite-spacing-8);position:relative;line-height:var(--granite-font-size-body);display:flex;justify-content:center;align-items:center;width:-moz-fit-content;width:fit-content}:host:focus:not(.granite-button-disabled):not(:active){outline-offset:-2px;outline-width:.125rem;outline-color:var(--granite-color-focus);outline-style:solid}button:host{background-color:inherit;-webkit-appearance:none;appearance:none;outline:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-button.granite-flat-button.granite-button-toggled,button:host.granite-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}button:host.granite-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none;outline:none}}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:none;outline:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled,button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:none}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-flat-button.granite-flat-button.granite-button-toggled,button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus)}button:host.granite-flat-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-flat-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-toolbar-button{background-color:var(--granite-color-background);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-toolbar-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-toolbar-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled,button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus)}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-button-disabled,button:host.granite-button-disabled:active,button:host.granite-button-disabled:focus,button:host.granite-button-disabled:hover{opacity:.4;cursor:default}a:host{outline:none}a:host.granite-button{background-color:var(--granite-color-background);color:var(--granite-color-text-link);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-button.granite-flat-button.granite-button-toggled,a:host.granite-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}a:host.granite-button.granite-flat-button.granite-button-toggled:not(:focus),a:host.granite-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}a:host.granite-button.granite-flat-button.granite-button-toggled:hover,a:host.granite-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text-link);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){a:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}a:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled,a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled:not(:focus),a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled:hover,a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-button-disabled,a:host.granite-button-disabled:active,a:host.granite-button-disabled:focus,a:host.granite-button-disabled:hover{opacity:.4;text-decoration:none;cursor:default;pointer-events:none;-webkit-user-select:none;user-select:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteAnchorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: `a[graniteButton],
-  a[graniteFlatButton]`, host: {
-                        class: 'granite-button-base',
-                        '[attr.tabindex]': 'disabled ? -1 : 0',
-                        '[class.granite-button-disabled]': 'disabled',
-                    }, exportAs: 'graniteAnchor', template: '<ng-content></ng-content>', inputs: ['disabled'], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host.granite-button-base{border-radius:.25rem;font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);padding:var(--granite-spacing-8) var(--granite-spacing-8);position:relative;line-height:var(--granite-font-size-body);display:flex;justify-content:center;align-items:center;width:-moz-fit-content;width:fit-content}:host:focus:not(.granite-button-disabled):not(:active){outline-offset:-2px;outline-width:.125rem;outline-color:var(--granite-color-focus);outline-style:solid}button:host{background-color:inherit;-webkit-appearance:none;appearance:none;outline:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-button.granite-flat-button.granite-button-toggled,button:host.granite-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}button:host.granite-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none;outline:none}}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:none;outline:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled,button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:none}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-flat-button.granite-flat-button.granite-button-toggled,button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus)}button:host.granite-flat-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-flat-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-toolbar-button{background-color:var(--granite-color-background);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-toolbar-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-toolbar-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled,button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus)}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-button-disabled,button:host.granite-button-disabled:active,button:host.granite-button-disabled:focus,button:host.granite-button-disabled:hover{opacity:.4;cursor:default}a:host{outline:none}a:host.granite-button{background-color:var(--granite-color-background);color:var(--granite-color-text-link);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-button.granite-flat-button.granite-button-toggled,a:host.granite-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}a:host.granite-button.granite-flat-button.granite-button-toggled:not(:focus),a:host.granite-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}a:host.granite-button.granite-flat-button.granite-button-toggled:hover,a:host.granite-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text-link);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){a:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}a:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled,a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled:not(:focus),a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled:hover,a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-button-disabled,a:host.granite-button-disabled:active,a:host.granite-button-disabled:focus,a:host.granite-button-disabled:hover{opacity:.4;text-decoration:none;cursor:default;pointer-events:none;-webkit-user-select:none;user-select:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.FocusMonitor }, { type: i0.ElementRef }]; }, propDecorators: { _anchorClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
-
-class GraniteButtonModule {
-}
-GraniteButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-GraniteButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: GraniteButtonModule, declarations: [GraniteButtonComponent, GraniteAnchorComponent], exports: [GraniteButtonComponent, GraniteAnchorComponent] });
-GraniteButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteButtonModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteButtonModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [GraniteButtonComponent, GraniteAnchorComponent],
-                    exports: [GraniteButtonComponent, GraniteAnchorComponent],
-                }]
-        }] });
-
-const GRANITE_INPUT_INCLUDES = ['text', 'number', 'password', 'textarea'];
-class GraniteInputFieldComponent {
-    constructor(_focusMonitor) {
-        this._focusMonitor = _focusMonitor;
-        this.id = null;
-        this.name = null;
-        this.type = 'text';
-        this.value = '';
-        this.required = false;
-        this.readonly = false;
-        this.invalid = false;
-        this.disabled = false;
-        this.placeholder = '';
-        this.maxlength = 255;
-        this.countcharacters = false;
-        this.ariaLabel = null;
-        this.ariaLabelledby = null;
-        this.valueChange = new EventEmitter();
-        this._supported = true;
-        this._empty = false;
-        this._passwordFieldIcon = 'view';
-        this._passwordField = false;
-        this._currentCharCount = 0;
-        this._passwordToggled = false;
-    }
-    ngOnInit() {
-        this._validateType();
-        this._passwordField = this.type == 'password';
-        this._empty = this.value == null || this.value === '';
-    }
-    ngOnChanges(changes) {
-        if (changes.required) {
-            this.required = coerceBooleanProperty(changes.required.currentValue);
-        }
-        if (changes.readonly) {
-            this.readonly = coerceBooleanProperty(changes.readonly.currentValue);
-        }
-        if (changes.invalid) {
-            this.invalid = coerceBooleanProperty(changes.invalid.currentValue);
-        }
-        if (changes.disabled) {
-            this.disabled = coerceBooleanProperty(changes.disabled.currentValue);
-        }
-        if (changes.countcharacters) {
-            this.countcharacters = coerceBooleanProperty(changes.countcharacters.currentValue);
-        }
-        if (changes.value) {
-            this._empty = this.value == null || this.value === '';
-        }
-        if (changes.type) {
-            this._validateType();
-        }
-    }
-    focus(origin = 'program', options) {
-        if (this.type === 'text') {
-            this._focusMonitor.focusVia(this._getInputElement(), origin, options);
-        }
-        else if (this.type === 'textarea') {
-            this._focusMonitor.focusVia(this._getTextareaElement(), origin, options);
-        }
-    }
-    _togglePassword() {
-        if (this._passwordToggled) {
-            this._passwordToggled = false;
-            this.type = 'password';
-            this._passwordFieldIcon = 'view';
-        }
-        else {
-            this._passwordToggled = true;
-            this.type = 'text';
-            this._passwordFieldIcon = 'view-disabled';
-        }
-    }
-    _onKeyUp(event) {
-        const inputEvent = event.target;
-        this._applyCharacterCount(inputEvent.value);
-        this._empty = inputEvent.value == null || inputEvent.value === '';
-        this.valueChange.emit(inputEvent.value);
-    }
-    _onInput(event) {
-        const inputEvent = event.target;
-        this._empty = inputEvent.value == null || inputEvent.value === '';
-        this.valueChange.emit(inputEvent.value);
-    }
-    _validateType() {
-        if (GRANITE_INPUT_INCLUDES.indexOf(this.type) < 0) {
-            this._supported = false;
-            throw Error(`Input type "${this.type}" isn't supported by graniteInputField.`);
-        }
-    }
-    _applyCharacterCount(inputString) {
-        if (this.countcharacters) {
-            this._currentCharCount = inputString.length;
-            if (this._currentCharCount > this.maxlength) {
-                inputString = inputString.slice(0, this.maxlength);
-                this._currentCharCount = this.maxlength;
-            }
-        }
-    }
-    _getInputElement() {
-        return this._inputElement.nativeElement;
-    }
-    _getTextareaElement() {
-        return this._textareaElement.nativeElement;
-    }
-}
-GraniteInputFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteInputFieldComponent, deps: [{ token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component });
-GraniteInputFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GraniteInputFieldComponent, selector: "granite-input-field", inputs: { id: "id", name: "name", type: "type", value: "value", required: "required", readonly: "readonly", invalid: "invalid", disabled: "disabled", placeholder: "placeholder", prefixicon: "prefixicon", maxlength: "maxlength", countcharacters: "countcharacters", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "granite-input-field" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }, { propertyName: "_textareaElement", first: true, predicate: ["textarea"], descendants: true }], exportAs: ["graniteInputField"], usesOnChanges: true, ngImport: i0, template: "<div\n  *ngIf=\"_supported\"\n  class=\"granite-input-container\"\n  [class.granite-input-disabled]=\"disabled\"\n  [class.granite-input-readonly]=\"readonly\"\n  [class.granite-input-disabled]=\"disabled\"\n  [class.granite-input-readonly]=\"readonly\"\n>\n  <div\n    class=\"granite-input-top-row\"\n    [class.granite-input-required]=\"required\"\n    [class.granite-input-empty]=\"_empty\"\n    [class.granite-input-disabled]=\"disabled\"\n    [class.granite-input-readonly]=\"readonly\"\n  >\n    <div\n      *ngIf=\"prefixicon\"\n      class=\"granite-input-prepend\"\n      [class.granite-input-required]=\"required\"\n      [class.granite-input-empty]=\"_empty\"\n    >\n      <granite-icon class=\"granite-input-prepend-icon\">\n        {{ prefixicon }}\n      </granite-icon>\n    </div>\n\n    <ng-container\n      *ngIf=\"type !== 'textarea'; then inputElement; else textareaElement\"\n    ></ng-container>\n\n    <ng-template #inputElement>\n      <input\n        #input\n        [id]=\"id\"\n        class=\"granite-input-base\"\n        [class.granite-input-invalid]=\"invalid\"\n        [class.granite-input-empty]=\"_empty\"\n        [name]=\"name\"\n        [attr.type]=\"type\"\n        [required]=\"required\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [attr.maxlength]=\"maxlength\"\n        [value]=\"value\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-invalid]=\"invalid\"\n        (keyup)=\"_onKeyUp($event)\"\n        (input)=\"_onInput($event)\"\n      />\n    </ng-template>\n\n    <button\n      *ngIf=\"_passwordField\"\n      class=\"granite-input-append\"\n      [class.granite-input-required]=\"required\"\n      [class.granite-input-empty]=\"_empty\"\n      (click)=\"_togglePassword()\"\n    >\n      <granite-icon class=\"granite-input-password-toggle-icon\">\n        {{ _passwordFieldIcon }}\n      </granite-icon>\n    </button>\n\n    <ng-template #textareaElement>\n      <textarea\n        #textarea\n        [id]=\"id\"\n        class=\"granite-input-base granite-text-area\"\n        [class.granite-input-invalid]=\"invalid\"\n        [class.granite-input-empty]=\"_empty\"\n        rows=\"1\"\n        [name]=\"name\"\n        [attr.type]=\"type\"\n        [required]=\"required\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [value]=\"value\"\n        [attr.maxlength]=\"maxlength\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-required]=\"required\"\n        [attr.aria-invalid]=\"invalid\"\n        (keyup)=\"_onKeyUp($event)\"\n        (input)=\"_onInput($event)\"\n      ></textarea>\n    </ng-template>\n\n    <div\n      class=\"granite-input-hover-bar\"\n      [class.granite-input-invalid]=\"invalid\"\n      [class.granite-input-empty]=\"_empty\"\n    ></div>\n  </div>\n\n  <div *ngIf=\"countcharacters\" class=\"granite-input-bottom-row\">\n    <div class=\"granite-input-char-count\">\n      {{ _currentCharCount }}/{{ maxlength }}\n    </div>\n  </div>\n</div>\n", styles: [":host{transition:all .2s ease-out;width:14.5rem;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.granite-input-hover-bar{height:.0625rem;background-color:var(--granite-color-border-hard);position:absolute;width:inherit;bottom:0}.granite-input-hover-bar.granite-input-invalid{background-color:var(--granite-color-signal-failure)}.granite-input-container{width:inherit;font-size:var(--granite-font-size-body-small)}.granite-input-container .granite-input-top-row{display:inline-flex;width:inherit;position:relative;background:var(--granite-color-background)}.granite-input-container .granite-input-top-row:hover .granite-input-hover-bar{height:.125rem}.granite-input-container .granite-input-top-row:hover .granite-input-hover-bar.granite-input-invalid.granite-input-empty{background-color:var(--granite-color-focus)}.granite-input-container .granite-input-top-row .granite-text-area{min-width:14.5rem;min-height:2rem}.granite-input-container .granite-input-top-row.granite-input-disabled,.granite-input-container .granite-input-top-row.granite-input-readonly{background-color:transparent;box-shadow:none}.granite-input-container .granite-input-top-row.granite-input-disabled .granite-input-hover-bar,.granite-input-container .granite-input-top-row.granite-input-readonly .granite-input-hover-bar{background-color:transparent}.granite-input-container .granite-input-top-row .granite-input-base{-webkit-appearance:none;appearance:none;outline:none;border:none;background-color:var(--granite-color-background-input);padding:var(--granite-spacing-8);width:inherit;color:var(--granite-color-text);font:inherit;font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-regular)}.granite-input-container .granite-input-top-row .granite-input-base::placeholder{color:var(--granite-color-text-hint)}.granite-input-container .granite-input-top-row .granite-input-base:required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-top-row .granite-input-base:required::placeholder{color:var(--granite-color-text-weak)}.granite-input-container .granite-input-top-row .granite-input-base:read-only{background-color:transparent}.granite-input-container .granite-input-top-row .granite-input-base:disabled{opacity:.3}.granite-input-container .granite-input-top-row .granite-input-base:hover::placeholder{color:var(--granite-color-text)}.granite-input-container .granite-input-top-row .granite-input-base:focus{box-shadow:inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus),inset 0 -.125rem var(--granite-color-focus)}.granite-input-container .granite-input-top-row .granite-input-base:focus.granite-input-invalid{box-shadow:inset 0 -.125rem var(--granite-color-signal-failure),inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus)}.granite-input-container .granite-input-top-row .granite-input-base:focus::placeholder{color:transparent}.granite-input-container .granite-input-top-row:focus-within .granite-input-hover-bar{background-color:transparent}.granite-input-container .granite-input-prepend{display:flex;align-items:center;padding:0 var(--granite-spacing-8);background:var(--granite-color-background-input)}.granite-input-container .granite-input-prepend .granite-input-prepend-icon{width:1rem;height:1rem;color:var(--granite-color-text);box-shadow:none}.granite-input-container .granite-input-prepend.granite-input-required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-append{-webkit-appearance:none;appearance:none;outline:none;border:none;background-color:var(--granite-color-background-input);position:relative}.granite-input-container .granite-input-append:focus{box-shadow:inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus),inset 0 -.125rem var(--granite-color-focus)}.granite-input-container .granite-input-append .granite-input-password-toggle-icon{width:max-content;height:max-content;color:var(--granite-color-text);box-shadow:none}.granite-input-container .granite-input-append.granite-input-required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-bottom-row{box-shadow:none}.granite-input-container .granite-input-char-count{background:var(--granite-color-background-warning);border-radius:0 0 .25rem .25rem;padding:var(--granite-spacing-8);background-size:contain;width:-moz-fit-content;width:fit-content;box-shadow:none}.granite-input-container.granite-input-disabled,.granite-input-container.granite-input-readonly{background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteInputFieldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'granite-input-field', exportAs: 'graniteInputField', host: {
-                        class: 'granite-input-field',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"_supported\"\n  class=\"granite-input-container\"\n  [class.granite-input-disabled]=\"disabled\"\n  [class.granite-input-readonly]=\"readonly\"\n  [class.granite-input-disabled]=\"disabled\"\n  [class.granite-input-readonly]=\"readonly\"\n>\n  <div\n    class=\"granite-input-top-row\"\n    [class.granite-input-required]=\"required\"\n    [class.granite-input-empty]=\"_empty\"\n    [class.granite-input-disabled]=\"disabled\"\n    [class.granite-input-readonly]=\"readonly\"\n  >\n    <div\n      *ngIf=\"prefixicon\"\n      class=\"granite-input-prepend\"\n      [class.granite-input-required]=\"required\"\n      [class.granite-input-empty]=\"_empty\"\n    >\n      <granite-icon class=\"granite-input-prepend-icon\">\n        {{ prefixicon }}\n      </granite-icon>\n    </div>\n\n    <ng-container\n      *ngIf=\"type !== 'textarea'; then inputElement; else textareaElement\"\n    ></ng-container>\n\n    <ng-template #inputElement>\n      <input\n        #input\n        [id]=\"id\"\n        class=\"granite-input-base\"\n        [class.granite-input-invalid]=\"invalid\"\n        [class.granite-input-empty]=\"_empty\"\n        [name]=\"name\"\n        [attr.type]=\"type\"\n        [required]=\"required\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [attr.maxlength]=\"maxlength\"\n        [value]=\"value\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-invalid]=\"invalid\"\n        (keyup)=\"_onKeyUp($event)\"\n        (input)=\"_onInput($event)\"\n      />\n    </ng-template>\n\n    <button\n      *ngIf=\"_passwordField\"\n      class=\"granite-input-append\"\n      [class.granite-input-required]=\"required\"\n      [class.granite-input-empty]=\"_empty\"\n      (click)=\"_togglePassword()\"\n    >\n      <granite-icon class=\"granite-input-password-toggle-icon\">\n        {{ _passwordFieldIcon }}\n      </granite-icon>\n    </button>\n\n    <ng-template #textareaElement>\n      <textarea\n        #textarea\n        [id]=\"id\"\n        class=\"granite-input-base granite-text-area\"\n        [class.granite-input-invalid]=\"invalid\"\n        [class.granite-input-empty]=\"_empty\"\n        rows=\"1\"\n        [name]=\"name\"\n        [attr.type]=\"type\"\n        [required]=\"required\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [value]=\"value\"\n        [attr.maxlength]=\"maxlength\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-required]=\"required\"\n        [attr.aria-invalid]=\"invalid\"\n        (keyup)=\"_onKeyUp($event)\"\n        (input)=\"_onInput($event)\"\n      ></textarea>\n    </ng-template>\n\n    <div\n      class=\"granite-input-hover-bar\"\n      [class.granite-input-invalid]=\"invalid\"\n      [class.granite-input-empty]=\"_empty\"\n    ></div>\n  </div>\n\n  <div *ngIf=\"countcharacters\" class=\"granite-input-bottom-row\">\n    <div class=\"granite-input-char-count\">\n      {{ _currentCharCount }}/{{ maxlength }}\n    </div>\n  </div>\n</div>\n", styles: [":host{transition:all .2s ease-out;width:14.5rem;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.granite-input-hover-bar{height:.0625rem;background-color:var(--granite-color-border-hard);position:absolute;width:inherit;bottom:0}.granite-input-hover-bar.granite-input-invalid{background-color:var(--granite-color-signal-failure)}.granite-input-container{width:inherit;font-size:var(--granite-font-size-body-small)}.granite-input-container .granite-input-top-row{display:inline-flex;width:inherit;position:relative;background:var(--granite-color-background)}.granite-input-container .granite-input-top-row:hover .granite-input-hover-bar{height:.125rem}.granite-input-container .granite-input-top-row:hover .granite-input-hover-bar.granite-input-invalid.granite-input-empty{background-color:var(--granite-color-focus)}.granite-input-container .granite-input-top-row .granite-text-area{min-width:14.5rem;min-height:2rem}.granite-input-container .granite-input-top-row.granite-input-disabled,.granite-input-container .granite-input-top-row.granite-input-readonly{background-color:transparent;box-shadow:none}.granite-input-container .granite-input-top-row.granite-input-disabled .granite-input-hover-bar,.granite-input-container .granite-input-top-row.granite-input-readonly .granite-input-hover-bar{background-color:transparent}.granite-input-container .granite-input-top-row .granite-input-base{-webkit-appearance:none;appearance:none;outline:none;border:none;background-color:var(--granite-color-background-input);padding:var(--granite-spacing-8);width:inherit;color:var(--granite-color-text);font:inherit;font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-regular)}.granite-input-container .granite-input-top-row .granite-input-base::placeholder{color:var(--granite-color-text-hint)}.granite-input-container .granite-input-top-row .granite-input-base:required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-top-row .granite-input-base:required::placeholder{color:var(--granite-color-text-weak)}.granite-input-container .granite-input-top-row .granite-input-base:read-only{background-color:transparent}.granite-input-container .granite-input-top-row .granite-input-base:disabled{opacity:.3}.granite-input-container .granite-input-top-row .granite-input-base:hover::placeholder{color:var(--granite-color-text)}.granite-input-container .granite-input-top-row .granite-input-base:focus{box-shadow:inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus),inset 0 -.125rem var(--granite-color-focus)}.granite-input-container .granite-input-top-row .granite-input-base:focus.granite-input-invalid{box-shadow:inset 0 -.125rem var(--granite-color-signal-failure),inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus)}.granite-input-container .granite-input-top-row .granite-input-base:focus::placeholder{color:transparent}.granite-input-container .granite-input-top-row:focus-within .granite-input-hover-bar{background-color:transparent}.granite-input-container .granite-input-prepend{display:flex;align-items:center;padding:0 var(--granite-spacing-8);background:var(--granite-color-background-input)}.granite-input-container .granite-input-prepend .granite-input-prepend-icon{width:1rem;height:1rem;color:var(--granite-color-text);box-shadow:none}.granite-input-container .granite-input-prepend.granite-input-required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-append{-webkit-appearance:none;appearance:none;outline:none;border:none;background-color:var(--granite-color-background-input);position:relative}.granite-input-container .granite-input-append:focus{box-shadow:inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus),inset 0 -.125rem var(--granite-color-focus)}.granite-input-container .granite-input-append .granite-input-password-toggle-icon{width:max-content;height:max-content;color:var(--granite-color-text);box-shadow:none}.granite-input-container .granite-input-append.granite-input-required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-bottom-row{box-shadow:none}.granite-input-container .granite-input-char-count{background:var(--granite-color-background-warning);border-radius:0 0 .25rem .25rem;padding:var(--granite-spacing-8);background-size:contain;width:-moz-fit-content;width:fit-content;box-shadow:none}.granite-input-container.granite-input-disabled,.granite-input-container.granite-input-readonly{background-color:transparent}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.FocusMonitor }]; }, propDecorators: { id: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], invalid: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], prefixicon: [{
-                type: Input
-            }], maxlength: [{
-                type: Input
-            }], countcharacters: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input,
-                args: ['aria-label']
-            }], ariaLabelledby: [{
-                type: Input,
-                args: ['aria-labelledby']
-            }], valueChange: [{
-                type: Output
-            }], _inputElement: [{
-                type: ViewChild,
-                args: ['input']
-            }], _textareaElement: [{
-                type: ViewChild,
-                args: ['textarea']
-            }] } });
-
-class GraniteInputFieldModule {
-}
-GraniteInputFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteInputFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-GraniteInputFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: GraniteInputFieldModule, declarations: [GraniteInputFieldComponent], imports: [CommonModule, GraniteIconModule, GraniteButtonModule], exports: [GraniteInputFieldComponent] });
-GraniteInputFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteInputFieldModule, imports: [CommonModule, GraniteIconModule, GraniteButtonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteInputFieldModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, GraniteIconModule, GraniteButtonModule],
-                    declarations: [GraniteInputFieldComponent],
-                    exports: [GraniteInputFieldComponent],
-                }]
-        }] });
-
-/** Event object emitted by GraniteChip when selected or deselected. */
-class GraniteChipSelectionChangeEvent {
-    constructor() {
-        /** Whether the selection change was a result of a user interaction. */
-        this.isUserInput = false;
-    }
-}
-class GraniteChipComponent {
-    /** Whether the chip is selected. */
-    get selected() {
-        return this._selected;
-    }
-    set selected(value) {
-        const coercedValue = coerceBooleanProperty(value);
-        if (coercedValue !== this._selected) {
-            this._selected = coercedValue;
-        }
-    }
-    /** The value of the chip. Defaults to the text content inside `<granite-chip>` tags. */
-    get value() {
-        return this._value != null
-            ? this._value
-            : this._elementRef.nativeElement.textContent;
-    }
-    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-    set value(val) {
-        this._value = val;
-    }
-    /**
-     * Whether or not the chip is selectable. When a chip is not selectable,
-     * changes to its selected state are always ignored. By default a chip is
-     * selectable, and it becomes non-selectable if its parent chip list is
-     * not selectable.
-     */
-    get selectable() {
-        return this._selectable && this._chipListSelectable;
-    }
-    set selectable(value) {
-        this._selectable = coerceBooleanProperty(value);
-    }
-    /** Whether the chip is disabled. Also the individual chips are disabled when chip list is disabled */
-    get disabled() {
-        return this._chipListDisabled || this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-    }
-    /**
-     * Whether the chip can be removed from the list
-     */
-    get removable() {
-        return this._removable;
-    }
-    set removable(value) {
-        this._removable = coerceBooleanProperty(value);
-    }
-    /** Whether the chip is in an invalid state. */
-    get invalid() {
-        return this._invalid;
-    }
-    set invalid(value) {
-        this._invalid = coerceBooleanProperty(value);
-    }
-    constructor(_elementRef, _ngZone, _changeDetectorRef, tabIndex) {
-        this._elementRef = _elementRef;
-        this._ngZone = _ngZone;
-        this._changeDetectorRef = _changeDetectorRef;
-        /** Whether the chip has focus. */
-        this._hasFocus = false;
-        /** Whether the chip list is selectable */
-        this._chipListSelectable = true;
-        /** Whether the chip list is in multi-selection mode. */
-        this._chipListMultiple = false;
-        /** Whether the chip list as a whole is disabled. */
-        this._chipListDisabled = false;
-        /** ARIA role that should be applied to the chip. */
-        this.role = 'option';
-        this._selected = false;
-        this._selectable = true;
-        this._disabled = false;
-        this._removable = false;
-        this._invalid = false;
-        this.ariaLabel = null;
-        this.ariaLabelledby = null;
-        /** Emitted when the chip is selected or deselected. */
-        this.selectionChange = new EventEmitter();
-        /** Emitted when a chip is to be removed. */
-        this.removed = new EventEmitter();
-        /** Emitted when the chip is destroyed. */
-        this.destroyed = new EventEmitter();
-        this.tabIndex = -1;
-        this.inputChip = false;
-        /** Emits when the chip is focused. */
-        this.chipFocus = new EventEmitter();
-        /** Emits when the chip is blurred. */
-        this.chipBlur = new EventEmitter();
-        const inputChipAttrName = 'granite-input-chip';
-        const element = this._elementRef.nativeElement;
-        if (element.hasAttribute(inputChipAttrName) ||
-            element.tagName.toLowerCase() === inputChipAttrName) {
-            this.inputChip = true;
-        }
-        this.tabIndex = tabIndex != null ? parseInt(tabIndex) || -1 : -1;
-    }
-    ngOnDestroy() {
-        this.destroyed.emit({ chip: this });
-    }
-    /** Selects the chip. */
-    select(isUserInput = false) {
-        if (!this._selected) {
-            this._selected = true;
-            this._dispatchSelectionChange(isUserInput);
-            this._changeDetectorRef.markForCheck();
-        }
-    }
-    /** Deselects the chip. */
-    deselect() {
-        if (this._selected) {
-            this._selected = false;
-            this._dispatchSelectionChange();
-            this._changeDetectorRef.markForCheck();
-        }
-    }
-    /** Toggles the current selected state of this chip. */
-    toggleSelected(isUserInput = false) {
-        this._selected = !this.selected;
-        this._dispatchSelectionChange(isUserInput);
-        this._changeDetectorRef.markForCheck();
-        return this.selected;
-    }
-    /** Allows for programmatic focusing of the chip unless it's disabled. */
-    focus() {
-        if (!this.disabled) {
-            if (!this._hasFocus) {
-                this._elementRef.nativeElement.focus();
-                this.chipFocus.next({ chip: this });
-            }
-            this._hasFocus = true;
-        }
-    }
-    /**
-     * Allows for programmatic removal of the chip.
-     * Called by the GraniteChipList when the DELETE or BACKSPACE keys are pressed.
-     * Informs any listeners of the removal request. Does not remove the chip from the DOM.
-     */
-    remove() {
-        if (this.removable || this.inputChip) {
-            this.removed.emit({ chip: this });
-        }
-    }
-    /** Handles click events on the chip. */
-    _handleClick(event) {
-        if (this.disabled) {
-            event.preventDefault();
-            return;
-        }
-        if (this.selectable) {
-            this.toggleSelected(true);
-        }
-    }
-    /** Handle custom key presses. */
-    _handleKeydown(event) {
-        if (this.disabled) {
-            return;
-        }
-        switch (event.keyCode) {
-            case DELETE:
-            case BACKSPACE:
-                // If the chip is removable, remove the focused chip
-                this.remove();
-                // Always prevent so page navigation does not occur
-                event.preventDefault();
-                break;
-            case SPACE:
-                // If we are selectable, toggle the focused chip
-                if (this.selectable) {
-                    this.toggleSelected(true);
-                }
-                // Always prevent space from scrolling the page since the list has focus
-                event.preventDefault();
-                break;
-        }
-    }
-    _handleRemoveClick(event) {
-        this.remove();
-        // We need to stop event propagation because otherwise the event will bubble up to the
-        // form field and cause the `onContainerClick` method to be invoked. This method would then
-        // reset the focused chip that has been focused after chip removal.
-        event.stopPropagation();
-        event.preventDefault();
-    }
-    _blur() {
-        // When animations are enabled, Angular may end up removing the chip from the DOM a little
-        // earlier than usual, causing it to be blurred and throwing off the logic in the chip list
-        // that moves focus not the next item. To work around the issue, we defer marking the chip
-        // as not focused until the next time the zone stabilizes.
-        this._ngZone.onStable.pipe(take(1)).subscribe(() => {
-            this._ngZone.run(() => {
-                this._hasFocus = false;
-                this.chipBlur.next({ chip: this });
-            });
-        });
-    }
-    _dispatchSelectionChange(isUserInput = false) {
-        this.selectionChange.emit({
-            source: this,
-            isUserInput,
-            selected: this._selected,
-        });
-    }
-    /** The ARIA selected applied to the chip. */
-    get ariaSelected() {
-        // Remove the `aria-selected` when the chip is deselected in single-selection mode, because
-        // it adds noise to NVDA users where "not selected" will be read out for each chip.
-        return this.selectable && (this._chipListMultiple || this.selected)
-            ? this.selected.toString()
-            : null;
-    }
-}
-GraniteChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteChipComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef, optional: true }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
-GraniteChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GraniteChipComponent, selector: "granite-chip, granite-input-chip", inputs: { tabIndex: "tabIndex", role: "role", selected: "selected", value: "value", selectable: "selectable", disabled: "disabled", removable: "removable", invalid: "invalid", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { selectionChange: "selectionChange", removed: "removed", destroyed: "destroyed", chipFocus: "chipFocus", chipBlur: "chipBlur" }, host: { listeners: { "click": "_handleClick($event)", "keydown": "_handleKeydown($event)", "blur": "_blur()", "focus": "focus()" }, properties: { "class.granite-chip-input": "inputChip", "class.granite-chip-selectable": "selectable", "class.granite-chip-selected": "selected", "class.granite-chip-disabled": "disabled", "class.granite-chip-invalid": "invalid", "class.granite-chip-removable": "!disabled && (removable || inputChip)", "attr.tabindex": "disabled ? null : tabIndex", "attr.role": "role", "attr.disabled": "disabled || null", "attr.aria-label": "ariaLabel", "attr.aria-labelledby": "ariaLabelledby", "attr.aria-disabled": "disabled.toString()", "attr.aria-selected": "ariaSelected" }, classAttribute: "granite-chip" }, exportAs: ["graniteChip"], ngImport: i0, template: "<ng-content></ng-content>\n<button\n  *ngIf=\"!disabled && (removable || inputChip)\"\n  class=\"granite-chip-remove\"\n  (click)=\"_handleRemoveClick($event)\"\n>\n  <granite-icon\n    fontIcon=\"icon-close\"\n    class=\"granite-chip-remove-icon\"\n    [class.granite-chip-remove-icon-invalid]=\"invalid\"\n  ></granite-icon>\n</button>\n", styles: [":host.granite-chip{display:-moz-inline-flex;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;border:none;-webkit-appearance:none;-moz-appearance:none;justify-content:center;align-items:center;padding-inline:var(--granite-spacing-16);margin-inline-start:var(--granite-spacing-2);margin-inline-end:var(--granite-spacing-2);padding-top:var(--granite-spacing-8);padding-bottom:var(--granite-spacing-8);height:inherit;color:var(--granite-color-text-weak);background-color:var(--granite-color-background);border-radius:var(--granite-radius-l);border-style:solid;border-width:var(--granite-border-width-regular);border-color:var(--granite-color-border-hard)}:host.granite-chip:hover{background-color:var(--granite-color-background-hover);cursor:pointer}:host.granite-chip.granite-chip-disabled{background-color:var(--granite-color-background);color:var(--granite-color-text-hint)}:host.granite-chip.granite-chip-disabled:hover{background-color:var(--granite-color-background);cursor:auto}:host.granite-chip:not(.granite-chip-selectable):hover{background-color:var(--granite-color-background);cursor:auto}:host.granite-chip.granite-chip-removable{padding-inline-end:var(--granite-spacing-8)}:host.granite-chip.granite-chip-invalid{background-color:var(--granite-color-background-failure);border-color:var(--granite-color-background-failure)}:host.granite-chip.granite-chip-invalid:hover{border-color:var(--granite-color-signal-failure)}:host.granite-chip.granite-chip-selected:not(.granite-chip-disabled):not(.granite-chip-input){border-color:var(--granite-color-background-active);background-color:var(--granite-color-background-info)}:host.granite-chip.granite-chip-selected:not(.granite-chip-disabled):not(.granite-chip-input):hover{background-color:var(--granite-color-background-hover)}:host.granite-chip.granite-chip-input{padding-top:var(--granite-spacing-4);padding-bottom:var(--granite-spacing-4);padding-inline:var(--granite-spacing-8)}:host.granite-chip.granite-chip-input:hover{background-color:var(--granite-color-background-hover)}:host.granite-chip.granite-chip-input:hover.granite-chip-invalid{background-color:var(--granite-color-background-failure)}:host.granite-chip.granite-chip-input:hover.granite-chip-invalid:hover{border-color:var(--granite-color-signal-failure)}.granite-chip-remove{display:flex;justify-content:center;align-items:center;background-color:transparent;outline:none;border:none;cursor:pointer;margin-inline-start:var(--granite-spacing-4);margin-inline-end:0;padding:0}[dir=rtl] .granite-chip-remove{margin-inline-end:var(--granite-spacing-4);margin-inline-start:0}.granite-chip-remove .granite-chip-remove-icon{position:relative;overflow:hidden;background-repeat:no-repeat;color:var(--granite-color-text-hint);line-height:inherit}.granite-chip-remove .granite-chip-remove-icon:hover{color:var(--granite-color-text)}.granite-chip-remove .granite-chip-remove-icon.granite-chip-remove-icon-invalid{color:var(--granite-color-signal-failure)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteChipComponent, decorators: [{
-            type: Component,
-            args: [{ selector: `granite-chip, granite-input-chip`, inputs: ['tabIndex'], exportAs: 'graniteChip', host: {
-                        class: 'granite-chip',
-                        '[class.granite-chip-input]': 'inputChip',
-                        '[class.granite-chip-selectable]': 'selectable',
-                        '[class.granite-chip-selected]': 'selected',
-                        '[class.granite-chip-disabled]': 'disabled',
-                        '[class.granite-chip-invalid]': 'invalid',
-                        '[class.granite-chip-removable]': '!disabled && (removable || inputChip)',
-                        '[attr.tabindex]': 'disabled ? null : tabIndex',
-                        '[attr.role]': 'role',
-                        '[attr.disabled]': 'disabled || null',
-                        '[attr.aria-label]': 'ariaLabel',
-                        '[attr.aria-labelledby]': 'ariaLabelledby',
-                        '[attr.aria-disabled]': 'disabled.toString()',
-                        '[attr.aria-selected]': 'ariaSelected',
-                        '(click)': '_handleClick($event)',
-                        '(keydown)': '_handleKeydown($event)',
-                        '(blur)': '_blur()',
-                        '(focus)': 'focus()',
-                    }, template: "<ng-content></ng-content>\n<button\n  *ngIf=\"!disabled && (removable || inputChip)\"\n  class=\"granite-chip-remove\"\n  (click)=\"_handleRemoveClick($event)\"\n>\n  <granite-icon\n    fontIcon=\"icon-close\"\n    class=\"granite-chip-remove-icon\"\n    [class.granite-chip-remove-icon-invalid]=\"invalid\"\n  ></granite-icon>\n</button>\n", styles: [":host.granite-chip{display:-moz-inline-flex;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;border:none;-webkit-appearance:none;-moz-appearance:none;justify-content:center;align-items:center;padding-inline:var(--granite-spacing-16);margin-inline-start:var(--granite-spacing-2);margin-inline-end:var(--granite-spacing-2);padding-top:var(--granite-spacing-8);padding-bottom:var(--granite-spacing-8);height:inherit;color:var(--granite-color-text-weak);background-color:var(--granite-color-background);border-radius:var(--granite-radius-l);border-style:solid;border-width:var(--granite-border-width-regular);border-color:var(--granite-color-border-hard)}:host.granite-chip:hover{background-color:var(--granite-color-background-hover);cursor:pointer}:host.granite-chip.granite-chip-disabled{background-color:var(--granite-color-background);color:var(--granite-color-text-hint)}:host.granite-chip.granite-chip-disabled:hover{background-color:var(--granite-color-background);cursor:auto}:host.granite-chip:not(.granite-chip-selectable):hover{background-color:var(--granite-color-background);cursor:auto}:host.granite-chip.granite-chip-removable{padding-inline-end:var(--granite-spacing-8)}:host.granite-chip.granite-chip-invalid{background-color:var(--granite-color-background-failure);border-color:var(--granite-color-background-failure)}:host.granite-chip.granite-chip-invalid:hover{border-color:var(--granite-color-signal-failure)}:host.granite-chip.granite-chip-selected:not(.granite-chip-disabled):not(.granite-chip-input){border-color:var(--granite-color-background-active);background-color:var(--granite-color-background-info)}:host.granite-chip.granite-chip-selected:not(.granite-chip-disabled):not(.granite-chip-input):hover{background-color:var(--granite-color-background-hover)}:host.granite-chip.granite-chip-input{padding-top:var(--granite-spacing-4);padding-bottom:var(--granite-spacing-4);padding-inline:var(--granite-spacing-8)}:host.granite-chip.granite-chip-input:hover{background-color:var(--granite-color-background-hover)}:host.granite-chip.granite-chip-input:hover.granite-chip-invalid{background-color:var(--granite-color-background-failure)}:host.granite-chip.granite-chip-input:hover.granite-chip-invalid:hover{border-color:var(--granite-color-signal-failure)}.granite-chip-remove{display:flex;justify-content:center;align-items:center;background-color:transparent;outline:none;border:none;cursor:pointer;margin-inline-start:var(--granite-spacing-4);margin-inline-end:0;padding:0}[dir=rtl] .granite-chip-remove{margin-inline-end:var(--granite-spacing-4);margin-inline-start:0}.granite-chip-remove .granite-chip-remove-icon{position:relative;overflow:hidden;background-repeat:no-repeat;color:var(--granite-color-text-hint);line-height:inherit}.granite-chip-remove .granite-chip-remove-icon:hover{color:var(--granite-color-text)}.granite-chip-remove .granite-chip-remove-icon.granite-chip-remove-icon-invalid{color:var(--granite-color-signal-failure)}\n"] }]
-        }], ctorParameters: function () {
-        return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef, decorators: [{
-                        type: Optional
-                    }] }, { type: undefined, decorators: [{
-                        type: Attribute,
-                        args: ['tabindex']
-                    }] }];
-    }, propDecorators: { role: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], selectable: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], removable: [{
-                type: Input
-            }], invalid: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input,
-                args: ['aria-label']
-            }], ariaLabelledby: [{
-                type: Input,
-                args: ['aria-labelledby']
-            }], selectionChange: [{
-                type: Output
-            }], removed: [{
-                type: Output
-            }], destroyed: [{
-                type: Output
-            }], chipFocus: [{
-                type: Output
-            }], chipBlur: [{
-                type: Output
-            }] } });
-
-class GraniteChipListBase {
-    constructor(_parentForm, _parentFormGroup, ngControl) {
-        this._parentForm = _parentForm;
-        this._parentFormGroup = _parentFormGroup;
-        this.ngControl = ngControl;
-        this.stateChanges = new EventEmitter();
-    }
-}
-// Increasing integer for generating unique ids for chip-list components.
-let nextUniqueId$1 = 0;
-class GraniteChipListComponent extends GraniteChipListBase {
-    /** The ARIA role applied to the chip list. */
-    get role() {
-        if (this._explicitRole) {
-            return this._explicitRole;
-        }
-        return this.empty ? null : 'listbox';
-    }
-    set role(role) {
-        this._explicitRole = role;
-    }
-    /** Whether the user should be allowed to select multiselect chips. */
-    get multiselect() {
-        return this._multiple;
-    }
-    set multiselect(value) {
-        this._multiple = coerceBooleanProperty(value);
-        this._syncChipsState();
-    }
-    /**
-     * Whether the chip list is disabled.
-     */
-    get disabled() {
-        return this.ngControl ? !!this.ngControl.disabled : this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-        this._syncChipsState();
-    }
-    /**
-     * Whether or not this chip list is selectable. When a chip list is not selectable,
-     * the selected states for all the chips inside the chip list are always ignored.
-     */
-    get selectable() {
-        return this._selectable;
-    }
-    set selectable(value) {
-        this._selectable = coerceBooleanProperty(value);
-        if (this.chips) {
-            this.chips.forEach((chip) => (chip._chipListSelectable = this._selectable));
-        }
-    }
-    set tabindex(value) {
-        this._userTabIndex = value;
-        this._tabIndex = value;
-    }
-    /** Unique identifier for the chip list. */
-    get id() {
-        return this._chipInput ? this._chipInput.id : this._uid;
-    }
-    /** Whether any chips or the matChipInput inside of this chip-list has focus. */
-    get focused() {
-        return ((this._chipInput && this._chipInput.focused) || this._hasFocusedChip());
-    }
-    /** Whether the chip list is empty. */
-    get empty() {
-        return ((!this._chipInput || this._chipInput.empty) &&
-            (!this.chips || this.chips.length === 0));
-    }
-    /** The array of selected chips inside chip list. */
-    get selected() {
-        var _a, _b;
-        return this.multiselect
-            ? ((_a = this._selectionModel) === null || _a === void 0 ? void 0 : _a.selected) || []
-            : (_b = this._selectionModel) === null || _b === void 0 ? void 0 : _b.selected[0];
-    }
-    /** Combined stream of all of the child chips' selection change events. */
-    get chipSelectionChanges() {
-        return merge(...this.chips.map((chip) => chip.selectionChange));
-    }
-    /** Combined stream of all of the child chips' focus change events. */
-    get chipFocusChanges() {
-        return merge(...this.chips.map((chip) => chip.chipFocus));
-    }
-    /** Combined stream of all of the child chips' blur change events. */
-    get chipBlurChanges() {
-        return merge(...this.chips.map((chip) => chip.chipBlur));
-    }
-    /** Combined stream of all of the child chips' remove change events. */
-    get chipRemoveChanges() {
-        return merge(...this.chips.map((chip) => chip.destroyed));
-    }
-    constructor(_elementRef, _changeDetectorRef, _dir, _parentForm, _parentFormGroup, ngControl) {
-        super(_parentForm, _parentFormGroup, ngControl);
-        this._elementRef = _elementRef;
-        this._changeDetectorRef = _changeDetectorRef;
-        this._dir = _dir;
-        this.controlType = 'granite-chip-list';
-        /**
-         * When a chip is destroyed, we store the index of the destroyed chip until the chips
-         * query list notifies about the update. This is necessary because we cannot determine an
-         * appropriate chip that should receive focus until the array of chips updated completely.
-         */
-        this._lastDestroyedChipIndex = null;
-        /** Subject that emits when the component has been destroyed. */
-        this._destroyed = new Subject();
-        /** Uid of the chip list */
-        this._uid = `granite-chip-list-${nextUniqueId$1++}`;
-        /** Tab index for the chip list. */
-        this._tabIndex = 0;
-        /**
-         * User defined tab index.
-         * When it is not null, use user defined tab index. Otherwise use _tabIndex
-         */
-        this._userTabIndex = null;
-        this._multiple = false;
-        this._disabled = false;
-        this._selectable = true;
-        this.ariaLabel = null;
-        this.ariaLabelledby = null;
-        this.ariaOrientation = 'horizontal';
-        /** Function when changed */
-        this._onChange = () => {
-            // Implemented as part of ControlValueAccessor
-        };
-        /** Function when changed */
-        this._onTouched = () => {
-            // Implemented as part of ControlValueAccessor
-        };
-        this._compareWith = (o1, o2) => o1 === o2;
-        if (this.ngControl) {
-            this.ngControl.valueAccessor = this;
-        }
-    }
-    ngAfterContentInit() {
-        this._keyManager = new FocusKeyManager(this.chips)
-            .withWrap()
-            .withVerticalOrientation()
-            .withHomeAndEnd()
-            .withHorizontalOrientation(this._dir ? this._dir.value : 'ltr');
-        if (this._dir) {
-            this._dir.change
-                .pipe(takeUntil(this._destroyed))
-                .subscribe((dir) => this._keyManager.withHorizontalOrientation(dir));
-        }
-        this._keyManager.tabOut.pipe(takeUntil(this._destroyed)).subscribe(() => {
-            this._allowFocusEscape();
-        });
-        // When the list changes, re-subscribe
-        this.chips.changes
-            .pipe(startWith(null), takeUntil(this._destroyed))
-            .subscribe(() => {
-            if (this.disabled) {
-                // Since this happens after the content has been
-                // checked, we need to defer it to the next tick.
-                Promise.resolve().then(() => {
-                    this._syncChipsState();
-                });
-            }
-            this._resetChips();
-            // Reset chips selected/deselected status
-            this._initializeSelection();
-            // Check to see if we need to update our tab index
-            this._updateTabIndex();
-            // Check to see if we have a destroyed chip and need to refocus
-            this._updateFocusForDestroyedChips();
-            this.stateChanges.next();
-        });
-    }
-    ngOnInit() {
-        this._selectionModel = new SelectionModel(this.multiselect, undefined, false);
-        this.stateChanges.next();
-    }
-    ngDoCheck() {
-        if (this.ngControl) {
-            // We need to re-evaluate this on every change detection cycle, because there are some
-            // error triggers that we can't subscribe to (e.g. parent form submissions). This means
-            // that whatever logic is in here has to be super lean or we risk destroying the performance.
-            if (this.ngControl.disabled !== this._disabled) {
-                this.disabled = !!this.ngControl.disabled;
-            }
-        }
-    }
-    ngOnDestroy() {
-        this._destroyed.next();
-        this._destroyed.complete();
-        this.stateChanges.complete();
-        this._dropSubscriptions();
-    }
-    /** Associates an HTML input element with this chip list. */
-    registerInput(inputElement) {
-        this._chipInput = inputElement;
-        // We use this attribute to match the chip list to its input in test harnesses.
-        // Set the attribute directly here to avoid "changed after checked" errors.
-        this._elementRef.nativeElement.setAttribute('data-granite-chip-input', inputElement.id);
-    }
-    // Implemented as part of ControlValueAccessor.
-    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-    writeValue(value) {
-        if (this.chips) {
-            this._setSelectionByValue(value, false);
-        }
-    }
-    // Implemented as part of ControlValueAccessor.
-    registerOnChange(fn) {
-        this._onChange = fn;
-    }
-    // Implemented as part of ControlValueAccessor.
-    registerOnTouched(fn) {
-        this._onTouched = fn;
-    }
-    // Implemented as part of ControlValueAccessor.
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        this.stateChanges.next();
-    }
-    /**
-     * Focus chip list when click on the container.
-     */
-    onContainerClick(event) {
-        if (!this._originatesFromChip(event)) {
-            this.focus();
-        }
-    }
-    /**
-     * Focuses the first non-disabled chip in this chip list, or the associated input when there
-     * are no eligible chips.
-     */
-    focus(options) {
-        if (this.disabled) {
-            return;
-        }
-        // Focus on first element if there's no chipInput inside chip-list
-        if (this._chipInput && this._chipInput.focused) {
-            // do nothing
-        }
-        else if (this.chips.length > 0) {
-            this._keyManager.setFirstItemActive();
-            this.stateChanges.next();
-        }
-        else {
-            this._focusInput(options);
-            this.stateChanges.next();
-        }
-    }
-    /** Attempt to focus an input if we have one. */
-    _focusInput(options) {
-        if (this._chipInput) {
-            this._chipInput.setFocus(options);
-        }
-    }
-    /**
-     * Pass events to the keyboard manager. Available here for tests.
-     */
-    _keydown(event) {
-        const target = event.target;
-        if (target && target.classList.contains('granite-chip')) {
-            this._keyManager.onKeydown(event);
-            this.stateChanges.next();
-        }
-    }
-    /**
-     * Check the tab index as you should not be allowed to focus an empty list.
-     */
-    _updateTabIndex() {
-        // If we have 0 chips, we should not allow keyboard focus
-        this._tabIndex = this._userTabIndex || (this.chips.length === 0 ? -1 : 0);
-    }
-    /**
-     * If the amount of chips changed, we need to update the
-     * key manager state and focus the next closest chip.
-     */
-    _updateFocusForDestroyedChips() {
-        // Move focus to the closest chip. If no other chips remain, focus the chip-list itself.
-        if (this._lastDestroyedChipIndex != null) {
-            if (this.chips.length) {
-                const newChipIndex = Math.min(this._lastDestroyedChipIndex, this.chips.length - 1);
-                this._keyManager.setActiveItem(newChipIndex);
-            }
-            else {
-                this.focus();
-            }
-        }
-        this._lastDestroyedChipIndex = null;
-    }
-    /**
-     * Utility to ensure all indexes are valid.
-     *
-     * @param index The index to be checked.
-     * @returns True if the index is valid for our list of chips.
-     */
-    _isValidIndex(index) {
-        return index >= 0 && index < this.chips.length;
-    }
-    _setSelectionByValue(value, isUserInput = true) {
-        this._clearSelection();
-        this.chips.forEach((chip) => chip.deselect());
-        if (Array.isArray(value)) {
-            value.forEach((currentValue) => this._selectValue(currentValue, isUserInput));
-            this._sortValues();
-        }
-        else {
-            const correspondingChip = this._selectValue(value, isUserInput);
-            // Shift focus to the active item. Note that we shouldn't do this in multiselect
-            // mode, because we don't know what chip the user interacted with last.
-            if (correspondingChip) {
-                if (isUserInput) {
-                    this._keyManager.setActiveItem(correspondingChip);
-                }
-            }
-        }
-    }
-    /**
-     * Finds and selects the chip based on its value.
-     * @returns Chip that has the corresponding value.
-     */
-    _selectValue(value, isUserInput = true) {
-        const correspondingChip = this.chips.find((chip) => {
-            return chip.value != null && this._compareWith(chip.value, value);
-        });
-        if (correspondingChip) {
-            correspondingChip.select(isUserInput);
-            this._selectionModel.select(correspondingChip);
-        }
-        return correspondingChip;
-    }
-    _initializeSelection() {
-        // Defer setting the value in order to avoid the "Expression
-        // has changed after it was checked" errors from Angular.
-        Promise.resolve().then(() => {
-            if (this.ngControl) {
-                this._setSelectionByValue(this.ngControl.value, false);
-                this.stateChanges.next();
-            }
-        });
-    }
-    /**
-     * Deselects every chip in the list.
-     * @param skip Chip that should not be deselected.
-     */
-    _clearSelection(skip) {
-        this._selectionModel.clear();
-        this.chips.forEach((chip) => {
-            if (chip !== skip) {
-                chip.deselect();
-            }
-        });
-        this.stateChanges.next();
-    }
-    /**
-     * Sorts the model values, ensuring that they keep the same
-     * order that they have in the panel.
-     */
-    _sortValues() {
-        if (this._multiple) {
-            this._selectionModel.clear();
-            this.chips.forEach((chip) => {
-                if (chip.selected) {
-                    this._selectionModel.select(chip);
-                }
-            });
-            this.stateChanges.next();
-        }
-    }
-    /** When blurred, mark the field as touched when focus moved outside the chip list. */
-    _blur() {
-        if (!this._hasFocusedChip()) {
-            this._keyManager.setActiveItem(-1);
-        }
-        if (!this.disabled) {
-            if (this._chipInput) {
-                // If there's a chip input, we should check whether the focus moved to chip input.
-                // If the focus is not moved to chip input, mark the field as touched. If the focus moved
-                // to chip input, do nothing.
-                // Timeout is needed to wait for the focus() event trigger on chip input.
-                setTimeout(() => {
-                    if (!this.focused) {
-                        this._markAsTouched();
-                    }
-                });
-            }
-            else {
-                // If there's no chip input, then mark the field as touched.
-                this._markAsTouched();
-            }
-        }
-    }
-    /** Mark the field as touched */
-    _markAsTouched() {
-        this._onTouched();
-        this._changeDetectorRef.markForCheck();
-        this.stateChanges.next();
-    }
-    /**
-     * Removes the `tabindex` from the chip list and resets it back afterwards, allowing the
-     * user to tab out of it. This prevents the list from capturing focus and redirecting
-     * it back to the first chip, creating a focus trap, if it user tries to tab away.
-     */
-    _allowFocusEscape() {
-        if (this._tabIndex !== -1) {
-            this._tabIndex = -1;
-            setTimeout(() => {
-                this._tabIndex = this._userTabIndex || 0;
-                this._changeDetectorRef.markForCheck();
-            });
-        }
-    }
-    _resetChips() {
-        this._dropSubscriptions();
-        this._listenToChipsFocus();
-        this._listenToChipsSelection();
-        this._listenToChipsRemoved();
-    }
-    _dropSubscriptions() {
-        if (this._chipFocusSubscription) {
-            this._chipFocusSubscription.unsubscribe();
-            this._chipFocusSubscription = null;
-        }
-        if (this._chipBlurSubscription) {
-            this._chipBlurSubscription.unsubscribe();
-            this._chipBlurSubscription = null;
-        }
-        if (this._chipSelectionSubscription) {
-            this._chipSelectionSubscription.unsubscribe();
-            this._chipSelectionSubscription = null;
-        }
-        if (this._chipRemoveSubscription) {
-            this._chipRemoveSubscription.unsubscribe();
-            this._chipRemoveSubscription = null;
-        }
-    }
-    /** Listens to user-generated selection events on each chip. */
-    _listenToChipsSelection() {
-        this._chipSelectionSubscription = this.chipSelectionChanges.subscribe((event) => {
-            event.source.selected
-                ? this._selectionModel.select(event.source)
-                : this._selectionModel.deselect(event.source);
-            // For single selection chip list, make sure the deselected value is unselected.
-            if (!this.multiselect) {
-                this.chips.forEach((chip) => {
-                    if (!this._selectionModel.isSelected(chip) && chip.selected) {
-                        chip.deselect();
-                    }
-                });
-            }
-        });
-    }
-    /** Listens to user-generated selection events on each chip. */
-    _listenToChipsFocus() {
-        this._chipFocusSubscription = this.chipFocusChanges.subscribe((event) => {
-            const chipIndex = this.chips.toArray().indexOf(event.chip);
-            if (this._isValidIndex(chipIndex)) {
-                this._keyManager.updateActiveItem(chipIndex);
-            }
-            this.stateChanges.next();
-        });
-        this._chipBlurSubscription = this.chipBlurChanges.subscribe(() => {
-            this._blur();
-            this.stateChanges.next();
-        });
-    }
-    _listenToChipsRemoved() {
-        this._chipRemoveSubscription = this.chipRemoveChanges.subscribe((event) => {
-            const chip = event.chip;
-            const chipIndex = this.chips.toArray().indexOf(event.chip);
-            // In case the chip that will be removed is currently focused, we temporarily store
-            // the index in order to be able to determine an appropriate sibling chip that will
-            // receive focus.
-            if (this._isValidIndex(chipIndex) && chip._hasFocus) {
-                this._lastDestroyedChipIndex = chipIndex;
-            }
-        });
-    }
-    /** Checks whether an event comes from inside a chip element. */
-    _originatesFromChip(event) {
-        let currentElement = event.target;
-        while (currentElement &&
-            currentElement !== this._elementRef.nativeElement) {
-            if (currentElement.classList.contains('granite-chip')) {
-                return true;
-            }
-            currentElement = currentElement.parentElement;
-        }
-        return false;
-    }
-    /** Checks whether any of the chips is focused. */
-    _hasFocusedChip() {
-        return this.chips && this.chips.some((chip) => chip._hasFocus);
-    }
-    /** Syncs the list's state with the individual chips. */
-    _syncChipsState() {
-        if (this.chips) {
-            this.chips.forEach((chip) => {
-                chip._chipListDisabled = this._disabled;
-                chip._chipListMultiple = this.multiselect;
-            });
-        }
-    }
-}
-GraniteChipListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", 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 });
-GraniteChipListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GraniteChipListComponent, selector: "granite-chip-list", inputs: { role: "role", multiselect: "multiselect", disabled: "disabled", selectable: "selectable", tabindex: "tabindex", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaOrientation: ["aria-orientation", "ariaOrientation"] }, 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: [".granite-chip-list{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;align-content: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}input.granite-chip-input{outline:none;border:none;background-color:transparent;color:var(--granite-color-text);margin:var(--granite-spacing-4)}granite-icon{color:var(--granite-color-text);background-color:transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteChipListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'granite-chip-list', template: `<ng-content></ng-content>`, exportAs: 'graniteChipList', host: {
-                        class: 'granite-chip-list',
-                        '[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',
-                        '(focus)': 'focus()',
-                        '(blur)': '_blur()',
-                        '(keydown)': '_keydown($event)',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".granite-chip-list{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;align-content: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}input.granite-chip-input{outline:none;border:none;background-color:transparent;color:var(--granite-color-text);margin:var(--granite-spacing-4)}granite-icon{color:var(--granite-color-text);background-color:transparent}\n"] }]
-        }], ctorParameters: function () {
-        return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i3.Directionality, decorators: [{
-                        type: Optional
-                    }] }, { type: i2$1.NgForm, decorators: [{
-                        type: Optional
-                    }] }, { type: i2$1.FormGroupDirective, decorators: [{
-                        type: Optional
-                    }] }, { type: i2$1.NgControl, decorators: [{
-                        type: Optional
-                    }, {
-                        type: Self
-                    }] }];
-    }, propDecorators: { role: [{
-                type: Input
-            }], multiselect: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], selectable: [{
-                type: Input
-            }], tabindex: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input,
-                args: ['aria-label']
-            }], ariaLabelledby: [{
-                type: Input,
-                args: ['aria-labelledby']
-            }], ariaOrientation: [{
-                type: Input,
-                args: ['aria-orientation']
-            }], chips: [{
-                type: ContentChildren,
-                args: [GraniteChipComponent, {
-                        // We need to use `descendants: true`, because Ivy will no longer match
-                        // indirect descendants if it's left as false.
-                        descendants: true,
-                    }]
-            }] } });
-
-let nextUniqueId = 0;
-class GraniteChipInputDirective {
-    /** Register input for chip list */
-    set graniteChipInputFor(value) {
-        if (value) {
-            this._chipList = value;
-            this._chipList.registerInput(this);
-        }
-    }
-    /**
-     * Whether or not the chipEnd event will be emitted when the input is blurred.
-     */
-    get graniteChipInputAddOnBlur() {
-        return this._addOnBlur;
-    }
-    set graniteChipInputAddOnBlur(value) {
-        this._addOnBlur = coerceBooleanProperty(value);
-    }
-    /**
-     * Whether this is a required field, currently we use it only for setting aria-required.
-     */
-    get required() {
-        return this._required;
-    }
-    set required(value) {
-        this._required = coerceBooleanProperty(value);
-    }
-    /** Whether the input is disabled. */
-    get disabled() {
-        return this._disabled || (this._chipList && this._chipList.disabled);
-    }
-    set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-    }
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
-        /** Unique id for the input. */
-        this.id = `granite-chip-list-input-${nextUniqueId++}`;
-        /** The input's placeholder text. */
-        this.placeholder = '';
-        /**
-         * The list of key codes that will trigger a chipEnd event.
-         *
-         * Defaults to `[ENTER]`.
-         */
-        this.graniteChipInputSeparatorKeyCodes = [
-            ENTER,
-        ];
-        this._addOnBlur = true;
-        this._disabled = false;
-        /** Emitted when a chip is to be added. */
-        this.graniteChipInputTokenEnd = new EventEmitter();
-        this.focused = false;
-        this.inputElement = this._elementRef.nativeElement;
-    }
-    ngOnChanges() {
-        this._chipList.stateChanges.next();
-    }
-    ngOnDestroy() {
-        this.graniteChipInputTokenEnd.complete();
-    }
-    ngAfterContentInit() {
-        this._focusLastChipOnBackspace = this.empty;
-    }
-    /** Utility method to make host definition/tests more clear. */
-    _keydown(event) {
-        if (event) {
-            // Allow the user's focus to escape when they're tabbing forward. Note that we don't
-            // want to do this when going backwards, because focus should go back to the first chip.
-            if (event.keyCode === TAB && !hasModifierKey(event, 'shiftKey')) {
-                this._chipList._allowFocusEscape();
-            }
-            // To prevent the user from accidentally deleting chips when pressing BACKSPACE continuously,
-            // We focus the last chip on backspace only after the user has released the backspace button,
-            // and the input is empty (see behaviour in _keyup)
-            if (event.keyCode === BACKSPACE && this._focusLastChipOnBackspace) {
-                this._chipList._keyManager.setLastItemActive();
-                event.preventDefault();
-                return;
-            }
-            else {
-                this._focusLastChipOnBackspace = false;
-            }
-        }
-        this._emitChipEnd(event);
-    }
-    /**
-     * Pass events to the keyboard manager. Available here for tests.
-     */
-    _keyup(event) {
-        // Allow user to move focus to chips next time he presses backspace
-        if (!this._focusLastChipOnBackspace &&
-            event.keyCode === BACKSPACE &&
-            this.empty) {
-            this._focusLastChipOnBackspace = true;
-            event.preventDefault();
-        }
-    }
-    /** Checks to see if the blur should emit the (chipEnd) event. */
-    _blur() {
-        if (this.graniteChipInputAddOnBlur) {
-            this._emitChipEnd();
-        }
-        this.focused = false;
-        // Blur the chip list if it is not focused
-        if (!this._chipList.focused) {
-            this._chipList._blur();
-        }
-        this._chipList.stateChanges.next();
-    }
-    _focus() {
-        this.focused = true;
-        this._focusLastChipOnBackspace = this.empty;
-        this._chipList.stateChanges.next();
-    }
-    /** Checks to see if the (chipEnd) event needs to be emitted. */
-    _emitChipEnd(event) {
-        if (!this.inputElement.value && !!event) {
-            this._chipList._keydown(event);
-        }
-        if (!event || this._isSeparatorKey(event)) {
-            this.graniteChipInputTokenEnd.emit({
-                input: this.inputElement,
-                value: this.inputElement.value,
-                chipInput: this,
-            });
-            event === null || event === void 0 ? void 0 : event.preventDefault();
-        }
-    }
-    _onInput() {
-        // Let chip list know whenever the value changes.
-        this._chipList.stateChanges.next();
-    }
-    /** Focuses the input (called from parent level). */
-    setFocus(options) {
-        this.inputElement.focus(options);
-    }
-    /** Clears the input */
-    clear() {
-        this.inputElement.value = '';
-        this._focusLastChipOnBackspace = true;
-    }
-    /** Whether the input is empty. */
-    get empty() {
-        return !this.inputElement.value;
-    }
-    /** Checks whether a keycode is one of the configured separators. */
-    _isSeparatorKey(event) {
-        return (!hasModifierKey(event) &&
-            new Set(this.graniteChipInputSeparatorKeyCodes).has(event.keyCode));
-    }
-}
-GraniteChipInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteChipInputDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-GraniteChipInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: GraniteChipInputDirective, selector: "input[graniteChipInputFor]", inputs: { id: "id", placeholder: "placeholder", graniteChipInputFor: "graniteChipInputFor", graniteChipInputSeparatorKeyCodes: "graniteChipInputSeparatorKeyCodes", graniteChipInputAddOnBlur: "graniteChipInputAddOnBlur", required: "required", disabled: "disabled" }, outputs: { graniteChipInputTokenEnd: "graniteChipInputTokenEnd" }, host: { listeners: { "keydown": "_keydown($event)", "keyup": "_keyup($event)", "blur": "_blur()", "focus": "_focus()", "input": "_onInput()" }, properties: { "id": "id", "attr.disabled": "disabled || null", "attr.placeholder": "placeholder || null", "attr.aria-required": "required || null" }, classAttribute: "granite-chip-input" }, exportAs: ["graniteChipInput", "graniteChipInputFor"], usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteChipInputDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'input[graniteChipInputFor]',
-                    exportAs: 'graniteChipInput, graniteChipInputFor',
-                    host: {
-                        class: 'granite-chip-input',
-                        '[id]': 'id',
-                        '[attr.disabled]': 'disabled || null',
-                        '[attr.placeholder]': 'placeholder || null',
-                        '[attr.aria-required]': 'required || null',
-                        '(keydown)': '_keydown($event)',
-                        '(keyup)': '_keyup($event)',
-                        '(blur)': '_blur()',
-                        '(focus)': '_focus()',
-                        '(input)': '_onInput()',
-                    },
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { id: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], graniteChipInputFor: [{
-                type: Input
-            }], graniteChipInputSeparatorKeyCodes: [{
-                type: Input
-            }], graniteChipInputAddOnBlur: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], graniteChipInputTokenEnd: [{
-                type: Output
-            }] } });
-
-const CHIP_DECLARATIONS = [
-    GraniteChipListComponent,
-    GraniteChipComponent,
-    GraniteChipInputDirective,
-];
-class GraniteChipsModule {
-}
-GraniteChipsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-GraniteChipsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: GraniteChipsModule, declarations: [GraniteChipListComponent,
-        GraniteChipComponent,
-        GraniteChipInputDirective], imports: [CommonModule, FormsModule, ReactiveFormsModule, GraniteIconModule], exports: [GraniteChipListComponent,
-        GraniteChipComponent,
-        GraniteChipInputDirective] });
-GraniteChipsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteChipsModule, imports: [CommonModule, FormsModule, ReactiveFormsModule, GraniteIconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteChipsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, FormsModule, ReactiveFormsModule, GraniteIconModule],
-                    declarations: CHIP_DECLARATIONS,
-                    exports: CHIP_DECLARATIONS,
-                }]
-        }] });
-
-class GraniteLabelComponent {
-    constructor() {
-        this.for = null;
-        this.form = null;
-        this.required = false;
-    }
-    ngOnChanges(changes) {
-        if (changes.required) {
-            this.required = coerceBooleanProperty(changes.required.currentValue);
-        }
-    }
-}
-GraniteLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GraniteLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GraniteLabelComponent, selector: "granite-label", inputs: { for: "for", form: "form", required: "required" }, host: { classAttribute: "granite-label" }, exportAs: ["graniteLabel"], usesOnChanges: true, ngImport: i0, template: "<label [attr.for]=\"for\" [attr.form]=\"form\">\n  <i *ngIf=\"required\" aria-label=\"required\">*</i>\n  <ng-content></ng-content>\n</label>\n", styles: [":host{box-sizing:border-box;font:inherit;font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}:host *,:host *:before,:host *:after{box-sizing:inherit}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteLabelComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'granite-label', exportAs: 'graniteLabel', host: {
-                        class: 'granite-label',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"for\" [attr.form]=\"form\">\n  <i *ngIf=\"required\" aria-label=\"required\">*</i>\n  <ng-content></ng-content>\n</label>\n", styles: [":host{box-sizing:border-box;font:inherit;font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}:host *,:host *:before,:host *:after{box-sizing:inherit}\n"] }]
-        }], propDecorators: { for: [{
-                type: Input
-            }], form: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }] } });
-
-class GraniteLabelModule {
-}
-GraniteLabelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-GraniteLabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: GraniteLabelModule, declarations: [GraniteLabelComponent], imports: [CommonModule], exports: [GraniteLabelComponent] });
-GraniteLabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteLabelModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteLabelModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [GraniteLabelComponent],
-                    imports: [CommonModule],
-                    exports: [GraniteLabelComponent],
-                }]
-        }] });
-
-/**
- * Directive used to tell components and their sub components that client output
- * should be adapted for desktop devices like personal computers.
- */
-class ClientOutputDesktopDirective {
-}
-ClientOutputDesktopDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ClientOutputDesktopDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-ClientOutputDesktopDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: ClientOutputDesktopDirective, selector: "[graniteClientOutputDesktop]", providers: [
-        {
-            provide: GRANITE_CLIENT_OUTPUT,
-            useValue: deviceDesktop.output,
-        },
-    ], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ClientOutputDesktopDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: `[graniteClientOutputDesktop]`,
-                    providers: [
-                        {
-                            provide: GRANITE_CLIENT_OUTPUT,
-                            useValue: deviceDesktop.output,
-                        },
-                    ],
-                }]
-        }] });
-
-/**
- * Directive used to tell components and their sub components that client output
- * should be adapted for touch devices like mobiles and tablets.
- */
-class ClientOutputTouchDirective {
-}
-ClientOutputTouchDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ClientOutputTouchDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-ClientOutputTouchDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: ClientOutputTouchDirective, selector: "[graniteClientOutputTouch]", providers: [
-        {
-            provide: GRANITE_CLIENT_OUTPUT,
-            useValue: deviceTouch.output,
-        },
-    ], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ClientOutputTouchDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: `[graniteClientOutputTouch]`,
-                    providers: [
-                        {
-                            provide: GRANITE_CLIENT_OUTPUT,
-                            useValue: deviceTouch.output,
-                        },
-                    ],
-                }]
-        }] });
-
-/**
- * Directive used to tell components and their sub components that client input
- * should be adapted for desktop devices, like personal computers.
- */
-class ClientInputDesktopDirective {
-}
-ClientInputDesktopDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ClientInputDesktopDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-ClientInputDesktopDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: ClientInputDesktopDirective, selector: "[graniteClientInputDesktop]", providers: [
-        {
-            provide: GRANITE_CLIENT_INPUT,
-            useValue: deviceDesktop.input,
-        },
-    ], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ClientInputDesktopDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: `[graniteClientInputDesktop]`,
-                    providers: [
-                        {
-                            provide: GRANITE_CLIENT_INPUT,
-                            useValue: deviceDesktop.input,
-                        },
-                    ],
-                }]
-        }] });
-
-/**
- * Directive used to tell components and their sub components that client input
- * should be adapted for touch devices, like mobiles and tablets.
- */
-class ClientInputTouchDirective {
-}
-ClientInputTouchDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ClientInputTouchDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-ClientInputTouchDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: ClientInputTouchDirective, selector: "[graniteClientInputTouch]", providers: [
-        {
-            provide: GRANITE_CLIENT_INPUT,
-            useValue: deviceTouch.input,
-        },
-    ], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ClientInputTouchDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: `[graniteClientInputTouch]`,
-                    providers: [
-                        {
-                            provide: GRANITE_CLIENT_INPUT,
-                            useValue: deviceTouch.input,
-                        },
-                    ],
-                }]
-        }] });
-
-// TODO: Move client devices into a separate module
-class GraniteCoreModule {
-}
-GraniteCoreModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteCoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-GraniteCoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: GraniteCoreModule, declarations: [ClientOutputDesktopDirective,
-        ClientOutputTouchDirective,
-        ClientInputDesktopDirective,
-        ClientInputTouchDirective], exports: [ClientOutputDesktopDirective,
-        ClientOutputTouchDirective,
-        ClientInputDesktopDirective,
-        ClientInputTouchDirective] });
-GraniteCoreModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteCoreModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteCoreModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        ClientOutputDesktopDirective,
-                        ClientOutputTouchDirective,
-                        ClientInputDesktopDirective,
-                        ClientInputTouchDirective,
-                    ],
-                    exports: [
-                        ClientOutputDesktopDirective,
-                        ClientOutputTouchDirective,
-                        ClientInputDesktopDirective,
-                        ClientInputTouchDirective,
-                    ],
-                }]
-        }] });
-
-class GraniteTitlePipe {
-    transform(value) {
-        const words = value.split(/(?=[A-Z ])/);
-        return words
-            .map((word) => word.trim())
-            .filter(Boolean)
-            .map((word) => word.charAt(0).toLocaleUpperCase() + word.slice(1))
-            .join(' ');
-    }
-}
-GraniteTitlePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteTitlePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-GraniteTitlePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: GraniteTitlePipe, name: "graniteTitle" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteTitlePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'graniteTitle',
-                }]
-        }] });
-
-class PurePipesModule {
-}
-PurePipesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PurePipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PurePipesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: PurePipesModule, declarations: [GraniteTitlePipe], exports: [GraniteTitlePipe] });
-PurePipesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PurePipesModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PurePipesModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [GraniteTitlePipe],
-                    declarations: [GraniteTitlePipe],
-                }]
-        }] });
-
-/*
- * Public API Surface of ui
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { ButtonSelectors, ClientInputDesktopDirective, ClientInputTouchDirective, ClientOutputDesktopDirective, ClientOutputTouchDirective, GRANITE_CLIENT_INPUT, GRANITE_CLIENT_OUTPUT, GraniteAnchorComponent, GraniteArrangeGridComponent, GraniteArrangeGridItemComponent, GraniteArrangeGridModule, GraniteArrangeGridOrientation, GraniteBadgeComponent, GraniteBadgeHarness, GraniteBadgeModule, GraniteButtonComponent, GraniteButtonModule, GraniteCheckboxComponent, GraniteCheckboxGroupComponent, GraniteCheckboxModule, GraniteChipComponent, GraniteChipInputDirective, GraniteChipListComponent, GraniteChipSelectionChangeEvent, GraniteChipsModule, GraniteCoreModule, GraniteDividerDirective, GraniteGridComponent, GraniteGridItemComponent, GraniteGridModule, GraniteIconComponent, GraniteIconModule, GraniteInputFieldComponent, GraniteInputFieldModule, GraniteLabelComponent, GraniteLabelModule, GraniteMenuComponent, GraniteMenuHarness, GraniteMenuItemComponent, GraniteMenuItemHarness, GraniteMenuModule, GraniteMenuTouchCloseComponent, GraniteMenuTouchTitleItemComponent, GraniteMenuTriggerForDirective, GraniteRadioButtonComponent, GraniteRadioButtonModule, GraniteRadioGroupComponent, GraniteTitleDirective, GraniteTitlePipe, GraniteToggleSwitchComponent, GraniteToggleSwitchModule, PurePipesModule, deviceDesktop, deviceTouch, disabledMixin, graniteMenuDesktopAnimations, graniteMenuTouchAnimations };
-//# sourceMappingURL=ifsworld-granite-components.mjs.map