@ifsworld/granite-components 4.3.0 → 5.0.0

package/fesm2015/ifsworld-granite-components.mjs

@@ -0,0 +1,3145 @@
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, HostBinding, ContentChildren, NgModule, InjectionToken, Attribute, Inject, Optional, EventEmitter, QueryList, TemplateRef, Directive, ViewChild, Output, Self, HostListener, ContentChild, Pipe } from '@angular/core';
+import * as i2 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$1 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 } from '@angular/cdk/keycodes';
+import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
+import * as i3 from '@angular/cdk/bidi';
+import * as i2$1 from '@angular/cdk/collections';
+import * as i1$2 from '@angular/cdk/table';
+import { CdkTableModule } from '@angular/cdk/table';
+
+class GraniteArrangeGridItemComponent {
+    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 */
+    }
+    /**
+     * 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();
+    }
+    /**
+     * Update element styles
+     */
+    updateStyles() {
+        this.setCssProperty('--columnSpan', 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: "13.3.11", ngImport: i0, type: GraniteArrangeGridItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+GraniteArrangeGridItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GraniteArrangeGridItemComponent, selector: "granite-arrange-grid-item", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{--columnSpan: $default-column-span;display:grid;grid-column:span var(--columnSpan, 1)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteArrangeGridItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'granite-arrange-grid-item', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--columnSpan: $default-column-span;display:grid;grid-column:span var(--columnSpan, 1)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+var GraniteArrangeGridOrientation;
+(function (GraniteArrangeGridOrientation) {
+    GraniteArrangeGridOrientation["columns"] = "columns";
+    GraniteArrangeGridOrientation["rows"] = "rows";
+})(GraniteArrangeGridOrientation || (GraniteArrangeGridOrientation = {}));
+class GraniteArrangeGridComponent {
+    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 */
+    }
+    /**
+     * 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;
+    }
+    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: "13.3.11", ngImport: i0, type: GraniteArrangeGridComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+GraniteArrangeGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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);grid-column-gap:.5rem;column-gap:.5rem;grid-row-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: "13.3.11", 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);grid-column-gap:.5rem;column-gap:.5rem;grid-row-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: "13.3.11", ngImport: i0, type: GraniteArrangeGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GraniteArrangeGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteArrangeGridModule, declarations: [GraniteArrangeGridComponent, GraniteArrangeGridItemComponent], imports: [CommonModule], exports: [GraniteArrangeGridComponent, GraniteArrangeGridItemComponent] });
+GraniteArrangeGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteArrangeGridModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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: "13.3.11", ngImport: i0, type: GraniteGridItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+GraniteGridItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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: "13.3.11", 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 {
+    constructor(element) {
+        this.element = element;
+    }
+    /**
+     * 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;
+    }
+    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: "13.3.11", ngImport: i0, type: GraniteGridComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+GraniteGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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: "13.3.11", 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: "13.3.11", ngImport: i0, type: GraniteGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GraniteGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteGridModule, declarations: [GraniteGridComponent, GraniteGridItemComponent], imports: [CommonModule], exports: [GraniteGridComponent, GraniteGridItemComponent] });
+GraniteGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteGridModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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: "13.3.11", ngImport: i0, type: GraniteBadgeComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+GraniteBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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);padding:calc(var(--granite-spacing-m) * .3125);border-radius:.3125rem;padding-inline-start:calc(var(--granite-spacing-m) * .625);padding-inline-end:calc(var(--granite-spacing-m) * .625)}:host(.granite-badge-pill){border-radius:1.5625rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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);padding:calc(var(--granite-spacing-m) * .3125);border-radius:.3125rem;padding-inline-start:calc(var(--granite-spacing-m) * .625);padding-inline-end:calc(var(--granite-spacing-m) * .625)}:host(.granite-badge-pill){border-radius:1.5625rem}\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: "13.3.11", ngImport: i0, type: GraniteBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GraniteBadgeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteBadgeModule, declarations: [GraniteBadgeComponent], imports: [CommonModule], exports: [GraniteBadgeComponent] });
+GraniteBadgeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteBadgeModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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: "13.3.11", 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: "12.0.0", version: "13.3.11", 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-xs) / 2);font-size:1em;line-height:1em;position:relative;top:.1em}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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-xs) / 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: "13.3.11", 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: "12.0.0", version: "13.3.11", 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-s);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-mouse-focused,: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-l)}html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-xs)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-xs)}html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-xs)}[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-l)}: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-l)}: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-xs)}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-xs)}html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-xs)}[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"], components: [{ type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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-s);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-mouse-focused,: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-l)}html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-xs)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-xs)}html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-xs)}[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-l)}: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-l)}: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-xs)}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-xs)}html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-xs)}[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 {
+    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;
+    }
+    /** 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 },
+        });
+    }
+    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: "13.3.11", ngImport: i0, type: _MenuBaseComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+_MenuBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", 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: "13.3.11", 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 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: "13.3.11", ngImport: i0, type: GraniteMenuTouchTitleItemComponent, deps: [{ token: GRANITE_MENU_PANEL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+GraniteMenuTouchTitleItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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-s);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-mouse-focused,: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-l)}html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-xs)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-xs)}html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-xs)}[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-l)}: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-l)}: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-xs)}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-xs)}html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-xs)}[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"], components: [{ type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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-s);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-mouse-focused,: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-l)}html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-xs)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-xs)}html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-xs)}[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-l)}: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-l)}: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-xs)}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-xs)}html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-xs)}[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 GraniteMenuTouchCloseComponent {
+}
+GraniteMenuTouchCloseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteMenuTouchCloseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GraniteMenuTouchCloseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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-s);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-mouse-focused,: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-l)}html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-xs)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-xs)}html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-xs)}[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-l)}: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-l)}: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-xs)}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-xs)}html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-xs)}[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: "13.3.11", 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-s);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-mouse-focused,: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-l)}html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-xs)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-xs)}html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-xs)}[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-l)}: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-l)}: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-xs)}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-xs)}html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-xs)}[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 GraniteMenuComponent extends _MenuBaseComponent {
+}
+GraniteMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+GraniteMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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;max-height:calc(100vh - 2rem);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-xs)}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar-thumb{background-color:var(--granite-color-border-hard);border-radius:calc(var(--granite-spacing-m) * .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;max-height:calc(100vh - 2rem);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-xs)}.granite-menu.granite-device-output-touch.close{margin-inline-start:var(--granite-spacing-xs);margin-inline-end:var(--granite-spacing-xs);margin-block-end:var(--granite-spacing-xs)}.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;max-height:calc(100vh - 2rem);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-xs)}.close:not(:empty).close{margin-inline-start:var(--granite-spacing-xs);margin-inline-end:var(--granite-spacing-xs);margin-block-end:var(--granite-spacing-xs)}\n"], components: [{ type: GraniteMenuTouchTitleItemComponent, selector: "[graniteMenuTouchTitleItem]", exportAs: ["graniteMenuTouchTitleItem"] }, { type: GraniteMenuTouchCloseComponent, selector: "[graniteMenuTouchCloseItem]", exportAs: ["graniteMenuTouchCloseItem"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i2.AsyncPipe }, animations: [
+        graniteMenuDesktopAnimations.transformMenuDesktop,
+        graniteMenuTouchAnimations.transformMenuTouch,
+        graniteMenuTouchAnimations.transformCloseButton,
+    ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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;max-height:calc(100vh - 2rem);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-xs)}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar-thumb{background-color:var(--granite-color-border-hard);border-radius:calc(var(--granite-spacing-m) * .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;max-height:calc(100vh - 2rem);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-xs)}.granite-menu.granite-device-output-touch.close{margin-inline-start:var(--granite-spacing-xs);margin-inline-end:var(--granite-spacing-xs);margin-block-end:var(--granite-spacing-xs)}.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;max-height:calc(100vh - 2rem);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-xs)}.close:not(:empty).close{margin-inline-start:var(--granite-spacing-xs);margin-inline-end:var(--granite-spacing-xs);margin-block-end:var(--granite-spacing-xs)}\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;
+        /** 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 {
+            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')
+            .withPush(false);
+        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: "13.3.11", ngImport: i0, type: GraniteMenuTriggerForDirective, deps: [{ token: i1$1.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: "12.0.0", version: "13.3.11", type: GraniteMenuTriggerForDirective, selector: "[graniteMenuTriggerFor]", inputs: { menu: ["graniteMenuTriggerFor", "menu"] }, 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: "13.3.11", 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$1.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']
+            }] } });
+
+class GraniteDividerDirective {
+    constructor() {
+        this.dividerDirection = 'top';
+    }
+}
+GraniteDividerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteDividerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+GraniteDividerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", 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: "13.3.11", 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: "13.3.11", ngImport: i0, type: GraniteIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GraniteIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteIconModule, declarations: [GraniteIconComponent], exports: [GraniteIconComponent] });
+GraniteIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteIconModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteIconModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [GraniteIconComponent],
+                    exports: [GraniteIconComponent],
+                }]
+        }] });
+
+class GraniteTitleDirective {
+}
+GraniteTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+GraniteTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: GraniteTitleDirective, selector: "[graniteTitle]", host: { properties: { "class.granite-title": "true" } }, exportAs: ["graniteTitle"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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: "13.3.11", ngImport: i0, type: GraniteMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GraniteMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", 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: "13.3.11", ngImport: i0, type: GraniteMenuModule, imports: [[CommonModule, OverlayModule, PortalModule, GraniteIconModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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';
+        }
+        if ((changes.disabled || changes.readonly) &&
+            (this.disabled || this.readonly)) {
+            this._toggleSwitchDisabled = true;
+        }
+    }
+    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: "13.3.11", ngImport: i0, type: GraniteToggleSwitchComponent, deps: [{ token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component });
+GraniteToggleSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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)}: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}: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}: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-s)}.granite-toggle-switch-label{display:flex;align-items:center;width:max-content}.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}.granite-toggle-switch-text{padding-inline-start:var(--granite-spacing-s)}.granite-toggle-switch-text:empty{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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)}: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}: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}: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-s)}.granite-toggle-switch-label{display:flex;align-items:center;width:max-content}.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}.granite-toggle-switch-text{padding-inline-start:var(--granite-spacing-s)}.granite-toggle-switch-text:empty{display:none}\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: "13.3.11", ngImport: i0, type: GraniteToggleSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GraniteToggleSwitchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteToggleSwitchModule, declarations: [GraniteToggleSwitchComponent], exports: [GraniteToggleSwitchComponent] });
+GraniteToggleSwitchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteToggleSwitchModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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) &&
+            (this.disabled || this.readonly)) {
+            this._radioDisabled = true;
+        }
+    }
+    ngOnDestroy() {
+        if (this._removeUniqueSelectionListenerFn instanceof Function) {
+            this._removeUniqueSelectionListenerFn();
+        }
+    }
+    // Focuses the radio button.
+    focus(origin = 'program', options) {
+        this._focusMonitor.focusVia(this._getInputElement(), origin, options);
+    }
+    _radioClick(element) {
+        this.radioChange.emit(element === null || element === void 0 ? void 0 : element.value);
+    }
+    _radioChange() {
+        this.checked = this._getInputElement().checked;
+        // Notify all radio buttons with the same name to un-check
+        this._radioDispatcher.notify(this.id, this.name);
+    }
+    _onBlur() {
+        this.radioBlur.emit();
+    }
+    _getInputElement() {
+        return this._inputElement.nativeElement;
+    }
+}
+GraniteRadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteRadioButtonComponent, deps: [{ token: i1.FocusMonitor }, { token: i2$1.UniqueSelectionDispatcher }], target: i0.ɵɵFactoryTarget.Component });
+GraniteRadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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      (click)=\"_radioClick($event.target)\"\n      (change)=\"_radioChange()\"\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-label:hover{cursor:pointer}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .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-label:hover .granite-radio-button-inner-circle{background-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:focus-within{border:.0625rem solid var(--granite-color-focus)}: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-s)}:host(.granite-radio-button-checked) .granite-radio-button-inner-circle{visibility:visible;animation:growAnimation .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-s);color:var(--granite-color-text)}.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-xl)}: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 growAnimation{0%{transform:scale(0)}to{transform:scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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      (click)=\"_radioClick($event.target)\"\n      (change)=\"_radioChange()\"\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-label:hover{cursor:pointer}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .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-label:hover .granite-radio-button-inner-circle{background-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:focus-within{border:.0625rem solid var(--granite-color-focus)}: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-s)}:host(.granite-radio-button-checked) .granite-radio-button-inner-circle{visibility:visible;animation:growAnimation .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-s);color:var(--granite-color-text)}.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-xl)}: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 growAnimation{0%{transform:scale(0)}to{transform:scale(1)}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.FocusMonitor }, { type: i2$1.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: "13.3.11", ngImport: i0, type: GraniteRadioCheckboxBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+GraniteRadioCheckboxBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: GraniteRadioCheckboxBase, inputs: { layout: "layout", ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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: "13.3.11", ngImport: i0, type: GraniteRadioGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+GraniteRadioGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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: "13.3.11", 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: "13.3.11", ngImport: i0, type: GraniteRadioButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GraniteRadioButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteRadioButtonModule, declarations: [GraniteRadioButtonComponent, GraniteRadioGroupComponent], exports: [GraniteRadioButtonComponent, GraniteRadioGroupComponent] });
+GraniteRadioButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteRadioButtonModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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) &&
+            (this.disabled || this.readonly)) {
+            this._checkboxDisabled = true;
+        }
+    }
+    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: "13.3.11", ngImport: i0, type: GraniteCheckboxComponent, deps: [{ token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component });
+GraniteCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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-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(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-box{animation:fadeInAnimation .2s;animation-iteration-count:1}:host(:not(.granite-checkbox-checked)) .granite-checkbox-box{animation:fadeOutAnimation .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-s)}.granite-checkbox-label{display:flex;align-items:center;width:max-content;margin-inline-end:var(--granite-spacing-xl)}.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-xs);border-width:0 0 .125rem .125rem}.granite-checkbox-text{padding-inline-start:var(--granite-spacing-s)}.granite-checkbox-text:empty{display:none}@keyframes fadeInAnimation{0%{opacity:0}to{opacity:1}}@keyframes fadeOutAnimation{0%{opacity:1}to{opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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-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(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-box{animation:fadeInAnimation .2s;animation-iteration-count:1}:host(:not(.granite-checkbox-checked)) .granite-checkbox-box{animation:fadeOutAnimation .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-s)}.granite-checkbox-label{display:flex;align-items:center;width:max-content;margin-inline-end:var(--granite-spacing-xl)}.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-xs);border-width:0 0 .125rem .125rem}.granite-checkbox-text{padding-inline-start:var(--granite-spacing-s)}.granite-checkbox-text:empty{display:none}@keyframes fadeInAnimation{0%{opacity:0}to{opacity:1}}@keyframes fadeOutAnimation{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: "13.3.11", ngImport: i0, type: GraniteCheckboxGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+GraniteCheckboxGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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: "13.3.11", 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: "13.3.11", ngImport: i0, type: GraniteCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GraniteCheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteCheckboxModule, declarations: [GraniteCheckboxComponent, GraniteCheckboxGroupComponent], exports: [GraniteCheckboxComponent, GraniteCheckboxGroupComponent] });
+GraniteCheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteCheckboxModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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: "13.3.11", ngImport: i0, type: Derived, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    Derived.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: Derived, inputs: { disabled: "disabled" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+    i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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._getHostElement().classList.contains(ButtonSelectors.graniteFlatButton) ||
+                this._getHostElement().classList.contains(ButtonSelectors.graniteToolbarButton))) {
+            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: "13.3.11", ngImport: i0, type: GraniteButtonComponent, deps: [{ token: i1.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+GraniteButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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}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}a:host{outline:none}: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-s) var(--granite-spacing-s);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.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}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-button-toggled{background-color:none;color:none;outline:none}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);outline:none;outline-offset:-1px}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-button-toggled{background-color:none;color:none;outline:none}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);outline:none;outline-offset:-1px}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-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus);outline:none}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}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-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus);outline:none}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.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}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-button-toggled{background-color:none;color:none;outline:none}a:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text-link);outline:none;outline-offset:-1px}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-button-toggled{background-color:none;color:none;outline:none}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: "13.3.11", 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}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}a:host{outline:none}: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-s) var(--granite-spacing-s);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.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}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-button-toggled{background-color:none;color:none;outline:none}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);outline:none;outline-offset:-1px}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-button-toggled{background-color:none;color:none;outline:none}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);outline:none;outline-offset:-1px}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-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus);outline:none}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}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-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus);outline:none}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.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}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-button-toggled{background-color:none;color:none;outline:none}a:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text-link);outline:none;outline-offset:-1px}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-button-toggled{background-color:none;color:none;outline:none}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: "13.3.11", ngImport: i0, type: GraniteAnchorComponent, deps: [{ token: i1.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+GraniteAnchorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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}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}a:host{outline:none}: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-s) var(--granite-spacing-s);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.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}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-button-toggled{background-color:none;color:none;outline:none}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);outline:none;outline-offset:-1px}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-button-toggled{background-color:none;color:none;outline:none}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);outline:none;outline-offset:-1px}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-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus);outline:none}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}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-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus);outline:none}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.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}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-button-toggled{background-color:none;color:none;outline:none}a:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text-link);outline:none;outline-offset:-1px}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-button-toggled{background-color:none;color:none;outline:none}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: "13.3.11", 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}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}a:host{outline:none}: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-s) var(--granite-spacing-s);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.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}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-button-toggled{background-color:none;color:none;outline:none}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);outline:none;outline-offset:-1px}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-button-toggled{background-color:none;color:none;outline:none}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);outline:none;outline-offset:-1px}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-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus);outline:none}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}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-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus);outline:none}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.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}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-button-toggled{background-color:none;color:none;outline:none}a:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text-link);outline:none;outline-offset:-1px}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-button-toggled{background-color:none;color:none;outline:none}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: "13.3.11", ngImport: i0, type: GraniteButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GraniteButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteButtonModule, declarations: [GraniteButtonComponent, GraniteAnchorComponent], exports: [GraniteButtonComponent, GraniteAnchorComponent] });
+GraniteButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteButtonModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [GraniteButtonComponent, GraniteAnchorComponent],
+                    exports: [GraniteButtonComponent, GraniteAnchorComponent],
+                }]
+        }] });
+
+class GraniteTableColumnDirective {
+}
+GraniteTableColumnDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteTableColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+GraniteTableColumnDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: GraniteTableColumnDirective, selector: "granite-table-column", inputs: { name: "name", title: "title", staticType: "staticType" }, queries: [{ propertyName: "tableCellTemplateRef", first: true, predicate: ["graniteTableCellTemplate"], descendants: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteTableColumnDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'granite-table-column',
+                }]
+        }], propDecorators: { name: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], staticType: [{
+                type: Input
+            }], tableCellTemplateRef: [{
+                type: ContentChild,
+                args: ['graniteTableCellTemplate', { static: false }]
+            }] } });
+
+class TableConstants {
+}
+TableConstants.CELL_ID_PREFIX = 'granite-cell';
+
+class GraniteCell {
+}
+GraniteCell.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+GraniteCell.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: GraniteCell, inputs: { id: "id", column: "column" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteCell, decorators: [{
+            type: Directive
+        }], propDecorators: { id: [{
+                type: Input
+            }], column: [{
+                type: Input
+            }] } });
+
+class GraniteTableHeaderCellComponent extends GraniteCell {
+}
+GraniteTableHeaderCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteTableHeaderCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+GraniteTableHeaderCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GraniteTableHeaderCellComponent, selector: "cdk-header-cell[graniteTableHeaderCell]", usesInheritance: true, ngImport: i0, template: "<span class=\"granite-table-header-cell-title\">\n  <ng-content></ng-content>\n</span>\n", styles: [":host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.granite-table-header-cell-title{padding:var(--granite-spacing-s);height:inherit;font-size:var(--granite-font-size-micro);line-height:var(--granite-line-height-flowing);letter-spacing:.015em;font-weight:400;display:flex;justify-content:center;align-items:center;color:var(--granite-color-text-weak)}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteTableHeaderCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cdk-header-cell[graniteTableHeaderCell]', template: "<span class=\"granite-table-header-cell-title\">\n  <ng-content></ng-content>\n</span>\n", styles: [":host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.granite-table-header-cell-title{padding:var(--granite-spacing-s);height:inherit;font-size:var(--granite-font-size-micro);line-height:var(--granite-line-height-flowing);letter-spacing:.015em;font-weight:400;display:flex;justify-content:center;align-items:center;color:var(--granite-color-text-weak)}\n"] }]
+        }] });
+
+class GraniteTableDataCellComponent extends GraniteCell {
+}
+GraniteTableDataCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteTableDataCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+GraniteTableDataCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GraniteTableDataCellComponent, selector: "cdk-cell[graniteTableDataCell]", inputs: { value: "value", staticType: "staticType", rowIndex: "rowIndex", columnIndex: "columnIndex", tableCellTemplateRef: "tableCellTemplateRef", row: "row" }, usesInheritance: true, ngImport: i0, template: "<span class=\"granite-table-data-cell-static-container\">\n  <ng-template\n    [ngTemplateOutlet]=\"tableCellTemplateRef || defaultTableCellTemplate\"\n    [ngTemplateOutletContext]=\"{\n      data: value,\n      rowIndex: rowIndex,\n      columnIndex: columnIndex,\n      column: column,\n      row: row\n    }\"\n  ></ng-template>\n</span>\n\n<ng-template #defaultTableCellTemplate>\n  <ng-container [ngSwitch]=\"staticType\">\n    <ng-container *ngSwitchCase=\"'badge'\">\n      <granite-badge>{{ value }}</granite-badge>\n    </ng-container>\n    <ng-container *ngSwitchDefault>{{ value }}</ng-container>\n  </ng-container>\n</ng-template>\n", styles: [":host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.granite-table-data-cell-static-container{padding:var(--granite-spacing-s);height:inherit;font-size:var(--granite-font-size-body-small);line-height:var(--granite-line-height-regular);display:flex;justify-content:center;align-items:center;color:var(--granite-color-text)}\n"], components: [{ type: GraniteBadgeComponent, selector: "granite-badge", inputs: ["backgroundColor", "color", "pill"], exportAs: ["graniteBadge"] }], directives: [{ type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteTableDataCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cdk-cell[graniteTableDataCell]', template: "<span class=\"granite-table-data-cell-static-container\">\n  <ng-template\n    [ngTemplateOutlet]=\"tableCellTemplateRef || defaultTableCellTemplate\"\n    [ngTemplateOutletContext]=\"{\n      data: value,\n      rowIndex: rowIndex,\n      columnIndex: columnIndex,\n      column: column,\n      row: row\n    }\"\n  ></ng-template>\n</span>\n\n<ng-template #defaultTableCellTemplate>\n  <ng-container [ngSwitch]=\"staticType\">\n    <ng-container *ngSwitchCase=\"'badge'\">\n      <granite-badge>{{ value }}</granite-badge>\n    </ng-container>\n    <ng-container *ngSwitchDefault>{{ value }}</ng-container>\n  </ng-container>\n</ng-template>\n", styles: [":host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.granite-table-data-cell-static-container{padding:var(--granite-spacing-s);height:inherit;font-size:var(--granite-font-size-body-small);line-height:var(--granite-line-height-regular);display:flex;justify-content:center;align-items:center;color:var(--granite-color-text)}\n"] }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], staticType: [{
+                type: Input
+            }], rowIndex: [{
+                type: Input
+            }], columnIndex: [{
+                type: Input
+            }], tableCellTemplateRef: [{
+                type: Input
+            }], row: [{
+                type: Input
+            }] } });
+
+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: "13.3.11", ngImport: i0, type: GraniteTitlePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+GraniteTitlePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteTitlePipe, name: "graniteTitle" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteTitlePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'graniteTitle',
+                }]
+        }] });
+
+class GraniteTableComponent {
+    constructor() {
+        this.ariaLabel = null;
+        this.cellIdPrefix = TableConstants.CELL_ID_PREFIX;
+    }
+    ngAfterContentInit() {
+        this.columns = this.tableColumnsComponent.toArray();
+        this.renderedColumns = this.columns.map((column) => column.name);
+    }
+}
+GraniteTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GraniteTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GraniteTableComponent, selector: "granite-table", inputs: { dataSource: "dataSource", trackBy: "trackBy", ariaLabel: ["aria-label", "ariaLabel"] }, queries: [{ propertyName: "tableColumnsComponent", predicate: GraniteTableColumnDirective }], ngImport: i0, template: "<cdk-table\n  [dataSource]=\"dataSource\"\n  multiTemplateDataRows\n  [trackBy]=\"trackBy\"\n  [attr.aria-label]=\"ariaLabel\"\n>\n  <ng-container\n    *ngFor=\"let column of columns; index as columnI\"\n    [cdkColumnDef]=\"column.name\"\n  >\n    <!-- Cell Header -->\n    <cdk-header-cell *cdkHeaderCellDef graniteTableHeaderCell>\n      {{ (column.title ? column.title : column.name) | graniteTitle }}\n    </cdk-header-cell>\n\n    <!-- Cell Data -->\n    <cdk-cell\n      graniteTableDataCell\n      *cdkCellDef=\"let row; let rowI = dataIndex\"\n      [id]=\"cellIdPrefix + '-' + rowI + '-' + columnI\"\n      [value]=\"row[column.name]\"\n      [rowIndex]=\"rowI\"\n      [columnIndex]=\"columnI\"\n      [staticType]=\"column.staticType\"\n      [column]=\"column\"\n      [tableCellTemplateRef]=\"column.tableCellTemplateRef\"\n      [row]=\"row\"\n    ></cdk-cell>\n  </ng-container>\n\n  <cdk-header-row *cdkHeaderRowDef=\"renderedColumns\"></cdk-header-row>\n  <cdk-row\n    *cdkRowDef=\"let row; let rowI = dataIndex; columns: renderedColumns\"\n    [attr.aria-rowindex]=\"rowI + 1\"\n  ></cdk-row>\n</cdk-table>\n", styles: [":host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}cdk-table{display:flex;flex-direction:column;background-color:var(--granite-color-background-variant)}cdk-header-row,cdk-row{display:flex}cdk-header-cell,cdk-cell{flex:1}cdk-header-cell,cdk-cell{height:2.5rem}cdk-cell{border-top:1px solid var(--granite-color-border-soft)}\n"], components: [{ type: i1$2.CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { type: GraniteTableHeaderCellComponent, selector: "cdk-header-cell[graniteTableHeaderCell]" }, { type: GraniteTableDataCellComponent, selector: "cdk-cell[graniteTableDataCell]", inputs: ["value", "staticType", "rowIndex", "columnIndex", "tableCellTemplateRef", "row"] }, { type: i1$2.CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { type: i1$2.CdkRow, selector: "cdk-row, tr[cdk-row]" }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$2.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["sticky", "cdkColumnDef", "stickyEnd"] }, { type: i1$2.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { type: i1$2.CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { type: i1$2.CdkCellDef, selector: "[cdkCellDef]" }, { type: i1$2.CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { type: i1$2.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { type: i1$2.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }], pipes: { "graniteTitle": GraniteTitlePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'granite-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cdk-table\n  [dataSource]=\"dataSource\"\n  multiTemplateDataRows\n  [trackBy]=\"trackBy\"\n  [attr.aria-label]=\"ariaLabel\"\n>\n  <ng-container\n    *ngFor=\"let column of columns; index as columnI\"\n    [cdkColumnDef]=\"column.name\"\n  >\n    <!-- Cell Header -->\n    <cdk-header-cell *cdkHeaderCellDef graniteTableHeaderCell>\n      {{ (column.title ? column.title : column.name) | graniteTitle }}\n    </cdk-header-cell>\n\n    <!-- Cell Data -->\n    <cdk-cell\n      graniteTableDataCell\n      *cdkCellDef=\"let row; let rowI = dataIndex\"\n      [id]=\"cellIdPrefix + '-' + rowI + '-' + columnI\"\n      [value]=\"row[column.name]\"\n      [rowIndex]=\"rowI\"\n      [columnIndex]=\"columnI\"\n      [staticType]=\"column.staticType\"\n      [column]=\"column\"\n      [tableCellTemplateRef]=\"column.tableCellTemplateRef\"\n      [row]=\"row\"\n    ></cdk-cell>\n  </ng-container>\n\n  <cdk-header-row *cdkHeaderRowDef=\"renderedColumns\"></cdk-header-row>\n  <cdk-row\n    *cdkRowDef=\"let row; let rowI = dataIndex; columns: renderedColumns\"\n    [attr.aria-rowindex]=\"rowI + 1\"\n  ></cdk-row>\n</cdk-table>\n", styles: [":host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}cdk-table{display:flex;flex-direction:column;background-color:var(--granite-color-background-variant)}cdk-header-row,cdk-row{display:flex}cdk-header-cell,cdk-cell{flex:1}cdk-header-cell,cdk-cell{height:2.5rem}cdk-cell{border-top:1px solid var(--granite-color-border-soft)}\n"] }]
+        }], propDecorators: { dataSource: [{
+                type: Input
+            }], trackBy: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input,
+                args: ['aria-label']
+            }], tableColumnsComponent: [{
+                type: ContentChildren,
+                args: [GraniteTableColumnDirective]
+            }] } });
+
+class PurePipesModule {
+}
+PurePipesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PurePipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PurePipesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PurePipesModule, declarations: [GraniteTitlePipe], exports: [GraniteTitlePipe] });
+PurePipesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PurePipesModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PurePipesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [GraniteTitlePipe],
+                    declarations: [GraniteTitlePipe],
+                }]
+        }] });
+
+class GraniteTableModule {
+}
+GraniteTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GraniteTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteTableModule, declarations: [GraniteTableComponent,
+        GraniteTableDataCellComponent,
+        GraniteTableHeaderCellComponent,
+        GraniteTableColumnDirective], imports: [CommonModule, CdkTableModule, GraniteBadgeModule, PurePipesModule], exports: [GraniteTableComponent, GraniteTableColumnDirective] });
+GraniteTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteTableModule, imports: [[CommonModule, CdkTableModule, GraniteBadgeModule, PurePipesModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteTableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        GraniteTableComponent,
+                        GraniteTableDataCellComponent,
+                        GraniteTableHeaderCellComponent,
+                        GraniteTableColumnDirective,
+                    ],
+                    imports: [CommonModule, CdkTableModule, GraniteBadgeModule, PurePipesModule],
+                    exports: [GraniteTableComponent, GraniteTableColumnDirective],
+                }]
+        }] });
+
+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: "13.3.11", ngImport: i0, type: GraniteInputFieldComponent, deps: [{ token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component });
+GraniteInputFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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-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-s);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: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::placeholder{color:var(--granite-color-text-hint)}.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 .granite-input-hover-bar{height:.0625rem;background-color:var(--granite-color-border-hard);position:absolute;width:inherit;bottom:0px}.granite-input-container .granite-input-top-row .granite-input-hover-bar.granite-input-invalid{background-color:var(--granite-color-signal-failure)}.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-s);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-s);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"], components: [{ type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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-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-s);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: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::placeholder{color:var(--granite-color-text-hint)}.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 .granite-input-hover-bar{height:.0625rem;background-color:var(--granite-color-border-hard);position:absolute;width:inherit;bottom:0px}.granite-input-container .granite-input-top-row .granite-input-hover-bar.granite-input-invalid{background-color:var(--granite-color-signal-failure)}.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-s);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-s);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: "13.3.11", ngImport: i0, type: GraniteInputFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GraniteInputFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteInputFieldModule, declarations: [GraniteInputFieldComponent], imports: [CommonModule, GraniteIconModule, GraniteButtonModule], exports: [GraniteInputFieldComponent] });
+GraniteInputFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteInputFieldModule, imports: [[CommonModule, GraniteIconModule, GraniteButtonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteInputFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, GraniteIconModule, GraniteButtonModule],
+                    declarations: [GraniteInputFieldComponent],
+                    exports: [GraniteInputFieldComponent],
+                }]
+        }] });
+
+/**
+ * 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: "13.3.11", ngImport: i0, type: ClientOutputDesktopDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ClientOutputDesktopDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ClientOutputDesktopDirective, selector: "[graniteClientOutputDesktop]", providers: [
+        {
+            provide: GRANITE_CLIENT_OUTPUT,
+            useValue: deviceDesktop.output,
+        },
+    ], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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: "13.3.11", ngImport: i0, type: ClientOutputTouchDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ClientOutputTouchDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ClientOutputTouchDirective, selector: "[graniteClientOutputTouch]", providers: [
+        {
+            provide: GRANITE_CLIENT_OUTPUT,
+            useValue: deviceTouch.output,
+        },
+    ], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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: "13.3.11", ngImport: i0, type: ClientInputDesktopDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ClientInputDesktopDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ClientInputDesktopDirective, selector: "[graniteClientInputDesktop]", providers: [
+        {
+            provide: GRANITE_CLIENT_INPUT,
+            useValue: deviceDesktop.input,
+        },
+    ], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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: "13.3.11", ngImport: i0, type: ClientInputTouchDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ClientInputTouchDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ClientInputTouchDirective, selector: "[graniteClientInputTouch]", providers: [
+        {
+            provide: GRANITE_CLIENT_INPUT,
+            useValue: deviceTouch.input,
+        },
+    ], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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: "13.3.11", ngImport: i0, type: GraniteCoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GraniteCoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteCoreModule, declarations: [ClientOutputDesktopDirective,
+        ClientOutputTouchDirective,
+        ClientInputDesktopDirective,
+        ClientInputTouchDirective], exports: [ClientOutputDesktopDirective,
+        ClientOutputTouchDirective,
+        ClientInputDesktopDirective,
+        ClientInputTouchDirective] });
+GraniteCoreModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteCoreModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteCoreModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ClientOutputDesktopDirective,
+                        ClientOutputTouchDirective,
+                        ClientInputDesktopDirective,
+                        ClientInputTouchDirective,
+                    ],
+                    exports: [
+                        ClientOutputDesktopDirective,
+                        ClientOutputTouchDirective,
+                        ClientInputDesktopDirective,
+                        ClientInputTouchDirective,
+                    ],
+                }]
+        }] });
+
+/*
+ * 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, GraniteCoreModule, GraniteDividerDirective, GraniteGridComponent, GraniteGridItemComponent, GraniteGridModule, GraniteIconComponent, GraniteIconModule, GraniteInputFieldComponent, GraniteInputFieldModule, GraniteMenuComponent, GraniteMenuHarness, GraniteMenuItemComponent, GraniteMenuItemHarness, GraniteMenuModule, GraniteMenuTouchCloseComponent, GraniteMenuTouchTitleItemComponent, GraniteMenuTriggerForDirective, GraniteRadioButtonComponent, GraniteRadioButtonModule, GraniteRadioGroupComponent, GraniteTableColumnDirective, GraniteTableComponent, GraniteTableModule, GraniteTitleDirective, GraniteToggleSwitchComponent, GraniteToggleSwitchModule, deviceDesktop, deviceTouch, disabledMixin, graniteMenuDesktopAnimations, graniteMenuTouchAnimations };
+//# sourceMappingURL=ifsworld-granite-components.mjs.map