@bravura/ui 2.2.0 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change history
 
+## 2.3.0 (2022-09-02)
+
+* build(storybook): monitor on remote host ([b95618e](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/b95618e))
+* feat(panel): add panel sections ([922e071](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/922e071))
+
 ## 2.2.0 (2022-09-01)
 
 * feat(file-upload): limit file size ([d9c8a1c](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/d9c8a1c))

package/esm2020/panel/panel-section.component.mjs

@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * `bui-panel-section`s are subdivisions of `bui-panel` that rearrange their orientation based on the width of the container element.
+ */
+export class PanelSectionComponent {
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+    }
+    ngOnInit() {
+        this._parentElement = this._elementRef.nativeElement.parentElement;
+        this._parentElement.classList.add('bui-panel-section-container');
+    }
+}
+PanelSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PanelSectionComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+PanelSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", 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}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PanelSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bui-panel-section', host: {
+                        class: 'bui-panel-section'
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, 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}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFuZWwtc2VjdGlvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy91aS9wYW5lbC9wYW5lbC1zZWN0aW9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uL3Byb2plY3RzL3VpL3BhbmVsL3BhbmVsLXNlY3Rpb24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBc0IsTUFBTSxlQUFlLENBQUM7O0FBRXZGOztHQUVHO0FBVUgsTUFBTSxPQUFPLHFCQUFxQjtJQUdqQyxZQUFvQixXQUFvQztRQUFwQyxnQkFBVyxHQUFYLFdBQVcsQ0FBeUI7SUFBRyxDQUFDO0lBRTVELFFBQVE7UUFDUCxJQUFJLENBQUMsY0FBYyxHQUFHLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUFDLGFBQWMsQ0FBQztRQUNwRSxJQUFJLENBQUMsY0FBYyxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsNkJBQTZCLENBQUMsQ0FBQztJQUNsRSxDQUFDOztrSEFSVyxxQkFBcUI7c0dBQXJCLHFCQUFxQix3R0NkbEMsNkJBQ0E7MkZEYWEscUJBQXFCO2tCQVRqQyxTQUFTOytCQUNDLG1CQUFtQixRQUd2Qjt3QkFDTCxLQUFLLEVBQUUsbUJBQW1CO3FCQUMxQixtQkFDZ0IsdUJBQXVCLENBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIEVsZW1lbnRSZWYsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG4vKipcbiAqIGBidWktcGFuZWwtc2VjdGlvbmBzIGFyZSBzdWJkaXZpc2lvbnMgb2YgYGJ1aS1wYW5lbGAgdGhhdCByZWFycmFuZ2UgdGhlaXIgb3JpZW50YXRpb24gYmFzZWQgb24gdGhlIHdpZHRoIG9mIHRoZSBjb250YWluZXIgZWxlbWVudC5cbiAqL1xuQENvbXBvbmVudCh7XG5cdHNlbGVjdG9yOiAnYnVpLXBhbmVsLXNlY3Rpb24nLFxuXHR0ZW1wbGF0ZVVybDogJy4vcGFuZWwtc2VjdGlvbi5jb21wb25lbnQuaHRtbCcsXG5cdHN0eWxlVXJsczogWycuL3BhbmVsLXNlY3Rpb24uY29tcG9uZW50LnNjc3MnXSxcblx0aG9zdDoge1xuXHRcdGNsYXNzOiAnYnVpLXBhbmVsLXNlY3Rpb24nXG5cdH0sXG5cdGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIFBhbmVsU2VjdGlvbkNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cdHByaXZhdGUgX3BhcmVudEVsZW1lbnQhOiBIVE1MRWxlbWVudDtcblxuXHRjb25zdHJ1Y3Rvcihwcml2YXRlIF9lbGVtZW50UmVmOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50Pikge31cblxuXHRuZ09uSW5pdCgpOiB2b2lkIHtcblx0XHR0aGlzLl9wYXJlbnRFbGVtZW50ID0gdGhpcy5fZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LnBhcmVudEVsZW1lbnQhO1xuXHRcdHRoaXMuX3BhcmVudEVsZW1lbnQuY2xhc3NMaXN0LmFkZCgnYnVpLXBhbmVsLXNlY3Rpb24tY29udGFpbmVyJyk7XG5cdH1cbn1cbiIsIjxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiJdfQ==

