@abgov/angular-components 2.0.0-alpha.4 → 2.0.0-alpha.6

package/fesm2015/abgov-angular-components.js

@@ -1,2043 +1,155 @@
-import '@abgov/web-components';
 import * as i0 from '@angular/core';
-import { Component, HostBinding, Input, ChangeDetectionStrategy, ViewChild, ChangeDetectorRef, ContentChildren, EventEmitter, Output, forwardRef, Injectable, InjectionToken, HostListener, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA, forwardRef, Directive, HostListener } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { OverlayModule } from '@angular/cdk/overlay';
-import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import { BehaviorSubject } from 'rxjs';
-
-/**
- * A Government of Alberta styled button.
- * selector: button[goa-button], input[type="button"][goa-button], input[type="submit"][goa-button]
- */
-class GoAButtonComponent {
-    constructor() {
-        /**
-         * The appearance style of the button.
-         */
-        this.buttonType = 'primary';
-        /**
-         * The size of the button, controls font size and padding.
-         */
-        this.buttonSize = 'normal';
-    }
-    /**
-     * Adds class goa-button to the host.
-     * @ignore
-     */
-    get primaryBinding() {
-        return true;
-    }
-    /**
-     * Adds class goa--secondary to the host if the buttonStyle = secondary.
-     * @ignore
-     */
-    get secondaryBinding() {
-        return this.buttonType === 'secondary';
-    }
-    /**
-     * Adds class goa--tertiary to the host if the buttonStyle = tertiary.
-     * @ignore
-     */
-    get tertiaryBinding() {
-        return this.buttonType === 'tertiary';
-    }
-    /**
-     * Adds class btn-small to the host if the buttonSize = small.
-     * @ignore
-     */
-    get smallBinding() {
-        return this.buttonSize === 'small';
-    }
-    /* eslint-disable @angular-eslint/no-empty-lifecycle-method */
-    ngOnInit() { }
-}
-GoAButtonComponent.decorators = [
-    { type: Component, args: [{
-                selector: 
-                // eslint-disable-next-line @angular-eslint/component-selector
-                'button[goa-button], input[type="button"][goa-button], input[type="submit"][goa-button]',
-                template: "<ng-content></ng-content>\n",
-                styles: [""]
-            },] }
-];
-GoAButtonComponent.ctorParameters = () => [];
-GoAButtonComponent.propDecorators = {
-    primaryBinding: [{ type: HostBinding, args: ['class.goa-button',] }],
-    secondaryBinding: [{ type: HostBinding, args: ['class.goa--secondary',] }],
-    tertiaryBinding: [{ type: HostBinding, args: ['class.goa--tertiary',] }],
-    smallBinding: [{ type: HostBinding, args: ['class.btn-small',] }],
-    buttonType: [{ type: Input }],
-    buttonSize: [{ type: Input }]
-};
-
-/**
- * A logo for a Government of Alberta hosted microsite.
- * selector: goa-microsite-logo
- */
-class GoAMicrositeLogoComponent {
-    constructor() {
-        /**
-         * The home page URL of the microsite.
-         */
-        this.serviceHome = 'https://www.alberta.ca/index.aspx';
-    }
-    /**
-     * @ignore
-     */
-    ngOnInit() {
-        if (this.serviceName === undefined || this.serviceName === null) {
-            throw new TypeError(`Input 'serviceName' is required.`);
-        }
-    }
-}
-GoAMicrositeLogoComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'goa-microsite-logo',
-                template: "<a href=\"{{serviceHome}}\" attr.aria-label=\"{{serviceHome}}\" class=\"microsite-link\">\n  <span class=\"image-desktop-tablet\"></span>\n  <span class=\"image-mobile\"></span>\n  <span class=\"name\">\n    {{serviceName}}\n  </span>\n</a>\n",
-                styles: [""]
-            },] }
-];
-GoAMicrositeLogoComponent.ctorParameters = () => [];
-GoAMicrositeLogoComponent.propDecorators = {
-    serviceName: [{ type: Input }],
-    serviceHome: [{ type: Input }]
-};
-
-/**
- * A header component for a Government of Alberta hosted microsite.
- * selector: goa-header
- */
-class GoAHeaderComponent {
-    // ServiceLevel = this.ServiceLevel;
-    constructor() {
-        /**
-         * The home page URL of the microsite.
-         */
-        this.serviceHome = 'https://www.alberta.ca/index.aspx';
-    }
-    /**
-     * @ignore
-     */
-    ngOnInit() {
-        this.checkRequiredProps('serviceLevel', 'serviceName', 'serviceHome');
-    }
-    serviceLevelCssClass() {
-        return `service-level--${this.serviceLevel.toLowerCase()}`;
-    }
-    serviceLevelFormatted() {
-        return this.serviceLevel.toLowerCase();
-    }
-    checkRequiredProps(...props) {
-        props.forEach(prop => {
-            if (!this[prop]) {
-                throw new TypeError(`Input '${prop}' is required.`);
-            }
-        });
-    }
-}
-GoAHeaderComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'goa-header',
-                template: "<header class=\"goa-header goa-official-site-header\">\n  <div>\n    <span class=\"service-level\" [ngClass]=\"serviceLevelCssClass()\">\n      {{ serviceLevelFormatted() }}\n    </span>\n  </div>\n  <div\n    *ngIf=\"serviceLevel === 'live'; else elseNotLive\"\n    class=\"site-text\"\n    i18n=\"Alberta.ca official site text on header\"\n  >\n    An official site of the\n    <a href=\"https://www.alberta.ca/index.aspx\" class=\"web-link\"\n      >Alberta Government</a\n    >\n  </div>\n  <ng-template #elseNotLive>\n    <div class=\"site-text\" i18n=\"Alberta.ca site text on header\">\n      This is a new\n      <a href=\"https://www.alberta.ca/index.aspx\" class=\"web-link\"\n        >Alberta Government</a\n      >\n      service\n    </div>\n  </ng-template>\n</header>\n<header class=\"goa-header goa-microsite-header\">\n  <goa-microsite-logo\n    [serviceName]=\"serviceName\"\n    [serviceHome]=\"serviceHome\"\n  ></goa-microsite-logo>\n  <ng-content></ng-content>\n</header>\n",
-                styles: [""]
-            },] }
-];
-GoAHeaderComponent.ctorParameters = () => [];
-GoAHeaderComponent.propDecorators = {
-    serviceName: [{ type: Input }],
-    serviceHome: [{ type: Input }],
-    serviceLevel: [{ type: Input }]
-};
-
-/**
- * Styles an anchor Design system compliant.
- * selector: a[goa-button]
- * @example <a goa-button linkType='right' href='...'>Text</a>
- */
-class GoAButtonLinkComponent {
-    constructor() {
-        /**
-         * The type of arrow to use.
-         */
-        this.linkType = 'right';
-        /**
-         * The size of the button, controls font size and padding.
-         */
-        this.buttonSize = 'normal';
-    }
-    /**
-     * Adds class goa-link-button to the host.
-     * @ignore
-     */
-    get primaryBinding() {
-        return true;
-    }
-    /**
-     * Adds class right-arrow to the host if the linkType = right.
-     * @ignore
-     */
-    get rightBinding() {
-        return this.linkType === 'right';
-    }
-    /**
-     * Adds class right-arrow to the host if the linkType = right.
-     * @ignore
-     */
-    get upBinding() {
-        return this.linkType === 'up';
-    }
-    /**
-     * Adds class btn-small to the host if the buttonSize = small.
-     * @ignore
-     */
-    get smallBinding() {
-        return this.buttonSize === 'small';
-    }
-    /* eslint-disable @angular-eslint/no-empty-lifecycle-method */
-    ngOnInit() { }
-}
-GoAButtonLinkComponent.decorators = [
-    { type: Component, args: [{
-                // eslint-disable-next-line @angular-eslint/component-selector
-                selector: 'a[goa-button]',
-                template: "<span>\n    <ng-content></ng-content>\n</span>",
-                styles: [""]
-            },] }
-];
-GoAButtonLinkComponent.ctorParameters = () => [];
-GoAButtonLinkComponent.propDecorators = {
-    primaryBinding: [{ type: HostBinding, args: ['class.goa-link-button',] }],
-    rightBinding: [{ type: HostBinding, args: ['class.right-arrow',] }],
-    upBinding: [{ type: HostBinding, args: ['class.up-arrow',] }],
-    smallBinding: [{ type: HostBinding, args: ['class.btn-small',] }],
-    linkType: [{ type: Input }],
-    buttonSize: [{ type: Input }]
-};
-
-/**
- * Option component with to use with GoADropdown.
- * selector: goa-option
- */
-class GoAOptionComponent {
-    constructor() {
-        /**
-         * Is the option currently selected
-         * @ignore
-         */
-        this.selected = false;
-        /**
-         * Is the option selected by default?
-         */
-        this.defaultSelected = false;
-    }
-    /**
-     * Lifecycle hook OnInit
-     * @ignore
-     */
-    ngOnInit() {
-        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;
-    }
-}
-GoAOptionComponent.decorators = [
-    { type: 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: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-GoAOptionComponent.ctorParameters = () => [];
-GoAOptionComponent.propDecorators = {
-    id: [{ type: Input }],
-    value: [{ type: Input }],
-    label: [{ type: Input }],
-    defaultSelected: [{ type: Input }],
-    optionTemplate: [{ type: ViewChild, args: ['optionTemplate',] }]
-};
-
-/**
- * Option grouping component with to use with GoADropdown.
- * selector: goa-option-group
- */
-class GoAOptionGroupComponent {
-    constructor(cdr) {
-        this.cdr = cdr;
-    }
-    /**
-     * Lifecycle hook OnInit
-     * @ignore
-     */
-    ngOnInit() {
-        if (this.label === undefined || this.label === null || this.label === '') {
-            throw new TypeError(`The input 'label' is required.`);
-        }
-    }
-    /**
-     * Lifecycle hook AfterViewInit
-     * @ignore
-     */
-    ngAfterViewInit() {
-        this._filteredOptions = [...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();
-    }
-}
-GoAOptionGroupComponent.decorators = [
-    { type: 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 = () => [
-    { type: ChangeDetectorRef }
-];
-GoAOptionGroupComponent.propDecorators = {
-    label: [{ type: Input }],
-    options: [{ type: ContentChildren, args: [GoAOptionComponent, { descendants: true },] }],
-    optionGroupTemplate: [{ type: ViewChild, args: ['optionGroupTemplate',] }]
-};
+import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import '@abgov/web-components';
 
-/**
- * A dropdown component with Government of Alberta styling.
- * selector: goa-dropdown
- */
-class GoADropdownComponent {
-    constructor(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 EventEmitter();
-    }
-    /**
-     * Update the selected options, select the options with the given ids
-     */
-    set selectedIds(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.');
-        }
-        const selectedOptions = [];
-        this.allOptions.forEach(option => {
-            if (ids.includes(option.id)) {
-                option.selected = true;
-                selectedOptions.push(option);
-            }
-            else {
-                option.selected = false;
-            }
-        });
-        this.selectionChanged(selectedOptions, true);
-    }
-    /**
-     * Is multiple selection?
-     */
-    set multiple(value) {
-        this._multiple = value;
-        if (this._multiple === false) {
-            // If we have changed from multiple to no multiple then deselect everything.
-            this.selectedItems.forEach(option => {
-                option.selected = false;
-            });
-        }
-    }
-    get multiple() {
-        return this._multiple;
-    }
-    /**
-     * Is a selection required?
-     */
-    set required(value) {
-        this._required = value;
-        this._requiredError = this.selectedItems.length === 0 && this._required === true;
-    }
-    get required() {
-        return this._required;
-    }
-    /**
-     * Lifecycle hook OnInit
-     * @ignore
-     */
-    /* eslint-disable @angular-eslint/no-empty-lifecycle-method */
-    ngOnInit() { }
-    /**
-     * Lifecycle hook AfterViewInit
-     * @ignore
-     */
-    ngAfterViewInit() {
-        this._triggerRect = this.textInput.nativeElement.getBoundingClientRect();
-        this._filteredOptions = [...this.options];
-        this._allFilteredOptions = [...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
-     */
-    onFilterChange(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
-     */
-    overlayKeydown(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
-     */
-    setActiveOption(option) {
-        this._activeOption = option;
-        this._activeIndex = this._allFilteredOptions.findIndex((filteredOption) => filteredOption.id === option.id);
-    }
-    /**
-     * Handler for when the input is clicked.
-     * @ignore
-     */
-    inputClicked() {
-        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
-     */
-    optionClicked(option) {
-        let selectedOptions = [];
-        if (this.multiple === true) {
-            option.selected = !option.selected;
-            selectedOptions = this.selectedItems;
-        }
-        else {
-            option.selected = !option.selected;
-            this.selectedItems.forEach((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
-     */
-    selectionChanged(options, emitEvent) {
-        if (options.length > 0) {
-            const selectedOptions = options.map(o => 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
-     */
-    emitChange(options) {
-        const values = options.map((option) => option.value);
-        this.selectionChange.emit(values);
-    }
-    /**
-     * Gets all the currently selected options
-     * @ignore
-     */
-    get selectedItems() {
-        if (this.allOptions === undefined) {
-            return [];
-        }
-        return [...this.allOptions.filter((option) => option.selected === true)];
-    }
-    /**
-     * Set the text of the input.
-     * @param value The value to set
-     * @ignore
-     */
-    setTextInput(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
-     */
-    filterOptions(filterText) {
-        this.optionGroups.forEach(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
-     */
-    typeaheadFilter(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());
-        }
-    }
+class AngularComponentsModule {
 }
-GoADropdownComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'goa-dropdown',
-                template: "<div class=\"goa-dropdown\" [ngClass]=\"{\n    'single-selection': multiple === false,\n    'has-error': _requiredError === true,\n    'opened': _isOpen,\n    'disabled': disabled === true\n    }\">    \n    <label class=\"dropdown-label\">{{label}}\n        <span *ngIf=\"required\" class=\"required-label\" i18n=\"Required label for dropdown\">(Required)</span>\n        <div (click)=\"inputClicked()\" class=\"dropdown-grouping\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n            <i class=\"goa-select-icon\"></i>\n            <input class=\"dropdown-textbox margin-override\" \n                #textInput \n                (input)=\"onFilterChange($event.target.value)\"\n                type=\"text\" \n                [attr.readonly]=\"typeaheadMode === 'none' ? 'readonly' : null\"\n                [attr.disabled]=\"disabled === true ? 'true' : null\"\n                placeholder=\"{{description}}\"> \n            <ng-template\n                cdkConnectedOverlay\n                cdkConnectedOverlayLockPosition\n                [cdkConnectedOverlayHasBackdrop]=\"true\"\n                [cdkConnectedOverlayViewportMargin]=\"20\"\n                cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n                (backdropClick)=\"_isOpen = false\"\n                (overlayKeydown)=\"overlayKeydown($event)\"\n                (detach)=\"_isOpen = false\"\n                [cdkConnectedOverlayOrigin]=\"trigger\"\n                [cdkConnectedOverlayOpen]=\"_isOpen\"\n                [cdkConnectedOverlayPositions]=\"_positions\"\n                [cdkConnectedOverlayMinWidth]=\"_triggerRect?.width\"\n                [cdkConnectedOverlayHeight]=\"menuHeight\"\n                [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n            >\n                <div class=\"dropdown-menu\">\n                    <div *ngFor=\"let optionGroup of optionGroups\" class=\"option-group\">\n                        <div *ngIf=\"optionGroup._filteredOptions.length > 0\">\n                            <div class=\"option-group-label\">\n                                {{optionGroup.label}}\n                            </div>\n                            <!--Grab the <option> template from the GoAOption -->\n                            <div class=\"option\"\n                                [ngClass]=\"{\n                                    'selected': option.selected,\n                                    'active': option.id === _activeOption.id\n                                }\"\n                                *ngFor=\"let option of (optionGroup._filteredOptions)\" \n                                (click)=\"optionClicked(option)\"\n                                (mouseover)=\"setActiveOption(option)\">\n                                <ng-template [ngTemplateOutlet]=\"option.optionTemplate\"></ng-template>\n                            </div>\n                        </div>\n                    </div>\n                    <!--Grab the <option> template from the GoAOption -->\n                    <div class=\"option\" \n                        [ngClass]=\"{\n                            'selected': option.selected,\n                            'active': option.id === _activeOption.id\n                        }\"\n                        *ngFor=\"let option of (_filteredOptions)\" \n                        (click)=\"optionClicked(option)\"\n                        (mouseover)=\"setActiveOption(option)\"> \n                        <ng-template [ngTemplateOutlet]=\"option.optionTemplate\"></ng-template>\n                    </div>\n                </div>      \n            </ng-template>   \n        </div>\n        <span *ngIf=\"!_requiredError\" class=\"helper-text\">{{description}}</span>\n        <span *ngIf=\"_requiredError === true\" class=\"error-text\" i18n=\"Required warning for dropdown\">At least one item must be selected.</span>   \n    </label>\n</div>\n",
-                styles: [""]
-            },] }
-];
-GoADropdownComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
-];
-GoADropdownComponent.propDecorators = {
-    typeaheadMode: [{ type: Input }],
-    menuHeight: [{ type: Input }],
-    label: [{ type: Input }],
-    description: [{ type: Input }],
-    selectedIds: [{ type: Input }],
-    disabled: [{ type: Input }],
-    multiple: [{ type: Input }],
-    required: [{ type: Input }],
-    textInput: [{ type: ViewChild, args: ['textInput',] }],
-    allOptions: [{ type: ContentChildren, args: [GoAOptionComponent, { descendants: true },] }],
-    options: [{ type: ContentChildren, args: [GoAOptionComponent, { descendants: false },] }],
-    optionGroups: [{ type: ContentChildren, args: [GoAOptionGroupComponent, { descendants: false },] }],
-    selectionChange: [{ type: Output }]
-};
-
-const GOA_CHECKBOX_CONTROL_VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => GoACheckboxComponent),
-    multi: true
-};
-/**
- * Checkbox component with Government of Alberta styling.
- * selector: goa-checkbox
- */
-class GoACheckboxComponent {
-    constructor(_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 EventEmitter();
-        /**
-         * @ignore
-         */
-        this._propagateChange = (_) => { };
-        this.uniqueId = `goa-checkbox-${GoACheckboxComponent.idNum++}`;
-    }
-    /**
-     * Boolean indicating whether or not the checkbox should display as indeterminate
-     * (i.e. it has associated 'child' checkboxes, some of which are selected).
-     */
-    get indeterminate() { return this._indeterminate; }
-    set indeterminate(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;
-            }
-        }
+AngularComponentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AngularComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AngularComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AngularComponentsModule, imports: [CommonModule, FormsModule, ReactiveFormsModule] });
+AngularComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AngularComponentsModule, imports: [[CommonModule, FormsModule, ReactiveFormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AngularComponentsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, FormsModule, ReactiveFormsModule],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }] });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class ValueDirective {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this._value = "";
+        this.onChange = () => { };
+        this.onTouched = () => { };
     }
-    /**
-     * Boolean indicating if the checkbox is required and not checked
-     * @ignore
-     */
-    hasError() {
-        return this.required && !this.checked;
+    get value() {
+        return this._value;
     }
-    /**
-     * Implemented as part of ControlValueAccessor.
-     * @param value The model bound property, i.e. the value of checked
-     * @ignore
-     */
-    writeValue(value) {
-        if ((value !== undefined) && (value !== null)) {
-            this.checked = value;
-            this._changeDetectorRef.detectChanges();
+    set value(val) {
+        if (val !== this._value) {
+            this._value = val;
+            this.onChange(this._value);
+            this.onTouched();
+            this.elementRef.nativeElement.value = val;
         }
     }
-    /**
-     * Implemented as part of ControlValueAccessor.
-     * @param fn The function to call on change.  Provided by ControlValueAccessor
-     * @ignore
-     */
-    registerOnChange(fn) {
-        this._propagateChange = fn;
-    }
-    /**
-     * Implemented as part of ControlValueAccessor.
-     * @param fn The function to call on touch.  Provided by ControlValueAccessor
-     * @ignore
-     */
-    registerOnTouched(fn) {
-        this._onTouchedCallback = fn;
-    }
-    ;
-    /**
-     * Toggles the checked value of the checkbox
-     * @ignore
-     */
-    toggle() {
-        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
-     */
-    onChange(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;
-        const checkBoxChange = {
-            source: this,
-            checked: this.checked
-        };
-        this._propagateChange(this.checked);
-        this.selectionChange.emit(checkBoxChange);
-    }
-}
-/**
- * @ignore
- */
-GoACheckboxComponent.idNum = 0;
-GoACheckboxComponent.decorators = [
-    { type: 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: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-GoACheckboxComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
-];
-GoACheckboxComponent.propDecorators = {
-    value: [{ type: Input }],
-    checked: [{ type: Input }],
-    disabled: [{ type: Input }],
-    required: [{ type: Input }],
-    indeterminate: [{ type: Input }],
-    labelPosition: [{ type: Input }],
-    selectionChange: [{ type: Output }]
-};
-
-class GoARadioChange {
-}
-
-class GoARadioService {
-    constructor() {
-        this.radioChangeMessage = new BehaviorSubject(new GoARadioChange());
-    }
-    selectRadio(radioChange) {
-        this.radioChangeMessage.next(radioChange);
-    }
-}
-GoARadioService.ɵprov = i0.ɵɵdefineInjectable({ factory: function GoARadioService_Factory() { return new GoARadioService(); }, token: GoARadioService, providedIn: "root" });
-GoARadioService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root',
-            },] }
-];
-GoARadioService.ctorParameters = () => [];
-
-/**
- * Control value accessor to use for the component's provider
- * @ignore
- */
-const GOA_RADIO_CONTROL_VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => GoARadioComponent),
-    multi: true
-};
-/**
- * Radiobutton component with Government of Alberta styling.
- */
-class GoARadioComponent {
-    constructor(_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 EventEmitter();
-        /**
-         * @ignore
-         */
-        this._propagateChange = (_) => { };
-        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
-     */
-    ngOnInit() {
-        this.radioServiceSubscription = this._radioService.radioChangeMessage.subscribe(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
-     */
-    ngOnDestroy() {
-        this.radioServiceSubscription.unsubscribe();
-    }
-    /**
-     * Boolean indicating if the radiobutton is required and not checked
-     * @ignore
-     */
-    hasError() {
-        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.
-     */
-    markForCheck() {
-        // 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
-     */
     writeValue(value) {
-        if ((value !== undefined) && (value !== null)) {
-            this.checked = value;
-            this._changeDetector.detectChanges();
+        if (value) {
+            this.value = value;
         }
     }
-    /**
-     * Implemented as part of ControlValueAccessor.
-     * @param fn The function to call on change.  Provided by ControlValueAccessor
-     * @ignore
-     */
     registerOnChange(fn) {
-        this._propagateChange = fn;
+        this.onChange = fn;
     }
-    /**
-     * Implemented as part of ControlValueAccessor.
-     * @param fn The function to call on touch.  Provided by ControlValueAccessor
-     * @ignore
-     */
     registerOnTouched(fn) {
-        this._onTouchedCallback = 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
-     */
-    onClick() {
-        // flip the checked state of this radio
-        this.checked = !this.checked;
-        // emit radio change event for those interested
-        const 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);
+    listenForValueChange(value) {
+        this.value = value;
     }
 }
-/**
- * Used to generate unique Id for this component
- * @ignore
- */
-GoARadioComponent.idNum = 0;
-GoARadioComponent.decorators = [
-    { type: 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: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-GoARadioComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: GoARadioService }
-];
-GoARadioComponent.propDecorators = {
-    name: [{ type: Input }],
-    value: [{ type: Input }],
-    checked: [{ type: Input }],
-    disabled: [{ type: Input }],
-    required: [{ type: Input }],
-    labelPosition: [{ type: Input }],
-    selectionChange: [{ type: Output }]
-};
-
-/**
- * Control value accessor to use for the component's provider
- * @ignore
- */
-const GOA_RADIO_GROUP_CONTROL_VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => 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
- */
-const GOA_RADIO_GROUP = new InjectionToken('GoARadioGroup');
-/**
- * Radiobutton group component with Government of Alberta styling.  Used to group a set of related radio buttons.
- */
-class GoARadioGroupComponent {
-    constructor(_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 EventEmitter();
-        /**
-         * @ignore
-         */
-        this._propagateChange = (_) => { };
-        this.uniqueId = `goa-radiobutton-group-${GoARadioGroupComponent.idNum++}`;
-    }
-    /**
-     * Indicates the "group" or set of radios this radio belongs to.
-     */
-    get name() { return this._name; }
-    set name(value) {
-        this._name = value;
-        this._updateRadioButtonNames();
-    }
-    /**
-     * Value/unique identifier for the object the radiobutton represents.
-     */
-    get value() { return this._value; }
-    set value(newValue) {
-        if (this._value !== newValue) {
-            // Set this before proceeding to ensure no circular loop occurs with selection.
-            this._value = newValue;
-            this._updateSelectedRadioFromValue();
-            this._setSelectedRadioToChecked();
-        }
-    }
-    /**
-     * The currently selected radio.
-     */
-    get selected() { return this._selected; }
-    set selected(selected) {
-        this._selected = selected;
-        this.value = selected ? selected.value : null;
-        this._setSelectedRadioToChecked();
-    }
-    /**
-     * Boolean indicating whether or not the radiobutton is disabled.
-     */
-    get disabled() { return this._disabled; }
-    set disabled(value) {
-        this._disabled = value;
-        this._updateRadioButtonDisabled();
-    }
-    /**
-     * Boolean indicating whether or not the radiobutton is required.
-     */
-    get required() { return this._required; }
-    set required(value) {
-        this._required = value;
-        this._updateRadioButtonRequired();
-    }
-    /**
-     * The position to display the label/text for the radiobutton.  Valid values are before and after.
-     */
-    get labelPosition() {
-        return this._labelPosition;
-    }
-    set labelPosition(position) {
-        this._labelPosition = position === 'before' ? 'before' : 'after';
-        this._updateRadioButtonLabelPosition();
-    }
-    /**
-     * Lifecycle hook AfterContentInit.  Used to set properties on child radios based on the radio group's properties.
-     * @ignore
-     */
-    ngAfterContentInit() {
-        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
-     */
-    ngOnInit() {
-        this.radioServiceSubscription = this._radioService.radioChangeMessage.subscribe(rcm => {
-            if (rcm && rcm.source && rcm.source.name === this.name && rcm.checked) {
-                this.selected = this._radios.find(r => r.uniqueId === rcm.source.uniqueId);
-                this.selectionChange.emit(rcm);
-            }
-        });
-    }
-    /**
-     * Lifecycle hook OnDestroy.  Used to unsubscribe from the radio change messages.
-     * @ignore
-     */
-    ngOnDestroy() {
-        this.radioServiceSubscription.unsubscribe();
-    }
-    /**
-     * Updates the `selected` radio button from the internal _value state.
-     */
-    _updateSelectedRadioFromValue() {
-        // If the value already matches the selected radio, do nothing.
-        const 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(() => {
-            if (this._radios && !isAlreadySelected) {
-                this._selected = null;
-                this._radios.forEach(radio => {
-                    radio.checked = this.value === radio.value;
-                    if (radio.checked) {
-                        this._selected = radio;
-                    }
-                });
-            }
-        });
-    }
-    /**
-     * Sets the selected radio to checked if it is not already checked
-     */
-    _setSelectedRadioToChecked() {
-        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
-     */
-    _updateRadioButtonNames() {
-        if (this._radios) {
-            this._radios.forEach(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
-     */
-    _updateRadioButtonDisabled() {
-        if (this._radios) {
-            this._radios.forEach(radio => {
-                radio.required = this._required;
-                radio.markForCheck();
-            });
-        }
+ValueDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ValueDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ValueDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: ValueDirective, selector: "[goaValue]", host: { listeners: { "_change": "listenForValueChange($event.detail.value)" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => ValueDirective),
+            multi: true,
+        },
+    ], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ValueDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[goaValue]",
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ValueDirective),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { listenForValueChange: [{
+                type: HostListener,
+                args: ["_change", ["$event.detail.value"]]
+            }] } });
+class ValuesDirective {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this._value = [];
+        this.onChange = () => { };
+        this.onTouched = () => { };
     }
-    /**
-     * Updates the 'required' property of the child radio buttons to match the required state of the radio group
-     */
-    _updateRadioButtonRequired() {
-        if (this._radios) {
-            this._radios.forEach(radio => {
-                radio.required = this._required;
-                radio.markForCheck();
-            });
-        }
+    get value() {
+        return this._value;
     }
-    /**
-     * Updates the 'labelPosition' property of the child radio buttons to match the labelPosition state of the radio group
-     */
-    _updateRadioButtonLabelPosition() {
-        if (this._radios) {
-            this._radios.forEach(radio => {
-                radio.labelPosition = this._labelPosition;
-                radio.markForCheck();
-            });
+    set value(val) {
+        if (val && val !== this._value) {
+            this._setValue(val);
+            this.elementRef.nativeElement.value = JSON.stringify(val);
         }
     }
-    /**
-     * Boolean indicating if the radiobutton is required and not checked
-     * @ignore
-     */
-    hasError() {
-        const hasSelectedRadio = this._radios.some(r => r.checked);
-        return this.required && !hasSelectedRadio;
-    }
-    /**
-     * Implemented as part of ControlValueAccessor.
-     * @param value The model bound property, i.e. the value of checked
-     * @ignore
-     */
     writeValue(value) {
-        if ((value !== undefined) && (value !== null)) {
-            this.selected = value;
-            this._changeDetector.detectChanges();
+        if (value) {
+            this.value = value;
         }
     }
-    /**
-     * Implemented as part of ControlValueAccessor.
-     * @param fn The function to call on change.  Provided by ControlValueAccessor
-     * @ignore
-     */
     registerOnChange(fn) {
-        this._propagateChange = fn;
+        this.onChange = fn;
     }
-    /**
-     * Implemented as part of ControlValueAccessor.
-     * @param fn The function to call on touch.  Provided by ControlValueAccessor
-     * @ignore
-     */
     registerOnTouched(fn) {
-        this._onTouchedCallback = fn;
-    }
-    ;
-}
-/**
- * Used to generate unique Id for this component
- * @ignore
- */
-GoARadioGroupComponent.idNum = 0;
-GoARadioGroupComponent.decorators = [
-    { type: 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: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-GoARadioGroupComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: GoARadioService }
-];
-GoARadioGroupComponent.propDecorators = {
-    _radios: [{ type: ContentChildren, args: [forwardRef(() => GoARadioComponent), { descendants: true },] }],
-    title: [{ type: Input }],
-    helperText: [{ type: Input }],
-    requiredErrorMessage: [{ type: Input }],
-    name: [{ type: Input }],
-    value: [{ type: Input }],
-    selected: [{ type: Input }],
-    disabled: [{ type: Input }],
-    required: [{ type: Input }],
-    labelPosition: [{ type: Input }],
-    selectionChange: [{ type: Output }]
-};
-
-/**
- * Callout component to describe important changes or facts.
- * selector: goa-callout
- */
-class GoACalloutComponent {
-    constructor() {
-        /**
-         * The type of the callout, changes stylings and icons.
-         */
-        this.type = 'information';
-    }
-    /**
-     * @ignore
-     */
-    ngOnInit() {
-        if (this.title === undefined || this.title === null) {
-            throw new TypeError(`Input 'title' is required.`);
-        }
-    }
-}
-GoACalloutComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'goa-callout',
-                template: "<div\n  class=\"goa-callout\"\n  [ngClass]=\"{\n    'goa--event': type === 'event',\n    'goa--important': type === 'important',\n    'goa--emergency': type === 'emergency',\n    'goa--success': type === 'success'\n  }\"\n>\n  <div>\n    <h3>{{ title }}</h3>\n    <div class=\"messages\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n",
-                styles: [""]
-            },] }
-];
-GoACalloutComponent.ctorParameters = () => [];
-GoACalloutComponent.propDecorators = {
-    type: [{ type: Input }],
-    title: [{ type: 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
- */
-class GoANotificationComponent {
-    constructor(_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 EventEmitter();
-    }
-    /**
-     * @ignore
-     */
-    ngOnInit() {
-    }
-    /**
-     * @ignore
-     */
-    dismissClick() {
-        this._isDismissed = true;
-        this._changeDetectorRef.detectChanges();
-        this.dismiss.emit();
-    }
-}
-GoANotificationComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'goa-notification',
-                template: "\n<div class=\"goa-notification\"\n    [ngClass]=\"{\n        'dismissed': _isDismissed === true,\n        'goa--event': type === 'event',\n        'goa--important': type === 'important',\n        'goa--emergency': type === 'emergency'\n        }\">\n    <div class=\"content\">\n        <a *ngIf=\"notificationUrl\" class=\"message\" href={{notificationUrl}}>{{message}}</a>\n        <span *ngIf=\"!notificationUrl\" class=\"message\">{{message}}</span>\n        <a *ngIf=\"isDismissable === true\" class=\"close\" i18n-title title=\"Dismiss\" (click)=\"dismissClick()\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n                <path d=\"M 15.99 14.54C 15.99 14.54 14.54 15.99 14.54 15.99 14.54 15.99 8 9.45 8 9.45 8 9.45 1.46 15.99 1.46 15.99 1.46 15.99 0.01 14.54 0.01 14.54 0.01 14.54 6.55 8 6.55 8 6.55 8 0.01 1.46 0.01 1.46 0.01 1.46 1.46 0.01 1.46 0.01 1.46 0.01 8 6.55 8 6.55 8 6.55 14.54 0.01 14.54 0.01 14.54 0.01 15.99 1.46 15.99 1.46 15.99 1.46 9.45 8 9.45 8 9.45 8 15.99 14.54 15.99 14.54Z\"/>\n            </svg>\n        </a>\n    </div>\n</div>\n\n",
-                styles: [""]
-            },] }
-];
-GoANotificationComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
-];
-GoANotificationComponent.propDecorators = {
-    type: [{ type: Input }],
-    message: [{ type: Input }],
-    notificationUrl: [{ type: Input }],
-    isDismissable: [{ type: Input }],
-    dismiss: [{ type: Output }]
-};
-
-/**
- * Government of Alberta styled notification banner.  Contains one or more notifications.
- * selector: goa-notification-banner
- */
-class GoANotificationBannerComponent {
-    constructor() {
-        /**
-         * The accessibility title for the notification banner.  Is not displayed.
-         */
-        this.title = 'Notifications';
-    }
-    /**
-     * @ignore
-     */
-    ngOnInit() {
-    }
-}
-GoANotificationBannerComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'goa-notification-banner',
-                template: "<div class=\"goa-notifications\">\r\n    <h2 class=\"title\">{{title}}</h2>\r\n    <ng-content></ng-content>\r\n</div>\r\n\r\n",
-                styles: [""]
-            },] }
-];
-GoANotificationBannerComponent.ctorParameters = () => [];
-GoANotificationBannerComponent.propDecorators = {
-    title: [{ type: Input }],
-    _notifications: [{ type: ContentChildren, args: [GoANotificationComponent, { descendants: false },] }]
-};
-
-class GoASkeletonImageContentComponent {
-    constructor() {
-        this.rows = 1;
-        this.arr = Array;
-    }
-}
-GoASkeletonImageContentComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'goa-skeleton-image-content',
-                template: "<div class=\"skeleton-image-content\">\n  <goa-skeleton-element type=\"thumbnail\"></goa-skeleton-element>\n  <div class=\"skeleton-image-content__text\">\n    <goa-skeleton-element\n      type=\"title\"\n      *ngFor=\"let i of arr(rows).fill(1)\"\n    ></goa-skeleton-element>\n  </div>\n</div>\n",
-                styles: [""]
-            },] }
-];
-GoASkeletonImageContentComponent.ctorParameters = () => [];
-GoASkeletonImageContentComponent.propDecorators = {
-    rows: [{ type: Input }]
-};
-
-class GoASkeletonElementComponent {
-    constructor() {
-        this.type = 'text';
-    }
-    get elementClass() {
-        return `skeleton ${this.type}`;
-    }
-}
-GoASkeletonElementComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'goa-skeleton-element',
-                template: "<div [ngClass]=\"elementClass\"></div>",
-                styles: [""]
-            },] }
-];
-GoASkeletonElementComponent.ctorParameters = () => [];
-GoASkeletonElementComponent.propDecorators = {
-    type: [{ type: 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>
- */
-class GoACardHeaderComponent {
-    constructor() { }
-    /**
-     * @ignore
-     */
-    ngOnInit() {
-    }
-}
-GoACardHeaderComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'goa-card-header',
-                template: "<ng-container>\n    <ng-content></ng-content>\n</ng-container>",
-                styles: [""]
-            },] }
-];
-GoACardHeaderComponent.ctorParameters = () => [];
-
-/**
- * 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>
- */
-class GoACardFooterComponent {
-    constructor() { }
-    /**
-     * @ignore
-     */
-    ngOnInit() {
-    }
-}
-GoACardFooterComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'goa-card-footer',
-                template: "<ng-container>\n    <ng-content></ng-content>\n</ng-container>",
-                styles: [""]
-            },] }
-];
-GoACardFooterComponent.ctorParameters = () => [];
-
-/**
- * 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>
- */
-class GoACardThumbImageComponent {
-    constructor() { }
-    /**
-     * @ignore
-     */
-    ngOnInit() { }
-}
-GoACardThumbImageComponent.decorators = [
-    { type: 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 = () => [];
-GoACardThumbImageComponent.propDecorators = {
-    url: [{ type: Input }],
-    alt: [{ type: 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>
- */
-class GoACardContentComponent {
-    constructor() { }
-    /**
-     * @ignore
-     */
-    ngOnInit() {
-    }
-}
-GoACardContentComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'goa-card-content',
-                template: "<ng-container>\n    <ng-content></ng-content>\n</ng-container>",
-                styles: [""]
-            },] }
-];
-GoACardContentComponent.ctorParameters = () => [];
-
-/**
- * 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
- */
-class GoACardComponent {
-    constructor() {
-        /**
-         * What percentage of container width to take.
-         */
-        this.cardSize = 'full';
-    }
-    /**
-     * @ignore
-     */
-    ngOnInit() {
-    }
-}
-GoACardComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'goa-card',
-                template: "<div\n  class=\"goa-card\"\n  [ngClass]=\"{\n    'card-auto': cardSize === 'auto'\n  }\" [attr.data-skeleton]=\"isSkeleton ? '' : null\"\n>\n  <div class=\"goa-poster\">\n    <ng-content select=\"goa-card-thumb-image\"></ng-content>\n  </div>\n  <div class=\"card-content\">\n    <a class=\"goa-title\" href=\"{{ titleUrl }}\">\n      <ng-content select=\"goa-card-header\"></ng-content>\n    </a>\n    <div class=\"goa-text\">\n      <ng-content select=\"goa-card-content\"></ng-content>\n    </div>\n    <div class=\"goa-footer\">\n      <ng-content select=\"goa-card-footer\"></ng-content>\n    </div>\n  </div>\n</div>\n",
-                styles: [""]
-            },] }
-];
-GoACardComponent.ctorParameters = () => [];
-GoACardComponent.propDecorators = {
-    cardSize: [{ type: Input }],
-    titleUrl: [{ type: Input }],
-    isSkeleton: [{ type: Input }]
-};
-
-/**
- * A wrapper/group for a set of card display
- */
-class GoACardGroupComponent {
-    constructor() { }
-    /* eslint-disable @angular-eslint/no-empty-lifecycle-method */
-    ngOnInit() { }
-}
-GoACardGroupComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'goa-card-group',
-                template: "<ng-container>\n  <div class=\"goa-card-group\">\n    <div class=\"card-group-title\">{{ title }}</div>\n    <div\n      [ngClass]=\"{\n        'card-group-basic': layout === 'basic',\n        'card-group-column': layout === 'column'\n      }\"\n    >\n      <ng-content></ng-content>\n      <div *ngFor=\"let card of cardItems\">\n        <goa-card titleUrl=\"{{ card.titleUrl }}\">\n          <goa-card-thumb-image\n            url=\"{{ card.cardImageUrl }}\"\n            alt=\"hero pic\"\n          ></goa-card-thumb-image>\n          <goa-card-header>{{ card.title }}</goa-card-header>\n          <goa-card-content>{{ card.description }}</goa-card-content>\n        </goa-card>\n      </div>\n    </div>\n  </div>\n</ng-container>\n",
-                styles: [""]
-            },] }
-];
-GoACardGroupComponent.ctorParameters = () => [];
-GoACardGroupComponent.propDecorators = {
-    layout: [{ type: Input }],
-    title: [{ type: Input }],
-    cardItems: [{ type: Input }]
-};
-
-class GoAHeroBannerContentComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-}
-GoAHeroBannerContentComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'goa-hero-banner-content',
-                template: "<ng-container>\n  <p class=\"goa-hero-banner-content\" role=\"note\">\n    <ng-content></ng-content>\n  </p>\n</ng-container>\n",
-                styles: [""]
-            },] }
-];
-GoAHeroBannerContentComponent.ctorParameters = () => [];
-
-class GoAHeroBannerLinkComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-}
-GoAHeroBannerLinkComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'goa-hero-banner-link',
-                template: "<ng-container>\n  <a class=\"goa-link-button right-arrow\" [href]=\"url\" role=\"link\">\n    <ng-content></ng-content>\n  </a>\n</ng-container>\n",
-                styles: [""]
-            },] }
-];
-GoAHeroBannerLinkComponent.ctorParameters = () => [];
-GoAHeroBannerLinkComponent.propDecorators = {
-    url: [{ type: Input }]
-};
-
-class GoAHeroBannerComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-}
-GoAHeroBannerComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'goa-hero-banner',
-                template: "<div class=\"goa-hero\"\n  style=\"background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.40) 40%, rgba(0, 0, 0, 0.6) 100%), url({{backgroundUrl}});\"\n>\n  <h1 role=\"heading\">{{ title }}</h1>\n  <ng-content select=\"goa-hero-banner-content\"></ng-content>\n  <ng-content select=\"goa-hero-banner-link\"></ng-content>\n</div>\n",
-                styles: [""]
-            },] }
-];
-GoAHeroBannerComponent.ctorParameters = () => [];
-GoAHeroBannerComponent.propDecorators = {
-    title: [{ type: Input }],
-    backgroundUrl: [{ type: Input }]
-};
-
-/**
- * A page load indicator component with Government of Alberta styling.
- * selector: goa-page-load-indicator
- */
-class GoAPageLoadIndicatorComponent {
-    constructor() {
-        /**
-         * 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;
-    }
-    ngOnInit() {
-        if (this.type !== 'progress') {
-            this.strokeDashoffset = this.strokeDashoffsetDefault;
-        }
+        this.onTouched = fn;
     }
-    ngOnChanges(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
-     */
-    blockScrollingToggle(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
-     */
-    disableKeyboardInputHandler(event) {
-        if (this.visible) {
-            event.returnValue = false;
-            event.preventDefault();
-        }
-    }
-    ngOnDestroy() {
-        this.blockScrollingToggle(false);
-    }
-    setProgress(progress) {
-        if (this.type !== 'progress') {
-            return;
-        }
-        ;
-        if (progress === 0) {
-            this.strokeDashoffset = this.progressMaxValue;
+    listenForValueChange(value) {
+        if (!value) {
+            this._setValue(undefined);
             return;
         }
-        if (progress >= 100) {
-            return;
-        }
-        const value = this.progressMaxValue - Math.round(this.progressMaxValue * progress / 100);
-        this.strokeDashoffset = value;
-    }
-}
-GoAPageLoadIndicatorComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'goa-page-load-indicator',
-                template: "<div *ngIf=\"visible\" class=\"progress-container--{{ displayType }}\">\n  <svg\n    [ngClass]=\"{\n            'svg': displayType === 'large',\n            'svg--small': displayType === 'small'\n          }\"\n    fill=\"none\"\n    viewBox=\"0 0 100 100\"\n    xmlns=\"http://www.w3.org/2000/svg\">\n    <circle class=\"base-circle\" cx=\"50\" cy=\"50\" r=\"45\"/>\n    <circle\n      [ngClass]=\"{\n        'progress-circle--infinite': type === 'infinite',\n        'progress-circle': type === 'progress'\n      }\"\n      cx=\"50\"\n      cy=\"50\"\n      r=\"45\"\n      [style.stroke-dashoffset]=\"strokeDashoffset\"/>\n  </svg>\n\n  <span class=\"progress-message--{{ displayType }}\">\n    {{ message }}\n  </span>\n</div>\n",
-                styles: [""]
-            },] }
-];
-GoAPageLoadIndicatorComponent.ctorParameters = () => [];
-GoAPageLoadIndicatorComponent.propDecorators = {
-    visible: [{ type: Input }],
-    type: [{ type: Input }],
-    message: [{ type: Input }],
-    value: [{ type: Input }],
-    pagelock: [{ type: Input }],
-    displayType: [{ type: Input }],
-    disableKeyboardInputHandler: [{ type: HostListener, args: ['document:keydown', ['$event'],] }]
-};
-
-/**
- * A page load indicator component with Government of Alberta styling.
- * selector: goa-element-load-indicator
- */
-class GoAElementLoadIndicatorComponent {
-    constructor() {
-        /**
-         * 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
-    */
-    ngOnChanges(changes) {
-        if (changes.size) {
-            this.radius = changes.size.currentValue === 'small' ? 16 : 18;
-            this.innerRadius = this.radius - 4;
-            this.diameter = this.radius * 2;
-            this.viewBox = `0 0 ${this.diameter} ${this.diameter}`;
-            this.dashArray = this.innerRadius * Math.PI * 2;
-            this.dashOffset = this.innerRadius * Math.PI * 0.5;
-        }
-    }
-    /**
-    * @ignore
-    */
-    ngOnInit() { }
-}
-GoAElementLoadIndicatorComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'goa-element-load-indicator',
-                template: "<div *ngIf=\"visible\">\n  <svg\n    fill=\"none\"\n    [attr.viewBox]=\"viewBox\"\n    [attr.width]=\"radius\"\n    [attr.height]=\"radius\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <circle\n      class=\"base-circle\"\n      [attr.cx]=\"radius\"\n      [attr.cy]=\"radius\"\n      [attr.r]=\"innerRadius\"\n      [style.stroke]=\"baseColour\"\n    />\n    <circle\n      class=\"rotating-circle\"\n      [attr.cx]=\"radius\"\n      [style.stroke-dasharray]=\"dashArray\"\n      [style.stroke-dashoffset]=\"dashOffset\"\n      [attr.cy]=\"radius\"\n      [attr.r]=\"innerRadius\"\n      [style.stroke]=\"spinnerColour\"\n    />\n  </svg>\n</div>\n",
-                styles: [""]
-            },] }
-];
-GoAElementLoadIndicatorComponent.ctorParameters = () => [];
-GoAElementLoadIndicatorComponent.propDecorators = {
-    visible: [{ type: Input }],
-    size: [{ type: Input }],
-    baseColour: [{ type: Input }],
-    spinnerColour: [{ type: Input }]
-};
-
-class AngularComponentsModule {
-}
-AngularComponentsModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, OverlayModule],
-                exports: [
-                    FormsModule,
-                    OverlayModule,
-                    CommonModule,
-                    GoAButtonComponent,
-                    GoAMicrositeLogoComponent,
-                    GoAHeaderComponent,
-                    GoAButtonLinkComponent,
-                    GoAOptionComponent,
-                    GoADropdownComponent,
-                    GoAOptionGroupComponent,
-                    GoACheckboxComponent,
-                    GoACalloutComponent,
-                    GoACardGroupComponent,
-                    GoANotificationComponent,
-                    GoANotificationBannerComponent,
-                    GoACardComponent,
-                    GoACardHeaderComponent,
-                    GoACardFooterComponent,
-                    GoACardContentComponent,
-                    GoACardThumbImageComponent,
-                    GoARadioComponent,
-                    GoARadioGroupComponent,
-                    GoAHeroBannerComponent,
-                    GoAHeroBannerContentComponent,
-                    GoAHeroBannerLinkComponent,
-                    GoAPageLoadIndicatorComponent,
-                    GoASkeletonImageContentComponent,
-                    GoASkeletonElementComponent,
-                    GoAElementLoadIndicatorComponent,
-                ],
-                declarations: [
-                    GoAButtonComponent,
-                    GoAMicrositeLogoComponent,
-                    GoAHeaderComponent,
-                    GoAButtonLinkComponent,
-                    GoAOptionComponent,
-                    GoADropdownComponent,
-                    GoAOptionGroupComponent,
-                    GoACheckboxComponent,
-                    GoACalloutComponent,
-                    GoACardGroupComponent,
-                    GoANotificationComponent,
-                    GoANotificationBannerComponent,
-                    GoACardComponent,
-                    GoACardHeaderComponent,
-                    GoACardFooterComponent,
-                    GoACardContentComponent,
-                    GoACardThumbImageComponent,
-                    GoARadioComponent,
-                    GoARadioGroupComponent,
-                    GoAHeroBannerComponent,
-                    GoAHeroBannerContentComponent,
-                    GoAHeroBannerLinkComponent,
-                    GoAPageLoadIndicatorComponent,
-                    GoASkeletonImageContentComponent,
-                    GoASkeletonElementComponent,
-                    GoAElementLoadIndicatorComponent,
-                ],
-                providers: [GoARadioService],
-                schemas: [
-                    CUSTOM_ELEMENTS_SCHEMA
-                ]
-            },] }
-];
-
-class GoACheckboxChange {
-}
-
-class GoABadgeComponent {
-    constructor() {
-        this.type = 'light';
-    }
-    get badgeClass() {
-        return `badge-${this.type}`;
-    }
-    /* eslint-disable @angular-eslint/no-empty-lifecycle-method */
-    ngOnInit() { }
-}
-GoABadgeComponent.decorators = [
-    { type: 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: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-GoABadgeComponent.ctorParameters = () => [];
-GoABadgeComponent.propDecorators = {
-    type: [{ type: Input }]
-};
-
-class GoAAppVersionHeaderComponent {
-    constructor() {
-        this.isProdEnvironment = false;
-        this.environment = '';
-        this.version = '';
-        this.closed = new EventEmitter();
-    }
-    ngOnInit() {
-    }
-    onCloseClick() {
-        this.closed.next(true);
-    }
-}
-GoAAppVersionHeaderComponent.decorators = [
-    { type: 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: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-GoAAppVersionHeaderComponent.ctorParameters = () => [];
-GoAAppVersionHeaderComponent.propDecorators = {
-    isProdEnvironment: [{ type: Input }],
-    environment: [{ type: Input }],
-    version: [{ type: Input }],
-    closed: [{ type: Output }]
-};
-
-class GoANumberInputComponent {
-    constructor() {
-        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 EventEmitter();
-    }
-    get input() {
-        var _a;
-        return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.nativeElement;
-    }
-    /**
-     * The value of the NumberInput
-     *
-     * @memberof GoANumberInputComponent
-     */
-    set value(val) {
-        var _a;
-        const 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;
-        }
-    }
-    get value() {
-        return this._value;
-    }
-    /**
-     * Sets the minimum value that the number input can take
-     *
-     * @memberof GoANumberInputComponent
-     */
-    set min(min) {
-        this._min = min;
-        // force reevaluation / clamping
-        this.value = this._value;
-    }
-    get min() {
-        return this._min;
-    }
-    /**
-     * Sets the maximum value that the number input can take
-     *
-     * @memberof GoANumberInputComponent
-     */
-    set max(max) {
-        this._max = max;
-        // force reevaluation / clamping
-        this.value = this._value;
-    }
-    get max() {
-        return this._max;
-    }
-    clampValue(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;
-    }
-    markTouched() {
-        var _a;
-        if (this._isTouched === false) {
-            this._isTouched = true;
-            (_a = this.onTouched) === null || _a === void 0 ? void 0 : _a.call(this);
-        }
-    }
-    handleInput(event) {
-        var _a;
-        const 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
-     */
-    increment() {
-        // use built-in browser increment logic
-        this.input.stepUp();
-        this.value = this.input.valueAsNumber;
-    }
-    /**
-     * Decrement the number input
-     *
-     * @memberof GoANumberInputComponent
-     */
-    decrement() {
-        // use built-in browser decrement logic
-        this.input.stepDown();
-        this.value = this.input.valueAsNumber;
-    }
-    // CONTROL VALUE ACCESSOR INTERFACE
-    writeValue(value) {
-        this.value = value;
-    }
-    registerOnChange(handler) {
-        this.onChange = handler;
-    }
-    registerOnTouched(handler) {
-        this.onTouched = handler;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-}
-GoANumberInputComponent.decorators = [
-    { type: 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: NG_VALUE_ACCESSOR,
-                        useExisting: forwardRef(() => GoANumberInputComponent),
-                        multi: true
-                    },
-                ],
-                styles: [""]
-            },] }
-];
-GoANumberInputComponent.propDecorators = {
-    inputElement: [{ type: ViewChild, args: ['numberInput',] }],
-    disabled: [{ type: Input }],
-    step: [{ type: Input }],
-    valueChanged: [{ type: Output }],
-    value: [{ type: Input }],
-    min: [{ type: Input }],
-    max: [{ type: Input }]
-};
-
-class ExperimentalComponentsModule {
-}
-ExperimentalComponentsModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    AngularComponentsModule
-                ],
-                exports: [
-                    GoABadgeComponent,
-                    GoAAppVersionHeaderComponent,
-                    GoANumberInputComponent,
-                ],
-                declarations: [
-                    GoABadgeComponent,
-                    GoAAppVersionHeaderComponent,
-                    GoANumberInputComponent,
-                ],
-                providers: [],
-                schemas: [CUSTOM_ELEMENTS_SCHEMA]
-            },] }
-];
+        try {
+            this.value = JSON.parse(value);
+        }
+        catch (e) {
+            // we still need to trigger the events to prevent any previous valid value to remain set.
+            const v = value.match(/^[\w\s,]*$/) ? value.split(",") : undefined;
+            this._setValue(v);
+        }
+    }
+    _setValue(value) {
+        this._value = value;
+        this.onChange(value);
+        this.onTouched();
+    }
+}
+ValuesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ValuesDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ValuesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: ValuesDirective, selector: "[goaValues]", host: { listeners: { "_change": "listenForValueChange($event.detail.value)" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => ValuesDirective),
+            multi: true,
+        },
+    ], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ValuesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[goaValues]",
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ValuesDirective),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { listenForValueChange: [{
+                type: HostListener,
+                args: ["_change", ["$event.detail.value"]]
+            }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AngularComponentsModule, ExperimentalComponentsModule, GOA_CHECKBOX_CONTROL_VALUE_ACCESSOR, GOA_RADIO_CONTROL_VALUE_ACCESSOR, GOA_RADIO_GROUP, GOA_RADIO_GROUP_CONTROL_VALUE_ACCESSOR, GoAAppVersionHeaderComponent, GoABadgeComponent, GoAButtonComponent, GoAButtonLinkComponent, GoACalloutComponent, GoACardComponent, GoACardContentComponent, GoACardFooterComponent, GoACardGroupComponent, GoACardHeaderComponent, GoACardThumbImageComponent, GoACheckboxChange, GoACheckboxComponent, GoADropdownComponent, GoAElementLoadIndicatorComponent, GoAHeaderComponent, GoAHeroBannerComponent, GoAHeroBannerContentComponent, GoAHeroBannerLinkComponent, GoAMicrositeLogoComponent, GoANotificationBannerComponent, GoANotificationComponent, GoANumberInputComponent, GoAOptionComponent, GoAOptionGroupComponent, GoAPageLoadIndicatorComponent, GoARadioChange, GoARadioComponent, GoARadioGroupComponent, GoARadioService, GoASkeletonElementComponent, GoASkeletonImageContentComponent };
+export { AngularComponentsModule, ValueDirective, ValuesDirective };
 //# sourceMappingURL=abgov-angular-components.js.map