@abgov/angular-components 2.0.0-alpha.5 → 2.0.0-alpha.7

package/bundles/abgov-angular-components.umd.js

@@ -1,2583 +1,194 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@abgov/web-components'), require('@angular/core'), require('@angular/common'), require('@angular/cdk/overlay'), require('@angular/forms'), require('rxjs')) :
-    typeof define === 'function' && define.amd ? define('@abgov/angular-components', ['exports', '@abgov/web-components', '@angular/core', '@angular/common', '@angular/cdk/overlay', '@angular/forms', 'rxjs'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.abgov = global.abgov || {}, global.abgov["angular-components"] = {}), null, global.ng.core, global.ng.common, global.ng.cdk.overlay, global.ng.forms, global.rxjs));
-})(this, (function (exports, webComponents, i0, common, overlay, forms, rxjs) { 'use strict';
-
-    function _interopNamespace(e) {
-        if (e && e.__esModule) return e;
-        var n = Object.create(null);
-        if (e) {
-            Object.keys(e).forEach(function (k) {
-                if (k !== 'default') {
-                    var d = Object.getOwnPropertyDescriptor(e, k);
-                    Object.defineProperty(n, k, d.get ? d : {
-                        enumerable: true,
-                        get: function () { return e[k]; }
-                    });
-                }
-            });
-        }
-        n["default"] = e;
-        return Object.freeze(n);
-    }
-
-    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-
-    /**
-     * A Government of Alberta styled button.
-     * selector: button[goa-button], input[type="button"][goa-button], input[type="submit"][goa-button]
-     */
-    var GoAButtonComponent = /** @class */ (function () {
-        function GoAButtonComponent() {
-            /**
-             * The appearance style of the button.
-             */
-            this.buttonType = 'primary';
-            /**
-             * The size of the button, controls font size and padding.
-             */
-            this.buttonSize = 'normal';
-        }
-        Object.defineProperty(GoAButtonComponent.prototype, "primaryBinding", {
-            /**
-             * Adds class goa-button to the host.
-             * @ignore
-             */
-            get: function () {
-                return true;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(GoAButtonComponent.prototype, "secondaryBinding", {
-            /**
-             * Adds class goa--secondary to the host if the buttonStyle = secondary.
-             * @ignore
-             */
-            get: function () {
-                return this.buttonType === 'secondary';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(GoAButtonComponent.prototype, "tertiaryBinding", {
-            /**
-             * Adds class goa--tertiary to the host if the buttonStyle = tertiary.
-             * @ignore
-             */
-            get: function () {
-                return this.buttonType === 'tertiary';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(GoAButtonComponent.prototype, "smallBinding", {
-            /**
-             * Adds class btn-small to the host if the buttonSize = small.
-             * @ignore
-             */
-            get: function () {
-                return this.buttonSize === 'small';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        /* eslint-disable @angular-eslint/no-empty-lifecycle-method */
-        GoAButtonComponent.prototype.ngOnInit = function () { };
-        return GoAButtonComponent;
-    }());
-    GoAButtonComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 
-                    // eslint-disable-next-line @angular-eslint/component-selector
-                    'button[goa-button], input[type="button"][goa-button], input[type="submit"][goa-button]',
-                    template: "<ng-content></ng-content>\n",
-                    styles: [""]
-                },] }
-    ];
-    GoAButtonComponent.ctorParameters = function () { return []; };
-    GoAButtonComponent.propDecorators = {
-        primaryBinding: [{ type: i0.HostBinding, args: ['class.goa-button',] }],
-        secondaryBinding: [{ type: i0.HostBinding, args: ['class.goa--secondary',] }],
-        tertiaryBinding: [{ type: i0.HostBinding, args: ['class.goa--tertiary',] }],
-        smallBinding: [{ type: i0.HostBinding, args: ['class.btn-small',] }],
-        buttonType: [{ type: i0.Input }],
-        buttonSize: [{ type: i0.Input }]
-    };
-
-    /**
-     * A logo for a Government of Alberta hosted microsite.
-     * selector: goa-microsite-logo
-     */
-    var GoAMicrositeLogoComponent = /** @class */ (function () {
-        function GoAMicrositeLogoComponent() {
-            /**
-             * The home page URL of the microsite.
-             */
-            this.serviceHome = 'https://www.alberta.ca/index.aspx';
-        }
-        /**
-         * @ignore
-         */
-        GoAMicrositeLogoComponent.prototype.ngOnInit = function () {
-            if (this.serviceName === undefined || this.serviceName === null) {
-                throw new TypeError("Input 'serviceName' is required.");
-            }
-        };
-        return GoAMicrositeLogoComponent;
-    }());
-    GoAMicrositeLogoComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'goa-microsite-logo',
-                    template: "<a href=\"{{serviceHome}}\" attr.aria-label=\"{{serviceHome}}\" class=\"microsite-link\">\n  <span class=\"image-desktop-tablet\"></span>\n  <span class=\"image-mobile\"></span>\n  <span class=\"name\">\n    {{serviceName}}\n  </span>\n</a>\n",
-                    styles: [""]
-                },] }
-    ];
-    GoAMicrositeLogoComponent.ctorParameters = function () { return []; };
-    GoAMicrositeLogoComponent.propDecorators = {
-        serviceName: [{ type: i0.Input }],
-        serviceHome: [{ type: i0.Input }]
-    };
-
-    /**
-     * A header component for a Government of Alberta hosted microsite.
-     * selector: goa-header
-     */
-    var GoAHeaderComponent = /** @class */ (function () {
-        // ServiceLevel = this.ServiceLevel;
-        function GoAHeaderComponent() {
-            /**
-             * The home page URL of the microsite.
-             */
-            this.serviceHome = 'https://www.alberta.ca/index.aspx';
-        }
-        /**
-         * @ignore
-         */
-        GoAHeaderComponent.prototype.ngOnInit = function () {
-            this.checkRequiredProps('serviceLevel', 'serviceName', 'serviceHome');
-        };
-        GoAHeaderComponent.prototype.serviceLevelCssClass = function () {
-            return "service-level--" + this.serviceLevel.toLowerCase();
-        };
-        GoAHeaderComponent.prototype.serviceLevelFormatted = function () {
-            return this.serviceLevel.toLowerCase();
-        };
-        GoAHeaderComponent.prototype.checkRequiredProps = function () {
-            var _this = this;
-            var props = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                props[_i] = arguments[_i];
-            }
-            props.forEach(function (prop) {
-                if (!_this[prop]) {
-                    throw new TypeError("Input '" + prop + "' is required.");
-                }
-            });
-        };
-        return GoAHeaderComponent;
-    }());
-    GoAHeaderComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'goa-header',
-                    template: "<header class=\"goa-header goa-official-site-header\">\n  <div>\n    <span class=\"service-level\" [ngClass]=\"serviceLevelCssClass()\">\n      {{ serviceLevelFormatted() }}\n    </span>\n  </div>\n  <div\n    *ngIf=\"serviceLevel === 'live'; else elseNotLive\"\n    class=\"site-text\"\n    i18n=\"Alberta.ca official site text on header\"\n  >\n    An official site of the\n    <a href=\"https://www.alberta.ca/index.aspx\" class=\"web-link\"\n      >Alberta Government</a\n    >\n  </div>\n  <ng-template #elseNotLive>\n    <div class=\"site-text\" i18n=\"Alberta.ca site text on header\">\n      This is a new\n      <a href=\"https://www.alberta.ca/index.aspx\" class=\"web-link\"\n        >Alberta Government</a\n      >\n      service\n    </div>\n  </ng-template>\n</header>\n<header class=\"goa-header goa-microsite-header\">\n  <goa-microsite-logo\n    [serviceName]=\"serviceName\"\n    [serviceHome]=\"serviceHome\"\n  ></goa-microsite-logo>\n  <ng-content></ng-content>\n</header>\n",
-                    styles: [""]
-                },] }
-    ];
-    GoAHeaderComponent.ctorParameters = function () { return []; };
-    GoAHeaderComponent.propDecorators = {
-        serviceName: [{ type: i0.Input }],
-        serviceHome: [{ type: i0.Input }],
-        serviceLevel: [{ type: i0.Input }]
-    };
-
-    /**
-     * Styles an anchor Design system compliant.
-     * selector: a[goa-button]
-     * @example <a goa-button linkType='right' href='...'>Text</a>
-     */
-    var GoAButtonLinkComponent = /** @class */ (function () {
-        function GoAButtonLinkComponent() {
-            /**
-             * The type of arrow to use.
-             */
-            this.linkType = 'right';
-            /**
-             * The size of the button, controls font size and padding.
-             */
-            this.buttonSize = 'normal';
-        }
-        Object.defineProperty(GoAButtonLinkComponent.prototype, "primaryBinding", {
-            /**
-             * Adds class goa-link-button to the host.
-             * @ignore
-             */
-            get: function () {
-                return true;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(GoAButtonLinkComponent.prototype, "rightBinding", {
-            /**
-             * Adds class right-arrow to the host if the linkType = right.
-             * @ignore
-             */
-            get: function () {
-                return this.linkType === 'right';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(GoAButtonLinkComponent.prototype, "upBinding", {
-            /**
-             * Adds class right-arrow to the host if the linkType = right.
-             * @ignore
-             */
-            get: function () {
-                return this.linkType === 'up';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(GoAButtonLinkComponent.prototype, "smallBinding", {
-            /**
-             * Adds class btn-small to the host if the buttonSize = small.
-             * @ignore
-             */
-            get: function () {
-                return this.buttonSize === 'small';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        /* eslint-disable @angular-eslint/no-empty-lifecycle-method */
-        GoAButtonLinkComponent.prototype.ngOnInit = function () { };
-        return GoAButtonLinkComponent;
-    }());
-    GoAButtonLinkComponent.decorators = [
-        { type: i0.Component, args: [{
-                    // eslint-disable-next-line @angular-eslint/component-selector
-                    selector: 'a[goa-button]',
-                    template: "<span>\n    <ng-content></ng-content>\n</span>",
-                    styles: [""]
-                },] }
-    ];
-    GoAButtonLinkComponent.ctorParameters = function () { return []; };
-    GoAButtonLinkComponent.propDecorators = {
-        primaryBinding: [{ type: i0.HostBinding, args: ['class.goa-link-button',] }],
-        rightBinding: [{ type: i0.HostBinding, args: ['class.right-arrow',] }],
-        upBinding: [{ type: i0.HostBinding, args: ['class.up-arrow',] }],
-        smallBinding: [{ type: i0.HostBinding, args: ['class.btn-small',] }],
-        linkType: [{ type: i0.Input }],
-        buttonSize: [{ type: i0.Input }]
-    };
-
-    /**
-     * Option component with to use with GoADropdown.
-     * selector: goa-option
-     */
-    var GoAOptionComponent = /** @class */ (function () {
-        function GoAOptionComponent() {
-            /**
-             * Is the option currently selected
-             * @ignore
-             */
-            this.selected = false;
-            /**
-             * Is the option selected by default?
-             */
-            this.defaultSelected = false;
-        }
-        /**
-         * Lifecycle hook OnInit
-         * @ignore
-         */
-        GoAOptionComponent.prototype.ngOnInit = function () {
-            if (this.id === undefined || this.id === null) {
-                throw new TypeError("Input 'id' is required.");
-            }
-            if (this.label === undefined || this.label === null) {
-                throw new TypeError("Input 'label' is required.");
-            }
-            this.selected = this.defaultSelected;
-        };
-        return GoAOptionComponent;
-    }());
-    GoAOptionComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'goa-option',
-                    template: "<ng-template #optionTemplate>\n    <div class=\"goa-option\">\n        <ng-content></ng-content>\n    </div>\n</ng-template>",
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [""]
-                },] }
-    ];
-    GoAOptionComponent.ctorParameters = function () { return []; };
-    GoAOptionComponent.propDecorators = {
-        id: [{ type: i0.Input }],
-        value: [{ type: i0.Input }],
-        label: [{ type: i0.Input }],
-        defaultSelected: [{ type: i0.Input }],
-        optionTemplate: [{ type: i0.ViewChild, args: ['optionTemplate',] }]
-    };
-
-    /*! *****************************************************************************
-    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;
+        typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@abgov/web-components')) :
+        typeof define === 'function' && define.amd ? define('@abgov/angular-components', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@abgov/web-components'], factory) :
+        (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.abgov = global.abgov || {}, global.abgov["angular-components"] = {}), global.ng.core, global.ng.common, global.ng.forms));
+})(this, (function (exports, i0, common, forms) { 'use strict';
+
+        function _interopNamespace(e) {
+                if (e && e.__esModule) return e;
+                var n = Object.create(null);
+                if (e) {
+                        Object.keys(e).forEach(function (k) {
+                                if (k !== 'default') {
+                                        var d = Object.getOwnPropertyDescriptor(e, k);
+                                        Object.defineProperty(n, k, d.get ? d : {
+                                                enumerable: true,
+                                                get: function () { return e[k]; }
+                                        });
+                                }
+                        });
+                }
+                n["default"] = e;
+                return Object.freeze(n);
+        }
+
+        var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+
+        var AngularComponentsModule = /** @class */ (function () {
+            function AngularComponentsModule() {
+            }
+            return AngularComponentsModule;
+        }());
+        AngularComponentsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: AngularComponentsModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+        AngularComponentsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: AngularComponentsModule, imports: [common.CommonModule, forms.FormsModule, forms.ReactiveFormsModule] });
+        AngularComponentsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: AngularComponentsModule, imports: [[common.CommonModule, forms.FormsModule, forms.ReactiveFormsModule]] });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: AngularComponentsModule, decorators: [{
+                    type: i0.NgModule,
+                    args: [{
+                            imports: [common.CommonModule, forms.FormsModule, forms.ReactiveFormsModule],
+                            schemas: [i0.CUSTOM_ELEMENTS_SCHEMA],
+                        }]
+                }] });
+
+        /* eslint-disable @typescript-eslint/no-explicit-any */
+        var ValueDirective = /** @class */ (function () {
+            function ValueDirective(elementRef) {
+                this.elementRef = elementRef;
+                this._value = "";
+                this.onChange = function () { };
+                this.onTouched = function () { };
+            }
+            Object.defineProperty(ValueDirective.prototype, "value", {
+                get: function () {
+                    return this._value;
+                },
+                set: function (val) {
+                    if (val !== this._value) {
+                        this._value = val;
+                        this.onChange(this._value);
+                        this.onTouched();
+                        this.elementRef.nativeElement.value = val;
                     }
-                    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;
-        Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
-    }) : (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 };
+                },
+                enumerable: false,
+                configurable: true
+            });
+            ValueDirective.prototype.writeValue = function (value) {
+                if (value) {
+                    this.value = value;
                 }
             };
-        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;
-    }
-
-    /**
-     * Option grouping component with to use with GoADropdown.
-     * selector: goa-option-group
-     */
-    var GoAOptionGroupComponent = /** @class */ (function () {
-        function GoAOptionGroupComponent(cdr) {
-            this.cdr = cdr;
-        }
-        /**
-         * Lifecycle hook OnInit
-         * @ignore
-         */
-        GoAOptionGroupComponent.prototype.ngOnInit = function () {
-            if (this.label === undefined || this.label === null || this.label === '') {
-                throw new TypeError("The input 'label' is required.");
-            }
-        };
-        /**
-         * Lifecycle hook AfterViewInit
-         * @ignore
-         */
-        GoAOptionGroupComponent.prototype.ngAfterViewInit = function () {
-            this._filteredOptions = __spreadArray([], __read(this.options));
-            // The template output cache is populated by child components during render, so tell angular that
-            // there have been changes during the render here.
-            this.cdr.detectChanges();
-        };
-        return GoAOptionGroupComponent;
-    }());
-    GoAOptionGroupComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'goa-option-group',
-                    template: "<!--Grab the <option> template from the GoAOption -->\n<ng-template #optionGroupTemplate>\n    <div class=\"goa-option-group\">\n        {{label}}\n        <div class=\"group-options\">\n            <ng-container class=\"goa-option\"> \n                <ng-template *ngFor=\"let option of _filteredOptions\" [ngTemplateOutlet]=\"option.optionTemplate\"></ng-template>\n            </ng-container>\n        </div>\n    </div>\n</ng-template>",
-                    styles: [".goa-option-group{font-weight:bold}.goa-option-group .group-options{padding-left:1em;font-weight:normal}\n"]
-                },] }
-    ];
-    GoAOptionGroupComponent.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef }
-    ]; };
-    GoAOptionGroupComponent.propDecorators = {
-        label: [{ type: i0.Input }],
-        options: [{ type: i0.ContentChildren, args: [GoAOptionComponent, { descendants: true },] }],
-        optionGroupTemplate: [{ type: i0.ViewChild, args: ['optionGroupTemplate',] }]
-    };
-
-    /**
-     * A dropdown component with Government of Alberta styling.
-     * selector: goa-dropdown
-     */
-    var GoADropdownComponent = /** @class */ (function () {
-        function GoADropdownComponent(cdr) {
-            this.cdr = cdr;
-            /**
-             * boolean for if the dropdown is open.
-             * @ignore
-             */
-            this._isOpen = false;
-            /**
-             * Is the required error tripped?
-             * @ignore
-             */
-            this._requiredError = false;
-            /**
-           * This position config ensures that the top "start" corner of the overlay
-           * is aligned with with the bottom "start" of the origin by default (overlapping
-           * the trigger completely). If the panel cannot fit below the trigger, it
-           * will fall back to a position above the trigger.
-           * @ignore
-           */
-            this._positions = [
+            ValueDirective.prototype.registerOnChange = function (fn) {
+                this.onChange = fn;
+            };
+            ValueDirective.prototype.registerOnTouched = function (fn) {
+                this.onTouched = fn;
+            };
+            ValueDirective.prototype.listenForValueChange = function (value) {
+                this.value = value;
+            };
+            return ValueDirective;
+        }());
+        ValueDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: ValueDirective, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+        ValueDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: ValueDirective, selector: "[goaValue]", host: { listeners: { "_change": "listenForValueChange($event.detail.value)" } }, providers: [
                 {
-                    originX: 'start',
-                    originY: 'bottom',
-                    overlayX: 'start',
-                    overlayY: 'top',
+                    provide: forms.NG_VALUE_ACCESSOR,
+                    useExisting: i0.forwardRef(function () { return ValueDirective; }),
+                    multi: true,
                 },
-                {
-                    originX: 'start',
-                    originY: 'top',
-                    overlayX: 'start',
-                    overlayY: 'bottom',
+            ], ngImport: i0__namespace });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: ValueDirective, decorators: [{
+                    type: i0.Directive,
+                    args: [{
+                            selector: "[goaValue]",
+                            providers: [
+                                {
+                                    provide: forms.NG_VALUE_ACCESSOR,
+                                    useExisting: i0.forwardRef(function () { return ValueDirective; }),
+                                    multi: true,
+                                },
+                            ],
+                        }]
+                }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { listenForValueChange: [{
+                        type: i0.HostListener,
+                        args: ["_change", ["$event.detail.value"]]
+                    }] } });
+        var ValuesDirective = /** @class */ (function () {
+            function ValuesDirective(elementRef) {
+                this.elementRef = elementRef;
+                this._value = [];
+                this.onChange = function () { };
+                this.onTouched = function () { };
+            }
+            Object.defineProperty(ValuesDirective.prototype, "value", {
+                get: function () {
+                    return this._value;
                 },
-            ];
-            /**
-             * All options currently matching filter including groups.
-             * @ignore
-             */
-            this._allFilteredOptions = [];
-            /**
-             * Whats the mode for typeahead.
-             */
-            this.typeaheadMode = 'none';
-            /**
-             * Is the select disabled.
-             */
-            this.disabled = false;
-            /**
-             * @ignore
-             */
-            this._multiple = false;
-            /**
-             * @ignore
-             */
-            this._required = false;
-            /**
-            * Event emitted containing the value field of all selected options when the selection changes.
-            */
-            this.selectionChange = new i0.EventEmitter();
-        }
-        Object.defineProperty(GoADropdownComponent.prototype, "selectedIds", {
-            /**
-             * Update the selected options, select the options with the given ids
-             */
-            set: function (ids) {
-                if (this.allOptions === undefined) {
-                    // aren't initialized yet, return
-                    return;
-                }
-                if (ids === null || ids === undefined) {
-                    ids = [];
-                }
-                if (ids.length > 1 && this.multiple === false) {
-                    throw new Error('Cannot select multiple options when the dropdown has multiple set to false.');
-                }
-                var selectedOptions = [];
-                this.allOptions.forEach(function (option) {
-                    if (ids.includes(option.id)) {
-                        option.selected = true;
-                        selectedOptions.push(option);
-                    }
-                    else {
-                        option.selected = false;
-                    }
-                });
-                this.selectionChanged(selectedOptions, true);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(GoADropdownComponent.prototype, "multiple", {
-            get: function () {
-                return this._multiple;
-            },
-            /**
-             * Is multiple selection?
-             */
-            set: function (value) {
-                this._multiple = value;
-                if (this._multiple === false) {
-                    // If we have changed from multiple to no multiple then deselect everything.
-                    this.selectedItems.forEach(function (option) {
-                        option.selected = false;
-                    });
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(GoADropdownComponent.prototype, "required", {
-            get: function () {
-                return this._required;
-            },
-            /**
-             * Is a selection required?
-             */
-            set: function (value) {
-                this._required = value;
-                this._requiredError = this.selectedItems.length === 0 && this._required === true;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        /**
-         * Lifecycle hook OnInit
-         * @ignore
-         */
-        /* eslint-disable @angular-eslint/no-empty-lifecycle-method */
-        GoADropdownComponent.prototype.ngOnInit = function () { };
-        /**
-         * Lifecycle hook AfterViewInit
-         * @ignore
-         */
-        GoADropdownComponent.prototype.ngAfterViewInit = function () {
-            this._triggerRect = this.textInput.nativeElement.getBoundingClientRect();
-            this._filteredOptions = __spreadArray([], __read(this.options));
-            this._allFilteredOptions = __spreadArray([], __read(this.allOptions));
-            if (this.selectedItems.length > 0) {
-                this.setTextInput(this.selectedItems[0].label);
-            }
-            // The template output cache is populated by child components during render,
-            // so tell angular that there have been changes during the render here.
-            this.cdr.detectChanges();
-        };
-        /**
-         * Called when user updates the text in the searchbox.
-         * @param text The text of the input
-         * @ignore
-         */
-        GoADropdownComponent.prototype.onFilterChange = function (text) {
-            // open the dropdown if it is not already
-            if (!this._isOpen === true) {
-                this._isOpen = true;
-            }
-            this.filterOptions(text);
-        };
-        /**
-         * Handler for keyboard events when menu is open.
-         * @param event keyboard event
-         * @ignore
-         */
-        GoADropdownComponent.prototype.overlayKeydown = function (event) {
-            if (event.code === 'Enter' || event.code === 'NumpadEnter') {
-                this.optionClicked(this._activeOption);
-            }
-            else if (event.code === 'ArrowDown') {
-                this._activeIndex = (this._activeIndex + 1) % this._allFilteredOptions.length;
-                this._activeOption = this._allFilteredOptions[this._activeIndex];
-            }
-            else if (event.code === 'ArrowUp') {
-                if (this._activeIndex > 0) {
-                    this._activeIndex = this._activeIndex - 1;
-                    this._activeOption = this._allFilteredOptions[this._activeIndex];
-                }
-            }
-        };
-        /**
-         * Sets the active option.  Active option is the option that when enter is pressed is selected.
-         * @param option The option to make the active option
-         * @ignore
-         */
-        GoADropdownComponent.prototype.setActiveOption = function (option) {
-            this._activeOption = option;
-            this._activeIndex = this._allFilteredOptions.findIndex(function (filteredOption) { return filteredOption.id === option.id; });
-        };
-        /**
-         * Handler for when the input is clicked.
-         * @ignore
-         */
-        GoADropdownComponent.prototype.inputClicked = function () {
-            if (this.disabled === false) {
-                this._isOpen = !this._isOpen;
-                // set the active option to the first in the list
-                if (this._allFilteredOptions.length > 0) {
-                    this._activeOption = this._allFilteredOptions[0];
-                    this._activeIndex = 0;
-                }
-            }
-        };
-        /**
-         * Handler for when descendant an option is clicked.
-         * @ignore
-         */
-        GoADropdownComponent.prototype.optionClicked = function (option) {
-            var selectedOptions = [];
-            if (this.multiple === true) {
-                option.selected = !option.selected;
-                selectedOptions = this.selectedItems;
-            }
-            else {
-                option.selected = !option.selected;
-                this.selectedItems.forEach(function (o) {
-                    if (option.id !== o.id) {
-                        // change all options that weren't selected to false without notifying change
-                        o.selected = false;
+                set: function (val) {
+                    if (val && val !== this._value) {
+                        this._setValue(val);
+                        this.elementRef.nativeElement.value = JSON.stringify(val);
                     }
-                    selectedOptions = [option];
-                });
-            }
-            this.selectionChanged(selectedOptions, true);
-            if (this.multiple === false) {
-                // close the dropdown if we are in single selection mode
-                this._isOpen = false;
-            }
-        };
-        /**
-         * Update view when selection changes
-         * @param options
-         * @ignore
-         */
-        GoADropdownComponent.prototype.selectionChanged = function (options, emitEvent) {
-            if (options.length > 0) {
-                var selectedOptions = options.map(function (o) { return o.label; }).join(', ');
-                this._requiredError = false;
-                this.setTextInput(selectedOptions);
-            }
-            else {
-                this._requiredError = this.required;
-                this.setTextInput('');
-            }
-            if (emitEvent === true) {
-                this.emitChange(options);
-            }
-        };
-        /**
-         * Emit selection change
-         * @ignore
-         */
-        GoADropdownComponent.prototype.emitChange = function (options) {
-            var values = options.map(function (option) { return option.value; });
-            this.selectionChange.emit(values);
-        };
-        Object.defineProperty(GoADropdownComponent.prototype, "selectedItems", {
-            /**
-             * Gets all the currently selected options
-             * @ignore
-             */
-            get: function () {
-                if (this.allOptions === undefined) {
-                    return [];
-                }
-                return __spreadArray([], __read(this.allOptions.filter(function (option) { return option.selected === true; })));
-            },
-            enumerable: false,
-            configurable: true
-        });
-        /**
-         * Set the text of the input.
-         * @param value The value to set
-         * @ignore
-         */
-        GoADropdownComponent.prototype.setTextInput = function (value) {
-            if (this.textInput) {
-                this.textInput.nativeElement.value = value;
-                // Exact matches show whole list?
-                this.filterOptions('');
-            }
-        };
-        /**
-         * Update the filtered options with the passed in filter text.
-         * @param filterText The text to filter by
-         * @ignore
-         */
-        GoADropdownComponent.prototype.filterOptions = function (filterText) {
-            var _this = this;
-            this.optionGroups.forEach(function (group) {
-                group._filteredOptions = group.options.filter(_this.typeaheadFilter.bind(_this, filterText, _this.typeaheadMode));
+                },
+                enumerable: false,
+                configurable: true
             });
-            this._filteredOptions = this.options.filter(this.typeaheadFilter.bind(this, filterText, this.typeaheadMode));
-            this._allFilteredOptions = this.allOptions.filter(this.typeaheadFilter.bind(this, filterText, this.typeaheadMode));
-            // The filters have changed so update the active option incase it has been filtered out.
-            this._activeOption = this._allFilteredOptions[this._activeIndex % this._allFilteredOptions.length];
-        };
-        /**
-         * Filter for typeahead with logic for what mode we are in.
-         * @param option
-         * @ignore
-         */
-        GoADropdownComponent.prototype.typeaheadFilter = function (filterText, typeaheadMode, option) {
-            if (typeaheadMode === 'none' || this.typeaheadMode === undefined) {
-                return true;
-            }
-            if (typeaheadMode === 'startsWith') {
-                return option.label.toLocaleLowerCase().startsWith(filterText.toLocaleLowerCase());
-            }
-            if (typeaheadMode === 'contains') {
-                return option.label.toLocaleLowerCase().includes(filterText.toLocaleLowerCase());
-            }
-        };
-        return GoADropdownComponent;
-    }());
-    GoADropdownComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'goa-dropdown',
-                    template: "<div class=\"goa-dropdown\" [ngClass]=\"{\n    'single-selection': multiple === false,\n    'has-error': _requiredError === true,\n    'opened': _isOpen,\n    'disabled': disabled === true\n    }\">    \n    <label class=\"dropdown-label\">{{label}}\n        <span *ngIf=\"required\" class=\"required-label\" i18n=\"Required label for dropdown\">(Required)</span>\n        <div (click)=\"inputClicked()\" class=\"dropdown-grouping\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n            <i class=\"goa-select-icon\"></i>\n            <input class=\"dropdown-textbox margin-override\" \n                #textInput \n                (input)=\"onFilterChange($event.target.value)\"\n                type=\"text\" \n                [attr.readonly]=\"typeaheadMode === 'none' ? 'readonly' : null\"\n                [attr.disabled]=\"disabled === true ? 'true' : null\"\n                placeholder=\"{{description}}\"> \n            <ng-template\n                cdkConnectedOverlay\n                cdkConnectedOverlayLockPosition\n                [cdkConnectedOverlayHasBackdrop]=\"true\"\n                [cdkConnectedOverlayViewportMargin]=\"20\"\n                cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n                (backdropClick)=\"_isOpen = false\"\n                (overlayKeydown)=\"overlayKeydown($event)\"\n                (detach)=\"_isOpen = false\"\n                [cdkConnectedOverlayOrigin]=\"trigger\"\n                [cdkConnectedOverlayOpen]=\"_isOpen\"\n                [cdkConnectedOverlayPositions]=\"_positions\"\n                [cdkConnectedOverlayMinWidth]=\"_triggerRect?.width\"\n                [cdkConnectedOverlayHeight]=\"menuHeight\"\n                [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n            >\n                <div class=\"dropdown-menu\">\n                    <div *ngFor=\"let optionGroup of optionGroups\" class=\"option-group\">\n                        <div *ngIf=\"optionGroup._filteredOptions.length > 0\">\n                            <div class=\"option-group-label\">\n                                {{optionGroup.label}}\n                            </div>\n                            <!--Grab the <option> template from the GoAOption -->\n                            <div class=\"option\"\n                                [ngClass]=\"{\n                                    'selected': option.selected,\n                                    'active': option.id === _activeOption.id\n                                }\"\n                                *ngFor=\"let option of (optionGroup._filteredOptions)\" \n                                (click)=\"optionClicked(option)\"\n                                (mouseover)=\"setActiveOption(option)\">\n                                <ng-template [ngTemplateOutlet]=\"option.optionTemplate\"></ng-template>\n                            </div>\n                        </div>\n                    </div>\n                    <!--Grab the <option> template from the GoAOption -->\n                    <div class=\"option\" \n                        [ngClass]=\"{\n                            'selected': option.selected,\n                            'active': option.id === _activeOption.id\n                        }\"\n                        *ngFor=\"let option of (_filteredOptions)\" \n                        (click)=\"optionClicked(option)\"\n                        (mouseover)=\"setActiveOption(option)\"> \n                        <ng-template [ngTemplateOutlet]=\"option.optionTemplate\"></ng-template>\n                    </div>\n                </div>      \n            </ng-template>   \n        </div>\n        <span *ngIf=\"!_requiredError\" class=\"helper-text\">{{description}}</span>\n        <span *ngIf=\"_requiredError === true\" class=\"error-text\" i18n=\"Required warning for dropdown\">At least one item must be selected.</span>   \n    </label>\n</div>\n",
-                    styles: [""]
-                },] }
-    ];
-    GoADropdownComponent.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef }
-    ]; };
-    GoADropdownComponent.propDecorators = {
-        typeaheadMode: [{ type: i0.Input }],
-        menuHeight: [{ type: i0.Input }],
-        label: [{ type: i0.Input }],
-        description: [{ type: i0.Input }],
-        selectedIds: [{ type: i0.Input }],
-        disabled: [{ type: i0.Input }],
-        multiple: [{ type: i0.Input }],
-        required: [{ type: i0.Input }],
-        textInput: [{ type: i0.ViewChild, args: ['textInput',] }],
-        allOptions: [{ type: i0.ContentChildren, args: [GoAOptionComponent, { descendants: true },] }],
-        options: [{ type: i0.ContentChildren, args: [GoAOptionComponent, { descendants: false },] }],
-        optionGroups: [{ type: i0.ContentChildren, args: [GoAOptionGroupComponent, { descendants: false },] }],
-        selectionChange: [{ type: i0.Output }]
-    };
-
-    var GOA_CHECKBOX_CONTROL_VALUE_ACCESSOR = {
-        provide: forms.NG_VALUE_ACCESSOR,
-        useExisting: i0.forwardRef(function () { return GoACheckboxComponent; }),
-        multi: true
-    };
-    /**
-     * Checkbox component with Government of Alberta styling.
-     * selector: goa-checkbox
-     */
-    var GoACheckboxComponent = /** @class */ (function () {
-        function GoACheckboxComponent(_changeDetectorRef) {
-            this._changeDetectorRef = _changeDetectorRef;
-            /**
-             * @ignore
-             */
-            this._indeterminate = false;
-            /**
-             * The position to display the label/text for the checbox.  Valid values are before and after.
-             */
-            this.labelPosition = 'after';
-            /**
-            * Event emitted containing the source checkbox, and whether or not it is checked.
-            */
-            this.selectionChange = new i0.EventEmitter();
-            /**
-             * @ignore
-             */
-            this._propagateChange = function (_) { };
-            this.uniqueId = "goa-checkbox-" + GoACheckboxComponent.idNum++;
-        }
-        Object.defineProperty(GoACheckboxComponent.prototype, "indeterminate", {
-            /**
-             * Boolean indicating whether or not the checkbox should display as indeterminate
-             * (i.e. it has associated 'child' checkboxes, some of which are selected).
-             */
-            get: function () { return this._indeterminate; },
-            set: function (value) {
-                // only do something if value has changed from current
-                if (value !== this.indeterminate) {
-                    this._indeterminate = value;
-                    // can't be indeterminate and checked, so clear checked
-                    if (this._indeterminate) {
-                        this.checked = false;
-                    }
+            ValuesDirective.prototype.writeValue = function (value) {
+                if (value) {
+                    this.value = value;
                 }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        /**
-         * Boolean indicating if the checkbox is required and not checked
-         * @ignore
-         */
-        GoACheckboxComponent.prototype.hasError = function () {
-            return this.required && !this.checked;
-        };
-        /**
-         * Implemented as part of ControlValueAccessor.
-         * @param value The model bound property, i.e. the value of checked
-         * @ignore
-         */
-        GoACheckboxComponent.prototype.writeValue = function (value) {
-            if ((value !== undefined) && (value !== null)) {
-                this.checked = value;
-                this._changeDetectorRef.detectChanges();
-            }
-        };
-        /**
-         * Implemented as part of ControlValueAccessor.
-         * @param fn The function to call on change.  Provided by ControlValueAccessor
-         * @ignore
-         */
-        GoACheckboxComponent.prototype.registerOnChange = function (fn) {
-            this._propagateChange = fn;
-        };
-        /**
-         * Implemented as part of ControlValueAccessor.
-         * @param fn The function to call on touch.  Provided by ControlValueAccessor
-         * @ignore
-         */
-        GoACheckboxComponent.prototype.registerOnTouched = function (fn) {
-            this._onTouchedCallback = fn;
-        };
-        ;
-        /**
-         * Toggles the checked value of the checkbox
-         * @ignore
-         */
-        GoACheckboxComponent.prototype.toggle = function () {
-            this.checked = !this.checked;
-        };
-        /**
-         * User interaction event on click of the checkbox or its label to indicate toggling of the current checked status.
-         * Emits selectionChange to parent components.
-         * @ignore
-         */
-        GoACheckboxComponent.prototype.onChange = function (event) {
-            event.stopPropagation();
-            this.toggle();
-            // user manually clicking overrides indeterminate and sets it to false
-            // this is because if they click and set to checked/unchecked, all 'child' checkboxes should get set to
-            // checked/unchecked (by user routine, not here), so this checkbox is no longer indeterminate
-            this.indeterminate = false;
-            var checkBoxChange = {
-                source: this,
-                checked: this.checked
             };
-            this._propagateChange(this.checked);
-            this.selectionChange.emit(checkBoxChange);
-        };
-        return GoACheckboxComponent;
-    }());
-    /**
-     * @ignore
-     */
-    GoACheckboxComponent.idNum = 0;
-    GoACheckboxComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'goa-checkbox',
-                    template: "\n<div class=\"goa-checkbox\" [ngClass]=\"{'goa-checkbox-disabled': disabled, 'has-error': hasError(), 'goa-checkbox-label-before': labelPosition === 'before'}\">\n    <label class=\"goa-checkbox-layout\" [attr.for]=\"uniqueId\">\n        <div class=\"goa-checkbox-container\"\n            [ngClass]=\"{'goa-checkbox-selected': checked, 'goa-checkbox-indeterminate': indeterminate}\">\n            <input type=\"checkbox\"\n                [id]=\"uniqueId\"\n                [checked]=\"checked\"\n                [disabled]=\"disabled\"\n                [required]=\"required\"\n                [attr.value]=\"value\"\n                (change)=\"onChange($event)\"\n            />\n            <svg *ngIf=\"checked\" id='checkmark' xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 12.18\" class=\"goa-checkmark\">\n                <path d=\"M5.09,9.64,1.27,5.82,0,7.09l5.09,5.09L16,1.27,14.73,0Z\"/>\n            </svg>\n            <svg *ngIf=\"indeterminate\" id='dashmark' xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15 2\" class=\"goa-indeterminate\">\n                <rect width=\"15\" height=\"2\"/>\n            </svg>\n        </div>\n        <div class=\"goa-checkbox-label\">\n            <ng-content></ng-content>\n        </div>\n    </label>\n</div>\n",
-                    //register our custom ControlValueAccessor with angular DI system so angular knows how to get instance of it for ngModel binding
-                    providers: [GOA_CHECKBOX_CONTROL_VALUE_ACCESSOR],
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [""]
-                },] }
-    ];
-    GoACheckboxComponent.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef }
-    ]; };
-    GoACheckboxComponent.propDecorators = {
-        value: [{ type: i0.Input }],
-        checked: [{ type: i0.Input }],
-        disabled: [{ type: i0.Input }],
-        required: [{ type: i0.Input }],
-        indeterminate: [{ type: i0.Input }],
-        labelPosition: [{ type: i0.Input }],
-        selectionChange: [{ type: i0.Output }]
-    };
-
-    var GoARadioChange = /** @class */ (function () {
-        function GoARadioChange() {
-        }
-        return GoARadioChange;
-    }());
-
-    var GoARadioService = /** @class */ (function () {
-        function GoARadioService() {
-            this.radioChangeMessage = new rxjs.BehaviorSubject(new GoARadioChange());
-        }
-        GoARadioService.prototype.selectRadio = function (radioChange) {
-            this.radioChangeMessage.next(radioChange);
-        };
-        return GoARadioService;
-    }());
-    GoARadioService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function GoARadioService_Factory() { return new GoARadioService(); }, token: GoARadioService, providedIn: "root" });
-    GoARadioService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root',
-                },] }
-    ];
-    GoARadioService.ctorParameters = function () { return []; };
-
-    /**
-     * Control value accessor to use for the component's provider
-     * @ignore
-     */
-    var GOA_RADIO_CONTROL_VALUE_ACCESSOR = {
-        provide: forms.NG_VALUE_ACCESSOR,
-        useExisting: i0.forwardRef(function () { return GoARadioComponent; }),
-        multi: true
-    };
-    /**
-     * Radiobutton component with Government of Alberta styling.
-     */
-    var GoARadioComponent = /** @class */ (function () {
-        function GoARadioComponent(_changeDetector, _radioService) {
-            this._changeDetector = _changeDetector;
-            this._radioService = _radioService;
-            /**
-             * The position to display the label/text for the radiobutton.  Valid values are before and after.
-             */
-            this.labelPosition = 'after';
-            /**
-            * Event emitted containing the source radiobutton, and whether or not it is checked.
-            */
-            this.selectionChange = new i0.EventEmitter();
-            /**
-             * @ignore
-             */
-            this._propagateChange = function (_) { };
-            this.uniqueId = "goa-radiobutton-" + GoARadioComponent.idNum++;
-        }
-        /**
-         * Lifecycle hook OnInit.  Used to subscribe to radio change messages from the radioService in order to know whether or not
-         * this radio should be checked or not.
-         * @ignore
-         */
-        GoARadioComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.radioServiceSubscription = this._radioService.radioChangeMessage.subscribe(function (rcm) {
-                if (rcm && rcm.source && rcm.source.name === _this.name && rcm.source.uniqueId !== _this.uniqueId) {
-                    _this.checked = false;
-                    _this._changeDetector.detectChanges();
-                }
-            });
-        };
-        /**
-         * Lifecycle hook OnDestroy.  Used to unsubscribe from the radio change messages.
-         * @ignore
-         */
-        GoARadioComponent.prototype.ngOnDestroy = function () {
-            this.radioServiceSubscription.unsubscribe();
-        };
-        /**
-         * Boolean indicating if the radiobutton is required and not checked
-         * @ignore
-         */
-        GoARadioComponent.prototype.hasError = function () {
-            return this.required && !this.checked;
-        };
-        /**
-         * Marks the radio button as needing checking for change detection.
-         * This method is exposed because the parent radio group will directly
-         * update bound properties of the radio button.
-         */
-        GoARadioComponent.prototype.markForCheck = function () {
-            // When group value changes, the button will not be notified. Use `markForCheck` to explicitly
-            // update radio button's status
-            this._changeDetector.markForCheck();
-        };
-        /**
-         * Implemented as part of ControlValueAccessor.
-         * @param value The model bound property, i.e. the value of checked
-         * @ignore
-         */
-        GoARadioComponent.prototype.writeValue = function (value) {
-            if ((value !== undefined) && (value !== null)) {
-                this.checked = value;
-                this._changeDetector.detectChanges();
-            }
-        };
-        /**
-         * Implemented as part of ControlValueAccessor.
-         * @param fn The function to call on change.  Provided by ControlValueAccessor
-         * @ignore
-         */
-        GoARadioComponent.prototype.registerOnChange = function (fn) {
-            this._propagateChange = fn;
-        };
-        /**
-         * Implemented as part of ControlValueAccessor.
-         * @param fn The function to call on touch.  Provided by ControlValueAccessor
-         * @ignore
-         */
-        GoARadioComponent.prototype.registerOnTouched = function (fn) {
-            this._onTouchedCallback = fn;
-        };
-        ;
-        /**
-         * User interaction event on click of the radiobutton or its label to indicate toggling of the current checked status.
-         * Emits selectionChange to parent components.
-         * @ignore
-         */
-        GoARadioComponent.prototype.onClick = function () {
-            // flip the checked state of this radio
-            this.checked = !this.checked;
-            // emit radio change event for those interested
-            var radioChange = {
-                source: this,
-                checked: this.checked
+            ValuesDirective.prototype.registerOnChange = function (fn) {
+                this.onChange = fn;
             };
-            this._propagateChange(this.checked);
-            this.selectionChange.emit(radioChange);
-            // notify other radios in group/with same name via radio service so they know to flip their states to not checked
-            this._radioService.selectRadio(radioChange);
-        };
-        return GoARadioComponent;
-    }());
-    /**
-     * Used to generate unique Id for this component
-     * @ignore
-     */
-    GoARadioComponent.idNum = 0;
-    GoARadioComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'goa-radio',
-                    template: "<div\n  class=\"goa-radio\"\n  [ngClass]=\"{\n    'goa-radio-disabled': disabled,\n    'has-error': hasError(),\n    'goa-radio-label-before': labelPosition === 'before'\n  }\"\n>\n  <div class=\"goa-radio-inline-block\">\n    <label class=\"goa-radio-layout\" [attr.for]=\"uniqueId\">\n      <div\n        class=\"goa-radio-container\"\n        [ngClass]=\"{ 'goa-radio-selected': checked }\"\n      >\n        <input\n          type=\"radio\"\n          [id]=\"uniqueId\"\n          [(checked)]=\"checked\"\n          [disabled]=\"disabled\"\n          [required]=\"required\"\n          [attr.value]=\"value\"\n          [name]=\"name\"\n          (change)=\"onClick()\"\n        />\n        <svg\n          *ngIf=\"checked\"\n          id=\"radiomark\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 12 12\"\n        >\n          <circle\n            id=\"Ellipse_128\"\n            data-name=\"Ellipse 128\"\n            cx=\"6\"\n            cy=\"6\"\n            r=\"6\"\n            fill=\"#fff\"\n          />\n        </svg>\n      </div>\n      <span class=\"goa-radio-label\">\n        <ng-content></ng-content>\n      </span>\n    </label>\n  </div>\n</div>\n",
-                    //register our custom ControlValueAccessor with angular DI system so angular knows how to get instance of it for ngModel binding
-                    providers: [GOA_RADIO_CONTROL_VALUE_ACCESSOR],
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [""]
-                },] }
-    ];
-    GoARadioComponent.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: GoARadioService }
-    ]; };
-    GoARadioComponent.propDecorators = {
-        name: [{ type: i0.Input }],
-        value: [{ type: i0.Input }],
-        checked: [{ type: i0.Input }],
-        disabled: [{ type: i0.Input }],
-        required: [{ type: i0.Input }],
-        labelPosition: [{ type: i0.Input }],
-        selectionChange: [{ type: i0.Output }]
-    };
-
-    /**
-     * Control value accessor to use for the component's provider
-     * @ignore
-     */
-    var GOA_RADIO_GROUP_CONTROL_VALUE_ACCESSOR = {
-        provide: forms.NG_VALUE_ACCESSOR,
-        useExisting: i0.forwardRef(function () { return GoARadioGroupComponent; }),
-        multi: true
-    };
-    /**
-     * Injection token that can be used to inject instances of `GoARadioGroupComponent`. It serves as
-     * alternative token to the actual `GoARadioGroupComponent` class which could cause unnecessary
-     * retention of the class and its component metadata.
-     * @ignore
-     */
-    var GOA_RADIO_GROUP = new i0.InjectionToken('GoARadioGroup');
-    /**
-     * Radiobutton group component with Government of Alberta styling.  Used to group a set of related radio buttons.
-     */
-    var GoARadioGroupComponent = /** @class */ (function () {
-        function GoARadioGroupComponent(_changeDetector, _radioService) {
-            this._changeDetector = _changeDetector;
-            this._radioService = _radioService;
-            /**
-             * @ignore
-             */
-            this._name = "goa-radio-group-" + GoARadioGroupComponent.idNum++;
-            /**
-             * @ignore
-             */
-            this._value = null;
-            /**
-             * @ignore
-             */
-            this._labelPosition = 'after';
-            /**
-             * The error message to display when the radio group selection is required and nothing has been selected
-             */
-            this.requiredErrorMessage = 'Please select one of the provided options.';
-            /**
-            * Event emitted containing the source radiobutton, and whether or not it is checked.
-            */
-            this.selectionChange = new i0.EventEmitter();
-            /**
-             * @ignore
-             */
-            this._propagateChange = function (_) { };
-            this.uniqueId = "goa-radiobutton-group-" + GoARadioGroupComponent.idNum++;
-        }
-        Object.defineProperty(GoARadioGroupComponent.prototype, "name", {
-            /**
-             * Indicates the "group" or set of radios this radio belongs to.
-             */
-            get: function () { return this._name; },
-            set: function (value) {
-                this._name = value;
-                this._updateRadioButtonNames();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(GoARadioGroupComponent.prototype, "value", {
-            /**
-             * Value/unique identifier for the object the radiobutton represents.
-             */
-            get: function () { return this._value; },
-            set: function (newValue) {
-                if (this._value !== newValue) {
-                    // Set this before proceeding to ensure no circular loop occurs with selection.
-                    this._value = newValue;
-                    this._updateSelectedRadioFromValue();
-                    this._setSelectedRadioToChecked();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(GoARadioGroupComponent.prototype, "selected", {
-            /**
-             * The currently selected radio.
-             */
-            get: function () { return this._selected; },
-            set: function (selected) {
-                this._selected = selected;
-                this.value = selected ? selected.value : null;
-                this._setSelectedRadioToChecked();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(GoARadioGroupComponent.prototype, "disabled", {
-            /**
-             * Boolean indicating whether or not the radiobutton is disabled.
-             */
-            get: function () { return this._disabled; },
-            set: function (value) {
-                this._disabled = value;
-                this._updateRadioButtonDisabled();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(GoARadioGroupComponent.prototype, "required", {
-            /**
-             * Boolean indicating whether or not the radiobutton is required.
-             */
-            get: function () { return this._required; },
-            set: function (value) {
-                this._required = value;
-                this._updateRadioButtonRequired();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(GoARadioGroupComponent.prototype, "labelPosition", {
-            /**
-             * The position to display the label/text for the radiobutton.  Valid values are before and after.
-             */
-            get: function () {
-                return this._labelPosition;
-            },
-            set: function (position) {
-                this._labelPosition = position === 'before' ? 'before' : 'after';
-                this._updateRadioButtonLabelPosition();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        /**
-         * Lifecycle hook AfterContentInit.  Used to set properties on child radios based on the radio group's properties.
-         * @ignore
-         */
-        GoARadioGroupComponent.prototype.ngAfterContentInit = function () {
-            this._updateRadioButtonNames();
-            this._updateRadioButtonDisabled();
-            this._updateRadioButtonRequired();
-            this._updateRadioButtonLabelPosition();
-            this._updateSelectedRadioFromValue();
-        };
-        /**
-         * Lifecycle hook OnInit.  Used to subscribe to radio change messages from the radioService in order to set the 'selected' property
-         * of the radio group based on which radio was selected
-         * @ignore
-         */
-        GoARadioGroupComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.radioServiceSubscription = this._radioService.radioChangeMessage.subscribe(function (rcm) {
-                if (rcm && rcm.source && rcm.source.name === _this.name && rcm.checked) {
-                    _this.selected = _this._radios.find(function (r) { return r.uniqueId === rcm.source.uniqueId; });
-                    _this.selectionChange.emit(rcm);
-                }
-            });
-        };
-        /**
-         * Lifecycle hook OnDestroy.  Used to unsubscribe from the radio change messages.
-         * @ignore
-         */
-        GoARadioGroupComponent.prototype.ngOnDestroy = function () {
-            this.radioServiceSubscription.unsubscribe();
-        };
-        /**
-         * Updates the `selected` radio button from the internal _value state.
-         */
-        GoARadioGroupComponent.prototype._updateSelectedRadioFromValue = function () {
-            var _this = this;
-            // If the value already matches the selected radio, do nothing.
-            var isAlreadySelected = this._selected !== undefined && this._selected !== null && this._selected.value === this._value;
-            // need to wrap in setTimeout because _radios hasnt resolved yet when Input setter fires, need to get to next cycle in page lifecycle
-            setTimeout(function () {
-                if (_this._radios && !isAlreadySelected) {
-                    _this._selected = null;
-                    _this._radios.forEach(function (radio) {
-                        radio.checked = _this.value === radio.value;
-                        if (radio.checked) {
-                            _this._selected = radio;
-                        }
-                    });
-                }
-            });
-        };
-        /**
-         * Sets the selected radio to checked if it is not already checked
-         */
-        GoARadioGroupComponent.prototype._setSelectedRadioToChecked = function () {
-            if (this.selected && !this.selected.checked) {
-                this.selected.checked = true;
-            }
-        };
-        /**
-         * Updates the 'name' property of the child radio buttons to match that of the group so they all function together
-         */
-        GoARadioGroupComponent.prototype._updateRadioButtonNames = function () {
-            var _this = this;
-            if (this._radios) {
-                this._radios.forEach(function (radio) {
-                    radio.name = _this.name;
-                    radio.markForCheck();
-                });
-            }
-        };
-        /**
-         * Updates the 'disabled' property of the child radio buttons to match the disabled state of the radio group
-         */
-        GoARadioGroupComponent.prototype._updateRadioButtonDisabled = function () {
-            var _this = this;
-            if (this._radios) {
-                this._radios.forEach(function (radio) {
-                    radio.required = _this._required;
-                    radio.markForCheck();
-                });
-            }
-        };
-        /**
-         * Updates the 'required' property of the child radio buttons to match the required state of the radio group
-         */
-        GoARadioGroupComponent.prototype._updateRadioButtonRequired = function () {
-            var _this = this;
-            if (this._radios) {
-                this._radios.forEach(function (radio) {
-                    radio.required = _this._required;
-                    radio.markForCheck();
-                });
-            }
-        };
-        /**
-         * Updates the 'labelPosition' property of the child radio buttons to match the labelPosition state of the radio group
-         */
-        GoARadioGroupComponent.prototype._updateRadioButtonLabelPosition = function () {
-            var _this = this;
-            if (this._radios) {
-                this._radios.forEach(function (radio) {
-                    radio.labelPosition = _this._labelPosition;
-                    radio.markForCheck();
-                });
-            }
-        };
-        /**
-         * Boolean indicating if the radiobutton is required and not checked
-         * @ignore
-         */
-        GoARadioGroupComponent.prototype.hasError = function () {
-            var hasSelectedRadio = this._radios.some(function (r) { return r.checked; });
-            return this.required && !hasSelectedRadio;
-        };
-        /**
-         * Implemented as part of ControlValueAccessor.
-         * @param value The model bound property, i.e. the value of checked
-         * @ignore
-         */
-        GoARadioGroupComponent.prototype.writeValue = function (value) {
-            if ((value !== undefined) && (value !== null)) {
-                this.selected = value;
-                this._changeDetector.detectChanges();
-            }
-        };
-        /**
-         * Implemented as part of ControlValueAccessor.
-         * @param fn The function to call on change.  Provided by ControlValueAccessor
-         * @ignore
-         */
-        GoARadioGroupComponent.prototype.registerOnChange = function (fn) {
-            this._propagateChange = fn;
-        };
-        /**
-         * Implemented as part of ControlValueAccessor.
-         * @param fn The function to call on touch.  Provided by ControlValueAccessor
-         * @ignore
-         */
-        GoARadioGroupComponent.prototype.registerOnTouched = function (fn) {
-            this._onTouchedCallback = fn;
-        };
-        ;
-        return GoARadioGroupComponent;
-    }());
-    /**
-     * Used to generate unique Id for this component
-     * @ignore
-     */
-    GoARadioGroupComponent.idNum = 0;
-    GoARadioGroupComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'goa-radio-group',
-                    template: "<div class=\"goa-radio-group\" [ngClass]=\"{'goa-radio-group-disabled': disabled}\">\n  <span *ngIf=\"title\" class=\"radio-group-title\">{{title}}</span>\n  <span *ngIf=\"required\" class=\"required-label\" i18n=\"Required label for dropdown\">(Required)</span>\n  <div *ngIf=\"helperText\" class=\"helper-text\">{{helperText}}</div>\n  <div class=\"goa-radios\">\n    <ng-content></ng-content>\n  </div>\n  <div *ngIf=\"hasError()\" class=\"error-text\">{{requiredErrorMessage}}</div>\n</div>\n",
-                    providers: [
-                        GOA_RADIO_GROUP_CONTROL_VALUE_ACCESSOR,
-                        { provide: GOA_RADIO_GROUP, useExisting: GoARadioGroupComponent }
-                    ],
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [""]
-                },] }
-    ];
-    GoARadioGroupComponent.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: GoARadioService }
-    ]; };
-    GoARadioGroupComponent.propDecorators = {
-        _radios: [{ type: i0.ContentChildren, args: [i0.forwardRef(function () { return GoARadioComponent; }), { descendants: true },] }],
-        title: [{ type: i0.Input }],
-        helperText: [{ type: i0.Input }],
-        requiredErrorMessage: [{ type: i0.Input }],
-        name: [{ type: i0.Input }],
-        value: [{ type: i0.Input }],
-        selected: [{ type: i0.Input }],
-        disabled: [{ type: i0.Input }],
-        required: [{ type: i0.Input }],
-        labelPosition: [{ type: i0.Input }],
-        selectionChange: [{ type: i0.Output }]
-    };
-
-    /**
-     * Callout component to describe important changes or facts.
-     * selector: goa-callout
-     */
-    var GoACalloutComponent = /** @class */ (function () {
-        function GoACalloutComponent() {
-            /**
-             * The type of the callout, changes stylings and icons.
-             */
-            this.type = 'information';
-        }
-        /**
-         * @ignore
-         */
-        GoACalloutComponent.prototype.ngOnInit = function () {
-            if (this.title === undefined || this.title === null) {
-                throw new TypeError("Input 'title' is required.");
-            }
-        };
-        return GoACalloutComponent;
-    }());
-    GoACalloutComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'goa-callout',
-                    template: "<div\n  class=\"goa-callout\"\n  [ngClass]=\"{\n    'goa--event': type === 'event',\n    'goa--important': type === 'important',\n    'goa--emergency': type === 'emergency',\n    'goa--success': type === 'success'\n  }\"\n>\n  <div>\n    <h3>{{ title }}</h3>\n    <div class=\"messages\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n",
-                    styles: [""]
-                },] }
-    ];
-    GoACalloutComponent.ctorParameters = function () { return []; };
-    GoACalloutComponent.propDecorators = {
-        type: [{ type: i0.Input }],
-        title: [{ type: i0.Input }]
-    };
-
-    /**
-     * Government of Alberta styled notification, comes in 4 variants: emergency, event, information, important.
-     * Can set the message and optionally a link url.
-     * selector: goa-notification
-     */
-    var GoANotificationComponent = /** @class */ (function () {
-        function GoANotificationComponent(_changeDetectorRef) {
-            this._changeDetectorRef = _changeDetectorRef;
-            /**
-             * Whether or not the notification has been dismissed.
-             * @ignore
-             */
-            this._isDismissed = false;
-            /**
-             * The type of the notification, changes stylings and icons.
-             */
-            this.type = 'information';
-            /**
-             * Can the notification be dismissed?
-             */
-            this.isDismissable = true;
-            /**
-            * Event emitted when the notification has been dismissed by the user.
-            */
-            this.dismiss = new i0.EventEmitter();
-        }
-        /**
-         * @ignore
-         */
-        GoANotificationComponent.prototype.ngOnInit = function () {
-        };
-        /**
-         * @ignore
-         */
-        GoANotificationComponent.prototype.dismissClick = function () {
-            this._isDismissed = true;
-            this._changeDetectorRef.detectChanges();
-            this.dismiss.emit();
-        };
-        return GoANotificationComponent;
-    }());
-    GoANotificationComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'goa-notification',
-                    template: "\n<div class=\"goa-notification\"\n    [ngClass]=\"{\n        'dismissed': _isDismissed === true,\n        'goa--event': type === 'event',\n        'goa--important': type === 'important',\n        'goa--emergency': type === 'emergency'\n        }\">\n    <div class=\"content\">\n        <a *ngIf=\"notificationUrl\" class=\"message\" href={{notificationUrl}}>{{message}}</a>\n        <span *ngIf=\"!notificationUrl\" class=\"message\">{{message}}</span>\n        <a *ngIf=\"isDismissable === true\" class=\"close\" i18n-title title=\"Dismiss\" (click)=\"dismissClick()\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n                <path d=\"M 15.99 14.54C 15.99 14.54 14.54 15.99 14.54 15.99 14.54 15.99 8 9.45 8 9.45 8 9.45 1.46 15.99 1.46 15.99 1.46 15.99 0.01 14.54 0.01 14.54 0.01 14.54 6.55 8 6.55 8 6.55 8 0.01 1.46 0.01 1.46 0.01 1.46 1.46 0.01 1.46 0.01 1.46 0.01 8 6.55 8 6.55 8 6.55 14.54 0.01 14.54 0.01 14.54 0.01 15.99 1.46 15.99 1.46 15.99 1.46 9.45 8 9.45 8 9.45 8 15.99 14.54 15.99 14.54Z\"/>\n            </svg>\n        </a>\n    </div>\n</div>\n\n",
-                    styles: [""]
-                },] }
-    ];
-    GoANotificationComponent.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef }
-    ]; };
-    GoANotificationComponent.propDecorators = {
-        type: [{ type: i0.Input }],
-        message: [{ type: i0.Input }],
-        notificationUrl: [{ type: i0.Input }],
-        isDismissable: [{ type: i0.Input }],
-        dismiss: [{ type: i0.Output }]
-    };
-
-    /**
-     * Government of Alberta styled notification banner.  Contains one or more notifications.
-     * selector: goa-notification-banner
-     */
-    var GoANotificationBannerComponent = /** @class */ (function () {
-        function GoANotificationBannerComponent() {
-            /**
-             * The accessibility title for the notification banner.  Is not displayed.
-             */
-            this.title = 'Notifications';
-        }
-        /**
-         * @ignore
-         */
-        GoANotificationBannerComponent.prototype.ngOnInit = function () {
-        };
-        return GoANotificationBannerComponent;
-    }());
-    GoANotificationBannerComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'goa-notification-banner',
-                    template: "<div class=\"goa-notifications\">\r\n    <h2 class=\"title\">{{title}}</h2>\r\n    <ng-content></ng-content>\r\n</div>\r\n\r\n",
-                    styles: [""]
-                },] }
-    ];
-    GoANotificationBannerComponent.ctorParameters = function () { return []; };
-    GoANotificationBannerComponent.propDecorators = {
-        title: [{ type: i0.Input }],
-        _notifications: [{ type: i0.ContentChildren, args: [GoANotificationComponent, { descendants: false },] }]
-    };
-
-    var GoASkeletonImageContentComponent = /** @class */ (function () {
-        function GoASkeletonImageContentComponent() {
-            this.rows = 1;
-            this.arr = Array;
-        }
-        return GoASkeletonImageContentComponent;
-    }());
-    GoASkeletonImageContentComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'goa-skeleton-image-content',
-                    template: "<div class=\"skeleton-image-content\">\n  <goa-skeleton-element type=\"thumbnail\"></goa-skeleton-element>\n  <div class=\"skeleton-image-content__text\">\n    <goa-skeleton-element\n      type=\"title\"\n      *ngFor=\"let i of arr(rows).fill(1)\"\n    ></goa-skeleton-element>\n  </div>\n</div>\n",
-                    styles: [""]
-                },] }
-    ];
-    GoASkeletonImageContentComponent.ctorParameters = function () { return []; };
-    GoASkeletonImageContentComponent.propDecorators = {
-        rows: [{ type: i0.Input }]
-    };
-
-    var GoASkeletonElementComponent = /** @class */ (function () {
-        function GoASkeletonElementComponent() {
-            this.type = 'text';
-        }
-        Object.defineProperty(GoASkeletonElementComponent.prototype, "elementClass", {
-            get: function () {
-                return "skeleton " + this.type;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return GoASkeletonElementComponent;
-    }());
-    GoASkeletonElementComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'goa-skeleton-element',
-                    template: "<div [ngClass]=\"elementClass\"></div>",
-                    styles: [""]
-                },] }
-    ];
-    GoASkeletonElementComponent.ctorParameters = function () { return []; };
-    GoASkeletonElementComponent.propDecorators = {
-        type: [{ type: i0.Input }]
-    };
-
-    /**
-     * Header component used for Government of Alberta cards.
-     * Put header content inside of component and it will project to the header section of the card.
-     * selector: goa-card-header
-     * @example <goa-card><goa-card-header>My content</goa-card-header></goa-card>
-     */
-    var GoACardHeaderComponent = /** @class */ (function () {
-        function GoACardHeaderComponent() {
-        }
-        /**
-         * @ignore
-         */
-        GoACardHeaderComponent.prototype.ngOnInit = function () {
-        };
-        return GoACardHeaderComponent;
-    }());
-    GoACardHeaderComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'goa-card-header',
-                    template: "<ng-container>\n    <ng-content></ng-content>\n</ng-container>",
-                    styles: [""]
-                },] }
-    ];
-    GoACardHeaderComponent.ctorParameters = function () { return []; };
-
-    /**
-     * Footer component used for Government of Alberta cards.
-     * Put footer content inside of component and it will project to the confootertent section of the card.
-     * selector: goa-card-footer
-     * @example <goa-card><goa-card-footer>My content</goa-card-footer></goa-card>
-     */
-    var GoACardFooterComponent = /** @class */ (function () {
-        function GoACardFooterComponent() {
-        }
-        /**
-         * @ignore
-         */
-        GoACardFooterComponent.prototype.ngOnInit = function () {
-        };
-        return GoACardFooterComponent;
-    }());
-    GoACardFooterComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'goa-card-footer',
-                    template: "<ng-container>\n    <ng-content></ng-content>\n</ng-container>",
-                    styles: [""]
-                },] }
-    ];
-    GoACardFooterComponent.ctorParameters = function () { return []; };
-
-    /**
-     * cardImage image component used for Government of Alberta cards.
-     * It will project to the content section of the card.
-     * selector: goa-card-thumb-image
-     * @example <goa-card><goa-card-thumb-image url="" alt=""></goa-card-thumb-image></goa-card>
-     */
-    var GoACardThumbImageComponent = /** @class */ (function () {
-        function GoACardThumbImageComponent() {
-        }
-        /**
-         * @ignore
-         */
-        GoACardThumbImageComponent.prototype.ngOnInit = function () { };
-        return GoACardThumbImageComponent;
-    }());
-    GoACardThumbImageComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'goa-card-thumb-image',
-                    template: "<ng-container>\n    <img src=\"{{url}}\" [attr.alt]=\"alt\">\n</ng-container>",
-                    styles: [":host img,:host iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}\n"]
-                },] }
-    ];
-    GoACardThumbImageComponent.ctorParameters = function () { return []; };
-    GoACardThumbImageComponent.propDecorators = {
-        url: [{ type: i0.Input }],
-        alt: [{ type: i0.Input }]
-    };
-
-    /**
-     * Content component used for Government of Alberta cards.
-     * Put content inside of component and it will project to the content section of the card.
-     * selector: goa-card-content
-     * @example <goa-card><goa-card-content>My content</goa-card-content></goa-card>
-     */
-    var GoACardContentComponent = /** @class */ (function () {
-        function GoACardContentComponent() {
-        }
-        /**
-         * @ignore
-         */
-        GoACardContentComponent.prototype.ngOnInit = function () {
-        };
-        return GoACardContentComponent;
-    }());
-    GoACardContentComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'goa-card-content',
-                    template: "<ng-container>\n    <ng-content></ng-content>\n</ng-container>",
-                    styles: [""]
-                },] }
-    ];
-    GoACardContentComponent.ctorParameters = function () { return []; };
-
-    /**
-     * Card component with Government of Alberta styling.
-     * Place desired sub-components (goa-card-thumb-image, goa-card-header, goa-card-content, goa-card-footer) inside of content.
-     * selector: goa-card
-     */
-    var GoACardComponent = /** @class */ (function () {
-        function GoACardComponent() {
-            /**
-             * What percentage of container width to take.
-             */
-            this.cardSize = 'full';
-        }
-        /**
-         * @ignore
-         */
-        GoACardComponent.prototype.ngOnInit = function () {
-        };
-        return GoACardComponent;
-    }());
-    GoACardComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'goa-card',
-                    template: "<div\n  class=\"goa-card\"\n  [ngClass]=\"{\n    'card-auto': cardSize === 'auto'\n  }\" [attr.data-skeleton]=\"isSkeleton ? '' : null\"\n>\n  <div class=\"goa-poster\">\n    <ng-content select=\"goa-card-thumb-image\"></ng-content>\n  </div>\n  <div class=\"card-content\">\n    <a class=\"goa-title\" href=\"{{ titleUrl }}\">\n      <ng-content select=\"goa-card-header\"></ng-content>\n    </a>\n    <div class=\"goa-text\">\n      <ng-content select=\"goa-card-content\"></ng-content>\n    </div>\n    <div class=\"goa-footer\">\n      <ng-content select=\"goa-card-footer\"></ng-content>\n    </div>\n  </div>\n</div>\n",
-                    styles: [""]
-                },] }
-    ];
-    GoACardComponent.ctorParameters = function () { return []; };
-    GoACardComponent.propDecorators = {
-        cardSize: [{ type: i0.Input }],
-        titleUrl: [{ type: i0.Input }],
-        isSkeleton: [{ type: i0.Input }]
-    };
-
-    /**
-     * A wrapper/group for a set of card display
-     */
-    var GoACardGroupComponent = /** @class */ (function () {
-        function GoACardGroupComponent() {
-        }
-        /* eslint-disable @angular-eslint/no-empty-lifecycle-method */
-        GoACardGroupComponent.prototype.ngOnInit = function () { };
-        return GoACardGroupComponent;
-    }());
-    GoACardGroupComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'goa-card-group',
-                    template: "<ng-container>\n  <div class=\"goa-card-group\">\n    <div class=\"card-group-title\">{{ title }}</div>\n    <div\n      [ngClass]=\"{\n        'card-group-basic': layout === 'basic',\n        'card-group-column': layout === 'column'\n      }\"\n    >\n      <ng-content></ng-content>\n      <div *ngFor=\"let card of cardItems\">\n        <goa-card titleUrl=\"{{ card.titleUrl }}\">\n          <goa-card-thumb-image\n            url=\"{{ card.cardImageUrl }}\"\n            alt=\"hero pic\"\n          ></goa-card-thumb-image>\n          <goa-card-header>{{ card.title }}</goa-card-header>\n          <goa-card-content>{{ card.description }}</goa-card-content>\n        </goa-card>\n      </div>\n    </div>\n  </div>\n</ng-container>\n",
-                    styles: [""]
-                },] }
-    ];
-    GoACardGroupComponent.ctorParameters = function () { return []; };
-    GoACardGroupComponent.propDecorators = {
-        layout: [{ type: i0.Input }],
-        title: [{ type: i0.Input }],
-        cardItems: [{ type: i0.Input }]
-    };
-
-    var GoAHeroBannerContentComponent = /** @class */ (function () {
-        function GoAHeroBannerContentComponent() {
-        }
-        GoAHeroBannerContentComponent.prototype.ngOnInit = function () {
-        };
-        return GoAHeroBannerContentComponent;
-    }());
-    GoAHeroBannerContentComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'goa-hero-banner-content',
-                    template: "<ng-container>\n  <p class=\"goa-hero-banner-content\" role=\"note\">\n    <ng-content></ng-content>\n  </p>\n</ng-container>\n",
-                    styles: [""]
-                },] }
-    ];
-    GoAHeroBannerContentComponent.ctorParameters = function () { return []; };
-
-    var GoAHeroBannerLinkComponent = /** @class */ (function () {
-        function GoAHeroBannerLinkComponent() {
-        }
-        GoAHeroBannerLinkComponent.prototype.ngOnInit = function () {
-        };
-        return GoAHeroBannerLinkComponent;
-    }());
-    GoAHeroBannerLinkComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'goa-hero-banner-link',
-                    template: "<ng-container>\n  <a class=\"goa-link-button right-arrow\" [href]=\"url\" role=\"link\">\n    <ng-content></ng-content>\n  </a>\n</ng-container>\n",
-                    styles: [""]
-                },] }
-    ];
-    GoAHeroBannerLinkComponent.ctorParameters = function () { return []; };
-    GoAHeroBannerLinkComponent.propDecorators = {
-        url: [{ type: i0.Input }]
-    };
-
-    var GoAHeroBannerComponent = /** @class */ (function () {
-        function GoAHeroBannerComponent() {
-        }
-        GoAHeroBannerComponent.prototype.ngOnInit = function () {
-        };
-        return GoAHeroBannerComponent;
-    }());
-    GoAHeroBannerComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'goa-hero-banner',
-                    template: "<div class=\"goa-hero\"\n  style=\"background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.40) 40%, rgba(0, 0, 0, 0.6) 100%), url({{backgroundUrl}});\"\n>\n  <h1 role=\"heading\">{{ title }}</h1>\n  <ng-content select=\"goa-hero-banner-content\"></ng-content>\n  <ng-content select=\"goa-hero-banner-link\"></ng-content>\n</div>\n",
-                    styles: [""]
-                },] }
-    ];
-    GoAHeroBannerComponent.ctorParameters = function () { return []; };
-    GoAHeroBannerComponent.propDecorators = {
-        title: [{ type: i0.Input }],
-        backgroundUrl: [{ type: i0.Input }]
-    };
-
-    /**
-     * A page load indicator component with Government of Alberta styling.
-     * selector: goa-page-load-indicator
-     */
-    var GoAPageLoadIndicatorComponent = /** @class */ (function () {
-        function GoAPageLoadIndicatorComponent() {
-            /**
-             * Sets the page loader visibility state.
-             */
-            this.visible = false;
-            /**
-             * The type of page loader, deterministic and indeterministic.
-             */
-            this.type = 'infinite';
-            /**
-            * The message to display while loading.
-            */
-            this.message = '';
-            /**
-             * Sets the percentage value of the page loader while set to progress type, 0 - 100 percent.
-             */
-            this.value = 0;
-            /**
-             * Sets the page to locked and does not accept user input. When not set the component
-             * can be used as a child element without blocking user input.
-             */
-            this.pagelock = true;
-            /**
-             * Sets the progress indicator display type size.
-             */
-            this.displayType = 'large';
-            /**
-             * Set defaults
-             */
-            this.strokeDashoffsetDefault = 280;
-            this.progressMaxValue = 283;
-            this.strokeDashoffset = 0;
-        }
-        GoAPageLoadIndicatorComponent.prototype.ngOnInit = function () {
-            if (this.type !== 'progress') {
-                this.strokeDashoffset = this.strokeDashoffsetDefault;
-            }
-        };
-        GoAPageLoadIndicatorComponent.prototype.ngOnChanges = function (changes) {
-            if (changes.visible) {
-                this.blockScrollingToggle(changes.visible.currentValue);
-            }
-            if (changes.value) {
-                if (this.type === 'progress') {
-                    this.setProgress(changes.value.currentValue);
+            ValuesDirective.prototype.registerOnTouched = function (fn) {
+                this.onTouched = fn;
+            };
+            ValuesDirective.prototype.listenForValueChange = function (value) {
+                if (!value) {
+                    this._setValue(undefined);
+                    return;
                 }
-            }
-        };
-        /**
-         * Toggles the page scrolling based on page load indicator's visibility.
-         * @param isBlock The flag to enable/disable page scroll.
-         * @ignore
-         */
-        GoAPageLoadIndicatorComponent.prototype.blockScrollingToggle = function (isBlock) {
-            if (!isBlock || !this.pagelock) {
-                document.body.style.removeProperty('height');
-                document.body.style.removeProperty('overflow');
-            }
-            else {
-                document.body.style.height = '100%';
-                document.body.style.overflow = 'hidden';
-            }
-        };
-        /**
-         * Blocks the keyboard input when page load indicator is visible.
-         * @ignore
-         */
-        GoAPageLoadIndicatorComponent.prototype.disableKeyboardInputHandler = function (event) {
-            if (this.visible) {
-                event.returnValue = false;
-                event.preventDefault();
-            }
-        };
-        GoAPageLoadIndicatorComponent.prototype.ngOnDestroy = function () {
-            this.blockScrollingToggle(false);
-        };
-        GoAPageLoadIndicatorComponent.prototype.setProgress = function (progress) {
-            if (this.type !== 'progress') {
-                return;
-            }
-            ;
-            if (progress === 0) {
-                this.strokeDashoffset = this.progressMaxValue;
-                return;
-            }
-            if (progress >= 100) {
-                return;
-            }
-            var value = this.progressMaxValue - Math.round(this.progressMaxValue * progress / 100);
-            this.strokeDashoffset = value;
-        };
-        return GoAPageLoadIndicatorComponent;
-    }());
-    GoAPageLoadIndicatorComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'goa-page-load-indicator',
-                    template: "<div *ngIf=\"visible\" class=\"progress-container--{{ displayType }}\">\n  <svg\n    [ngClass]=\"{\n            'svg': displayType === 'large',\n            'svg--small': displayType === 'small'\n          }\"\n    fill=\"none\"\n    viewBox=\"0 0 100 100\"\n    xmlns=\"http://www.w3.org/2000/svg\">\n    <circle class=\"base-circle\" cx=\"50\" cy=\"50\" r=\"45\"/>\n    <circle\n      [ngClass]=\"{\n        'progress-circle--infinite': type === 'infinite',\n        'progress-circle': type === 'progress'\n      }\"\n      cx=\"50\"\n      cy=\"50\"\n      r=\"45\"\n      [style.stroke-dashoffset]=\"strokeDashoffset\"/>\n  </svg>\n\n  <span class=\"progress-message--{{ displayType }}\">\n    {{ message }}\n  </span>\n</div>\n",
-                    styles: [""]
-                },] }
-    ];
-    GoAPageLoadIndicatorComponent.ctorParameters = function () { return []; };
-    GoAPageLoadIndicatorComponent.propDecorators = {
-        visible: [{ type: i0.Input }],
-        type: [{ type: i0.Input }],
-        message: [{ type: i0.Input }],
-        value: [{ type: i0.Input }],
-        pagelock: [{ type: i0.Input }],
-        displayType: [{ type: i0.Input }],
-        disableKeyboardInputHandler: [{ type: i0.HostListener, args: ['document:keydown', ['$event'],] }]
-    };
-
-    /**
-     * A page load indicator component with Government of Alberta styling.
-     * selector: goa-element-load-indicator
-     */
-    var GoAElementLoadIndicatorComponent = /** @class */ (function () {
-        function GoAElementLoadIndicatorComponent() {
-            /**
-             * Sets the page loader visibility state.
-             */
-            this.visible = true;
-            /**
-            * The diameter of the loader in pixels.
-            */
-            this.size = 'default';
-            /**
-             * The base color of the spinner.
-             */
-            this.baseColour = '#c8eef9';
-            /**
-             * The spinner color of the spinner.
-             */
-            this.spinnerColour = '#0070c4';
-            this.radius = this.size === 'small' ? 16 : 18;
-            this.innerRadius = this.radius - 4;
-            this.diameter = this.radius * 2;
-            this.dashArray = this.innerRadius * Math.PI * 2;
-            this.dashOffset = this.innerRadius * Math.PI * 0.5;
-            this.viewBox = "0 0 " + this.diameter + " " + this.diameter;
-        }
-        /**
-        * @ignore
-        */
-        GoAElementLoadIndicatorComponent.prototype.ngOnChanges = function (changes) {
-            if (changes.size) {
-                this.radius = changes.size.currentValue === 'small' ? 16 : 18;
-                this.innerRadius = this.radius - 4;
-                this.diameter = this.radius * 2;
-                this.viewBox = "0 0 " + this.diameter + " " + this.diameter;
-                this.dashArray = this.innerRadius * Math.PI * 2;
-                this.dashOffset = this.innerRadius * Math.PI * 0.5;
-            }
-        };
-        /**
-        * @ignore
-        */
-        GoAElementLoadIndicatorComponent.prototype.ngOnInit = function () { };
-        return GoAElementLoadIndicatorComponent;
-    }());
-    GoAElementLoadIndicatorComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'goa-element-load-indicator',
-                    template: "<div *ngIf=\"visible\">\n  <svg\n    fill=\"none\"\n    [attr.viewBox]=\"viewBox\"\n    [attr.width]=\"radius\"\n    [attr.height]=\"radius\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <circle\n      class=\"base-circle\"\n      [attr.cx]=\"radius\"\n      [attr.cy]=\"radius\"\n      [attr.r]=\"innerRadius\"\n      [style.stroke]=\"baseColour\"\n    />\n    <circle\n      class=\"rotating-circle\"\n      [attr.cx]=\"radius\"\n      [style.stroke-dasharray]=\"dashArray\"\n      [style.stroke-dashoffset]=\"dashOffset\"\n      [attr.cy]=\"radius\"\n      [attr.r]=\"innerRadius\"\n      [style.stroke]=\"spinnerColour\"\n    />\n  </svg>\n</div>\n",
-                    styles: [""]
-                },] }
-    ];
-    GoAElementLoadIndicatorComponent.ctorParameters = function () { return []; };
-    GoAElementLoadIndicatorComponent.propDecorators = {
-        visible: [{ type: i0.Input }],
-        size: [{ type: i0.Input }],
-        baseColour: [{ type: i0.Input }],
-        spinnerColour: [{ type: i0.Input }]
-    };
-
-    var AngularComponentsModule = /** @class */ (function () {
-        function AngularComponentsModule() {
-        }
-        return AngularComponentsModule;
-    }());
-    AngularComponentsModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [common.CommonModule, overlay.OverlayModule],
-                    exports: [
-                        forms.FormsModule,
-                        overlay.OverlayModule,
-                        common.CommonModule,
-                        GoAButtonComponent,
-                        GoAMicrositeLogoComponent,
-                        GoAHeaderComponent,
-                        GoAButtonLinkComponent,
-                        GoAOptionComponent,
-                        GoADropdownComponent,
-                        GoAOptionGroupComponent,
-                        GoACheckboxComponent,
-                        GoACalloutComponent,
-                        GoACardGroupComponent,
-                        GoANotificationComponent,
-                        GoANotificationBannerComponent,
-                        GoACardComponent,
-                        GoACardHeaderComponent,
-                        GoACardFooterComponent,
-                        GoACardContentComponent,
-                        GoACardThumbImageComponent,
-                        GoARadioComponent,
-                        GoARadioGroupComponent,
-                        GoAHeroBannerComponent,
-                        GoAHeroBannerContentComponent,
-                        GoAHeroBannerLinkComponent,
-                        GoAPageLoadIndicatorComponent,
-                        GoASkeletonImageContentComponent,
-                        GoASkeletonElementComponent,
-                        GoAElementLoadIndicatorComponent,
-                    ],
-                    declarations: [
-                        GoAButtonComponent,
-                        GoAMicrositeLogoComponent,
-                        GoAHeaderComponent,
-                        GoAButtonLinkComponent,
-                        GoAOptionComponent,
-                        GoADropdownComponent,
-                        GoAOptionGroupComponent,
-                        GoACheckboxComponent,
-                        GoACalloutComponent,
-                        GoACardGroupComponent,
-                        GoANotificationComponent,
-                        GoANotificationBannerComponent,
-                        GoACardComponent,
-                        GoACardHeaderComponent,
-                        GoACardFooterComponent,
-                        GoACardContentComponent,
-                        GoACardThumbImageComponent,
-                        GoARadioComponent,
-                        GoARadioGroupComponent,
-                        GoAHeroBannerComponent,
-                        GoAHeroBannerContentComponent,
-                        GoAHeroBannerLinkComponent,
-                        GoAPageLoadIndicatorComponent,
-                        GoASkeletonImageContentComponent,
-                        GoASkeletonElementComponent,
-                        GoAElementLoadIndicatorComponent,
-                    ],
-                    providers: [GoARadioService],
-                    schemas: [
-                        i0.CUSTOM_ELEMENTS_SCHEMA
-                    ]
-                },] }
-    ];
-
-    var GoACheckboxChange = /** @class */ (function () {
-        function GoACheckboxChange() {
-        }
-        return GoACheckboxChange;
-    }());
-
-    var GoABadgeComponent = /** @class */ (function () {
-        function GoABadgeComponent() {
-            this.type = 'light';
-        }
-        Object.defineProperty(GoABadgeComponent.prototype, "badgeClass", {
-            get: function () {
-                return "badge-" + this.type;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        /* eslint-disable @angular-eslint/no-empty-lifecycle-method */
-        GoABadgeComponent.prototype.ngOnInit = function () { };
-        return GoABadgeComponent;
-    }());
-    GoABadgeComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'goa-badge',
-                    template: "<div class=\"goa-badge\" [ngClass]=\"badgeClass\">\n    <ng-content class=\"goa-badge-icon\" select=\"mat-icon,.goa-badge-icon\"></ng-content>\n    <div class=\"goa-badge-content\">\n        <ng-content></ng-content>\n    </div>\n</div>\n",
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [""]
-                },] }
-    ];
-    GoABadgeComponent.ctorParameters = function () { return []; };
-    GoABadgeComponent.propDecorators = {
-        type: [{ type: i0.Input }]
-    };
-
-    var GoAAppVersionHeaderComponent = /** @class */ (function () {
-        function GoAAppVersionHeaderComponent() {
-            this.isProdEnvironment = false;
-            this.environment = '';
-            this.version = '';
-            this.closed = new i0.EventEmitter();
-        }
-        GoAAppVersionHeaderComponent.prototype.ngOnInit = function () {
-        };
-        GoAAppVersionHeaderComponent.prototype.onCloseClick = function () {
-            this.closed.next(true);
-        };
-        return GoAAppVersionHeaderComponent;
-    }());
-    GoAAppVersionHeaderComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'goa-app-version-header',
-                    template: "<div\n  *ngIf=\"!isProdEnvironment && (closed | async) === null\"\n  class=\"goa-app-version-header\"\n>\n  <span class=\"content-wrapper\">\n    <span class=\"environment-and-version\">{{ environment }} {{ version }}</span>\n    <span class=\"close\" (click)=\"onCloseClick()\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        className=\"ionicon\"\n        viewBox=\"0 0 512 512\"\n      >\n        <title>Close</title>\n        <path\n          fill=\"currentColor\"\n          stroke=\"currentColor\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"32\"\n          d=\"M368 368L144 144M368 144L144 368\"\n        />\n      </svg>\n    </span>\n  </span>\n</div>\n",
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [""]
-                },] }
-    ];
-    GoAAppVersionHeaderComponent.ctorParameters = function () { return []; };
-    GoAAppVersionHeaderComponent.propDecorators = {
-        isProdEnvironment: [{ type: i0.Input }],
-        environment: [{ type: i0.Input }],
-        version: [{ type: i0.Input }],
-        closed: [{ type: i0.Output }]
-    };
-
-    var GoANumberInputComponent = /** @class */ (function () {
-        function GoANumberInputComponent() {
-            this._isTouched = false;
-            /**
-             * Sets the step value that is used when incrementing / decrementing
-             *
-             * @memberof GoANumberInputComponent
-            */
-            this.step = 1;
-            /**
-             * An event that fires whenever the value is changed
-             *
-             * @type {EventEmitter<number | undefined | null>}
-             * @memberof GoANumberInputComponent
-            */
-            this.valueChanged = new i0.EventEmitter();
-        }
-        Object.defineProperty(GoANumberInputComponent.prototype, "input", {
-            get: function () {
-                var _a;
-                return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.nativeElement;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(GoANumberInputComponent.prototype, "value", {
-            get: function () {
-                return this._value;
-            },
-            /**
-             * The value of the NumberInput
-             *
-             * @memberof GoANumberInputComponent
-             */
-            set: function (val) {
-                var _a;
-                var newVal = (val === undefined || val === null || Number.isNaN(val)) ? null : this.clampValue(val);
-                if (this._value !== newVal) {
-                    this._value = newVal;
-                    (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, newVal);
-                    this.valueChanged.emit(newVal);
+                try {
+                    this.value = JSON.parse(value);
                 }
-                if (this.input && this.input.valueAsNumber !== newVal) {
-                    this.input.valueAsNumber = newVal;
+                catch (e) {
+                    // we still need to trigger the events to prevent any previous valid value to remain set.
+                    var v = value.match(/^[\w\s,]*$/) ? value.split(",") : undefined;
+                    this._setValue(v);
                 }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(GoANumberInputComponent.prototype, "min", {
-            get: function () {
-                return this._min;
-            },
-            /**
-             * Sets the minimum value that the number input can take
-             *
-             * @memberof GoANumberInputComponent
-             */
-            set: function (min) {
-                this._min = min;
-                // force reevaluation / clamping
-                this.value = this._value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(GoANumberInputComponent.prototype, "max", {
-            get: function () {
-                return this._max;
-            },
-            /**
-             * Sets the maximum value that the number input can take
-             *
-             * @memberof GoANumberInputComponent
-             */
-            set: function (max) {
-                this._max = max;
-                // force reevaluation / clamping
-                this.value = this._value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        GoANumberInputComponent.prototype.clampValue = function (val) {
-            if (Number.isFinite(this.max)) {
-                val = Math.min(this.max, val);
-            }
-            if (Number.isFinite(this.min)) {
-                val = Math.max(val, this.min);
-            }
-            return val;
-        };
-        GoANumberInputComponent.prototype.markTouched = function () {
-            var _a;
-            if (this._isTouched === false) {
-                this._isTouched = true;
-                (_a = this.onTouched) === null || _a === void 0 ? void 0 : _a.call(this);
-            }
-        };
-        GoANumberInputComponent.prototype.handleInput = function (event) {
-            var _a;
-            var inputString = (_a = event.data) !== null && _a !== void 0 ? _a : '';
-            // If someone is typing a negative number, let them
-            if (inputString.trim() !== '-') {
-                this.value = event.target.valueAsNumber;
-            }
-        };
-        /**
-         * Increment the number input
-         *
-         * @memberof GoANumberInputComponent
-         */
-        GoANumberInputComponent.prototype.increment = function () {
-            // use built-in browser increment logic
-            this.input.stepUp();
-            this.value = this.input.valueAsNumber;
-        };
-        /**
-         * Decrement the number input
-         *
-         * @memberof GoANumberInputComponent
-         */
-        GoANumberInputComponent.prototype.decrement = function () {
-            // use built-in browser decrement logic
-            this.input.stepDown();
-            this.value = this.input.valueAsNumber;
-        };
-        // CONTROL VALUE ACCESSOR INTERFACE
-        GoANumberInputComponent.prototype.writeValue = function (value) {
-            this.value = value;
-        };
-        GoANumberInputComponent.prototype.registerOnChange = function (handler) {
-            this.onChange = handler;
-        };
-        GoANumberInputComponent.prototype.registerOnTouched = function (handler) {
-            this.onTouched = handler;
-        };
-        GoANumberInputComponent.prototype.setDisabledState = function (isDisabled) {
-            this.disabled = isDisabled;
-        };
-        return GoANumberInputComponent;
-    }());
-    GoANumberInputComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'goa-number-input',
-                    template: "<div (focusout)=\"markTouched()\" class=\"number-input-container\">\n  <button\n    [disabled]=\"disabled || (min !== undefined && value <= min)\"\n    goa-button\n    buttonType=\"primary\"\n    buttonSize=\"small\"\n    type=\"button\"\n    (click)=\"decrement()\"\n  >\n    <svg width=\"1em\" height=\"100%\" viewBox=\"0 0 100 100\">\n      <line x1=\"25%\" y1=\"50%\" x2=\"75%\" y2=\"50%\" stroke-width=\"15%\" />\n    </svg>\n  </button>\n\n  <input\n    #numberInput\n    type=\"number\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [value]=\"value\"\n    [step]=\"step\"\n    [disabled]=\"disabled\"\n    (input)=\"handleInput($event)\"\n  />\n\n  <button\n    goa-button\n    [disabled]=\"disabled || (max !== undefined && value >= max)\"\n    buttonType=\"primary\"\n    buttonSize=\"small\"\n    type=\"button\"\n    (click)=\"increment()\"\n  >\n    <svg width=\"1em\" height=\"100%\" viewBox=\"0 0 100 100\">\n      <line x1=\"25%\" y1=\"50%\" x2=\"75%\" y2=\"50%\" stroke-width=\"15%\" />\n      <line x1=\"50%\" y1=\"25%\" x2=\"50%\" y2=\"75%\" stroke-width=\"15%\" />\n    </svg>\n  </button>\n</div>\n",
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            useExisting: i0.forwardRef(function () { return GoANumberInputComponent; }),
-                            multi: true
-                        },
-                    ],
-                    styles: [""]
-                },] }
-    ];
-    GoANumberInputComponent.propDecorators = {
-        inputElement: [{ type: i0.ViewChild, args: ['numberInput',] }],
-        disabled: [{ type: i0.Input }],
-        step: [{ type: i0.Input }],
-        valueChanged: [{ type: i0.Output }],
-        value: [{ type: i0.Input }],
-        min: [{ type: i0.Input }],
-        max: [{ type: i0.Input }]
-    };
-
-    var ExperimentalComponentsModule = /** @class */ (function () {
-        function ExperimentalComponentsModule() {
-        }
-        return ExperimentalComponentsModule;
-    }());
-    ExperimentalComponentsModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        AngularComponentsModule
-                    ],
-                    exports: [
-                        GoABadgeComponent,
-                        GoAAppVersionHeaderComponent,
-                        GoANumberInputComponent,
-                    ],
-                    declarations: [
-                        GoABadgeComponent,
-                        GoAAppVersionHeaderComponent,
-                        GoANumberInputComponent,
-                    ],
-                    providers: [],
-                    schemas: [i0.CUSTOM_ELEMENTS_SCHEMA]
-                },] }
-    ];
-
-    /**
-     * Generated bundle index. Do not edit.
-     */
-
-    exports.AngularComponentsModule = AngularComponentsModule;
-    exports.ExperimentalComponentsModule = ExperimentalComponentsModule;
-    exports.GOA_CHECKBOX_CONTROL_VALUE_ACCESSOR = GOA_CHECKBOX_CONTROL_VALUE_ACCESSOR;
-    exports.GOA_RADIO_CONTROL_VALUE_ACCESSOR = GOA_RADIO_CONTROL_VALUE_ACCESSOR;
-    exports.GOA_RADIO_GROUP = GOA_RADIO_GROUP;
-    exports.GOA_RADIO_GROUP_CONTROL_VALUE_ACCESSOR = GOA_RADIO_GROUP_CONTROL_VALUE_ACCESSOR;
-    exports.GoAAppVersionHeaderComponent = GoAAppVersionHeaderComponent;
-    exports.GoABadgeComponent = GoABadgeComponent;
-    exports.GoAButtonComponent = GoAButtonComponent;
-    exports.GoAButtonLinkComponent = GoAButtonLinkComponent;
-    exports.GoACalloutComponent = GoACalloutComponent;
-    exports.GoACardComponent = GoACardComponent;
-    exports.GoACardContentComponent = GoACardContentComponent;
-    exports.GoACardFooterComponent = GoACardFooterComponent;
-    exports.GoACardGroupComponent = GoACardGroupComponent;
-    exports.GoACardHeaderComponent = GoACardHeaderComponent;
-    exports.GoACardThumbImageComponent = GoACardThumbImageComponent;
-    exports.GoACheckboxChange = GoACheckboxChange;
-    exports.GoACheckboxComponent = GoACheckboxComponent;
-    exports.GoADropdownComponent = GoADropdownComponent;
-    exports.GoAElementLoadIndicatorComponent = GoAElementLoadIndicatorComponent;
-    exports.GoAHeaderComponent = GoAHeaderComponent;
-    exports.GoAHeroBannerComponent = GoAHeroBannerComponent;
-    exports.GoAHeroBannerContentComponent = GoAHeroBannerContentComponent;
-    exports.GoAHeroBannerLinkComponent = GoAHeroBannerLinkComponent;
-    exports.GoAMicrositeLogoComponent = GoAMicrositeLogoComponent;
-    exports.GoANotificationBannerComponent = GoANotificationBannerComponent;
-    exports.GoANotificationComponent = GoANotificationComponent;
-    exports.GoANumberInputComponent = GoANumberInputComponent;
-    exports.GoAOptionComponent = GoAOptionComponent;
-    exports.GoAOptionGroupComponent = GoAOptionGroupComponent;
-    exports.GoAPageLoadIndicatorComponent = GoAPageLoadIndicatorComponent;
-    exports.GoARadioChange = GoARadioChange;
-    exports.GoARadioComponent = GoARadioComponent;
-    exports.GoARadioGroupComponent = GoARadioGroupComponent;
-    exports.GoARadioService = GoARadioService;
-    exports.GoASkeletonElementComponent = GoASkeletonElementComponent;
-    exports.GoASkeletonImageContentComponent = GoASkeletonImageContentComponent;
-
-    Object.defineProperty(exports, '__esModule', { value: true });
+            };
+            ValuesDirective.prototype._setValue = function (value) {
+                this._value = value;
+                this.onChange(value);
+                this.onTouched();
+            };
+            return ValuesDirective;
+        }());
+        ValuesDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: ValuesDirective, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+        ValuesDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: ValuesDirective, selector: "[goaValues]", host: { listeners: { "_change": "listenForValueChange($event.detail.value)" } }, providers: [
+                {
+                    provide: forms.NG_VALUE_ACCESSOR,
+                    useExisting: i0.forwardRef(function () { return ValuesDirective; }),
+                    multi: true,
+                },
+            ], ngImport: i0__namespace });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: ValuesDirective, decorators: [{
+                    type: i0.Directive,
+                    args: [{
+                            selector: "[goaValues]",
+                            providers: [
+                                {
+                                    provide: forms.NG_VALUE_ACCESSOR,
+                                    useExisting: i0.forwardRef(function () { return ValuesDirective; }),
+                                    multi: true,
+                                },
+                            ],
+                        }]
+                }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { listenForValueChange: [{
+                        type: i0.HostListener,
+                        args: ["_change", ["$event.detail.value"]]
+                    }] } });
+
+        /**
+         * Generated bundle index. Do not edit.
+         */
+
+        exports.AngularComponentsModule = AngularComponentsModule;
+        exports.ValueDirective = ValueDirective;
+        exports.ValuesDirective = ValuesDirective;
+
+        Object.defineProperty(exports, '__esModule', { value: true });
 
 }));
 //# sourceMappingURL=abgov-angular-components.umd.js.map