package/esm2020/panel/panel.component.mjs

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/material/card";
+import * as i2 from "@bravura/ui/behavior";
 /**
  * A `bui-panel` consists of a `mat-card` and a tinted backdrop.
  *
@@ -8,12 +9,20 @@ import * as i1 from "@angular/material/card";
  * The backdrop is nearly transparent, blending the theme palette `color`
  * and the effective background color of the DOM ancestors.
  *
- * `bui-panel` supports all the content child directives of `mat-card`.
+ * `bui-panel` supports all the content child directives of `mat-card` as well as `bui-panel-section`.
+ *
+ * `bui-panel-section`s are subdivisions of `bui-panel` that rearrange their orientation based on the width of the container element.
  *
  */
 export class PanelComponent {
     constructor(_cd) {
         this._cd = _cd;
+        /**
+         * The width of the host element, at which the panel section container will change its orientation.
+         */
+        this.breakpoint = 600;
+        /** @ignore */
+        this._width = 600;
         this._color = 'primary';
         this._appearance = 'flat';
     }
@@ -44,14 +53,21 @@ export class PanelComponent {
         this._cd.markForCheck();
     }
     ngOnInit() { }
+    /** @ignore */
+    _resized(width) {
+        this._width = width;
+        this._cd.markForCheck();
+    }
 }
 PanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PanelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: PanelComponent, selector: "bui-panel", inputs: { backdropClass: "backdropClass", cardClass: "cardClass", color: "color", appearance: "appearance" }, host: { classAttribute: "bui-panel bui-host" }, ngImport: i0, template: "<div class=\"bui-panel-backdrop {{ backdropClass }} bui-bg-{{ color || 'none' }}\"></div>\n<mat-card\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{position:relative}:host .bui-panel-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:4px;opacity:.1}:host .mat-card{background-color:transparent}:host .bui-panel-border{border-width:1px;border-style:solid}\n"], dependencies: [{ kind: "component", type: i1.MatCard, selector: "mat-card", exportAs: ["matCard"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", 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\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{position:relative}:host .bui-panel-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:4px;opacity:.1}:host .mat-card{background-color:transparent}: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(.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", 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: "14.1.3", ngImport: i0, type: PanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bui-panel', host: {
-                        class: 'bui-panel bui-host'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bui-panel-backdrop {{ backdropClass }} bui-bg-{{ color || 'none' }}\"></div>\n<mat-card\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{position:relative}:host .bui-panel-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:4px;opacity:.1}:host .mat-card{background-color:transparent}:host .bui-panel-border{border-width:1px;border-style:solid}\n"] }]
+                        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\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{position:relative}:host .bui-panel-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:4px;opacity:.1}:host .mat-card{background-color:transparent}: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(.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: [{
                 type: Input
             }], cardClass: [{
@@ -60,5 +76,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
                 type: Input
             }], appearance: [{
                 type: Input
+            }], breakpoint: [{
+                type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFuZWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvdWkvcGFuZWwvcGFuZWwuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vcHJvamVjdHMvdWkvcGFuZWwvcGFuZWwuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFxQixTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDOzs7QUFHckc7Ozs7Ozs7OztHQVNHO0FBVUgsTUFBTSxPQUFPLGNBQWM7SUErQzFCLFlBQW9CLEdBQXNCO1FBQXRCLFFBQUcsR0FBSCxHQUFHLENBQW1CO1FBSmxDLFdBQU0sR0FBaUIsU0FBUyxDQUFDO1FBRWpDLGdCQUFXLEdBQW1DLE1BQU0sQ0FBQztJQUVoQixDQUFDO0lBbEM5Qzs7T0FFRztJQUNILElBQ0ksS0FBSztRQUNSLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQztJQUNwQixDQUFDO0lBQ0QsSUFBSSxLQUFLLENBQUMsS0FBbUI7UUFDNUIsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUM7UUFDcEIsSUFBSSxDQUFDLEdBQUcsQ0FBQyxZQUFZLEVBQUUsQ0FBQztJQUN6QixDQUFDO0lBRUQ7Ozs7Ozs7O09BUUc7SUFDSCxJQUNJLFVBQVU7UUFDYixPQUFPLElBQUksQ0FBQyxXQUFXLENBQUM7SUFDekIsQ0FBQztJQUNELElBQUksVUFBVSxDQUFDLEtBQXFDO1FBQ25ELElBQUksQ0FBQyxXQUFXLEdBQUcsS0FBSyxDQUFDO1FBQ3pCLElBQUksQ0FBQyxHQUFHLENBQUMsWUFBWSxFQUFFLENBQUM7SUFDekIsQ0FBQztJQVFELFFBQVEsS0FBVSxDQUFDOzsyR0FqRFAsY0FBYzsrRkFBZCxjQUFjLCtNQ3RCM0IsaVZBUUE7MkZEY2EsY0FBYztrQkFUMUIsU0FBUzsrQkFDQyxXQUFXLFFBR2Y7d0JBQ0wsS0FBSyxFQUFFLG9CQUFvQjtxQkFDM0IsbUJBQ2dCLHVCQUF1QixDQUFDLE1BQU07d0dBTy9DLGFBQWE7c0JBRFosS0FBSztnQkFPTixTQUFTO3NCQURSLEtBQUs7Z0JBT0YsS0FBSztzQkFEUixLQUFLO2dCQW1CRixVQUFVO3NCQURiLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ2hhbmdlRGV0ZWN0b3JSZWYsIENvbXBvbmVudCwgSW5wdXQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVGhlbWVQYWxldHRlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvY29yZSc7XG5cbi8qKlxuICogQSBgYnVpLXBhbmVsYCBjb25zaXN0cyBvZiBhIGBtYXQtY2FyZGAgYW5kIGEgdGludGVkIGJhY2tkcm9wLlxuICpcbiAqIFVubGlrZSBgbWF0LWNhcmRgLCBgYnVpLXBhbmVsYCBoYXMgYSBmbGF0IGFwcGVhcmFuY2UgYnkgZGVmYXVsdCBhbmQgYSB0cmFuc3BhcmVudCBiYWNrZ3JvdW5kLlxuICogVGhlIGJhY2tkcm9wIGlzIG5lYXJseSB0cmFuc3BhcmVudCwgYmxlbmRpbmcgdGhlIHRoZW1lIHBhbGV0dGUgYGNvbG9yYFxuICogYW5kIHRoZSBlZmZlY3RpdmUgYmFja2dyb3VuZCBjb2xvciBvZiB0aGUgRE9NIGFuY2VzdG9ycy5cbiAqXG4gKiBgYnVpLXBhbmVsYCBzdXBwb3J0cyBhbGwgdGhlIGNvbnRlbnQgY2hpbGQgZGlyZWN0aXZlcyBvZiBgbWF0LWNhcmRgLlxuICpcbiAqL1xuQENvbXBvbmVudCh7XG5cdHNlbGVjdG9yOiAnYnVpLXBhbmVsJyxcblx0dGVtcGxhdGVVcmw6ICcuL3BhbmVsLmNvbXBvbmVudC5odG1sJyxcblx0c3R5bGVVcmxzOiBbJy4vcGFuZWwuY29tcG9uZW50LnNjc3MnXSxcblx0aG9zdDoge1xuXHRcdGNsYXNzOiAnYnVpLXBhbmVsIGJ1aS1ob3N0J1xuXHR9LFxuXHRjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxufSlcbmV4cG9ydCBjbGFzcyBQYW5lbENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cdC8qKlxuXHQgKiBBZGRpdGlvbmFsIHN0eWxlIGNsYXNzZXMgb24gdGhlIHRpbnRlZCBiYWNrZHJvcCBlbGVtZW50LlxuXHQgKi9cblx0QElucHV0KClcblx0YmFja2Ryb3BDbGFzcz86IHN0cmluZztcblxuXHQvKipcblx0ICogQWRkaXRpb25hbCBzdHlsZSBjbGFzc2VzIG9uIHRoZSBgPG1hdC1jYXJkPmAgZWxlbWVudC5cblx0ICovXG5cdEBJbnB1dCgpXG5cdGNhcmRDbGFzcz86IHN0cmluZztcblxuXHQvKipcblx0ICogVGhpcyBwcm9wZXJ0eSBkZWZpbmVzIHRoZSBiYWNrZ3JvdW5kIChzaGFkZWQpIGFuZCBib3JkZXIgY29sb3JzIG9mIHRoZSBwYW5lbFxuXHQgKi9cblx0QElucHV0KClcblx0Z2V0IGNvbG9yKCk6IFRoZW1lUGFsZXR0ZSB7XG5cdFx0cmV0dXJuIHRoaXMuX2NvbG9yO1xuXHR9XG5cdHNldCBjb2xvcih2YWx1ZTogVGhlbWVQYWxldHRlKSB7XG5cdFx0dGhpcy5fY29sb3IgPSB2YWx1ZTtcblx0XHR0aGlzLl9jZC5tYXJrRm9yQ2hlY2soKTtcblx0fVxuXG5cdC8qKlxuXHQgKiBJbiBjb250cmFzdCB0byB1c2luZyBhIGBtYXQtY2FyZGAgYWxvbmUsIGEgYGJ1aS1wYW5lbGAgZG9lcyBub3QgaGF2ZSBhIGVsZXZhdGVkIGFwcGVhcmFuY2UgYnkgZGVmYXVsdC5cblx0ICpcblx0ICogVGhpcyBwcm9wZXJ0eSBjYW4gY2hhbmdlIHRoZSBkZWZhdWx0IGFwcGVhcmFuY2UgdG9cblx0ICpcblx0ICogKiBgcmFpc2VkYCAtIHRoZSBvcmlnaW5hbCBgbWF0LWNhcmRgIGRlZmF1bHRcblx0ICogKiBgb3V0bGluZWAgLSBhIGBtYXQtY2FyZGAgd2l0aCBib3JkZXJzXG5cdCAqICogYGZsYXRgIC0gbm8gYm9yZGVyIG9yIGVsZXZhdGlvblxuXHQgKi9cblx0QElucHV0KClcblx0Z2V0IGFwcGVhcmFuY2UoKTogJ291dGxpbmVkJyB8ICdyYWlzZWQnIHwgJ2ZsYXQnIHtcblx0XHRyZXR1cm4gdGhpcy5fYXBwZWFyYW5jZTtcblx0fVxuXHRzZXQgYXBwZWFyYW5jZSh2YWx1ZTogJ291dGxpbmVkJyB8ICdyYWlzZWQnIHwgJ2ZsYXQnKSB7XG5cdFx0dGhpcy5fYXBwZWFyYW5jZSA9IHZhbHVlO1xuXHRcdHRoaXMuX2NkLm1hcmtGb3JDaGVjaygpO1xuXHR9XG5cblx0cHJpdmF0ZSBfY29sb3I6IFRoZW1lUGFsZXR0ZSA9ICdwcmltYXJ5JztcblxuXHRwcml2YXRlIF9hcHBlYXJhbmNlOiAnb3V0bGluZWQnIHwgJ3JhaXNlZCcgfCAnZmxhdCcgPSAnZmxhdCc7XG5cblx0Y29uc3RydWN0b3IocHJpdmF0ZSBfY2Q6IENoYW5nZURldGVjdG9yUmVmKSB7fVxuXG5cdG5nT25Jbml0KCk6IHZvaWQge31cbn1cbiIsIjxkaXYgY2xhc3M9XCJidWktcGFuZWwtYmFja2Ryb3Age3sgYmFja2Ryb3BDbGFzcyB9fSBidWktYmcte3sgY29sb3IgfHwgJ25vbmUnIH19XCI+PC9kaXY+XG48bWF0LWNhcmRcblx0Y2xhc3M9XCJidWktYm9yZGVyLXt7IGNvbG9yIHx8ICdub25lJyB9fSB7eyBjYXJkQ2xhc3MgfX0ge3tcblx0XHRhcHBlYXJhbmNlID09PSAnZmxhdCcgPyAnbWF0LWVsZXZhdGlvbi16JyA6IGFwcGVhcmFuY2UgPT09ICdvdXRsaW5lZCcgPyAnbWF0LWVsZXZhdGlvbi16IGJ1aS1wYW5lbC1ib3JkZXInIDogJydcblx0fX1cIlxuPlxuXHQ8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG48L21hdC1jYXJkPlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFuZWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvdWkvcGFuZWwvcGFuZWwuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vcHJvamVjdHMvdWkvcGFuZWwvcGFuZWwuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFxQixTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDOzs7O0FBR3JHOzs7Ozs7Ozs7OztHQVdHO0FBWUgsTUFBTSxPQUFPLGNBQWM7SUF3RDFCLFlBQW9CLEdBQXNCO1FBQXRCLFFBQUcsR0FBSCxHQUFHLENBQW1CO1FBYjFDOztXQUVHO1FBRUgsZUFBVSxHQUFHLEdBQUcsQ0FBQztRQUVqQixjQUFjO1FBQ2QsV0FBTSxHQUFHLEdBQUcsQ0FBQztRQUVMLFdBQU0sR0FBaUIsU0FBUyxDQUFDO1FBRWpDLGdCQUFXLEdBQW1DLE1BQU0sQ0FBQztJQUVoQixDQUFDO0lBM0M5Qzs7T0FFRztJQUNILElBQ0ksS0FBSztRQUNSLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQztJQUNwQixDQUFDO0lBQ0QsSUFBSSxLQUFLLENBQUMsS0FBbUI7UUFDNUIsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUM7UUFDcEIsSUFBSSxDQUFDLEdBQUcsQ0FBQyxZQUFZLEVBQUUsQ0FBQztJQUN6QixDQUFDO0lBRUQ7Ozs7Ozs7O09BUUc7SUFDSCxJQUNJLFVBQVU7UUFDYixPQUFPLElBQUksQ0FBQyxXQUFXLENBQUM7SUFDekIsQ0FBQztJQUNELElBQUksVUFBVSxDQUFDLEtBQXFDO1FBQ25ELElBQUksQ0FBQyxXQUFXLEdBQUcsS0FBSyxDQUFDO1FBQ3pCLElBQUksQ0FBQyxHQUFHLENBQUMsWUFBWSxFQUFFLENBQUM7SUFDekIsQ0FBQztJQWlCRCxRQUFRLEtBQVUsQ0FBQztJQUVuQixjQUFjO0lBQ2QsUUFBUSxDQUFDLEtBQWE7UUFDckIsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUM7UUFDcEIsSUFBSSxDQUFDLEdBQUcsQ0FBQyxZQUFZLEVBQUUsQ0FBQztJQUN6QixDQUFDOzsyR0FoRVcsY0FBYzsrRkFBZCxjQUFjLGtXQzFCM0IsK1pBWUE7MkZEY2EsY0FBYztrQkFYMUIsU0FBUzsrQkFDQyxXQUFXLFFBR2Y7d0JBQ0wsS0FBSyxFQUFFLG9CQUFvQjt3QkFDM0IsNEJBQTRCLEVBQUUscUJBQXFCO3dCQUNuRCw4QkFBOEIsRUFBRSxzQkFBc0I7cUJBQ3RELG1CQUNnQix1QkFBdUIsQ0FBQyxNQUFNO3dHQU8vQyxhQUFhO3NCQURaLEtBQUs7Z0JBT04sU0FBUztzQkFEUixLQUFLO2dCQU9GLEtBQUs7c0JBRFIsS0FBSztnQkFtQkYsVUFBVTtzQkFEYixLQUFLO2dCQWFOLFVBQVU7c0JBRFQsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDaGFuZ2VEZXRlY3RvclJlZiwgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBUaGVtZVBhbGV0dGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9jb3JlJztcblxuLyoqXG4gKiBBIGBidWktcGFuZWxgIGNvbnNpc3RzIG9mIGEgYG1hdC1jYXJkYCBhbmQgYSB0aW50ZWQgYmFja2Ryb3AuXG4gKlxuICogVW5saWtlIGBtYXQtY2FyZGAsIGBidWktcGFuZWxgIGhhcyBhIGZsYXQgYXBwZWFyYW5jZSBieSBkZWZhdWx0IGFuZCBhIHRyYW5zcGFyZW50IGJhY2tncm91bmQuXG4gKiBUaGUgYmFja2Ryb3AgaXMgbmVhcmx5IHRyYW5zcGFyZW50LCBibGVuZGluZyB0aGUgdGhlbWUgcGFsZXR0ZSBgY29sb3JgXG4gKiBhbmQgdGhlIGVmZmVjdGl2ZSBiYWNrZ3JvdW5kIGNvbG9yIG9mIHRoZSBET00gYW5jZXN0b3JzLlxuICpcbiAqIGBidWktcGFuZWxgIHN1cHBvcnRzIGFsbCB0aGUgY29udGVudCBjaGlsZCBkaXJlY3RpdmVzIG9mIGBtYXQtY2FyZGAgYXMgd2VsbCBhcyBgYnVpLXBhbmVsLXNlY3Rpb25gLlxuICpcbiAqIGBidWktcGFuZWwtc2VjdGlvbmBzIGFyZSBzdWJkaXZpc2lvbnMgb2YgYGJ1aS1wYW5lbGAgdGhhdCByZWFycmFuZ2UgdGhlaXIgb3JpZW50YXRpb24gYmFzZWQgb24gdGhlIHdpZHRoIG9mIHRoZSBjb250YWluZXIgZWxlbWVudC5cbiAqXG4gKi9cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogJ2J1aS1wYW5lbCcsXG5cdHRlbXBsYXRlVXJsOiAnLi9wYW5lbC5jb21wb25lbnQuaHRtbCcsXG5cdHN0eWxlVXJsczogWycuL3BhbmVsLmNvbXBvbmVudC5zY3NzJ10sXG5cdGhvc3Q6IHtcblx0XHRjbGFzczogJ2J1aS1wYW5lbCBidWktaG9zdCcsXG5cdFx0J1tjbGFzcy5idWktcGFuZWwtdmVydGljYWxdJzogYF93aWR0aCA8IGJyZWFrcG9pbnRgLFxuXHRcdCdbY2xhc3MuYnVpLXBhbmVsLWhvcml6b250YWxdJzogYF93aWR0aCA+PSBicmVha3BvaW50YFxuXHR9LFxuXHRjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxufSlcbmV4cG9ydCBjbGFzcyBQYW5lbENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cdC8qKlxuXHQgKiBBZGRpdGlvbmFsIHN0eWxlIGNsYXNzZXMgb24gdGhlIHRpbnRlZCBiYWNrZHJvcCBlbGVtZW50LlxuXHQgKi9cblx0QElucHV0KClcblx0YmFja2Ryb3BDbGFzcz86IHN0cmluZztcblxuXHQvKipcblx0ICogQWRkaXRpb25hbCBzdHlsZSBjbGFzc2VzIG9uIHRoZSBgPG1hdC1jYXJkPmAgZWxlbWVudC5cblx0ICovXG5cdEBJbnB1dCgpXG5cdGNhcmRDbGFzcz86IHN0cmluZztcblxuXHQvKipcblx0ICogVGhpcyBwcm9wZXJ0eSBkZWZpbmVzIHRoZSBiYWNrZ3JvdW5kIChzaGFkZWQpIGFuZCBib3JkZXIgY29sb3JzIG9mIHRoZSBwYW5lbFxuXHQgKi9cblx0QElucHV0KClcblx0Z2V0IGNvbG9yKCk6IFRoZW1lUGFsZXR0ZSB7XG5cdFx0cmV0dXJuIHRoaXMuX2NvbG9yO1xuXHR9XG5cdHNldCBjb2xvcih2YWx1ZTogVGhlbWVQYWxldHRlKSB7XG5cdFx0dGhpcy5fY29sb3IgPSB2YWx1ZTtcblx0XHR0aGlzLl9jZC5tYXJrRm9yQ2hlY2soKTtcblx0fVxuXG5cdC8qKlxuXHQgKiBJbiBjb250cmFzdCB0byB1c2luZyBhIGBtYXQtY2FyZGAgYWxvbmUsIGEgYGJ1aS1wYW5lbGAgZG9lcyBub3QgaGF2ZSBhIGVsZXZhdGVkIGFwcGVhcmFuY2UgYnkgZGVmYXVsdC5cblx0ICpcblx0ICogVGhpcyBwcm9wZXJ0eSBjYW4gY2hhbmdlIHRoZSBkZWZhdWx0IGFwcGVhcmFuY2UgdG9cblx0ICpcblx0ICogKiBgcmFpc2VkYCAtIHRoZSBvcmlnaW5hbCBgbWF0LWNhcmRgIGRlZmF1bHRcblx0ICogKiBgb3V0bGluZWAgLSBhIGBtYXQtY2FyZGAgd2l0aCBib3JkZXJzXG5cdCAqICogYGZsYXRgIC0gbm8gYm9yZGVyIG9yIGVsZXZhdGlvblxuXHQgKi9cblx0QElucHV0KClcblx0Z2V0IGFwcGVhcmFuY2UoKTogJ291dGxpbmVkJyB8ICdyYWlzZWQnIHwgJ2ZsYXQnIHtcblx0XHRyZXR1cm4gdGhpcy5fYXBwZWFyYW5jZTtcblx0fVxuXHRzZXQgYXBwZWFyYW5jZSh2YWx1ZTogJ291dGxpbmVkJyB8ICdyYWlzZWQnIHwgJ2ZsYXQnKSB7XG5cdFx0dGhpcy5fYXBwZWFyYW5jZSA9IHZhbHVlO1xuXHRcdHRoaXMuX2NkLm1hcmtGb3JDaGVjaygpO1xuXHR9XG5cblx0LyoqXG5cdCAqIFRoZSB3aWR0aCBvZiB0aGUgaG9zdCBlbGVtZW50LCBhdCB3aGljaCB0aGUgcGFuZWwgc2VjdGlvbiBjb250YWluZXIgd2lsbCBjaGFuZ2UgaXRzIG9yaWVudGF0aW9uLlxuXHQgKi9cblx0QElucHV0KClcblx0YnJlYWtwb2ludCA9IDYwMDtcblxuXHQvKiogQGlnbm9yZSAqL1xuXHRfd2lkdGggPSA2MDA7XG5cblx0cHJpdmF0ZSBfY29sb3I6IFRoZW1lUGFsZXR0ZSA9ICdwcmltYXJ5JztcblxuXHRwcml2YXRlIF9hcHBlYXJhbmNlOiAnb3V0bGluZWQnIHwgJ3JhaXNlZCcgfCAnZmxhdCcgPSAnZmxhdCc7XG5cblx0Y29uc3RydWN0b3IocHJpdmF0ZSBfY2Q6IENoYW5nZURldGVjdG9yUmVmKSB7fVxuXG5cdG5nT25Jbml0KCk6IHZvaWQge31cblxuXHQvKiogQGlnbm9yZSAqL1xuXHRfcmVzaXplZCh3aWR0aDogbnVtYmVyKTogdm9pZCB7XG5cdFx0dGhpcy5fd2lkdGggPSB3aWR0aDtcblx0XHR0aGlzLl9jZC5tYXJrRm9yQ2hlY2soKTtcblx0fVxufVxuIiwiPGRpdlxuXHRjbGFzcz1cImJ1aS1wYW5lbC1iYWNrZHJvcCB7eyBiYWNrZHJvcENsYXNzIH19IGJ1aS1iZy17eyBjb2xvciB8fCAnbm9uZScgfX1cIlxuXHRbYnVpU2l6aW5nQnldPVwiJ3BhcmVudCdcIlxuXHQoYnVpUmVzaXplZCk9XCJfcmVzaXplZCgkZXZlbnQud2lkdGgpXCJcbj48L2Rpdj5cbjxtYXQtY2FyZFxuXHRjbGFzcz1cImJ1aS1ib3JkZXIte3sgY29sb3IgfHwgJ25vbmUnIH19IHt7IGNhcmRDbGFzcyB9fSB7e1xuXHRcdGFwcGVhcmFuY2UgPT09ICdmbGF0JyA/ICdtYXQtZWxldmF0aW9uLXonIDogYXBwZWFyYW5jZSA9PT0gJ291dGxpbmVkJyA/ICdtYXQtZWxldmF0aW9uLXogYnVpLXBhbmVsLWJvcmRlcicgOiAnJ1xuXHR9fVwiXG4+XG5cdDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbjwvbWF0LWNhcmQ+XG4iXX0=

package/esm2020/panel/panel.module.mjs

@@ -2,19 +2,21 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { PanelComponent } from './panel.component';
 import { MatCardModule } from '@angular/material/card';
+import { BehaviorModule } from '@bravura/ui/behavior';
+import { PanelSectionComponent } from './panel-section.component';
 import * as i0 from "@angular/core";
 export class PanelModule {
 }
 PanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: PanelModule, declarations: [PanelComponent], imports: [CommonModule, MatCardModule], exports: [MatCardModule, PanelComponent] });
-PanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PanelModule, imports: [CommonModule, MatCardModule, MatCardModule] });
+PanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: PanelModule, declarations: [PanelComponent, PanelSectionComponent], imports: [CommonModule, MatCardModule, BehaviorModule], exports: [MatCardModule, PanelComponent, PanelSectionComponent] });
+PanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PanelModule, imports: [CommonModule, MatCardModule, BehaviorModule, MatCardModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PanelModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [PanelComponent],
-                    imports: [CommonModule, MatCardModule],
-                    exports: [MatCardModule, PanelComponent]
+                    declarations: [PanelComponent, PanelSectionComponent],
+                    imports: [CommonModule, MatCardModule, BehaviorModule],
+                    exports: [MatCardModule, PanelComponent, PanelSectionComponent]
                 }]
         }] });
