@bravura/ui 1.5.0 → 1.6.0

package/fesm2015/bravura-ui-discrete-input.js

@@ -0,0 +1,355 @@
+import * as i0 from '@angular/core';
+import { ElementRef, Component, Optional, Inject, Self, Input, ViewChildren, NgModule } from '@angular/core';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i2 from '@angular/forms';
+import { FormArray, FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
+import * as i3 from '@angular/material/core';
+import { mixinErrorState } from '@angular/material/core';
+import * as i5 from '@angular/material/form-field';
+import { MAT_FORM_FIELD, MatFormFieldControl, MatFormFieldModule } from '@angular/material/form-field';
+import { Subject } from 'rxjs';
+import * as i1 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+
+// Boilerplate for applying mixins to form field control for error state checking.
+/** @ignore */
+const _DiscreteInputBase = mixinErrorState(class {
+    constructor(
+    /** @ignore */ _defaultErrorStateMatcher, 
+    /** @ignore */ _parentForm, 
+    /** @ignore */ _parentFormGroup, 
+    /** @ignore */ ngControl) {
+        this._defaultErrorStateMatcher = _defaultErrorStateMatcher;
+        this._parentForm = _parentForm;
+        this._parentFormGroup = _parentFormGroup;
+        this.ngControl = ngControl;
+    }
+});
+/**
+ * Custom `MatFormFieldControl` with an individual input box for each character, suitable for fixed-length fields,
+ * such as secondary PIN inputs, TFNs, or BSB code etc.
+ *
+ * Accessibility features are not yet fully implemented.
+ *
+ * Example:
+ *
+ * ```html
+ * <mat-form-field>
+ *   <bui-discrete-input></bui-discrete-input>
+ * </mat-form-field>
+ * ```
+ *
+ */
+class DiscreteInputComponent extends _DiscreteInputBase {
+    constructor(_focusMonitor, _elementRef, formField, control, _parentForm, _parentFormGroup, _defaultErrorStateMatcher) {
+        super(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, control);
+        this._focusMonitor = _focusMonitor;
+        this._elementRef = _elementRef;
+        /** The type of input boxes */
+        this.type = 'text';
+        /** Input boxes are separated in groups. This specifies the characters displayed between two groups. */
+        this.separator = ' ';
+        /** @ignore */ this.id = `bui-discrete-input-${DiscreteInputComponent.nextId++}`;
+        this._sizeSpec = [];
+        this._required = false;
+        this._disabled = false;
+        this._separatorPos = [];
+        /** @ignore */ this.onChange = (_) => { };
+        /** @ignore */ this.onTouched = () => { };
+        /** @ignore */ this.errorState = false;
+        this.parts = new FormArray([]);
+        this.group = new FormGroup({ parts: this.parts });
+        this.sizeSpec = [2, 2, 2];
+        this._formField = formField;
+        this.focused = false;
+        this.stateChanges = new Subject();
+        this.ngControl = control;
+        if (this.ngControl != null) {
+            this.ngControl.valueAccessor = this;
+        }
+        this._focusMonitor.monitor(this._elementRef, true).subscribe(origin => {
+            if (this.focused && !origin) {
+                this.onTouched();
+            }
+            this.focused = !!origin;
+            this.stateChanges.next();
+        });
+    }
+    /** @ignore */
+    get shouldLabelFloat() {
+        return true;
+    }
+    /** @ignore */
+    get empty() {
+        return this.parts.controls.every(c => !c.value);
+    }
+    /**
+     * Defines the length and grouping of the input.
+     * @default [2, 2, 2]
+     */
+    get sizeSpec() {
+        return this._sizeSpec;
+    }
+    set sizeSpec(spec) {
+        let size = 0;
+        this._separatorPos = [];
+        spec.forEach((n, i) => {
+            size += n;
+            if (i < spec.length - 1) {
+                this._separatorPos.push(size);
+            }
+        });
+        if (size !== this.parts.length) {
+            const v = this.value;
+            this.parts.clear({ emitEvent: false });
+            for (let i = 0; i < size; i++) {
+                this.parts.setControl(i, new FormControl(null, [Validators.required, Validators.minLength(1), Validators.maxLength(1)]));
+            }
+            this.value = v;
+            this._sizeSpec = spec;
+        }
+    }
+    /** The placeholder for this control. */
+    get placeholder() {
+        return this._placeholder;
+    }
+    set placeholder(value) {
+        this._placeholder = value;
+        this.stateChanges.next();
+    }
+    /** Whether the control is required. */
+    get required() {
+        return this._required;
+    }
+    set required(value) {
+        this._required = coerceBooleanProperty(value);
+        this.stateChanges.next();
+    }
+    /** Whether the control is disabled. */
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+        this._disabled ? this.parts.disable() : this.parts.enable();
+        this.stateChanges.next();
+    }
+    /** The value of the control. */
+    get value() {
+        return this.parts.controls
+            .map(c => c.value)
+            .filter(c => c)
+            .join('');
+    }
+    set value(v) {
+        var _a;
+        v = v || '';
+        for (let i = 0; i < this.parts.controls.length; i++) {
+            (_a = this.parts.controls[i]) === null || _a === void 0 ? void 0 : _a.setValue(v[i]);
+        }
+        this.stateChanges.next();
+    }
+    /** @ignore */
+    get _colorSuffix() {
+        var _a;
+        return this.errorState ? 'warn' : ((_a = this._formField) === null || _a === void 0 ? void 0 : _a.color) || 'primary';
+    }
+    /** @ignore */
+    ngOnDestroy() {
+        this.stateChanges.complete();
+        this._focusMonitor.stopMonitoring(this._elementRef);
+    }
+    /** @ignore */
+    setDescribedByIds(ids) {
+        const controlElement = this._elementRef.nativeElement.querySelector('.bui-discrete-input-container');
+        controlElement.setAttribute('aria-describedby', ids.join(' '));
+    }
+    /** @ignore */
+    onContainerClick() {
+        const l = this.parts.controls.length;
+        for (let i = 0; i < l; i++) {
+            if (this.parts.controls[i].invalid || i === l - 1) {
+                this._focusMonitor.focusVia(this.inputParts.get(i), 'program');
+                break;
+            }
+        }
+    }
+    /** @ignore */
+    writeValue(v) {
+        this.value = v;
+    }
+    /** @ignore */
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /** @ignore */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /** @ignore */
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    /** @ignore */
+    _handleInput(control, index) {
+        let v = control.value && control.value[0];
+        control.setValue(v);
+        const nextElement = this.inputParts.get(index + 1);
+        if (!control.errors && nextElement) {
+            this._focusPart(nextElement);
+        }
+        this.onChange(this.value);
+    }
+    /** @ignore */
+    _handleBeforeInput(index, event) {
+        const v = event.data;
+        if (this.accept && v && !new RegExp(`[${this.accept}]`).test(v)) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        const inp = this.inputParts.get(index).nativeElement;
+        if (v && inp.value) {
+            inp.value = '';
+        }
+    }
+    /** @ignore */
+    _focusPart(elemRef) {
+        this._focusMonitor.focusVia(elemRef, 'program');
+    }
+    /** @ignore */
+    _consumeKey(event) {
+        event.stopPropagation();
+        event.preventDefault();
+    }
+    /** @ignore */
+    _leftArrow(index, event) {
+        this._consumeKey(event);
+        const prevElement = this.inputParts.get(index - 1);
+        if (prevElement) {
+            this._focusPart(prevElement);
+        }
+    }
+    /** @ignore */
+    _rightArrow(index, event) {
+        this._consumeKey(event);
+        const nextElement = this.inputParts.get(index + 1);
+        if (nextElement) {
+            this._focusPart(nextElement);
+        }
+    }
+    /** @ignore */
+    _handleBackspace(control, index) {
+        const prevElement = index && this.inputParts.get(index - 1);
+        if (!control.value && prevElement) {
+            this._focusMonitor.focusVia(prevElement, 'program');
+        }
+        else if (control.value) {
+            control.setValue('');
+        }
+    }
+    /** @ignore */
+    _onPaste(event) {
+        var _a;
+        let text = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text');
+        if (text) {
+            if (this.accept) {
+                text = text.replace(new RegExp(`[^${this.accept}]`, 'gi'), '');
+            }
+            this.value = text;
+            this.onChange(this.value);
+        }
+        event.preventDefault();
+        this.onContainerClick();
+    }
+    /** @ignore */
+    _separatorRequired(index) {
+        return this._separatorPos.includes(index + 1);
+    }
+    /** @ignore */
+    _placeholderAt(index) {
+        return this._placeholder && this._placeholder[index];
+    }
+    /** @ignore */
+    ngDoCheck() {
+        if (this.ngControl) {
+            // We need to re-evaluate this on every change detection cycle, because there are some
+            // error triggers that we can't subscribe to (e.g. parent form submissions). This means
+            // that whatever logic is in here has to be super lean or we risk destroying the performance.
+            this.updateErrorState();
+        }
+    }
+}
+/** @ignore */
+DiscreteInputComponent.nextId = 0;
+DiscreteInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: DiscreteInputComponent, deps: [{ token: i1.FocusMonitor }, { token: i0.ElementRef }, { token: MAT_FORM_FIELD, optional: true }, { token: i2.NgControl, optional: true, self: true }, { token: i2.NgForm, optional: true }, { token: i2.FormGroupDirective, optional: true }, { token: i3.ErrorStateMatcher }], target: i0.ɵɵFactoryTarget.Component });
+DiscreteInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: DiscreteInputComponent, selector: "bui-discrete-input", inputs: { type: "type", separator: "separator", accept: "accept", userAriaDescribedBy: ["aria-describedby", "userAriaDescribedBy"], sizeSpec: "sizeSpec", placeholder: "placeholder", required: "required", disabled: "disabled", value: "value" }, host: { classAttribute: "bui-discrete-input" }, providers: [{ provide: MatFormFieldControl, useExisting: DiscreteInputComponent }], viewQueries: [{ propertyName: "inputParts", predicate: ["part"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div\n\trole=\"group\"\n\tclass=\"bui-discrete-input-container\"\n\t[formGroup]=\"group\"\n\t[attr.aria-labelledby]=\"_formField?.getLabelId()\"\n>\n\t<ng-container [formArrayName]=\"'parts'\">\n\t\t<ng-template ngFor [ngForOf]=\"parts.controls\" let-p let-i=\"index\">\n\t\t\t<input\n\t\t\t\tclass=\"bui-discrete-input-element bui-outline-{{ _colorSuffix }}\"\n\t\t\t\t[formControlName]=\"i\"\n\t\t\t\tsize=\"1\"\n\t\t\t\tmaxLength=\"1\"\n\t\t\t\t[attr.aria-label]=\"'character ' + (i + 1)\"\n\t\t\t\t(input)=\"_handleInput(p, i)\"\n\t\t\t\t(beforeinput)=\"_handleBeforeInput(i, $event)\"\n\t\t\t\t(keydown.backspace)=\"_handleBackspace(p, i)\"\n\t\t\t\t(keydown.arrowup)=\"_consumeKey($event)\"\n\t\t\t\t(keydown.arrowdown)=\"_consumeKey($event)\"\n\t\t\t\t(keydown.arrowleft)=\"_leftArrow(i, $event)\"\n\t\t\t\t(keydown.arrowright)=\"_rightArrow(i, $event)\"\n\t\t\t\t[attr.placeholder]=\"_placeholderAt(i)\"\n\t\t\t\t#part\n\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t(paste)=\"_onPaste($event)\"\n\t\t\t\t[type]=\"['text', 'number', 'password'].includes(type) ? type : 'text'\"\n\t\t\t\tautocapitalize=\"none\"\n\t\t\t/>\n\t\t\t<span *ngIf=\"_separatorRequired(i)\" class=\"bui-discrete-input-spacer\">{{ separator }}</span>\n\t\t</ng-template>\n\t</ng-container>\n</div>\n", styles: [".bui-discrete-input-container{display:flex;align-items:center}.bui-discrete-input-element{border:1px solid rgba(128,128,128,.4);border-radius:3px;background:none;padding:0;text-align:center;width:1.5em;height:1.5em;font-size:inherit;color:currentColor;caret-color:auto}.bui-discrete-input-element:not(:last-child){margin-right:.25em}.bui-discrete-input-element:focus-visible{outline-style:solid;outline-width:2px;outline-offset:-1px}.bui-discrete-input-element[type=number]::-webkit-inner-spin-button,.bui-discrete-input-element[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.bui-discrete-input-spacer{margin-right:.25em;vertical-align:middle}\n"], directives: [{ type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: DiscreteInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bui-discrete-input',
+                    templateUrl: 'discrete-input.component.html',
+                    styleUrls: ['discrete-input.component.scss'],
+                    providers: [{ provide: MatFormFieldControl, useExisting: DiscreteInputComponent }],
+                    host: {
+                        class: 'bui-discrete-input'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: i1.FocusMonitor }, { type: i0.ElementRef }, { type: i5.MatFormField, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MAT_FORM_FIELD]
+                }] }, { type: i2.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i2.NgForm, decorators: [{
+                    type: Optional
+                }] }, { type: i2.FormGroupDirective, decorators: [{
+                    type: Optional
+                }] }, { type: i3.ErrorStateMatcher }]; }, propDecorators: { type: [{
+                type: Input
+            }], separator: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], userAriaDescribedBy: [{
+                type: Input,
+                args: ['aria-describedby']
+            }], inputParts: [{
+                type: ViewChildren,
+                args: ['part', { read: ElementRef }]
+            }], sizeSpec: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });
+
+class DiscreteInputModule {
+}
+DiscreteInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: DiscreteInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DiscreteInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: DiscreteInputModule, declarations: [DiscreteInputComponent], imports: [CommonModule, MatFormFieldModule, ReactiveFormsModule, A11yModule] });
+DiscreteInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: DiscreteInputModule, imports: [[CommonModule, MatFormFieldModule, ReactiveFormsModule, A11yModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: DiscreteInputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DiscreteInputComponent],
+                    imports: [CommonModule, MatFormFieldModule, ReactiveFormsModule, A11yModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DiscreteInputComponent, DiscreteInputModule };
+//# sourceMappingURL=bravura-ui-discrete-input.js.map

package/fesm2015/bravura-ui-discrete-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bravura-ui-discrete-input.js","sources":["../../../projects/ui/discrete-input/discrete-input.component.ts","../../../projects/ui/discrete-input/discrete-input.component.html","../../../projects/ui/discrete-input/discrete-input.module.ts","../../../projects/ui/discrete-input/bravura-ui-discrete-input.ts"],"sourcesContent":["import { FocusMonitor } from '@angular/cdk/a11y';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n\tComponent,\n\tElementRef,\n\tInject,\n\tInput,\n\tOnDestroy,\n\tOptional,\n\tQueryList,\n\tSelf,\n\tViewChildren\n} from '@angular/core';\nimport {\n\tAbstractControl,\n\tControlValueAccessor,\n\tFormArray,\n\tFormControl,\n\tFormGroup,\n\tFormGroupDirective,\n\tNgControl,\n\tNgForm,\n\tValidators\n} from '@angular/forms';\nimport { ErrorStateMatcher, mixinErrorState } from '@angular/material/core';\nimport { MatFormField, MatFormFieldControl, MAT_FORM_FIELD } from '@angular/material/form-field';\nimport { Subject } from 'rxjs';\n\n// Boilerplate for applying mixins to form field control for error state checking.\n/** @ignore */\nconst _DiscreteInputBase = mixinErrorState(\n\tclass {\n\t\tconstructor(\n\t\t\t/** @ignore */ public _defaultErrorStateMatcher: ErrorStateMatcher,\n\t\t\t/** @ignore */ public _parentForm: NgForm,\n\t\t\t/** @ignore */ public _parentFormGroup: FormGroupDirective,\n\t\t\t/** @ignore */ public ngControl: NgControl\n\t\t) {}\n\t}\n);\n\n/**\n * Custom `MatFormFieldControl` with an individual input box for each character, suitable for fixed-length fields,\n * such as secondary PIN inputs, TFNs, or BSB code etc.\n *\n * Accessibility features are not yet fully implemented.\n *\n * Example:\n *\n * ```html\n * <mat-form-field>\n *   <bui-discrete-input></bui-discrete-input>\n * </mat-form-field>\n * ```\n *\n */\n@Component({\n\tselector: 'bui-discrete-input',\n\ttemplateUrl: 'discrete-input.component.html',\n\tstyleUrls: ['discrete-input.component.scss'],\n\tproviders: [{ provide: MatFormFieldControl, useExisting: DiscreteInputComponent }],\n\thost: {\n\t\tclass: 'bui-discrete-input'\n\t}\n})\nexport class DiscreteInputComponent\n\textends _DiscreteInputBase\n\timplements MatFormFieldControl<string>, ControlValueAccessor, OnDestroy\n{\n\t/** @ignore */\n\tstatic nextId = 0;\n\n\t/** @ignore */\n\tstatic ngAcceptInputType_disabled: boolean | string | null | undefined;\n\t/** @ignore */\n\tstatic ngAcceptInputType_required: boolean | string | null | undefined;\n\n\t/** @ignore */ parts: FormArray;\n\t/** @ignore */ group: FormGroup;\n\t/** Emits whenever the component state changes. */\n\tstateChanges: Subject<void>;\n\t/** Whether the control is focused. */\n\tfocused: boolean;\n\n\t/** The type of input boxes */\n\t@Input()\n\ttype: 'text' | 'number' | 'password' = 'text';\n\n\t/** Input boxes are separated in groups. This specifies the characters displayed between two groups. */\n\t@Input()\n\tseparator = ' ';\n\n\t/**\n\t * A list of characters accepted in the inputs, for example `0-9`, `a-zA-Z0-9`\n\t * @example '0-9'\n\t */\n\t@Input()\n\taccept?: string;\n\n\t/** @ignore */ id = `bui-discrete-input-${DiscreteInputComponent.nextId++}`;\n\n\t/** Value of aria-describedby that should be merged with the described-by ids which are set by the form-field. */\n\t@Input('aria-describedby') userAriaDescribedBy?: string;\n\n\t@ViewChildren('part', { read: ElementRef }) private inputParts!: QueryList<ElementRef<HTMLInputElement>>;\n\n\t/**@ignore */\n\t_formField: MatFormField;\n\n\t/**@ignore */\n\tngControl: NgControl;\n\n\tprivate _sizeSpec: number[] = [];\n\n\tprivate _required = false;\n\n\tprivate _placeholder?: string;\n\tprivate _disabled = false;\n\tprivate _separatorPos: number[] = [];\n\n\t/** @ignore */ onChange = (_: any) => {};\n\t/** @ignore */ onTouched = () => {};\n\n\t/** @ignore */\n\tget shouldLabelFloat() {\n\t\treturn true;\n\t}\n\n\t/** @ignore */\n\tget empty() {\n\t\treturn this.parts.controls.every(c => !c.value);\n\t}\n\n\t/**\n\t * Defines the length and grouping of the input.\n\t * @default [2, 2, 2]\n\t */\n\t@Input()\n\tget sizeSpec(): number[] {\n\t\treturn this._sizeSpec;\n\t}\n\tset sizeSpec(spec: number[]) {\n\t\tlet size = 0;\n\t\tthis._separatorPos = [];\n\t\tspec.forEach((n, i) => {\n\t\t\tsize += n;\n\t\t\tif (i < spec.length - 1) {\n\t\t\t\tthis._separatorPos.push(size);\n\t\t\t}\n\t\t});\n\t\tif (size !== this.parts.length) {\n\t\t\tconst v = this.value;\n\t\t\tthis.parts.clear({ emitEvent: false });\n\t\t\tfor (let i = 0; i < size; i++) {\n\t\t\t\tthis.parts.setControl(\n\t\t\t\t\ti,\n\t\t\t\t\tnew FormControl(null, [Validators.required, Validators.minLength(1), Validators.maxLength(1)])\n\t\t\t\t);\n\t\t\t}\n\t\t\tthis.value = v;\n\t\t\tthis._sizeSpec = spec;\n\t\t}\n\t}\n\n\t/** The placeholder for this control. */\n\t@Input()\n\tget placeholder(): string {\n\t\treturn this._placeholder!;\n\t}\n\tset placeholder(value: string) {\n\t\tthis._placeholder = value;\n\t\tthis.stateChanges.next();\n\t}\n\n\t/** Whether the control is required. */\n\t@Input()\n\tget required(): boolean {\n\t\treturn this._required;\n\t}\n\tset required(value: boolean) {\n\t\tthis._required = coerceBooleanProperty(value);\n\t\tthis.stateChanges.next();\n\t}\n\n\t/** Whether the control is disabled. */\n\t@Input()\n\tget disabled(): boolean {\n\t\treturn this._disabled;\n\t}\n\tset disabled(value: boolean) {\n\t\tthis._disabled = coerceBooleanProperty(value);\n\t\tthis._disabled ? this.parts.disable() : this.parts.enable();\n\t\tthis.stateChanges.next();\n\t}\n\n\t/** The value of the control. */\n\t@Input()\n\tget value(): string {\n\t\treturn this.parts.controls\n\t\t\t.map(c => c.value)\n\t\t\t.filter(c => c)\n\t\t\t.join('');\n\t}\n\tset value(v: string) {\n\t\tv = v || '';\n\t\tfor (let i = 0; i < this.parts.controls.length; i++) {\n\t\t\tthis.parts.controls[i]?.setValue(v[i]);\n\t\t}\n\t\tthis.stateChanges.next();\n\t}\n\n\t/** @ignore */\n\tget _colorSuffix(): string {\n\t\treturn this.errorState ? 'warn' : this._formField?.color || 'primary';\n\t}\n\n\tconstructor(\n\t\tprivate _focusMonitor: FocusMonitor,\n\t\tprivate _elementRef: ElementRef<HTMLElement>,\n\t\t@Optional() @Inject(MAT_FORM_FIELD) formField: MatFormField,\n\t\t@Optional() @Self() control: NgControl,\n\t\t@Optional() _parentForm: NgForm,\n\t\t@Optional() _parentFormGroup: FormGroupDirective,\n\t\t_defaultErrorStateMatcher: ErrorStateMatcher\n\t) {\n\t\tsuper(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, control);\n\t\tthis.parts = new FormArray([]);\n\t\tthis.group = new FormGroup({ parts: this.parts });\n\t\tthis.sizeSpec = [2, 2, 2];\n\t\tthis._formField = formField;\n\t\tthis.focused = false;\n\t\tthis.stateChanges = new Subject<void>();\n\n\t\tthis.ngControl = control;\n\t\tif (this.ngControl != null) {\n\t\t\tthis.ngControl.valueAccessor = this;\n\t\t}\n\n\t\tthis._focusMonitor.monitor(this._elementRef, true).subscribe(origin => {\n\t\t\tif (this.focused && !origin) {\n\t\t\t\tthis.onTouched();\n\t\t\t}\n\t\t\tthis.focused = !!origin;\n\t\t\tthis.stateChanges.next();\n\t\t});\n\t}\n\n\t/** @ignore */ errorState = false;\n\t/** @ignore */ controlType?: string | undefined;\n\t/** @ignore */ autofilled?: boolean | undefined;\n\n\t/** @ignore */\n\tngOnDestroy() {\n\t\tthis.stateChanges.complete();\n\t\tthis._focusMonitor.stopMonitoring(this._elementRef);\n\t}\n\n\t/** @ignore */\n\tsetDescribedByIds(ids: string[]) {\n\t\tconst controlElement = this._elementRef.nativeElement.querySelector('.bui-discrete-input-container');\n\t\tcontrolElement!.setAttribute('aria-describedby', ids.join(' '));\n\t}\n\n\t/** @ignore */\n\tonContainerClick() {\n\t\tconst l = this.parts.controls.length;\n\t\tfor (let i = 0; i < l; i++) {\n\t\t\tif (this.parts.controls[i].invalid || i === l - 1) {\n\t\t\t\tthis._focusMonitor.focusVia(this.inputParts.get(i)!, 'program');\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\t/** @ignore */\n\twriteValue(v: string): void {\n\t\tthis.value = v;\n\t}\n\n\t/** @ignore */\n\tregisterOnChange(fn: any): void {\n\t\tthis.onChange = fn;\n\t}\n\n\t/** @ignore */\n\tregisterOnTouched(fn: any): void {\n\t\tthis.onTouched = fn;\n\t}\n\n\t/** @ignore */\n\tsetDisabledState(isDisabled: boolean): void {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/** @ignore */\n\t_handleInput(control: AbstractControl, index: number): void {\n\t\tlet v = control.value && control.value[0];\n\t\tcontrol.setValue(v);\n\t\tconst nextElement = this.inputParts.get(index + 1);\n\t\tif (!control.errors && nextElement) {\n\t\t\tthis._focusPart(nextElement);\n\t\t}\n\n\t\tthis.onChange(this.value);\n\t}\n\n\t/** @ignore */\n\t_handleBeforeInput(index: number, event: InputEvent): void {\n\t\tconst v = event.data;\n\t\tif (this.accept && v && !new RegExp(`[${this.accept}]`).test(v)) {\n\t\t\tevent.preventDefault();\n\t\t\tevent.stopPropagation();\n\t\t\treturn;\n\t\t}\n\t\tconst inp = this.inputParts.get(index)!.nativeElement;\n\t\tif (v && inp.value) {\n\t\t\tinp.value = '';\n\t\t}\n\t}\n\n\t/** @ignore */\n\t_focusPart(elemRef: ElementRef<HTMLInputElement>) {\n\t\tthis._focusMonitor.focusVia(elemRef, 'program');\n\t}\n\n\t/** @ignore */\n\t_consumeKey(event: Event) {\n\t\tevent.stopPropagation();\n\t\tevent.preventDefault();\n\t}\n\n\t/** @ignore */\n\t_leftArrow(index: number, event: Event) {\n\t\tthis._consumeKey(event);\n\t\tconst prevElement = this.inputParts.get(index - 1);\n\t\tif (prevElement) {\n\t\t\tthis._focusPart(prevElement);\n\t\t}\n\t}\n\n\t/** @ignore */\n\t_rightArrow(index: number, event: Event) {\n\t\tthis._consumeKey(event);\n\t\tconst nextElement = this.inputParts.get(index + 1);\n\t\tif (nextElement) {\n\t\t\tthis._focusPart(nextElement);\n\t\t}\n\t}\n\n\t/** @ignore */\n\t_handleBackspace(control: AbstractControl, index: number): void {\n\t\tconst prevElement = index && this.inputParts.get(index - 1);\n\t\tif (!control.value && prevElement) {\n\t\t\tthis._focusMonitor.focusVia(prevElement, 'program');\n\t\t} else if (control.value) {\n\t\t\tcontrol.setValue('');\n\t\t}\n\t}\n\n\t/** @ignore */\n\t_onPaste(event: ClipboardEvent) {\n\t\tlet text = event.clipboardData?.getData('text');\n\t\tif (text) {\n\t\t\tif (this.accept) {\n\t\t\t\ttext = text.replace(new RegExp(`[^${this.accept}]`, 'gi'), '');\n\t\t\t}\n\t\t\tthis.value = text;\n\t\t\tthis.onChange(this.value);\n\t\t}\n\t\tevent.preventDefault();\n\t\tthis.onContainerClick();\n\t}\n\n\t/** @ignore */\n\t_separatorRequired(index: number) {\n\t\treturn this._separatorPos.includes(index + 1);\n\t}\n\n\t/** @ignore */\n\t_placeholderAt(index: number) {\n\t\treturn this._placeholder && this._placeholder[index];\n\t}\n\n\t/** @ignore */\n\tngDoCheck() {\n\t\tif (this.ngControl) {\n\t\t\t// We need to re-evaluate this on every change detection cycle, because there are some\n\t\t\t// error triggers that we can't subscribe to (e.g. parent form submissions). This means\n\t\t\t// that whatever logic is in here has to be super lean or we risk destroying the performance.\n\t\t\tthis.updateErrorState();\n\t\t}\n\t}\n}\n","<div\n\trole=\"group\"\n\tclass=\"bui-discrete-input-container\"\n\t[formGroup]=\"group\"\n\t[attr.aria-labelledby]=\"_formField?.getLabelId()\"\n>\n\t<ng-container [formArrayName]=\"'parts'\">\n\t\t<ng-template ngFor [ngForOf]=\"parts.controls\" let-p let-i=\"index\">\n\t\t\t<input\n\t\t\t\tclass=\"bui-discrete-input-element bui-outline-{{ _colorSuffix }}\"\n\t\t\t\t[formControlName]=\"i\"\n\t\t\t\tsize=\"1\"\n\t\t\t\tmaxLength=\"1\"\n\t\t\t\t[attr.aria-label]=\"'character ' + (i + 1)\"\n\t\t\t\t(input)=\"_handleInput(p, i)\"\n\t\t\t\t(beforeinput)=\"_handleBeforeInput(i, $event)\"\n\t\t\t\t(keydown.backspace)=\"_handleBackspace(p, i)\"\n\t\t\t\t(keydown.arrowup)=\"_consumeKey($event)\"\n\t\t\t\t(keydown.arrowdown)=\"_consumeKey($event)\"\n\t\t\t\t(keydown.arrowleft)=\"_leftArrow(i, $event)\"\n\t\t\t\t(keydown.arrowright)=\"_rightArrow(i, $event)\"\n\t\t\t\t[attr.placeholder]=\"_placeholderAt(i)\"\n\t\t\t\t#part\n\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t(paste)=\"_onPaste($event)\"\n\t\t\t\t[type]=\"['text', 'number', 'password'].includes(type) ? type : 'text'\"\n\t\t\t\tautocapitalize=\"none\"\n\t\t\t/>\n\t\t\t<span *ngIf=\"_separatorRequired(i)\" class=\"bui-discrete-input-spacer\">{{ separator }}</span>\n\t\t</ng-template>\n\t</ng-container>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { DiscreteInputComponent } from './discrete-input.component';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { A11yModule } from '@angular/cdk/a11y';\n\n@NgModule({\n\tdeclarations: [DiscreteInputComponent],\n\timports: [CommonModule, MatFormFieldModule, ReactiveFormsModule, A11yModule]\n})\nexport class DiscreteInputModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2015/bravura-ui-form-field.js

