@ifsworld/granite-components 4.4.0 → 5.0.1

package/fesm2015/ifsworld-granite-components.js

@@ -1,2992 +0,0 @@
-import { Component, ChangeDetectionStrategy, ElementRef, Input, HostBinding, ContentChildren, NgModule, Renderer2, InjectionToken, Inject, Optional, EventEmitter, QueryList, Directive, ChangeDetectorRef, ViewChild, TemplateRef, Output, ViewContainerRef, Self, Attribute, HostListener, ContentChild, Pipe } from '@angular/core';
-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 { OverlayConfig, Overlay, OverlayModule } from '@angular/cdk/overlay';
-import { TemplatePortal, PortalModule } from '@angular/cdk/portal';
-import { FocusMonitor, FocusKeyManager, isFakeMousedownFromScreenReader } from '@angular/cdk/a11y';
-import { hasModifierKey } from '@angular/cdk/keycodes';
-import { trigger, state, style, transition, group, query, animate, sequence } from '@angular/animations';
-import { Directionality } from '@angular/cdk/bidi';
-import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
-import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
-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.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)}"]
-            },] }
-];
-GraniteArrangeGridItemComponent.ctorParameters = () => [
-    { type: 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.decorators = [
-    { type: Component, args: [{
-                selector: 'granite-arrange-grid',
-                template: "<ng-content select=\"granite-arrange-grid-item\"></ng-content>\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: ["@media only screen and (min-width:960px){:host{--cols:1;--rows:1;display:grid;grid-template-columns:repeat(var(--cols,1),1fr);-moz-column-gap:.5rem;column-gap:.5rem;row-gap:.5rem}:host.row-orientation{grid-template-columns:auto;grid-template-rows:repeat(calc(var(--rows, 1) - 1),-webkit-max-content);grid-template-rows:repeat(calc(var(--rows, 1) - 1),max-content)}}"]
-            },] }
-];
-GraniteArrangeGridComponent.ctorParameters = () => [
-    { type: ElementRef }
-];
-GraniteArrangeGridComponent.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.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.decorators = [
-    { type: Component, args: [{
-                selector: 'granite-grid-item',
-                template: '<ng-content></ng-content>',
-                changeDetection: ChangeDetectionStrategy.OnPush
-            },] }
-];
-GraniteGridItemComponent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: Renderer2 }
-];
-GraniteGridItemComponent.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.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)}"]
-            },] }
-];
-GraniteGridComponent.ctorParameters = () => [
-    { type: ElementRef }
-];
-GraniteGridComponent.propDecorators = {
-    cols: [{ type: Input }],
-    rows: [{ type: Input }]
-};
-
-class GraniteGridModule {
-}
-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.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;-webkit-padding-start:calc(var(--granite-spacing-m) * .625);padding-inline-start:calc(var(--granite-spacing-m) * .625);-webkit-padding-end:calc(var(--granite-spacing-m) * .625);padding-inline-end:calc(var(--granite-spacing-m) * .625)}:host(.granite-badge-pill){border-radius:1.5625rem}"]
-            },] }
-];
-GraniteBadgeComponent.ctorParameters = () => [
-    { type: ElementRef }
-];
-GraniteBadgeComponent.propDecorators = {
-    backgroundColor: [{ type: Input }],
-    color: [{ type: Input }],
-    pill: [{ type: Input }]
-};
-
-class GraniteBadgeModule {
-}
-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';
-
-/**
- * Injection token used to provide the parent menu to menu-specific components.
- * @docs-private
- */
-const GRANITE_MENU_PANEL = new InjectionToken('GRANITE_MENU_PANEL');
-
-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.decorators = [
-    { type: Component, args: [{
-                // eslint-disable-next-line @angular-eslint/component-selector
-                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;-moz-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{-moz-user-select:none;-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-keyboard-focused,:host.cdk-program-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{-webkit-padding-end:var(--granite-spacing-l);padding-inline-end:var(--granite-spacing-l)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-xs)}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left,[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{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)}}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-xs)}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right,[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}:host:disabled:not(.granite-menu-item-title){opacity:.4;cursor:default}"]
-            },] }
-];
-GraniteMenuItemComponent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: FocusMonitor },
-    { type: undefined, decorators: [{ type: Inject, args: [GRANITE_MENU_PANEL,] }, { type: Optional }] }
-];
-GraniteMenuItemComponent.propDecorators = {
-    role: [{ type: Input }]
-};
-
-/**
- * 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),
-        ])),
-    ]),
-};
-
-/**
- * @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>`);
-}
-
-/** 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.decorators = [
-    { type: Directive }
-];
-_MenuBaseComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
-];
-_MenuBaseComponent.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 GraniteMenuComponent extends _MenuBaseComponent {
-}
-GraniteMenuComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'granite-menu',
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                exportAs: 'graniteMenu',
-                animations: [
-                    graniteMenuDesktopAnimations.transformMenuDesktop,
-                    graniteMenuTouchAnimations.transformMenuTouch,
-                    graniteMenuTouchAnimations.transformCloseButton,
-                ],
-                providers: [
-                    { provide: GRANITE_MENU_PANEL, useExisting: GraniteMenuComponent },
-                ],
-                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;-moz-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;-moz-user-select:none;user-select:none;filter:drop-shadow(var(--granite-shadow-l));border-radius:.25rem;max-height:calc(100% - ($granite-base-rem * 7))}.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{-webkit-margin-start:var(--granite-spacing-xs);margin-inline-start:var(--granite-spacing-xs);-webkit-margin-end:var(--granite-spacing-xs);margin-inline-end:var(--granite-spacing-xs);-webkit-margin-after:var(--granite-spacing-xs);margin-block-end:var(--granite-spacing-xs)}.granite-menu.granite-device-output-touch .header-container{position:-webkit-sticky;position:sticky;top:0;background-color:var(--granite-color-background-variant);z-index:1}.granite-menu.granite-device-output-touch .footer-container{position:-webkit-sticky;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;-moz-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{-webkit-margin-start:var(--granite-spacing-xs);margin-inline-start:var(--granite-spacing-xs);-webkit-margin-end:var(--granite-spacing-xs);margin-inline-end:var(--granite-spacing-xs);-webkit-margin-after:var(--granite-spacing-xs);margin-block-end:var(--granite-spacing-xs)}"]
-            },] }
-];
-
-/**
- * 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.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)',
-                },
-            },] }
-];
-GraniteMenuTriggerForDirective.ctorParameters = () => [
-    { type: Overlay },
-    { type: ElementRef },
-    { type: 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: Directionality, decorators: [{ type: Optional }] },
-    { type: FocusMonitor },
-    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
-];
-GraniteMenuTriggerForDirective.propDecorators = {
-    menu: [{ type: Input, args: ['graniteMenuTriggerFor',] }]
-};
-
-class GraniteMenuTouchCloseComponent {
-}
-GraniteMenuTouchCloseComponent.decorators = [
-    { type: Component, args: [{
-                // eslint-disable-next-line @angular-eslint/component-selector
-                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;-moz-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{-moz-user-select:none;-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-keyboard-focused,:host.cdk-program-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{-webkit-padding-end:var(--granite-spacing-l);padding-inline-end:var(--granite-spacing-l)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-xs)}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left,[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{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)}}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-xs)}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right,[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}:host:disabled:not(.granite-menu-item-title){opacity:.4;cursor:default}"]
-            },] }
-];
-
-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.decorators = [
-    { type: Component, args: [{
-                // eslint-disable-next-line @angular-eslint/component-selector
-                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;-moz-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{-moz-user-select:none;-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-keyboard-focused,:host.cdk-program-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{-webkit-padding-end:var(--granite-spacing-l);padding-inline-end:var(--granite-spacing-l)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-xs)}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left,[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{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)}}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-xs)}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right,[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}:host:disabled:not(.granite-menu-item-title){opacity:.4;cursor:default}"]
-            },] }
-];
-GraniteMenuTouchTitleItemComponent.ctorParameters = () => [
-    { type: _MenuBaseComponent, decorators: [{ type: Inject, args: [GRANITE_MENU_PANEL,] }, { type: Optional }] }
-];
-
-class GraniteDividerDirective {
-    constructor() {
-        this.dividerDirection = 'top';
-    }
-}
-GraniteDividerDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[graniteDivider]',
-                exportAs: 'graniteDivider',
-                host: {
-                    '[class.granite-divider-top]': 'dividerDirection === "top"',
-                    '[class.granite-divider-bottom]': 'dividerDirection === "bottom"',
-                },
-            },] }
-];
-GraniteDividerDirective.propDecorators = {
-    dividerDirection: [{ type: Input }]
-};
-
-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.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}"]
-            },] }
-];
-GraniteIconComponent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: Renderer2 },
-    { type: String, decorators: [{ type: Attribute, args: ['aria-hidden',] }] }
-];
-GraniteIconComponent.propDecorators = {
-    fontIcon: [{ type: Input }]
-};
-
-class GraniteIconModule {
-}
-GraniteIconModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [GraniteIconComponent],
-                exports: [GraniteIconComponent],
-            },] }
-];
-
-class GraniteTitleDirective {
-}
-GraniteTitleDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[graniteTitle]',
-                exportAs: 'graniteTitle',
-                host: {
-                    '[class.granite-title]': 'true',
-                },
-            },] }
-];
-
-class GraniteMenuModule {
-}
-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.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',
-                },
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                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}:host{box-sizing:border-box}:host *,:host :after,:host :before{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)}:host-context([dir=ltr]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb,html[dir=ltr] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}:host-context([dir=rtl]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb,html[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) *,: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{-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--granite-spacing-s);padding-inline-end:var(--granite-spacing-s)}.granite-toggle-switch-label{display:flex;align-items:center;width:-webkit-max-content;width:-moz-max-content;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}:host-context([dir=ltr]) .granite-toggle-switch-thumb,html[dir=ltr] .granite-toggle-switch-thumb{float:left}:host-context([dir=rtl]) .granite-toggle-switch-thumb,html[dir=rtl] .granite-toggle-switch-thumb{float:right}.granite-toggle-switch-text{-webkit-padding-start:var(--granite-spacing-s);padding-inline-start:var(--granite-spacing-s)}.granite-toggle-switch-text:empty{display:none}"]
-            },] }
-];
-GraniteToggleSwitchComponent.ctorParameters = () => [
-    { type: FocusMonitor }
-];
-GraniteToggleSwitchComponent.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.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._removeUniqueSelectionListener = () => {
-            // Function used to deregister listener
-        };
-        this._removeUniqueSelectionListener = _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() {
-        this._removeUniqueSelectionListener();
-    }
-    // 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.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',
-                },
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                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}: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{-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--granite-spacing-s);padding-inline-end:var(--granite-spacing-s)}:host(.granite-radio-button-checked) .granite-radio-button-inner-circle{visibility:visible;-webkit-animation:growAnimation .1s;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{-webkit-padding-start:var(--granite-spacing-s);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:-webkit-max-content;width:-moz-max-content;width:max-content;-webkit-margin-end:var(--granite-spacing-xl);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}@-webkit-keyframes growAnimation{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes growAnimation{0%{transform:scale(0)}to{transform:scale(1)}}"]
-            },] }
-];
-GraniteRadioButtonComponent.ctorParameters = () => [
-    { type: FocusMonitor },
-    { type: UniqueSelectionDispatcher }
-];
-GraniteRadioButtonComponent.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.decorators = [
-    { type: Directive }
-];
-GraniteRadioCheckboxBase.propDecorators = {
-    layout: [{ type: Input }],
-    ariaLabelledby: [{ type: Input, args: ['aria-labelledby',] }]
-};
-
-class GraniteRadioGroupComponent extends GraniteRadioCheckboxBase {
-}
-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}"]
-            },] }
-];
-
-class GraniteRadioButtonModule {
-}
-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.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',
-                },
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                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}:host{box-sizing:border-box}:host *,:host :after,:host :before{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{-webkit-animation:fadeInAnimation .2s;animation:fadeInAnimation .2s;-webkit-animation-iteration-count:1;animation-iteration-count:1}:host(:not(.granite-checkbox-checked)) .granite-checkbox-box{-webkit-animation:fadeOutAnimation .2s;animation:fadeOutAnimation .2s;-webkit-animation-iteration-count:1;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) *,: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{-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--granite-spacing-s);padding-inline-end:var(--granite-spacing-s)}.granite-checkbox-label{display:flex;align-items:center;width:-webkit-max-content;width:-moz-max-content;width:max-content;-webkit-margin-end:var(--granite-spacing-xl);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{-webkit-padding-start:var(--granite-spacing-s);padding-inline-start:var(--granite-spacing-s)}.granite-checkbox-text:empty{display:none}@-webkit-keyframes fadeInAnimation{0%{opacity:0}to{opacity:1}}@keyframes fadeInAnimation{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeOutAnimation{0%{opacity:1}to{opacity:0}}@keyframes fadeOutAnimation{0%{opacity:1}to{opacity:0}}"]
-            },] }
-];
-GraniteCheckboxComponent.ctorParameters = () => [
-    { type: FocusMonitor }
-];
-GraniteCheckboxComponent.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.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}"]
-            },] }
-];
-
-class GraniteCheckboxModule {
-}
-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.decorators = [
-        { type: Directive }
-    ];
-    Derived.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.decorators = [
-    { type: Component, args: [{
-                // eslint-disable-next-line @angular-eslint/component-selector
-                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 :after,:host :before{box-sizing:inherit;cursor:pointer}button:host{background-color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance: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,button: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:-webkit-fit-content;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;-moz-user-select:none;-webkit-user-select:none;user-select:none}"]
-            },] }
-];
-GraniteButtonComponent.ctorParameters = () => [
-    { type: FocusMonitor },
-    { type: ElementRef }
-];
-GraniteButtonComponent.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.decorators = [
-    { type: Component, args: [{
-                // eslint-disable-next-line @angular-eslint/component-selector
-                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 :after,:host :before{box-sizing:inherit;cursor:pointer}button:host{background-color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance: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,button: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:-webkit-fit-content;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;-moz-user-select:none;-webkit-user-select:none;user-select:none}"]
-            },] }
-];
-GraniteAnchorComponent.ctorParameters = () => [
-    { type: FocusMonitor },
-    { type: ElementRef }
-];
-GraniteAnchorComponent.propDecorators = {
-    _anchorClick: [{ type: HostListener, args: ['click', ['$event'],] }]
-};
-
-class GraniteButtonModule {
-}
-GraniteButtonModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [GraniteButtonComponent, GraniteAnchorComponent],
-                exports: [GraniteButtonComponent, GraniteAnchorComponent],
-            },] }
-];
-
-class GraniteTableColumnDirective {
-}
-GraniteTableColumnDirective.decorators = [
-    { type: Directive, args: [{
-                // eslint-disable-next-line @angular-eslint/directive-selector
-                selector: 'granite-table-column',
-            },] }
-];
-GraniteTableColumnDirective.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 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.decorators = [
-    { type: Component, args: [{
-                selector: 'granite-table',
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit}cdk-table{flex-direction:column;background-color:var(--granite-color-background-variant)}cdk-header-row,cdk-row,cdk-table{display:flex}cdk-cell,cdk-header-cell{flex:1;height:2.5rem}cdk-cell{border-top:1px solid var(--granite-color-border-soft)}"]
-            },] }
-];
-GraniteTableComponent.propDecorators = {
-    dataSource: [{ type: Input }],
-    trackBy: [{ type: Input }],
-    ariaLabel: [{ type: Input, args: ['aria-label',] }],
-    tableColumnsComponent: [{ type: ContentChildren, args: [GraniteTableColumnDirective,] }]
-};
-
-class GraniteCell {
-}
-GraniteCell.decorators = [
-    { type: Directive }
-];
-GraniteCell.propDecorators = {
-    id: [{ type: Input }],
-    column: [{ type: Input }]
-};
-
-class GraniteTableDataCellComponent extends GraniteCell {
-}
-GraniteTableDataCellComponent.decorators = [
-    { type: Component, args: [{
-                // eslint-disable-next-line @angular-eslint/component-selector
-                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 :after,:host :before{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)}"]
-            },] }
-];
-GraniteTableDataCellComponent.propDecorators = {
-    value: [{ type: Input }],
-    staticType: [{ type: Input }],
-    rowIndex: [{ type: Input }],
-    columnIndex: [{ type: Input }],
-    tableCellTemplateRef: [{ type: Input }],
-    row: [{ type: Input }]
-};
-
-class GraniteTableHeaderCellComponent extends GraniteCell {
-}
-GraniteTableHeaderCellComponent.decorators = [
-    { type: Component, args: [{
-                // eslint-disable-next-line @angular-eslint/component-selector
-                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 :after,:host :before{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)}"]
-            },] }
-];
-
-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.decorators = [
-    { type: Pipe, args: [{
-                name: 'graniteTitle',
-            },] }
-];
-
-class PurePipesModule {
-}
-PurePipesModule.decorators = [
-    { type: NgModule, args: [{
-                exports: [GraniteTitlePipe],
-                declarations: [GraniteTitlePipe],
-            },] }
-];
-
-class GraniteTableModule {
-}
-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.decorators = [
-    { type: Component, args: [{
-                selector: 'granite-input-field',
-                exportAs: 'graniteInputField',
-                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",
-                host: {
-                    class: 'granite-input-field',
-                },
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{transition:all .2s ease-out;width:14.5rem;box-sizing:border-box}:host *,:host :after,:host :before{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;-moz-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::-moz-placeholder{color:var(--granite-color-text-weak)}.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:-moz-read-only{background-color:transparent}.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::-moz-placeholder{color:var(--granite-color-text-hint)}.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::-moz-placeholder{color:var(--granite-color-text)}.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::-moz-placeholder{color:transparent}.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:0}.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;-moz-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:-webkit-max-content;width:-moz-max-content;width:max-content;height:-webkit-max-content;height:-moz-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:-webkit-fit-content;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}"]
-            },] }
-];
-GraniteInputFieldComponent.ctorParameters = () => [
-    { type: FocusMonitor }
-];
-GraniteInputFieldComponent.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.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, GraniteIconModule, GraniteButtonModule],
-                declarations: [GraniteInputFieldComponent],
-                exports: [GraniteInputFieldComponent],
-            },] }
-];
-
-const ɵ0 = deviceDesktop.output;
-/**
- * Directive used to tell components and their sub components that client output
- * should be adapted for desktop devices like personal computers.
- */
-class ClientOutputDesktopDirective {
-}
-ClientOutputDesktopDirective.decorators = [
-    { type: Directive, args: [{
-                selector: `[graniteClientOutputDesktop]`,
-                providers: [
-                    {
-                        provide: GRANITE_CLIENT_OUTPUT,
-                        useValue: ɵ0,
-                    },
-                ],
-            },] }
-];
-
-const ɵ0$1 = deviceTouch.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.decorators = [
-    { type: Directive, args: [{
-                selector: `[graniteClientOutputTouch]`,
-                providers: [
-                    {
-                        provide: GRANITE_CLIENT_OUTPUT,
-                        useValue: ɵ0$1,
-                    },
-                ],
-            },] }
-];
-
-const ɵ0$2 = deviceDesktop.input;
-/**
- * Directive used to tell components and their sub components that client input
- * should be adapted for desktop devices, like personal computers.
- */
-class ClientInputDesktopDirective {
-}
-ClientInputDesktopDirective.decorators = [
-    { type: Directive, args: [{
-                selector: `[graniteClientInputDesktop]`,
-                providers: [
-                    {
-                        provide: GRANITE_CLIENT_INPUT,
-                        useValue: ɵ0$2,
-                    },
-                ],
-            },] }
-];
-
-const ɵ0$3 = deviceTouch.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.decorators = [
-    { type: Directive, args: [{
-                selector: `[graniteClientInputTouch]`,
-                providers: [
-                    {
-                        provide: GRANITE_CLIENT_INPUT,
-                        useValue: ɵ0$3,
-                    },
-                ],
-            },] }
-];
-
-// TODO: Move client devices into a separate module
-class GraniteCoreModule {
-}
-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, _MenuBaseComponent, deviceDesktop, deviceTouch, disabledMixin, graniteMenuDesktopAnimations, graniteMenuTouchAnimations, ɵ0$1 as ɵ0, GRANITE_MENU_PANEL as ɵa, getEaseOutSteep as ɵc, getEaseLinear as ɵd, GraniteRadioCheckboxBase as ɵe, GraniteTableDataCellComponent as ɵf, GraniteCell as ɵg, GraniteTableHeaderCellComponent as ɵh, PurePipesModule as ɵi, GraniteTitlePipe as ɵj };
-//# sourceMappingURL=ifsworld-granite-components.js.map