-export { PanelComponent };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFuZWwubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvdWkvcGFuZWwvcGFuZWwubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUNuRCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7O0FBT3ZELE1BQU0sT0FBTyxXQUFXOzt3R0FBWCxXQUFXO3lHQUFYLFdBQVcsaUJBSlIsY0FBYyxhQUNuQixZQUFZLEVBQUUsYUFBYSxhQUMzQixhQUFhLEVBQUUsY0FBYzt5R0FFM0IsV0FBVyxZQUhiLFlBQVksRUFBRSxhQUFhLEVBQzNCLGFBQWE7MkZBRVgsV0FBVztrQkFMdkIsUUFBUTttQkFBQztvQkFDVCxZQUFZLEVBQUUsQ0FBQyxjQUFjLENBQUM7b0JBQzlCLE9BQU8sRUFBRSxDQUFDLFlBQVksRUFBRSxhQUFhLENBQUM7b0JBQ3RDLE9BQU8sRUFBRSxDQUFDLGFBQWEsRUFBRSxjQUFjLENBQUM7aUJBQ3hDOztBQUdELE9BQU8sRUFBRSxjQUFjLEVBQUUsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgUGFuZWxDb21wb25lbnQgfSBmcm9tICcuL3BhbmVsLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBNYXRDYXJkTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvY2FyZCc7XG5cbkBOZ01vZHVsZSh7XG5cdGRlY2xhcmF0aW9uczogW1BhbmVsQ29tcG9uZW50XSxcblx0aW1wb3J0czogW0NvbW1vbk1vZHVsZSwgTWF0Q2FyZE1vZHVsZV0sXG5cdGV4cG9ydHM6IFtNYXRDYXJkTW9kdWxlLCBQYW5lbENvbXBvbmVudF1cbn0pXG5leHBvcnQgY2xhc3MgUGFuZWxNb2R1bGUge31cblxuZXhwb3J0IHsgUGFuZWxDb21wb25lbnQgfTtcbiJdfQ==
+export { PanelComponent, PanelSectionComponent };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFuZWwubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvdWkvcGFuZWwvcGFuZWwubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUNuRCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDdkQsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQ3RELE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLDJCQUEyQixDQUFDOztBQU9sRSxNQUFNLE9BQU8sV0FBVzs7d0dBQVgsV0FBVzt5R0FBWCxXQUFXLGlCQUpSLGNBQWMsRUFBRSxxQkFBcUIsYUFDMUMsWUFBWSxFQUFFLGFBQWEsRUFBRSxjQUFjLGFBQzNDLGFBQWEsRUFBRSxjQUFjLEVBQUUscUJBQXFCO3lHQUVsRCxXQUFXLFlBSGIsWUFBWSxFQUFFLGFBQWEsRUFBRSxjQUFjLEVBQzNDLGFBQWE7MkZBRVgsV0FBVztrQkFMdkIsUUFBUTttQkFBQztvQkFDVCxZQUFZLEVBQUUsQ0FBQyxjQUFjLEVBQUUscUJBQXFCLENBQUM7b0JBQ3JELE9BQU8sRUFBRSxDQUFDLFlBQVksRUFBRSxhQUFhLEVBQUUsY0FBYyxDQUFDO29CQUN0RCxPQUFPLEVBQUUsQ0FBQyxhQUFhLEVBQUUsY0FBYyxFQUFFLHFCQUFxQixDQUFDO2lCQUMvRDs7QUFHRCxPQUFPLEVBQUUsY0FBYyxFQUFFLHFCQUFxQixFQUFFLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IFBhbmVsQ29tcG9uZW50IH0gZnJvbSAnLi9wYW5lbC5jb21wb25lbnQnO1xuaW1wb3J0IHsgTWF0Q2FyZE1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2NhcmQnO1xuaW1wb3J0IHsgQmVoYXZpb3JNb2R1bGUgfSBmcm9tICdAYnJhdnVyYS91aS9iZWhhdmlvcic7XG5pbXBvcnQgeyBQYW5lbFNlY3Rpb25Db21wb25lbnQgfSBmcm9tICcuL3BhbmVsLXNlY3Rpb24uY29tcG9uZW50JztcblxuQE5nTW9kdWxlKHtcblx0ZGVjbGFyYXRpb25zOiBbUGFuZWxDb21wb25lbnQsIFBhbmVsU2VjdGlvbkNvbXBvbmVudF0sXG5cdGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIE1hdENhcmRNb2R1bGUsIEJlaGF2aW9yTW9kdWxlXSxcblx0ZXhwb3J0czogW01hdENhcmRNb2R1bGUsIFBhbmVsQ29tcG9uZW50LCBQYW5lbFNlY3Rpb25Db21wb25lbnRdXG59KVxuZXhwb3J0IGNsYXNzIFBhbmVsTW9kdWxlIHt9XG5cbmV4cG9ydCB7IFBhbmVsQ29tcG9uZW50LCBQYW5lbFNlY3Rpb25Db21wb25lbnQgfTtcbiJdfQ==

