@abgov/angular-components 1.8.0-beta.9 → 2.0.0-alpha.10

package/esm2015/lib/checkbox/checkbox.component.js

@@ -1,136 +0,0 @@
-import { Component, Input, Output, EventEmitter, forwardRef, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-export 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
- */
-export 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;
-            }
-        }
-    }
-    /**
-     * Boolean indicating if the checkbox is required and not checked
-     * @ignore
-     */
-    hasError() {
-        return this.required && !this.checked;
-    }
-    /**
-     * 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();
-        }
-    }
-    /**
-     * 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: [".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:1%}.goa-checkbox.goa-checkbox-disabled .goa-checkbox-label{cursor:default}.goa-checkbox.has-error .goa-checkbox-container{border:2px solid #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}"]
-            },] }
-];
-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 }]
-};
-//# sourceMappingURL=checkbox.component.js.map

package/esm2015/lib/checkbox/checkbox.component.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"checkbox.component.js","sourceRoot":"","sources":["../../../../../../libs/angular-components/src/lib/checkbox/checkbox.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Input,\n  Output,\n  EventEmitter,\n  forwardRef,\n  ChangeDetectorRef,\n  ChangeDetectionStrategy\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { GoACheckboxChange } from './checkbox-change';\n\nexport const GOA_CHECKBOX_CONTROL_VALUE_ACCESSOR = {\n  provide: NG_VALUE_ACCESSOR,\n  useExisting: forwardRef(() => GoACheckboxComponent),\n  multi: true\n}\n\n/**\n * Checkbox component with Government of Alberta styling.\n * selector: goa-checkbox\n */\n@Component({\n  selector: 'goa-checkbox',\n  templateUrl: './checkbox.component.html',\n  styleUrls: ['./checkbox.component.scss'],\n  //register our custom ControlValueAccessor with angular DI system so angular knows how to get instance of it for ngModel binding\n  providers: [GOA_CHECKBOX_CONTROL_VALUE_ACCESSOR],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class GoACheckboxComponent implements ControlValueAccessor {\n\n  /**\n   * @ignore\n   */\n  static idNum = 0;\n  /**\n   * @ignore\n   */\n  uniqueId: string;\n\n  /**\n   * Value/unique identifier for the object the checkbox represents.\n   */\n  @Input() value: string;\n\n  /**\n   * Boolean indicating whether or not the checkbox is checked/selected.\n   */\n  @Input() checked: boolean;\n\n  /**\n   * Boolean indicating whether or not the checkbox is disabled.\n   */\n  @Input() disabled: boolean;\n\n  /**\n   * Boolean indicating whether or not the checkbox is required.\n   */\n  @Input() required: boolean;\n\n  /**\n   * @ignore\n   */\n  private _indeterminate = false;\n  /**\n   * Boolean indicating whether or not the checkbox should display as indeterminate\n   * (i.e. it has associated 'child' checkboxes, some of which are selected).\n   */\n  @Input()\n  get indeterminate(): boolean { return this._indeterminate; }\n  set indeterminate(value: boolean) {\n    // only do something if value has changed from current\n    if (value !== this.indeterminate) {\n      this._indeterminate = value;\n\n      // can't be indeterminate and checked, so clear checked\n      if (this._indeterminate){\n        this.checked = false;\n      }\n    }\n  }\n\n  /**\n   * The position to display the label/text for the checbox.  Valid values are before and after.\n   */\n  @Input() labelPosition: 'before' | 'after' = 'after';\n\n   /**\n   * Event emitted containing the source checkbox, and whether or not it is checked.\n   */\n  @Output() selectionChange: EventEmitter<GoACheckboxChange> = new EventEmitter<GoACheckboxChange>();\n\n  /**\n   * @ignore\n   */\n  _onTouchedCallback: () => void;\n\n  /**\n   * @ignore\n   */\n  _propagateChange = (_: any) => { };\n\n  constructor(private _changeDetectorRef: ChangeDetectorRef,) {\n    this.uniqueId = `goa-checkbox-${GoACheckboxComponent.idNum++}`\n  }\n\n  /**\n   * Boolean indicating if the checkbox is required and not checked\n   * @ignore\n   */\n  hasError(): boolean {\n    return this.required && !this.checked;\n  }\n\n  /**\n   * Implemented as part of ControlValueAccessor.\n   * @param value The model bound property, i.e. the value of checked\n   * @ignore\n   */\n  writeValue(value: any) {\n    if ((value !== undefined) && (value !== null)) {\n      this.checked = value;\n      this._changeDetectorRef.detectChanges();\n    }\n  }\n\n  /**\n   * Implemented as part of ControlValueAccessor.\n   * @param fn The function to call on change.  Provided by ControlValueAccessor\n   * @ignore\n   */\n  registerOnChange(fn: any) {\n    this._propagateChange = fn;\n  }\n\n  /**\n   * Implemented as part of ControlValueAccessor.\n   * @param fn The function to call on touch.  Provided by ControlValueAccessor\n   * @ignore\n   */\n  registerOnTouched(fn: any) {\n    this._onTouchedCallback = fn;\n  };\n\n  /**\n   * Toggles the checked value of the checkbox\n   * @ignore\n   */\n  toggle(): void {\n    this.checked = !this.checked;\n  }\n\n  /**\n   * User interaction event on click of the checkbox or its label to indicate toggling of the current checked status.\n   * Emits selectionChange to parent components.\n   * @ignore\n   */\n  onChange(event) {\n    event.stopPropagation();\n\n    this.toggle();\n\n    // user manually clicking overrides indeterminate and sets it to false\n    // this is because if they click and set to checked/unchecked, all 'child' checkboxes should get set to\n    // checked/unchecked (by user routine, not here), so this checkbox is no longer indeterminate\n    this.indeterminate = false;\n\n    const checkBoxChange = {\n      source: this,\n      checked: this.checked\n    } as GoACheckboxChange;\n\n    this._propagateChange(this.checked);\n    this.selectionChange.emit(checkBoxChange);\n  }\n}\n"]}

package/esm2015/lib/checkbox/checkbox.component.metadata.json

@@ -1 +0,0 @@
-[{"__symbolic":"module","version":4,"metadata":{"GOA_CHECKBOX_CONTROL_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":13,"character":11},"useExisting":{"__symbolic":"reference","name":"GoACheckboxComponent"},"multi":true},"GoACheckboxComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":22,"character":1},"arguments":[{"selector":"goa-checkbox","providers":[{"__symbolic":"reference","name":"GOA_CHECKBOX_CONTROL_VALUE_ACCESSOR"}],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":28,"character":19},"member":"OnPush"},"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","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:1%}.goa-checkbox.goa-checkbox-disabled .goa-checkbox-label{cursor:default}.goa-checkbox.has-error .goa-checkbox-container{border:2px solid #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}"]}]}],"members":{"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"checked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":3}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":3}}]}],"indeterminate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":3}}]}],"labelPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":3}}]}],"selectionChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":91,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":103,"character":42}]}],"hasError":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}]},"statics":{"idNum":0}}}}]

package/esm2015/lib/dropdown/dropdown.component.js

@@ -1,326 +0,0 @@
-import { Component, Input, Output, ContentChildren, EventEmitter, ViewChild, ElementRef, QueryList, ChangeDetectorRef } from '@angular/core';
-import { GoAOptionComponent } from './option/option.component';
-import { GoAOptionGroupComponent } from './option-group/option-group.component';
-/**
- * A dropdown component with Government of Alberta styling.
- * selector: goa-dropdown
- */
-export 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());
-        }
-    }
-}
-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: [".dropdown-overlay{position:absolute;top:0;left:0;right:0;bottom:0}.dropdown-menu{border:1px solid #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:700;padding:4px 12px}.dropdown-menu .option-group .option{font-weight:400;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:1%}.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;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;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\");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,.goa-dropdown i.goa-select-icon{background-repeat:no-repeat;background-size:contain;background-position:50%}.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\")}.goa-dropdown.opened i.goa-select-icon{transform:rotate(180deg)}.goa-dropdown.has-error .dropdown-grouping .dropdown-textbox{border:2px solid #fc1921}.goa-dropdown .dropdown-label{font-size:18px;font-weight:700;color:#333}.goa-dropdown .required-label{margin-left:8px;font-size:14px;color:#666}.goa-dropdown .helper-text{font-size:14px;font-weight:400;color:#333}.goa-dropdown .error-text{color:#fc1921;font-size:14px}"]
-            },] }
-];
-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 }]
-};
-//# sourceMappingURL=dropdown.component.js.map

