@bravura/ui 1.5.0 → 1.6.0

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

@@ -1 +1 @@
-{"version":3,"file":"bravura-ui-radio-panel.js","sources":["../../../projects/ui/radio-panel/radio-panel-item.component.ts","../../../projects/ui/radio-panel/radio-panel-item.component.html","../../../projects/ui/radio-panel/radio-panel.directive.ts","../../../projects/ui/radio-panel/radio-panel.module.ts","../../../projects/ui/radio-panel/bravura-ui-radio-panel.ts"],"sourcesContent":["import { FocusMonitor } from '@angular/cdk/a11y';\nimport { UniqueSelectionDispatcher } from '@angular/cdk/collections';\nimport {\n\tAttribute,\n\tChangeDetectionStrategy,\n\tChangeDetectorRef,\n\tComponent,\n\tElementRef,\n\tInject,\n\tInput,\n\tOptional\n} from '@angular/core';\nimport {\n\tMatRadioButton,\n\tMatRadioDefaultOptions,\n\tMatRadioGroup,\n\tMAT_RADIO_DEFAULT_OPTIONS,\n\tMAT_RADIO_GROUP\n} from '@angular/material/radio';\nimport { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';\n\n/**\n * Use `bui-radio-panel-item` instead of `mat-radio-button` in a `bui-radio-panel` to display an option.\n */\n@Component({\n\tselector: 'bui-radio-panel-item',\n\ttemplateUrl: './radio-panel-item.component.html',\n\tstyleUrls: ['./radio-panel-item.component.scss'],\n\t// tslint:disable-next-line: no-inputs-metadata-property\n\tinputs: ['disableRipple', 'tabIndex'],\n\texportAs: 'matRadioButton',\n\t// tslint:disable-next-line: no-host-metadata-property\n\thost: {\n\t\tclass: 'bui-radio-panel-item',\n\t\t'[class.bui-radio-checked]': 'checked',\n\t\t'[class.bui-disabled]': 'disabled',\n\t\t'[class._mat-animation-noopable]': '_noopAnimations',\n\t\t'[class.mat-primary]': 'color === \"primary\"',\n\t\t'[class.mat-accent]': 'color === \"accent\"',\n\t\t'[class.mat-warn]': 'color === \"warn\"',\n\t\t// Needs to be removed since it causes some a11y issues (see #21266).\n\t\t'[attr.tabindex]': 'null',\n\t\t'[attr.id]': 'id',\n\t\t'[attr.aria-label]': 'null',\n\t\t'[attr.aria-labelledby]': 'null',\n\t\t'[attr.aria-describedby]': 'null',\n\t\t// Note: under normal conditions focus shouldn't land on this element, however it may be\n\t\t// programmatically set, for example inside of a focus trap, in this case we want to forward\n\t\t// the focus to the native element.\n\t\t'(focus)': '_inputElement.nativeElement.focus()'\n\t},\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class RadioPanelItemComponent extends MatRadioButton {\n\t/**\n\t * This will be displayed as the panel header\n\t */\n\t@Input()\n\ttitle = '';\n\n\tconstructor(\n\t\t@Optional() @Inject(MAT_RADIO_GROUP) radioGroup: MatRadioGroup,\n\t\telementRef: ElementRef,\n\t\t_changeDetector: ChangeDetectorRef,\n\t\t_focusMonitor: FocusMonitor,\n\t\t_radioDispatcher: UniqueSelectionDispatcher,\n\t\t@Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string,\n\t\t@Optional()\n\t\t@Inject(MAT_RADIO_DEFAULT_OPTIONS)\n\t\t_providerOverride?: MatRadioDefaultOptions,\n\t\t@Attribute('tabindex') tabIndex?: string\n\t) {\n\t\tsuper(\n\t\t\tradioGroup,\n\t\t\telementRef,\n\t\t\t_changeDetector,\n\t\t\t_focusMonitor,\n\t\t\t_radioDispatcher,\n\t\t\tanimationMode,\n\t\t\t_providerOverride,\n\t\t\ttabIndex\n\t\t);\n\t}\n}\n","<label [attr.for]=\"inputId\" #label class=\"bui-radio-panel-item-label bui-border-{{ checked ? color : 'default' }}\">\n\t<div class=\"bui-radio-panel-item-wrapper\">\n\t\t<div matRipple matRippleColor=\"rgba(128,128,128,.1)\" class=\"bui-ripple\" *ngIf=\"!disabled\"></div>\n\t\t<div class=\"bui-label-header\">\n\t\t\t<span class=\"bui-label-title\" [innerHTML]=\"title\"></span>\n\t\t\t<span class=\"bui-radio-panel-item-circle\">\n\t\t\t\t<span class=\"bui-persistent-ripple\"></span>\n\t\t\t\t<mat-icon [color]=\"color\" *ngIf=\"checked\">check_circle</mat-icon>\n\t\t\t\t<mat-icon *ngIf=\"!checked\" class=\"bui-radio-panel-item-circle-unchecked\">radio_button_unchecked</mat-icon>\n\t\t\t</span>\n\t\t</div>\n\t\t<!-- The actual 'radio' part of the control. -->\n\t\t<span class=\"radio-container\">\n\t\t\t<input\n\t\t\t\t#input\n\t\t\t\tclass=\"mat-radio-input cdk-visually-hidden\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\t[id]=\"inputId\"\n\t\t\t\t[checked]=\"checked\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[tabIndex]=\"tabIndex\"\n\t\t\t\t[attr.name]=\"name\"\n\t\t\t\t[attr.value]=\"value\"\n\t\t\t\t[required]=\"required\"\n\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t\t\t\t[attr.aria-describedby]=\"ariaDescribedby\"\n\t\t\t\t(change)=\"_onInputInteraction($event)\"\n\t\t\t\t(click)=\"_onInputClick($event)\"\n\t\t\t/>\n\t\t</span>\n\n\t\t<div class=\"bui-label-content-gap\"></div>\n\t\t<!-- The label content for radio control. -->\n\t\t<div class=\"bui-label-content\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t</div>\n</label>\n","import { ChangeDetectorRef, ContentChildren, Directive, forwardRef, QueryList } from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { MatRadioGroup, MAT_RADIO_GROUP } from '@angular/material/radio';\nimport { RadioPanelItemComponent } from './radio-panel-item.component';\n/**\n * Radio panel is a [control value accessor](https://angular.io/api/forms/ControlValueAccessor)\n * that extends Angular Material's [radio group component](https://material.angular.io/components/radio/overview).\n * It inherits all the features of `MatRadioGroup`, and arranges the child items in panels,\n * with the `title` attributes rendered as captions. The check box icon and the borders will be displayed\n * in the color selected by the theme attribute `color`.\n *\n */\n@Directive({\n\t// tslint:disable-next-line: directive-selector\n\tselector: 'bui-radio-panel',\n\texportAs: 'buiRadioPanel',\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: forwardRef(() => RadioPanelDirective),\n\t\t\tmulti: true\n\t\t},\n\t\t{ provide: MAT_RADIO_GROUP, useExisting: forwardRef(() => RadioPanelDirective) }\n\t],\n\t// tslint:disable-next-line: no-host-metadata-property\n\thost: {\n\t\trole: 'radiogroup',\n\t\tclass: 'bui-radio-panel'\n\t}\n})\nexport class RadioPanelDirective extends MatRadioGroup {\n\t/**\n\t * @ignore\n\t */\n\t@ContentChildren(RadioPanelItemComponent, { descendants: true })\n\t_radios!: QueryList<RadioPanelItemComponent>;\n\n\tconstructor(cd: ChangeDetectorRef) {\n\t\tsuper(cd);\n\t}\n}\n","import { RadioPanelItemComponent } from './radio-panel-item.component';\nimport { RadioPanelDirective } from './radio-panel.directive';\nimport { MatRippleModule } from '@angular/material/core';\nimport { MatRadioModule } from '@angular/material/radio';\nimport { MatIconModule } from '@angular/material/icon';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\n/**\n * Import this NgModule for the radio panel component\n */\n@NgModule({\n\tdeclarations: [RadioPanelItemComponent, RadioPanelDirective],\n\timports: [CommonModule, MatRadioModule, MatRippleModule, MatIconModule],\n\texports: [RadioPanelItemComponent, RadioPanelDirective]\n})\nexport class RadioPanelModule {}\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-radio-panel.js","sources":["../../../projects/ui/radio-panel/radio-panel-item.component.ts","../../../projects/ui/radio-panel/radio-panel-item.component.html","../../../projects/ui/radio-panel/radio-panel.directive.ts","../../../projects/ui/radio-panel/radio-panel.module.ts","../../../projects/ui/radio-panel/bravura-ui-radio-panel.ts"],"sourcesContent":["import { FocusMonitor } from '@angular/cdk/a11y';\nimport { UniqueSelectionDispatcher } from '@angular/cdk/collections';\nimport {\n\tAttribute,\n\tChangeDetectionStrategy,\n\tChangeDetectorRef,\n\tComponent,\n\tElementRef,\n\tInject,\n\tInput,\n\tOptional\n} from '@angular/core';\nimport {\n\tMatRadioButton,\n\tMatRadioDefaultOptions,\n\tMatRadioGroup,\n\tMAT_RADIO_DEFAULT_OPTIONS,\n\tMAT_RADIO_GROUP\n} from '@angular/material/radio';\nimport { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';\n\n/**\n * Use `bui-radio-panel-item` instead of `mat-radio-button` in a `bui-radio-panel` to display an option.\n */\n@Component({\n\tselector: 'bui-radio-panel-item',\n\ttemplateUrl: './radio-panel-item.component.html',\n\tstyleUrls: ['./radio-panel-item.component.scss'],\n\t// tslint:disable-next-line: no-inputs-metadata-property\n\tinputs: ['disableRipple', 'tabIndex'],\n\texportAs: 'matRadioButton',\n\t// tslint:disable-next-line: no-host-metadata-property\n\thost: {\n\t\tclass: 'bui-radio-panel-item',\n\t\t'[class.bui-radio-checked]': 'checked',\n\t\t'[class.bui-disabled]': 'disabled',\n\t\t'[class._mat-animation-noopable]': '_noopAnimations',\n\t\t'[class.mat-primary]': 'color === \"primary\"',\n\t\t'[class.mat-accent]': 'color === \"accent\"',\n\t\t'[class.mat-warn]': 'color === \"warn\"',\n\t\t// Needs to be removed since it causes some a11y issues (see #21266).\n\t\t'[attr.tabindex]': 'null',\n\t\t'[attr.id]': 'id',\n\t\t'[attr.aria-label]': 'null',\n\t\t'[attr.aria-labelledby]': 'null',\n\t\t'[attr.aria-describedby]': 'null',\n\t\t// Note: under normal conditions focus shouldn't land on this element, however it may be\n\t\t// programmatically set, for example inside of a focus trap, in this case we want to forward\n\t\t// the focus to the native element.\n\t\t'(focus)': '_inputElement.nativeElement.focus()'\n\t},\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class RadioPanelItemComponent extends MatRadioButton {\n\t/**\n\t * This will be displayed as the panel header\n\t */\n\t@Input()\n\ttitle = '';\n\n\tconstructor(\n\t\t@Optional() @Inject(MAT_RADIO_GROUP) radioGroup: MatRadioGroup,\n\t\telementRef: ElementRef,\n\t\t_changeDetector: ChangeDetectorRef,\n\t\t_focusMonitor: FocusMonitor,\n\t\t_radioDispatcher: UniqueSelectionDispatcher,\n\t\t@Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string,\n\t\t@Optional()\n\t\t@Inject(MAT_RADIO_DEFAULT_OPTIONS)\n\t\t_providerOverride?: MatRadioDefaultOptions,\n\t\t@Attribute('tabindex') tabIndex?: string\n\t) {\n\t\tsuper(\n\t\t\tradioGroup,\n\t\t\telementRef,\n\t\t\t_changeDetector,\n\t\t\t_focusMonitor,\n\t\t\t_radioDispatcher,\n\t\t\tanimationMode,\n\t\t\t_providerOverride,\n\t\t\ttabIndex\n\t\t);\n\t}\n}\n","<label [attr.for]=\"inputId\" #label class=\"bui-radio-panel-item-label bui-border-{{ checked ? color : 'default' }}\">\n\t<div class=\"bui-radio-panel-item-wrapper\">\n\t\t<div matRipple matRippleColor=\"rgba(128,128,128,.1)\" class=\"bui-ripple\" *ngIf=\"!disabled\"></div>\n\t\t<div class=\"bui-label-header\">\n\t\t\t<span class=\"bui-label-title\" [innerHTML]=\"title\"></span>\n\t\t\t<span class=\"bui-radio-panel-item-circle\">\n\t\t\t\t<span class=\"bui-persistent-ripple\"></span>\n\t\t\t\t<mat-icon [color]=\"color\" *ngIf=\"checked\">check_circle</mat-icon>\n\t\t\t\t<mat-icon *ngIf=\"!checked\" class=\"bui-radio-panel-item-circle-unchecked\">radio_button_unchecked</mat-icon>\n\t\t\t</span>\n\t\t</div>\n\t\t<!-- The actual 'radio' part of the control. -->\n\t\t<span class=\"radio-container\">\n\t\t\t<input\n\t\t\t\t#input\n\t\t\t\tclass=\"mat-radio-input cdk-visually-hidden\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\t[id]=\"inputId\"\n\t\t\t\t[checked]=\"checked\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[tabIndex]=\"tabIndex\"\n\t\t\t\t[attr.name]=\"name\"\n\t\t\t\t[attr.value]=\"value\"\n\t\t\t\t[required]=\"required\"\n\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t\t\t\t[attr.aria-describedby]=\"ariaDescribedby\"\n\t\t\t\t(change)=\"_onInputInteraction($event)\"\n\t\t\t\t(click)=\"_onInputClick($event)\"\n\t\t\t/>\n\t\t</span>\n\n\t\t<div class=\"bui-label-content-gap\"></div>\n\t\t<!-- The label content for radio control. -->\n\t\t<div class=\"bui-label-content\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t</div>\n</label>\n","import {\n\tChangeDetectorRef,\n\tContentChildren,\n\tDirective,\n\tforwardRef,\n\tInput,\n\tOnChanges,\n\tQueryList,\n\tSimpleChanges\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { ThemePalette } from '@angular/material/core';\nimport { MatRadioGroup, MAT_RADIO_GROUP } from '@angular/material/radio';\nimport { RadioPanelItemComponent } from './radio-panel-item.component';\n/**\n * Radio panel is a [control value accessor](https://angular.io/api/forms/ControlValueAccessor)\n * that extends Angular Material's [radio group component](https://material.angular.io/components/radio/overview).\n * It inherits all the features of `MatRadioGroup`, and arranges the child items in panels,\n * with the `title` attributes rendered as captions. The check box icon and the borders will be displayed\n * in the color selected by the theme attribute `color`.\n *\n */\n@Directive({\n\t// tslint:disable-next-line: directive-selector\n\tselector: 'bui-radio-panel',\n\texportAs: 'buiRadioPanel',\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: forwardRef(() => RadioPanelDirective),\n\t\t\tmulti: true\n\t\t},\n\t\t{ provide: MAT_RADIO_GROUP, useExisting: forwardRef(() => RadioPanelDirective) }\n\t],\n\t// tslint:disable-next-line: no-host-metadata-property\n\thost: {\n\t\trole: 'radiogroup',\n\t\tclass: 'bui-radio-panel'\n\t}\n})\nexport class RadioPanelDirective extends MatRadioGroup implements OnChanges {\n\t/** Theme color for all of the radio panels in the group. */\n\t@Input() color: ThemePalette;\n\n\t/**\n\t * @ignore\n\t */\n\t@ContentChildren(RadioPanelItemComponent, { descendants: true })\n\t_radios!: QueryList<RadioPanelItemComponent>;\n\n\tconstructor(cd: ChangeDetectorRef) {\n\t\tsuper(cd);\n\t}\n\n\t/** @ignore */\n\tngOnChanges(changes: SimpleChanges): void {\n\t\tif (changes.color && this._radios) {\n\t\t\tthis._radios.forEach(item => item._markForCheck());\n\t\t}\n\t}\n}\n","import { RadioPanelItemComponent } from './radio-panel-item.component';\nimport { RadioPanelDirective } from './radio-panel.directive';\nimport { MatRippleModule } from '@angular/material/core';\nimport { MatRadioModule } from '@angular/material/radio';\nimport { MatIconModule } from '@angular/material/icon';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\n/**\n * Import this NgModule for the radio panel component\n */\n@NgModule({\n\tdeclarations: [RadioPanelItemComponent, RadioPanelDirective],\n\timports: [CommonModule, MatRadioModule, MatRippleModule, MatIconModule],\n\texports: [RadioPanelItemComponent, RadioPanelDirective]\n})\nexport class RadioPanelModule {}\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-selection-panel.js

@@ -1,12 +1,12 @@
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { InjectionToken, Component, ChangeDetectionStrategy, Inject, Input, forwardRef, Directive, ContentChildren, NgModule } from '@angular/core';
+import { InjectionToken, Component, ChangeDetectionStrategy, Inject, Input, ViewChild, forwardRef, Directive, ContentChildren, NgModule } from '@angular/core';
+import * as i3 from '@angular/material/core';
+import { MatRipple, MatRippleModule } from '@angular/material/core';
 import * as i1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from '@angular/material/core';
-import { MatRippleModule } from '@angular/material/core';
 import * as i4 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 
@@ -63,6 +63,9 @@ class SelectionPanelItemComponent {
     set color(newValue) {
         this._color = newValue;
     }
+    get _selectByHeader() {
+        return this._group.selectByHeader;
+    }
     /** @ignore */
     _markInteracted() {
         this._group._onTouched();
@@ -71,6 +74,18 @@ class SelectionPanelItemComponent {
     _notify() {
         this._cd.markForCheck();
     }
+    /** Toggle selection programmatically */
+    toggle() {
+        this.checked = !this.checked;
+    }
+    /** @ignore */
+    _contentClicked(event) {
+        var _a;
+        if (!this._selectByHeader) {
+            (_a = this._ripple) === null || _a === void 0 ? void 0 : _a.launch(event.clientX, event.clientY);
+            this.toggle();
+        }
+    }
     /** Sets the disabled state and marks for check if a change occurred. */
     _setDisabled(value) {
         if (this._disabled !== value) {
@@ -96,7 +111,7 @@ class SelectionPanelItemComponent {
     }
 }
 SelectionPanelItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: SelectionPanelItemComponent, deps: [{ token: SELECTION_PANEL_GROUP }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SelectionPanelItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: SelectionPanelItemComponent, selector: "bui-selection-panel-item", inputs: { title: "title", disabled: "disabled", value: "value", checked: "checked", color: "color" }, host: { properties: { "class.bui-selection-checked": "checked", "class.bui-border-accent": "checked && color ==='accent'", "class.bui-border-primary": "checked && color ==='primary'", "class.bui-border-warn": "checked && color ==='warn'", "class.bui-disabled": "disabled" }, classAttribute: "bui-selection-panel-item" }, ngImport: i0, template: "<div class=\"bui-selection-panel-item-wrapper\">\n\t<div\n\t\tmatRipple\n\t\tmatRippleColor=\"rgba(128,128,128,.1)\"\n\t\tclass=\"bui-ripple\"\n\t\t*ngIf=\"!disabled\"\n\t\t[matRippleTrigger]=\"toggleTrigger\"\n\t></div>\n\t<div class=\"bui-selection-panel-item-header\" #toggleTrigger>\n\t\t<mat-checkbox [(ngModel)]=\"checked\" [color]=\"color\" [disabled]=\"disabled\" (change)=\"_markInteracted()\">\n\t\t\t<div class=\"bui-selection-panel-item-title\" [innerHTML]=\"title\"></div>\n\t\t</mat-checkbox>\n\t</div>\n\n\t<div class=\"bui-selection-panel-item-content\">\n\t\t<ng-content></ng-content>\n\t</div>\n\t<div class=\"bui-selection-panel-item-bottom\"></div>\n</div>\n", styles: [":host{position:relative;border-radius:5px;border:1px solid rgba(128,128,128,.2);padding:1px}:host .bui-selection-panel-item-wrapper{padding-left:1rem;padding-right:1rem}:host .bui-ripple{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1}:host .bui-selection-panel-item-header{margin-top:calc(1rem - 4px);margin-bottom:calc(1rem - 4px)}:host .bui-selection-panel-item-title{font-size:larger;font-weight:bold;white-space:normal;margin-top:2px}:host .bui-selection-panel-item-content{margin-top:1rem;margin-bottom:1rem}:host(:not(:first-child)){margin-top:1rem}:host(:not([hidden])){display:block}:host(:not(.bui-disabled)):hover{border-width:2px;padding:0;border-color:#8080804d}\n"], components: [{ type: i1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleRadius", "matRippleDisabled", "matRippleTrigger", "matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleAnimation"], exportAs: ["matRipple"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SelectionPanelItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: SelectionPanelItemComponent, selector: "bui-selection-panel-item", inputs: { title: "title", disabled: "disabled", value: "value", checked: "checked", color: "color" }, host: { properties: { "class.bui-selection-checked": "checked", "class.bui-border-accent": "checked && color ==='accent'", "class.bui-border-primary": "checked && color ==='primary'", "class.bui-border-warn": "checked && color ==='warn'", "class.bui-disabled": "disabled" }, classAttribute: "bui-selection-panel-item" }, viewQueries: [{ propertyName: "_ripple", first: true, predicate: MatRipple, descendants: true }], ngImport: i0, template: "<div class=\"bui-selection-panel-item-wrapper\">\n\t<div\n\t\tmatRipple\n\t\tmatRippleColor=\"rgba(128,128,128,.1)\"\n\t\tclass=\"bui-ripple\"\n\t\t*ngIf=\"!disabled\"\n\t\t[matRippleTrigger]=\"toggleTrigger\"\n\t\t#ripple=\"matRipple\"\n\t></div>\n\t<div class=\"bui-selection-panel-item-header\" #toggleTrigger>\n\t\t<mat-checkbox [(ngModel)]=\"checked\" [color]=\"color\" [disabled]=\"disabled\" (change)=\"_markInteracted()\">\n\t\t\t<div class=\"bui-selection-panel-item-title\" [innerHTML]=\"title\"></div>\n\t\t</mat-checkbox>\n\t</div>\n\n\t<div\n\t\tclass=\"bui-selection-panel-item-content\"\n\t\t[class.bui-selectable]=\"!_selectByHeader\"\n\t\t(click)=\"_contentClicked($event)\"\n\t>\n\t\t<ng-content></ng-content>\n\t</div>\n\t<div class=\"bui-selection-panel-item-bottom\"></div>\n</div>\n", styles: [":host{position:relative;border-radius:5px;border:1px solid rgba(128,128,128,.2);padding:1px}:host .bui-selection-panel-item-wrapper{padding-left:1rem;padding-right:1rem}:host .bui-ripple{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1}:host .bui-selection-panel-item-header{margin-top:calc(1rem - 4px);margin-bottom:calc(1rem - 4px)}:host .bui-selection-panel-item-title{font-size:larger;font-weight:bold;white-space:normal;margin-top:2px}:host .bui-selection-panel-item-content{margin-top:1rem;margin-bottom:1rem}:host(:not(:first-child)){margin-top:1rem}:host(:not([hidden])){display:block}:host(:not(.bui-disabled)):hover{border-width:2px;padding:0;border-color:#8080804d}:host(:not(.bui-disabled)) .bui-selection-panel-item-content.bui-selectable{cursor:pointer}\n"], components: [{ type: i1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleRadius", "matRippleDisabled", "matRippleTrigger", "matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleAnimation"], exportAs: ["matRipple"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: SelectionPanelItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -126,6 +141,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImpor
                 type: Input
             }], color: [{
                 type: Input
+            }], _ripple: [{
+                type: ViewChild,
+                args: [MatRipple]
             }] } });
 
 /**
@@ -146,6 +164,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImpor
 class SelectionPanelDirective {
     constructor(_cd) {
         this._cd = _cd;
+        /**
+         * When set to `false`, the selection is triggered by click everywhere within the panels that is
+         * not focus-trapping; otherwise, only clicking on the header will activate the selection.
+         *
+         * @default true
+         */
+        this.selectByHeader = true;
         /** @ignore */
         this._isDisabled = false;
         this._selected = [];
@@ -201,12 +226,20 @@ class SelectionPanelDirective {
             this._items.forEach(it => it._notify());
         }
     }
+    /** @ignore */
+    ngOnChanges(changes) {
+        if (this._items) {
+            if (changes.color || changes.selectByHeader) {
+                this._items.forEach(item => item._notify());
+            }
+        }
+    }
 }
 SelectionPanelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: SelectionPanelDirective, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-SelectionPanelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.4", type: SelectionPanelDirective, selector: "bui-selection-panel", inputs: { color: "color" }, providers: [
+SelectionPanelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.4", type: SelectionPanelDirective, selector: "bui-selection-panel", inputs: { color: "color", selectByHeader: "selectByHeader" }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SelectionPanelDirective), multi: true },
         { provide: SELECTION_PANEL_GROUP, useExisting: forwardRef(() => SelectionPanelDirective) }
-    ], queries: [{ propertyName: "_items", predicate: SelectionPanelItemComponent, descendants: true }], exportAs: ["buiSelectionPanel"], ngImport: i0 });
+    ], queries: [{ propertyName: "_items", predicate: SelectionPanelItemComponent, descendants: true }], exportAs: ["buiSelectionPanel"], usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: SelectionPanelDirective, decorators: [{
             type: Directive,
             args: [{
@@ -219,6 +252,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { color: [{
                 type: Input
+            }], selectByHeader: [{
+                type: Input
             }], _items: [{
                 type: ContentChildren,
                 args: [SelectionPanelItemComponent, { descendants: true }]

package/fesm2015/bravura-ui-selection-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"bravura-ui-selection-panel.js","sources":["../../../projects/ui/selection-panel/selection-panel-item.component.ts","../../../projects/ui/selection-panel/selection-panel-item.component.html","../../../projects/ui/selection-panel/selection-panel.directive.ts","../../../projects/ui/selection-panel/selection-panel.module.ts","../../../projects/ui/selection-panel/bravura-ui-selection-panel.ts"],"sourcesContent":["import { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, InjectionToken, Input } from '@angular/core';\nimport { ThemePalette } from '@angular/material/core';\n\n/**\n * @ignore\n */\nexport interface SelectionPanelItemGroup {\n\t_selection: any[];\n\tcolor: ThemePalette;\n\t_isDisabled: boolean;\n\t_onTouched: () => void;\n}\n\n/**\n * @ignore\n */\nexport const SELECTION_PANEL_GROUP = new InjectionToken<SelectionPanelItemGroup>('SelectionPanelItemGroup');\n\n/**\n * Use `bui-selection-panel-item` within a `bui-selection-panel` to display an option.\n */\n@Component({\n\tselector: 'bui-selection-panel-item',\n\ttemplateUrl: './selection-panel-item.component.html',\n\tstyleUrls: ['./selection-panel-item.component.scss'],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: {\n\t\tclass: 'bui-selection-panel-item',\n\t\t'[class.bui-selection-checked]': 'checked',\n\t\t'[class.bui-border-accent]': `checked && color ==='accent'`,\n\t\t'[class.bui-border-primary]': `checked && color ==='primary'`,\n\t\t'[class.bui-border-warn]': `checked && color ==='warn'`,\n\t\t'[class.bui-disabled]': 'disabled'\n\t}\n})\nexport class SelectionPanelItemComponent {\n\t/** @ignore */\n\tstatic ngAcceptInputType_disabled: boolean | string;\n\n\t/** @ignore */\n\tstatic ngAcceptInputType_checked: boolean | string;\n\n\t/**\n\t * This will be displayed as the panel header\n\t */\n\t@Input()\n\ttitle = '';\n\n\t/** Whether the option is disabled. */\n\t@Input()\n\tget disabled(): boolean {\n\t\treturn this._disabled || this._group._isDisabled;\n\t}\n\tset disabled(value: boolean) {\n\t\tthis._setDisabled(coerceBooleanProperty(value));\n\t}\n\n\t/** The value of this option. */\n\t@Input()\n\tget value(): any {\n\t\treturn this._value;\n\t}\n\tset value(value: any) {\n\t\tif (this._value !== value) {\n\t\t\tthis._value = value;\n\t\t\tthis._cd.markForCheck();\n\t\t}\n\t}\n\n\t/** Whether this option is checked. */\n\t@Input()\n\tget checked(): boolean {\n\t\treturn this._group._selection.includes(this.value);\n\t}\n\tset checked(value: boolean) {\n\t\tif (!this._group._onTouched) {\n\t\t\tsetTimeout(() => this._setChecked(value), 0);\n\t\t} else {\n\t\t\tthis._setChecked(value);\n\t\t}\n\t}\n\n\t/** Theme color of the radio button. */\n\t@Input()\n\tget color(): ThemePalette {\n\t\treturn this._color || this._group.color;\n\t}\n\tset color(newValue: ThemePalette) {\n\t\tthis._color = newValue;\n\t}\n\n\tprivate _color: ThemePalette;\n\tprivate _disabled = false;\n\tprivate _value: any;\n\n\tconstructor(@Inject(SELECTION_PANEL_GROUP) private _group: SelectionPanelItemGroup, private _cd: ChangeDetectorRef) {}\n\n\t/** @ignore */\n\t_markInteracted() {\n\t\tthis._group._onTouched();\n\t}\n\n\t/** @ignore */\n\t_notify() {\n\t\tthis._cd.markForCheck();\n\t}\n\n\t/** Sets the disabled state and marks for check if a change occurred. */\n\tprivate _setDisabled(value: boolean) {\n\t\tif (this._disabled !== value) {\n\t\t\tthis._disabled = value;\n\t\t\tthis._cd.markForCheck();\n\t\t}\n\t}\n\n\tprivate _setChecked(value: boolean) {\n\t\tconst newCheckedState = coerceBooleanProperty(value);\n\t\tconst old = this._group._selection.includes(this.value);\n\t\tif (old !== newCheckedState) {\n\t\t\tconst contained = this._group._selection.some(v => v === this._value);\n\t\t\tif (newCheckedState && this._group && !contained) {\n\t\t\t\tthis._group._selection = [...this._group._selection, this._value];\n\t\t\t} else if (!newCheckedState && this._group && contained) {\n\t\t\t\t// When unchecking the selected item, update the selection\n\t\t\t\t// property on the group.\n\t\t\t\tthis._group._selection = this._group._selection.filter(v => v !== this._value);\n\t\t\t}\n\t\t\tthis._cd.markForCheck();\n\t\t}\n\t}\n}\n","<div class=\"bui-selection-panel-item-wrapper\">\n\t<div\n\t\tmatRipple\n\t\tmatRippleColor=\"rgba(128,128,128,.1)\"\n\t\tclass=\"bui-ripple\"\n\t\t*ngIf=\"!disabled\"\n\t\t[matRippleTrigger]=\"toggleTrigger\"\n\t></div>\n\t<div class=\"bui-selection-panel-item-header\" #toggleTrigger>\n\t\t<mat-checkbox [(ngModel)]=\"checked\" [color]=\"color\" [disabled]=\"disabled\" (change)=\"_markInteracted()\">\n\t\t\t<div class=\"bui-selection-panel-item-title\" [innerHTML]=\"title\"></div>\n\t\t</mat-checkbox>\n\t</div>\n\n\t<div class=\"bui-selection-panel-item-content\">\n\t\t<ng-content></ng-content>\n\t</div>\n\t<div class=\"bui-selection-panel-item-bottom\"></div>\n</div>\n","import { ChangeDetectorRef, ContentChildren, Directive, forwardRef, Input, QueryList } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { ThemePalette } from '@angular/material/core';\nimport {\n\tSelectionPanelItemComponent,\n\tSelectionPanelItemGroup,\n\tSELECTION_PANEL_GROUP\n} from './selection-panel-item.component';\n\n/**\n * Selection panel is a [control value accessor](https://angular.io/api/forms/ControlValueAccessor)\n * that display a set of multi-selection items as bordered panels, in a similar fashion as Radio Panel `bui-radio-panel`.\n *\n * Accessibility features are not yet fully implemented.\n *\n * Example:\n *\n * ```html\n * <bui-selection-panel>\n *   <bui-selection-panel-item *ngFor=\"let obj of objects\" [value]=\"obj\">{{obj.description}}</bui-selection-panel-item>\n * </bui-selection-panel>\n * ```\n *\n */\n@Directive({\n\tselector: 'bui-selection-panel',\n\tproviders: [\n\t\t{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SelectionPanelDirective), multi: true },\n\t\t{ provide: SELECTION_PANEL_GROUP, useExisting: forwardRef(() => SelectionPanelDirective) }\n\t],\n\texportAs: 'buiSelectionPanel'\n})\nexport class SelectionPanelDirective implements ControlValueAccessor, SelectionPanelItemGroup {\n\t/** Theme color for all of the selection checkboxes in the group. */\n\t@Input() color: ThemePalette;\n\n\t/**\n\t * @ignore\n\t * The selected values. Used by the child elements to modify the group's value\n\t */\n\tget _selection(): any[] {\n\t\treturn this._selected;\n\t}\n\tset _selection(value: any[]) {\n\t\tif (value !== this._selected) {\n\t\t\tthis._selected = value;\n\t\t\tthis._onChange(this._selected);\n\t\t\tthis._cd.markForCheck();\n\t\t}\n\t}\n\n\t/** @ignore */\n\t_onTouched!: () => void;\n\n\t/** @ignore */\n\t_isDisabled = false;\n\n\tprivate _onChange!: (_: any) => void;\n\n\tprivate _selected: any[] = [];\n\n\t@ContentChildren(SelectionPanelItemComponent, { descendants: true })\n\tprivate _items!: QueryList<SelectionPanelItemComponent>;\n\n\tconstructor(private _cd: ChangeDetectorRef) {}\n\n\t/**\n\t * @ignore\n\t */\n\twriteValue(obj: any): void {\n\t\tthis._selected = [];\n\t\tif (Array.isArray(obj)) {\n\t\t\tthis._selected.push(...obj);\n\t\t} else if (obj !== null && obj !== undefined) {\n\t\t\tthis._selected.push(obj);\n\t\t}\n\t\tthis._items?.forEach(it => it._notify());\n\t}\n\n\t/**\n\t * @ignore\n\t */\n\tregisterOnChange(fn: (_: any) => void): void {\n\t\tthis._onChange = fn;\n\t}\n\n\t/**\n\t * @ignore\n\t */\n\tregisterOnTouched(fn: () => void): void {\n\t\tthis._onTouched = fn;\n\t}\n\n\t/**\n\t * Sets the disabled state and marks for check if a change occurred.\n\t * @ignore\n\t */\n\tsetDisabledState(isDisabled: boolean): void {\n\t\tif (this._isDisabled !== isDisabled) {\n\t\t\tthis._isDisabled = isDisabled;\n\t\t\tthis._cd.markForCheck();\n\t\t\tthis._items.forEach(it => it._notify());\n\t\t}\n\t}\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { SelectionPanelDirective } from './selection-panel.directive';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport { SelectionPanelItemComponent } from './selection-panel-item.component';\nimport { FormsModule } from '@angular/forms';\nimport { MatRippleModule } from '@angular/material/core';\n\n@NgModule({\n\tdeclarations: [SelectionPanelDirective, SelectionPanelItemComponent],\n\timports: [CommonModule, MatCheckboxModule, FormsModule, MatRippleModule]\n})\nexport class SelectionPanelModule {}\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-selection-panel.js","sources":["../../../projects/ui/selection-panel/selection-panel-item.component.ts","../../../projects/ui/selection-panel/selection-panel-item.component.html","../../../projects/ui/selection-panel/selection-panel.directive.ts","../../../projects/ui/selection-panel/selection-panel.module.ts","../../../projects/ui/selection-panel/bravura-ui-selection-panel.ts"],"sourcesContent":["import { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n\tChangeDetectionStrategy,\n\tChangeDetectorRef,\n\tComponent,\n\tInject,\n\tInjectionToken,\n\tInput,\n\tViewChild\n} from '@angular/core';\nimport { MatRipple, ThemePalette } from '@angular/material/core';\n\n/**\n * @ignore\n */\nexport interface SelectionPanelItemGroup {\n\t_selection: any[];\n\tcolor: ThemePalette;\n\t_isDisabled: boolean;\n\t_onTouched: () => void;\n\tselectByHeader: boolean;\n}\n\n/**\n * @ignore\n */\nexport const SELECTION_PANEL_GROUP = new InjectionToken<SelectionPanelItemGroup>('SelectionPanelItemGroup');\n\n/**\n * Use `bui-selection-panel-item` within a `bui-selection-panel` to display an option.\n */\n@Component({\n\tselector: 'bui-selection-panel-item',\n\ttemplateUrl: './selection-panel-item.component.html',\n\tstyleUrls: ['./selection-panel-item.component.scss'],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: {\n\t\tclass: 'bui-selection-panel-item',\n\t\t'[class.bui-selection-checked]': 'checked',\n\t\t'[class.bui-border-accent]': `checked && color ==='accent'`,\n\t\t'[class.bui-border-primary]': `checked && color ==='primary'`,\n\t\t'[class.bui-border-warn]': `checked && color ==='warn'`,\n\t\t'[class.bui-disabled]': 'disabled'\n\t}\n})\nexport class SelectionPanelItemComponent {\n\t/** @ignore */\n\tstatic ngAcceptInputType_disabled: boolean | string;\n\n\t/** @ignore */\n\tstatic ngAcceptInputType_checked: boolean | string;\n\n\t/**\n\t * This will be displayed as the panel header\n\t */\n\t@Input()\n\ttitle = '';\n\n\t/** Whether the option is disabled. */\n\t@Input()\n\tget disabled(): boolean {\n\t\treturn this._disabled || this._group._isDisabled;\n\t}\n\tset disabled(value: boolean) {\n\t\tthis._setDisabled(coerceBooleanProperty(value));\n\t}\n\n\t/** The value of this option. */\n\t@Input()\n\tget value(): any {\n\t\treturn this._value;\n\t}\n\tset value(value: any) {\n\t\tif (this._value !== value) {\n\t\t\tthis._value = value;\n\t\t\tthis._cd.markForCheck();\n\t\t}\n\t}\n\n\t/** Whether this option is checked. */\n\t@Input()\n\tget checked(): boolean {\n\t\treturn this._group._selection.includes(this.value);\n\t}\n\tset checked(value: boolean) {\n\t\tif (!this._group._onTouched) {\n\t\t\tsetTimeout(() => this._setChecked(value), 0);\n\t\t} else {\n\t\t\tthis._setChecked(value);\n\t\t}\n\t}\n\n\t/** Theme color of the radio button. */\n\t@Input()\n\tget color(): ThemePalette {\n\t\treturn this._color || this._group.color;\n\t}\n\tset color(newValue: ThemePalette) {\n\t\tthis._color = newValue;\n\t}\n\n\tget _selectByHeader(): boolean {\n\t\treturn this._group.selectByHeader;\n\t}\n\n\tprivate _color: ThemePalette;\n\tprivate _disabled = false;\n\tprivate _value: any;\n\n\t@ViewChild(MatRipple)\n\tprivate _ripple?: MatRipple;\n\n\tconstructor(@Inject(SELECTION_PANEL_GROUP) private _group: SelectionPanelItemGroup, private _cd: ChangeDetectorRef) {}\n\n\t/** @ignore */\n\t_markInteracted() {\n\t\tthis._group._onTouched();\n\t}\n\n\t/** @ignore */\n\t_notify() {\n\t\tthis._cd.markForCheck();\n\t}\n\n\t/** Toggle selection programmatically */\n\ttoggle() {\n\t\tthis.checked = !this.checked;\n\t}\n\n\t/** @ignore */\n\t_contentClicked(event: MouseEvent) {\n\t\tif (!this._selectByHeader) {\n\t\t\tthis._ripple?.launch(event.clientX, event.clientY);\n\t\t\tthis.toggle();\n\t\t}\n\t}\n\n\t/** Sets the disabled state and marks for check if a change occurred. */\n\tprivate _setDisabled(value: boolean) {\n\t\tif (this._disabled !== value) {\n\t\t\tthis._disabled = value;\n\t\t\tthis._cd.markForCheck();\n\t\t}\n\t}\n\n\tprivate _setChecked(value: boolean) {\n\t\tconst newCheckedState = coerceBooleanProperty(value);\n\t\tconst old = this._group._selection.includes(this.value);\n\t\tif (old !== newCheckedState) {\n\t\t\tconst contained = this._group._selection.some(v => v === this._value);\n\t\t\tif (newCheckedState && this._group && !contained) {\n\t\t\t\tthis._group._selection = [...this._group._selection, this._value];\n\t\t\t} else if (!newCheckedState && this._group && contained) {\n\t\t\t\t// When unchecking the selected item, update the selection\n\t\t\t\t// property on the group.\n\t\t\t\tthis._group._selection = this._group._selection.filter(v => v !== this._value);\n\t\t\t}\n\t\t\tthis._cd.markForCheck();\n\t\t}\n\t}\n}\n","<div class=\"bui-selection-panel-item-wrapper\">\n\t<div\n\t\tmatRipple\n\t\tmatRippleColor=\"rgba(128,128,128,.1)\"\n\t\tclass=\"bui-ripple\"\n\t\t*ngIf=\"!disabled\"\n\t\t[matRippleTrigger]=\"toggleTrigger\"\n\t\t#ripple=\"matRipple\"\n\t></div>\n\t<div class=\"bui-selection-panel-item-header\" #toggleTrigger>\n\t\t<mat-checkbox [(ngModel)]=\"checked\" [color]=\"color\" [disabled]=\"disabled\" (change)=\"_markInteracted()\">\n\t\t\t<div class=\"bui-selection-panel-item-title\" [innerHTML]=\"title\"></div>\n\t\t</mat-checkbox>\n\t</div>\n\n\t<div\n\t\tclass=\"bui-selection-panel-item-content\"\n\t\t[class.bui-selectable]=\"!_selectByHeader\"\n\t\t(click)=\"_contentClicked($event)\"\n\t>\n\t\t<ng-content></ng-content>\n\t</div>\n\t<div class=\"bui-selection-panel-item-bottom\"></div>\n</div>\n","import {\n\tChangeDetectorRef,\n\tContentChildren,\n\tDirective,\n\tforwardRef,\n\tInput,\n\tOnChanges,\n\tQueryList,\n\tSimpleChanges\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { ThemePalette } from '@angular/material/core';\nimport {\n\tSelectionPanelItemComponent,\n\tSelectionPanelItemGroup,\n\tSELECTION_PANEL_GROUP\n} from './selection-panel-item.component';\n\n/**\n * Selection panel is a [control value accessor](https://angular.io/api/forms/ControlValueAccessor)\n * that display a set of multi-selection items as bordered panels, in a similar fashion as Radio Panel `bui-radio-panel`.\n *\n * Accessibility features are not yet fully implemented.\n *\n * Example:\n *\n * ```html\n * <bui-selection-panel>\n *   <bui-selection-panel-item *ngFor=\"let obj of objects\" [value]=\"obj\">{{obj.description}}</bui-selection-panel-item>\n * </bui-selection-panel>\n * ```\n *\n */\n@Directive({\n\tselector: 'bui-selection-panel',\n\tproviders: [\n\t\t{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SelectionPanelDirective), multi: true },\n\t\t{ provide: SELECTION_PANEL_GROUP, useExisting: forwardRef(() => SelectionPanelDirective) }\n\t],\n\texportAs: 'buiSelectionPanel'\n})\nexport class SelectionPanelDirective implements ControlValueAccessor, SelectionPanelItemGroup, OnChanges {\n\t/** Theme color for all of the selection checkboxes in the group. */\n\t@Input() color: ThemePalette;\n\n\t/**\n\t * When set to `false`, the selection is triggered by click everywhere within the panels that is\n\t * not focus-trapping; otherwise, only clicking on the header will activate the selection.\n\t *\n\t * @default true\n\t */\n\t@Input() selectByHeader = true;\n\n\t/**\n\t * @ignore\n\t * The selected values. Used by the child elements to modify the group's value\n\t */\n\tget _selection(): any[] {\n\t\treturn this._selected;\n\t}\n\tset _selection(value: any[]) {\n\t\tif (value !== this._selected) {\n\t\t\tthis._selected = value;\n\t\t\tthis._onChange(this._selected);\n\t\t\tthis._cd.markForCheck();\n\t\t}\n\t}\n\n\t/** @ignore */\n\t_onTouched!: () => void;\n\n\t/** @ignore */\n\t_isDisabled = false;\n\n\tprivate _onChange!: (_: any) => void;\n\n\tprivate _selected: any[] = [];\n\n\t@ContentChildren(SelectionPanelItemComponent, { descendants: true })\n\tprivate _items!: QueryList<SelectionPanelItemComponent>;\n\n\tconstructor(private _cd: ChangeDetectorRef) {}\n\n\t/**\n\t * @ignore\n\t */\n\twriteValue(obj: any): void {\n\t\tthis._selected = [];\n\t\tif (Array.isArray(obj)) {\n\t\t\tthis._selected.push(...obj);\n\t\t} else if (obj !== null && obj !== undefined) {\n\t\t\tthis._selected.push(obj);\n\t\t}\n\t\tthis._items?.forEach(it => it._notify());\n\t}\n\n\t/**\n\t * @ignore\n\t */\n\tregisterOnChange(fn: (_: any) => void): void {\n\t\tthis._onChange = fn;\n\t}\n\n\t/**\n\t * @ignore\n\t */\n\tregisterOnTouched(fn: () => void): void {\n\t\tthis._onTouched = fn;\n\t}\n\n\t/**\n\t * Sets the disabled state and marks for check if a change occurred.\n\t * @ignore\n\t */\n\tsetDisabledState(isDisabled: boolean): void {\n\t\tif (this._isDisabled !== isDisabled) {\n\t\t\tthis._isDisabled = isDisabled;\n\t\t\tthis._cd.markForCheck();\n\t\t\tthis._items.forEach(it => it._notify());\n\t\t}\n\t}\n\n\t/** @ignore */\n\tngOnChanges(changes: SimpleChanges): void {\n\t\tif (this._items) {\n\t\t\tif (changes.color || changes.selectByHeader) {\n\t\t\t\tthis._items.forEach(item => item._notify());\n\t\t\t}\n\t\t}\n\t}\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { SelectionPanelDirective } from './selection-panel.directive';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport { SelectionPanelItemComponent } from './selection-panel-item.component';\nimport { FormsModule } from '@angular/forms';\nimport { MatRippleModule } from '@angular/material/core';\n\n@NgModule({\n\tdeclarations: [SelectionPanelDirective, SelectionPanelItemComponent],\n\timports: [CommonModule, MatCheckboxModule, FormsModule, MatRippleModule]\n})\nexport class SelectionPanelModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/form-field/form-field.component.d.ts

@@ -20,6 +20,8 @@ export declare class FormFieldComponent extends MatFormField {
      * @ignore
      */
     _enhancedAppearance(): boolean;
+    /** @ignore */
+    _hostClicked(event: MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FormFieldComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<FormFieldComponent, "bui-form-field", ["buiFormField"], { "color": "color"; }, {}, never, ["[matPrefix]", "*", "mat-placeholder", "mat-label", "[matSuffix]", "mat-error", "mat-hint:not([align='end'])", "mat-hint[align='end']"]>;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bravura/ui",
   "description": "Bravura UI Components for Angular applications",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "keywords": [
     "Angular",
     "Angular Material",

package/radio-panel/radio-panel.directive.d.ts

@@ -1,4 +1,5 @@
-import { ChangeDetectorRef, QueryList } from '@angular/core';
+import { ChangeDetectorRef, OnChanges, QueryList, SimpleChanges } from '@angular/core';
+import { ThemePalette } from '@angular/material/core';
 import { MatRadioGroup } from '@angular/material/radio';
 import { RadioPanelItemComponent } from './radio-panel-item.component';
 import * as i0 from "@angular/core";
@@ -10,12 +11,16 @@ import * as i0 from "@angular/core";
  * in the color selected by the theme attribute `color`.
  *
  */
-export declare class RadioPanelDirective extends MatRadioGroup {
+export declare class RadioPanelDirective extends MatRadioGroup implements OnChanges {
+    /** Theme color for all of the radio panels in the group. */
+    color: ThemePalette;
     /**
      * @ignore
      */
     _radios: QueryList<RadioPanelItemComponent>;
     constructor(cd: ChangeDetectorRef);
+    /** @ignore */
+    ngOnChanges(changes: SimpleChanges): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RadioPanelDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RadioPanelDirective, "bui-radio-panel", ["buiRadioPanel"], {}, {}, ["_radios"]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RadioPanelDirective, "bui-radio-panel", ["buiRadioPanel"], { "color": "color"; }, {}, ["_radios"]>;
 }

package/selection-panel/selection-panel-item.component.d.ts

@@ -9,6 +9,7 @@ export interface SelectionPanelItemGroup {
     color: ThemePalette;
     _isDisabled: boolean;
     _onTouched: () => void;
+    selectByHeader: boolean;
 }
 /**
  * @ignore
@@ -40,14 +41,20 @@ export declare class SelectionPanelItemComponent {
     /** Theme color of the radio button. */
     get color(): ThemePalette;
     set color(newValue: ThemePalette);
+    get _selectByHeader(): boolean;
     private _color;
     private _disabled;
     private _value;
+    private _ripple?;
     constructor(_group: SelectionPanelItemGroup, _cd: ChangeDetectorRef);
     /** @ignore */
     _markInteracted(): void;
     /** @ignore */
     _notify(): void;
+    /** Toggle selection programmatically */
+    toggle(): void;
+    /** @ignore */
+    _contentClicked(event: MouseEvent): void;
     /** Sets the disabled state and marks for check if a change occurred. */
     private _setDisabled;
     private _setChecked;

package/selection-panel/selection-panel.directive.d.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef } from '@angular/core';
+import { ChangeDetectorRef, OnChanges, SimpleChanges } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { ThemePalette } from '@angular/material/core';
 import { SelectionPanelItemGroup } from './selection-panel-item.component';
@@ -18,10 +18,17 @@ import * as i0 from "@angular/core";
  * ```
  *
  */
-export declare class SelectionPanelDirective implements ControlValueAccessor, SelectionPanelItemGroup {
+export declare class SelectionPanelDirective implements ControlValueAccessor, SelectionPanelItemGroup, OnChanges {
     private _cd;
     /** Theme color for all of the selection checkboxes in the group. */
     color: ThemePalette;
+    /**
+     * When set to `false`, the selection is triggered by click everywhere within the panels that is
+     * not focus-trapping; otherwise, only clicking on the header will activate the selection.
+     *
+     * @default true
+     */
+    selectByHeader: boolean;
     /**
      * @ignore
      * The selected values. Used by the child elements to modify the group's value
@@ -53,6 +60,8 @@ export declare class SelectionPanelDirective implements ControlValueAccessor, Se
      * @ignore
      */
     setDisabledState(isDisabled: boolean): void;
+    /** @ignore */
+    ngOnChanges(changes: SimpleChanges): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectionPanelDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<SelectionPanelDirective, "bui-selection-panel", ["buiSelectionPanel"], { "color": "color"; }, {}, ["_items"]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SelectionPanelDirective, "bui-selection-panel", ["buiSelectionPanel"], { "color": "color"; "selectByHeader": "selectByHeader"; }, {}, ["_items"]>;
 }

package/theme/_ui-theme.scss

@@ -8,14 +8,12 @@ $default-border-color-transition: border-color 100ms cubic-bezier(0.55, 0, 0.55,
 		border-color: currentColor !important;
 		transition: $border-color-transition;
 	}
-}
 
-@mixin theme($theme, $border-color-transition: $default-border-color-transition) {
 	$color-config: mat.get-color-config($theme);
 	@if $color-config != null {
 		@each $p in (primary, accent, warn) {
 			$primary-palette: map.get($color-config, $p);
-			$c: mat.get-color-from-palette($primary-palette, 500);
+			$c: mat.get-color-from-palette($primary-palette, text);
 			.bui-border-#{$p} {
 				border-color: $c !important;
 				transition: $border-color-transition;
@@ -26,9 +24,14 @@ $default-border-color-transition: border-color 100ms cubic-bezier(0.55, 0, 0.55,
 			.bui-color-#{$p} {
 				color: $c !important;
 			}
+			.bui-outline-#{$p} {
+				outline-color: $c !important;
+			}
 		}
 	}
+}
 
+@mixin theme($theme, $border-color-transition: $default-border-color-transition) {
 	@include apply-colors($theme, $border-color-transition);
 
 	.mat-icon {