@ifsworld/granite-components 4.4.0 → 5.0.1

package/bundles/ifsworld-granite-components.umd.js

@@ -1,3649 +0,0 @@
-(function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/cdk/coercion'), require('rxjs'), require('rxjs/operators'), require('@angular/cdk/testing'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/cdk/a11y'), require('@angular/cdk/keycodes'), require('@angular/animations'), require('@angular/cdk/bidi'), require('@angular/cdk/platform'), require('@angular/cdk/collections'), require('@angular/cdk/table')) :
-    typeof define === 'function' && define.amd ? define('@ifsworld/granite-components', ['exports', '@angular/core', '@angular/common', '@angular/cdk/coercion', 'rxjs', 'rxjs/operators', '@angular/cdk/testing', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/cdk/a11y', '@angular/cdk/keycodes', '@angular/animations', '@angular/cdk/bidi', '@angular/cdk/platform', '@angular/cdk/collections', '@angular/cdk/table'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.ifsworld = global.ifsworld || {}, global.ifsworld['granite-components'] = {}), global.ng.core, global.ng.common, global.ng.cdk.coercion, global.rxjs, global.rxjs.operators, global.ng.cdk.testing, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.cdk.a11y, global.ng.cdk.keycodes, global.ng.animations, global.ng.cdk.bidi, global.ng.cdk.platform, global.ng.cdk.collections, global.ng.cdk.table));
-}(this, (function (exports, core, common, coercion, rxjs, operators, testing, overlay, portal, a11y, keycodes, animations, bidi, platform, collections, table) { 'use strict';
-
-    var GraniteArrangeGridItemComponent = /** @class */ (function () {
-        function GraniteArrangeGridItemComponent(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 */
-        }
-        Object.defineProperty(GraniteArrangeGridItemComponent.prototype, "columnSpan", {
-            /**
-             * Number of cells the item would span. Used by arrange grid in column
-             * orientation to fill any unused space caused by wrapped items.
-             */
-            set: function (value) {
-                this._columnSpan = value;
-                this.updateStyles();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        /**
-         * Update element styles
-         */
-        GraniteArrangeGridItemComponent.prototype.updateStyles = function () {
-            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
-         */
-        GraniteArrangeGridItemComponent.prototype.setCssProperty = function (variable, value) {
-            this.element.nativeElement.style.setProperty(variable, value);
-        };
-        return GraniteArrangeGridItemComponent;
-    }());
-    GraniteArrangeGridItemComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'granite-arrange-grid-item',
-                    template: '<ng-content></ng-content>',
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{--columnSpan:$default-column-span;display:grid;grid-column:span var(--columnSpan,1)}"]
-                },] }
-    ];
-    GraniteArrangeGridItemComponent.ctorParameters = function () { return [
-        { type: core.ElementRef }
-    ]; };
-
-    (function (GraniteArrangeGridOrientation) {
-        GraniteArrangeGridOrientation["columns"] = "columns";
-        GraniteArrangeGridOrientation["rows"] = "rows";
-    })(exports.GraniteArrangeGridOrientation || (exports.GraniteArrangeGridOrientation = {}));
-    var GraniteArrangeGridComponent = /** @class */ (function () {
-        function GraniteArrangeGridComponent(element) {
-            this.element = element;
-            /** How to present grid items; `columns` (default) or `rows` */
-            this.orientation = exports.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 rxjs.Subject();
-            /* no-op */
-        }
-        Object.defineProperty(GraniteArrangeGridComponent.prototype, "cols", {
-            get: function () {
-                return this._cols;
-            },
-            /**
-             * Number of grid columns to use when orientation is set to `column`. The
-             * default is two columns.
-             */
-            set: function (value) {
-                this._cols = Math.max(1, Math.round(coercion.coerceNumberProperty(value)));
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(GraniteArrangeGridComponent.prototype, "rows", {
-            get: function () {
-                return this._rows;
-            },
-            set: function (value) {
-                // Prevent pointless usage
-                throw Error('Explicitly setting rows value for arrange grid is unsupported');
-            },
-            enumerable: false,
-            configurable: true
-        });
-        GraniteArrangeGridComponent.prototype.ngAfterContentInit = function () {
-            var _this = this;
-            // Update style whenever grid item components change in content
-            this.arrangeGridItemComponents.changes
-                .pipe(operators.takeUntil(this.destroy$))
-                .subscribe(function () { return _this.updateStyles(); });
-            this.updateStyles();
-        };
-        GraniteArrangeGridComponent.prototype.ngOnChanges = function (changes) {
-            if ((changes.orientation && !changes.orientation.isFirstChange()) ||
-                (changes.cols && !changes.cols.isFirstChange())) {
-                this.updateStyles();
-            }
-        };
-        GraniteArrangeGridComponent.prototype.ngOnDestroy = function () {
-            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.
-         */
-        GraniteArrangeGridComponent.prototype.updateStyles = function () {
-            var children = (this.arrangeGridItemComponents || []).length;
-            if (this.orientation === exports.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(function (c) { return (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
-         */
-        GraniteArrangeGridComponent.prototype.setCssProperty = function (variable, value) {
-            this.element.nativeElement.style.setProperty(variable, value);
-        };
-        return GraniteArrangeGridComponent;
-    }());
-    /** Default number of columns to use in column orientation */
-    GraniteArrangeGridComponent.defaultCols = 2;
-    GraniteArrangeGridComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'granite-arrange-grid',
-                    template: "<ng-content select=\"granite-arrange-grid-item\"></ng-content>\n",
-                    changeDetection: core.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 = function () { return [
-        { type: core.ElementRef }
-    ]; };
-    GraniteArrangeGridComponent.propDecorators = {
-        orientation: [{ type: core.Input }],
-        classColumnOrientation: [{ type: core.HostBinding, args: ['class.column-orientation',] }],
-        classRowOrientation: [{ type: core.HostBinding, args: ['class.row-orientation',] }],
-        arrangeGridItemComponents: [{ type: core.ContentChildren, args: [GraniteArrangeGridItemComponent,] }],
-        cols: [{ type: core.Input }]
-    };
-
-    var GraniteArrangeGridModule = /** @class */ (function () {
-        function GraniteArrangeGridModule() {
-        }
-        return GraniteArrangeGridModule;
-    }());
-    GraniteArrangeGridModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [GraniteArrangeGridComponent, GraniteArrangeGridItemComponent],
-                    imports: [common.CommonModule],
-                    exports: [GraniteArrangeGridComponent, GraniteArrangeGridItemComponent],
-                },] }
-    ];
-
-    /**
-     * Grid item component
-     *
-     * Merely a wrapper for CSS Grid items, accepting item style as input parameters.
-     */
-    var GraniteGridItemComponent = /** @class */ (function () {
-        function GraniteGridItemComponent(element, renderer) {
-            this.element = element;
-            this.renderer = renderer;
-        }
-        GraniteGridItemComponent.prototype.ngOnChanges = function () {
-            this.updateStyles();
-        };
-        /**
-         * Update element styles
-         */
-        GraniteGridItemComponent.prototype.updateStyles = function () {
-            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.
-         */
-        GraniteGridItemComponent.prototype.setStyle = function (property, value) {
-            this.renderer.setStyle(this.element.nativeElement, property, value || '');
-        };
-        return GraniteGridItemComponent;
-    }());
-    GraniteGridItemComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'granite-grid-item',
-                    template: '<ng-content></ng-content>',
-                    changeDetection: core.ChangeDetectionStrategy.OnPush
-                },] }
-    ];
-    GraniteGridItemComponent.ctorParameters = function () { return [
-        { type: core.ElementRef },
-        { type: core.Renderer2 }
-    ]; };
-    GraniteGridItemComponent.propDecorators = {
-        columnStart: [{ type: core.Input }],
-        columnEnd: [{ type: core.Input }],
-        rowStart: [{ type: core.Input }],
-        rowEnd: [{ type: core.Input }]
-    };
-    /**
-     * Grid
-     *
-     * A wrapper around a native CSS Grid. Anything can be used for grid items, but
-     * `GridItemComponent` is recommended for common cases.
-     */
-    var GraniteGridComponent = /** @class */ (function () {
-        function GraniteGridComponent(element) {
-            this.element = element;
-        }
-        Object.defineProperty(GraniteGridComponent.prototype, "cols", {
-            get: function () {
-                return this._cols;
-            },
-            /**
-             * Number of grid columns, unless set via styling (grid-template-columns)
-             *
-             * Setting this value will produce equally sized columns
-             */
-            set: function (value) {
-                this._cols = Math.max(1, Math.round(coercion.coerceNumberProperty(value)));
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(GraniteGridComponent.prototype, "rows", {
-            get: function () {
-                return this._rows;
-            },
-            /**
-             * Number of grid rows, unless set via styling (grid-template-rows)
-             *
-             * Setting this value will produce equally sized rows
-             */
-            set: function (value) {
-                this._rows = Math.max(1, Math.round(coercion.coerceNumberProperty(value)));
-            },
-            enumerable: false,
-            configurable: true
-        });
-        GraniteGridComponent.prototype.ngAfterContentInit = function () {
-            this.updateStyles();
-        };
-        GraniteGridComponent.prototype.ngOnChanges = function (changes) {
-            if ((changes.cols && !changes.cols.isFirstChange()) ||
-                (changes.rows && !changes.rows.isFirstChange())) {
-                this.updateStyles();
-            }
-        };
-        /** Update element styles */
-        GraniteGridComponent.prototype.updateStyles = function () {
-            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
-         */
-        GraniteGridComponent.prototype.setCssProperty = function (variable, value) {
-            this.element.nativeElement.style.setProperty(variable, value);
-        };
-        /** Update grid column template style  */
-        GraniteGridComponent.prototype.updateColumnStyles = function () {
-            this.setCssProperty('--cols', (this._cols && this._cols.toString()) || null);
-        };
-        /** Update grid row template style  */
-        GraniteGridComponent.prototype.updateRowStyles = function () {
-            this.setCssProperty('--rows', (this._rows && this._rows.toString()) || null);
-        };
-        return GraniteGridComponent;
-    }());
-    GraniteGridComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'granite-grid',
-                    template: '<ng-content></ng-content>',
-                    changeDetection: core.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 = function () { return [
-        { type: core.ElementRef }
-    ]; };
-    GraniteGridComponent.propDecorators = {
-        cols: [{ type: core.Input }],
-        rows: [{ type: core.Input }]
-    };
-
-    var GraniteGridModule = /** @class */ (function () {
-        function GraniteGridModule() {
-        }
-        return GraniteGridModule;
-    }());
-    GraniteGridModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [GraniteGridComponent, GraniteGridItemComponent],
-                    imports: [common.CommonModule],
-                    exports: [GraniteGridComponent, GraniteGridItemComponent],
-                },] }
-    ];
-
-    /******************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-    /* global Reflect, Promise */
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b)
-                if (Object.prototype.hasOwnProperty.call(b, p))
-                    d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    function __extends(d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    }
-    var __assign = function () {
-        __assign = Object.assign || function __assign(t) {
-            for (var s, i = 1, n = arguments.length; i < n; i++) {
-                s = arguments[i];
-                for (var p in s)
-                    if (Object.prototype.hasOwnProperty.call(s, p))
-                        t[p] = s[p];
-            }
-            return t;
-        };
-        return __assign.apply(this, arguments);
-    };
-    function __rest(s, e) {
-        var t = {};
-        for (var p in s)
-            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-                t[p] = s[p];
-        if (s != null && typeof Object.getOwnPropertySymbols === "function")
-            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                    t[p[i]] = s[p[i]];
-            }
-        return t;
-    }
-    function __decorate(decorators, target, key, desc) {
-        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-            r = Reflect.decorate(decorators, target, key, desc);
-        else
-            for (var i = decorators.length - 1; i >= 0; i--)
-                if (d = decorators[i])
-                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-    }
-    function __param(paramIndex, decorator) {
-        return function (target, key) { decorator(target, key, paramIndex); };
-    }
-    function __metadata(metadataKey, metadataValue) {
-        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
-            return Reflect.metadata(metadataKey, metadataValue);
-    }
-    function __awaiter(thisArg, _arguments, P, generator) {
-        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-        return new (P || (P = Promise))(function (resolve, reject) {
-            function fulfilled(value) { try {
-                step(generator.next(value));
-            }
-            catch (e) {
-                reject(e);
-            } }
-            function rejected(value) { try {
-                step(generator["throw"](value));
-            }
-            catch (e) {
-                reject(e);
-            } }
-            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-            step((generator = generator.apply(thisArg, _arguments || [])).next());
-        });
-    }
-    function __generator(thisArg, body) {
-        var _ = { label: 0, sent: function () { if (t[0] & 1)
-                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
-        function verb(n) { return function (v) { return step([n, v]); }; }
-        function step(op) {
-            if (f)
-                throw new TypeError("Generator is already executing.");
-            while (_)
-                try {
-                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
-                        return t;
-                    if (y = 0, t)
-                        op = [op[0] & 2, t.value];
-                    switch (op[0]) {
-                        case 0:
-                        case 1:
-                            t = op;
-                            break;
-                        case 4:
-                            _.label++;
-                            return { value: op[1], done: false };
-                        case 5:
-                            _.label++;
-                            y = op[1];
-                            op = [0];
-                            continue;
-                        case 7:
-                            op = _.ops.pop();
-                            _.trys.pop();
-                            continue;
-                        default:
-                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
-                                _ = 0;
-                                continue;
-                            }
-                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
-                                _.label = op[1];
-                                break;
-                            }
-                            if (op[0] === 6 && _.label < t[1]) {
-                                _.label = t[1];
-                                t = op;
-                                break;
-                            }
-                            if (t && _.label < t[2]) {
-                                _.label = t[2];
-                                _.ops.push(op);
-                                break;
-                            }
-                            if (t[2])
-                                _.ops.pop();
-                            _.trys.pop();
-                            continue;
-                    }
-                    op = body.call(thisArg, _);
-                }
-                catch (e) {
-                    op = [6, e];
-                    y = 0;
-                }
-                finally {
-                    f = t = 0;
-                }
-            if (op[0] & 5)
-                throw op[1];
-            return { value: op[0] ? op[1] : void 0, done: true };
-        }
-    }
-    var __createBinding = Object.create ? (function (o, m, k, k2) {
-        if (k2 === undefined)
-            k2 = k;
-        var desc = Object.getOwnPropertyDescriptor(m, k);
-        if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-            desc = { enumerable: true, get: function () { return m[k]; } };
-        }
-        Object.defineProperty(o, k2, desc);
-    }) : (function (o, m, k, k2) {
-        if (k2 === undefined)
-            k2 = k;
-        o[k2] = m[k];
-    });
-    function __exportStar(m, o) {
-        for (var p in m)
-            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
-                __createBinding(o, m, p);
-    }
-    function __values(o) {
-        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-        if (m)
-            return m.call(o);
-        if (o && typeof o.length === "number")
-            return {
-                next: function () {
-                    if (o && i >= o.length)
-                        o = void 0;
-                    return { value: o && o[i++], done: !o };
-                }
-            };
-        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-    }
-    function __read(o, n) {
-        var m = typeof Symbol === "function" && o[Symbol.iterator];
-        if (!m)
-            return o;
-        var i = m.call(o), r, ar = [], e;
-        try {
-            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
-                ar.push(r.value);
-        }
-        catch (error) {
-            e = { error: error };
-        }
-        finally {
-            try {
-                if (r && !r.done && (m = i["return"]))
-                    m.call(i);
-            }
-            finally {
-                if (e)
-                    throw e.error;
-            }
-        }
-        return ar;
-    }
-    /** @deprecated */
-    function __spread() {
-        for (var ar = [], i = 0; i < arguments.length; i++)
-            ar = ar.concat(__read(arguments[i]));
-        return ar;
-    }
-    /** @deprecated */
-    function __spreadArrays() {
-        for (var s = 0, i = 0, il = arguments.length; i < il; i++)
-            s += arguments[i].length;
-        for (var r = Array(s), k = 0, i = 0; i < il; i++)
-            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-                r[k] = a[j];
-        return r;
-    }
-    function __spreadArray(to, from, pack) {
-        if (pack || arguments.length === 2)
-            for (var i = 0, l = from.length, ar; i < l; i++) {
-                if (ar || !(i in from)) {
-                    if (!ar)
-                        ar = Array.prototype.slice.call(from, 0, i);
-                    ar[i] = from[i];
-                }
-            }
-        return to.concat(ar || Array.prototype.slice.call(from));
-    }
-    function __await(v) {
-        return this instanceof __await ? (this.v = v, this) : new __await(v);
-    }
-    function __asyncGenerator(thisArg, _arguments, generator) {
-        if (!Symbol.asyncIterator)
-            throw new TypeError("Symbol.asyncIterator is not defined.");
-        var g = generator.apply(thisArg, _arguments || []), i, q = [];
-        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
-        function verb(n) { if (g[n])
-            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
-        function resume(n, v) { try {
-            step(g[n](v));
-        }
-        catch (e) {
-            settle(q[0][3], e);
-        } }
-        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
-        function fulfill(value) { resume("next", value); }
-        function reject(value) { resume("throw", value); }
-        function settle(f, v) { if (f(v), q.shift(), q.length)
-            resume(q[0][0], q[0][1]); }
-    }
-    function __asyncDelegator(o) {
-        var i, p;
-        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
-        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
-    }
-    function __asyncValues(o) {
-        if (!Symbol.asyncIterator)
-            throw new TypeError("Symbol.asyncIterator is not defined.");
-        var m = o[Symbol.asyncIterator], i;
-        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
-        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
-        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
-    }
-    function __makeTemplateObject(cooked, raw) {
-        if (Object.defineProperty) {
-            Object.defineProperty(cooked, "raw", { value: raw });
-        }
-        else {
-            cooked.raw = raw;
-        }
-        return cooked;
-    }
-    ;
-    var __setModuleDefault = Object.create ? (function (o, v) {
-        Object.defineProperty(o, "default", { enumerable: true, value: v });
-    }) : function (o, v) {
-        o["default"] = v;
-    };
-    function __importStar(mod) {
-        if (mod && mod.__esModule)
-            return mod;
-        var result = {};
-        if (mod != null)
-            for (var k in mod)
-                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
-                    __createBinding(result, mod, k);
-        __setModuleDefault(result, mod);
-        return result;
-    }
-    function __importDefault(mod) {
-        return (mod && mod.__esModule) ? mod : { default: mod };
-    }
-    function __classPrivateFieldGet(receiver, state, kind, f) {
-        if (kind === "a" && !f)
-            throw new TypeError("Private accessor was defined without a getter");
-        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-            throw new TypeError("Cannot read private member from an object whose class did not declare it");
-        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-    }
-    function __classPrivateFieldSet(receiver, state, value, kind, f) {
-        if (kind === "m")
-            throw new TypeError("Private method is not writable");
-        if (kind === "a" && !f)
-            throw new TypeError("Private accessor was defined without a setter");
-        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-            throw new TypeError("Cannot write private member to an object whose class did not declare it");
-        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-    }
-    function __classPrivateFieldIn(state, receiver) {
-        if (receiver === null || (typeof receiver !== "object" && typeof receiver !== "function"))
-            throw new TypeError("Cannot use 'in' operator on non-object");
-        return typeof state === "function" ? receiver === state : state.has(receiver);
-    }
-
-    var TOKEN_PREFIX = 'granite-';
-    var 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) {
-        var theme = id !== undefined ? themes.find(function (t) { return 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) {
-        var e_1, _a;
-        try {
-            for (var _b = __values(Object.keys(tokens)), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var token = _c.value;
-                element.style.setProperty(token, tokens[token]);
-            }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-            }
-            finally { if (e_1) throw e_1.error; }
-        }
-    }
-    /**
-     * 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) {
-        var e_2, _a;
-        try {
-            for (var keys_1 = __values(keys), keys_1_1 = keys_1.next(); !keys_1_1.done; keys_1_1 = keys_1.next()) {
-                var token = keys_1_1.value;
-                element.style.removeProperty(token);
-            }
-        }
-        catch (e_2_1) { e_2 = { error: e_2_1 }; }
-        finally {
-            try {
-                if (keys_1_1 && !keys_1_1.done && (_a = keys_1.return)) _a.call(keys_1);
-            }
-            finally { if (e_2) throw e_2.error; }
-        }
-    }
-    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);
-        }
-    }
-
-    var GraniteBadgeComponent = /** @class */ (function () {
-        function GraniteBadgeComponent(elementRef) {
-            this.elementRef = elementRef;
-            /** Pill style badge */
-            this.pill = false;
-        }
-        GraniteBadgeComponent.prototype.ngOnChanges = function (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);
-                }
-            }
-        };
-        return GraniteBadgeComponent;
-    }());
-    GraniteBadgeComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'granite-badge',
-                    exportAs: 'graniteBadge',
-                    host: {
-                        class: 'granite-badge',
-                        '[class.granite-badge-pill]': 'pill',
-                    },
-                    template: '<ng-content></ng-content>',
-                    changeDetection: core.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 = function () { return [
-        { type: core.ElementRef }
-    ]; };
-    GraniteBadgeComponent.propDecorators = {
-        backgroundColor: [{ type: core.Input }],
-        color: [{ type: core.Input }],
-        pill: [{ type: core.Input }]
-    };
-
-    var GraniteBadgeModule = /** @class */ (function () {
-        function GraniteBadgeModule() {
-        }
-        return GraniteBadgeModule;
-    }());
-    GraniteBadgeModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [GraniteBadgeComponent],
-                    imports: [common.CommonModule],
-                    exports: [GraniteBadgeComponent],
-                },] }
-    ];
-
-    var GraniteBadgeHarness = /** @class */ (function (_super) {
-        __extends(GraniteBadgeHarness, _super);
-        function GraniteBadgeHarness() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        /**
-         * 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.
-         */
-        GraniteBadgeHarness.with = function (options) {
-            var _this = this;
-            if (options === void 0) { options = {}; }
-            var predicate = new testing.HarnessPredicate(GraniteBadgeHarness, options);
-            predicate.addOption('text', options.text, function (harness, label) { return testing.HarnessPredicate.stringMatches(harness.getText(), label); });
-            predicate.addOption('pill', options.pill, function (harness, pill) { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, harness.isPill()];
-                    case 1: return [2 /*return*/, (_a.sent()) === pill];
-                }
-            }); }); });
-            return predicate;
-        };
-        /** Gets the Badge text. */
-        GraniteBadgeHarness.prototype.getText = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, this.host()];
-                        case 1: return [2 /*return*/, (_a.sent()).text()];
-                    }
-                });
-            });
-        };
-        /** Whether it's a Pill type badge. */
-        GraniteBadgeHarness.prototype.isPill = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, this.host()];
-                        case 1: return [2 /*return*/, (_a.sent()).hasClass('granite-badge-pill')];
-                    }
-                });
-            });
-        };
-        return GraniteBadgeHarness;
-    }(testing.ComponentHarness));
-    GraniteBadgeHarness.hostSelector = 'granite-badge';
-
-    /**
-     * Injection token used to provide the parent menu to menu-specific components.
-     * @docs-private
-     */
-    var GRANITE_MENU_PANEL = new core.InjectionToken('GRANITE_MENU_PANEL');
-
-    var GraniteMenuItemComponent = /** @class */ (function () {
-        function GraniteMenuItemComponent(_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 rxjs.Subject();
-            /** Stream that emits when the menu item is focused. */
-            // eslint-disable-next-line rxjs/no-exposed-subjects
-            this._focused = new rxjs.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);
-        }
-        GraniteMenuItemComponent.prototype.ngOnDestroy = function () {
-            this._focusMonitor.stopMonitoring(this._elementRef);
-            this._hovered.complete();
-            this._focused.complete();
-        };
-        /** Focuses the menu item. */
-        GraniteMenuItemComponent.prototype.focus = function (origin, options) {
-            if (origin === void 0) { origin = 'program'; }
-            this._focusMonitor.focusVia(this._getHostElement(), origin, options);
-            this._focused.next(this);
-        };
-        /** Returns the host DOM element. */
-        GraniteMenuItemComponent.prototype._getHostElement = function () {
-            return this._elementRef.nativeElement;
-        };
-        return GraniteMenuItemComponent;
-    }());
-    GraniteMenuItemComponent.decorators = [
-        { type: core.Component, args: [{
-                    // eslint-disable-next-line @angular-eslint/component-selector
-                    selector: '[graniteMenuItem]',
-                    template: "<ng-content></ng-content>\n    <ng-container *ngIf=\"_triggersSubmenu\">\n      <granite-icon\n        class=\"caret-left\"\n        [fontIcon]=\"'icon-caret-left'\"\n      ></granite-icon>\n      <granite-icon\n        class=\"caret-right\"\n        [fontIcon]=\"'icon-caret-right'\"\n      ></granite-icon>\n    </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 = function () { return [
-        { type: core.ElementRef },
-        { type: a11y.FocusMonitor },
-        { type: undefined, decorators: [{ type: core.Inject, args: [GRANITE_MENU_PANEL,] }, { type: core.Optional }] }
-    ]; };
-    GraniteMenuItemComponent.propDecorators = {
-        role: [{ type: core.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');
-    }
-
-    var easeOut120 = getEaseOutSteep(120);
-    /**
-     * Animations used by the `granite-menu` component, showing the desktop interface.
-     * @docs-private
-     */
-    var graniteMenuDesktopAnimations = {
-        transformMenuDesktop: animations.trigger('transformMenuDesktop', [
-            animations.state('void', animations.style({
-                opacity: 0,
-                transform: 'scale(0.9)',
-            })),
-            animations.transition('void => enter', animations.group([
-                animations.query('.granite-menu-content', animations.animate(getEaseLinear(100), animations.style({
-                    opacity: 1,
-                }))),
-                animations.animate(easeOut120, animations.style({ transform: 'scale(1)' })),
-            ])),
-            animations.transition('* => void', animations.animate(getEaseLinear(100, 25), animations.style({ opacity: 0 }))),
-        ]),
-    };
-
-    var defaultDuration = 300;
-    var defaultDelay = 200;
-    var easeOut = getEaseOutSteep(defaultDuration);
-    var linear = getEaseLinear(defaultDuration);
-    var 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.
-     */
-    var teleport = '1ms linear';
-    /**
-     * Style used by our menu stars to make grand entrée et sortie from/to below
-     * the viewport stage.
-     */
-    var inTheOrchestraPit = animations.style({
-        transform: 'translateX(0) translateY(100%)',
-        opacity: 0,
-    });
-    /** Style for a menu at the center of attention, on the viewport stage */
-    var onStage = animations.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.
-     */
-    var awaitingCue = animations.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
-     */
-    var retired = animations.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.
-     */
-    var futsalShuffle = animations.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.
-     */
-    var moonwalk = animations.style({
-        transform: 'translateX(calc(-100vw + {{ xOffset }}px))',
-    });
-    var onStageHidden = animations.style({
-        opacity: 0,
-        transform: 'translateX(0) translateY(0)',
-    });
-    /**
-     * Animations used by the `granite-menu` component, showing the touch interface.
-     * @docs-private
-     */
-    var graniteMenuTouchAnimations = {
-        transformMenuTouch: animations.trigger('transformMenuTouch', [
-            // Set up cast positions
-            animations.state('void', awaitingCue),
-            animations.state('enter, enter-from-below', onStage),
-            animations.state('pan-hidden', moonwalk, { params: { xOffset: 0 } }),
-            animations.state('pan', futsalShuffle, { params: { xOffset: 0 } }),
-            animations.state('below-with-delay', inTheOrchestraPit),
-            animations.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.
-            animations.transition('pan => enter, ' +
-                'pan => enter-from-below, ' +
-                'pan => void, ' +
-                'enter <=> hide, ' +
-                'enter-from-below <=> hide, ' +
-                'pan-hidden => hide, ' +
-                'pan-hidden => enter', animations.animate(easeOut)),
-            animations.transition(
-            // Jump straight onto the stage, from the orchestra pit.
-            // Excitement fills the air. Spotlight. Showtime.
-            'void => enter-from-below', animations.sequence([
-                animations.animate(teleport, inTheOrchestraPit),
-                animations.animate(easeOut, onStage),
-            ])),
-            animations.transition(
-            // Go stand in the curtains, then make a grand entrance from the side
-            'void => enter', animations.sequence([animations.animate(teleport, awaitingCue), animations.animate(easeOut, onStage)])),
-            animations.transition(
-            // Get off the stage, back into the curtains on the side
-            'enter => void', animations.animate(easeOut, awaitingCue)),
-            animations.transition(
-            // Take the side stairs down from the stage
-            'hide => below', animations.animate(linear, retired)),
-            animations.transition(
-            // Wait for a bit, then take the side stairs down from the stage
-            'hide => below-with-delay', animations.sequence([animations.animate(teleport, retired), animations.animate(linearDelayed, retired)])),
-            animations.transition(
-            // Stage dive into the orchestra pit
-            'enter => below, enter-from-below => below', animations.sequence([animations.animate(teleport, onStage), animations.animate(linear, inTheOrchestraPit)])),
-            animations.transition(
-            // Receive the standing ovations, then stage dive into the orchestra pit
-            'enter => below-with-delay, enter-from-below => below-with-delay', animations.sequence([
-                animations.animate(teleport, onStage),
-                animations.animate(linearDelayed, inTheOrchestraPit),
-            ])),
-        ]),
-        transformCloseButton: animations.trigger('transformCloseButton', [
-            animations.state('void, below, below-with-delay', onStageHidden),
-            animations.state('enter, enter-from-below, pan-hidden, pan, hide', onStage),
-            animations.transition('void => enter-from-below', animations.sequence([
-                animations.animate(teleport, onStageHidden),
-                animations.animate(getEaseLinear(50, defaultDuration / 2), onStage),
-            ])),
-            animations.transition('enter => below, enter-from-below => below', animations.sequence([
-                animations.animate(teleport, onStage),
-                animations.animate(getEaseLinear(25), onStageHidden),
-            ])),
-            animations.transition('enter => below-with-delay, enter-from-below => below-with-delay', animations.sequence([
-                animations.animate(teleport, onStage),
-                animations.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.\n\n    Example:\n      <granite-menu #menu=\"graniteMenu\"></granite-menu>\n      <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'.\n      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'.\n      Example: <granite-menu yPosition=\"above\" #menu=\"graniteMenu\"></granite-menu>");
-    }
-
-    /** Counter for panel ID generation */
-    var menuPanelUid = 0;
-    /** Menu panel animation default transform values */
-    var transformMenuDefault = {
-        value: 'void',
-        params: {
-            xOffset: 0,
-        },
-    };
-    /** Base class with all of the menu functionality. */
-    // eslint-disable-next-line @angular-eslint/directive-class-suffix
-    var _MenuBaseComponent = /** @class */ (function () {
-        function _MenuBaseComponent(_changeDetectorRef) {
-            this._changeDetectorRef = _changeDetectorRef;
-            this.openOnHover = true;
-            /**
-             * Event emitted when the menu is closed
-             */
-            this.closed = new core.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 rxjs.BehaviorSubject(transformMenuDefault);
-            /** Emits whenever an animation on the menu completes. */
-            // eslint-disable-next-line rxjs/no-exposed-subjects
-            this._animationDone = new rxjs.Subject();
-            this._menuEmpty$ = new rxjs.BehaviorSubject(false);
-            // eslint-disable-next-line @typescript-eslint/member-ordering
-            this._isMenuEmpty$ = rxjs.combineLatest([
-                this._menuEmpty$,
-                this._animationDone,
-            ]).pipe(operators.filter(function (_b) {
-                var _c = __read(_b, 2), m = _c[0], a = _c[1];
-                return m && a != null;
-            }), operators.map(function () { return true; }));
-            /** Only the direct descendant menu items. */
-            this._directDescendantItems = new core.QueryList();
-            /** Subscription to tab events on the menu panel */
-            this._tabSubscription = rxjs.Subscription.EMPTY;
-            this._xPosition = 'after';
-            this._yPosition = 'below';
-            /**
-             * Current horizontal offset. Used with `pan` and `pan-hidden`
-             * animation states.
-             */
-            this.xOffset = 0;
-        }
-        Object.defineProperty(_MenuBaseComponent.prototype, "xPosition", {
-            /** Position of the menu in the X axis. */
-            get: function () {
-                return this._xPosition;
-            },
-            set: function (value) {
-                if (value !== 'before' && value !== 'after') {
-                    throwGraniteMenuInvalidPositionX();
-                }
-                this._xPosition = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(_MenuBaseComponent.prototype, "yPosition", {
-            /** Position of the menu in the Y axis. */
-            get: function () {
-                return this._yPosition;
-            },
-            set: function (value) {
-                if (value !== 'above' && value !== 'below') {
-                    throwGraniteMenuInvalidPositionY();
-                }
-                this._yPosition = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(_MenuBaseComponent.prototype, "_panelAnimationState", {
-            /** Current state of the panel animation. */
-            set: function (state) {
-                this._transformMenu.next({
-                    value: state,
-                    params: { xOffset: this.xOffset },
-                });
-            },
-            enumerable: false,
-            configurable: true
-        });
-        _MenuBaseComponent.prototype.ngAfterContentChecked = function () {
-            this._menuEmpty$.next(this._allItems.length < 1 ? true : false);
-        };
-        _MenuBaseComponent.prototype.ngAfterContentInit = function () {
-            var _this = this;
-            this._updateDirectDescendants();
-            this._keyManager = new a11y.FocusKeyManager(this._directDescendantItems)
-                .withWrap()
-                .skipPredicate(function (menuItem) {
-                var hostElement = menuItem._getHostElement();
-                return hostElement instanceof HTMLButtonElement
-                    ? hostElement.disabled
-                    : hostElement.hasAttribute('graniteTitle');
-            });
-            this._tabSubscription = this._keyManager.tabOut.subscribe(function () {
-                _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(operators.startWith(this._directDescendantItems), operators.switchMap(function (items) { return rxjs.merge.apply(void 0, __spread(items.map(function (item) { return item._focused; }))); }))
-                .subscribe(function (focusedItem) { return _this._keyManager.updateActiveItem(focusedItem); });
-        };
-        _MenuBaseComponent.prototype.ngOnDestroy = function () {
-            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.
-         */
-        _MenuBaseComponent.prototype._hovered = function () {
-            var _this = this;
-            // Coerce the `changes` property because Angular types it as `Observable<any>`
-            var itemChanges = this._directDescendantItems.changes;
-            return itemChanges.pipe(operators.startWith(this._directDescendantItems), 
-            // Hovering is not applicable when producing touch output
-            operators.filter(function () {
-                var _a;
-                return ((_a = _this._clientOutput) === null || _a === void 0 ? void 0 : _a.device) !== 'touch';
-            }), operators.switchMap(function (items) { return rxjs.merge.apply(void 0, __spread(items.map(function (item) { return item._hovered; }))); }));
-        };
-        /** Handle a keyboard event from the menu, delegating to the appropriate action. */
-        _MenuBaseComponent.prototype._handleKeydown = function (event) {
-            var key = event.key;
-            var manager = this._keyManager;
-            switch (key) {
-                case 'Escape':
-                    if (!keycodes.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 (!keycodes.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.
-         */
-        _MenuBaseComponent.prototype.focusFirstItem = function (origin) {
-            if (origin === void 0) { origin = 'program'; }
-            this._keyManager.setFocusOrigin(origin).setFirstItemActive();
-        };
-        /** Updates the `showTitle` property for touch device UI */
-        _MenuBaseComponent.prototype._updateShowTitle = function () {
-            this.showTitle = !!this.title || this.showBackButton;
-        };
-        /** Starts the enter animation */
-        _MenuBaseComponent.prototype._startAnimation = function () {
-            this._panelAnimationState = 'enter';
-        };
-        /** Resets the panel animation to its initial state. */
-        _MenuBaseComponent.prototype._resetAnimation = function () {
-            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.
-         */
-        _MenuBaseComponent.prototype._startTouchCloseDownAnimation = function () {
-            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.
-         */
-        _MenuBaseComponent.prototype._startTouchCloseDownAnimationWithDelay = function () {
-            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.
-         */
-        _MenuBaseComponent.prototype._startTouchCloseSideAnimation = function () {
-            this._resetAnimation();
-        };
-        /**
-         * Starts the enter-from-below animation, moving a (root) menu into view,
-         * Animates upwards from a starting position below the viewport.
-         */
-        _MenuBaseComponent.prototype._startTouchRootEnterAnimation = function () {
-            this._panelAnimationState = 'enter-from-below';
-            this.xOffset = 0;
-        };
-        /** Starts the enter animation, moving a (sub) menu into view. */
-        _MenuBaseComponent.prototype._startTouchSubmenuEnterAnimation = function () {
-            this._panelAnimationState = 'enter';
-            this.xOffset = 0;
-        };
-        /**
-         * Starts the pan animation, to position a submenu in a response
-         * to user dragging sideways (panning).
-         */
-        _MenuBaseComponent.prototype._startTouchPanAnimation = function (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).
-         */
-        _MenuBaseComponent.prototype._startTouchHidePanAnimation = function (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.
-         */
-        _MenuBaseComponent.prototype._startTouchHideAnimation = function () {
-            this._panelAnimationState = 'hide';
-            this.xOffset = 0;
-        };
-        /** Callback that is invoked when the panel animation completes. */
-        _MenuBaseComponent.prototype._onAnimationDone = function (event) {
-            this._animationDone.next(event);
-            this._isAnimating = false;
-        };
-        _MenuBaseComponent.prototype._onAnimationStart = function (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
-         */
-        _MenuBaseComponent.prototype._handleClick = function () {
-            this.closed.emit('click');
-        };
-        /**
-         * Handle click on the close button by emitting on the `closed` emitter
-         * without any particular reason
-         */
-        _MenuBaseComponent.prototype._handleCloseClick = function () {
-            this.closed.emit();
-        };
-        /**
-         * Handle click on the back icon by emitting on the `clicked` emitter
-         */
-        _MenuBaseComponent.prototype._handleBackClick = function (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.
-         */
-        _MenuBaseComponent.prototype._setDevice = function (clientInput, clientOutput) {
-            this._clientInput = clientInput;
-            this._clientOutput = clientOutput;
-            this._directDescendantItems.forEach(function (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.
-         */
-        _MenuBaseComponent.prototype.resetActiveItem = function () {
-            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.
-         */
-        _MenuBaseComponent.prototype._updateDirectDescendants = function () {
-            var _this = this;
-            this._allItems.changes
-                .pipe(operators.startWith(this._allItems))
-                .subscribe(function (items) {
-                _this._directDescendantItems.reset(items.filter(function (item) { return item._parentMenu === _this; }));
-                _this._directDescendantItems.notifyOnChanges();
-            });
-        };
-        return _MenuBaseComponent;
-    }());
-    _MenuBaseComponent.decorators = [
-        { type: core.Directive }
-    ];
-    _MenuBaseComponent.ctorParameters = function () { return [
-        { type: core.ChangeDetectorRef }
-    ]; };
-    _MenuBaseComponent.propDecorators = {
-        xPosition: [{ type: core.Input }],
-        yPosition: [{ type: core.Input }],
-        title: [{ type: core.Input }],
-        closeLabel: [{ type: core.Input }],
-        openOnHover: [{ type: core.Input }],
-        templateRef: [{ type: core.ViewChild, args: [core.TemplateRef,] }],
-        _allItems: [{ type: core.ContentChildren, args: [GraniteMenuItemComponent, { descendants: true },] }],
-        closed: [{ type: core.Output }]
-    };
-    var GraniteMenuComponent = /** @class */ (function (_super) {
-        __extends(GraniteMenuComponent, _super);
-        function GraniteMenuComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return GraniteMenuComponent;
-    }(_MenuBaseComponent));
-    GraniteMenuComponent.decorators = [
-        { type: core.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: core.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.
-     */
-    var GRANITE_CLIENT_INPUT = new core.InjectionToken('GRANITE_CLIENT_INPUT');
-    /**
-     * Injection token used to provide components knowledge of what device type
-     * is being used for output.
-     */
-    var GRANITE_CLIENT_OUTPUT = new core.InjectionToken('GRANITE_CLIENT_OUTPUT');
-    var deviceDesktop = {
-        input: { devices: ['mouse', 'keyboard'] },
-        output: { device: 'desktop' },
-    };
-    var deviceTouch = {
-        input: { devices: ['touch', 'onscreen-keyboard'] },
-        output: { device: 'touch' },
-    };
-
-    /** Options for binding a passive event listener. */
-    var passiveEventListenerOptions = platform.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)
-     */
-    var GraniteMenuTriggerForDirective = /** @class */ (function () {
-        function GraniteMenuTriggerForDirective(_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) {
-            var _this = this;
-            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 = rxjs.Subscription.EMPTY;
-            this._menuCloseSubscription = rxjs.Subscription.EMPTY;
-            this._closingActionsSubscription = rxjs.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 = function () {
-                _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 = function (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 = function (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) {
-                    var dy = Math.abs(_this._touchCurrentY - _this._touchStartY);
-                    var 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.
-                var 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 = function () {
-                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;
-                var swipeMinDistance = 10;
-                var swipeMinTime = 50;
-                var swipeMaxTime = 300;
-                var pannedHalfwayRight = _this._touchTranslateX > _this._touchMaxX / 2;
-                var 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;
-        }
-        GraniteMenuTriggerForDirective.prototype.ngOnChanges = function (changes) {
-            if (changes.menu) {
-                this._handleMenuChange();
-            }
-        };
-        GraniteMenuTriggerForDirective.prototype.ngAfterContentInit = function () {
-            // removed checkMenu here to avoid errors in dynamically genarated menus
-            // menu is checked when opening the menu
-            // this._checkMenu();
-            this._handleHover();
-        };
-        GraniteMenuTriggerForDirective.prototype.ngOnDestroy = function () {
-            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 */
-        GraniteMenuTriggerForDirective.prototype._handleMenuChange = function () {
-            var _this = this;
-            this._menuCloseSubscription.unsubscribe();
-            // Close the menu overlay when the menu itself says it wants to be closed
-            if (this.menu) {
-                var closed = this.menu.closed;
-                this._menuCloseSubscription = closed.subscribe(function (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
-                        var runningAnimationDone = _this.menu._isAnimating
-                            ? _this.menu._animationDone
-                            : rxjs.of([null]);
-                        runningAnimationDone
-                            .pipe(operators.take(1), operators.delay(0, rxjs.asapScheduler))
-                            // eslint-disable-next-line rxjs/no-nested-subscribe
-                            .subscribe(function () {
-                            _this.animateCloseMenu(reason !== 'keydown', reason === 'click');
-                            _this.menu._animationDone
-                                .pipe(operators.take(1), operators.delay(0, rxjs.asapScheduler))
-                                // eslint-disable-next-line rxjs/no-nested-subscribe
-                                .subscribe(function () { return _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);
-                    }
-                });
-            }
-        };
-        GraniteMenuTriggerForDirective.prototype.isOpen = function () {
-            return this._isMenuOpen;
-        };
-        /** Open the associated menu */
-        GraniteMenuTriggerForDirective.prototype.openMenu = function () {
-            var _this = this;
-            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;
-            var panelClass = [];
-            if (this._clientOutput.device === 'touch') {
-                panelClass.push('granite-overlay-pane-fill-width-bottom');
-            }
-            var scrollStrategy = this._clientOutput.device !== 'touch'
-                ? this._overlay.scrollStrategies.reposition()
-                : undefined;
-            var hasBackdrop = this._clientOutput.device === 'touch' && !this.triggersSubmenu();
-            //#endregion --- Touch device customizations ---
-            // Create an overlay to stuff the menu (portal) into below
-            if (!this._overlayRef) {
-                var config = new overlay.OverlayConfig({
-                    positionStrategy: this._positionStrategy(),
-                    backdropClass: 'granite-overlay-dark-glass-backdrop',
-                    scrollStrategy: scrollStrategy,
-                    direction: this._dir,
-                    panelClass: panelClass,
-                    hasBackdrop: 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 portal.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(function () { return _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. */
-        GraniteMenuTriggerForDirective.prototype.triggersSubmenu = function () {
-            return !!(this._menuItemInstance && this._parentMenu);
-        };
-        /** Toggles the menu between the open and closed states. */
-        GraniteMenuTriggerForDirective.prototype.toggleMenu = function () {
-            if (this._isMenuOpen) {
-                this.closeMenu();
-            }
-            else {
-                this.openMenu();
-            }
-        };
-        /** Close the associated menu */
-        GraniteMenuTriggerForDirective.prototype.closeMenu = function () {
-            this.menu.closed.emit();
-        };
-        /**
-         * Focuses the menu trigger.
-         * @param origin Source of the menu trigger's focus.
-         */
-        GraniteMenuTriggerForDirective.prototype.focus = function (origin, options) {
-            if (origin === void 0) { origin = 'program'; }
-            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 */
-        GraniteMenuTriggerForDirective.prototype._destroyMenu = function () {
-            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. */
-        GraniteMenuTriggerForDirective.prototype._handleMousedown = function (event) {
-            if (!a11y.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. */
-        GraniteMenuTriggerForDirective.prototype._handleKeydown = function (event) {
-            var 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. */
-        GraniteMenuTriggerForDirective.prototype._handleClick = function (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. */
-        GraniteMenuTriggerForDirective.prototype._handleHover = function () {
-            var _this = this;
-            // 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(operators.filter(function () { return _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.
-            operators.filter(function (active) { return active === _this._menuItemInstance; } /*&& !active.disabled*/), operators.delay(0, rxjs.asapScheduler))
-                .subscribe(function () {
-                _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(operators.take(1), operators.delay(0, rxjs.asapScheduler), operators.takeUntil(_this._parentMenu._hovered()))
-                        // eslint-disable-next-line rxjs/no-nested-subscribe
-                        .subscribe(function () { return _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
-         */
-        GraniteMenuTriggerForDirective.prototype._restoreFocus = function () {
-            // 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
-        GraniteMenuTriggerForDirective.prototype._setIsMenuOpen = function (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.
-         */
-        GraniteMenuTriggerForDirective.prototype._checkMenu = function () {
-            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.
-         */
-        GraniteMenuTriggerForDirective.prototype._desktopPositionStrategy = function () {
-            var 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.
-         */
-        GraniteMenuTriggerForDirective.prototype._setPosition = function (positionStrategy) {
-            var MENU_PANEL_TOP_PADDING = 0;
-            var _c = __read(this.menu.xPosition === 'before' ? ['end', 'start'] : ['start', 'end'], 2), originX = _c[0], originFallbackX = _c[1];
-            var _d = __read(this.menu.yPosition === 'above' ? ['bottom', 'top'] : ['top', 'bottom'], 2), overlayY = _d[0], overlayFallbackY = _d[1];
-            var _e = __read([overlayY, overlayFallbackY], 2), originY = _e[0], originFallbackY = _e[1];
-            var _f = __read([originX, originFallbackX], 2), overlayX = _f[0], overlayFallbackX = _f[1];
-            var 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: originX, originY: originY, overlayX: overlayX, overlayY: overlayY, offsetY: offsetY },
-                {
-                    originX: originFallbackX,
-                    originY: originY,
-                    overlayX: overlayFallbackX,
-                    overlayY: overlayY,
-                    offsetY: offsetY,
-                },
-                {
-                    originX: originX,
-                    originY: originFallbackY,
-                    overlayX: 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. */
-        GraniteMenuTriggerForDirective.prototype._menuClosingActions = function () {
-            var _this = this;
-            var _a;
-            var detachments = (_a = this._overlayRef) === null || _a === void 0 ? void 0 : _a.detachments();
-            var parentClose = this._parentMenu
-                ? this._parentMenu.closed
-                : rxjs.of();
-            var hover = this._clientOutput.device === 'desktop' && this._parentMenu
-                ? this._parentMenu._hovered().pipe(operators.filter(function (item) { return item !== _this._menuItemInstance; }), operators.filter(function () { return _this._isMenuOpen; }))
-                : rxjs.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.
-            var outsideClick = !this._parentMenu
-                ? rxjs.fromEvent(this._document, 'click').pipe(operators.filter(function (e) { return e.target !== _this._element.nativeElement &&
-                    e.target.closest('.granite-menu') === null; }), operators.filter(function () { return !_this.menu._isAnimating; }))
-                : rxjs.of();
-            return rxjs.merge(detachments, hover, parentClose, outsideClick);
-        };
-        /**
-         * Whether to automatically open submenus on hover. This is true when showing
-         * desktop menus and having mouse support.
-         */
-        GraniteMenuTriggerForDirective.prototype._openOnHover = function () {
-            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.
-         */
-        GraniteMenuTriggerForDirective.prototype._toggleOnSubmenuClick = function () {
-            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 */
-        GraniteMenuTriggerForDirective.prototype.animateOpenMenu = function () {
-            this._clientOutput.device === 'touch'
-                ? this.animateTouchOpenMenu()
-                : this.menu._startAnimation();
-        };
-        GraniteMenuTriggerForDirective.prototype.animateTouchOpenMenu = function () {
-            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 */
-        GraniteMenuTriggerForDirective.prototype.animateCloseMenu = function (toBelow, withDelay) {
-            this._clientOutput.device === 'touch'
-                ? this._animateTouchCloseMenu(toBelow, withDelay)
-                : this._parentMenu._resetAnimation();
-        };
-        GraniteMenuTriggerForDirective.prototype._animateTouchCloseMenu = function (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
-         */
-        GraniteMenuTriggerForDirective.prototype.animateSetMenuPosition = function (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
-         */
-        GraniteMenuTriggerForDirective.prototype._positionStrategy = function () {
-            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.
-         */
-        GraniteMenuTriggerForDirective.prototype._touchPositionStrategy = function () {
-            return this._overlay.position().global();
-        };
-        /**
-         * Remove touch device pan/swipe listeners from overlay host element
-         */
-        GraniteMenuTriggerForDirective.prototype.addOverlayListeners = function () {
-            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
-         */
-        GraniteMenuTriggerForDirective.prototype.removeOverlayListeners = function () {
-            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
-         */
-        GraniteMenuTriggerForDirective.prototype.easeOutExpo = function (current, offset, target, end) {
-            return current === end
-                ? offset + target
-                : target * (-Math.pow(2, (-10 * current) / end) + 1) + offset;
-        };
-        return GraniteMenuTriggerForDirective;
-    }());
-    GraniteMenuTriggerForDirective.decorators = [
-        { type: core.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 = function () { return [
-        { type: overlay.Overlay },
-        { type: core.ElementRef },
-        { type: core.ViewContainerRef },
-        { type: _MenuBaseComponent, decorators: [{ type: core.Inject, args: [GRANITE_MENU_PANEL,] }, { type: core.Optional }] },
-        { type: undefined, decorators: [{ type: core.Inject, args: [GRANITE_CLIENT_INPUT,] }, { type: core.Optional }] },
-        { type: undefined, decorators: [{ type: core.Inject, args: [GRANITE_CLIENT_OUTPUT,] }, { type: core.Optional }] },
-        { type: GraniteMenuItemComponent, decorators: [{ type: core.Optional }, { type: core.Self }] },
-        { type: bidi.Directionality, decorators: [{ type: core.Optional }] },
-        { type: a11y.FocusMonitor },
-        { type: undefined, decorators: [{ type: core.Inject, args: [common.DOCUMENT,] }] }
-    ]; };
-    GraniteMenuTriggerForDirective.propDecorators = {
-        menu: [{ type: core.Input, args: ['graniteMenuTriggerFor',] }]
-    };
-
-    var GraniteMenuTouchCloseComponent = /** @class */ (function () {
-        function GraniteMenuTouchCloseComponent() {
-        }
-        return GraniteMenuTouchCloseComponent;
-    }());
-    GraniteMenuTouchCloseComponent.decorators = [
-        { type: core.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}"]
-                },] }
-    ];
-
-    var GraniteMenuTouchTitleItemComponent = /** @class */ (function () {
-        function GraniteMenuTouchTitleItemComponent(
-        /** 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;
-        }
-        return GraniteMenuTouchTitleItemComponent;
-    }());
-    GraniteMenuTouchTitleItemComponent.decorators = [
-        { type: core.Component, args: [{
-                    // eslint-disable-next-line @angular-eslint/component-selector
-                    selector: '[graniteMenuTouchTitleItem]',
-                    template: "\n    <ng-container *ngIf=\"_triggersBack\">\n      <granite-icon\n        class=\"caret-left\"\n        [fontIcon]=\"'icon-caret-left'\"\n      ></granite-icon>\n      <granite-icon\n        class=\"caret-right\"\n        [fontIcon]=\"'icon-caret-right'\"\n      ></granite-icon>\n    </ng-container>\n    <ng-content></ng-content>\n  ",
-                    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 = function () { return [
-        { type: _MenuBaseComponent, decorators: [{ type: core.Inject, args: [GRANITE_MENU_PANEL,] }, { type: core.Optional }] }
-    ]; };
-
-    var GraniteDividerDirective = /** @class */ (function () {
-        function GraniteDividerDirective() {
-            this.dividerDirection = 'top';
-        }
-        return GraniteDividerDirective;
-    }());
-    GraniteDividerDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[graniteDivider]',
-                    exportAs: 'graniteDivider',
-                    host: {
-                        '[class.granite-divider-top]': 'dividerDirection === "top"',
-                        '[class.granite-divider-bottom]': 'dividerDirection === "bottom"',
-                    },
-                },] }
-    ];
-    GraniteDividerDirective.propDecorators = {
-        dividerDirection: [{ type: core.Input }]
-    };
-
-    var GraniteIconComponent = /** @class */ (function () {
-        function GraniteIconComponent(_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');
-            }
-        }
-        GraniteIconComponent.prototype.ngOnChanges = function (changes) {
-            if (changes.fontIcon) {
-                this._updateFontIcon();
-            }
-        };
-        GraniteIconComponent.prototype._updateFontIcon = function () {
-            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;
-            }
-        };
-        return GraniteIconComponent;
-    }());
-    GraniteIconComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'granite-icon',
-                    template: '<ng-content></ng-content>',
-                    host: {
-                        role: 'img',
-                        class: 'granite-icon',
-                    },
-                    changeDetection: core.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 = function () { return [
-        { type: core.ElementRef },
-        { type: core.Renderer2 },
-        { type: String, decorators: [{ type: core.Attribute, args: ['aria-hidden',] }] }
-    ]; };
-    GraniteIconComponent.propDecorators = {
-        fontIcon: [{ type: core.Input }]
-    };
-
-    var GraniteIconModule = /** @class */ (function () {
-        function GraniteIconModule() {
-        }
-        return GraniteIconModule;
-    }());
-    GraniteIconModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [GraniteIconComponent],
-                    exports: [GraniteIconComponent],
-                },] }
-    ];
-
-    var GraniteTitleDirective = /** @class */ (function () {
-        function GraniteTitleDirective() {
-        }
-        return GraniteTitleDirective;
-    }());
-    GraniteTitleDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[graniteTitle]',
-                    exportAs: 'graniteTitle',
-                    host: {
-                        '[class.granite-title]': 'true',
-                    },
-                },] }
-    ];
-
-    var GraniteMenuModule = /** @class */ (function () {
-        function GraniteMenuModule() {
-        }
-        return GraniteMenuModule;
-    }());
-    GraniteMenuModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [
-                        GraniteMenuComponent,
-                        GraniteMenuItemComponent,
-                        GraniteMenuTriggerForDirective,
-                        GraniteMenuTouchCloseComponent,
-                        GraniteMenuTouchTitleItemComponent,
-                        GraniteDividerDirective,
-                        GraniteTitleDirective,
-                    ],
-                    imports: [common.CommonModule, overlay.OverlayModule, portal.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.
-     */
-    var GraniteMenuHarness = /** @class */ (function (_super) {
-        __extends(GraniteMenuHarness, _super);
-        function GraniteMenuHarness() {
-            var _this = _super.apply(this, __spread(arguments)) || this;
-            _this._documentRootLocator = _this.documentRootLocatorFactory();
-            return _this;
-        }
-        /**
-         * 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.
-         */
-        GraniteMenuHarness.with = function (options) {
-            if (options === void 0) { options = {}; }
-            return new testing.HarnessPredicate(GraniteMenuHarness, options).addOption('text', options.text, 
-            /* @dynamic */ function (harness, text) { return testing.HarnessPredicate.stringMatches(harness.getText(), text); });
-        };
-        /** Gets the text of the menu trigger */
-        GraniteMenuHarness.prototype.getText = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0: return [4 /*yield*/, this.host()];
-                        case 1: return [2 /*return*/, (_b.sent()).text()];
-                    }
-                });
-            });
-        };
-        /** Opens the menu, unless already open */
-        GraniteMenuHarness.prototype.open = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0: return [4 /*yield*/, this.isOpen()];
-                        case 1:
-                            if (!!(_b.sent())) return [3 /*break*/, 4];
-                            return [4 /*yield*/, this.host()];
-                        case 2: return [4 /*yield*/, (_b.sent()).click()];
-                        case 3:
-                            _b.sent();
-                            // This is necessary so that we wait for the opening animation to finish.
-                            return [2 /*return*/, this.forceStabilize()];
-                        case 4: return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        /** Closes the menu, unless already closed */
-        GraniteMenuHarness.prototype.close = function () {
-            var _a;
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0: return [4 /*yield*/, this._getMenuPanel()];
-                        case 1: return [4 /*yield*/, ((_a = (_b.sent())) === null || _a === void 0 ? void 0 : _a.sendKeys(testing.TestKey.ESCAPE))];
-                        case 2:
-                            _b.sent();
-                            // This is necessary so that we wait for the closing animation to finish.
-                            return [2 /*return*/, this.forceStabilize()];
-                    }
-                });
-            });
-        };
-        /** Whether the menu is open */
-        GraniteMenuHarness.prototype.isOpen = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0: return [4 /*yield*/, this._getMenuPanel()];
-                        case 1: return [2 /*return*/, !!(_b.sent())];
-                    }
-                });
-            });
-        };
-        /**
-         * Gets a list of `GraniteMenuItemHarness` representing the items in the menu.
-         * @param filters Optionally filters which menu items are included.
-         */
-        GraniteMenuHarness.prototype.getItems = function (filters) {
-            if (filters === void 0) { filters = {}; }
-            return __awaiter(this, void 0, void 0, function () {
-                var panelId;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0: return [4 /*yield*/, this._getPanelId()];
-                        case 1:
-                            panelId = _b.sent();
-                            if (panelId) {
-                                return [2 /*return*/, this._documentRootLocator.locatorForAll(GraniteMenuItemHarness.with(Object.assign(Object.assign({}, filters), { ancestor: "#" + panelId })))()];
-                            }
-                            return [2 /*return*/, []];
-                    }
-                });
-            });
-        };
-        /** Gets the menu panel (popup) associated with the menu */
-        GraniteMenuHarness.prototype._getMenuPanel = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                var panelId;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0: return [4 /*yield*/, this._getPanelId()];
-                        case 1:
-                            panelId = _b.sent();
-                            return [2 /*return*/, panelId
-                                    ? this._documentRootLocator.locatorForOptional("#" + panelId)()
-                                    : null];
-                    }
-                });
-            });
-        };
-        /** Gets the id of the menu panel (popup) associated with this menu */
-        GraniteMenuHarness.prototype._getPanelId = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                var panelId;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0: return [4 /*yield*/, this.host()];
-                        case 1: return [4 /*yield*/, (_b.sent()).getAttribute('aria-controls')];
-                        case 2:
-                            panelId = _b.sent();
-                            return [2 /*return*/, panelId || null];
-                    }
-                });
-            });
-        };
-        return GraniteMenuHarness;
-    }(testing.ComponentHarness));
-    /**
-     * 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';
-    var GraniteMenuItemHarness = /** @class */ (function (_super) {
-        __extends(GraniteMenuItemHarness, _super);
-        function GraniteMenuItemHarness() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        /**
-         * 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.
-         */
-        GraniteMenuItemHarness.with = function (options) {
-            if (options === void 0) { options = {}; }
-            return new testing.HarnessPredicate(GraniteMenuItemHarness, options).addOption('text', options.text, 
-            /* @dynamic */ function (harness, text) { return testing.HarnessPredicate.stringMatches(harness.getText(), text); });
-        };
-        /** Gets the text of the menu item. */
-        GraniteMenuItemHarness.prototype.getText = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0: return [4 /*yield*/, this.host()];
-                        case 1: return [2 /*return*/, (_b.sent()).text()];
-                    }
-                });
-            });
-        };
-        /** Whether this item has a submenu. */
-        GraniteMenuItemHarness.prototype.hasSubmenu = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0: return [4 /*yield*/, this.host()];
-                        case 1: return [2 /*return*/, (_b.sent()).matchesSelector(GraniteMenuHarness.hostSelector)];
-                    }
-                });
-            });
-        };
-        /** Gets the submenu associated with this menu item, or null if none. */
-        GraniteMenuItemHarness.prototype.getSubmenu = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0: return [4 /*yield*/, this.hasSubmenu()];
-                        case 1:
-                            if (_b.sent()) {
-                                return [2 /*return*/, new GraniteMenuHarness(this.locatorFactory)];
-                            }
-                            return [2 /*return*/, null];
-                    }
-                });
-            });
-        };
-        /** Clicks the menu item. */
-        GraniteMenuItemHarness.prototype.click = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0: return [4 /*yield*/, this.host()];
-                        case 1: return [4 /*yield*/, (_b.sent()).click()];
-                        case 2:
-                            _b.sent();
-                            // This is necessary so that we wait for the opening animation to finish. (i.e. if it opens another menu)
-                            return [2 /*return*/, this.forceStabilize()];
-                    }
-                });
-            });
-        };
-        return GraniteMenuItemHarness;
-    }(testing.ComponentHarness));
-    /** The selector for the host element of a `MenuItemComponent` instance. */
-    GraniteMenuItemHarness.hostSelector = '.granite-menu-item';
-
-    var GraniteToggleSwitchComponent = /** @class */ (function () {
-        function GraniteToggleSwitchComponent(_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 core.EventEmitter();
-            this.toggleChange = new core.EventEmitter();
-            this.toggleBlur = new core.EventEmitter();
-            this._positionBefore = false;
-            this._toggleSwitchDisabled = false;
-        }
-        GraniteToggleSwitchComponent.prototype.ngOnChanges = function (changes) {
-            if (changes.checked) {
-                this.checked = coercion.coerceBooleanProperty(changes.checked.currentValue);
-            }
-            if (changes.disabled) {
-                this.disabled = coercion.coerceBooleanProperty(changes.disabled.currentValue);
-            }
-            if (changes.readonly) {
-                this.readonly = coercion.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;
-            }
-        };
-        GraniteToggleSwitchComponent.prototype.focus = function (origin, options) {
-            if (origin === void 0) { origin = 'program'; }
-            this._focusMonitor.focusVia(this._getInputElement(), origin, options);
-        };
-        GraniteToggleSwitchComponent.prototype._onBlur = function () {
-            this.toggleBlur.emit();
-        };
-        GraniteToggleSwitchComponent.prototype._toggleSwitchChange = function () {
-            this.checked = this._getInputElement().checked;
-            this.valueChange.emit(this.checked);
-        };
-        GraniteToggleSwitchComponent.prototype._toggleSwitchClick = function () {
-            this.toggleChange.emit();
-        };
-        GraniteToggleSwitchComponent.prototype._getInputElement = function () {
-            return this._inputElement.nativeElement;
-        };
-        return GraniteToggleSwitchComponent;
-    }());
-    GraniteToggleSwitchComponent.decorators = [
-        { type: core.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: core.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 = function () { return [
-        { type: a11y.FocusMonitor }
-    ]; };
-    GraniteToggleSwitchComponent.propDecorators = {
-        id: [{ type: core.Input }],
-        checked: [{ type: core.Input }],
-        disabled: [{ type: core.Input }],
-        readonly: [{ type: core.Input }],
-        labelPosition: [{ type: core.Input }],
-        ariaLabel: [{ type: core.Input, args: ['aria-label',] }],
-        ariaLabelledby: [{ type: core.Input, args: ['aria-labelledby',] }],
-        valueChange: [{ type: core.Output }],
-        toggleChange: [{ type: core.Output }],
-        toggleBlur: [{ type: core.Output }],
-        _inputElement: [{ type: core.ViewChild, args: ['input',] }]
-    };
-
-    var GraniteToggleSwitchModule = /** @class */ (function () {
-        function GraniteToggleSwitchModule() {
-        }
-        return GraniteToggleSwitchModule;
-    }());
-    GraniteToggleSwitchModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [GraniteToggleSwitchComponent],
-                    exports: [GraniteToggleSwitchComponent],
-                },] }
-    ];
-
-    var GraniteRadioButtonComponent = /** @class */ (function () {
-        function GraniteRadioButtonComponent(_focusMonitor, _radioDispatcher) {
-            var _this = this;
-            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 core.EventEmitter();
-            this.radioBlur = new core.EventEmitter();
-            this._positionBefore = false;
-            this._radioDisabled = false;
-            this._removeUniqueSelectionListener = function () {
-                // Function used to deregister listener
-            };
-            this._removeUniqueSelectionListener = _radioDispatcher.listen(function (id, name) {
-                if (id !== _this.id && name === _this.name) {
-                    _this.checked = false;
-                }
-            });
-        }
-        GraniteRadioButtonComponent.prototype.ngOnChanges = function (changes) {
-            if (changes.checked) {
-                this.checked = coercion.coerceBooleanProperty(changes.checked.currentValue);
-            }
-            if (changes.required) {
-                this.required = coercion.coerceBooleanProperty(changes.required.currentValue);
-            }
-            if (changes.readonly) {
-                this.readonly = coercion.coerceBooleanProperty(changes.readonly.currentValue);
-            }
-            if (changes.disabled) {
-                this.disabled = coercion.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;
-            }
-        };
-        GraniteRadioButtonComponent.prototype.ngOnDestroy = function () {
-            this._removeUniqueSelectionListener();
-        };
-        // Focuses the radio button.
-        GraniteRadioButtonComponent.prototype.focus = function (origin, options) {
-            if (origin === void 0) { origin = 'program'; }
-            this._focusMonitor.focusVia(this._getInputElement(), origin, options);
-        };
-        GraniteRadioButtonComponent.prototype._radioClick = function (element) {
-            this.radioChange.emit(element === null || element === void 0 ? void 0 : element.value);
-        };
-        GraniteRadioButtonComponent.prototype._radioChange = function () {
-            this.checked = this._getInputElement().checked;
-            // Notify all radio buttons with the same name to un-check
-            this._radioDispatcher.notify(this.id, this.name);
-        };
-        GraniteRadioButtonComponent.prototype._onBlur = function () {
-            this.radioBlur.emit();
-        };
-        GraniteRadioButtonComponent.prototype._getInputElement = function () {
-            return this._inputElement.nativeElement;
-        };
-        return GraniteRadioButtonComponent;
-    }());
-    GraniteRadioButtonComponent.decorators = [
-        { type: core.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: core.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 = function () { return [
-        { type: a11y.FocusMonitor },
-        { type: collections.UniqueSelectionDispatcher }
-    ]; };
-    GraniteRadioButtonComponent.propDecorators = {
-        value: [{ type: core.Input }],
-        id: [{ type: core.Input }],
-        name: [{ type: core.Input }],
-        checked: [{ type: core.Input }],
-        required: [{ type: core.Input }],
-        disabled: [{ type: core.Input }],
-        readonly: [{ type: core.Input }],
-        labelPosition: [{ type: core.Input }],
-        ariaLabel: [{ type: core.Input, args: ['aria-label',] }],
-        ariaLabelledby: [{ type: core.Input, args: ['aria-labelledby',] }],
-        radioChange: [{ type: core.Output }],
-        radioBlur: [{ type: core.Output }],
-        _inputElement: [{ type: core.ViewChild, args: ['input',] }]
-    };
-
-    var GraniteRadioCheckboxBase = /** @class */ (function () {
-        function GraniteRadioCheckboxBase() {
-            this.layout = 'horizontal';
-            this.ariaLabelledby = null;
-        }
-        return GraniteRadioCheckboxBase;
-    }());
-    GraniteRadioCheckboxBase.decorators = [
-        { type: core.Directive }
-    ];
-    GraniteRadioCheckboxBase.propDecorators = {
-        layout: [{ type: core.Input }],
-        ariaLabelledby: [{ type: core.Input, args: ['aria-labelledby',] }]
-    };
-
-    var GraniteRadioGroupComponent = /** @class */ (function (_super) {
-        __extends(GraniteRadioGroupComponent, _super);
-        function GraniteRadioGroupComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return GraniteRadioGroupComponent;
-    }(GraniteRadioCheckboxBase));
-    GraniteRadioGroupComponent.decorators = [
-        { type: core.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: core.ChangeDetectionStrategy.OnPush,
-                    styles: [":host(.granite-radio-checkbox-base-layout-horizontal){display:flex;align-items:flex-start}"]
-                },] }
-    ];
-
-    var GraniteRadioButtonModule = /** @class */ (function () {
-        function GraniteRadioButtonModule() {
-        }
-        return GraniteRadioButtonModule;
-    }());
-    GraniteRadioButtonModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [GraniteRadioButtonComponent, GraniteRadioGroupComponent],
-                    exports: [GraniteRadioButtonComponent, GraniteRadioGroupComponent],
-                },] }
-    ];
-
-    var GraniteCheckboxComponent = /** @class */ (function () {
-        function GraniteCheckboxComponent(_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 core.EventEmitter();
-            this.checkboxChange = new core.EventEmitter();
-            this.checkboxBlur = new core.EventEmitter();
-            this._positionBefore = false;
-            this._checkboxDisabled = false;
-        }
-        GraniteCheckboxComponent.prototype.ngOnChanges = function (changes) {
-            if (changes.checked) {
-                this.checked = coercion.coerceBooleanProperty(changes.checked.currentValue);
-            }
-            if (changes.disabled) {
-                this.disabled = coercion.coerceBooleanProperty(changes.disabled.currentValue);
-            }
-            if (changes.readonly) {
-                this.readonly = coercion.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;
-            }
-        };
-        GraniteCheckboxComponent.prototype.focus = function (origin, options) {
-            if (origin === void 0) { origin = 'program'; }
-            this._focusMonitor.focusVia(this._getInputElement(), origin, options);
-        };
-        GraniteCheckboxComponent.prototype._onBlur = function () {
-            this.checkboxBlur.emit();
-        };
-        GraniteCheckboxComponent.prototype._checkboxChange = function () {
-            this.checked = this._getInputElement().checked;
-            this.valueChange.emit(this.checked);
-        };
-        GraniteCheckboxComponent.prototype._checkboxClick = function () {
-            this.checkboxChange.emit();
-        };
-        GraniteCheckboxComponent.prototype._getInputElement = function () {
-            return this._inputElement.nativeElement;
-        };
-        return GraniteCheckboxComponent;
-    }());
-    GraniteCheckboxComponent.decorators = [
-        { type: core.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: core.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 = function () { return [
-        { type: a11y.FocusMonitor }
-    ]; };
-    GraniteCheckboxComponent.propDecorators = {
-        id: [{ type: core.Input }],
-        checked: [{ type: core.Input }],
-        disabled: [{ type: core.Input }],
-        readonly: [{ type: core.Input }],
-        labelPosition: [{ type: core.Input }],
-        ariaLabel: [{ type: core.Input, args: ['aria-label',] }],
-        ariaLabelledby: [{ type: core.Input, args: ['aria-labelledby',] }],
-        valueChange: [{ type: core.Output }],
-        checkboxChange: [{ type: core.Output }],
-        checkboxBlur: [{ type: core.Output }],
-        _inputElement: [{ type: core.ViewChild, args: ['input',] }]
-    };
-
-    var GraniteCheckboxGroupComponent = /** @class */ (function (_super) {
-        __extends(GraniteCheckboxGroupComponent, _super);
-        function GraniteCheckboxGroupComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return GraniteCheckboxGroupComponent;
-    }(GraniteRadioCheckboxBase));
-    GraniteCheckboxGroupComponent.decorators = [
-        { type: core.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: core.ChangeDetectionStrategy.OnPush,
-                    styles: [":host(.granite-radio-checkbox-base-layout-horizontal){display:flex;align-items:flex-start}"]
-                },] }
-    ];
-
-    var GraniteCheckboxModule = /** @class */ (function () {
-        function GraniteCheckboxModule() {
-        }
-        return GraniteCheckboxModule;
-    }());
-    GraniteCheckboxModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [GraniteCheckboxComponent, GraniteCheckboxGroupComponent],
-                    exports: [GraniteCheckboxComponent, GraniteCheckboxGroupComponent],
-                },] }
-    ];
-
-    var disabledMixin = function (Base) {
-        if (Base === void 0) { Base = /** @class */ (function () {
-            function class_1() {
-            }
-            return class_1;
-        }()); }
-        var Derived = /** @class */ (function (_super) {
-            __extends(Derived, _super);
-            function Derived() {
-                var _this = _super.apply(this, __spread(arguments)) || this;
-                _this.disabled = false;
-                return _this;
-            }
-            Derived.prototype.ngOnChanges = function (changes) {
-                if (changes.disabled) {
-                    this.disabled = coercion.coerceBooleanProperty(changes.disabled.currentValue);
-                }
-            };
-            return Derived;
-        }(Base));
-        Derived.decorators = [
-            { type: core.Directive }
-        ];
-        Derived.propDecorators = {
-            disabled: [{ type: core.Input }]
-        };
-        return Derived;
-    };
-
-    (function (ButtonSelectors) {
-        ButtonSelectors["graniteButton"] = "granite-button";
-        ButtonSelectors["granitePrimaryButton"] = "granite-primary-button";
-        ButtonSelectors["graniteFlatButton"] = "granite-flat-button";
-        ButtonSelectors["graniteToolbarButton"] = "granite-toolbar-button";
-    })(exports.ButtonSelectors || (exports.ButtonSelectors = {}));
-    var ButtonComponentMixin = disabledMixin();
-    var GraniteButtonComponent = /** @class */ (function (_super) {
-        __extends(GraniteButtonComponent, _super);
-        function GraniteButtonComponent(_focusMonitor, _elementRef) {
-            var e_1, _a;
-            var _this = _super.call(this) || this;
-            _this._focusMonitor = _focusMonitor;
-            _this._elementRef = _elementRef;
-            _this.toggled = false;
-            _this._buttonToggled = false;
-            try {
-                for (var _b = __values(Object.keys(exports.ButtonSelectors)), _c = _b.next(); !_c.done; _c = _b.next()) {
-                    var selector = _c.value;
-                    if (_this._getHostElement().hasAttribute(selector)) {
-                        _this._getHostElement().classList.add(exports.ButtonSelectors[selector]);
-                    }
-                }
-            }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-                }
-                finally { if (e_1) throw e_1.error; }
-            }
-            return _this;
-        }
-        GraniteButtonComponent.prototype.ngOnChanges = function (changes) {
-            _super.prototype.ngOnChanges.call(this, changes);
-            if (changes.toggled &&
-                (this._getHostElement().classList.contains(exports.ButtonSelectors.graniteFlatButton) ||
-                    this._getHostElement().classList.contains(exports.ButtonSelectors.graniteToolbarButton))) {
-                this._buttonToggled = coercion.coerceBooleanProperty(changes.toggled.currentValue);
-            }
-        };
-        GraniteButtonComponent.prototype.focus = function (origin, options) {
-            if (origin === void 0) { origin = 'program'; }
-            this._focusMonitor.focusVia(this._getHostElement(), origin, options);
-        };
-        GraniteButtonComponent.prototype._getHostElement = function () {
-            return this._elementRef.nativeElement;
-        };
-        return GraniteButtonComponent;
-    }(ButtonComponentMixin));
-    GraniteButtonComponent.decorators = [
-        { type: core.Component, args: [{
-                    // eslint-disable-next-line @angular-eslint/component-selector
-                    selector: "button[graniteButton],\n    button[granitePrimaryButton],\n    button[graniteFlatButton],\n    button[graniteToolbarButton]\n  ",
-                    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: core.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 = function () { return [
-        { type: a11y.FocusMonitor },
-        { type: core.ElementRef }
-    ]; };
-    GraniteButtonComponent.propDecorators = {
-        toggled: [{ type: core.Input }]
-    };
-    var GraniteAnchorComponent = /** @class */ (function (_super) {
-        __extends(GraniteAnchorComponent, _super);
-        function GraniteAnchorComponent(_focusMonitor, _elementRef) {
-            var _this = _super.call(this, _focusMonitor, _elementRef) || this;
-            _this._focusMonitor = _focusMonitor;
-            _this._elementRef = _elementRef;
-            return _this;
-        }
-        GraniteAnchorComponent.prototype._anchorClick = function (event) {
-            if (this.disabled) {
-                event.preventDefault();
-            }
-        };
-        GraniteAnchorComponent.prototype.ngOnChanges = function (changes) {
-            _super.prototype.ngOnChanges.call(this, changes);
-        };
-        return GraniteAnchorComponent;
-    }(GraniteButtonComponent));
-    GraniteAnchorComponent.decorators = [
-        { type: core.Component, args: [{
-                    // eslint-disable-next-line @angular-eslint/component-selector
-                    selector: "a[graniteButton],\n  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: core.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 = function () { return [
-        { type: a11y.FocusMonitor },
-        { type: core.ElementRef }
-    ]; };
-    GraniteAnchorComponent.propDecorators = {
-        _anchorClick: [{ type: core.HostListener, args: ['click', ['$event'],] }]
-    };
-
-    var GraniteButtonModule = /** @class */ (function () {
-        function GraniteButtonModule() {
-        }
-        return GraniteButtonModule;
-    }());
-    GraniteButtonModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [GraniteButtonComponent, GraniteAnchorComponent],
-                    exports: [GraniteButtonComponent, GraniteAnchorComponent],
-                },] }
-    ];
-
-    var GraniteTableColumnDirective = /** @class */ (function () {
-        function GraniteTableColumnDirective() {
-        }
-        return GraniteTableColumnDirective;
-    }());
-    GraniteTableColumnDirective.decorators = [
-        { type: core.Directive, args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'granite-table-column',
-                },] }
-    ];
-    GraniteTableColumnDirective.propDecorators = {
-        name: [{ type: core.Input }],
-        title: [{ type: core.Input }],
-        staticType: [{ type: core.Input }],
-        tableCellTemplateRef: [{ type: core.ContentChild, args: ['graniteTableCellTemplate', { static: false },] }]
-    };
-
-    var TableConstants = /** @class */ (function () {
-        function TableConstants() {
-        }
-        return TableConstants;
-    }());
-    TableConstants.CELL_ID_PREFIX = 'granite-cell';
-
-    var GraniteTableComponent = /** @class */ (function () {
-        function GraniteTableComponent() {
-            this.ariaLabel = null;
-            this.cellIdPrefix = TableConstants.CELL_ID_PREFIX;
-        }
-        GraniteTableComponent.prototype.ngAfterContentInit = function () {
-            this.columns = this.tableColumnsComponent.toArray();
-            this.renderedColumns = this.columns.map(function (column) { return column.name; });
-        };
-        return GraniteTableComponent;
-    }());
-    GraniteTableComponent.decorators = [
-        { type: core.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: core.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: core.Input }],
-        trackBy: [{ type: core.Input }],
-        ariaLabel: [{ type: core.Input, args: ['aria-label',] }],
-        tableColumnsComponent: [{ type: core.ContentChildren, args: [GraniteTableColumnDirective,] }]
-    };
-
-    var GraniteCell = /** @class */ (function () {
-        function GraniteCell() {
-        }
-        return GraniteCell;
-    }());
-    GraniteCell.decorators = [
-        { type: core.Directive }
-    ];
-    GraniteCell.propDecorators = {
-        id: [{ type: core.Input }],
-        column: [{ type: core.Input }]
-    };
-
-    var GraniteTableDataCellComponent = /** @class */ (function (_super) {
-        __extends(GraniteTableDataCellComponent, _super);
-        function GraniteTableDataCellComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return GraniteTableDataCellComponent;
-    }(GraniteCell));
-    GraniteTableDataCellComponent.decorators = [
-        { type: core.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: core.Input }],
-        staticType: [{ type: core.Input }],
-        rowIndex: [{ type: core.Input }],
-        columnIndex: [{ type: core.Input }],
-        tableCellTemplateRef: [{ type: core.Input }],
-        row: [{ type: core.Input }]
-    };
-
-    var GraniteTableHeaderCellComponent = /** @class */ (function (_super) {
-        __extends(GraniteTableHeaderCellComponent, _super);
-        function GraniteTableHeaderCellComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return GraniteTableHeaderCellComponent;
-    }(GraniteCell));
-    GraniteTableHeaderCellComponent.decorators = [
-        { type: core.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)}"]
-                },] }
-    ];
-
-    var GraniteTitlePipe = /** @class */ (function () {
-        function GraniteTitlePipe() {
-        }
-        GraniteTitlePipe.prototype.transform = function (value) {
-            var words = value.split(/(?=[A-Z ])/);
-            return words
-                .map(function (word) { return word.trim(); })
-                .filter(Boolean)
-                .map(function (word) { return word.charAt(0).toLocaleUpperCase() + word.slice(1); })
-                .join(' ');
-        };
-        return GraniteTitlePipe;
-    }());
-    GraniteTitlePipe.decorators = [
-        { type: core.Pipe, args: [{
-                    name: 'graniteTitle',
-                },] }
-    ];
-
-    var PurePipesModule = /** @class */ (function () {
-        function PurePipesModule() {
-        }
-        return PurePipesModule;
-    }());
-    PurePipesModule.decorators = [
-        { type: core.NgModule, args: [{
-                    exports: [GraniteTitlePipe],
-                    declarations: [GraniteTitlePipe],
-                },] }
-    ];
-
-    var GraniteTableModule = /** @class */ (function () {
-        function GraniteTableModule() {
-        }
-        return GraniteTableModule;
-    }());
-    GraniteTableModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [
-                        GraniteTableComponent,
-                        GraniteTableDataCellComponent,
-                        GraniteTableHeaderCellComponent,
-                        GraniteTableColumnDirective,
-                    ],
-                    imports: [common.CommonModule, table.CdkTableModule, GraniteBadgeModule, PurePipesModule],
-                    exports: [GraniteTableComponent, GraniteTableColumnDirective],
-                },] }
-    ];
-
-    var GRANITE_INPUT_INCLUDES = ['text', 'number', 'password', 'textarea'];
-    var GraniteInputFieldComponent = /** @class */ (function () {
-        function GraniteInputFieldComponent(_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 core.EventEmitter();
-            this._supported = true;
-            this._empty = false;
-            this._passwordFieldIcon = 'view';
-            this._passwordField = false;
-            this._currentCharCount = 0;
-            this._passwordToggled = false;
-        }
-        GraniteInputFieldComponent.prototype.ngOnInit = function () {
-            this._validateType();
-            this._passwordField = this.type == 'password';
-            this._empty = this.value == null || this.value === '';
-        };
-        GraniteInputFieldComponent.prototype.ngOnChanges = function (changes) {
-            if (changes.required) {
-                this.required = coercion.coerceBooleanProperty(changes.required.currentValue);
-            }
-            if (changes.readonly) {
-                this.readonly = coercion.coerceBooleanProperty(changes.readonly.currentValue);
-            }
-            if (changes.invalid) {
-                this.invalid = coercion.coerceBooleanProperty(changes.invalid.currentValue);
-            }
-            if (changes.disabled) {
-                this.disabled = coercion.coerceBooleanProperty(changes.disabled.currentValue);
-            }
-            if (changes.countcharacters) {
-                this.countcharacters = coercion.coerceBooleanProperty(changes.countcharacters.currentValue);
-            }
-            if (changes.value) {
-                this._empty = this.value == null || this.value === '';
-            }
-            if (changes.type) {
-                this._validateType();
-            }
-        };
-        GraniteInputFieldComponent.prototype.focus = function (origin, options) {
-            if (origin === void 0) { origin = 'program'; }
-            if (this.type === 'text') {
-                this._focusMonitor.focusVia(this._getInputElement(), origin, options);
-            }
-            else if (this.type === 'textarea') {
-                this._focusMonitor.focusVia(this._getTextareaElement(), origin, options);
-            }
-        };
-        GraniteInputFieldComponent.prototype._togglePassword = function () {
-            if (this._passwordToggled) {
-                this._passwordToggled = false;
-                this.type = 'password';
-                this._passwordFieldIcon = 'view';
-            }
-            else {
-                this._passwordToggled = true;
-                this.type = 'text';
-                this._passwordFieldIcon = 'view-disabled';
-            }
-        };
-        GraniteInputFieldComponent.prototype._onKeyUp = function (event) {
-            var inputEvent = event.target;
-            this._applyCharacterCount(inputEvent.value);
-            this._empty = inputEvent.value == null || inputEvent.value === '';
-            this.valueChange.emit(inputEvent.value);
-        };
-        GraniteInputFieldComponent.prototype._onInput = function (event) {
-            var inputEvent = event.target;
-            this._empty = inputEvent.value == null || inputEvent.value === '';
-            this.valueChange.emit(inputEvent.value);
-        };
-        GraniteInputFieldComponent.prototype._validateType = function () {
-            if (GRANITE_INPUT_INCLUDES.indexOf(this.type) < 0) {
-                this._supported = false;
-                throw Error("Input type \"" + this.type + "\" isn't supported by graniteInputField.");
-            }
-        };
-        GraniteInputFieldComponent.prototype._applyCharacterCount = function (inputString) {
-            if (this.countcharacters) {
-                this._currentCharCount = inputString.length;
-                if (this._currentCharCount > this.maxlength) {
-                    inputString = inputString.slice(0, this.maxlength);
-                    this._currentCharCount = this.maxlength;
-                }
-            }
-        };
-        GraniteInputFieldComponent.prototype._getInputElement = function () {
-            return this._inputElement.nativeElement;
-        };
-        GraniteInputFieldComponent.prototype._getTextareaElement = function () {
-            return this._textareaElement.nativeElement;
-        };
-        return GraniteInputFieldComponent;
-    }());
-    GraniteInputFieldComponent.decorators = [
-        { type: core.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: core.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 = function () { return [
-        { type: a11y.FocusMonitor }
-    ]; };
-    GraniteInputFieldComponent.propDecorators = {
-        id: [{ type: core.Input }],
-        name: [{ type: core.Input }],
-        type: [{ type: core.Input }],
-        value: [{ type: core.Input }],
-        required: [{ type: core.Input }],
-        readonly: [{ type: core.Input }],
-        invalid: [{ type: core.Input }],
-        disabled: [{ type: core.Input }],
-        placeholder: [{ type: core.Input }],
-        prefixicon: [{ type: core.Input }],
-        maxlength: [{ type: core.Input }],
-        countcharacters: [{ type: core.Input }],
-        ariaLabel: [{ type: core.Input, args: ['aria-label',] }],
-        ariaLabelledby: [{ type: core.Input, args: ['aria-labelledby',] }],
-        valueChange: [{ type: core.Output }],
-        _inputElement: [{ type: core.ViewChild, args: ['input',] }],
-        _textareaElement: [{ type: core.ViewChild, args: ['textarea',] }]
-    };
-
-    var GraniteInputFieldModule = /** @class */ (function () {
-        function GraniteInputFieldModule() {
-        }
-        return GraniteInputFieldModule;
-    }());
-    GraniteInputFieldModule.decorators = [
-        { type: core.NgModule, args: [{
-                    imports: [common.CommonModule, GraniteIconModule, GraniteButtonModule],
-                    declarations: [GraniteInputFieldComponent],
-                    exports: [GraniteInputFieldComponent],
-                },] }
-    ];
-
-    var ɵ0 = deviceDesktop.output;
-    /**
-     * Directive used to tell components and their sub components that client output
-     * should be adapted for desktop devices like personal computers.
-     */
-    var ClientOutputDesktopDirective = /** @class */ (function () {
-        function ClientOutputDesktopDirective() {
-        }
-        return ClientOutputDesktopDirective;
-    }());
-    ClientOutputDesktopDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: "[graniteClientOutputDesktop]",
-                    providers: [
-                        {
-                            provide: GRANITE_CLIENT_OUTPUT,
-                            useValue: ɵ0,
-                        },
-                    ],
-                },] }
-    ];
-
-    var ɵ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.
-     */
-    var ClientOutputTouchDirective = /** @class */ (function () {
-        function ClientOutputTouchDirective() {
-        }
-        return ClientOutputTouchDirective;
-    }());
-    ClientOutputTouchDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: "[graniteClientOutputTouch]",
-                    providers: [
-                        {
-                            provide: GRANITE_CLIENT_OUTPUT,
-                            useValue: ɵ0$1,
-                        },
-                    ],
-                },] }
-    ];
-
-    var ɵ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.
-     */
-    var ClientInputDesktopDirective = /** @class */ (function () {
-        function ClientInputDesktopDirective() {
-        }
-        return ClientInputDesktopDirective;
-    }());
-    ClientInputDesktopDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: "[graniteClientInputDesktop]",
-                    providers: [
-                        {
-                            provide: GRANITE_CLIENT_INPUT,
-                            useValue: ɵ0$2,
-                        },
-                    ],
-                },] }
-    ];
-
-    var ɵ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.
-     */
-    var ClientInputTouchDirective = /** @class */ (function () {
-        function ClientInputTouchDirective() {
-        }
-        return ClientInputTouchDirective;
-    }());
-    ClientInputTouchDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: "[graniteClientInputTouch]",
-                    providers: [
-                        {
-                            provide: GRANITE_CLIENT_INPUT,
-                            useValue: ɵ0$3,
-                        },
-                    ],
-                },] }
-    ];
-
-    // TODO: Move client devices into a separate module
-    var GraniteCoreModule = /** @class */ (function () {
-        function GraniteCoreModule() {
-        }
-        return GraniteCoreModule;
-    }());
-    GraniteCoreModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [
-                        ClientOutputDesktopDirective,
-                        ClientOutputTouchDirective,
-                        ClientInputDesktopDirective,
-                        ClientInputTouchDirective,
-                    ],
-                    exports: [
-                        ClientOutputDesktopDirective,
-                        ClientOutputTouchDirective,
-                        ClientInputDesktopDirective,
-                        ClientInputTouchDirective,
-                    ],
-                },] }
-    ];
-
-    /*
-     * Public API Surface of ui
-     */
-
-    /**
-     * Generated bundle index. Do not edit.
-     */
-
-    exports.ClientInputDesktopDirective = ClientInputDesktopDirective;
-    exports.ClientInputTouchDirective = ClientInputTouchDirective;
-    exports.ClientOutputDesktopDirective = ClientOutputDesktopDirective;
-    exports.ClientOutputTouchDirective = ClientOutputTouchDirective;
-    exports.GRANITE_CLIENT_INPUT = GRANITE_CLIENT_INPUT;
-    exports.GRANITE_CLIENT_OUTPUT = GRANITE_CLIENT_OUTPUT;
-    exports.GraniteAnchorComponent = GraniteAnchorComponent;
-    exports.GraniteArrangeGridComponent = GraniteArrangeGridComponent;
-    exports.GraniteArrangeGridItemComponent = GraniteArrangeGridItemComponent;
-    exports.GraniteArrangeGridModule = GraniteArrangeGridModule;
-    exports.GraniteBadgeComponent = GraniteBadgeComponent;
-    exports.GraniteBadgeHarness = GraniteBadgeHarness;
-    exports.GraniteBadgeModule = GraniteBadgeModule;
-    exports.GraniteButtonComponent = GraniteButtonComponent;
-    exports.GraniteButtonModule = GraniteButtonModule;
-    exports.GraniteCheckboxComponent = GraniteCheckboxComponent;
-    exports.GraniteCheckboxGroupComponent = GraniteCheckboxGroupComponent;
-    exports.GraniteCheckboxModule = GraniteCheckboxModule;
-    exports.GraniteCoreModule = GraniteCoreModule;
-    exports.GraniteDividerDirective = GraniteDividerDirective;
-    exports.GraniteGridComponent = GraniteGridComponent;
-    exports.GraniteGridItemComponent = GraniteGridItemComponent;
-    exports.GraniteGridModule = GraniteGridModule;
-    exports.GraniteIconComponent = GraniteIconComponent;
-    exports.GraniteIconModule = GraniteIconModule;
-    exports.GraniteInputFieldComponent = GraniteInputFieldComponent;
-    exports.GraniteInputFieldModule = GraniteInputFieldModule;
-    exports.GraniteMenuComponent = GraniteMenuComponent;
-    exports.GraniteMenuHarness = GraniteMenuHarness;
-    exports.GraniteMenuItemComponent = GraniteMenuItemComponent;
-    exports.GraniteMenuItemHarness = GraniteMenuItemHarness;
-    exports.GraniteMenuModule = GraniteMenuModule;
-    exports.GraniteMenuTouchCloseComponent = GraniteMenuTouchCloseComponent;
-    exports.GraniteMenuTouchTitleItemComponent = GraniteMenuTouchTitleItemComponent;
-    exports.GraniteMenuTriggerForDirective = GraniteMenuTriggerForDirective;
-    exports.GraniteRadioButtonComponent = GraniteRadioButtonComponent;
-    exports.GraniteRadioButtonModule = GraniteRadioButtonModule;
-    exports.GraniteRadioGroupComponent = GraniteRadioGroupComponent;
-    exports.GraniteTableColumnDirective = GraniteTableColumnDirective;
-    exports.GraniteTableComponent = GraniteTableComponent;
-    exports.GraniteTableModule = GraniteTableModule;
-    exports.GraniteTitleDirective = GraniteTitleDirective;
-    exports.GraniteToggleSwitchComponent = GraniteToggleSwitchComponent;
-    exports.GraniteToggleSwitchModule = GraniteToggleSwitchModule;
-    exports._MenuBaseComponent = _MenuBaseComponent;
-    exports.deviceDesktop = deviceDesktop;
-    exports.deviceTouch = deviceTouch;
-    exports.disabledMixin = disabledMixin;
-    exports.graniteMenuDesktopAnimations = graniteMenuDesktopAnimations;
-    exports.graniteMenuTouchAnimations = graniteMenuTouchAnimations;
-    exports.ɵ0 = ɵ0$1;
-    exports.ɵa = GRANITE_MENU_PANEL;
-    exports.ɵc = getEaseOutSteep;
-    exports.ɵd = getEaseLinear;
-    exports.ɵe = GraniteRadioCheckboxBase;
-    exports.ɵf = GraniteTableDataCellComponent;
-    exports.ɵg = GraniteCell;
-    exports.ɵh = GraniteTableHeaderCellComponent;
-    exports.ɵi = PurePipesModule;
-    exports.ɵj = GraniteTitlePipe;
-
-    Object.defineProperty(exports, '__esModule', { value: true });
-
-})));
-//# sourceMappingURL=ifsworld-granite-components.umd.js.map