package/fesm2015/bravura-ui-panel.mjs

@@ -3,6 +3,8 @@ import { Component, ChangeDetectionStrategy, Input, NgModule } from '@angular/co
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
+import * as i2 from '@bravura/ui/behavior';
+import { BehaviorModule } from '@bravura/ui/behavior';
 
 /**
  * A `bui-panel` consists of a `mat-card` and a tinted backdrop.
@@ -11,12 +13,20 @@ import { MatCardModule } from '@angular/material/card';
  * The backdrop is nearly transparent, blending the theme palette `color`
  * and the effective background color of the DOM ancestors.
  *
- * `bui-panel` supports all the content child directives of `mat-card`.
+ * `bui-panel` supports all the content child directives of `mat-card` as well as `bui-panel-section`.
+ *
+ * `bui-panel-section`s are subdivisions of `bui-panel` that rearrange their orientation based on the width of the container element.
  *
  */
 class PanelComponent {
     constructor(_cd) {
         this._cd = _cd;
+        /**
+         * The width of the host element, at which the panel section container will change its orientation.
+         */
+        this.breakpoint = 600;
+        /** @ignore */
+        this._width = 600;
         this._color = 'primary';
         this._appearance = 'flat';
     }
@@ -47,14 +57,21 @@ class PanelComponent {
         this._cd.markForCheck();
     }
     ngOnInit() { }
+    /** @ignore */
+    _resized(width) {
+        this._width = width;
+        this._cd.markForCheck();
+    }
 }
 PanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PanelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: PanelComponent, selector: "bui-panel", inputs: { backdropClass: "backdropClass", cardClass: "cardClass", color: "color", appearance: "appearance" }, host: { classAttribute: "bui-panel bui-host" }, ngImport: i0, template: "<div class=\"bui-panel-backdrop {{ backdropClass }} bui-bg-{{ color || 'none' }}\"></div>\n<mat-card\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{position:relative}:host .bui-panel-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:4px;opacity:.1}:host .mat-card{background-color:transparent}:host .bui-panel-border{border-width:1px;border-style:solid}\n"], dependencies: [{ kind: "component", type: i1.MatCard, selector: "mat-card", exportAs: ["matCard"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", 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\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{position:relative}:host .bui-panel-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:4px;opacity:.1}:host .mat-card{background-color:transparent}: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(.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", 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: "14.1.3", ngImport: i0, type: PanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bui-panel', host: {
-                        class: 'bui-panel bui-host'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bui-panel-backdrop {{ backdropClass }} bui-bg-{{ color || 'none' }}\"></div>\n<mat-card\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{position:relative}:host .bui-panel-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:4px;opacity:.1}:host .mat-card{background-color:transparent}:host .bui-panel-border{border-width:1px;border-style:solid}\n"] }]
+                        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\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{position:relative}:host .bui-panel-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:4px;opacity:.1}:host .mat-card{background-color:transparent}: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(.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: [{
                 type: Input
             }], cardClass: [{
@@ -63,19 +80,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
                 type: Input
             }], appearance: [{
                 type: Input
+            }], breakpoint: [{
+                type: Input
             }] } });
 
