@bravura/ui 1.23.2 → 1.24.1

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # Change history
 
+## 1.24.0 (2023-04-24)
+
+* test: disable an unstable test ([68ec208](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/68ec208))
+* test: enrich test cases and enforce coverage check ([c9aa73f](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/c9aa73f))
+* test: fix an unstable test ([3bc6244](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/3bc6244))
+* test: fix an unstable test ([6230360](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/6230360))
+* test: fix an unstable test ([7a1adad](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/7a1adad))
+* test: fix test failures ([b52c82e](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/b52c82e))
+* test(panel): fix test failure ([a755179](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/a755179))
+* feat(behavior): add class directive for dom children events ([e55aade](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/e55aade))
+* feat(behavior): add progress support in [buiAwait] ([be199b7](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/be199b7))
+* feat(behavior): add support for other buttons in [buiAwait] ([1b8a128](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/1b8a128))
+* feat(file-upload): limit file size ([36bb507](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/36bb507))
+* feat(panel): add a new panel component based on `mat-card` ([58cf683](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/58cf683))
+* feat(panel): add panel sections ([86b3652](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/86b3652))
+* feat(panel): improve and extract tinted backdrop element ([712c8e7](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/712c8e7))
+* feat(tooltip): automate calculation of default width ([21559d7](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/21559d7))
+* feat(tooltip): support Observable as tooltip message ([540f498](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/540f498))
+* fix: respect attribute hidden on host elements ([63e350c](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/63e350c))
+* fix(behavior): add text content detection to observe content class ([1e7d907](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/1e7d907))
+* fix(behavior): fix the issue with observe content class in prop binding ([52f0a37](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/52f0a37))
+* fix(behavior): fix the issue with resize observer destruction ([d35c3fe](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/d35c3fe))
+* fix(panel): calculate flex basis on panel sections ([d173709](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/d173709))
+* fix(panel): fix compilation errors ([7762297](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/7762297))
+* fix(panel): fix issue with incorrect style classes when resized ([480cc2e](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/480cc2e))
+* fix(tooltip): export an injection token for greater ability to customise ([3a1c231](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/3a1c231))
+* docs(panel): add real world sample story ([a30df78](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/a30df78))
+* docs(storybook): improve tooltip stories ([6f42fb3](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/6f42fb3))
+
+## <small>1.23.2 (2023-03-06)</small>
+
+* fix(alert): fix the issue with short messages being clipped off ([81d7e44](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/81d7e44))
+
 ## <small>1.23.1 (2022-10-19)</small>
 
 * fix(alert): improve accessibility ([0752162](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/0752162))

package/behavior/await.directive.d.ts