@@ -3,7 +3,7 @@ import { ObserversModule } from '@angular/cdk/observers';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { forwardRef, Component, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { forwardRef, Component, ViewEncapsulation, ChangeDetectionStrategy, HostListener, NgModule } from '@angular/core';
 import { MatFormField, MAT_FORM_FIELD, matFormFieldAnimations, MatFormFieldModule } from '@angular/material/form-field';
 
 /**
@@ -46,9 +46,13 @@ class FormFieldComponent extends MatFormField {
     _enhancedAppearance() {
         return this.appearance === 'detach' || this.appearance === 'bound';
     }
+    /** @ignore */
+    _hostClicked(event) {
+        this._control.onContainerClick && this._control.onContainerClick(event);
+    }
 }
 FormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: FormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: FormFieldComponent, selector: "bui-form-field", inputs: { color: "color" }, host: { properties: { "class.mat-form-field-appearance-standard": "appearance == \"standard\"", "class.mat-form-field-appearance-fill": "appearance == \"fill\"", "class.mat-form-field-appearance-outline": "appearance == \"outline\"", "class.mat-form-field-appearance-detach": "appearance == \"detach\"", "class.mat-form-field-appearance-bound": "appearance == \"bound\"", "class.mat-form-field-appearance-legacy": "appearance == \"legacy\"", "class.mat-form-field-invalid": "_control.errorState", "class.mat-form-field-can-float": "_canLabelFloat()", "class.mat-form-field-should-float": "_shouldLabelFloat()", "class.mat-form-field-has-label": "_hasFloatingLabel()", "class.mat-form-field-hide-placeholder": "_hideControlPlaceholder()", "class.mat-form-field-disabled": "_control.disabled", "class.mat-form-field-autofilled": "_control.autofilled", "class.mat-focused": "_control.focused", "class.ng-untouched": "_shouldForward(\"untouched\")", "class.ng-touched": "_shouldForward(\"touched\")", "class.ng-pristine": "_shouldForward(\"pristine\")", "class.ng-dirty": "_shouldForward(\"dirty\")", "class.ng-valid": "_shouldForward(\"valid\")", "class.ng-invalid": "_shouldForward(\"invalid\")", "class.ng-pending": "_shouldForward(\"pending\")", "class._mat-animation-noopable": "!_animationsEnabled" }, classAttribute: "mat-form-field bui-form-field" }, providers: [{ provide: MAT_FORM_FIELD, useExisting: forwardRef(() => FormFieldComponent) }], exportAs: ["buiFormField"], usesInheritance: true, ngImport: i0, template: "<div class=\"mat-form-field-wrapper\">\n\t<div\n\t\tclass=\"mat-form-field-flex {{ _borderClass() }}\"\n\t\t#connectionContainer\n\t\t(click)=\"_control.onContainerClick && _control.onContainerClick($event)\"\n\t>\n\t\t<!-- Outline used for outline appearance. -->\n\t\t<ng-container *ngIf=\"appearance == 'outline'\">\n\t\t\t<div class=\"mat-form-field-outline\">\n\t\t\t\t<div class=\"mat-form-field-outline-start\"></div>\n\t\t\t\t<div class=\"mat-form-field-outline-gap\"></div>\n\t\t\t\t<div class=\"mat-form-field-outline-end\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"mat-form-field-outline mat-form-field-outline-thick\">\n\t\t\t\t<div class=\"mat-form-field-outline-start\"></div>\n\t\t\t\t<div class=\"mat-form-field-outline-gap\"></div>\n\t\t\t\t<div class=\"mat-form-field-outline-end\"></div>\n\t\t\t</div>\n\t\t</ng-container>\n\n\t\t<div class=\"mat-form-field-prefix\" *ngIf=\"_prefixChildren.length\">\n\t\t\t<ng-content select=\"[matPrefix]\"></ng-content>\n\t\t</div>\n\n\t\t<div class=\"{{ _enhancedAppearance() ? 'bui-form-field-infix' : 'mat-form-field-infix' }}\" #inputContainer>\n\t\t\t<ng-content></ng-content>\n\n\t\t\t<span class=\"mat-form-field-label-wrapper\">\n\t\t\t\t<!-- We add aria-owns as a workaround for an issue in JAWS & NVDA where the label isn't\n\t\t\t   read if it comes before the control in the DOM. -->\n\t\t\t\t<label\n\t\t\t\t\tclass=\"mat-form-field-label\"\n\t\t\t\t\t(cdkObserveContent)=\"updateOutlineGap()\"\n\t\t\t\t\t[cdkObserveContentDisabled]=\"appearance != 'outline'\"\n\t\t\t\t\t[id]=\"_labelId\"\n\t\t\t\t\t[attr.for]=\"_control.id\"\n\t\t\t\t\t[attr.aria-owns]=\"_control.id\"\n\t\t\t\t\t[class.mat-empty]=\"_control.empty && !_shouldAlwaysFloat()\"\n\t\t\t\t\t[class.mat-form-field-empty]=\"_control.empty && !_shouldAlwaysFloat()\"\n\t\t\t\t\t[class.mat-accent]=\"color == 'accent'\"\n\t\t\t\t\t[class.mat-warn]=\"color == 'warn'\"\n\t\t\t\t\t#label\n\t\t\t\t\t*ngIf=\"_hasFloatingLabel()\"\n\t\t\t\t\t[ngSwitch]=\"_hasLabel()\"\n\t\t\t\t>\n\t\t\t\t\t<!-- @breaking-change 8.0.0 remove in favor of mat-label element an placeholder attr. -->\n\t\t\t\t\t<ng-container *ngSwitchCase=\"false\">\n\t\t\t\t\t\t<ng-content select=\"mat-placeholder\"></ng-content>\n\t\t\t\t\t\t<span>{{ _control.placeholder }}</span>\n\t\t\t\t\t</ng-container>\n\n\t\t\t\t\t<ng-content select=\"mat-label\" *ngSwitchCase=\"true\"></ng-content>\n\n\t\t\t\t\t<!-- @breaking-change 8.0.0 remove `mat-placeholder-required` class -->\n\t\t\t\t\t<span\n\t\t\t\t\t\tclass=\"mat-placeholder-required mat-form-field-required-marker\"\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t*ngIf=\"!hideRequiredMarker && _control.required && !_control.disabled\"\n\t\t\t\t\t\t>&#32;*</span\n\t\t\t\t\t>\n\t\t\t\t</label>\n\t\t\t</span>\n\t\t</div>\n\n\t\t<div class=\"mat-form-field-suffix\" *ngIf=\"_suffixChildren.length\">\n\t\t\t<ng-content select=\"[matSuffix]\"></ng-content>\n\t\t</div>\n\t\t<div *ngIf=\"_enhancedAppearance()\" class=\"bui-form-field-right-filler\"></div>\n\t</div>\n\n\t<!-- Underline used for legacy, standard, and box appearances. -->\n\t<div class=\"mat-form-field-underline\" #underline *ngIf=\"appearance != 'outline'\">\n\t\t<span\n\t\t\tclass=\"mat-form-field-ripple\"\n\t\t\t[class.mat-accent]=\"color == 'accent'\"\n\t\t\t[class.mat-warn]=\"color == 'warn'\"\n\t\t></span>\n\t</div>\n\n\t<div class=\"mat-form-field-subscript-wrapper\" [ngSwitch]=\"_getDisplayedMessages()\">\n\t\t<div *ngSwitchCase=\"'error'\" [@transitionMessages]=\"_subscriptAnimationState\">\n\t\t\t<ng-content select=\"mat-error\"></ng-content>\n\t\t</div>\n\n\t\t<div class=\"mat-form-field-hint-wrapper\" *ngSwitchCase=\"'hint'\" [@transitionMessages]=\"_subscriptAnimationState\">\n\t\t\t<!-- TODO(mmalerba): use an actual <mat-hint> once all selectors are switched to mat-* -->\n\t\t\t<div *ngIf=\"hintLabel\" [id]=\"_hintLabelId\" class=\"mat-hint\">{{ hintLabel }}</div>\n\t\t\t<ng-content select=\"mat-hint:not([align='end'])\"></ng-content>\n\t\t\t<div class=\"mat-form-field-hint-spacer\"></div>\n\t\t\t<ng-content select=\"mat-hint[align='end']\"></ng-content>\n\t\t</div>\n\t</div>\n</div>\n", styles: [".bui-form-field.mat-form-field-appearance-bound .mat-form-field-flex{padding:.5em;align-items:center;border-radius:4px;border-style:solid}.bui-form-field.mat-form-field-appearance-bound .mat-form-field-flex:not(.bui-form-field-border-thick):not(:hover),.bui-form-field.mat-form-field-appearance-bound .mat-form-field-flex.bui-form-field-border-disabled{border-width:1px;margin:1px}.bui-form-field.mat-form-field-appearance-bound .mat-form-field-flex:not(.bui-form-field-border-thick):not(:hover) .bui-form-field-right-filler,.bui-form-field.mat-form-field-appearance-bound .mat-form-field-flex.bui-form-field-border-disabled .bui-form-field-right-filler{width:2px}.bui-form-field.mat-form-field-appearance-bound .mat-form-field-flex.bui-form-field-border-disabled{border-color:#80808033;border-style:dotted}.bui-form-field.mat-form-field-appearance-bound .mat-form-field-flex.bui-form-field-border-default{border-color:#80808066}.bui-form-field.mat-form-field-appearance-bound .mat-form-field-flex.bui-form-field-border-thick,.bui-form-field.mat-form-field-appearance-bound .mat-form-field-flex.bui-border-emphasis:hover{border-width:2px}.bui-form-field.mat-form-field-appearance-bound .mat-form-field-flex.bui-form-field-border-thick .bui-form-field-right-filler,.bui-form-field.mat-form-field-appearance-bound .mat-form-field-flex.bui-border-emphasis:hover .bui-form-field-right-filler{width:0}.bui-form-field.mat-form-field-appearance-detach,.bui-form-field.mat-form-field-appearance-bound{padding-top:.75em}.bui-form-field.mat-form-field-appearance-detach .mat-form-field-wrapper,.bui-form-field.mat-form-field-appearance-bound .mat-form-field-wrapper{padding-top:.5em}.bui-form-field.mat-form-field-appearance-detach .bui-form-field-infix,.bui-form-field.mat-form-field-appearance-bound .bui-form-field-infix{flex-grow:1}.bui-form-field.mat-form-field-appearance-detach .mat-form-field-label,.bui-form-field.mat-form-field-appearance-bound .mat-form-field-label{font-size:1.125em}.bui-form-field.mat-form-field-appearance-detach .mat-form-field-flex,.bui-form-field.mat-form-field-appearance-bound .mat-form-field-flex{align-items:center}.bui-form-field.mat-form-field-appearance-detach .mat-form-field-flex{padding:.5em 0;align-items:center}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], animations: [matFormFieldAnimations.transitionMessages], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+FormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: FormFieldComponent, selector: "bui-form-field", inputs: { color: "color" }, host: { listeners: { "click": "_hostClicked($event)" }, properties: { "class.mat-form-field-appearance-standard": "appearance == \"standard\"", "class.mat-form-field-appearance-fill": "appearance == \"fill\"", "class.mat-form-field-appearance-outline": "appearance == \"outline\"", "class.mat-form-field-appearance-detach": "appearance == \"detach\"", "class.mat-form-field-appearance-bound": "appearance == \"bound\"", "class.mat-form-field-appearance-legacy": "appearance == \"legacy\"", "class.mat-form-field-invalid": "_control.errorState", "class.mat-form-field-can-float": "_canLabelFloat()", "class.mat-form-field-should-float": "_shouldLabelFloat()", "class.mat-form-field-has-label": "_hasFloatingLabel()", "class.mat-form-field-hide-placeholder": "_hideControlPlaceholder()", "class.mat-form-field-disabled": "_control.disabled", "class.mat-form-field-autofilled": "_control.autofilled", "class.mat-focused": "_control.focused", "class.ng-untouched": "_shouldForward(\"untouched\")", "class.ng-touched": "_shouldForward(\"touched\")", "class.ng-pristine": "_shouldForward(\"pristine\")", "class.ng-dirty": "_shouldForward(\"dirty\")", "class.ng-valid": "_shouldForward(\"valid\")", "class.ng-invalid": "_shouldForward(\"invalid\")", "class.ng-pending": "_shouldForward(\"pending\")", "class._mat-animation-noopable": "!_animationsEnabled" }, classAttribute: "mat-form-field bui-form-field" }, providers: [{ provide: MAT_FORM_FIELD, useExisting: forwardRef(() => FormFieldComponent) }], exportAs: ["buiFormField"], usesInheritance: true, ngImport: i0, template: "<div class=\"mat-form-field-wrapper\">\n\t<div class=\"mat-form-field-flex {{ _borderClass() }}\" #connectionContainer>\n\t\t<!-- Outline used for outline appearance. -->\n\t\t<ng-container *ngIf=\"appearance == 'outline'\">\n\t\t\t<div class=\"mat-form-field-outline\">\n\t\t\t\t<div class=\"mat-form-field-outline-start\"></div>\n\t\t\t\t<div class=\"mat-form-field-outline-gap\"></div>\n\t\t\t\t<div class=\"mat-form-field-outline-end\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"mat-form-field-outline mat-form-field-outline-thick\">\n\t\t\t\t<div class=\"mat-form-field-outline-start\"></div>\n\t\t\t\t<div class=\"mat-form-field-outline-gap\"></div>\n\t\t\t\t<div class=\"mat-form-field-outline-end\"></div>\n\t\t\t</div>\n\t\t</ng-container>\n\n\t\t<div class=\"mat-form-field-prefix\" *ngIf=\"_prefixChildren.length\">\n\t\t\t<ng-content select=\"[matPrefix]\"></ng-content>\n\t\t</div>\n\n\t\t<div class=\"{{ _enhancedAppearance() ? 'bui-form-field-infix' : 'mat-form-field-infix' }}\" #inputContainer>\n\t\t\t<ng-content></ng-content>\n\n\t\t\t<span class=\"mat-form-field-label-wrapper\">\n\t\t\t\t<!-- We add aria-owns as a workaround for an issue in JAWS & NVDA where the label isn't\n\t\t\t   read if it comes before the control in the DOM. -->\n\t\t\t\t<label\n\t\t\t\t\tclass=\"mat-form-field-label\"\n\t\t\t\t\t(cdkObserveContent)=\"updateOutlineGap()\"\n\t\t\t\t\t[cdkObserveContentDisabled]=\"appearance != 'outline'\"\n\t\t\t\t\t[id]=\"_labelId\"\n\t\t\t\t\t[attr.for]=\"_control.id\"\n\t\t\t\t\t[attr.aria-owns]=\"_control.id\"\n\t\t\t\t\t[class.mat-empty]=\"_control.empty && !_shouldAlwaysFloat()\"\n\t\t\t\t\t[class.mat-form-field-empty]=\"_control.empty && !_shouldAlwaysFloat()\"\n\t\t\t\t\t[class.mat-accent]=\"color == 'accent'\"\n\t\t\t\t\t[class.mat-warn]=\"color == 'warn'\"\n\t\t\t\t\t#label\n\t\t\t\t\t*ngIf=\"_hasFloatingLabel()\"\n\t\t\t\t\t[ngSwitch]=\"_hasLabel()\"\n\t\t\t\t>\n\t\t\t\t\t<!-- @breaking-change 8.0.0 remove in favor of mat-label element an placeholder attr. -->\n\t\t\t\t\t<ng-container *ngSwitchCase=\"false\">\n\t\t\t\t\t\t<ng-content select=\"mat-placeholder\"></ng-content>\n\t\t\t\t\t\t<span>{{ _control.placeholder }}</span>\n\t\t\t\t\t</ng-container>\n\n\t\t\t\t\t<ng-content select=\"mat-label\" *ngSwitchCase=\"true\"></ng-content>\n\n\t\t\t\t\t<!-- @breaking-change 8.0.0 remove `mat-placeholder-required` class -->\n\t\t\t\t\t<span\n\t\t\t\t\t\tclass=\"mat-placeholder-required mat-form-field-required-marker\"\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t*ngIf=\"!hideRequiredMarker && _control.required && !_control.disabled\"\n\t\t\t\t\t\t>&#32;*</span\n\t\t\t\t\t>\n\t\t\t\t</label>\n\t\t\t</span>\n\t\t</div>\n\n\t\t<div class=\"mat-form-field-suffix\" *ngIf=\"_suffixChildren.length\">\n\t\t\t<ng-content select=\"[matSuffix]\"></ng-content>\n\t\t</div>\n\t\t<div *ngIf=\"_enhancedAppearance()\" class=\"bui-form-field-right-filler\"></div>\n\t</div>\n\n\t<!-- Underline used for legacy, standard, and box appearances. -->\n\t<div class=\"mat-form-field-underline\" #underline *ngIf=\"appearance != 'outline'\">\n\t\t<span\n\t\t\tclass=\"mat-form-field-ripple\"\n\t\t\t[class.mat-accent]=\"color == 'accent'\"\n\t\t\t[class.mat-warn]=\"color == 'warn'\"\n\t\t></span>\n\t</div>\n\n\t<div class=\"mat-form-field-subscript-wrapper\" [ngSwitch]=\"_getDisplayedMessages()\" (click)=\"$event.stopPropagation()\">\n\t\t<div *ngSwitchCase=\"'error'\" [@transitionMessages]=\"_subscriptAnimationState\">\n\t\t\t<ng-content select=\"mat-error\"></ng-content>\n\t\t</div>\n\n\t\t<div class=\"mat-form-field-hint-wrapper\" *ngSwitchCase=\"'hint'\" [@transitionMessages]=\"_subscriptAnimationState\">\n\t\t\t<!-- TODO(mmalerba): use an actual <mat-hint> once all selectors are switched to mat-* -->\n\t\t\t<div *ngIf=\"hintLabel\" [id]=\"_hintLabelId\" class=\"mat-hint\">{{ hintLabel }}</div>\n\t\t\t<ng-content select=\"mat-hint:not([align='end'])\"></ng-content>\n\t\t\t<div class=\"mat-form-field-hint-spacer\"></div>\n\t\t\t<ng-content select=\"mat-hint[align='end']\"></ng-content>\n\t\t</div>\n\t</div>\n</div>\n", styles: [".bui-form-field.mat-form-field-appearance-bound .mat-form-field-flex{padding:.5em;align-items:center;border-radius:4px;border-style:solid}.bui-form-field.mat-form-field-appearance-bound .mat-form-field-flex:not(.bui-form-field-border-thick):not(:hover),.bui-form-field.mat-form-field-appearance-bound .mat-form-field-flex.bui-form-field-border-disabled{border-width:1px;margin:1px}.bui-form-field.mat-form-field-appearance-bound .mat-form-field-flex:not(.bui-form-field-border-thick):not(:hover) .bui-form-field-right-filler,.bui-form-field.mat-form-field-appearance-bound .mat-form-field-flex.bui-form-field-border-disabled .bui-form-field-right-filler{width:2px}.bui-form-field.mat-form-field-appearance-bound .mat-form-field-flex.bui-form-field-border-disabled{border-color:#80808033;border-style:dotted}.bui-form-field.mat-form-field-appearance-bound .mat-form-field-flex.bui-form-field-border-default{border-color:#80808066}.bui-form-field.mat-form-field-appearance-bound .mat-form-field-flex.bui-form-field-border-thick,.bui-form-field.mat-form-field-appearance-bound .mat-form-field-flex.bui-border-emphasis:hover{border-width:2px}.bui-form-field.mat-form-field-appearance-bound .mat-form-field-flex.bui-form-field-border-thick .bui-form-field-right-filler,.bui-form-field.mat-form-field-appearance-bound .mat-form-field-flex.bui-border-emphasis:hover .bui-form-field-right-filler{width:0}.bui-form-field.mat-form-field-appearance-detach,.bui-form-field.mat-form-field-appearance-bound{padding-top:.75em}.bui-form-field.mat-form-field-appearance-detach .mat-form-field-wrapper,.bui-form-field.mat-form-field-appearance-bound .mat-form-field-wrapper{padding-top:.5em}.bui-form-field.mat-form-field-appearance-detach .bui-form-field-infix,.bui-form-field.mat-form-field-appearance-bound .bui-form-field-infix{flex-grow:1}.bui-form-field.mat-form-field-appearance-detach .mat-form-field-label,.bui-form-field.mat-form-field-appearance-bound .mat-form-field-label{font-size:1.125em}.bui-form-field.mat-form-field-appearance-detach .mat-form-field-flex,.bui-form-field.mat-form-field-appearance-bound .mat-form-field-flex{align-items:center}.bui-form-field.mat-form-field-appearance-detach .mat-form-field-flex{padding:.125em 0;align-items:center}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], animations: [matFormFieldAnimations.transitionMessages], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
             args: [{
@@ -87,7 +91,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [{ provide: MAT_FORM_FIELD, useExisting: forwardRef(() => FormFieldComponent) }]
                 }]
-        }] });
+        }], propDecorators: { _hostClicked: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
 FormFieldComponent.ɵcmp.styles.push(MatFormField.ɵcmp.styles);
 
 class FormFieldModule {

package/fesm2015/bravura-ui-form-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"bravura-ui-form-field.js","sources":["../../../projects/ui/form-field/form-field.component.ts","../../../projects/ui/form-field/form-field.component.html","../../../projects/ui/form-field/form-field.module.ts","../../../projects/ui/form-field/bravura-ui-form-field.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, forwardRef, ViewEncapsulation } from '@angular/core';\r\nimport { MatFormField, matFormFieldAnimations, MAT_FORM_FIELD } from '@angular/material/form-field';\r\n\r\n/**\r\n * Container for form controls that applies Material Design styling and behavior.\r\n *\r\n * This component extends Angular Material's [mat-form-field](https://material.angular.io/components/form-field) and provides two additional appearances\r\n * `bound` and `detach`. `bound` renders the label outside the outlined area of the field, while `detach` remove the borders all together. `detach`\r\n * is generally used with form controls that render their own borders.\r\n */\r\n@Component({\r\n\tselector: 'bui-form-field',\r\n\texportAs: 'buiFormField',\r\n\ttemplateUrl: 'form-field.component.html',\r\n\tstyleUrls: ['./form-field.component.scss'],\r\n\tanimations: [matFormFieldAnimations.transitionMessages],\r\n\thost: {\r\n\t\tclass: 'mat-form-field bui-form-field',\r\n\t\t'[class.mat-form-field-appearance-standard]': 'appearance == \"standard\"',\r\n\t\t'[class.mat-form-field-appearance-fill]': 'appearance == \"fill\"',\r\n\t\t'[class.mat-form-field-appearance-outline]': 'appearance == \"outline\"',\r\n\t\t'[class.mat-form-field-appearance-detach]': 'appearance == \"detach\"',\r\n\t\t'[class.mat-form-field-appearance-bound]': 'appearance == \"bound\"',\r\n\t\t'[class.mat-form-field-appearance-legacy]': 'appearance == \"legacy\"',\r\n\t\t'[class.mat-form-field-invalid]': '_control.errorState',\r\n\t\t'[class.mat-form-field-can-float]': '_canLabelFloat()',\r\n\t\t'[class.mat-form-field-should-float]': '_shouldLabelFloat()',\r\n\t\t'[class.mat-form-field-has-label]': '_hasFloatingLabel()',\r\n\t\t'[class.mat-form-field-hide-placeholder]': '_hideControlPlaceholder()',\r\n\t\t'[class.mat-form-field-disabled]': '_control.disabled',\r\n\t\t'[class.mat-form-field-autofilled]': '_control.autofilled',\r\n\t\t'[class.mat-focused]': '_control.focused',\r\n\t\t'[class.ng-untouched]': '_shouldForward(\"untouched\")',\r\n\t\t'[class.ng-touched]': '_shouldForward(\"touched\")',\r\n\t\t'[class.ng-pristine]': '_shouldForward(\"pristine\")',\r\n\t\t'[class.ng-dirty]': '_shouldForward(\"dirty\")',\r\n\t\t'[class.ng-valid]': '_shouldForward(\"valid\")',\r\n\t\t'[class.ng-invalid]': '_shouldForward(\"invalid\")',\r\n\t\t'[class.ng-pending]': '_shouldForward(\"pending\")',\r\n\t\t'[class._mat-animation-noopable]': '!_animationsEnabled'\r\n\t},\r\n\tinputs: ['color'],\r\n\tencapsulation: ViewEncapsulation.None,\r\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\r\n\tproviders: [{ provide: MAT_FORM_FIELD, useExisting: forwardRef(() => FormFieldComponent) }]\r\n})\r\nexport class FormFieldComponent extends MatFormField {\r\n\t/**\r\n\t * @ignore\r\n\t */\r\n\t_shouldAlwaysFloat(): boolean {\r\n\t\treturn super._shouldAlwaysFloat() || this._enhancedAppearance();\r\n\t}\r\n\r\n\t/**\r\n\t * @ignore\r\n\t */\r\n\t_borderClass(): string {\r\n\t\tif ((this.appearance as any) !== 'bound') {\r\n\t\t\treturn 'bui-form-field-flex-default';\r\n\t\t}\r\n\t\tif (this._control.disabled) {\r\n\t\t\treturn 'bui-form-field-border-disabled';\r\n\t\t} else if (this._control.errorState) {\r\n\t\t\treturn 'bui-border-warn bui-form-field-border-thick';\r\n\t\t} else if (this._control.focused) {\r\n\t\t\treturn `bui-border-${this.color || 'primary'} bui-form-field-border-thick`;\r\n\t\t} else {\r\n\t\t\treturn 'bui-form-field-border-default bui-border-emphasis';\r\n\t\t}\r\n\t}\r\n\r\n\t/**\r\n\t * @ignore\r\n\t */\r\n\t_enhancedAppearance() {\r\n\t\treturn (this.appearance as any) === 'detach' || (this.appearance as any) === 'bound';\r\n\t}\r\n}\r\n\r\n(FormFieldComponent as any).ɵcmp.styles.push((MatFormField as any).ɵcmp.styles);\r\n","<div class=\"mat-form-field-wrapper\">\n\t<div\n\t\tclass=\"mat-form-field-flex {{ _borderClass() }}\"\n\t\t#connectionContainer\n\t\t(click)=\"_control.onContainerClick && _control.onContainerClick($event)\"\n\t>\n\t\t<!-- Outline used for outline appearance. -->\n\t\t<ng-container *ngIf=\"appearance == 'outline'\">\n\t\t\t<div class=\"mat-form-field-outline\">\n\t\t\t\t<div class=\"mat-form-field-outline-start\"></div>\n\t\t\t\t<div class=\"mat-form-field-outline-gap\"></div>\n\t\t\t\t<div class=\"mat-form-field-outline-end\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"mat-form-field-outline mat-form-field-outline-thick\">\n\t\t\t\t<div class=\"mat-form-field-outline-start\"></div>\n\t\t\t\t<div class=\"mat-form-field-outline-gap\"></div>\n\t\t\t\t<div class=\"mat-form-field-outline-end\"></div>\n\t\t\t</div>\n\t\t</ng-container>\n\n\t\t<div class=\"mat-form-field-prefix\" *ngIf=\"_prefixChildren.length\">\n\t\t\t<ng-content select=\"[matPrefix]\"></ng-content>\n\t\t</div>\n\n\t\t<div class=\"{{ _enhancedAppearance() ? 'bui-form-field-infix' : 'mat-form-field-infix' }}\" #inputContainer>\n\t\t\t<ng-content></ng-content>\n\n\t\t\t<span class=\"mat-form-field-label-wrapper\">\n\t\t\t\t<!-- We add aria-owns as a workaround for an issue in JAWS & NVDA where the label isn't\n\t\t\t   read if it comes before the control in the DOM. -->\n\t\t\t\t<label\n\t\t\t\t\tclass=\"mat-form-field-label\"\n\t\t\t\t\t(cdkObserveContent)=\"updateOutlineGap()\"\n\t\t\t\t\t[cdkObserveContentDisabled]=\"appearance != 'outline'\"\n\t\t\t\t\t[id]=\"_labelId\"\n\t\t\t\t\t[attr.for]=\"_control.id\"\n\t\t\t\t\t[attr.aria-owns]=\"_control.id\"\n\t\t\t\t\t[class.mat-empty]=\"_control.empty && !_shouldAlwaysFloat()\"\n\t\t\t\t\t[class.mat-form-field-empty]=\"_control.empty && !_shouldAlwaysFloat()\"\n\t\t\t\t\t[class.mat-accent]=\"color == 'accent'\"\n\t\t\t\t\t[class.mat-warn]=\"color == 'warn'\"\n\t\t\t\t\t#label\n\t\t\t\t\t*ngIf=\"_hasFloatingLabel()\"\n\t\t\t\t\t[ngSwitch]=\"_hasLabel()\"\n\t\t\t\t>\n\t\t\t\t\t<!-- @breaking-change 8.0.0 remove in favor of mat-label element an placeholder attr. -->\n\t\t\t\t\t<ng-container *ngSwitchCase=\"false\">\n\t\t\t\t\t\t<ng-content select=\"mat-placeholder\"></ng-content>\n\t\t\t\t\t\t<span>{{ _control.placeholder }}</span>\n\t\t\t\t\t</ng-container>\n\n\t\t\t\t\t<ng-content select=\"mat-label\" *ngSwitchCase=\"true\"></ng-content>\n\n\t\t\t\t\t<!-- @breaking-change 8.0.0 remove `mat-placeholder-required` class -->\n\t\t\t\t\t<span\n\t\t\t\t\t\tclass=\"mat-placeholder-required mat-form-field-required-marker\"\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t*ngIf=\"!hideRequiredMarker && _control.required && !_control.disabled\"\n\t\t\t\t\t\t>&#32;*</span\n\t\t\t\t\t>\n\t\t\t\t</label>\n\t\t\t</span>\n\t\t</div>\n\n\t\t<div class=\"mat-form-field-suffix\" *ngIf=\"_suffixChildren.length\">\n\t\t\t<ng-content select=\"[matSuffix]\"></ng-content>\n\t\t</div>\n\t\t<div *ngIf=\"_enhancedAppearance()\" class=\"bui-form-field-right-filler\"></div>\n\t</div>\n\n\t<!-- Underline used for legacy, standard, and box appearances. -->\n\t<div class=\"mat-form-field-underline\" #underline *ngIf=\"appearance != 'outline'\">\n\t\t<span\n\t\t\tclass=\"mat-form-field-ripple\"\n\t\t\t[class.mat-accent]=\"color == 'accent'\"\n\t\t\t[class.mat-warn]=\"color == 'warn'\"\n\t\t></span>\n\t</div>\n\n\t<div class=\"mat-form-field-subscript-wrapper\" [ngSwitch]=\"_getDisplayedMessages()\">\n\t\t<div *ngSwitchCase=\"'error'\" [@transitionMessages]=\"_subscriptAnimationState\">\n\t\t\t<ng-content select=\"mat-error\"></ng-content>\n\t\t</div>\n\n\t\t<div class=\"mat-form-field-hint-wrapper\" *ngSwitchCase=\"'hint'\" [@transitionMessages]=\"_subscriptAnimationState\">\n\t\t\t<!-- TODO(mmalerba): use an actual <mat-hint> once all selectors are switched to mat-* -->\n\t\t\t<div *ngIf=\"hintLabel\" [id]=\"_hintLabelId\" class=\"mat-hint\">{{ hintLabel }}</div>\n\t\t\t<ng-content select=\"mat-hint:not([align='end'])\"></ng-content>\n\t\t\t<div class=\"mat-form-field-hint-spacer\"></div>\n\t\t\t<ng-content select=\"mat-hint[align='end']\"></ng-content>\n\t\t</div>\n\t</div>\n</div>\n","import { ObserversModule } from '@angular/cdk/observers';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { FormFieldComponent } from './form-field.component';\n\n@NgModule({\n\tdeclarations: [FormFieldComponent],\n\timports: [CommonModule, MatFormFieldModule, ObserversModule],\n\texports: [FormFieldComponent, MatFormFieldModule]\n})\nexport class FormFieldModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"bravura-ui-form-field.js","sources":["../../../projects/ui/form-field/form-field.component.ts","../../../projects/ui/form-field/form-field.component.html","../../../projects/ui/form-field/form-field.module.ts","../../../projects/ui/form-field/bravura-ui-form-field.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, forwardRef, HostListener, ViewEncapsulation } from '@angular/core';\nimport { MatFormField, matFormFieldAnimations, MAT_FORM_FIELD } from '@angular/material/form-field';\n\n/**\n * Container for form controls that applies Material Design styling and behavior.\n *\n * This component extends Angular Material's [mat-form-field](https://material.angular.io/components/form-field) and provides two additional appearances\n * `bound` and `detach`. `bound` renders the label outside the outlined area of the field, while `detach` remove the borders all together. `detach`\n * is generally used with form controls that render their own borders.\n */\n@Component({\n\tselector: 'bui-form-field',\n\texportAs: 'buiFormField',\n\ttemplateUrl: 'form-field.component.html',\n\tstyleUrls: ['./form-field.component.scss'],\n\tanimations: [matFormFieldAnimations.transitionMessages],\n\thost: {\n\t\tclass: 'mat-form-field bui-form-field',\n\t\t'[class.mat-form-field-appearance-standard]': 'appearance == \"standard\"',\n\t\t'[class.mat-form-field-appearance-fill]': 'appearance == \"fill\"',\n\t\t'[class.mat-form-field-appearance-outline]': 'appearance == \"outline\"',\n\t\t'[class.mat-form-field-appearance-detach]': 'appearance == \"detach\"',\n\t\t'[class.mat-form-field-appearance-bound]': 'appearance == \"bound\"',\n\t\t'[class.mat-form-field-appearance-legacy]': 'appearance == \"legacy\"',\n\t\t'[class.mat-form-field-invalid]': '_control.errorState',\n\t\t'[class.mat-form-field-can-float]': '_canLabelFloat()',\n\t\t'[class.mat-form-field-should-float]': '_shouldLabelFloat()',\n\t\t'[class.mat-form-field-has-label]': '_hasFloatingLabel()',\n\t\t'[class.mat-form-field-hide-placeholder]': '_hideControlPlaceholder()',\n\t\t'[class.mat-form-field-disabled]': '_control.disabled',\n\t\t'[class.mat-form-field-autofilled]': '_control.autofilled',\n\t\t'[class.mat-focused]': '_control.focused',\n\t\t'[class.ng-untouched]': '_shouldForward(\"untouched\")',\n\t\t'[class.ng-touched]': '_shouldForward(\"touched\")',\n\t\t'[class.ng-pristine]': '_shouldForward(\"pristine\")',\n\t\t'[class.ng-dirty]': '_shouldForward(\"dirty\")',\n\t\t'[class.ng-valid]': '_shouldForward(\"valid\")',\n\t\t'[class.ng-invalid]': '_shouldForward(\"invalid\")',\n\t\t'[class.ng-pending]': '_shouldForward(\"pending\")',\n\t\t'[class._mat-animation-noopable]': '!_animationsEnabled'\n\t},\n\tinputs: ['color'],\n\tencapsulation: ViewEncapsulation.None,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\tproviders: [{ provide: MAT_FORM_FIELD, useExisting: forwardRef(() => FormFieldComponent) }]\n})\nexport class FormFieldComponent extends MatFormField {\n\t/**\n\t * @ignore\n\t */\n\t_shouldAlwaysFloat(): boolean {\n\t\treturn super._shouldAlwaysFloat() || this._enhancedAppearance();\n\t}\n\n\t/**\n\t * @ignore\n\t */\n\t_borderClass(): string {\n\t\tif ((this.appearance as any) !== 'bound') {\n\t\t\treturn 'bui-form-field-flex-default';\n\t\t}\n\t\tif (this._control.disabled) {\n\t\t\treturn 'bui-form-field-border-disabled';\n\t\t} else if (this._control.errorState) {\n\t\t\treturn 'bui-border-warn bui-form-field-border-thick';\n\t\t} else if (this._control.focused) {\n\t\t\treturn `bui-border-${this.color || 'primary'} bui-form-field-border-thick`;\n\t\t} else {\n\t\t\treturn 'bui-form-field-border-default bui-border-emphasis';\n\t\t}\n\t}\n\n\t/**\n\t * @ignore\n\t */\n\t_enhancedAppearance() {\n\t\treturn (this.appearance as any) === 'detach' || (this.appearance as any) === 'bound';\n\t}\n\n\t/** @ignore */\n\t@HostListener('click', ['$event'])\n\t_hostClicked(event: MouseEvent) {\n\t\tthis._control.onContainerClick && this._control.onContainerClick(event);\n\t}\n}\n\n(FormFieldComponent as any).ɵcmp.styles.push((MatFormField as any).ɵcmp.styles);\n","<div class=\"mat-form-field-wrapper\">\n\t<div class=\"mat-form-field-flex {{ _borderClass() }}\" #connectionContainer>\n\t\t<!-- Outline used for outline appearance. -->\n\t\t<ng-container *ngIf=\"appearance == 'outline'\">\n\t\t\t<div class=\"mat-form-field-outline\">\n\t\t\t\t<div class=\"mat-form-field-outline-start\"></div>\n\t\t\t\t<div class=\"mat-form-field-outline-gap\"></div>\n\t\t\t\t<div class=\"mat-form-field-outline-end\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"mat-form-field-outline mat-form-field-outline-thick\">\n\t\t\t\t<div class=\"mat-form-field-outline-start\"></div>\n\t\t\t\t<div class=\"mat-form-field-outline-gap\"></div>\n\t\t\t\t<div class=\"mat-form-field-outline-end\"></div>\n\t\t\t</div>\n\t\t</ng-container>\n\n\t\t<div class=\"mat-form-field-prefix\" *ngIf=\"_prefixChildren.length\">\n\t\t\t<ng-content select=\"[matPrefix]\"></ng-content>\n\t\t</div>\n\n\t\t<div class=\"{{ _enhancedAppearance() ? 'bui-form-field-infix' : 'mat-form-field-infix' }}\" #inputContainer>\n\t\t\t<ng-content></ng-content>\n\n\t\t\t<span class=\"mat-form-field-label-wrapper\">\n\t\t\t\t<!-- We add aria-owns as a workaround for an issue in JAWS & NVDA where the label isn't\n\t\t\t   read if it comes before the control in the DOM. -->\n\t\t\t\t<label\n\t\t\t\t\tclass=\"mat-form-field-label\"\n\t\t\t\t\t(cdkObserveContent)=\"updateOutlineGap()\"\n\t\t\t\t\t[cdkObserveContentDisabled]=\"appearance != 'outline'\"\n\t\t\t\t\t[id]=\"_labelId\"\n\t\t\t\t\t[attr.for]=\"_control.id\"\n\t\t\t\t\t[attr.aria-owns]=\"_control.id\"\n\t\t\t\t\t[class.mat-empty]=\"_control.empty && !_shouldAlwaysFloat()\"\n\t\t\t\t\t[class.mat-form-field-empty]=\"_control.empty && !_shouldAlwaysFloat()\"\n\t\t\t\t\t[class.mat-accent]=\"color == 'accent'\"\n\t\t\t\t\t[class.mat-warn]=\"color == 'warn'\"\n\t\t\t\t\t#label\n\t\t\t\t\t*ngIf=\"_hasFloatingLabel()\"\n\t\t\t\t\t[ngSwitch]=\"_hasLabel()\"\n\t\t\t\t>\n\t\t\t\t\t<!-- @breaking-change 8.0.0 remove in favor of mat-label element an placeholder attr. -->\n\t\t\t\t\t<ng-container *ngSwitchCase=\"false\">\n\t\t\t\t\t\t<ng-content select=\"mat-placeholder\"></ng-content>\n\t\t\t\t\t\t<span>{{ _control.placeholder }}</span>\n\t\t\t\t\t</ng-container>\n\n\t\t\t\t\t<ng-content select=\"mat-label\" *ngSwitchCase=\"true\"></ng-content>\n\n\t\t\t\t\t<!-- @breaking-change 8.0.0 remove `mat-placeholder-required` class -->\n\t\t\t\t\t<span\n\t\t\t\t\t\tclass=\"mat-placeholder-required mat-form-field-required-marker\"\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t*ngIf=\"!hideRequiredMarker && _control.required && !_control.disabled\"\n\t\t\t\t\t\t>&#32;*</span\n\t\t\t\t\t>\n\t\t\t\t</label>\n\t\t\t</span>\n\t\t</div>\n\n\t\t<div class=\"mat-form-field-suffix\" *ngIf=\"_suffixChildren.length\">\n\t\t\t<ng-content select=\"[matSuffix]\"></ng-content>\n\t\t</div>\n\t\t<div *ngIf=\"_enhancedAppearance()\" class=\"bui-form-field-right-filler\"></div>\n\t</div>\n\n\t<!-- Underline used for legacy, standard, and box appearances. -->\n\t<div class=\"mat-form-field-underline\" #underline *ngIf=\"appearance != 'outline'\">\n\t\t<span\n\t\t\tclass=\"mat-form-field-ripple\"\n\t\t\t[class.mat-accent]=\"color == 'accent'\"\n\t\t\t[class.mat-warn]=\"color == 'warn'\"\n\t\t></span>\n\t</div>\n\n\t<div class=\"mat-form-field-subscript-wrapper\" [ngSwitch]=\"_getDisplayedMessages()\" (click)=\"$event.stopPropagation()\">\n\t\t<div *ngSwitchCase=\"'error'\" [@transitionMessages]=\"_subscriptAnimationState\">\n\t\t\t<ng-content select=\"mat-error\"></ng-content>\n\t\t</div>\n\n\t\t<div class=\"mat-form-field-hint-wrapper\" *ngSwitchCase=\"'hint'\" [@transitionMessages]=\"_subscriptAnimationState\">\n\t\t\t<!-- TODO(mmalerba): use an actual <mat-hint> once all selectors are switched to mat-* -->\n\t\t\t<div *ngIf=\"hintLabel\" [id]=\"_hintLabelId\" class=\"mat-hint\">{{ hintLabel }}</div>\n\t\t\t<ng-content select=\"mat-hint:not([align='end'])\"></ng-content>\n\t\t\t<div class=\"mat-form-field-hint-spacer\"></div>\n\t\t\t<ng-content select=\"mat-hint[align='end']\"></ng-content>\n\t\t</div>\n\t</div>\n</div>\n","import { ObserversModule } from '@angular/cdk/observers';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { FormFieldComponent } from './form-field.component';\n\n@NgModule({\n\tdeclarations: [FormFieldComponent],\n\timports: [CommonModule, MatFormFieldModule, ObserversModule],\n\texports: [FormFieldComponent, MatFormFieldModule]\n})\nexport class FormFieldModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2015/bravura-ui-radio-panel.js

@@ -92,16 +92,22 @@ class RadioPanelDirective extends MatRadioGroup {
     constructor(cd) {
         super(cd);
     }
+    /** @ignore */
+    ngOnChanges(changes) {
+        if (changes.color && this._radios) {
+            this._radios.forEach(item => item._markForCheck());
+        }
+    }
 }
 RadioPanelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: RadioPanelDirective, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-RadioPanelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.4", type: RadioPanelDirective, selector: "bui-radio-panel", host: { attributes: { "role": "radiogroup" }, classAttribute: "bui-radio-panel" }, providers: [
+RadioPanelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.4", type: RadioPanelDirective, selector: "bui-radio-panel", inputs: { color: "color" }, host: { attributes: { "role": "radiogroup" }, classAttribute: "bui-radio-panel" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => RadioPanelDirective),
             multi: true
         },
         { provide: MAT_RADIO_GROUP, useExisting: forwardRef(() => RadioPanelDirective) }
-    ], queries: [{ propertyName: "_radios", predicate: RadioPanelItemComponent, descendants: true }], exportAs: ["buiRadioPanel"], usesInheritance: true, ngImport: i0 });
+    ], queries: [{ propertyName: "_radios", predicate: RadioPanelItemComponent, descendants: true }], exportAs: ["buiRadioPanel"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: RadioPanelDirective, decorators: [{
             type: Directive,
             args: [{
@@ -122,7 +128,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImpor
                         class: 'bui-radio-panel'
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { _radios: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { color: [{
+                type: Input
+            }], _radios: [{
                 type: ContentChildren,
                 args: [RadioPanelItemComponent, { descendants: true }]
             }] } });