+/**
+ * `bui-panel-section`s are subdivisions of `bui-panel` that rearrange their orientation based on the width of the container element.
+ */
+class PanelSectionComponent {
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+    }
+    ngOnInit() {
+        this._parentElement = this._elementRef.nativeElement.parentElement;
+        this._parentElement.classList.add('bui-panel-section-container');
+    }
+}
+PanelSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PanelSectionComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+PanelSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", 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}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PanelSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bui-panel-section', host: {
+                        class: 'bui-panel-section'
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, 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}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
 class PanelModule {
 }
 PanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: PanelModule, declarations: [PanelComponent], imports: [CommonModule, MatCardModule], exports: [MatCardModule, PanelComponent] });
-PanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PanelModule, imports: [CommonModule, MatCardModule, MatCardModule] });
+PanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: PanelModule, declarations: [PanelComponent, PanelSectionComponent], imports: [CommonModule, MatCardModule, BehaviorModule], exports: [MatCardModule, PanelComponent, PanelSectionComponent] });
+PanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PanelModule, imports: [CommonModule, MatCardModule, BehaviorModule, MatCardModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PanelModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [PanelComponent],
-                    imports: [CommonModule, MatCardModule],
-                    exports: [MatCardModule, PanelComponent]
+                    declarations: [PanelComponent, PanelSectionComponent],
+                    imports: [CommonModule, MatCardModule, BehaviorModule],
+                    exports: [MatCardModule, PanelComponent, PanelSectionComponent]
                 }]
         }] });
 