@@ -36,10 +36,12 @@ export declare class AwaitDirective implements AfterViewInit, DoCheck {
      * The operation is considered 'in progress' when the property evaluates to
      *
      * - `true`; or
+     * - a `number` within 0 - 100; or
      * - an instance of `rxjs/Subscription` and `buiAwait.closed` is falsy
      *
+     * When it is a number, it represets the progress in percentage term.
      */
-    buiAwait: null | undefined | boolean | Subscription;
+    buiAwait: null | undefined | boolean | Subscription | number;
     /** The ARIA label to be put on the spinner. The default value is `"In progress"`. */
     buiAwaitAriaLabel: string;
     /** The diameter of the in-progress spinner. The default value is `20`. */
@@ -54,6 +56,8 @@ export declare class AwaitDirective implements AfterViewInit, DoCheck {
     ngAfterViewInit(): void;
     /** @ignore */
     ngDoCheck(): void;
+    /** @ignore */
+    private get _isDeterminate();
     private _statusChanged;
     static ɵfac: i0.ɵɵFactoryDeclaration<AwaitDirective, [null, { optional: true; }, null, null, null]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<AwaitDirective, "[buiAwait]", never, { "buiAwait": "buiAwait"; "buiAwaitAriaLabel": "buiAwaitAriaLabel"; "buiAwaitDiameter": "buiAwaitDiameter"; }, {}, never>;

package/behavior/behavior.module.d.ts

@@ -2,14 +2,16 @@ import * as i0 from "@angular/core";
 import * as i1 from "./sizing.directive";
 import * as i2 from "./sizing-monitor.directive";
 import * as i3 from "./await.directive";
-import * as i4 from "@angular/common";
-import * as i5 from "@angular/material/button";
-import * as i6 from "@angular/material/progress-spinner";
+import * as i4 from "./observe-content-class.directive";
+import * as i5 from "@angular/common";
+import * as i6 from "@angular/material/button";
+import * as i7 from "@angular/material/progress-spinner";
+import * as i8 from "@angular/cdk/observers";
 /**
  *  For functionality that cannot be easily achieved via CSS.
  */
 export declare class BehaviorModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<BehaviorModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<BehaviorModule, [typeof i1.SizingDirective, typeof i2.SizingMonitorDirective, typeof i3.AwaitDirective], [typeof i4.CommonModule, typeof i5.MatButtonModule, typeof i6.MatProgressSpinnerModule], [typeof i1.SizingDirective, typeof i2.SizingMonitorDirective, typeof i3.AwaitDirective, typeof i6.MatProgressSpinnerModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<BehaviorModule, [typeof i1.SizingDirective, typeof i2.SizingMonitorDirective, typeof i3.AwaitDirective, typeof i4.ObserveContentClassDirective], [typeof i5.CommonModule, typeof i6.MatButtonModule, typeof i7.MatProgressSpinnerModule, typeof i8.ObserversModule], [typeof i1.SizingDirective, typeof i2.SizingMonitorDirective, typeof i3.AwaitDirective, typeof i7.MatProgressSpinnerModule, typeof i4.ObserveContentClassDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<BehaviorModule>;
 }

package/behavior/observe-content-class.directive.d.ts

@@ -0,0 +1,29 @@
+import { ContentObserver } from '@angular/cdk/observers';
+import { ElementRef, OnDestroy, OnInit } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Use `[bui-class.not-empty]` to specify a style class activated only when the host element has DOM children;
+ *
+ * use `[bui-class.empty]` for a style class activated when it has no DOM children.
+ *
+ * Use `[bui-class.no-text]` to specify a style class activated only when the host element has text content;
+ *
+ * use `[bui-class.has-text]` for a style class activated when it has no text content.
+ */
+export declare class ObserveContentClassDirective implements OnDestroy, OnInit {
+    private readonly subscription;
+    private readonly element;
+    private classToRemove;
+    private classEmpty?;
+    private classNotEmpty?;
+    private classNoText?;
+    private classHasText?;
+    constructor(observer: ContentObserver, elementRef: ElementRef<HTMLElement>);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private checkClass;
+    private checkClassWith;
+    private addClass;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ObserveContentClassDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ObserveContentClassDirective, "[bui-class.empty],[bui-class.not-empty],[bui-class.no-text],[bui-class.has-text]", never, { "classEmpty": "bui-class.empty"; "classNotEmpty": "bui-class.not-empty"; "classNoText": "bui-class.no-text"; "classHasText": "bui-class.has-text"; }, {}, never>;
+}

package/behavior/public-api.d.ts

@@ -2,3 +2,4 @@ export * from './sizing.directive';
 export * from './sizing-monitor.directive';
 export * from './behavior.module';
 export * from './await.directive';
+export * from './observe-content-class.directive';

package/behavior/sizing.directive.d.ts

@@ -80,12 +80,14 @@ export declare class SizingDirective implements OnChanges, OnDestroy {
     private _height;
     private _reflowFrameCount;
     private _element;
+    private _frameHandlerId;
     constructor(_doc: Document, _defaultTarget: SizingMonitorDirective, elemRef: ElementRef<HTMLElement>, _zone: NgZone);
     ngOnChanges(_: SimpleChanges): void;
     ngOnDestroy(): void;
     private _initOrReset;
     private _setUpNodeMonitor;
     private _tearDownNodeMonitor;
+    private _runWithObserver;
     private _calculateSize;
     private _applyClassesOrStyles;
     private _removeClassesOrStyles;

package/bundles/bravura-ui-alert.umd.js

@@ -430,7 +430,7 @@
         return AlertMessageComponent;
     }());
     AlertMessageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AlertMessageComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AlertMessageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AlertMessageComponent, selector: "bui-alert", inputs: { type: "type", message: "message", politeness: "politeness", dismissible: "dismissible", _id: ["id", "_id"] }, outputs: { dismissed: "dismissed", initialised: "initialised" }, host: { properties: { "class": "'bui-alert bui-host bui-alert-' + (type === 'warn' ? 'warning' : type) + (dismissible ? ' bui-alert-dismissible' : '')", "role": "politeness === 'off' ? 'region' : 'alert'", "attr.aria-live": "politeness === 'assertive' ? undefined : politeness", "id": "this._id" } }, ngImport: i0__namespace, template: "<div class=\"bui-alert-backdrop\"></div>\n<div class=\"bui-alert-frame\"></div>\n\n<div class=\"bui-alert-wrapper\">\n\t<div class=\"bui-alert-icon-area\">\n\t\t<mat-icon [buiIcon]=\"iconName\" variant=\"outlined\"></mat-icon>\n\t</div>\n\t<div class=\"bui-alert-content\"><div [innerHTML]=\"message\"></div></div>\n</div>\n\n<div class=\"bui-alert-button-area\" *ngIf=\"dismissible\">\n\t<div class=\"bui-alert-button-backdrop\"></div>\n\t<button mat-icon-button class=\"bui-alert-button\" (click)=\"_dismiss()\" aria-label=\"dismiss alert\">\n\t\t<mat-icon>cancel</mat-icon>\n\t</button>\n</div>\n", styles: [":host(:not([hidden])){display:block;padding:12px 14px 12px 19px;position:relative;border-radius:5px}:host-context([dir=rtl]) :host(:not([hidden])){padding:12px 19px 12px 14px}:host(:not([hidden])),:host(:not([hidden])) *{box-sizing:border-box}.bui-alert-backdrop,.bui-alert-frame{position:absolute;top:0;right:0;bottom:0;left:0}.bui-alert-backdrop{opacity:.1}:host(.bui-alert-dismissible) .bui-alert-backdrop{clip-path:polygon(0 0,calc(100% - 25px) 0,calc(100% - 18.75px) 18.75px,100% 25px,100% 100%,0 100%)}:host-context([dir=rtl]) :host(.bui-alert-dismissible) .bui-alert-backdrop{clip-path:polygon(0 25px,0 100%,100% 100%,100% 0,25px 0,18.75px 18.75px)}.bui-alert-frame{border-radius:5px;border-width:1px 1px 1px 5px;border-style:solid}:host-context([dir=rtl]) .bui-alert-frame{border-width:1px 5px 1px 1px}:host(.bui-alert-dismissible) .bui-alert-frame{clip-path:polygon(0 0,calc(100% - 25px) 0,calc(100% - 25px) 25px,100% 25px,100% 100%,0 100%)}:host-context([dir=rtl]) :host(.bui-alert-dismissible) .bui-alert-frame{clip-path:polygon(0 25px,0 100%,100% 100%,100% 0,25px 0)}.bui-alert-button-area{position:absolute;right:-15px;top:-15px;width:40px;height:40px;border-radius:20px;display:flex;align-items:center;justify-content:center}:host-context([dir=rtl]) .bui-alert-button-area{right:unset;left:-15px}.bui-alert-button-backdrop{position:absolute;border-radius:20px;width:100%;height:100%;clip-path:polygon(0 15px,25px 15px,25px 100%,0% 100%)}:host-context([dir=rtl]) .bui-alert-button-backdrop{clip-path:polygon(15px 15px,15px 100%,100% 100%,100% 15px)}.bui-alert-wrapper{display:flex;align-items:stretch}.bui-alert-icon-area{flex-shrink:0;display:flex;justify-content:center;align-items:center;border-radius:5px;width:30px;height:30px;margin-right:14px;color:var(--bui-bg-card)}:host-context([dir=rtl]) .bui-alert-icon-area{margin-right:unset;margin-left:14px}.bui-alert-content{display:flex;align-items:center;z-index:1;flex-grow:1}:host(.bui-alert-dismissible) .bui-alert-content{clip-path:polygon(0 0,calc(100% - 11px) 0,100% 13px,100% 100%,0 100%)}:host-context([dir=rtl]) :host(.bui-alert-dismissible) .bui-alert-content{clip-path:polygon(0 13px,0 100%,100% 100%,100% 0,11px 0)}:host(.bui-alert-success) .bui-alert-frame{border-color:var(--bui-color-success)}:host(.bui-alert-success) .bui-alert-backdrop,:host(.bui-alert-success) .bui-alert-icon-area{background-color:var(--bui-color-success)}:host(.bui-alert-success) .bui-alert-button-backdrop{border:1px var(--bui-color-success) solid}:host(.bui-alert-success) .bui-alert-button{color:var(--bui-color-success)}:host(.bui-alert-info) .bui-alert-frame{border-color:var(--bui-color-info)}:host(.bui-alert-info) .bui-alert-backdrop,:host(.bui-alert-info) .bui-alert-icon-area{background-color:var(--bui-color-info)}:host(.bui-alert-info) .bui-alert-button-backdrop{border:1px var(--bui-color-info) solid}:host(.bui-alert-info) .bui-alert-button{color:var(--bui-color-info)}:host(.bui-alert-warning) .bui-alert-frame{border-color:var(--bui-color-warning)}:host(.bui-alert-warning) .bui-alert-backdrop,:host(.bui-alert-warning) .bui-alert-icon-area{background-color:var(--bui-color-warning)}:host(.bui-alert-warning) .bui-alert-button-backdrop{border:1px var(--bui-color-warning) solid}:host(.bui-alert-warning) .bui-alert-button{color:var(--bui-color-warning)}:host(.bui-alert-error) .bui-alert-frame{border-color:var(--bui-color-error)}:host(.bui-alert-error) .bui-alert-backdrop,:host(.bui-alert-error) .bui-alert-icon-area{background-color:var(--bui-color-error)}:host(.bui-alert-error) .bui-alert-button-backdrop{border:1px var(--bui-color-error) solid}:host(.bui-alert-error) .bui-alert-button{color:var(--bui-color-error)}\n"], components: [{ type: i1__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i3__namespace.IconDirective, selector: "[buiIcon]", inputs: ["buiIcon", "size", "variant"] }, { type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    AlertMessageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AlertMessageComponent, selector: "bui-alert", inputs: { type: "type", message: "message", politeness: "politeness", dismissible: "dismissible", _id: ["id", "_id"] }, outputs: { dismissed: "dismissed", initialised: "initialised" }, host: { properties: { "class": "'bui-alert bui-host bui-alert-' + (type === 'warn' ? 'warning' : type) + (dismissible ? ' bui-alert-dismissible' : '')", "role": "politeness === 'off' ? 'region' : 'alert'", "attr.aria-live": "politeness === 'assertive' ? undefined : politeness", "id": "this._id" } }, ngImport: i0__namespace, template: "<div class=\"bui-alert-backdrop\"></div>\n<div class=\"bui-alert-frame\"></div>\n\n<div class=\"bui-alert-wrapper\">\n\t<div class=\"bui-alert-icon-area\">\n\t\t<mat-icon [buiIcon]=\"iconName\" variant=\"outlined\"></mat-icon>\n\t</div>\n\t<div class=\"bui-alert-content\"><div [innerHTML]=\"message\"></div></div>\n</div>\n\n<div class=\"bui-alert-button-area\" *ngIf=\"dismissible\">\n\t<div class=\"bui-alert-button-backdrop\"></div>\n\t<button mat-icon-button class=\"bui-alert-button\" (click)=\"_dismiss()\" aria-label=\"dismiss alert\">\n\t\t<mat-icon>cancel</mat-icon>\n\t</button>\n</div>\n", styles: [":host(:not([hidden])){display:block;padding:12px 14px 12px 19px;position:relative;border-radius:5px}:host-context([dir=rtl]) :host(:not([hidden])){padding:12px 19px 12px 14px}:host(:not([hidden])),:host(:not([hidden])) *{box-sizing:border-box}.bui-alert-backdrop,.bui-alert-frame{position:absolute;top:0;right:0;bottom:0;left:0}.bui-alert-backdrop{opacity:.1}:host(.bui-alert-dismissible) .bui-alert-backdrop{clip-path:polygon(0 0,calc(100% - 25px) 0,calc(100% - 18.75px) 18.75px,100% 25px,100% 100%,0 100%)}:host-context([dir=rtl]) :host(.bui-alert-dismissible) .bui-alert-backdrop{clip-path:polygon(0 25px,0 100%,100% 100%,100% 0,25px 0,18.75px 18.75px)}.bui-alert-frame{border-radius:5px;border-width:1px 1px 1px 5px;border-style:solid}:host-context([dir=rtl]) .bui-alert-frame{border-width:1px 5px 1px 1px}:host(.bui-alert-dismissible) .bui-alert-frame{clip-path:polygon(0 0,calc(100% - 25px) 0,calc(100% - 25px) 25px,100% 25px,100% 100%,0 100%)}:host-context([dir=rtl]) :host(.bui-alert-dismissible) .bui-alert-frame{clip-path:polygon(0 25px,0 100%,100% 100%,100% 0,25px 0)}.bui-alert-button-area{position:absolute;right:-15px;top:-15px;width:40px;height:40px;border-radius:20px;display:flex;align-items:center;justify-content:center}:host-context([dir=rtl]) .bui-alert-button-area{right:unset;left:-15px}.bui-alert-button-backdrop{position:absolute;border-radius:20px;width:100%;height:100%;clip-path:polygon(0 15px,25px 15px,25px 100%,0% 100%)}:host-context([dir=rtl]) .bui-alert-button-backdrop{clip-path:polygon(15px 15px,15px 100%,100% 100%,100% 15px)}.bui-alert-wrapper{display:flex;align-items:stretch}.bui-alert-icon-area{flex-shrink:0;display:flex;justify-content:center;align-items:center;border-radius:5px;width:30px;height:30px;margin-right:14px;color:var(--bui-bg-card)}:host-context([dir=rtl]) .bui-alert-icon-area{margin-right:unset;margin-left:14px}.bui-alert-content{display:flex;align-items:center;z-index:1;flex-grow:1}:host(.bui-alert-dismissible) .bui-alert-content{clip-path:polygon(0 0,calc(100% - 11px) 0,100% 13px,100% 100%,0 100%)}:host-context([dir=rtl]) :host(.bui-alert-dismissible) .bui-alert-content{clip-path:polygon(0 13px,0 100%,100% 100%,100% 0,11px 0)}:host(.bui-alert-success) .bui-alert-frame{border-color:var(--bui-color-success)}:host(.bui-alert-success) .bui-alert-backdrop,:host(.bui-alert-success) .bui-alert-icon-area{background-color:var(--bui-color-success)}:host(.bui-alert-success) .bui-alert-button-backdrop{border:1px var(--bui-color-success) solid}:host(.bui-alert-success) .bui-alert-button{color:var(--bui-color-success)}:host(.bui-alert-info) .bui-alert-frame{border-color:var(--bui-color-info)}:host(.bui-alert-info) .bui-alert-backdrop,:host(.bui-alert-info) .bui-alert-icon-area{background-color:var(--bui-color-info)}:host(.bui-alert-info) .bui-alert-button-backdrop{border:1px var(--bui-color-info) solid}:host(.bui-alert-info) .bui-alert-button{color:var(--bui-color-info)}:host(.bui-alert-warning) .bui-alert-frame{border-color:var(--bui-color-warning)}:host(.bui-alert-warning) .bui-alert-backdrop,:host(.bui-alert-warning) .bui-alert-icon-area{background-color:var(--bui-color-warning)}:host(.bui-alert-warning) .bui-alert-button-backdrop{border:1px var(--bui-color-warning) solid}:host(.bui-alert-warning) .bui-alert-button{color:var(--bui-color-warning)}:host(.bui-alert-error) .bui-alert-frame{border-color:var(--bui-color-error)}:host(.bui-alert-error) .bui-alert-backdrop,:host(.bui-alert-error) .bui-alert-icon-area{background-color:var(--bui-color-error)}:host(.bui-alert-error) .bui-alert-button-backdrop{border:1px var(--bui-color-error) solid}:host(.bui-alert-error) .bui-alert-button{color:var(--bui-color-error)}@polyfill-unscoped-rule{content: \".bui-alert .bui-alert-content > div > *:first-child\"; margin-top: 0;}@polyfill-unscoped-rule{content: \".bui-alert .bui-alert-content > div > *:last-child\"; margin-bottom: 0;}\n"], components: [{ type: i1__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i3__namespace.IconDirective, selector: "[buiIcon]", inputs: ["buiIcon", "size", "variant"] }, { type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AlertMessageComponent, decorators: [{
                 type: i0.Component,
                 args: [{

package/bundles/bravura-ui-behavior.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/coercion'), require('@angular/common'), require('@angular/core'), require('rxjs/operators'), require('@angular/material/progress-spinner'), require('@angular/material/button')) :
-    typeof define === 'function' && define.amd ? define('@bravura/ui/behavior', ['exports', '@angular/cdk/coercion', '@angular/common', '@angular/core', 'rxjs/operators', '@angular/material/progress-spinner', '@angular/material/button'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.bravura = global.bravura || {}, global.bravura.ui = global.bravura.ui || {}, global.bravura.ui.behavior = {}), global.ng.cdk.coercion, global.ng.common, global.ng.core, global.rxjs.operators, global.ng.material.progressSpinner, global.ng.material.button));
-})(this, (function (exports, coercion, common, i0, operators, progressSpinner, i1) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/coercion'), require('@angular/common'), require('@angular/core'), require('rxjs/operators'), require('@angular/material/progress-spinner'), require('@angular/material/button'), require('@angular/cdk/observers')) :
+    typeof define === 'function' && define.amd ? define('@bravura/ui/behavior', ['exports', '@angular/cdk/coercion', '@angular/common', '@angular/core', 'rxjs/operators', '@angular/material/progress-spinner', '@angular/material/button', '@angular/cdk/observers'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.bravura = global.bravura || {}, global.bravura.ui = global.bravura.ui || {}, global.bravura.ui.behavior = {}), global.ng.cdk.coercion, global.ng.common, global.ng.core, global.rxjs.operators, global.ng.material.progressSpinner, global.ng.material.button, global.ng.cdk.observers));
+})(this, (function (exports, coercion, common, i0, operators, progressSpinner, i1, i1$1) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -24,6 +24,7 @@
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
+    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
 
     /******************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -439,6 +440,7 @@
             this._width = 0;
             this._height = 0;
             this._reflowFrameCount = 0;
+            this._frameHandlerId = 0;
             this._element = elemRef.nativeElement;
             this._monitorTarget = this._element;
         }
@@ -519,15 +521,23 @@
             var _this = this;
             this._tearDownNodeMonitor();
             if (this._monitorTarget) {
-                this._observer = new ResizeObserver(function () { return _this._calculateSize(); });
+                this._observer = new ResizeObserver(function () { return _this._runWithObserver(_this._calculateSize.bind(_this)); });
                 this._observer.observe(this._monitorTarget, { box: 'border-box' });
             }
         };
         SizingDirective.prototype._tearDownNodeMonitor = function () {
+            var _this = this;
+            cancelAnimationFrame(this._frameHandlerId);
+            this._runWithObserver(function () {
+                _this._observer.disconnect();
+                _this._observer = undefined;
+            });
+        };
+        SizingDirective.prototype._runWithObserver = function (func) {
             if (this._observer) {
-                this._observer.disconnect();
-                this._observer = undefined;
+                return func();
             }
+            return undefined;
         };
         SizingDirective.prototype._calculateSize = function () {
             var e_1, _a;
@@ -602,7 +612,8 @@
         SizingDirective.prototype._reflowHeight = function () {
             var cnt = this._reflowFrameCount;
             if (cnt < 15) {
-                requestAnimationFrame(this._reflowHeight.bind(this));
+                cancelAnimationFrame(this._frameHandlerId);
+                this._frameHandlerId = requestAnimationFrame(this._reflowHeight.bind(this));
                 if (cnt === 0) {
                     this._element.style.height = '0';
                 }
@@ -702,20 +713,32 @@
         };
         /** @ignore */
         AwaitDirective.prototype.ngDoCheck = function () {
-            var inProgress = this.buiAwait === true || (typeof this.buiAwait === 'object' && !this.buiAwait.closed);
+            var inProgress = this.buiAwait === true || (typeof this.buiAwait === 'object' && !this.buiAwait.closed) || this._isDeterminate;
             if (inProgress !== this._processing) {
                 this._processing = inProgress;
-                this._statusChanged();
+                this._statusChanged(this._isDeterminate ? 'determinate' : 'indeterminate');
+            }
+            if (this._isDeterminate && this._spinnerRef && this._spinnerRef.instance.value !== this.buiAwait) {
+                this._spinnerRef.instance.value = this.buiAwait;
+                i0["ɵmarkDirty"](this._spinnerRef.instance);
             }
         };
-        AwaitDirective.prototype._statusChanged = function () {
+        Object.defineProperty(AwaitDirective.prototype, "_isDeterminate", {
+            /** @ignore */
+            get: function () {
+                return typeof this.buiAwait === 'number' && this.buiAwait >= 0 && this.buiAwait < 100;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AwaitDirective.prototype._statusChanged = function (mode) {
             if (this.button) {
                 this.button.disabled = this._processing;
                 if (this._processing) {
                     this._spinnerRef = this._viewCont.createComponent(this._factory);
                     var c = this._spinnerRef.instance;
                     c.diameter = this.buiAwaitDiameter;
-                    c.mode = 'indeterminate';
+                    c.mode = mode;
                     c.color = this.button.color;
                     var e = this._spinnerRef.location.nativeElement;
                     e.setAttribute('aria-label', this.buiAwaitAriaLabel);
@@ -725,6 +748,7 @@
                 else {
                     this._captionWrapper.style.visibility = '';
                     this._spinnerRef.destroy();
+                    this._spinnerRef = undefined;
                     this._overlayEl.innerHTML = '';
                 }
             }
@@ -753,6 +777,71 @@
                     type: i0.Input
                 }] } });
 
+    /**
+     * Use `[bui-class.not-empty]` to specify a style class activated only when the host element has DOM children;
+     *
+     * use `[bui-class.empty]` for a style class activated when it has no DOM children.
+     *
+     * Use `[bui-class.no-text]` to specify a style class activated only when the host element has text content;
+     *
+     * use `[bui-class.has-text]` for a style class activated when it has no text content.
+     */
+    var ObserveContentClassDirective = /** @class */ (function () {
+        function ObserveContentClassDirective(observer, elementRef) {
+            var _this = this;
+            this.classToRemove = [];
+            this.element = elementRef.nativeElement;
+            this.subscription = observer.observe(elementRef).subscribe(function () { return _this.checkClass(); });
+        }
+        ObserveContentClassDirective.prototype.ngOnInit = function () {
+            this.checkClass.bind(this);
+        };
+        ObserveContentClassDirective.prototype.ngOnDestroy = function () {
+            this.subscription.unsubscribe();
+        };
+        ObserveContentClassDirective.prototype.checkClass = function () {
+            var _b;
+            var _this = this;
+            (_b = this.element.classList).remove.apply(_b, __spreadArray([], __read(this.classToRemove)));
+            this.classToRemove = [];
+            this.checkClassWith(this.classEmpty, this.classNotEmpty, function () { var _a; return _this.element.childElementCount === 0 && !((_a = _this.element.textContent) === null || _a === void 0 ? void 0 : _a.trim()); });
+            this.checkClassWith(this.classNoText, this.classHasText, function () { var _a; return !((_a = _this.element.textContent) === null || _a === void 0 ? void 0 : _a.trim()); });
+        };
+        ObserveContentClassDirective.prototype.checkClassWith = function (withoutClass, withClass, isWithout) {
+            var without = isWithout();
+            this.addClass(without ? withoutClass : withClass);
+        };
+        ObserveContentClassDirective.prototype.addClass = function (cls) {
+            var _b, _c;
+            if (cls === null || cls === void 0 ? void 0 : cls.trim()) {
+                var classes = cls.trim().split(/\s+/);
+                (_b = this.element.classList).add.apply(_b, __spreadArray([], __read(classes)));
+                (_c = this.classToRemove).push.apply(_c, __spreadArray([], __read(classes)));
+            }
+        };
+        return ObserveContentClassDirective;
+    }());
+    ObserveContentClassDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ObserveContentClassDirective, deps: [{ token: i1__namespace$1.ContentObserver }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    ObserveContentClassDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ObserveContentClassDirective, selector: "[bui-class.empty],[bui-class.not-empty],[bui-class.no-text],[bui-class.has-text]", inputs: { classEmpty: ["bui-class.empty", "classEmpty"], classNotEmpty: ["bui-class.not-empty", "classNotEmpty"], classNoText: ["bui-class.no-text", "classNoText"], classHasText: ["bui-class.has-text", "classHasText"] }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ObserveContentClassDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[bui-class.empty],[bui-class.not-empty],[bui-class.no-text],[bui-class.has-text]'
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace$1.ContentObserver }, { type: i0__namespace.ElementRef }]; }, propDecorators: { classEmpty: [{
+                    type: i0.Input,
+                    args: ['bui-class.empty']
+                }], classNotEmpty: [{
+                    type: i0.Input,
+                    args: ['bui-class.not-empty']
+                }], classNoText: [{
+                    type: i0.Input,
+                    args: ['bui-class.no-text']
+                }], classHasText: [{
+                    type: i0.Input,
+                    args: ['bui-class.has-text']
+                }] } });
+
     /**
      *  For functionality that cannot be easily achieved via CSS.
      */
@@ -762,14 +851,24 @@
         return BehaviorModule;
     }());
     BehaviorModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BehaviorModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    BehaviorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BehaviorModule, declarations: [SizingDirective, SizingMonitorDirective, AwaitDirective], imports: [common.CommonModule, i1.MatButtonModule, progressSpinner.MatProgressSpinnerModule], exports: [SizingDirective, SizingMonitorDirective, AwaitDirective, progressSpinner.MatProgressSpinnerModule] });
-    BehaviorModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BehaviorModule, imports: [[common.CommonModule, i1.MatButtonModule, progressSpinner.MatProgressSpinnerModule], progressSpinner.MatProgressSpinnerModule] });
+    BehaviorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BehaviorModule, declarations: [SizingDirective, SizingMonitorDirective, AwaitDirective, ObserveContentClassDirective], imports: [common.CommonModule, i1.MatButtonModule, progressSpinner.MatProgressSpinnerModule, i1$1.ObserversModule], exports: [SizingDirective,
+            SizingMonitorDirective,
+            AwaitDirective,
+            progressSpinner.MatProgressSpinnerModule,
+            ObserveContentClassDirective] });
+    BehaviorModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BehaviorModule, imports: [[common.CommonModule, i1.MatButtonModule, progressSpinner.MatProgressSpinnerModule, i1$1.ObserversModule], progressSpinner.MatProgressSpinnerModule] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BehaviorModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        declarations: [SizingDirective, SizingMonitorDirective, AwaitDirective],
-                        imports: [common.CommonModule, i1.MatButtonModule, progressSpinner.MatProgressSpinnerModule],
-                        exports: [SizingDirective, SizingMonitorDirective, AwaitDirective, progressSpinner.MatProgressSpinnerModule]
+                        declarations: [SizingDirective, SizingMonitorDirective, AwaitDirective, ObserveContentClassDirective],
+                        imports: [common.CommonModule, i1.MatButtonModule, progressSpinner.MatProgressSpinnerModule, i1$1.ObserversModule],
+                        exports: [
+                            SizingDirective,
+                            SizingMonitorDirective,
+                            AwaitDirective,
+                            progressSpinner.MatProgressSpinnerModule,
+                            ObserveContentClassDirective
+                        ]
                     }]
             }] });
 
@@ -779,6 +878,7 @@
 
     exports.AwaitDirective = AwaitDirective;
     exports.BehaviorModule = BehaviorModule;
+    exports.ObserveContentClassDirective = ObserveContentClassDirective;
     exports.SizingDirective = SizingDirective;
     exports.SizingMonitorDirective = SizingMonitorDirective;