@abgov/angular-components 2.0.0-beta.1 → 2.0.1

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, 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', '@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"] = {}), global.ng.core, global.ng.common, global.ng.cdk.overlay, global.ng.forms, global.rxjs));
-})(this, (function (exports, i0, common, overlay, forms, rxjs) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms')) :
+    typeof define === 'function' && define.amd ? define('@abgov/angular-components', ['exports', '@angular/core', '@angular/forms'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.abgov = global.abgov || {}, global.abgov["angular-components"] = {}), global.ng.core, global.ng.forms));
+})(this, (function (exports, i0, forms) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -24,2554 +24,170 @@
 
     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';
+    var ValueDirective = /** @class */ (function () {
+        function ValueDirective(elementRef) {
+            this.elementRef = elementRef;
+            this._value = "";
+            /* eslint-disable @typescript-eslint/no-explicit-any */
+            this.onChange = function () { };
+            this.onTouched = function () { };
         }
-        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: [":host.goa-button{box-sizing:border-box;min-width:70px;padding:12px;border:2px solid #0070c4;border-radius:4px;background:#0070c4;cursor:pointer;color:#fff;font-size:18px;font-weight:700;line-height:1em}:host.goa-button.btn-small{font-size:16px;padding:8px;margin:12px 12px 0 0}:host.goa-button:last-of-type{margin-right:0}:host.goa-button:disabled,:host.goa-button:disabled.goa--secondary,:host.goa-button:disabled.goa--tertiary{pointer-events:none;color:#666;background-color:#f1f1f1;border-color:#f1f1f1}:host.goa-button:hover{border-color:#004f84;background:#004f84}:host.goa-button:focus,:host.goa-button:active{border-color:#004f84;box-shadow:0 0 0 3px #feba35;background:#004f84;outline:none}:host.goa-button.goa--secondary{border:2px solid #0070c4;background:#fff;color:#0070c4}:host.goa-button.goa--secondary:hover{border-color:#004f84;background:#fff;color:#004f84}:host.goa-button.goa--secondary:focus,:host.goa-button.goa--secondary:active{color:#004f84;background-color:#fff;border:2px solid #004f84;box-shadow:0 0 0 3px #feba35;outline:none}:host.goa-button.goa--tertiary{border-color:#dcdcdc;background:#fff;color:#0070c4}:host.goa-button.goa--tertiary:hover{background:#fff;color:#004f84}:host.goa-button.goa--tertiary:focus,:host.goa-button.goa--tertiary:active{border:2px solid #004f84;color:#004f84;background-color:#fff;box-shadow:0 0 0 3px #feba35;outline:none}:host.goa-button.goa--borderless{background:none;color:var(--color-blue-500);border:none;transition:transform .1s ease-in-out;transform:scale(1)}:host.goa-button.goa--borderless:hover{background:var(--color-blue-100);color:var(--color-blue-500)}:host.goa-button.goa--borderless:focus,:host.goa-button.goa--borderless:active{background-color:var(--color-blue-100);outline:none;box-shadow:none}:host.goa-button.goa--borderless:active{transform:scale(.95)}:host.goa-button.goa--red{color:var(--color-red-500);background:none;border:none;transition:transform .1s ease-in-out;transform:scale(1)}:host.goa-button.goa--red:hover{background:var(--color-red-100);color:var(--color-red-500)}:host.goa-button.goa--red:focus,:host.goa-button.goa--red:active{background:var(--color-red-100);color:var(--color-red-500);outline:none;box-shadow:none}:host.goa-button.goa--red:active{transform:scale(.95)}\n"]
-                },] }
-    ];
-    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: ["a.microsite-link{color:inherit;text-decoration:none;white-space:nowrap;display:flex;align-items:center;height:66px}a.microsite-link:focus,a.microsite-link:hover,a.microsite-link:active{outline:none}a.microsite-link .image-desktop-tablet{width:150px;height:42px;display:inline-block;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='149.351' height='42' viewBox='0 0 149.351 42'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D.b%7Bclip-path:url(%23a);%7D.c%7Bfill:%2300aad2;%7D.d%7Bfill:%235f6a72;%7D%3C/style%3E%3CclipPath id='a'%3E%3Crect class='a' width='149.351' height='42'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='b'%3E%3Crect class='c' width='13.555' height='13.555' transform='translate(135.796 21.524)'/%3E%3Cpath class='d' d='M63.082,33.088c-1.383.138-2.835.277-4.357.346.553-4.357,2.835-10.373,5.671-9.405,1.66.553.761,5.671-1.314,9.059m-3.527,2.974a3.761,3.761,0,0,1-1.245,0,.851.851,0,0,0,.346-.692v-.553c.761,0,1.936-.138,3.389-.277a4.327,4.327,0,0,1-2.49,1.521M76.844,25.688c1.8-1.66,2.7-1.521,2.9-1.106.484.968-1.591,4.357-5.671,6.224a10.328,10.328,0,0,1,2.766-5.118m66.736,1.66c-.207-3.389-3.181-3.942-3.6-2.974-.138.346,1.106.207,1.106,2.628,0,3.942-4.011,9.129-9.129,9.129-5.532,0-6.985-4.357-7.261-6.432-.207-1.452.138-3.458-2.351-3.181-1.729.207-3.25,3.527-5.463,6.362-1.867,2.42-2.7,2.213-2.282.138.553-2.628,2.7-8.714,5.187-9.129,1.176-.207,1.591,1.8,2.075.553s.069-4.011-2.559-4.011c-1.8,0-3.942,1.936-5.74,4.08-1.521,1.936-9.336,13.416-12.656,10.927-1.521-1.176-1.383-5.878-.415-11.411,3.873-1.521,7.123-1.037,8.921-.138.9.415,1.037.346.622-.622-.553-1.452-3.665-3.734-8.575-2.7-.138,0-.207.069-.346.069.415-1.8.83-3.665,1.383-5.463.484-1.66,1.8-4.5-1.729-4.979-1.106-.207-.622.346-1.037,1.867-.692,2.766-1.521,6.362-2.144,10.028a19.745,19.745,0,0,0-7.538,8.091,38.59,38.59,0,0,0,.9-4.772,1.589,1.589,0,0,0-1.245-1.729c-.761-.207-1.729.138-2.628,1.452-2.144,3.043-4.841,7.815-8.99,9.82-2.974,1.452-4.288,0-4.357-2.282a9.869,9.869,0,0,0,1.521-.553c5.394-2.351,7.192-5.947,5.878-8.16-1.314-2.075-4.979-1.452-7.953,1.66a11.175,11.175,0,0,0-2.7,6.5c-1.245.277-2.628.484-4.219.692,2.49-4.08,2.282-9.613-1.383-10.581-4.288-1.106-6.432,3.043-7.331,6.5.346-3.873.9-7.745,1.591-11.549.346-1.66,1.452-4.5-2.075-4.979-1.106-.207-.968.346-.9,1.867.138,2.075-2.144,14.454-.968,19.848-1.521.484-2.144,1.66-.207,2.835,1.383.83,4.357,1.106,7.331-.346a9.3,9.3,0,0,0,2.766-2.144c1.8-.207,3.665-.553,5.394-.83.277,2.42,1.867,4.219,5.463,3.873,5.118-.484,9.682-6.777,11.411-9.82-.346,3.25-2.42,10.373,1.176,10.028,1.383-.138.83-.346.9-1.591.346-4.288,3.873-7.953,7.4-10.166-.622,5.256-.415,9.958,2.006,11.411,4.426,2.766,10.581-4.5,14.039-8.921-1.729,3.942-2.7,8.921-.138,9.682,3.043.9,5.463-4.219,8.3-8.091.346,2.766,2.213,7.607,9.682,7.607,8.022-.069,13.071-4.91,12.863-10.1m-108.3,8.645A66.439,66.439,0,0,1,27.4,32.534a59.168,59.168,0,0,0,6.777-2.974,54.453,54.453,0,0,0,1.106,6.432m20.4,3.873c-.069-.207-.622.069-1.106,0-1.452-.207-3.389-2.213-3.942-5.463-1.037-5.878-.415-11.687,1.314-20.332.346-1.66,1.452-4.5-2.075-5.048-1.106-.138-.553.415-.83,1.867C47.66,17.32,42.4,21.954,37.149,25.066,36.6,17.735,36.8,9.505,38.186,4.526c1.176-4.219,2.559-3.458.83-4.357s-3.734.277-5.325,3.458S24.839,23.89,13.221,35.439C7.273,41.317,1.879,38.274.842,37.375c-.9-.761-1.176.415-.138,1.591,4.772,5.256,11.826,2.282,14.384-.277,7.054-7.054,15.283-22.268,18.6-28.7a98.251,98.251,0,0,0,.277,16.874,50.129,50.129,0,0,1-8.3,3.181c-1.66.415-2.7,1.106-2.7,1.867s1.106,1.521,2.7,2.282c2.835,1.383,11.2,5.256,13.209,6.5,1.729,1.037,2.628.207,3.112-.9.692-1.452-1.176-2.282-2.974-2.766a60.545,60.545,0,0,1-1.66-9.267c4.219-2.628,8.437-6.086,10.788-10.443C47.522,20.916,46,33.3,49.873,38.482a5.451,5.451,0,0,0,4.564,2.213c.968-.069,1.383-.692,1.245-.83' transform='translate(-0.038 0.124)'/%3E%3C/g%3E%3C/svg%3E\");background-repeat:no-repeat;background-size:contain;background-position:center center}@media screen and (max-width: 767px){a.microsite-link .image-desktop-tablet{display:none}}@media screen and (min-width: 768px) and (max-width: 1199px){a.microsite-link .image-mobile{display:none}}@media screen and (min-width: 1200px){a.microsite-link .image-mobile{display:none}}@media screen and (max-width: 767px){a.microsite-link .image-mobile{width:34px;height:34px;display:inline-block;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D.b%7Bfill:%2300aad2;%7D.c%7Bclip-path:url(%23a);%7D.d%7Bfill:%23fff;%7D%3C/style%3E%3CclipPath id='a'%3E%3Crect class='a' width='14' height='14' transform='translate(-0.345 -0.21)'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate(0 -0.135)'%3E%3Ccircle class='b' cx='8' cy='8' r='8' transform='translate(0 0.135)'/%3E%3Cg transform='translate(1.345 1.344)'%3E%3Cg class='c' transform='translate(0 0)'%3E%3Cpath class='d' d='M12.612,13.636a16.24,16.24,0,0,1-1.86-.822,13.436,13.436,0,0,0,1.6-.708,11.312,11.312,0,0,0,.264,1.53M16.032,7.3c-.266-.034-.128.091-.2.442a5.465,5.465,0,0,1-2.8,3.338,16.141,16.141,0,0,1,.249-4.84c.275-1,.6-.813.2-1.022-.427-.22-.887.071-1.258.813A27.247,27.247,0,0,1,7.4,13.522a2.141,2.141,0,0,1-2.918.461c-.206-.174-.282.095-.026.37a2.412,2.412,0,0,0,3.387-.082A32.715,32.715,0,0,0,12.219,7.51a23.541,23.541,0,0,0,.063,3.971,11.464,11.464,0,0,1-1.964.749c-.388.1-.628.26-.635.439-.007.2.253.363.63.541.67.318,2.633,1.246,3.117,1.527.414.24.616.053.739-.207.16-.338-.279-.533-.7-.661a13.175,13.175,0,0,1-.382-2.179,7.143,7.143,0,0,0,2.547-2.454,4.7,4.7,0,0,0,.4-1.133,2.125,2.125,0,0,0,.048-.742s-.007-.054-.048-.059' transform='translate(-3.51 -3.943)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");background-repeat:no-repeat;background-size:contain;background-position:center center}}a.microsite-link .name{margin-left:8px;font-size:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media screen and (min-width: 1200px){a.microsite-link .name{margin-left:28px}}@media screen and (min-width: 768px) and (max-width: 1199px){a.microsite-link .name{margin-left:28px}}\n"]
-                },] }
-    ];
-    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: [".goa-header{display:flex;align-items:center;padding-left:28px;padding-right:28px}@media screen and (min-width: 768px) and (max-width: 1199px){.goa-header{padding-left:28px;padding-right:28px}}@media screen and (max-width: 767px){.goa-header{padding-left:28px;padding-right:28px}}.goa-header.goa-microsite-header,.goa-header>.goa-microsite-header{background-color:#fff;top:0;display:flex;justify-content:space-between}.goa-header.goa-official-site-header,.goa-header>.goa-official-site-header{font-size:12px;background-color:#f1f1f1;line-height:22px}.goa-header.goa-official-site-header .site-text,.goa-header>.goa-official-site-header .site-text{white-space:nowrap;padding:0 4px}.goa-header.goa-official-site-header .service-level,.goa-header>.goa-official-site-header .service-level{padding:0 3px;font-weight:bold;vertical-align:baseline;text-transform:capitalize}.goa-header.goa-official-site-header .service-level--alpha,.goa-header>.goa-official-site-header .service-level--alpha{background-color:#feba35;color:#333}.goa-header.goa-official-site-header .service-level--beta,.goa-header>.goa-official-site-header .service-level--beta{background-color:#0081a2;color:#fff}.goa-header.goa-official-site-header .service-level--live,.goa-header>.goa-official-site-header .service-level--live{height:16px;width:16px;padding:0;color:transparent;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D.b%7Bfill:%2300aad2;%7D.c%7Bclip-path:url(%23a);%7D.d%7Bfill:%23fff;%7D%3C/style%3E%3CclipPath id='a'%3E%3Crect class='a' width='14' height='14' transform='translate(-0.345 -0.21)'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate(0 -0.135)'%3E%3Ccircle class='b' cx='8' cy='8' r='8' transform='translate(0 0.135)'/%3E%3Cg transform='translate(1.345 1.344)'%3E%3Cg class='c' transform='translate(0 0)'%3E%3Cpath class='d' d='M12.612,13.636a16.24,16.24,0,0,1-1.86-.822,13.436,13.436,0,0,0,1.6-.708,11.312,11.312,0,0,0,.264,1.53M16.032,7.3c-.266-.034-.128.091-.2.442a5.465,5.465,0,0,1-2.8,3.338,16.141,16.141,0,0,1,.249-4.84c.275-1,.6-.813.2-1.022-.427-.22-.887.071-1.258.813A27.247,27.247,0,0,1,7.4,13.522a2.141,2.141,0,0,1-2.918.461c-.206-.174-.282.095-.026.37a2.412,2.412,0,0,0,3.387-.082A32.715,32.715,0,0,0,12.219,7.51a23.541,23.541,0,0,0,.063,3.971,11.464,11.464,0,0,1-1.964.749c-.388.1-.628.26-.635.439-.007.2.253.363.63.541.67.318,2.633,1.246,3.117,1.527.414.24.616.053.739-.207.16-.338-.279-.533-.7-.661a13.175,13.175,0,0,1-.382-2.179,7.143,7.143,0,0,0,2.547-2.454,4.7,4.7,0,0,0,.4-1.133,2.125,2.125,0,0,0,.048-.742s-.007-.054-.048-.059' transform='translate(-3.51 -3.943)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");background-repeat:no-repeat;background-size:contain;background-position:center center}.goa-header .web-link{color:#0070c4;text-align:left}\n"]
-                },] }
-    ];
-    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
-             */
+        Object.defineProperty(ValueDirective.prototype, "value", {
             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: ["@charset \"UTF-8\";:host.goa-link-button{display:inline-block;text-decoration:none}:host.goa-link-button{box-sizing:border-box;min-width:70px;padding:12px;border:2px solid #0070c4;border-radius:4px;background:#0070c4;cursor:pointer;color:#fff;font-size:18px;font-weight:700;line-height:1em}:host.goa-link-button.btn-small{font-size:16px;padding:8px;margin:12px 12px 0 0}:host.goa-link-button:last-of-type{margin-right:0}:host.goa-link-button:disabled,:host.goa-link-button:disabled.goa--secondary,:host.goa-link-button:disabled.goa--tertiary{pointer-events:none;color:#666;background-color:#f1f1f1;border-color:#f1f1f1}:host.goa-link-button:hover{border-color:#004f84;background:#004f84}:host.goa-link-button:focus,:host.goa-link-button:active{border-color:#004f84;box-shadow:0 0 0 3px #feba35;background:#004f84;outline:none}:host.goa-link-button.goa--secondary{border:2px solid #0070c4;background:#fff;color:#0070c4}:host.goa-link-button.goa--secondary:hover{border-color:#004f84;background:#fff;color:#004f84}:host.goa-link-button.goa--secondary:focus,:host.goa-link-button.goa--secondary:active{color:#004f84;background-color:#fff;border:2px solid #004f84;box-shadow:0 0 0 3px #feba35;outline:none}:host.goa-link-button.goa--tertiary{border-color:#dcdcdc;background:#fff;color:#0070c4}:host.goa-link-button.goa--tertiary:hover{background:#fff;color:#004f84}:host.goa-link-button.goa--tertiary:focus,:host.goa-link-button.goa--tertiary:active{border:2px solid #004f84;color:#004f84;background-color:#fff;box-shadow:0 0 0 3px #feba35;outline:none}:host.goa-link-button.goa--borderless{background:none;color:var(--color-blue-500);border:none;transition:transform .1s ease-in-out;transform:scale(1)}:host.goa-link-button.goa--borderless:hover{background:var(--color-blue-100);color:var(--color-blue-500)}:host.goa-link-button.goa--borderless:focus,:host.goa-link-button.goa--borderless:active{background-color:var(--color-blue-100);outline:none;box-shadow:none}:host.goa-link-button.goa--borderless:active{transform:scale(.95)}:host.goa-link-button.goa--red{color:var(--color-red-500);background:none;border:none;transition:transform .1s ease-in-out;transform:scale(1)}:host.goa-link-button.goa--red:hover{background:var(--color-red-100);color:var(--color-red-500)}:host.goa-link-button.goa--red:focus,:host.goa-link-button.goa--red:active{background:var(--color-red-100);color:var(--color-red-500);outline:none;box-shadow:none}:host.goa-link-button.goa--red:active{transform:scale(.95)}:host.goa-link-button.right-arrow:after{color:#fff;margin-left:8px;content:\"\\2192\"}:host.goa-link-button.up-arrow:after{color:#fff;margin-left:8px;content:\"\\2191\"}:host.goa-link-button:visited,:host.goa-link-button:link{color:#fff}\n"]
-                },] }
-    ];
-    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;
-                    }
-                    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 };
-                }
-            };
-        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 = [
-                {
-                    originX: 'start',
-                    originY: 'bottom',
-                    overlayX: 'start',
-                    overlayY: 'top',
-                },
-                {
-                    originX: 'start',
-                    originY: 'top',
-                    overlayX: 'start',
-                    overlayY: 'bottom',
-                },
-            ];
-            /**
-             * 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;
-                    }
-                    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; })));
+                return this._value;
             },
-            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));
-            });
-            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: [".dropdown-overlay{position:absolute;top:0;left:0;right:0;bottom:0}.dropdown-menu{border:solid 1px #dcdcdc;border-radius:4px;background:#fff;padding:0;margin-top:3px;width:100%;overflow-y:auto}.dropdown-menu .option-group .option-group-label{font-weight:bold;padding:4px 12px}.dropdown-menu .option-group .option{font-weight:normal;padding:4px 24px}.dropdown-menu .option{padding:4px 12px;color:#0070c4;border:1px solid #f1f1f1}.dropdown-menu .option.selected{background-color:#0070c4;color:#fff}.dropdown-menu .option.selected.active{background-color:#004f84;color:#fff}.dropdown-menu .option.active{background-color:#f1f1f1;color:#333}.goa-dropdown{position:relative}.goa-dropdown .dropdown-grouping input[type=text]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-right:30px!important}.goa-dropdown .dropdown-grouping.disabled{opacity:30%}.goa-dropdown .dropdown-grouping .dropdown-textbox{box-sizing:border-box;width:100%;margin:8px 0 0;padding:12px 8px 12px 12px;border-radius:4px;border:1px solid #666;font-size:18px;font-weight:400;color:#0070c4;-webkit-appearance:none;-moz-appearance:none;appearance:none}.goa-dropdown .dropdown-grouping .dropdown-textbox:disabled{opacity:.3;pointer-events:none}.goa-dropdown .dropdown-grouping .dropdown-textbox::-ms-expand{display:none}.goa-dropdown .dropdown-grouping .dropdown-textbox:hover{border:1px solid #0070c4}.goa-dropdown .dropdown-grouping .dropdown-textbox:focus{box-shadow:0 0 0 3px #feba35;outline:none}.goa-dropdown .dropdown-grouping .dropdown-textbox.margin-override{margin:0}.goa-dropdown .dropdown-grouping .dropdown-textbox-filter{font-size:14px!important;border:none!important;margin:0!important}.goa-dropdown .dropdown-grouping .dropdown-textbox-filter{box-sizing:border-box;width:100%;margin:8px 0 0;padding:12px 8px 12px 12px;border-radius:4px;border:1px solid #666;font-size:18px;font-weight:400;color:#0070c4;-webkit-appearance:none;-moz-appearance:none;appearance:none}.goa-dropdown .dropdown-grouping .dropdown-textbox-filter:disabled{opacity:.3;pointer-events:none}.goa-dropdown .dropdown-grouping .dropdown-textbox-filter::-ms-expand{display:none}.goa-dropdown .dropdown-grouping .dropdown-textbox-filter:hover{border:1px solid #0070c4}.goa-dropdown .dropdown-grouping .dropdown-textbox-filter:focus{box-shadow:0 0 0 3px #feba35;outline:none}.goa-dropdown .dropdown-grouping .dropdown-textbox-filter:focus{box-shadow:none!important;outline:none}.goa-dropdown i.goa-select-icon{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath class='' opacity='1' d='M11.29,15.7a1,1,0,0,0,1.41,0l6-6A1,1,0,1,0,17.29,8.3L12,13.58,6.71,8.3a1,1,0,0,0-1.42,0,1,1,0,0,0,0,1.41Z'/%3E%3C/svg%3E%0A\");background-repeat:no-repeat;background-size:contain;background-position:center center;left:auto;right:8px;width:24px;height:24px;pointer-events:none;position:absolute;margin-top:16px;color:#0070c4}.goa-dropdown.disabled i.goa-select-icon{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath class='' opacity='0.3' d='M11.29,15.7a1,1,0,0,0,1.41,0l6-6A1,1,0,1,0,17.29,8.3L12,13.58,6.71,8.3a1,1,0,0,0-1.42,0,1,1,0,0,0,0,1.41Z'/%3E%3C/svg%3E%0A\");background-repeat:no-repeat;background-size:contain;background-position:center center}.goa-dropdown.opened i.goa-select-icon{transform:rotate(180deg)}.goa-dropdown.has-error .dropdown-grouping .dropdown-textbox{border:solid 2px #fc1921}.goa-dropdown .dropdown-label{font-size:18px;font-weight:bold;color:#333}.goa-dropdown .required-label{margin-left:8px;font-size:14px;color:#666}.goa-dropdown .helper-text{font-size:14px;font-weight:normal;color:#333}.goa-dropdown .error-text{color:#fc1921;font-size:14px}\n"]
-                },] }
-    ];
-    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;
-                    }
+            set: function (val) {
+                if (val !== this._value) {
+                    this._value = val;
+                    this.onChange(this._value);
+                    this.onTouched();
+                    this.elementRef.nativeElement.value = val;
                 }
             },
             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: [".goa-checkbox input[type=checkbox]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;outline:0;-webkit-appearance:none}.goa-checkbox .goa-checkbox-label{z-index:2;box-sizing:border-box;margin:0;padding:0 0 0 8px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;height:46px;display:flex;align-items:center}.goa-checkbox.goa-checkbox-disabled{opacity:30%}.goa-checkbox.goa-checkbox-disabled .goa-checkbox-label{cursor:default}.goa-checkbox.has-error .goa-checkbox-container{border:solid 2px #fc1921;color:#fc1921}.goa-checkbox.has-error .goa-checkbox-container svg{fill:#fc1921}.goa-checkbox .goa-checkbox-container{box-sizing:border-box;border:1px solid #666;border-radius:2px;height:24px;line-height:24px;width:24px;display:flex;flex-direction:column;justify-content:center;padding:3px}.goa-checkbox .goa-checkbox-container svg{display:none;flex:1 1 auto;fill:#fff}.goa-checkbox .goa-checkbox-container.goa-checkbox-selected{background-color:#0070c4}.goa-checkbox .goa-checkbox-container.goa-checkbox-selected .goa-checkmark{display:block!important}.goa-checkbox .goa-checkbox-container.goa-checkbox-selected .goa-indeterminate{display:none!important}.goa-checkbox .goa-checkbox-container.goa-checkbox-indeterminate{background-color:#0070c4}.goa-checkbox .goa-checkbox-container.goa-checkbox-indeterminate .goa-checkmark{display:none}.goa-checkbox .goa-checkbox-container.goa-checkbox-indeterminate .goa-indeterminate{display:block}.goa-checkbox .goa-checkbox-container:hover:not(.goa-checkbox-selected):not(.goa-checkbox-indeterminate){background-color:#f1f1f1}.goa-checkbox .goa-checkbox-container:focus-within{box-shadow:0 0 0 3px #feba35;outline:none}.goa-checkbox.goa-checkbox-label-before .goa-checkbox-container{order:1;margin-left:8px;margin-right:auto}.goa-checkbox-layout{display:inline-flex;align-items:center;line-height:2.5rem}\n"]
-                },] }
-    ];
-    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();
+        ValueDirective.prototype.writeValue = function (value) {
+            if (value) {
+                this.value = value;
             }
         };
-        /**
-         * 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;
+        ValueDirective.prototype.registerOnChange = function (fn) {
+            this.onChange = 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;
+        ValueDirective.prototype.registerOnTouched = function (fn) {
+            this.onTouched = 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
-            };
-            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);
+        ValueDirective.prototype.listenForValueChange = function (value) {
+            this.value = value;
         };
-        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: [".goa-radio{margin-bottom:10px}.goa-radio input[type=radio]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;outline:0;-webkit-appearance:none}.goa-radio .goa-radio-label{z-index:2;box-sizing:border-box;margin:0;padding:0 0 0 8px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.goa-radio.goa-radio-disabled{opacity:30%}.goa-radio.goa-radio-disabled .goa-radio-label{cursor:default}.goa-radio.has-error .goa-radio-container{border:solid 2px #fc1921;color:#fc1921}.goa-radio.has-error .goa-radio-container svg{fill:#fc1921}.goa-radio .goa-radio-container{z-index:2;box-sizing:border-box;margin:0;border:1px solid #666;border-radius:12px;height:24px;width:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:3px}.goa-radio .goa-radio-container svg{fill:#fff}.goa-radio .goa-radio-container.goa-radio-selected{background-color:#0070c4}.goa-radio .goa-radio-container.goa-radio-selected .goa-radiomark{display:block!important}.goa-radio .goa-radio-container:hover:not(.goa-radio-selected){background-color:#f1f1f1}.goa-radio .goa-radio-container:focus-within{box-shadow:0 0 0 3px #feba35;outline:none}.goa-radio.goa-radio-label-before .goa-radio-container{order:1;margin-left:8px;margin-right:auto}.goa-radio-layout{display:flex;flex-direction:row;align-items:center}.goa-radio-inline-block{display:inline-block;margin-bottom:5px;margin-top:5px;margin-left:5px}\n"]
-                },] }
-    ];
-    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.
-             */
+        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: [
+            {
+                provide: forms.NG_VALUE_ACCESSOR,
+                useExisting: i0.forwardRef(function () { return ValueDirective; }),
+                multi: true,
+            },
+        ], 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 ValueListDirective = /** @class */ (function () {
+        function ValueListDirective(elementRef) {
+            this.elementRef = elementRef;
+            this._value = [];
+            this.onChange = function () { };
+            this.onTouched = function () { };
+        }
+        Object.defineProperty(ValueListDirective.prototype, "value", {
             get: function () {
-                return this._labelPosition;
-            },
-            set: function (position) {
-                this._labelPosition = position === 'before' ? 'before' : 'after';
-                this._updateRadioButtonLabelPosition();
+                return this._value;
             },
-            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;
-                        }
-                    });
+            set: function (val) {
+                if (val && val !== this._value) {
+                    this._setValue(val);
+                    this.elementRef.nativeElement.value = JSON.stringify(val);
                 }
-            });
-        };
-        /**
-         * 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: [".goa-radio-group{margin-top:28px}.goa-radio-group.goa-radio-group-disabled.goa-radios{opacity:30%;cursor:default}.goa-radio-group .radio-group-title{font-size:18px;font-weight:bold;color:#333;line-height:28px}.goa-radio-group .helper-text{font-size:14px;font-weight:normal;color:#333;margin-bottom:20px}.goa-radio-group .required-label{margin-left:8px;font-size:14px;color:#666}.goa-radio-group .error-text{color:#fc1921;font-size:14px;margin-bottom:20px}\n"]
-                },] }
-    ];
-    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: [".goa-callout{box-sizing:border-box;display:inline-block;position:relative;width:100%;margin:24px 0 0;padding:23px 24px;border-width:0;border-left-width:48px;border-style:solid;border-color:#0070c4;background:#f1f1f1}.goa-callout *:first-child{margin-top:0}.goa-callout *:last-child{margin-bottom:0}.goa-callout.goa--important{border-color:#feba35}.goa-callout.goa--emergency{border-color:#ec040b}.goa-callout.goa--error{border-color:#ec040b}.goa-callout.goa--success{border-color:#00853f}.goa-callout:before{position:absolute;top:28px;left:-36px;width:24px;height:24px;content:\"\";background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z'/%3E%3Cpath fill='%23fff' d='M15.16,15.5h-2V9a1,1,0,0,0-1-1H9.82a1,1,0,0,0,0,2h1.36V15.5h-2a1,1,0,1,0,0,2h6a1,1,0,0,0,0-2Z'/%3E%3Cpath fill='%23fff' d='M12,7.33A1.29,1.29,0,1,0,10.73,6,1.29,1.29,0,0,0,12,7.33Z'/%3E%3C/svg%3E\");background-color:transparent;background-repeat:no-repeat;background-position:center center}.goa-callout.goa--emergency:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M11,9.41v4.52a1,1,0,0,0,2,0V9.41a1,1,0,0,0-2,0Z'/%3E%3Cpath fill='%23fff' d='M12,16.15a1.29,1.29,0,1,0,1.29,1.29A1.29,1.29,0,0,0,12,16.15Z'/%3E%3Cpath fill='%23fff' d='M22.87,20.14l-10-17.32a1,1,0,0,0-1.74,0l-10,17.32a1,1,0,0,0,0,1,1,1,0,0,0,.87.5H22a1,1,0,0,0,.87-.5A1,1,0,0,0,22.87,20.14Zm-19.14-.5L12,5.32l8.27,14.32Z'/%3E%3C/svg%3E\");background-color:transparent;background-repeat:no-repeat;background-position:center center}.goa-callout.goa--error:before{background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><defs><style>.a{fill:none;}.b{fill:white;}<\\/style></defs><rect class=\"a\" width=\"24\" height=\"24\"/><path class=\"b\" d=\"M48.1,23a11,11,0,1,0-11-11A10.968,10.968,0,0,0,48.1,23Zm0-20a9,9,0,1,1-9,9A8.963,8.963,0,0,1,48.1,3Z\" transform=\"translate(-36)\"/><path class=\"b\" d=\"M43.6,16.4a.967.967,0,0,0,1.4,0l3-3,3,3a.967.967,0,0,0,1.4,0,.967.967,0,0,0,0-1.4l-3-3,3-3A.99.99,0,0,0,51,7.6l-3,3-3-3A.99.99,0,0,0,43.6,9l3,3-3,3A1.2,1.2,0,0,0,43.6,16.4Z\" transform=\"translate(-36)\"/></svg>');background-repeat:no-repeat;background-size:contain;background-position:center center}.goa-callout.goa--important:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z'/%3E%3Cpath fill='%23000' d='M12,14.46a1,1,0,0,0,1-1V6.57a1,1,0,0,0-2,0v6.89A1,1,0,0,0,12,14.46Z'/%3E%3Cpath fill='%23000' d='M12,15.68A1.29,1.29,0,1,0,13.29,17,1.29,1.29,0,0,0,12,15.68Z'/%3E%3C/svg%3E\");background-color:transparent;background-repeat:no-repeat;background-position:center center}.goa-callout.goa--event:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.27,22.85H20.73a2.14,2.14,0,0,0,2.14-2.14V5A2.14,2.14,0,0,0,20.73,2.9h-2.1v2h2.1a.14.14,0,0,1,.14.14V8.31H3.13V5a.14.14,0,0,1,.14-.14H5.48V6.28a1,1,0,1,0,2,0V1.85a1,1,0,1,0-2,0v1H3.27A2.14,2.14,0,0,0,1.13,5V20.71A2.14,2.14,0,0,0,3.27,22.85Zm17.6-12.54v10.4a.14.14,0,0,1-.14.14H3.27a.14.14,0,0,1-.14-.14V10.31Z'/%3E%3Cpath fill='%23fff' d='M16.45,7.28a1,1,0,0,0,1-1V1.85a1,1,0,0,0-2,0v1h-1.8v2h1.8V6.28A1,1,0,0,0,16.45,7.28Z'/%3E%3Cpath fill='%23fff' d='M11.47,7.28a1,1,0,0,0,1-1V1.85a1,1,0,1,0-2,0v1H8.66v2h1.81V6.28A1,1,0,0,0,11.47,7.28Z'/%3E%3Crect fill='%23fff' x='6.67' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='11.22' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='15.77' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='3.64' y='15.83' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='8.19' y='15.83' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='12.74' y='15.83' width='2.33' height='2.33'/%3E%3C/svg%3E\");background-color:transparent;background-repeat:no-repeat;background-position:center center}.goa-callout.goa--event:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.27,22.85H20.73a2.14,2.14,0,0,0,2.14-2.14V5A2.14,2.14,0,0,0,20.73,2.9h-2.1v2h2.1a.14.14,0,0,1,.14.14V8.31H3.13V5a.14.14,0,0,1,.14-.14H5.48V6.28a1,1,0,1,0,2,0V1.85a1,1,0,1,0-2,0v1H3.27A2.14,2.14,0,0,0,1.13,5V20.71A2.14,2.14,0,0,0,3.27,22.85Zm17.6-12.54v10.4a.14.14,0,0,1-.14.14H3.27a.14.14,0,0,1-.14-.14V10.31Z'/%3E%3Cpath fill='%23fff' d='M16.45,7.28a1,1,0,0,0,1-1V1.85a1,1,0,0,0-2,0v1h-1.8v2h1.8V6.28A1,1,0,0,0,16.45,7.28Z'/%3E%3Cpath fill='%23fff' d='M11.47,7.28a1,1,0,0,0,1-1V1.85a1,1,0,1,0-2,0v1H8.66v2h1.81V6.28A1,1,0,0,0,11.47,7.28Z'/%3E%3Crect fill='%23fff' x='6.67' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='11.22' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='15.77' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='3.64' y='15.83' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='8.19' y='15.83' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='12.74' y='15.83' width='2.33' height='2.33'/%3E%3C/svg%3E\");background-color:transparent;background-repeat:no-repeat;background-position:center center}.goa-callout.goa--success:before{background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><defs><style>.a{fill:none;}.b{fill:white;}<\\/style></defs><g transform=\"translate(-23 -68)\"><rect class=\"a\" width=\"24\" height=\"24\" transform=\"translate(23 68)\"/><path class=\"b\" d=\"M12,23A11,11,0,1,0,1,12,10.968,10.968,0,0,0,12,23ZM12,3a9,9,0,1,1-9,9A8.963,8.963,0,0,1,12,3Z\" transform=\"translate(23 68)\"/><path class=\"b\" d=\"M10.9,16.4a.908.908,0,0,0,.7.3h.1a.842.842,0,0,0,.7-.4L17.6,9a.913.913,0,0,0-.2-1.4,1,1,0,0,0-1.4.3l-4.5,6.3L8,10.5a.99.99,0,0,0-1.4,1.4Z\" transform=\"translate(23 68)\"/></g></svg>');background-repeat:no-repeat;background-size:contain;background-position:center center}.goa-callout .messages{margin-bottom:0;margin-top:1em}\n"]
-                },] }
-    ];
-    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: [".goa-notification{box-sizing:border-box;display:inline-block;position:relative;width:100%;padding-left:72px;padding-right:72px;color:#fff;background:#0070c4}.goa-notification.dismissed{display:none}@media screen and (min-width: 768px) and (max-width: 1199px){.goa-notification{padding-left:24px;padding-right:24px}}@media screen and (max-width: 767px){.goa-notification{padding-left:24px;padding-right:24px}}.goa-notification .content{box-sizing:border-box;display:flex;width:100%;margin:0;position:relative;padding:0 36px}.goa-notification .content .message{flex:1 0 0;box-sizing:border-box;min-height:56px;padding:28px 0}.goa-notification .content .close{flex:0 1 auto;color:#fff}.goa-notification a{color:#fff}.goa-notification a:hover,.goa-notification a:focus{color:#fff;text-decoration:none}.goa-notification.goa--event{background-color:#00853f}.goa-notification.goa--important{background-color:#feba35}.goa-notification.goa--important .message{color:#333}.goa-notification.goa--important a{color:#333}.goa-notification.goa--important a:hover,.goa-notification.goa--important a:focus{color:#333}.goa-notification.goa--emergency{background-color:#ec040b}.goa-notification .close{align-self:center;position:absolute;right:12px;cursor:pointer}.goa-notification .close svg{fill:#fff;color:#fff}.goa-notification .content:before{position:absolute;top:50%;left:6px;width:24px;height:24px;margin-top:-12px;content:\"\";background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z'/%3E%3Cpath fill='%23fff' d='M15.16,15.5h-2V9a1,1,0,0,0-1-1H9.82a1,1,0,0,0,0,2h1.36V15.5h-2a1,1,0,1,0,0,2h6a1,1,0,0,0,0-2Z'/%3E%3Cpath fill='%23fff' d='M12,7.33A1.29,1.29,0,1,0,10.73,6,1.29,1.29,0,0,0,12,7.33Z'/%3E%3C/svg%3E\");background-color:transparent;background-repeat:no-repeat;background-position:center center}.goa-notification.goa--emergency .content:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M11,9.41v4.52a1,1,0,0,0,2,0V9.41a1,1,0,0,0-2,0Z'/%3E%3Cpath fill='%23fff' d='M12,16.15a1.29,1.29,0,1,0,1.29,1.29A1.29,1.29,0,0,0,12,16.15Z'/%3E%3Cpath fill='%23fff' d='M22.87,20.14l-10-17.32a1,1,0,0,0-1.74,0l-10,17.32a1,1,0,0,0,0,1,1,1,0,0,0,.87.5H22a1,1,0,0,0,.87-.5A1,1,0,0,0,22.87,20.14Zm-19.14-.5L12,5.32l8.27,14.32Z'/%3E%3C/svg%3E\");background-color:transparent;background-repeat:no-repeat;background-position:center center}.goa-notification.goa--important .content:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z'/%3E%3Cpath fill='%23000' d='M12,14.46a1,1,0,0,0,1-1V6.57a1,1,0,0,0-2,0v6.89A1,1,0,0,0,12,14.46Z'/%3E%3Cpath fill='%23000' d='M12,15.68A1.29,1.29,0,1,0,13.29,17,1.29,1.29,0,0,0,12,15.68Z'/%3E%3C/svg%3E\");background-color:transparent;background-repeat:no-repeat;background-position:center center}.goa-notification.goa--event .content:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.27,22.85H20.73a2.14,2.14,0,0,0,2.14-2.14V5A2.14,2.14,0,0,0,20.73,2.9h-2.1v2h2.1a.14.14,0,0,1,.14.14V8.31H3.13V5a.14.14,0,0,1,.14-.14H5.48V6.28a1,1,0,1,0,2,0V1.85a1,1,0,1,0-2,0v1H3.27A2.14,2.14,0,0,0,1.13,5V20.71A2.14,2.14,0,0,0,3.27,22.85Zm17.6-12.54v10.4a.14.14,0,0,1-.14.14H3.27a.14.14,0,0,1-.14-.14V10.31Z'/%3E%3Cpath fill='%23fff' d='M16.45,7.28a1,1,0,0,0,1-1V1.85a1,1,0,0,0-2,0v1h-1.8v2h1.8V6.28A1,1,0,0,0,16.45,7.28Z'/%3E%3Cpath fill='%23fff' d='M11.47,7.28a1,1,0,0,0,1-1V1.85a1,1,0,1,0-2,0v1H8.66v2h1.81V6.28A1,1,0,0,0,11.47,7.28Z'/%3E%3Crect fill='%23fff' x='6.67' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='11.22' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='15.77' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='3.64' y='15.83' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='8.19' y='15.83' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='12.74' y='15.83' width='2.33' height='2.33'/%3E%3C/svg%3E\");background-color:transparent;background-repeat:no-repeat;background-position:center center}\n"]
-                },] }
-    ];
-    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: [".goa-notifications .title{position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);left:-10px;width:1px;height:1px;white-space:nowrap}.goa-notifications ul{box-sizing:border-box;display:inline-block;width:100%;margin:0;padding:0;list-style-type:none}.goa-notifications ul li{box-sizing:border-box;display:block;width:100%;margin:0;padding:0}\n"]
-                },] }
-    ];
-    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: ["@-webkit-keyframes pulse{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}:root{--fs-xs: .75rem;--fs-sm: .875rem;--fs-base: 1.125rem;--fs-lg: 1.25rem;--fs-xl: 1.5rem;--fs-2xl: 2.25rem;--fs-3xl: 3rem;--fw-thin: 100;--fw-light: 300;--fw-regular: 400;--fw-medium: 500;--fw-bold: 700;--fw-black: 900}@keyframes pulse{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}[data-skeleton]{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[data-skeleton] *{border-color:#ddd!important;color:transparent!important}[data-skeleton] p,[data-skeleton] a{background-color:#ddd!important;-webkit-animation:pulse 2s infinite ease-in-out;animation:pulse 2s infinite ease-in-out;display:inline;line-height:0!important;font-size:50%!important}[data-skeleton] p:after,[data-skeleton] a:after{content:\"\"!important;display:block!important;margin-bottom:1rem!important;background-size:contain}[data-skeleton] h1,[data-skeleton] h2,[data-skeleton] h3,[data-skeleton] h4,[data-skeleton] h5,[data-skeleton] h6{background-color:#ddd!important;-webkit-animation:pulse 2s infinite ease-in-out;animation:pulse 2s infinite ease-in-out;margin-bottom:1rem}[data-skeleton] h1{height:calc(.6 * 3rem)!important;height:calc(.6 * var(--fs-3xl))!important}[data-skeleton] h2{height:calc(.6 * 2.25rem)!important;height:calc(.6 * var(--fs-2xl))!important}[data-skeleton] h3{height:calc(.6 * 1.5rem)!important;height:calc(.6 * var(--fs-xl))!important}[data-skeleton] h4{height:calc(.6 * 1.25rem)!important;height:calc(.6 * var(--fs-lg))!important}[data-skeleton] img{background-color:#ddd!important;-webkit-animation:pulse 2s infinite ease-in-out;animation:pulse 2s infinite ease-in-out}.skeleton{background-color:#ddd!important;-webkit-animation:pulse 2s infinite ease-in-out;animation:pulse 2s infinite ease-in-out;background:#dcdcdc;overflow:hidden;margin:10px 0}.skeleton.text{width:100%;height:12px;border-radius:4px}.skeleton.paragraph{width:100%;height:70px;border-radius:4px}.skeleton.title{width:50%;height:20px;margin-bottom:15px;border-radius:4px}.skeleton.avatar{width:100px;height:100px;border-radius:50%}.skeleton.thumbnail{width:100px;height:100px;border-radius:4px}.skeleton-image-content{display:flex;flex-direction:row;grid-gap:30px;gap:30px}.skeleton-image-content__text{flex:1 1 auto}.skeleton-content{display:grid;grid-template-columns:1fr;grid-gap:30px;gap:30px;align-items:left}.goa-card{box-sizing:border-box;background:#fff;border:1px solid #dcdcdc;transition:opacity .3s ease-in-out}.goa-card .card-content{padding:28px;border-top:8px solid #0081a2}.goa-card .card-content .goa-title,.goa-card .card-content .goa-text,.goa-card .card-content .goa-content{margin-bottom:28px}.goa-card .card-content .goa-text{color:#333;font-size:1.125rem;font-size:var(--fs-base);line-height:28px}.goa-card .card-content .goa-footer{font-size:1.125rem;font-size:var(--fs-base)}.goa-card .card-content .goa-title{font-size:1.5rem;font-size:var(--fs-xl);font-weight:400;line-height:32px}.goa-card .goa-poster{position:relative;display:block;padding:56.25% 0 0;overflow:hidden;background:#e5e5e5}.goa-card .goa-poster:empty{display:none}.goa-card .goa-poster img,.goa-card .goa-poster iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}.goa-card .goa-poster-image img{display:block;width:100%;-o-object-fit:cover;object-fit:cover}.goa-card.card-auto{width:auto}.goa-card.card-auto .card{flex-basis:auto;width:auto}.goa-card a:hover{color:#004f84;text-decoration:none}.goa-card a:focus{outline:3px solid #feba35;outline-offset:0}.goa-card[data-skeleton] .goa-poster-image{background-color:#ddd!important;-webkit-animation:pulse 2s infinite ease-in-out;animation:pulse 2s infinite ease-in-out;padding-bottom:56.25%}.goa-card[data-skeleton] .goa-poster-image img{display:none}.goa-card[data-skeleton] .goa-title{margin-bottom:1rem}.goa-card[data-skeleton] .goa-footer{background-color:#ddd!important;-webkit-animation:pulse 2s infinite ease-in-out;animation:pulse 2s infinite ease-in-out;max-height:1rem}\n"]
-                },] }
-    ];
-    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: ["@-webkit-keyframes pulse{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}:root{--fs-xs: .75rem;--fs-sm: .875rem;--fs-base: 1.125rem;--fs-lg: 1.25rem;--fs-xl: 1.5rem;--fs-2xl: 2.25rem;--fs-3xl: 3rem;--fw-thin: 100;--fw-light: 300;--fw-regular: 400;--fw-medium: 500;--fw-bold: 700;--fw-black: 900}@keyframes pulse{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}[data-skeleton]{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[data-skeleton] *{border-color:#ddd!important;color:transparent!important}[data-skeleton] p,[data-skeleton] a{background-color:#ddd!important;-webkit-animation:pulse 2s infinite ease-in-out;animation:pulse 2s infinite ease-in-out;display:inline;line-height:0!important;font-size:50%!important}[data-skeleton] p:after,[data-skeleton] a:after{content:\"\"!important;display:block!important;margin-bottom:1rem!important;background-size:contain}[data-skeleton] h1,[data-skeleton] h2,[data-skeleton] h3,[data-skeleton] h4,[data-skeleton] h5,[data-skeleton] h6{background-color:#ddd!important;-webkit-animation:pulse 2s infinite ease-in-out;animation:pulse 2s infinite ease-in-out;margin-bottom:1rem}[data-skeleton] h1{height:calc(.6 * 3rem)!important;height:calc(.6 * var(--fs-3xl))!important}[data-skeleton] h2{height:calc(.6 * 2.25rem)!important;height:calc(.6 * var(--fs-2xl))!important}[data-skeleton] h3{height:calc(.6 * 1.5rem)!important;height:calc(.6 * var(--fs-xl))!important}[data-skeleton] h4{height:calc(.6 * 1.25rem)!important;height:calc(.6 * var(--fs-lg))!important}[data-skeleton] img{background-color:#ddd!important;-webkit-animation:pulse 2s infinite ease-in-out;animation:pulse 2s infinite ease-in-out}.skeleton{background-color:#ddd!important;-webkit-animation:pulse 2s infinite ease-in-out;animation:pulse 2s infinite ease-in-out;background:#dcdcdc;overflow:hidden;margin:10px 0}.skeleton.text{width:100%;height:12px;border-radius:4px}.skeleton.paragraph{width:100%;height:70px;border-radius:4px}.skeleton.title{width:50%;height:20px;margin-bottom:15px;border-radius:4px}.skeleton.avatar{width:100px;height:100px;border-radius:50%}.skeleton.thumbnail{width:100px;height:100px;border-radius:4px}.skeleton-image-content{display:flex;flex-direction:row;grid-gap:30px;gap:30px}.skeleton-image-content__text{flex:1 1 auto}.skeleton-content{display:grid;grid-template-columns:1fr;grid-gap:30px;gap:30px;align-items:left}.goa-card{box-sizing:border-box;background:#fff;border:1px solid #dcdcdc;transition:opacity .3s ease-in-out}.goa-card .card-content{padding:28px;border-top:8px solid #0081a2}.goa-card .card-content .goa-title,.goa-card .card-content .goa-text,.goa-card .card-content .goa-content{margin-bottom:28px}.goa-card .card-content .goa-text{color:#333;font-size:1.125rem;font-size:var(--fs-base);line-height:28px}.goa-card .card-content .goa-footer{font-size:1.125rem;font-size:var(--fs-base)}.goa-card .card-content .goa-title{font-size:1.5rem;font-size:var(--fs-xl);font-weight:400;line-height:32px}.goa-card .goa-poster{position:relative;display:block;padding:56.25% 0 0;overflow:hidden;background:#e5e5e5}.goa-card .goa-poster:empty{display:none}.goa-card .goa-poster img,.goa-card .goa-poster iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}.goa-card .goa-poster-image img{display:block;width:100%;-o-object-fit:cover;object-fit:cover}.goa-card.card-auto{width:auto}.goa-card.card-auto .card{flex-basis:auto;width:auto}.goa-card a:hover{color:#004f84;text-decoration:none}.goa-card a:focus{outline:3px solid #feba35;outline-offset:0}.goa-card[data-skeleton] .goa-poster-image{background-color:#ddd!important;-webkit-animation:pulse 2s infinite ease-in-out;animation:pulse 2s infinite ease-in-out;padding-bottom:56.25%}.goa-card[data-skeleton] .goa-poster-image img{display:none}.goa-card[data-skeleton] .goa-title{margin-bottom:1rem}.goa-card[data-skeleton] .goa-footer{background-color:#ddd!important;-webkit-animation:pulse 2s infinite ease-in-out;animation:pulse 2s infinite ease-in-out;max-height:1rem}\n"]
-                },] }
-    ];
-    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: [":root{--fs-xs: .75rem;--fs-sm: .875rem;--fs-base: 1.125rem;--fs-lg: 1.25rem;--fs-xl: 1.5rem;--fs-2xl: 2.25rem;--fs-3xl: 3rem;--fw-thin: 100;--fw-light: 300;--fw-regular: 400;--fw-medium: 500;--fw-bold: 700;--fw-black: 900}@-webkit-keyframes pulse{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}@keyframes pulse{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}[data-skeleton]{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[data-skeleton] *{border-color:#ddd!important;color:transparent!important}[data-skeleton] p,[data-skeleton] a{background-color:#ddd!important;-webkit-animation:pulse 2s infinite ease-in-out;animation:pulse 2s infinite ease-in-out;display:inline;line-height:0!important;font-size:50%!important}[data-skeleton] p:after,[data-skeleton] a:after{content:\"\"!important;display:block!important;margin-bottom:1rem!important;background-size:contain}[data-skeleton] h1,[data-skeleton] h2,[data-skeleton] h3,[data-skeleton] h4,[data-skeleton] h5,[data-skeleton] h6{background-color:#ddd!important;-webkit-animation:pulse 2s infinite ease-in-out;animation:pulse 2s infinite ease-in-out;margin-bottom:1rem}[data-skeleton] h1{height:calc(.6 * 3rem)!important;height:calc(.6 * var(--fs-3xl))!important}[data-skeleton] h2{height:calc(.6 * 2.25rem)!important;height:calc(.6 * var(--fs-2xl))!important}[data-skeleton] h3{height:calc(.6 * 1.5rem)!important;height:calc(.6 * var(--fs-xl))!important}[data-skeleton] h4{height:calc(.6 * 1.25rem)!important;height:calc(.6 * var(--fs-lg))!important}[data-skeleton] img{background-color:#ddd!important;-webkit-animation:pulse 2s infinite ease-in-out;animation:pulse 2s infinite ease-in-out}.skeleton{background-color:#ddd!important;-webkit-animation:pulse 2s infinite ease-in-out;animation:pulse 2s infinite ease-in-out;background:#dcdcdc;overflow:hidden;margin:10px 0}.skeleton.text{width:100%;height:12px;border-radius:4px}.skeleton.paragraph{width:100%;height:70px;border-radius:4px}.skeleton.title{width:50%;height:20px;margin-bottom:15px;border-radius:4px}.skeleton.avatar{width:100px;height:100px;border-radius:50%}.skeleton.thumbnail{width:100px;height:100px;border-radius:4px}.skeleton-image-content{display:flex;flex-direction:row;grid-gap:30px;gap:30px}.skeleton-image-content__text{flex:1 1 auto}.skeleton-content{display:grid;grid-template-columns:1fr;grid-gap:30px;gap:30px;align-items:left}.goa-card{box-sizing:border-box;background:#fff;border:1px solid #dcdcdc;transition:opacity .3s ease-in-out}.goa-card .card-content{padding:28px;border-top:8px solid #0081a2}.goa-card .card-content .goa-title,.goa-card .card-content .goa-text,.goa-card .card-content .goa-content{margin-bottom:28px}.goa-card .card-content .goa-text{color:#333;font-size:1.125rem;font-size:var(--fs-base);line-height:28px}.goa-card .card-content .goa-footer{font-size:1.125rem;font-size:var(--fs-base)}.goa-card .card-content .goa-title{font-size:1.5rem;font-size:var(--fs-xl);font-weight:400;line-height:32px}.goa-card .goa-poster{position:relative;display:block;padding:56.25% 0 0;overflow:hidden;background:#e5e5e5}.goa-card .goa-poster:empty{display:none}.goa-card .goa-poster img,.goa-card .goa-poster iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}.goa-card .goa-poster-image img{display:block;width:100%;-o-object-fit:cover;object-fit:cover}.goa-card.card-auto{width:auto}.goa-card.card-auto .card{flex-basis:auto;width:auto}.goa-card a:hover{color:#004f84;text-decoration:none}.goa-card a:focus{outline:3px solid #feba35;outline-offset:0}.goa-card[data-skeleton] .goa-poster-image{background-color:#ddd!important;-webkit-animation:pulse 2s infinite ease-in-out;animation:pulse 2s infinite ease-in-out;padding-bottom:56.25%}.goa-card[data-skeleton] .goa-poster-image img{display:none}.goa-card[data-skeleton] .goa-title{margin-bottom:1rem}.goa-card[data-skeleton] .goa-footer{background-color:#ddd!important;-webkit-animation:pulse 2s infinite ease-in-out;animation:pulse 2s infinite ease-in-out;max-height:1rem}\n"]
-                },] }
-    ];
-    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: [".goa-card-group{margin-top:14px;vertical-align:top}.goa-card-group .card-group-title{font-size:24px;font-weight:bold;color:#333}.goa-card-group .card-group-basic{display:flex;flex-direction:row;flex-wrap:wrap;align-items:stretch}.goa-card-group .card-group-basic>div{margin:14px 10px}.goa-card-group .card-group-basic-vue>div{display:flex;flex-direction:row;flex-wrap:wrap;align-items:stretch}.goa-card-group .card-group-basic-vue>div>div{margin:14px 10px}.goa-card-group .card-group-column{display:inline-block;flex-direction:column;-moz-column-count:3;column-count:3;flex-wrap:wrap;align-items:stretch}.goa-card-group .card-group-column>div{margin:14px}.goa-card-group .card-group-column-vue>div{display:inline-block;flex-direction:column;-moz-column-count:3;column-count:3;flex-wrap:wrap;align-items:stretch}.goa-card-group .card-group-column>div>div{margin:14px}\n"]
-                },] }
-    ];
-    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: [".goa-hero-banner-content{font-size:24px;line-height:32px;margin:0;color:#fff}@media screen and (min-width: 768px) and (max-width: 1199px){.goa-hero-banner-content{width:80%}}@media screen and (min-width: 1200px){.goa-hero-banner-content{width:40%}}.goa-hero-banner-content:last-of-type{margin-bottom:28px}\n"]
-                },] }
-    ];
-    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: ["@charset \"UTF-8\";.goa-link-button.goa-link-button{display:inline-block;text-decoration:none}.goa-link-button.goa-link-button{box-sizing:border-box;min-width:70px;padding:12px;border:2px solid #0070c4;border-radius:4px;background:#0070c4;cursor:pointer;color:#fff;font-size:18px;font-weight:700;line-height:1em}.goa-link-button.goa-link-button.btn-small{font-size:16px;padding:8px;margin:12px 12px 0 0}.goa-link-button.goa-link-button:last-of-type{margin-right:0}.goa-link-button.goa-link-button:disabled,.goa-link-button.goa-link-button:disabled.goa--secondary,.goa-link-button.goa-link-button:disabled.goa--tertiary{pointer-events:none;color:#666;background-color:#f1f1f1;border-color:#f1f1f1}.goa-link-button.goa-link-button:hover{border-color:#004f84;background:#004f84}.goa-link-button.goa-link-button:focus,.goa-link-button.goa-link-button:active{border-color:#004f84;box-shadow:0 0 0 3px #feba35;background:#004f84;outline:none}.goa-link-button.goa-link-button.goa--secondary{border:2px solid #0070c4;background:#fff;color:#0070c4}.goa-link-button.goa-link-button.goa--secondary:hover{border-color:#004f84;background:#fff;color:#004f84}.goa-link-button.goa-link-button.goa--secondary:focus,.goa-link-button.goa-link-button.goa--secondary:active{color:#004f84;background-color:#fff;border:2px solid #004f84;box-shadow:0 0 0 3px #feba35;outline:none}.goa-link-button.goa-link-button.goa--tertiary{border-color:#dcdcdc;background:#fff;color:#0070c4}.goa-link-button.goa-link-button.goa--tertiary:hover{background:#fff;color:#004f84}.goa-link-button.goa-link-button.goa--tertiary:focus,.goa-link-button.goa-link-button.goa--tertiary:active{border:2px solid #004f84;color:#004f84;background-color:#fff;box-shadow:0 0 0 3px #feba35;outline:none}.goa-link-button.goa-link-button.goa--borderless{background:none;color:var(--color-blue-500);border:none;transition:transform .1s ease-in-out;transform:scale(1)}.goa-link-button.goa-link-button.goa--borderless:hover{background:var(--color-blue-100);color:var(--color-blue-500)}.goa-link-button.goa-link-button.goa--borderless:focus,.goa-link-button.goa-link-button.goa--borderless:active{background-color:var(--color-blue-100);outline:none;box-shadow:none}.goa-link-button.goa-link-button.goa--borderless:active{transform:scale(.95)}.goa-link-button.goa-link-button.goa--red{color:var(--color-red-500);background:none;border:none;transition:transform .1s ease-in-out;transform:scale(1)}.goa-link-button.goa-link-button.goa--red:hover{background:var(--color-red-100);color:var(--color-red-500)}.goa-link-button.goa-link-button.goa--red:focus,.goa-link-button.goa-link-button.goa--red:active{background:var(--color-red-100);color:var(--color-red-500);outline:none;box-shadow:none}.goa-link-button.goa-link-button.goa--red:active{transform:scale(.95)}.goa-link-button.goa-link-button.right-arrow:after{color:#fff;margin-left:8px;content:\"\\2192\"}.goa-link-button.goa-link-button.up-arrow:after{color:#fff;margin-left:8px;content:\"\\2191\"}.goa-link-button.goa-link-button:visited,.goa-link-button.goa-link-button:link{color:#fff}\n"]
-                },] }
-    ];
-    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: [".goa-hero{box-sizing:border-box;display:flex;justify-content:flex-end;align-items:stretch;flex-direction:column;height:600px;border-bottom:8px solid #0081a2;color:#fff;background-position:center center;width:100%;padding:56px 28px}.goa-hero h1{margin:0 0 28px;padding:0;font-size:48px;line-height:56px;font-weight:700;color:#fff}\n"]
-                },] }
-    ];
-    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;
+        ValueListDirective.prototype.writeValue = function (value) {
+            if (value) {
+                this.value = value;
             }
         };
-        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);
-                }
-            }
-        };
-        /**
-         * 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();
-            }
+        ValueListDirective.prototype.registerOnChange = function (fn) {
+            this.onChange = fn;
         };
-        GoAPageLoadIndicatorComponent.prototype.ngOnDestroy = function () {
-            this.blockScrollingToggle(false);
+        ValueListDirective.prototype.registerOnTouched = function (fn) {
+            this.onTouched = fn;
         };
-        GoAPageLoadIndicatorComponent.prototype.setProgress = function (progress) {
-            if (this.type !== 'progress') {
+        ValueListDirective.prototype.listenForValueChange = function (value) {
+            if (!value) {
+                this._setValue(undefined);
                 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: [".svg{max-width:100px}.svg--small{max-width:65px}@-webkit-keyframes circle-animation{0%{stroke-dashoffset:75;transform:rotate(0)}to{stroke-dashoffset:75;transform:rotate(360deg)}}@keyframes circle-animation{0%{stroke-dashoffset:75;transform:rotate(0)}to{stroke-dashoffset:75;transform:rotate(360deg)}}.base-circle{display:block;fill:transparent;stroke:#c8eef9;stroke-width:7px}.progress-circle,.progress-circle--infinite{display:block;fill:transparent;stroke:#0070c4;stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:280;stroke-width:7px;transform-origin:50% 50%}.progress-circle--infinite{-webkit-animation:circle-animation 1.2s linear infinite;animation:circle-animation 1.2s linear infinite}.progress-message,.progress-message--small,.progress-message--large{font-style:normal;font-weight:normal}.progress-message--large{margin-top:32px;font-size:24px;color:#000}.progress-message--small{margin-top:18px;font-size:18px;color:#000}.progress-container,.progress-container--large,.progress-container--small{display:flex;flex-direction:column;align-items:center;justify-content:center;background:white}.progress-container--large{width:100%;height:100%}\n"]
-                },] }
-    ];
-    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;
+            try {
+                this.value = JSON.parse(value);
             }
-        };
-        /**
-        * @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: ["@-webkit-keyframes rotate{to{transform:rotate(360deg)}}@keyframes rotate{to{transform:rotate(360deg)}}.circular-loader{-webkit-animation:rotate 1s linear infinite;animation:rotate 1s linear infinite}.base-circle{display:block;fill:transparent;stroke-width:7px}.rotating-circle{-webkit-animation:rotate 1s linear infinite;animation:rotate 1s linear infinite;display:block;fill:transparent;stroke-linecap:round;stroke-width:7px;transform-origin:50% 50%}\n"]
-                },] }
-    ];
-    GoAElementLoadIndicatorComponent.ctorParameters = function () { return []; };
-    GoAElementLoadIndicatorComponent.propDecorators = {
-        visible: [{ type: i0.Input }],
-        size: [{ type: i0.Input }],
-        baseColour: [{ type: i0.Input }],
-        spinnerColour: [{ type: i0.Input }]
-    };
+            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);
+            }
+        };
+        ValueListDirective.prototype._setValue = function (value) {
+            this._value = value;
+            this.onChange(value);
+            this.onTouched();
+        };
+        return ValueListDirective;
+    }());
+    ValueListDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: ValueListDirective, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    ValueListDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: ValueListDirective, selector: "[goaValueList]", host: { listeners: { "_change": "listenForValueChange($event.detail.value)" } }, providers: [
+            {
+                provide: forms.NG_VALUE_ACCESSOR,
+                useExisting: i0.forwardRef(function () { return ValueListDirective; }),
+                multi: true,
+            },
+        ], ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: ValueListDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: "[goaValueList]",
+                        providers: [
+                            {
+                                provide: forms.NG_VALUE_ACCESSOR,
+                                useExisting: i0.forwardRef(function () { return ValueListDirective; }),
+                                multi: true,
+                            },
+                        ],
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { listenForValueChange: [{
+                    type: i0.HostListener,
+                    args: ["_change", ["$event.detail.value"]]
+                }] } });
 
     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],
-                },] }
-    ];
-
-    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: [":global .goa-badge-icon{font-size:14px}.goa-badge{display:inline-flex;align-items:center;border-radius:4px;padding:0 .5rem;grid-gap:4px;gap:4px}.goa-badge+.goa-badge{margin-left:.25rem}.goa-badge-content{text-transform:capitalize;font-size:14px;font-weight:400;line-height:24px}.goa-badge.badge-information{background-color:#f1f1f1;color:#005daa}.goa-badge.badge-success{background-color:#00853f;color:#fff}.goa-badge.badge-warning{background-color:#feba35;color:#333}.goa-badge.badge-emergency{background-color:#ec040b;color:#fff}.goa-badge.badge-dark{background-color:#333;color:#fff}.goa-badge.badge-midtone{background-color:#767676;color:#fff}.goa-badge.badge-light{background-color:#fff;color:#333}.goa-badge.badge-inactive{background-color:#fff;color:#333}\n"]
-                },] }
-    ];
-    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: [".goa-app-version-header{display:flex;justify-content:center;background-color:#dcdcdc}.goa-app-version-header .content-wrapper{display:flex;flex:1 1 auto;margin:0 24px;max-width:1200px}@media (min-width: 768px){.goa-app-version-header .content-wrapper{margin:0 72px}}.goa-app-version-header .content-wrapper .environment-and-version{display:flex;flex:1 1 auto;justify-content:center;padding-left:20px}.goa-app-version-header .content-wrapper .close{margin-left:auto;width:20px;text-align:right;font-weight:bold;font-size:small;align-self:center;cursor:pointer;display:flex}.goa-app-version-header .content-wrapper .close svg{color:#0070c4}\n"]
-                },] }
-    ];
-    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);
-                }
-                if (this.input && this.input.valueAsNumber !== newVal) {
-                    this.input.valueAsNumber = newVal;
-                }
-            },
-            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: ["::ng-deep .ng-touched.ng-invalid>.number-input-container{border:2px solid #fc1921;border-radius:6px}:host{display:block}.number-input-container{display:flex;flex-direction:row;align-items:stretch;height:40px;padding:0;outline:0px}.number-input-container>input{border:solid 1px #dcdcdc;min-width:75px;width:0;flex:1;border-radius:0;padding:6px;-moz-appearance:textfield}.number-input-container>input:focus-visible{outline:unset;border-color:#feba35;border-width:2px}.number-input-container>input::-webkit-outer-spin-button,.number-input-container>input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.number-input-container>:first-child{border-radius:4px 0 0 4px}.number-input-container>:last-child{border-radius:0 4px 4px 0}.number-input-container>button{min-width:30px;margin:0;padding:0;z-index:1;font-size:20px}.number-input-container>button>svg{stroke:#fff}.number-input-container>button:disabled>svg{stroke:#666}.number-input-container>button:hover>svg{stroke:#fff}\n"]
-                },] }
-    ];
-    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: [],
-                },] }
-    ];
+    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, declarations: [ValueDirective, ValueListDirective], exports: [ValueDirective, ValueListDirective] });
+    AngularComponentsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: AngularComponentsModule });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: AngularComponentsModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [ValueDirective, ValueListDirective],
+                        exports: [ValueDirective, ValueListDirective],
+                        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;
+    exports.ValueDirective = ValueDirective;
+    exports.ValueListDirective = ValueListDirective;
 
     Object.defineProperty(exports, '__esModule', { value: true });