@@ -83,5 +123,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { PanelComponent, PanelModule };
+export { PanelComponent, PanelModule, PanelSectionComponent };
 //# sourceMappingURL=bravura-ui-panel.mjs.map

package/fesm2015/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.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`.\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},\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\tprivate _color: ThemePalette = 'primary';\n\n\tprivate _appearance: 'outlined' | 'raised' | 'flat' = 'flat';\n\n\tconstructor(private _cd: ChangeDetectorRef) {}\n\n\tngOnInit(): void {}\n}\n","<div class=\"bui-panel-backdrop {{ backdropClass }} bui-bg-{{ color || 'none' }}\"></div>\n<mat-card\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 { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { PanelComponent } from './panel.component';\nimport { MatCardModule } from '@angular/material/card';\n\n@NgModule({\n\tdeclarations: [PanelComponent],\n\timports: [CommonModule, MatCardModule],\n\texports: [MatCardModule, PanelComponent]\n})\nexport class PanelModule {}\n\nexport { PanelComponent };\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/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\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, OnInit } from '@angular/core';\n\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 {\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('bui-panel-section-container');\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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"}

package/fesm2020/bravura-ui-panel.mjs

@@ -3,6 +3,8 @@ import { Component, ChangeDetectionStrategy, Input, NgModule } from '@angular/co
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
+import * as i2 from '@bravura/ui/behavior';
+import { BehaviorModule } from '@bravura/ui/behavior';
 
 /**
  * A `bui-panel` consists of a `mat-card` and a tinted backdrop.
@@ -11,12 +13,20 @@ import { MatCardModule } from '@angular/material/card';
  * The backdrop is nearly transparent, blending the theme palette `color`
  * and the effective background color of the DOM ancestors.
  *
- * `bui-panel` supports all the content child directives of `mat-card`.
+ * `bui-panel` supports all the content child directives of `mat-card` as well as `bui-panel-section`.
+ *
+ * `bui-panel-section`s are subdivisions of `bui-panel` that rearrange their orientation based on the width of the container element.
  *
  */
 class PanelComponent {
     constructor(_cd) {
         this._cd = _cd;
+        /**
+         * The width of the host element, at which the panel section container will change its orientation.
+         */
+        this.breakpoint = 600;
+        /** @ignore */
+        this._width = 600;
         this._color = 'primary';
         this._appearance = 'flat';
     }
@@ -47,14 +57,21 @@ class PanelComponent {
         this._cd.markForCheck();
     }
     ngOnInit() { }
+    /** @ignore */
+    _resized(width) {
+        this._width = width;
+        this._cd.markForCheck();
+    }
 }
 PanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PanelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: PanelComponent, selector: "bui-panel", inputs: { backdropClass: "backdropClass", cardClass: "cardClass", color: "color", appearance: "appearance" }, host: { classAttribute: "bui-panel bui-host" }, ngImport: i0, template: "<div class=\"bui-panel-backdrop {{ backdropClass }} bui-bg-{{ color || 'none' }}\"></div>\n<mat-card\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{position:relative}:host .bui-panel-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:4px;opacity:.1}:host .mat-card{background-color:transparent}:host .bui-panel-border{border-width:1px;border-style:solid}\n"], dependencies: [{ kind: "component", type: i1.MatCard, selector: "mat-card", exportAs: ["matCard"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", 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\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{position:relative}:host .bui-panel-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:4px;opacity:.1}:host .mat-card{background-color:transparent}: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(.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", 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: "14.1.3", ngImport: i0, type: PanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bui-panel', host: {
-                        class: 'bui-panel bui-host'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bui-panel-backdrop {{ backdropClass }} bui-bg-{{ color || 'none' }}\"></div>\n<mat-card\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{position:relative}:host .bui-panel-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:4px;opacity:.1}:host .mat-card{background-color:transparent}:host .bui-panel-border{border-width:1px;border-style:solid}\n"] }]
+                        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\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{position:relative}:host .bui-panel-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:4px;opacity:.1}:host .mat-card{background-color:transparent}: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(.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: [{
                 type: Input
             }], cardClass: [{
@@ -63,19 +80,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
                 type: Input
             }], appearance: [{
                 type: Input
+            }], breakpoint: [{
+                type: Input
             }] } });
 
+/**
+ * `bui-panel-section`s are subdivisions of `bui-panel` that rearrange their orientation based on the width of the container element.
+ */
+class PanelSectionComponent {
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+    }
+    ngOnInit() {
+        this._parentElement = this._elementRef.nativeElement.parentElement;
+        this._parentElement.classList.add('bui-panel-section-container');
+    }
+}
+PanelSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PanelSectionComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+PanelSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", 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}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PanelSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bui-panel-section', host: {
+                        class: 'bui-panel-section'
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, 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}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
 class PanelModule {
 }
 PanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: PanelModule, declarations: [PanelComponent], imports: [CommonModule, MatCardModule], exports: [MatCardModule, PanelComponent] });
-PanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PanelModule, imports: [CommonModule, MatCardModule, MatCardModule] });
+PanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: PanelModule, declarations: [PanelComponent, PanelSectionComponent], imports: [CommonModule, MatCardModule, BehaviorModule], exports: [MatCardModule, PanelComponent, PanelSectionComponent] });
+PanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PanelModule, imports: [CommonModule, MatCardModule, BehaviorModule, MatCardModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PanelModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [PanelComponent],
-                    imports: [CommonModule, MatCardModule],
-                    exports: [MatCardModule, PanelComponent]
+                    declarations: [PanelComponent, PanelSectionComponent],
+                    imports: [CommonModule, MatCardModule, BehaviorModule],
+                    exports: [MatCardModule, PanelComponent, PanelSectionComponent]
                 }]
         }] });
 
@@ -83,5 +123,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { PanelComponent, PanelModule };
+export { PanelComponent, PanelModule, PanelSectionComponent };
 //# 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.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`.\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},\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\tprivate _color: ThemePalette = 'primary';\n\n\tprivate _appearance: 'outlined' | 'raised' | 'flat' = 'flat';\n\n\tconstructor(private _cd: ChangeDetectorRef) {}\n\n\tngOnInit(): void {}\n}\n","<div class=\"bui-panel-backdrop {{ backdropClass }} bui-bg-{{ color || 'none' }}\"></div>\n<mat-card\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 { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { PanelComponent } from './panel.component';\nimport { MatCardModule } from '@angular/material/card';\n\n@NgModule({\n\tdeclarations: [PanelComponent],\n\timports: [CommonModule, MatCardModule],\n\texports: [MatCardModule, PanelComponent]\n})\nexport class PanelModule {}\n\nexport { PanelComponent };\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/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\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, OnInit } from '@angular/core';\n\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 {\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('bui-panel-section-container');\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":";;;;;;;;AAGA;;;;;;;;;;;AAWG;MAYU,cAAc,CAAA;AAwD1B,IAAA,WAAA,CAAoB,GAAsB,EAAA;QAAtB,IAAG,CAAA,GAAA,GAAH,GAAG,CAAmB;AAb1C;;AAEG;QAEH,IAAU,CAAA,UAAA,GAAG,GAAG,CAAC;;QAGjB,IAAM,CAAA,MAAA,GAAG,GAAG,CAAC;QAEL,IAAM,CAAA,MAAA,GAAiB,SAAS,CAAC;QAEjC,IAAW,CAAA,WAAA,GAAmC,MAAM,CAAC;KAEf;AA3C9C;;AAEG;AACH,IAAA,IACI,KAAK,GAAA;QACR,OAAO,IAAI,CAAC,MAAM,CAAC;KACnB;IACD,IAAI,KAAK,CAAC,KAAmB,EAAA;AAC5B,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;AACpB,QAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;KACxB;AAED;;;;;;;;AAQG;AACH,IAAA,IACI,UAAU,GAAA;QACb,OAAO,IAAI,CAAC,WAAW,CAAC;KACxB;IACD,IAAI,UAAU,CAAC,KAAqC,EAAA;AACnD,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;AACzB,QAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;KACxB;AAiBD,IAAA,QAAQ,MAAW;;AAGnB,IAAA,QAAQ,CAAC,KAAa,EAAA;AACrB,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;AACpB,QAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;KACxB;;2GAhEW,cAAc,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAd,cAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,kWC1B3B,+ZAYA,EAAA,MAAA,EAAA,CAAA,qfAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,yDAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,UAAA,EAAA,aAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;2FDca,cAAc,EAAA,UAAA,EAAA,CAAA;kBAX1B,SAAS;AACC,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,EAGf,IAAA,EAAA;AACL,wBAAA,KAAK,EAAE,oBAAoB;AAC3B,wBAAA,4BAA4B,EAAE,CAAqB,mBAAA,CAAA;AACnD,wBAAA,8BAA8B,EAAE,CAAsB,oBAAA,CAAA;qBACtD,EACgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,+ZAAA,EAAA,MAAA,EAAA,CAAA,qfAAA,CAAA,EAAA,CAAA;wGAO/C,aAAa,EAAA,CAAA;sBADZ,KAAK;gBAON,SAAS,EAAA,CAAA;sBADR,KAAK;gBAOF,KAAK,EAAA,CAAA;sBADR,KAAK;gBAmBF,UAAU,EAAA,CAAA;sBADb,KAAK;gBAaN,UAAU,EAAA,CAAA;sBADT,KAAK;;;AEtEP;;AAEG;MAUU,qBAAqB,CAAA;AAGjC,IAAA,WAAA,CAAoB,WAAoC,EAAA;QAApC,IAAW,CAAA,WAAA,GAAX,WAAW,CAAyB;KAAI;IAE5D,QAAQ,GAAA;QACP,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,aAAc,CAAC;QACpE,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC;KACjE;;kHARW,qBAAqB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,qBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,wGCdlC,6BACA,EAAA,MAAA,EAAA,CAAA,wbAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;2FDaa,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBATjC,SAAS;AACC,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,EAGvB,IAAA,EAAA;AACL,wBAAA,KAAK,EAAE,mBAAmB;qBAC1B,EACgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,6BAAA,EAAA,MAAA,EAAA,CAAA,wbAAA,CAAA,EAAA,CAAA;;;MEAnC,WAAW,CAAA;;wGAAX,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAX,WAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAW,EAJR,YAAA,EAAA,CAAA,cAAc,EAAE,qBAAqB,aAC1C,YAAY,EAAE,aAAa,EAAE,cAAc,CAC3C,EAAA,OAAA,EAAA,CAAA,aAAa,EAAE,cAAc,EAAE,qBAAqB,CAAA,EAAA,CAAA,CAAA;AAElD,WAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAW,YAHb,YAAY,EAAE,aAAa,EAAE,cAAc,EAC3C,aAAa,CAAA,EAAA,CAAA,CAAA;2FAEX,WAAW,EAAA,UAAA,EAAA,CAAA;kBALvB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,YAAY,EAAE,CAAC,cAAc,EAAE,qBAAqB,CAAC;AACrD,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,aAAa,EAAE,cAAc,CAAC;AACtD,oBAAA,OAAO,EAAE,CAAC,aAAa,EAAE,cAAc,EAAE,qBAAqB,CAAC;AAC/D,iBAAA,CAAA;;;ACXD;;AAEG;;;;"}