package/esm2015/lib/dropdown/dropdown.component.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown.component.js","sourceRoot":"","sources":["../../../../../../libs/angular-components/src/lib/dropdown/dropdown.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  OnInit,\n  AfterViewInit,\n  Input,\n  Output,\n  ContentChildren,\n  EventEmitter,\n  ViewChild,\n  ElementRef,\n  QueryList,\n  ChangeDetectorRef\n} from '@angular/core';\n\nimport { GoAOptionComponent } from './option/option.component';\nimport { GoAOptionGroupComponent } from './option-group/option-group.component';\n\nimport { ConnectedPosition } from '@angular/cdk/overlay';\n\n/**\n * A dropdown component with Government of Alberta styling.\n * selector: goa-dropdown\n */\n@Component({\n  selector: 'goa-dropdown',\n  templateUrl: './dropdown.component.html',\n  styleUrls: ['./dropdown.component.scss']\n})\nexport class GoADropdownComponent implements OnInit, AfterViewInit {\n  /**\n   * boolean for if the dropdown is open.\n   * @ignore\n   */\n  _isOpen = false;\n\n  /**\n   * Is the required error tripped?\n   * @ignore\n   */\n  _requiredError = false;\n\n  /**\n   * Bounding box of textInput.\n   * @ignore\n   */\n  _triggerRect;\n\n  /**\n * This position config ensures that the top \"start\" corner of the overlay\n * is aligned with with the bottom \"start\" of the origin by default (overlapping\n * the trigger completely). If the panel cannot fit below the trigger, it\n * will fall back to a position above the trigger.\n * @ignore\n */\n  _positions: ConnectedPosition[] = [\n    {\n      originX: 'start',\n      originY: 'bottom',\n      overlayX: 'start',\n      overlayY: 'top',\n    },\n    {\n      originX: 'start',\n      originY: 'top',\n      overlayX: 'start',\n      overlayY: 'bottom',\n    },\n  ];\n\n  /**\n   * The current active option\n   * @ignore\n   */\n  _activeOption: GoAOptionComponent;\n\n  /**\n   * The current active index\n   * @ignore\n   */\n  _activeIndex;\n\n  /**\n   * All options currently matching filter including groups.\n   * @ignore\n   */\n  _allFilteredOptions: Array<GoAOptionComponent> = [];\n\n  /**\n   * The list of filtered options to show in the view.\n   * @ignore\n   */\n  _filteredOptions: Array<GoAOptionComponent>;\n\n  /**\n   * Whats the mode for typeahead.\n   */\n  @Input() typeaheadMode: 'none' | 'contains' | 'startsWith' = 'none';\n\n  /**\n   * The height for the dropdown.  If none is set the dropdown grows until it reaches the viewport edge.\n   */\n  @Input() menuHeight: number;\n\n  /**\n   * The label for the dropdown.\n   */\n  @Input() label: string;\n\n  /**\n   * Helper text description of the dropdown.\n   */\n  @Input() description: string;\n\n  /**\n   * Update the selected options, select the options with the given ids\n   */\n  @Input()\n  set selectedIds(ids: Array<string>) {\n    if (this.allOptions === undefined) {\n      // aren't initialized yet, return\n      return;\n    }\n\n    if (ids === null || ids === undefined) {\n      ids = [];\n    }\n\n    if (ids.length > 1 && this.multiple === false) {\n      throw new Error('Cannot select multiple options when the dropdown has multiple set to false.');\n    }\n\n    const selectedOptions = [];\n    this.allOptions.forEach(option => {\n      if (ids.includes(option.id)) {\n        option.selected = true;\n        selectedOptions.push(option);\n      }\n      else {\n        option.selected = false;\n      }\n    });\n\n    this.selectionChanged(selectedOptions, true);\n  }\n\n  /**\n   * Is the select disabled.\n   */\n  @Input() disabled = false;\n\n  /**\n   * Is multiple selection?\n   */\n  @Input()\n  set multiple(value: boolean) {\n    this._multiple = value;\n    if (this._multiple === false) {\n      // If we have changed from multiple to no multiple then deselect everything.\n      this.selectedItems.forEach(option => {\n        option.selected = false;\n      });\n    }\n  }\n  get multiple(): boolean {\n    return this._multiple;\n  }\n  /**\n   * @ignore\n   */\n  private _multiple = false;\n\n  /**\n   * Is a selection required?\n   */\n  @Input()\n  set required(value: boolean) {\n    this._required = value;\n    this._requiredError = this.selectedItems.length === 0 && this._required === true;\n  }\n  get required(): boolean {\n    return this._required;\n  }\n  /**\n   * @ignore\n   */\n  private _required = false;\n\n  /**\n   * The select element.\n   * @ignore\n   */\n  @ViewChild('textInput') textInput: ElementRef<HTMLInputElement>;\n\n  /**\n   * All options.\n   * @ignore\n   */\n  @ContentChildren(GoAOptionComponent, { descendants: true }) allOptions: QueryList<GoAOptionComponent>;\n\n  /**\n   * The top level options for rendering options.\n   * @ignore\n   */\n  @ContentChildren(GoAOptionComponent, { descendants: false }) options: QueryList<GoAOptionComponent>;\n\n  /**\n   * The option groups for rendering.\n   * @ignore\n   */\n  @ContentChildren(GoAOptionGroupComponent, { descendants: false }) optionGroups: QueryList<GoAOptionGroupComponent>;\n\n  /**\n  * Event emitted containing the value field of all selected options when the selection changes.\n  */\n  @Output() selectionChange = new EventEmitter<Array<any>>();\n\n  constructor(private cdr: ChangeDetectorRef) { }\n\n  /**\n   * Lifecycle hook OnInit\n   * @ignore\n   */\n  /* eslint-disable @angular-eslint/no-empty-lifecycle-method */\n  ngOnInit() { }\n\n  /**\n   * Lifecycle hook AfterViewInit\n   * @ignore\n   */\n  ngAfterViewInit() {\n    this._triggerRect = this.textInput.nativeElement.getBoundingClientRect();\n\n    this._filteredOptions = [...this.options];\n    this._allFilteredOptions = [...this.allOptions];\n\n    if (this.selectedItems.length > 0) {\n      this.setTextInput(this.selectedItems[0].label);\n    }\n\n    // The template output cache is populated by child components during render,\n    // so tell angular that there have been changes during the render here.\n    this.cdr.detectChanges();\n  }\n\n  /**\n   * Called when user updates the text in the searchbox.\n   * @param text The text of the input\n   * @ignore\n   */\n  onFilterChange(text: string) {\n    // open the dropdown if it is not already\n    if (!this._isOpen === true) {\n      this._isOpen = true;\n    }\n\n    this.filterOptions(text);\n  }\n\n  /**\n   * Handler for keyboard events when menu is open.\n   * @param event keyboard event\n   * @ignore\n   */\n  overlayKeydown(event: KeyboardEvent) {\n    if (event.code === 'Enter' || event.code === 'NumpadEnter') {\n      this.optionClicked(this._activeOption);\n    }\n    else if (event.code === 'ArrowDown') {\n      this._activeIndex = (this._activeIndex + 1) % this._allFilteredOptions.length;\n      this._activeOption = this._allFilteredOptions[this._activeIndex];\n    }\n    else if (event.code === 'ArrowUp') {\n      if (this._activeIndex > 0) {\n        this._activeIndex = this._activeIndex - 1;\n        this._activeOption = this._allFilteredOptions[this._activeIndex];\n      }\n    }\n  }\n\n  /**\n   * Sets the active option.  Active option is the option that when enter is pressed is selected.\n   * @param option The option to make the active option\n   * @ignore\n   */\n  setActiveOption(option) {\n    this._activeOption = option;\n    this._activeIndex = this._allFilteredOptions.findIndex(\n      (filteredOption) => filteredOption.id === option.id\n    );\n  }\n\n  /**\n   * Handler for when the input is clicked.\n   * @ignore\n   */\n  inputClicked() {\n    if (this.disabled === false) {\n      this._isOpen = !this._isOpen;\n\n      // set the active option to the first in the list\n      if (this._allFilteredOptions.length > 0) {\n        this._activeOption = this._allFilteredOptions[0];\n        this._activeIndex = 0;\n      }\n    }\n  }\n\n  /**\n   * Handler for when descendant an option is clicked.\n   * @ignore\n   */\n  optionClicked(option: GoAOptionComponent) {\n    let selectedOptions = [];\n\n    if (this.multiple === true) {\n      option.selected = !option.selected;\n      selectedOptions = this.selectedItems;\n    }\n    else {\n      option.selected = !option.selected;\n      this.selectedItems.forEach((o) => {\n        if (option.id !== o.id) {\n          // change all options that weren't selected to false without notifying change\n          o.selected = false;\n        }\n\n        selectedOptions = [option];\n      });\n    }\n\n    this.selectionChanged(selectedOptions, true);\n\n    if (this.multiple === false) {\n      // close the dropdown if we are in single selection mode\n      this._isOpen = false;\n    }\n  }\n\n  /**\n   * Update view when selection changes\n   * @param options\n   * @ignore\n   */\n  private selectionChanged(options: Array<GoAOptionComponent>, emitEvent: boolean) {\n    if (options.length > 0) {\n      const selectedOptions = options.map(o => o.label).join(', ')\n      this._requiredError = false;\n      this.setTextInput(selectedOptions);\n    }\n    else {\n      this._requiredError = this.required;\n      this.setTextInput('');\n    }\n\n    if (emitEvent === true) {\n      this.emitChange(options);\n    }\n  }\n\n  /**\n   * Emit selection change\n   * @ignore\n   */\n  private emitChange(options: Array<GoAOptionComponent>) {\n    const values = options.map(\n      (option) => option.value\n    );\n\n    this.selectionChange.emit(values);\n  }\n\n  /**\n   * Gets all the currently selected options\n   * @ignore\n   */\n  private get selectedItems(): Array<GoAOptionComponent> {\n    if (this.allOptions === undefined) {\n      return [];\n    }\n\n    return [...this.allOptions.filter(\n      (option) => option.selected === true\n    )];\n  }\n\n  /**\n   * Set the text of the input.\n   * @param value The value to set\n   * @ignore\n   */\n  private setTextInput(value: string) {\n    if (this.textInput) {\n      this.textInput.nativeElement.value = value;\n      // Exact matches show whole list?\n      this.filterOptions('');\n    }\n  }\n\n  /**\n   * Update the filtered options with the passed in filter text.\n   * @param filterText The text to filter by\n   * @ignore\n   */\n  private filterOptions(filterText: string) {\n    this.optionGroups.forEach(group => {\n      group._filteredOptions = group.options.filter(this.typeaheadFilter.bind(this, filterText, this.typeaheadMode));\n    });\n\n    this._filteredOptions = this.options.filter(this.typeaheadFilter.bind(this, filterText, this.typeaheadMode));\n    this._allFilteredOptions = this.allOptions.filter(this.typeaheadFilter.bind(this, filterText, this.typeaheadMode));\n\n    // The filters have changed so update the active option incase it has been filtered out.\n    this._activeOption = this._allFilteredOptions[this._activeIndex % this._allFilteredOptions.length];\n  }\n\n  /**\n   * Filter for typeahead with logic for what mode we are in.\n   * @param option\n   * @ignore\n   */\n  private typeaheadFilter(filterText: string, typeaheadMode: 'none' | 'startsWith' | 'contains', option: GoAOptionComponent) {\n    if (typeaheadMode === 'none' || this.typeaheadMode === undefined) {\n      return true;\n    }\n\n    if (typeaheadMode === 'startsWith') {\n      return option.label.toLocaleLowerCase().startsWith(filterText.toLocaleLowerCase());\n    }\n\n    if (typeaheadMode === 'contains') {\n      return option.label.toLocaleLowerCase().includes(filterText.toLocaleLowerCase());\n    }\n  }\n}\n"]}

package/esm2015/lib/dropdown/dropdown.component.metadata.json

@@ -1 +0,0 @@
-[{"__symbolic":"module","version":4,"metadata":{"GoADropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":23,"character":1},"arguments":[{"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:1px solid #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:700;padding:4px 12px}.dropdown-menu .option-group .option{font-weight:400;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:1%}.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;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;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\");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,.goa-dropdown i.goa-select-icon{background-repeat:no-repeat;background-size:contain;background-position:50%}.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\")}.goa-dropdown.opened i.goa-select-icon{transform:rotate(180deg)}.goa-dropdown.has-error .dropdown-grouping .dropdown-textbox{border:2px solid #fc1921}.goa-dropdown .dropdown-label{font-size:18px;font-weight:700;color:#333}.goa-dropdown .required-label{margin-left:8px;font-size:14px;color:#666}.goa-dropdown .helper-text{font-size:14px;font-weight:400;color:#333}.goa-dropdown .error-text{color:#fc1921;font-size:14px}"]}]}],"members":{"typeaheadMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":3}}]}],"menuHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":101,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":106,"character":3}}]}],"description":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":111,"character":3}}]}],"selectedIds":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":116,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":148,"character":3}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":153,"character":3}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":174,"character":3}}]}],"textInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":191,"character":3},"arguments":["textInput"]}]}],"allOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":197,"character":3},"arguments":[{"__symbolic":"reference","module":"./option/option.component","name":"GoAOptionComponent","line":197,"character":19},{"descendants":true}]}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":203,"character":3},"arguments":[{"__symbolic":"reference","module":"./option/option.component","name":"GoAOptionComponent","line":203,"character":19},{"descendants":false}]}]}],"optionGroups":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":209,"character":3},"arguments":[{"__symbolic":"reference","module":"./option-group/option-group.component","name":"GoAOptionGroupComponent","line":209,"character":19},{"descendants":false}]}]}],"selectionChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":214,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":216,"character":27}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onFilterChange":[{"__symbolic":"method"}],"overlayKeydown":[{"__symbolic":"method"}],"setActiveOption":[{"__symbolic":"method"}],"inputClicked":[{"__symbolic":"method"}],"optionClicked":[{"__symbolic":"method"}],"selectionChanged":[{"__symbolic":"method"}],"emitChange":[{"__symbolic":"method"}],"setTextInput":[{"__symbolic":"method"}],"filterOptions":[{"__symbolic":"method"}],"typeaheadFilter":[{"__symbolic":"method"}]}}}}]

