@bravura/ui 3.4.1 → 3.5.0

package/fesm2020/bravura-ui-panel.mjs

@@ -1,11 +1,68 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import * as i1 from '@angular/material/card';
+import { Directive, Inject, Input, Component, ChangeDetectionStrategy, Host, NgModule } from '@angular/core';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import { generateID } from '@bravura/ui/common';
+import * as i2 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i2 from '@bravura/ui/behavior';
+import * as i3 from '@bravura/ui/behavior';
 import { BehaviorModule } from '@bravura/ui/behavior';
 
+/**
+ * A "tinted" element has a shaded background specified by the `ThemePalette`, which
+ * is compatible with both light and dark themes.
+ */
+class TintedDirective {
+    constructor(_doc, elemRef) {
+        this._doc = _doc;
+        this._color = 'default';
+        this._addedStyle = this._doc.createElement('style');
+        this._attr = 'bui-tinted-' + generateID();
+        this._element = elemRef.nativeElement;
+        elemRef.nativeElement.setAttribute(this._attr, '');
+    }
+    /**
+     *  The base color of the shaded background
+     * @default 'primary'
+     */
+    get color() {
+        return this._color;
+    }
+    set color(c) {
+        this._color = c;
+        this.generateStyle();
+    }
+    ngOnInit() {
+        this._element.style.position = 'relative';
+        this.generateStyle();
+        this._element.appendChild(this._addedStyle);
+    }
+    ngOnDestroy() {
+        this._element.removeChild(this._addedStyle);
+    }
+    generateStyle() {
+        this._addedStyle.innerText =
+            `[${this._attr}]::after { position: absolute; opacity: 0.1; border-radius: inherit; display: block; content: ''; ` +
+                ` background-color: var(--bui-color-${this.color}); top: 0; left: 0; ` +
+                ` bottom: 0; right: 0; pointer-events: none; }`;
+    }
+}
+TintedDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: TintedDirective, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TintedDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.6", type: TintedDirective, selector: "[buiTinted], bui-panel", inputs: { color: ["buiTinted", "color"] }, host: { classAttribute: "bui-host" }, exportAs: ["buiTinted"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: TintedDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiTinted], bui-panel',
+                    host: { class: 'bui-host' },
+                    exportAs: 'buiTinted'
+                }]
+        }], ctorParameters: function () { return [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i0.ElementRef }]; }, propDecorators: { color: [{
+                type: Input,
+                args: ['buiTinted']
+            }] } });
+
 /**
  * A `bui-panel` consists of a `mat-card` and a tinted backdrop.
  *
@@ -19,8 +76,9 @@ import { BehaviorModule } from '@bravura/ui/behavior';
  *
  */
 class PanelComponent {
-    constructor(_cd) {
+    constructor(_cd, _tinted) {
         this._cd = _cd;
+        this._tinted = _tinted;
         /**
          * The width of the host element, at which the panel section container will change its orientation.
          */
@@ -38,6 +96,7 @@ class PanelComponent {
     }
     set color(value) {
         this._color = value;
+        this._tinted.color = value;
         this._cd.markForCheck();
     }
     /**
@@ -63,16 +122,18 @@ class PanelComponent {
         this._cd.markForCheck();
     }
 }
-PanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: PanelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: PanelComponent, selector: "bui-panel", inputs: { backdropClass: "backdropClass", cardClass: "cardClass", color: "color", appearance: "appearance", breakpoint: "breakpoint" }, host: { properties: { "class.bui-panel-vertical": "_width < breakpoint", "class.bui-panel-horizontal": "_width >= breakpoint" }, classAttribute: "bui-panel bui-host" }, ngImport: i0, template: "<div\n\tclass=\"bui-panel-backdrop {{ backdropClass }} bui-bg-{{ color || 'none' }}\"\n\t[buiSizingBy]=\"'parent'\"\n\t(buiResized)=\"_resized($event.width)\"\n></div>\n<mat-card\n\t[appearance]=\"appearance === 'flat' ? 'raised' : appearance\"\n\tclass=\"bui-border-{{ color || 'none' }} {{ cardClass }} {{\n\t\tappearance === 'flat' ? 'mat-elevation-z' : appearance === 'outlined' ? 'mat-elevation-z bui-panel-border' : ''\n\t}}\"\n>\n\t<ng-content></ng-content>\n</mat-card>\n", styles: [":host{border-radius:var(--mdc-elevated-card-container-shape, var(--mdc-shape-medium, 4px));position:relative}:host .bui-panel-backdrop{position:absolute;inset:0;border-radius:var(--mdc-elevated-card-container-shape, var(--mdc-shape-medium, 4px));opacity:.1}:host .bui-panel-border{border-width:1px;border-style:solid}:host ::ng-deep .bui-panel-section-container{display:flex;box-sizing:border-box!important}:host(:not([hidden])){display:block}:host(:not([hidden])) .mat-mdc-card{background-color:transparent;padding:16px}:host(:not([hidden])) .mat-mdc-card ::ng-deep .mat-mdc-card-header,:host(:not([hidden])) .mat-mdc-card ::ng-deep .mat-mdc-card-content,:host(:not([hidden])) .mat-mdc-card ::ng-deep .mat-mdc-card-actions{padding:0}:host(:not([hidden])) .mat-mdc-card ::ng-deep .mat-mdc-card-actions{margin-inline-start:-10px}:host(:not([hidden])) .mat-mdc-card ::ng-deep .mat-mdc-card-footer{margin:0 -16px -16px}:host(:not([hidden])) .mat-mdc-card.mat-elevation-z{box-shadow:none!important}:host(.bui-panel-horizontal) ::ng-deep .bui-panel-section-container{flex-direction:row}:host(.bui-panel-vertical) ::ng-deep .bui-panel-section-container{flex-direction:column}\n"], dependencies: [{ kind: "component", type: i1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2.SizingDirective, selector: "[buiSizing],[buiResized],[buiSizingBy],[buiFixedHeight]", inputs: ["buiSizing", "sizingBy", "buiSizingBy", "buiFixedHeight"], outputs: ["buiResized"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: PanelComponent, decorators: [{
+PanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: PanelComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TintedDirective, host: true }], target: i0.ɵɵFactoryTarget.Component });
+PanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: PanelComponent, selector: "bui-panel", inputs: { backdropClass: "backdropClass", cardClass: "cardClass", color: "color", appearance: "appearance", breakpoint: "breakpoint" }, host: { properties: { "class.bui-panel-vertical": "_width < breakpoint", "class.bui-panel-horizontal": "_width >= breakpoint" }, classAttribute: "bui-panel bui-host" }, ngImport: i0, template: "<mat-card\n\t[buiSizingBy]=\"'parent'\"\n\t(buiResized)=\"_resized($event.width)\"\n\t[appearance]=\"appearance === 'flat' ? 'raised' : appearance\"\n\tclass=\"bui-border-{{ color || 'none' }} {{ cardClass }} {{\n\t\tappearance === 'flat' ? 'mat-elevation-z' : appearance === 'outlined' ? 'mat-elevation-z bui-panel-border' : ''\n\t}}\"\n>\n\t<ng-content></ng-content>\n</mat-card>\n", styles: [":host{border-radius:var(--mdc-elevated-card-container-shape, var(--mdc-shape-medium, 4px));position:relative}:host .bui-panel-border{border-width:1px;border-style:solid}:host ::ng-deep .bui-panel-section-container{display:flex;box-sizing:border-box!important}:host(:not([hidden])){display:block}:host(:not([hidden])) .mat-mdc-card{background-color:transparent;padding:16px}:host(:not([hidden])) .mat-mdc-card ::ng-deep .mat-mdc-card-header,:host(:not([hidden])) .mat-mdc-card ::ng-deep .mat-mdc-card-content,:host(:not([hidden])) .mat-mdc-card ::ng-deep .mat-mdc-card-actions{padding:0}:host(:not([hidden])) .mat-mdc-card ::ng-deep .mat-mdc-card-actions{margin-inline-start:-10px}:host(:not([hidden])) .mat-mdc-card ::ng-deep .mat-mdc-card-footer{margin:0 -16px -16px}:host(:not([hidden])) .mat-mdc-card.mat-elevation-z{box-shadow:none!important}:host(.bui-panel-horizontal) ::ng-deep .bui-panel-section-container{flex-direction:row}:host(.bui-panel-vertical) ::ng-deep .bui-panel-section-container{flex-direction:column}\n"], dependencies: [{ kind: "component", type: i2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3.SizingDirective, selector: "[buiSizing],[buiResized],[buiSizingBy],[buiFixedHeight]", inputs: ["buiSizing", "sizingBy", "buiSizingBy", "buiFixedHeight"], outputs: ["buiResized"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: PanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bui-panel', host: {
                         class: 'bui-panel bui-host',
                         '[class.bui-panel-vertical]': `_width < breakpoint`,
                         '[class.bui-panel-horizontal]': `_width >= breakpoint`
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n\tclass=\"bui-panel-backdrop {{ backdropClass }} bui-bg-{{ color || 'none' }}\"\n\t[buiSizingBy]=\"'parent'\"\n\t(buiResized)=\"_resized($event.width)\"\n></div>\n<mat-card\n\t[appearance]=\"appearance === 'flat' ? 'raised' : appearance\"\n\tclass=\"bui-border-{{ color || 'none' }} {{ cardClass }} {{\n\t\tappearance === 'flat' ? 'mat-elevation-z' : appearance === 'outlined' ? 'mat-elevation-z bui-panel-border' : ''\n\t}}\"\n>\n\t<ng-content></ng-content>\n</mat-card>\n", styles: [":host{border-radius:var(--mdc-elevated-card-container-shape, var(--mdc-shape-medium, 4px));position:relative}:host .bui-panel-backdrop{position:absolute;inset:0;border-radius:var(--mdc-elevated-card-container-shape, var(--mdc-shape-medium, 4px));opacity:.1}:host .bui-panel-border{border-width:1px;border-style:solid}:host ::ng-deep .bui-panel-section-container{display:flex;box-sizing:border-box!important}:host(:not([hidden])){display:block}:host(:not([hidden])) .mat-mdc-card{background-color:transparent;padding:16px}:host(:not([hidden])) .mat-mdc-card ::ng-deep .mat-mdc-card-header,:host(:not([hidden])) .mat-mdc-card ::ng-deep .mat-mdc-card-content,:host(:not([hidden])) .mat-mdc-card ::ng-deep .mat-mdc-card-actions{padding:0}:host(:not([hidden])) .mat-mdc-card ::ng-deep .mat-mdc-card-actions{margin-inline-start:-10px}:host(:not([hidden])) .mat-mdc-card ::ng-deep .mat-mdc-card-footer{margin:0 -16px -16px}:host(:not([hidden])) .mat-mdc-card.mat-elevation-z{box-shadow:none!important}:host(.bui-panel-horizontal) ::ng-deep .bui-panel-section-container{flex-direction:row}:host(.bui-panel-vertical) ::ng-deep .bui-panel-section-container{flex-direction:column}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { backdropClass: [{
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card\n\t[buiSizingBy]=\"'parent'\"\n\t(buiResized)=\"_resized($event.width)\"\n\t[appearance]=\"appearance === 'flat' ? 'raised' : appearance\"\n\tclass=\"bui-border-{{ color || 'none' }} {{ cardClass }} {{\n\t\tappearance === 'flat' ? 'mat-elevation-z' : appearance === 'outlined' ? 'mat-elevation-z bui-panel-border' : ''\n\t}}\"\n>\n\t<ng-content></ng-content>\n</mat-card>\n", styles: [":host{border-radius:var(--mdc-elevated-card-container-shape, var(--mdc-shape-medium, 4px));position:relative}:host .bui-panel-border{border-width:1px;border-style:solid}:host ::ng-deep .bui-panel-section-container{display:flex;box-sizing:border-box!important}:host(:not([hidden])){display:block}:host(:not([hidden])) .mat-mdc-card{background-color:transparent;padding:16px}:host(:not([hidden])) .mat-mdc-card ::ng-deep .mat-mdc-card-header,:host(:not([hidden])) .mat-mdc-card ::ng-deep .mat-mdc-card-content,:host(:not([hidden])) .mat-mdc-card ::ng-deep .mat-mdc-card-actions{padding:0}:host(:not([hidden])) .mat-mdc-card ::ng-deep .mat-mdc-card-actions{margin-inline-start:-10px}:host(:not([hidden])) .mat-mdc-card ::ng-deep .mat-mdc-card-footer{margin:0 -16px -16px}:host(:not([hidden])) .mat-mdc-card.mat-elevation-z{box-shadow:none!important}:host(.bui-panel-horizontal) ::ng-deep .bui-panel-section-container{flex-direction:row}:host(.bui-panel-vertical) ::ng-deep .bui-panel-section-container{flex-direction:column}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: TintedDirective, decorators: [{
+                    type: Host
+                }] }]; }, propDecorators: { backdropClass: [{
                 type: Input
             }], cardClass: [{
                 type: Input
@@ -114,9 +175,9 @@ class PanelSectionComponent {
         this._parentElement.classList.add(`${CONTAINER_PREFIX}-${count}`);
     }
 }
-PanelSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: PanelSectionComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-PanelSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: PanelSectionComponent, selector: "bui-panel-section", host: { classAttribute: "bui-panel-section" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{flex-grow:1}:host-context(.bui-panel-horizontal) :host:not(:first-child){border-inline-start:1px solid rgba(128,128,128,.2);padding-inline-start:16px}:host-context(.bui-panel-horizontal) :host:not(:last-child){padding-inline-end:16px}:host-context(.bui-panel-vertical) :host:not(:first-child){border-top:1px solid rgba(128,128,128,.2);padding-top:16px}:host-context(.bui-panel-vertical) :host:not(:last-child){padding-bottom:16px}:host-context(.bui-panel-horizontal .bui-panel-section-container-2){flex-basis:50%}:host-context(.bui-panel-horizontal .bui-panel-section-container-3){flex-basis:33.3333333333%}:host-context(.bui-panel-horizontal .bui-panel-section-container-4){flex-basis:25%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: PanelSectionComponent, decorators: [{
+PanelSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: PanelSectionComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+PanelSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: PanelSectionComponent, selector: "bui-panel-section", host: { classAttribute: "bui-panel-section" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{flex-grow:1}:host-context(.bui-panel-horizontal) :host:not(:first-child){border-inline-start:1px solid rgba(128,128,128,.2);padding-inline-start:16px}:host-context(.bui-panel-horizontal) :host:not(:last-child){padding-inline-end:16px}:host-context(.bui-panel-vertical) :host:not(:first-child){border-top:1px solid rgba(128,128,128,.2);padding-top:16px}:host-context(.bui-panel-vertical) :host:not(:last-child){padding-bottom:16px}:host-context(.bui-panel-horizontal .bui-panel-section-container-2){flex-basis:50%}:host-context(.bui-panel-horizontal .bui-panel-section-container-3){flex-basis:33.3333333333%}:host-context(.bui-panel-horizontal .bui-panel-section-container-4){flex-basis:25%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: PanelSectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bui-panel-section', host: {
                         class: 'bui-panel-section'
@@ -125,15 +186,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
 
 class PanelModule {
 }
-PanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: PanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.0", ngImport: i0, type: PanelModule, declarations: [PanelComponent, PanelSectionComponent], imports: [CommonModule, MatCardModule, BehaviorModule], exports: [MatCardModule, PanelComponent, PanelSectionComponent] });
-PanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: PanelModule, imports: [CommonModule, MatCardModule, BehaviorModule, MatCardModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: PanelModule, decorators: [{
+PanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: PanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.6", ngImport: i0, type: PanelModule, declarations: [PanelComponent, PanelSectionComponent, TintedDirective], imports: [CommonModule, MatCardModule, BehaviorModule], exports: [MatCardModule, PanelComponent, PanelSectionComponent, TintedDirective] });
+PanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: PanelModule, imports: [CommonModule, MatCardModule, BehaviorModule, MatCardModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: PanelModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [PanelComponent, PanelSectionComponent],
+                    declarations: [PanelComponent, PanelSectionComponent, TintedDirective],
                     imports: [CommonModule, MatCardModule, BehaviorModule],
-                    exports: [MatCardModule, PanelComponent, PanelSectionComponent]
+                    exports: [MatCardModule, PanelComponent, PanelSectionComponent, TintedDirective]
                 }]
         }] });
 
@@ -141,6 +202,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { PanelComponent, PanelModule, PanelSectionComponent };
-//# sourceMappingURL=bravura-ui-panel.mjs.map
+export { PanelComponent, PanelModule, PanelSectionComponent, TintedDirective };
 //# sourceMappingURL=bravura-ui-panel.mjs.map

package/fesm2020/bravura-ui-panel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"bravura-ui-panel.mjs","sources":["../../../projects/ui/panel/panel.component.ts","../../../projects/ui/panel/panel.component.html","../../../projects/ui/panel/panel-section.component.ts","../../../projects/ui/panel/panel-section.component.html","../../../projects/ui/panel/panel.module.ts","../../../projects/ui/panel/bravura-ui-panel.ts"],"sourcesContent":["import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';\nimport { ThemePalette } from '@angular/material/core';\n\n/**\n * A `bui-panel` consists of a `mat-card` and a tinted backdrop.\n *\n * Unlike `mat-card`, `bui-panel` has a flat appearance by default and a transparent background.\n * The backdrop is nearly transparent, blending the theme palette `color`\n * and the effective background color of the DOM ancestors.\n *\n * `bui-panel` supports all the content child directives of `mat-card` as well as `bui-panel-section`.\n *\n * `bui-panel-section`s are subdivisions of `bui-panel` that rearrange their orientation based on the width of the container element.\n *\n */\n@Component({\n\tselector: 'bui-panel',\n\ttemplateUrl: './panel.component.html',\n\tstyleUrls: ['./panel.component.scss'],\n\thost: {\n\t\tclass: 'bui-panel bui-host',\n\t\t'[class.bui-panel-vertical]': `_width < breakpoint`,\n\t\t'[class.bui-panel-horizontal]': `_width >= breakpoint`\n\t},\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class PanelComponent implements OnInit {\n\t/**\n\t * Additional style classes on the tinted backdrop element.\n\t */\n\t@Input()\n\tbackdropClass?: string;\n\n\t/**\n\t * Additional style classes on the `<mat-card>` element.\n\t */\n\t@Input()\n\tcardClass?: string;\n\n\t/**\n\t * This property defines the background (shaded) and border colors of the panel\n\t */\n\t@Input()\n\tget color(): ThemePalette {\n\t\treturn this._color;\n\t}\n\tset color(value: ThemePalette) {\n\t\tthis._color = value;\n\t\tthis._cd.markForCheck();\n\t}\n\n\t/**\n\t * In contrast to using a `mat-card` alone, a `bui-panel` does not have a elevated appearance by default.\n\t *\n\t * This property can change the default appearance to\n\t *\n\t * * `raised` - the original `mat-card` default\n\t * * `outline` - a `mat-card` with borders\n\t * * `flat` - no border or elevation\n\t */\n\t@Input()\n\tget appearance(): 'outlined' | 'raised' | 'flat' {\n\t\treturn this._appearance;\n\t}\n\tset appearance(value: 'outlined' | 'raised' | 'flat') {\n\t\tthis._appearance = value;\n\t\tthis._cd.markForCheck();\n\t}\n\n\t/**\n\t * The width of the host element, at which the panel section container will change its orientation.\n\t */\n\t@Input()\n\tbreakpoint = 600;\n\n\t/** @ignore */\n\t_width = 600;\n\n\tprivate _color: ThemePalette = 'primary';\n\n\tprivate _appearance: 'outlined' | 'raised' | 'flat' = 'flat';\n\n\tconstructor(private _cd: ChangeDetectorRef) {}\n\n\tngOnInit(): void {}\n\n\t/** @ignore */\n\t_resized(width: number): void {\n\t\tthis._width = width;\n\t\tthis._cd.markForCheck();\n\t}\n}\n","<div\n\tclass=\"bui-panel-backdrop {{ backdropClass }} bui-bg-{{ color || 'none' }}\"\n\t[buiSizingBy]=\"'parent'\"\n\t(buiResized)=\"_resized($event.width)\"\n></div>\n<mat-card\n\t[appearance]=\"appearance === 'flat' ? 'raised' : appearance\"\n\tclass=\"bui-border-{{ color || 'none' }} {{ cardClass }} {{\n\t\tappearance === 'flat' ? 'mat-elevation-z' : appearance === 'outlined' ? 'mat-elevation-z bui-panel-border' : ''\n\t}}\"\n>\n\t<ng-content></ng-content>\n</mat-card>\n","import { ChangeDetectionStrategy, Component, ElementRef, OnDestroy, OnInit } from '@angular/core';\n\nconst CONTAINER_PREFIX = 'bui-panel-section-container';\n\nconst COUNT_ATTR = 'bui-section-count';\n/**\n * `bui-panel-section`s are subdivisions of `bui-panel` that rearrange their orientation based on the width of the container element.\n */\n@Component({\n\tselector: 'bui-panel-section',\n\ttemplateUrl: './panel-section.component.html',\n\tstyleUrls: ['./panel-section.component.scss'],\n\thost: {\n\t\tclass: 'bui-panel-section'\n\t},\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class PanelSectionComponent implements OnInit, OnDestroy {\n\tprivate _parentElement!: HTMLElement;\n\n\tconstructor(private _elementRef: ElementRef<HTMLElement>) {}\n\n\tngOnInit(): void {\n\t\tthis._parentElement = this._elementRef.nativeElement.parentElement!;\n\t\tthis._parentElement.classList.add(CONTAINER_PREFIX);\n\t\tthis._calcCount(1);\n\t}\n\n\tngOnDestroy(): void {\n\t\tthis._calcCount(-1);\n\t}\n\n\tprivate _calcCount(delta: number) {\n\t\tlet count = this._parentElement.getAttribute(COUNT_ATTR);\n\t\tif (count) {\n\t\t\tthis._parentElement.classList.remove(`${CONTAINER_PREFIX}-${count}`);\n\t\t} else {\n\t\t\tcount = '0';\n\t\t}\n\t\tcount = `${Math.max(Number(count) + delta, 0)}`;\n\t\tthis._parentElement.setAttribute(COUNT_ATTR, count);\n\t\tthis._parentElement.classList.add(`${CONTAINER_PREFIX}-${count}`);\n\t}\n}\n","<ng-content></ng-content>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { PanelComponent } from './panel.component';\nimport { MatCardModule } from '@angular/material/card';\nimport { BehaviorModule } from '@bravura/ui/behavior';\nimport { PanelSectionComponent } from './panel-section.component';\n\n@NgModule({\n\tdeclarations: [PanelComponent, PanelSectionComponent],\n\timports: [CommonModule, MatCardModule, BehaviorModule],\n\texports: [MatCardModule, PanelComponent, PanelSectionComponent]\n})\nexport class PanelModule {}\n\nexport { PanelComponent, PanelSectionComponent };\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-panel.mjs","sources":["../../../projects/ui/panel/tinted.directive.ts","../../../projects/ui/panel/panel.component.ts","../../../projects/ui/panel/panel.component.html","../../../projects/ui/panel/panel-section.component.ts","../../../projects/ui/panel/panel-section.component.html","../../../projects/ui/panel/panel.module.ts","../../../projects/ui/panel/bravura-ui-panel.ts"],"sourcesContent":["import { DOCUMENT } from '@angular/common';\nimport { Directive, ElementRef, Inject, Input, OnDestroy, OnInit } from '@angular/core';\nimport { ThemePalette } from '@angular/material/core';\nimport { generateID } from '@bravura/ui/common';\n\n/**\n * A \"tinted\" element has a shaded background specified by the `ThemePalette`, which\n * is compatible with both light and dark themes.\n */\n@Directive({\n\tselector: '[buiTinted], bui-panel',\n\thost: { class: 'bui-host' },\n\texportAs: 'buiTinted'\n})\nexport class TintedDirective implements OnInit, OnDestroy {\n\t/**\n\t *  The base color of the shaded background\n\t * @default 'primary'\n\t */\n\t@Input('buiTinted')\n\tget color(): ThemePalette {\n\t\treturn this._color;\n\t}\n\tset color(c: ThemePalette) {\n\t\tthis._color = c;\n\t\tthis.generateStyle();\n\t}\n\n\tprivate _color: any = 'default';\n\n\tprivate readonly _addedStyle: HTMLStyleElement;\n\tprivate readonly _attr: string;\n\tprivate _element: HTMLElement;\n\n\tconstructor(@Inject(DOCUMENT) private _doc: Document, elemRef: ElementRef<HTMLElement>) {\n\t\tthis._addedStyle = this._doc.createElement('style');\n\t\tthis._attr = 'bui-tinted-' + generateID();\n\t\tthis._element = elemRef.nativeElement;\n\t\telemRef.nativeElement.setAttribute(this._attr, '');\n\t}\n\n\tngOnInit(): void {\n\t\tthis._element.style.position = 'relative';\n\t\tthis.generateStyle();\n\t\tthis._element.appendChild(this._addedStyle);\n\t}\n\n\tngOnDestroy(): void {\n\t\tthis._element.removeChild(this._addedStyle);\n\t}\n\n\tprivate generateStyle(): void {\n\t\tthis._addedStyle.innerText =\n\t\t\t`[${this._attr}]::after { position: absolute; opacity: 0.1; border-radius: inherit; display: block; content: ''; ` +\n\t\t\t` background-color: var(--bui-color-${this.color}); top: 0; left: 0; ` +\n\t\t\t` bottom: 0; right: 0; pointer-events: none; }`;\n\t}\n}\n","import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Host, Input, OnInit } from '@angular/core';\nimport { ThemePalette } from '@angular/material/core';\nimport { TintedDirective } from './tinted.directive';\n\n/**\n * A `bui-panel` consists of a `mat-card` and a tinted backdrop.\n *\n * Unlike `mat-card`, `bui-panel` has a flat appearance by default and a transparent background.\n * The backdrop is nearly transparent, blending the theme palette `color`\n * and the effective background color of the DOM ancestors.\n *\n * `bui-panel` supports all the content child directives of `mat-card` as well as `bui-panel-section`.\n *\n * `bui-panel-section`s are subdivisions of `bui-panel` that rearrange their orientation based on the width of the container element.\n *\n */\n@Component({\n\tselector: 'bui-panel',\n\ttemplateUrl: './panel.component.html',\n\tstyleUrls: ['./panel.component.scss'],\n\thost: {\n\t\tclass: 'bui-panel bui-host',\n\t\t'[class.bui-panel-vertical]': `_width < breakpoint`,\n\t\t'[class.bui-panel-horizontal]': `_width >= breakpoint`\n\t},\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class PanelComponent implements OnInit {\n\t/**\n\t * Additional style classes on the tinted backdrop element.\n\t * @deprecated\n\t * @ignore\n\t */\n\t@Input()\n\tbackdropClass?: string;\n\n\t/**\n\t * Additional style classes on the `<mat-card>` element.\n\t */\n\t@Input()\n\tcardClass?: string;\n\n\t/**\n\t * This property defines the background (shaded) and border colors of the panel\n\t */\n\t@Input()\n\tget color(): ThemePalette {\n\t\treturn this._color;\n\t}\n\tset color(value: ThemePalette) {\n\t\tthis._color = value;\n\t\tthis._tinted.color = value;\n\t\tthis._cd.markForCheck();\n\t}\n\n\t/**\n\t * In contrast to using a `mat-card` alone, a `bui-panel` does not have a elevated appearance by default.\n\t *\n\t * This property can change the default appearance to\n\t *\n\t * * `raised` - the original `mat-card` default\n\t * * `outline` - a `mat-card` with borders\n\t * * `flat` - no border or elevation\n\t */\n\t@Input()\n\tget appearance(): 'outlined' | 'raised' | 'flat' {\n\t\treturn this._appearance;\n\t}\n\tset appearance(value: 'outlined' | 'raised' | 'flat') {\n\t\tthis._appearance = value;\n\t\tthis._cd.markForCheck();\n\t}\n\n\t/**\n\t * The width of the host element, at which the panel section container will change its orientation.\n\t */\n\t@Input()\n\tbreakpoint = 600;\n\n\t/** @ignore */\n\t_width = 600;\n\n\tprivate _color: ThemePalette = 'primary';\n\n\tprivate _appearance: 'outlined' | 'raised' | 'flat' = 'flat';\n\n\tconstructor(private _cd: ChangeDetectorRef, @Host() private _tinted: TintedDirective) {}\n\n\tngOnInit(): void {}\n\n\t/** @ignore */\n\t_resized(width: number): void {\n\t\tthis._width = width;\n\t\tthis._cd.markForCheck();\n\t}\n}\n","<mat-card\n\t[buiSizingBy]=\"'parent'\"\n\t(buiResized)=\"_resized($event.width)\"\n\t[appearance]=\"appearance === 'flat' ? 'raised' : appearance\"\n\tclass=\"bui-border-{{ color || 'none' }} {{ cardClass }} {{\n\t\tappearance === 'flat' ? 'mat-elevation-z' : appearance === 'outlined' ? 'mat-elevation-z bui-panel-border' : ''\n\t}}\"\n>\n\t<ng-content></ng-content>\n</mat-card>\n","import { ChangeDetectionStrategy, Component, ElementRef, OnDestroy, OnInit } from '@angular/core';\n\nconst CONTAINER_PREFIX = 'bui-panel-section-container';\n\nconst COUNT_ATTR = 'bui-section-count';\n/**\n * `bui-panel-section`s are subdivisions of `bui-panel` that rearrange their orientation based on the width of the container element.\n */\n@Component({\n\tselector: 'bui-panel-section',\n\ttemplateUrl: './panel-section.component.html',\n\tstyleUrls: ['./panel-section.component.scss'],\n\thost: {\n\t\tclass: 'bui-panel-section'\n\t},\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class PanelSectionComponent implements OnInit, OnDestroy {\n\tprivate _parentElement!: HTMLElement;\n\n\tconstructor(private _elementRef: ElementRef<HTMLElement>) {}\n\n\tngOnInit(): void {\n\t\tthis._parentElement = this._elementRef.nativeElement.parentElement!;\n\t\tthis._parentElement.classList.add(CONTAINER_PREFIX);\n\t\tthis._calcCount(1);\n\t}\n\n\tngOnDestroy(): void {\n\t\tthis._calcCount(-1);\n\t}\n\n\tprivate _calcCount(delta: number) {\n\t\tlet count = this._parentElement.getAttribute(COUNT_ATTR);\n\t\tif (count) {\n\t\t\tthis._parentElement.classList.remove(`${CONTAINER_PREFIX}-${count}`);\n\t\t} else {\n\t\t\tcount = '0';\n\t\t}\n\t\tcount = `${Math.max(Number(count) + delta, 0)}`;\n\t\tthis._parentElement.setAttribute(COUNT_ATTR, count);\n\t\tthis._parentElement.classList.add(`${CONTAINER_PREFIX}-${count}`);\n\t}\n}\n","<ng-content></ng-content>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { PanelComponent } from './panel.component';\nimport { MatCardModule } from '@angular/material/card';\nimport { BehaviorModule } from '@bravura/ui/behavior';\nimport { PanelSectionComponent } from './panel-section.component';\nimport { TintedDirective } from './tinted.directive';\n\n@NgModule({\n\tdeclarations: [PanelComponent, PanelSectionComponent, TintedDirective],\n\timports: [CommonModule, MatCardModule, BehaviorModule],\n\texports: [MatCardModule, PanelComponent, PanelSectionComponent, TintedDirective]\n})\nexport class PanelModule {}\n\nexport { PanelComponent, PanelSectionComponent, TintedDirective };\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.TintedDirective"],"mappings":"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"}

package/fesm2020/bravura-ui-phone-number.mjs

@@ -37,9 +37,9 @@ class PhoneNumberPipe {
         }
     }
 }
-PhoneNumberPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: PhoneNumberPipe, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Pipe });
-PhoneNumberPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.1.0", ngImport: i0, type: PhoneNumberPipe, name: "buiPhone" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: PhoneNumberPipe, decorators: [{
+PhoneNumberPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: PhoneNumberPipe, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Pipe });
+PhoneNumberPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.6", ngImport: i0, type: PhoneNumberPipe, name: "buiPhone" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: PhoneNumberPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'buiPhone',
@@ -102,9 +102,9 @@ class PhoneNumberValidator {
         return PhoneNumberValidator.validateControl(this._el.nativeElement, this.telType, false);
     }
 }
-PhoneNumberValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: PhoneNumberValidator, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-PhoneNumberValidator.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.0", type: PhoneNumberValidator, selector: "[buiTelInput], input([type=tel])[ngModel], input([type=tel])[formControlName], input([type=tel])[formControl]", inputs: { telType: "telType" }, providers: [PHONE_VALIDATOR], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: PhoneNumberValidator, decorators: [{
+PhoneNumberValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: PhoneNumberValidator, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+PhoneNumberValidator.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.6", type: PhoneNumberValidator, selector: "[buiTelInput], input([type=tel])[ngModel], input([type=tel])[formControlName], input([type=tel])[formControl]", inputs: { telType: "telType" }, providers: [PHONE_VALIDATOR], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: PhoneNumberValidator, decorators: [{
             type: Directive,
             args: [{
                     selector: SELECTOR,
@@ -264,9 +264,9 @@ PhoneNumberDirective.POST_RENDER_INIT_DELAY = 20;
  * @ignore
  */
 PhoneNumberDirective.BYPASS_SHADOW_DETECTION = false;
-PhoneNumberDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: PhoneNumberDirective, deps: [{ token: i0.ElementRef }, { token: i1.NgModel, optional: true }, { token: i1.FormControlName, optional: true }, { token: i1.FormControlDirective, optional: true }, { token: LOCALE_ID }, { token: i0.NgZone }, { token: i2.MatFormField, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-PhoneNumberDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.0", type: PhoneNumberDirective, selector: "[buiTelInput], input([type=tel])[ngModel], input([type=tel])[formControlName], input([type=tel])[formControl]", inputs: { telType: "telType", telDropdown: "telDropdown" }, outputs: { telCountryChange: "telCountryChange" }, host: { listeners: { "input": "onInput()" } }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: PhoneNumberDirective, decorators: [{
+PhoneNumberDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: PhoneNumberDirective, deps: [{ token: i0.ElementRef }, { token: i1.NgModel, optional: true }, { token: i1.FormControlName, optional: true }, { token: i1.FormControlDirective, optional: true }, { token: LOCALE_ID }, { token: i0.NgZone }, { token: i2.MatFormField, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+PhoneNumberDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.6", type: PhoneNumberDirective, selector: "[buiTelInput], input([type=tel])[ngModel], input([type=tel])[formControlName], input([type=tel])[formControl]", inputs: { telType: "telType", telDropdown: "telDropdown" }, outputs: { telCountryChange: "telCountryChange" }, host: { listeners: { "input": "onInput()" } }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: PhoneNumberDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: SELECTOR
@@ -298,10 +298,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
  */
 class PhoneModule {
 }
-PhoneModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: PhoneModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PhoneModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.0", ngImport: i0, type: PhoneModule, declarations: [PhoneNumberPipe, PhoneNumberDirective, PhoneNumberValidator], imports: [CommonModule], exports: [PhoneNumberDirective, PhoneNumberPipe, PhoneNumberValidator] });
-PhoneModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: PhoneModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: PhoneModule, decorators: [{
+PhoneModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: PhoneModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PhoneModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.6", ngImport: i0, type: PhoneModule, declarations: [PhoneNumberPipe, PhoneNumberDirective, PhoneNumberValidator], imports: [CommonModule], exports: [PhoneNumberDirective, PhoneNumberPipe, PhoneNumberValidator] });
+PhoneModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: PhoneModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: PhoneModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [PhoneNumberPipe, PhoneNumberDirective, PhoneNumberValidator],
@@ -316,4 +316,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
 
 export { PhoneModule, PhoneNumberDirective, PhoneNumberPipe, PhoneNumberValidator };
 //# sourceMappingURL=bravura-ui-phone-number.mjs.map
-//# sourceMappingURL=bravura-ui-phone-number.mjs.map

package/fesm2020/bravura-ui-radio-panel.mjs

@@ -33,14 +33,14 @@ class RadioPanelItemComponent extends MatRadioButton {
         this._tickPosition = pos;
     }
 }
-RadioPanelItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: RadioPanelItemComponent, deps: [{ token: MAT_RADIO_GROUP, optional: true }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FocusMonitor }, { token: i2.UniqueSelectionDispatcher }, { token: ANIMATION_MODULE_TYPE, optional: true }, { token: MAT_RADIO_DEFAULT_OPTIONS, optional: true }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
-RadioPanelItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: RadioPanelItemComponent, selector: "bui-radio-panel-item", inputs: { disableRipple: "disableRipple", tabIndex: "tabIndex", title: "title", _tickPosition: "_tickPosition", tickPosition: "tickPosition" }, host: { listeners: { "focus": "_inputElement.nativeElement.focus()" }, properties: { "class.bui-radio-checked": "checked", "class.bui-disabled": "disabled", "class._mat-animation-noopable": "_noopAnimations", "class.mat-primary": "color === \"primary\"", "class.mat-accent": "color === \"accent\"", "class.mat-warn": "color === \"warn\"", "attr.tabindex": "null", "attr.id": "id", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "style.--panel-width": "this.panelWidth" }, classAttribute: "bui-radio-panel-item" }, queries: [{ propertyName: "contentOnSelect", first: true, predicate: ["contentOnSelect"], descendants: true }], exportAs: ["matRadioButton"], usesInheritance: true, ngImport: i0, template: "<label\n\tmatRipple\n\tmatRippleColor=\"rgba(128,128,128,.1)\"\n\t[matRippleDisabled]=\"disabled || checked\"\n\t[attr.for]=\"inputId\"\n\t#label\n\tclass=\"bui-radio-panel-item-label bui-border-{{ checked ? color : 'default' }}\"\n>\n\t<div class=\"bui-radio-panel-item-wrapper\" [class.bui-radio-tick-at-end]=\"tickPosition === 'end'\">\n\t\t<div class=\"bui-label-header\">\n\t\t\t<span class=\"bui-label-title\" [innerHTML]=\"title\"></span>\n\t\t\t<ng-content select=\"[buiRadioItemHeadingEnd]\"></ng-content>\n\t\t\t<span class=\"bui-radio-panel-item-circle\">\n\t\t\t\t<span\n\t\t\t\t\tclass=\"bui-persistent-ripple\"\n\t\t\t\t\tmatRipple\n\t\t\t\t\tmatRippleColor=\"rgba(128,128,128,.1)\"\n\t\t\t\t\t[matRippleCentered]=\"true\"\n\t\t\t\t\t[matRippleUnbounded]=\"true\"\n\t\t\t\t\t[matRippleTrigger]=\"label\"\n\t\t\t\t\t[matRippleRadius]=\"20\"\n\t\t\t\t\t*ngIf=\"!disabled\"\n\t\t\t\t></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\t<div class=\"bui-label-content\" *ngIf=\"contentOnSelect && checked\" @slideInOut>\n\t\t\t<ng-container *ngTemplateOutlet=\"contentOnSelect\"></ng-container>\n\t\t</div>\n\t</div>\n</label>\n", styles: [":host .bui-ripple,:host .bui-persistent-ripple{position:absolute;inset:0}:host .bui-radio-panel-item-overlay{background-color:#fff;opacity:0}:host .bui-radio-panel-item-circle{width:40px;height:40px}:host .bui-radio-panel-item-label{display:block;border-radius:5px;border:1px solid rgba(128,128,128,.2);padding:1px;position:relative;height:100%}:host .bui-radio-panel-item-label .bui-radio-panel-item-circle-unchecked{color:#80808066}:host .bui-radio-panel-item-wrapper.bui-radio-tick-at-end .bui-label-header{padding:calc(1rem - 10px) calc(1rem - 10px) 0 1rem;justify-content:space-between}:host .bui-radio-panel-item-wrapper:not(.bui-radio-tick-at-end) .bui-label-header{padding:calc(1rem - 10px) calc(1rem - 10px) 0 calc(1rem - 10px)}:host .bui-radio-panel-item-wrapper:not(.bui-radio-tick-at-end) .bui-radio-panel-item-circle{order:-1}:host .bui-label-header,:host .bui-radio-panel-item-circle{display:flex;align-items:center}:host .bui-label-header{margin-bottom:calc(1rem - 10px)}:host .bui-label-title{font-size:larger;font-weight:700}:host .bui-radio-panel-item-circle{justify-content:center;position:relative}:host .bui-label-content:not(:empty){margin:0 1rem 1rem}:host .bui-label-content-gap{margin-top:calc(1rem - 10px)}@polyfill-unscoped-rule{content: \".bui-radio-panel-item-wrapper .bui-label-header [buiRadioItemHeadingEnd]\"; margin-left: auto;}:host(:not([hidden])){display:block}:host(:not(.bui-disabled)):not(.bui-radio-checked) .bui-radio-panel-item-label{cursor:pointer}:host(:not(.bui-disabled)) .bui-radio-panel-item-label:hover{border-width:2px;padding:0;border-color:#8080804d}:host(:not(.bui-disabled)).cdk-keyboard-focused .bui-persistent-ripple,:host(:not(.bui-disabled)).cdk-program-focused .bui-persistent-ripple{background-color:#80808033;border-radius:50%}:host-context(.radio-dir-row){--panel-width: 300px;margin-right:1rem;max-width:var(--panel-width);min-width:250px;margin-bottom:1rem}:host(.bui-disabled) .bui-radio-panel-item-wrapper>.bui-label-header,:host(.bui-disabled) .bui-radio-panel-item-wrapper>.bui-label-content{opacity:.5}:host-context(.radio-dir-row):not(:last-child){margin-right:1rem;margin-bottom:1rem}:host-context(.radio-dir-column):not(:last-child){margin-bottom:1rem}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], animations: [
+RadioPanelItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: RadioPanelItemComponent, deps: [{ token: MAT_RADIO_GROUP, optional: true }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FocusMonitor }, { token: i2.UniqueSelectionDispatcher }, { token: ANIMATION_MODULE_TYPE, optional: true }, { token: MAT_RADIO_DEFAULT_OPTIONS, optional: true }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
+RadioPanelItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: RadioPanelItemComponent, selector: "bui-radio-panel-item", inputs: { disableRipple: "disableRipple", tabIndex: "tabIndex", title: "title", _tickPosition: "_tickPosition", tickPosition: "tickPosition" }, host: { listeners: { "focus": "_inputElement.nativeElement.focus()" }, properties: { "class.bui-radio-checked": "checked", "class.bui-disabled": "disabled", "class._mat-animation-noopable": "_noopAnimations", "class.mat-primary": "color === \"primary\"", "class.mat-accent": "color === \"accent\"", "class.mat-warn": "color === \"warn\"", "attr.tabindex": "null", "attr.id": "id", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "style.--panel-width": "this.panelWidth" }, classAttribute: "bui-radio-panel-item" }, queries: [{ propertyName: "contentOnSelect", first: true, predicate: ["contentOnSelect"], descendants: true }], exportAs: ["matRadioButton"], usesInheritance: true, ngImport: i0, template: "<label\n\tmatRipple\n\tmatRippleColor=\"rgba(128,128,128,.1)\"\n\t[matRippleDisabled]=\"disabled || checked\"\n\t[attr.for]=\"inputId\"\n\t#label\n\tclass=\"bui-radio-panel-item-label bui-border-{{ checked ? color : 'default' }}\"\n>\n\t<div class=\"bui-radio-panel-item-wrapper\" [class.bui-radio-tick-at-end]=\"tickPosition === 'end'\">\n\t\t<div class=\"bui-label-header\">\n\t\t\t<span class=\"bui-label-title\" [innerHTML]=\"title\"></span>\n\t\t\t<ng-content select=\"[buiRadioItemHeadingEnd]\"></ng-content>\n\t\t\t<span class=\"bui-radio-panel-item-circle\">\n\t\t\t\t<span\n\t\t\t\t\tclass=\"bui-persistent-ripple\"\n\t\t\t\t\tmatRipple\n\t\t\t\t\tmatRippleColor=\"rgba(128,128,128,.1)\"\n\t\t\t\t\t[matRippleCentered]=\"true\"\n\t\t\t\t\t[matRippleUnbounded]=\"true\"\n\t\t\t\t\t[matRippleTrigger]=\"label\"\n\t\t\t\t\t[matRippleRadius]=\"20\"\n\t\t\t\t\t*ngIf=\"!disabled\"\n\t\t\t\t></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\t<div class=\"bui-label-content\" *ngIf=\"contentOnSelect && checked\" @slideInOut>\n\t\t\t<ng-container *ngTemplateOutlet=\"contentOnSelect\"></ng-container>\n\t\t</div>\n\t</div>\n</label>\n", styles: [":host .bui-ripple,:host .bui-persistent-ripple{position:absolute;inset:0}:host .bui-radio-panel-item-overlay{background-color:#fff;opacity:0}:host .bui-radio-panel-item-circle{width:40px;height:40px}:host .bui-radio-panel-item-label{display:block;border-radius:5px;border:1px solid rgba(128,128,128,.2);padding:1px;position:relative;height:100%}:host .bui-radio-panel-item-label .bui-radio-panel-item-circle-unchecked{color:#80808066}:host .bui-radio-panel-item-wrapper.bui-radio-tick-at-end .bui-label-header{padding:calc(1rem - 10px) calc(1rem - 10px) 0 1rem;justify-content:space-between}:host .bui-radio-panel-item-wrapper:not(.bui-radio-tick-at-end) .bui-label-header{padding:calc(1rem - 10px) calc(1rem - 10px) 0 calc(1rem - 10px)}:host .bui-radio-panel-item-wrapper:not(.bui-radio-tick-at-end) .bui-radio-panel-item-circle{order:-1}:host .bui-label-header,:host .bui-radio-panel-item-circle{display:flex;align-items:center}:host .bui-label-header{margin-bottom:calc(1rem - 10px)}:host .bui-label-title{font-size:larger;font-weight:700}:host .bui-radio-panel-item-circle{justify-content:center;position:relative}:host .bui-label-content:not(:empty){margin:0 1rem 1rem}:host .bui-label-content-gap{margin-top:calc(1rem - 10px)}@polyfill-unscoped-rule{content: \".bui-radio-panel-item-wrapper .bui-label-header [buiRadioItemHeadingEnd]\"; margin-left: auto;}:host(:not([hidden])){display:block}:host(:not(.bui-disabled)):not(.bui-radio-checked) .bui-radio-panel-item-label{cursor:pointer}:host(:not(.bui-disabled)) .bui-radio-panel-item-label:hover{border-width:2px;padding:0;border-color:#8080804d}:host(:not(.bui-disabled)).cdk-keyboard-focused .bui-persistent-ripple,:host(:not(.bui-disabled)).cdk-program-focused .bui-persistent-ripple{background-color:#80808033;border-radius:50%}:host-context(.radio-dir-row){--panel-width: 300px;margin-right:1rem;max-width:var(--panel-width);min-width:250px;margin-bottom:1rem}:host(.bui-disabled) .bui-radio-panel-item-wrapper>.bui-label-header,:host(.bui-disabled) .bui-radio-panel-item-wrapper>.bui-label-content{opacity:.5}:host-context(.radio-dir-row):not(:last-child){margin-right:1rem;margin-bottom:1rem}:host-context(.radio-dir-column):not(:last-child){margin-bottom:1rem}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], animations: [
         trigger('slideInOut', [
             state('void', style({ height: '0px', overflow: 'hidden' })),
             transition(':enter, :leave', animate('.25s'))
         ])
     ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: RadioPanelItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: RadioPanelItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bui-radio-panel-item', inputs: ['disableRipple', 'tabIndex'], exportAs: 'matRadioButton', host: {
                         class: 'bui-radio-panel-item',
@@ -146,8 +146,8 @@ class RadioPanelComponent extends MatRadioGroup {
         });
     }
 }
-RadioPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: RadioPanelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-RadioPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: RadioPanelComponent, selector: "bui-radio-panel", inputs: { panelWidth: "panelWidth", direction: "direction", color: "color", tickPosition: "tickPosition" }, host: { attributes: { "role": "radiogroup" }, properties: { "attr.class": "this.classAttr" }, classAttribute: "bui-radio-panel bui-host" }, providers: [
+RadioPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: RadioPanelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+RadioPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: RadioPanelComponent, selector: "bui-radio-panel", inputs: { panelWidth: "panelWidth", direction: "direction", color: "color", tickPosition: "tickPosition" }, host: { attributes: { "role": "radiogroup" }, properties: { "attr.class": "this.classAttr" }, classAttribute: "bui-radio-panel bui-host" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => RadioPanelComponent),
@@ -155,7 +155,7 @@ RadioPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
         },
         { provide: MAT_RADIO_GROUP, useExisting: forwardRef(() => RadioPanelComponent) }
     ], queries: [{ propertyName: "_radios", predicate: RadioPanelItemComponent, descendants: true }], exportAs: ["buiRadioPanel"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, styles: [":host:not([hidden]){display:flex}:host.radio-dir-row{flex-direction:row;flex-wrap:wrap}:host.radio-dir-column{flex-direction:column}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: RadioPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: RadioPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bui-radio-panel', exportAs: 'buiRadioPanel', providers: [
                         {
@@ -189,10 +189,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
  */
 class RadioPanelModule {
 }
-RadioPanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: RadioPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-RadioPanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.0", ngImport: i0, type: RadioPanelModule, declarations: [RadioPanelItemComponent, RadioPanelComponent], imports: [CommonModule, MatRadioModule, MatRippleModule, MatIconModule], exports: [RadioPanelItemComponent, RadioPanelComponent] });
-RadioPanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: RadioPanelModule, imports: [CommonModule, MatRadioModule, MatRippleModule, MatIconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: RadioPanelModule, decorators: [{
+RadioPanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: RadioPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+RadioPanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.6", ngImport: i0, type: RadioPanelModule, declarations: [RadioPanelItemComponent, RadioPanelComponent], imports: [CommonModule, MatRadioModule, MatRippleModule, MatIconModule], exports: [RadioPanelItemComponent, RadioPanelComponent] });
+RadioPanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: RadioPanelModule, imports: [CommonModule, MatRadioModule, MatRippleModule, MatIconModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: RadioPanelModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [RadioPanelItemComponent, RadioPanelComponent],
@@ -207,4 +207,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
 
 export { RadioPanelComponent, RadioPanelItemComponent, RadioPanelModule };
 //# sourceMappingURL=bravura-ui-radio-panel.mjs.map
-//# sourceMappingURL=bravura-ui-radio-panel.mjs.map

package/fesm2020/bravura-ui-selection-panel.mjs

@@ -131,9 +131,9 @@ class SelectionPanelItemComponent {
         }
     }
 }
-SelectionPanelItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: SelectionPanelItemComponent, deps: [{ token: SELECTION_PANEL_GROUP }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SelectionPanelItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: SelectionPanelItemComponent, selector: "bui-selection-panel-item", inputs: { title: "title", shadedHeader: "shadedHeader", selectable: "selectable", 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", "class.bui-unselectable": "!selectable" }, classAttribute: "bui-selection-panel-item" }, viewQueries: [{ propertyName: "_bodyContent", first: true, predicate: ["contentBody"], descendants: true, static: true }, { 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\t[matRippleDisabled]=\"!selectable\"\n\t></div>\n\t<div\n\t\tclass=\"bui-selection-panel-item-header\"\n\t\t[ngClass]=\"{ 'bui-shaded': shadedHeader, 'bui-empty': empty }\"\n\t\t#toggleTrigger\n\t>\n\t\t<div\n\t\t\t*ngIf=\"shadedHeader\"\n\t\t\tclass=\"bui-selection-panel-item-header-underlay\"\n\t\t\t[ngClass]=\"{ 'bui-not-empty': !empty }\"\n\t\t></div>\n\t\t<div class=\"bui-selection-panel-item-header-container\">\n\t\t\t<mat-checkbox\n\t\t\t\t*ngIf=\"selectable; else noselectable\"\n\t\t\t\t[(ngModel)]=\"checked\"\n\t\t\t\t[color]=\"color\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t(change)=\"_markInteracted()\"\n\t\t\t\tstyle=\"flex-grow: 1\"\n\t\t\t>\n\t\t\t\t<div class=\"bui-selection-panel-item-title\" [innerHTML]=\"title\"></div>\n\t\t\t</mat-checkbox>\n\t\t\t<ng-template #noselectable>\n\t\t\t\t<div style=\"flex-grow: 1\" class=\"bui-selection-panel-item-title\" [innerHTML]=\"title\"></div>\n\t\t\t</ng-template>\n\t\t\t<ng-content select=\"[buiSelectionItemHeadingEnd]\"></ng-content>\n\t\t</div>\n\t\t<ng-content select=\"[buiSelectionItemSubtitle]\"></ng-content>\n\t</div>\n\t<div\n\t\t#contentBody\n\t\tclass=\"bui-selection-panel-item-content\"\n\t\t[class.bui-empty]=\"empty\"\n\t\t[class.bui-selectable]=\"!_selectByHeader\"\n\t\t(click)=\"_contentClicked($event)\"\n\t\t(cdkObserveContent)=\"contentChanged()\"\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;inset:0;z-index:-1}:host .bui-selection-panel-item-header{margin-top:calc(1rem - 4px);margin-bottom:calc(1rem - 4px);align-items:center;position:relative}:host .bui-selection-panel-item-header.bui-shaded:not(.bui-empty){margin-bottom:calc(2rem + 4px)}:host .bui-selection-panel-item-header-container{display:flex}:host .bui-selection-panel-item-header-container .mat-mdc-checkbox{z-index:1}:host .bui-selection-panel-item-title{font-size:larger;font-weight:700;white-space:normal;margin-top:2px}:host .bui-selection-panel-item-content:not(.bui-empty){margin-top:calc(2px + 1rem);margin-bottom:1rem}:host .bui-selection-panel-item-header-underlay{position:absolute;top:calc(3px - 1rem);left:calc(-1px - 1rem);right:calc(-1px - 1rem);bottom:calc(-3px - 1rem);border-radius:5px;background-color:#80808026}:host .bui-selection-panel-item-header-underlay.bui-not-empty{border-bottom-left-radius:0;border-bottom-right-radius:0}:host(:not(:first-child)){margin-top:1rem}:host(:not([hidden])){display:block}:host(:not(.bui-disabled,.bui-unselectable)):hover{border-width:2px;padding:0;border-color:#8080804d}:host(:not(.bui-disabled,.bui-unselectable)) .bui-selection-panel-item-content.bui-selectable{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i5.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: SelectionPanelItemComponent, decorators: [{
+SelectionPanelItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: SelectionPanelItemComponent, deps: [{ token: SELECTION_PANEL_GROUP }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SelectionPanelItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: SelectionPanelItemComponent, selector: "bui-selection-panel-item", inputs: { title: "title", shadedHeader: "shadedHeader", selectable: "selectable", 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", "class.bui-unselectable": "!selectable" }, classAttribute: "bui-selection-panel-item" }, viewQueries: [{ propertyName: "_bodyContent", first: true, predicate: ["contentBody"], descendants: true, static: true }, { 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\t[matRippleDisabled]=\"!selectable\"\n\t></div>\n\t<div\n\t\tclass=\"bui-selection-panel-item-header\"\n\t\t[ngClass]=\"{ 'bui-shaded': shadedHeader, 'bui-empty': empty }\"\n\t\t#toggleTrigger\n\t>\n\t\t<div\n\t\t\t*ngIf=\"shadedHeader\"\n\t\t\tclass=\"bui-selection-panel-item-header-underlay\"\n\t\t\t[ngClass]=\"{ 'bui-not-empty': !empty }\"\n\t\t></div>\n\t\t<div class=\"bui-selection-panel-item-header-container\">\n\t\t\t<mat-checkbox\n\t\t\t\t*ngIf=\"selectable; else noselectable\"\n\t\t\t\t[(ngModel)]=\"checked\"\n\t\t\t\t[color]=\"color\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t(change)=\"_markInteracted()\"\n\t\t\t\tstyle=\"flex-grow: 1\"\n\t\t\t>\n\t\t\t\t<div class=\"bui-selection-panel-item-title\" [innerHTML]=\"title\"></div>\n\t\t\t</mat-checkbox>\n\t\t\t<ng-template #noselectable>\n\t\t\t\t<div style=\"flex-grow: 1\" class=\"bui-selection-panel-item-title\" [innerHTML]=\"title\"></div>\n\t\t\t</ng-template>\n\t\t\t<ng-content select=\"[buiSelectionItemHeadingEnd]\"></ng-content>\n\t\t</div>\n\t\t<ng-content select=\"[buiSelectionItemSubtitle]\"></ng-content>\n\t</div>\n\t<div\n\t\t#contentBody\n\t\tclass=\"bui-selection-panel-item-content\"\n\t\t[class.bui-empty]=\"empty\"\n\t\t[class.bui-selectable]=\"!_selectByHeader\"\n\t\t(click)=\"_contentClicked($event)\"\n\t\t(cdkObserveContent)=\"contentChanged()\"\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;inset:0;z-index:-1}:host .bui-selection-panel-item-header{margin-top:calc(1rem - 4px);margin-bottom:calc(1rem - 4px);align-items:center;position:relative}:host .bui-selection-panel-item-header.bui-shaded:not(.bui-empty){margin-bottom:calc(2rem + 4px)}:host .bui-selection-panel-item-header-container{display:flex}:host .bui-selection-panel-item-header-container .mat-mdc-checkbox{z-index:1}:host .bui-selection-panel-item-title{font-size:larger;font-weight:700;white-space:normal;margin-top:2px}:host .bui-selection-panel-item-content:not(.bui-empty){margin-top:calc(2px + 1rem);margin-bottom:1rem}:host .bui-selection-panel-item-header-underlay{position:absolute;top:calc(3px - 1rem);left:calc(-1px - 1rem);right:calc(-1px - 1rem);bottom:calc(-3px - 1rem);border-radius:5px;background-color:#80808026}:host .bui-selection-panel-item-header-underlay.bui-not-empty{border-bottom-left-radius:0;border-bottom-right-radius:0}:host(:not(:first-child)){margin-top:1rem}:host(:not([hidden])){display:block}:host(:not(.bui-disabled,.bui-unselectable)):hover{border-width:2px;padding:0;border-color:#8080804d}:host(:not(.bui-disabled,.bui-unselectable)) .bui-selection-panel-item-content.bui-selectable{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i5.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: SelectionPanelItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bui-selection-panel-item', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'bui-selection-panel-item',
@@ -259,12 +259,12 @@ class SelectionPanelDirective {
         }
     }
 }
-SelectionPanelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: SelectionPanelDirective, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-SelectionPanelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.0", type: SelectionPanelDirective, selector: "bui-selection-panel", inputs: { color: "color", selectByHeader: "selectByHeader" }, host: { classAttribute: "bui-selection-panel bui-host" }, providers: [
+SelectionPanelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: SelectionPanelDirective, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+SelectionPanelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.6", type: SelectionPanelDirective, selector: "bui-selection-panel", inputs: { color: "color", selectByHeader: "selectByHeader" }, host: { classAttribute: "bui-selection-panel bui-host" }, 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"], usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: SelectionPanelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: SelectionPanelDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'bui-selection-panel',
@@ -286,10 +286,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
 
 class SelectionPanelModule {
 }
-SelectionPanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: SelectionPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SelectionPanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.0", ngImport: i0, type: SelectionPanelModule, declarations: [SelectionPanelDirective, SelectionPanelItemComponent], imports: [CommonModule, MatCheckboxModule, FormsModule, MatRippleModule, ObserversModule], exports: [SelectionPanelDirective, SelectionPanelItemComponent] });
-SelectionPanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: SelectionPanelModule, imports: [CommonModule, MatCheckboxModule, FormsModule, MatRippleModule, ObserversModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: SelectionPanelModule, decorators: [{
+SelectionPanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: SelectionPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SelectionPanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.6", ngImport: i0, type: SelectionPanelModule, declarations: [SelectionPanelDirective, SelectionPanelItemComponent], imports: [CommonModule, MatCheckboxModule, FormsModule, MatRippleModule, ObserversModule], exports: [SelectionPanelDirective, SelectionPanelItemComponent] });
+SelectionPanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: SelectionPanelModule, imports: [CommonModule, MatCheckboxModule, FormsModule, MatRippleModule, ObserversModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: SelectionPanelModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SelectionPanelDirective, SelectionPanelItemComponent],
@@ -304,4 +304,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
 
 export { SelectionPanelDirective, SelectionPanelItemComponent, SelectionPanelModule };
 //# sourceMappingURL=bravura-ui-selection-panel.mjs.map
-//# sourceMappingURL=bravura-ui-selection-panel.mjs.map

package/fesm2020/bravura-ui-skeletons.mjs

@@ -65,9 +65,9 @@ class SkeletonLoaderComponent extends ContentLoaderComponent {
         }
     }
 }
-SkeletonLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: SkeletonLoaderComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.Directionality }], target: i0.ɵɵFactoryTarget.Component });
-SkeletonLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: SkeletonLoaderComponent, selector: "bui-skeleton", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: SkeletonLoaderComponent, decorators: [{
+SkeletonLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: SkeletonLoaderComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.Directionality }], target: i0.ɵɵFactoryTarget.Component });
+SkeletonLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: SkeletonLoaderComponent, selector: "bui-skeleton", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: SkeletonLoaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bui-skeleton', template: '' }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.Directionality }]; } });
@@ -141,9 +141,9 @@ class SkeletonLoaderPresetsDirective {
         }
     }
 }
-SkeletonLoaderPresetsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: SkeletonLoaderPresetsDirective, deps: [{ token: SkeletonLoaderComponent, host: true }, { token: i0.ElementRef }, { token: SKELETON_PRESETS }], target: i0.ɵɵFactoryTarget.Directive });
-SkeletonLoaderPresetsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.0", type: SkeletonLoaderPresetsDirective, selector: "bui-skeleton[preset]", inputs: { preset: "preset" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: SkeletonLoaderPresetsDirective, decorators: [{
+SkeletonLoaderPresetsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: SkeletonLoaderPresetsDirective, deps: [{ token: SkeletonLoaderComponent, host: true }, { token: i0.ElementRef }, { token: SKELETON_PRESETS }], target: i0.ɵɵFactoryTarget.Directive });
+SkeletonLoaderPresetsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.6", type: SkeletonLoaderPresetsDirective, selector: "bui-skeleton[preset]", inputs: { preset: "preset" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: SkeletonLoaderPresetsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'bui-skeleton[preset]'
@@ -172,10 +172,10 @@ class SkeletonsModule {
         };
     }
 }
-SkeletonsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: SkeletonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkeletonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.0", ngImport: i0, type: SkeletonsModule, declarations: [SkeletonLoaderComponent, SkeletonLoaderPresetsDirective], imports: [CommonModule, ContentLoaderModule, BuiCommonModule], exports: [ContentLoaderModule, BuiCommonModule, SkeletonLoaderComponent, SkeletonLoaderPresetsDirective] });
-SkeletonsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: SkeletonsModule, providers: [provideSkeletonPresets(DEFAULT_PRESETS)], imports: [CommonModule, ContentLoaderModule, BuiCommonModule, ContentLoaderModule, BuiCommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: SkeletonsModule, decorators: [{
+SkeletonsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: SkeletonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkeletonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.6", ngImport: i0, type: SkeletonsModule, declarations: [SkeletonLoaderComponent, SkeletonLoaderPresetsDirective], imports: [CommonModule, ContentLoaderModule, BuiCommonModule], exports: [ContentLoaderModule, BuiCommonModule, SkeletonLoaderComponent, SkeletonLoaderPresetsDirective] });
+SkeletonsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: SkeletonsModule, providers: [provideSkeletonPresets(DEFAULT_PRESETS)], imports: [CommonModule, ContentLoaderModule, BuiCommonModule, ContentLoaderModule, BuiCommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: SkeletonsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SkeletonLoaderComponent, SkeletonLoaderPresetsDirective],
@@ -191,4 +191,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
 
 export { DEFAULT_PRESETS, SKELETON_PRESETS, SkeletonLoaderComponent, SkeletonLoaderPresetsDirective, SkeletonsModule };
 //# sourceMappingURL=bravura-ui-skeletons.mjs.map
-//# sourceMappingURL=bravura-ui-skeletons.mjs.map