package/package.json

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

package/panel/panel-section.component.d.ts

@@ -0,0 +1,13 @@
+import { ElementRef, OnInit } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * `bui-panel-section`s are subdivisions of `bui-panel` that rearrange their orientation based on the width of the container element.
+ */
+export declare class PanelSectionComponent implements OnInit {
+    private _elementRef;
+    private _parentElement;
+    constructor(_elementRef: ElementRef<HTMLElement>);
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PanelSectionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PanelSectionComponent, "bui-panel-section", never, {}, {}, never, ["*"], false>;
+}

package/panel/panel.component.d.ts

@@ -8,7 +8,9 @@ import * as i0 from "@angular/core";
  * The backdrop is nearly transparent, blending the theme palette `color`
  * and the effective background color of the DOM ancestors.
  *
- * `bui-panel` supports all the content child directives of `mat-card`.
+ * `bui-panel` supports all the content child directives of `mat-card` as well as `bui-panel-section`.
+ *
+ * `bui-panel-section`s are subdivisions of `bui-panel` that rearrange their orientation based on the width of the container element.
  *
  */
 export declare class PanelComponent implements OnInit {
@@ -37,10 +39,18 @@ export declare class PanelComponent implements OnInit {
      */
     get appearance(): 'outlined' | 'raised' | 'flat';
     set appearance(value: 'outlined' | 'raised' | 'flat');
+    /**
+     * The width of the host element, at which the panel section container will change its orientation.
+     */
+    breakpoint: number;
+    /** @ignore */
+    _width: number;
     private _color;
     private _appearance;
     constructor(_cd: ChangeDetectorRef);
     ngOnInit(): void;
+    /** @ignore */
+    _resized(width: number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PanelComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PanelComponent, "bui-panel", never, { "backdropClass": "backdropClass"; "cardClass": "cardClass"; "color": "color"; "appearance": "appearance"; }, {}, never, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PanelComponent, "bui-panel", never, { "backdropClass": "backdropClass"; "cardClass": "cardClass"; "color": "color"; "appearance": "appearance"; "breakpoint": "breakpoint"; }, {}, never, ["*"], false>;
 }

package/panel/panel.module.d.ts

@@ -1,11 +1,14 @@
 import { PanelComponent } from './panel.component';
+import { PanelSectionComponent } from './panel-section.component';
 import * as i0 from "@angular/core";
 import * as i1 from "./panel.component";
-import * as i2 from "@angular/common";
-import * as i3 from "@angular/material/card";
+import * as i2 from "./panel-section.component";
+import * as i3 from "@angular/common";
+import * as i4 from "@angular/material/card";
+import * as i5 from "@bravura/ui/behavior";
 export declare class PanelModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<PanelModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<PanelModule, [typeof i1.PanelComponent], [typeof i2.CommonModule, typeof i3.MatCardModule], [typeof i3.MatCardModule, typeof i1.PanelComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PanelModule, [typeof i1.PanelComponent, typeof i2.PanelSectionComponent], [typeof i3.CommonModule, typeof i4.MatCardModule, typeof i5.BehaviorModule], [typeof i4.MatCardModule, typeof i1.PanelComponent, typeof i2.PanelSectionComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<PanelModule>;
 }
-export { PanelComponent };
+export { PanelComponent, PanelSectionComponent };