package/esm2015/lib/dropdown/option/option.component.js

@@ -1,48 +0,0 @@
-import { Component, Input, TemplateRef, ViewChild, ChangeDetectionStrategy } from '@angular/core';
-/**
- * Option component with to use with GoADropdown.
- * selector: goa-option
- */
-export 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',] }]
-};
-//# sourceMappingURL=option.component.js.map

package/esm2015/lib/dropdown/option/option.component.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"option.component.js","sourceRoot":"","sources":["../../../../../../../libs/angular-components/src/lib/dropdown/option/option.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAU,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,uBAAuB,EAAgB,MAAM,eAAe,CAAC;AAExH;;;GAGG;AAOH,MAAM,OAAO,kBAAkB;IAkC7B;QAhCA;;;WAGG;QACH,aAAQ,GAAG,KAAK,CAAC;QAiBjB;;WAEG;QACM,oBAAe,GAAG,KAAK,CAAC;IAQlB,CAAC;IAEhB;;;OAGG;IACH,QAAQ;QACN,IAAG,IAAI,CAAC,EAAE,KAAK,SAAS,IAAI,IAAI,CAAC,EAAE,KAAK,IAAI,EAAE;YAC5C,MAAM,IAAI,SAAS,CAAC,yBAAyB,CAAC,CAAC;SAChD;QAED,IAAG,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE;YAClD,MAAM,IAAI,SAAS,CAAC,4BAA4B,CAAC,CAAC;SACnD;QAED,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC;IACvC,CAAC;;;YAxDF,SAAS,SAAC;gBACT,QAAQ,EAAE,YAAY;gBACtB,wIAAsC;gBAEtC,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAChD;;;;iBAYE,KAAK;oBAKL,KAAK;oBAKL,KAAK;8BAKL,KAAK;6BAML,SAAS,SAAC,gBAAgB","sourcesContent":["import { Component, OnInit, Input, TemplateRef, ViewChild, ChangeDetectionStrategy, EventEmitter } from '@angular/core';\n\n/**\n * Option component with to use with GoADropdown.\n * selector: goa-option\n */\n@Component({\n  selector: 'goa-option',\n  templateUrl: './option.component.html',\n  styleUrls: ['./option.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class GoAOptionComponent implements OnInit {\n\n  /**\n   * Is the option currently selected\n   * @ignore\n   */\n  selected = false;\n\n  /**\n   * The unique id of the option.\n   */\n  @Input() id: string;\n\n  /**\n   * The value for the option\n   */\n  @Input() value: any;\n\n  /**\n   * Label to be used for option.\n   */\n  @Input() label: string;\n\n  /**\n   * Is the option selected by default?\n   */\n  @Input() defaultSelected = false;\n\n  /**\n   * The option template\n   * @ignore\n   */\n  @ViewChild('optionTemplate') optionTemplate: TemplateRef<any>;\n\n  constructor() {}\n\n  /**\n   * Lifecycle hook OnInit\n   * @ignore\n   */\n  ngOnInit() {\n    if(this.id === undefined || this.id === null) {\n      throw new TypeError(`Input 'id' is required.`);\n    }\n\n    if(this.label === undefined || this.label === null) {\n      throw new TypeError(`Input 'label' is required.`);\n    }\n\n    this.selected = this.defaultSelected;\n  }\n}\n"]}