@bravura/ui 1.7.2 → 1.10.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Change history
 
+## 1.10.0 (2021-12-15)
+
+* feat(selection-panel): add content projection at end of heading ([b41a17a](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/b41a17a))
+
+## <small>1.9.1 (2021-12-15)</small>
+
+* fix(selection-panel): add missing NgModule exports ([ea0370d](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/ea0370d))
+* refactor(theming): standardise theme attribute naming - part 1 ([2878570](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/2878570))
+
+## 1.9.0 (2021-12-12)
+
+* feat(behavior): add await directive ([20a276a](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/20a276a))
+
+## 1.8.0 (2021-12-09)
+
+* feat(behavior): enhance sizing directive to support inline styles ([3a27a84](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/3a27a84))
+
 ## <small>1.7.2 (2021-11-17)</small>
 
 * fix(tooltip): fix tooltip content not being reset when given falsy ([b17da82](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/b17da82))

package/behavior/await.directive.d.ts

@@ -0,0 +1,60 @@
+import { AfterViewInit, ComponentFactoryResolver, DoCheck, ElementRef, ViewContainerRef } from '@angular/core';
+import { MatButton } from '@angular/material/button';
+import { Subscription } from 'rxjs';
+import * as i0 from "@angular/core";
+/**
+ * Use this directive on a `MatButton` element to provide an alternative view when an sync operation is in progress.
+ *
+ * For example:
+ *
+ * ```
+ * <button (click)="submit();" [buiAwait]="submitSubscription" buiAwaitAriaLabel="submitting">Submit</button>
+ * ```
+ *
+ * Please refer to [Material Design](https://material.io/components/progress-indicators#circular-progress-indicators)
+ * for more details of integrating circular spinner component with action buttons.
+ *
+ * The operation is considered 'in progress' when the bound property `buiAwait` evaluates to
+ *
+ * - `true`; or
+ * - an instance of `rxjs/Subscription` and `buiAwait.closed` is falsy
+ *
+ * When in progress
+ *
+ * - the button's caption will be hidden;
+ * - a `<mat-progress-spinner>` will be displayed in place of the caption;
+ * - the button will be disabled by setting the property `disabled` of the `MatButton` instance.
+ */
+export declare class AwaitDirective implements AfterViewInit, DoCheck {
+    private readonly _eRef;
+    private readonly button;
+    private readonly doc;
+    private _viewCont;
+    /**
+     * Indicates the `in progress` status of an async operation.
+     *
+     * The operation is considered 'in progress' when the property evaluates to
+     *
+     * - `true`; or
+     * - an instance of `rxjs/Subscription` and `buiAwait.closed` is falsy
+     *
+     */
+    buiAwait: null | undefined | boolean | Subscription;
+    /** 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`. */
+    buiAwaitDiameter: number;
+    private _overlayEl;
+    private _processing;
+    private _factory;
+    private _spinnerRef;
+    private _captionWrapper;
+    constructor(_eRef: ElementRef<HTMLElement>, button: MatButton, doc: Document, factoryResolver: ComponentFactoryResolver, _viewCont: ViewContainerRef);
+    /** @ignore */
+    ngAfterViewInit(): void;
+    /** @ignore */
+    ngDoCheck(): void;
+    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

@@ -1,12 +1,15 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./sizing.directive";
 import * as i2 from "./sizing-monitor.directive";
-import * as i3 from "@angular/common";
+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";
 /**
  *  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.CommonModule], [typeof i1.SizingDirective, typeof i2.SizingMonitorDirective]>;
+    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 ɵinj: i0.ɵɵInjectorDeclaration<BehaviorModule>;
 }

package/behavior/public-api.d.ts

@@ -1,3 +1,4 @@
 export * from './sizing.directive';
 export * from './sizing-monitor.directive';
 export * from './behavior.module';
+export * from './await.directive';

package/behavior/sizing.directive.d.ts

@@ -2,8 +2,8 @@ import { ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, SimpleChanges }
 import { SizingMonitorDirective } from './sizing-monitor.directive';
 import * as i0 from "@angular/core";
 /**
- * This directive monitors the changes in width of the `sizingBy` target, and apply specified style
- *  classes to the current element dynamically.
+ * This directive monitors the changes in the width of the `sizingBy` target, and apply specified style
+ *  classes and/or inline styles to the current element dynamically.
  *
  * In order for the layout engine to efficiently calculate and stabilize the dimensions, the effective style property
  * `box-sizing` of the `sizingBy` target element must be set to `border-box`.
@@ -16,8 +16,9 @@ import * as i0 from "@angular/core";
  *
  * ```html
  * <div #parentElement>
- *   <div [buiSizing]="{'400': 'small', '800': 'medium', '~': 'large'}" [sizingBy]="parentElement"></div>
- *   <div [buiSizing]="['small', 'medium', 'large']" [sizingBy]="'root'"></div>
+ *   <div [buiSizing]="{'400': 'small', '800': 'medium', '~': 'large'}" [buiSizingBy]="parentElement"></div>
+ *   <div [buiSizing]="['small', 'medium', 'large']" [buiSizingBy]="'root'"></div>
+ *   <div [buiSizing]="{'650': 'border-color: #28569', '~': 'bg-muted; border-style: dotted'}" [buiSizingBy]="parentElement"></div>
  * </div>
  * ```
  */
@@ -43,13 +44,16 @@ export declare class SizingDirective implements OnChanges, OnDestroy {
     };
     /**
      * The alias of `buiSizingBy`.
+     * @default 'root'
      */
     sizingBy: 'root' | 'parent' | HTMLElement;
     /**
      * Designate an element to be monitored for recalculating the style classes of the current element.
      *
-     * `root` specifies the document root or the enclosing shadow host.
-     * `parent` specifies the parent element.
+     * - `root` specifies the document root or the enclosing shadow host. This is the default value.
+     * - `parent` specifies the parent element.
+     *
+     * @default 'root'
      * @alias sizingBy
      */
     get buiSizingBy(): 'root' | 'parent' | HTMLElement;
@@ -81,6 +85,8 @@ export declare class SizingDirective implements OnChanges, OnDestroy {
     private _setUpNodeMonitor;
     private _tearDownNodeMonitor;
     private _calculateSize;
+    private _applyClassesOrStyles;
+    private _removeClassesOrStyles;
     private _reflowHeight;
     private _toNumber;
     static ɵfac: i0.ɵɵFactoryDeclaration<SizingDirective, [null, { optional: true; }, null, null]>;

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')) :
-    typeof define === 'function' && define.amd ? define('@bravura/ui/behavior', ['exports', '@angular/cdk/coercion', '@angular/common', '@angular/core', 'rxjs/operators'], 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));
-})(this, (function (exports, coercion, common, i0, operators) { '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')) :
+    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';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -23,6 +23,7 @@
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -373,8 +374,8 @@
             }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; } });
 
     /**
-     * This directive monitors the changes in width of the `sizingBy` target, and apply specified style
-     *  classes to the current element dynamically.
+     * This directive monitors the changes in the width of the `sizingBy` target, and apply specified style
+     *  classes and/or inline styles to the current element dynamically.
      *
      * In order for the layout engine to efficiently calculate and stabilize the dimensions, the effective style property
      * `box-sizing` of the `sizingBy` target element must be set to `border-box`.
@@ -387,8 +388,9 @@
      *
      * ```html
      * <div #parentElement>
-     *   <div [buiSizing]="{'400': 'small', '800': 'medium', '~': 'large'}" [sizingBy]="parentElement"></div>
-     *   <div [buiSizing]="['small', 'medium', 'large']" [sizingBy]="'root'"></div>
+     *   <div [buiSizing]="{'400': 'small', '800': 'medium', '~': 'large'}" [buiSizingBy]="parentElement"></div>
+     *   <div [buiSizing]="['small', 'medium', 'large']" [buiSizingBy]="'root'"></div>
+     *   <div [buiSizing]="{'650': 'border-color: #28569', '~': 'bg-muted; border-style: dotted'}" [buiSizingBy]="parentElement"></div>
      * </div>
      * ```
      */
@@ -409,6 +411,7 @@
             this.buiSizing = {};
             /**
              * The alias of `buiSizingBy`.
+             * @default 'root'
              */
             this.sizingBy = 'root';
             /**
@@ -432,8 +435,10 @@
             /**
              * Designate an element to be monitored for recalculating the style classes of the current element.
              *
-             * `root` specifies the document root or the enclosing shadow host.
-             * `parent` specifies the parent element.
+             * - `root` specifies the document root or the enclosing shadow host. This is the default value.
+             * - `parent` specifies the parent element.
+             *
+             * @default 'root'
              * @alias sizingBy
              */
             get: function () {
@@ -514,7 +519,7 @@
             }
         };
         SizingDirective.prototype._calculateSize = function () {
-            var e_1, _a, _b, _c;
+            var e_1, _a;
             var _this = this;
             var widthChanged = this._width !== this._monitorTarget.clientWidth;
             var heightChanged = this._height !== this._monitorTarget.clientHeight;
@@ -525,15 +530,11 @@
                 try {
                     for (var bks_1 = __values(bks), bks_1_1 = bks_1.next(); !bks_1_1.done; bks_1_1 = bks_1.next()) {
                         var key = bks_1_1.value;
-                        var classes = this._sizingSpec[key].split(/\s+/).filter(function (c) { return !!c; });
-                        if (classes.length) {
-                            (_b = this._element.classList).remove.apply(_b, __spreadArray([], __read(classes)));
-                        }
+                        var classesOrStyles = this._sizingSpec[key].split(/;+/).filter(function (c) { return c; });
+                        this._removeClassesOrStyles(classesOrStyles);
                         var expectedWidth = this._toNumber(key);
                         if (this._width <= expectedWidth && !found) {
-                            if (classes.length) {
-                                (_c = this._element.classList).add.apply(_c, __spreadArray([], __read(classes)));
-                            }
+                            this._applyClassesOrStyles(classesOrStyles);
                             found = true;
                         }
                     }
@@ -555,6 +556,38 @@
                 this.buiResized.emit({ width: this._width, height: this._height });
             }
         };
+        SizingDirective.prototype._applyClassesOrStyles = function (clsOrStyles) {
+            var _this = this;
+            clsOrStyles.forEach(function (s) {
+                var _a;
+                if (s.includes(':')) {
+                    var _b = __read(s.split(':'), 2), prop = _b[0], val = _b[1];
+                    _this._element.style.setProperty(prop.trim(), val.trim());
+                }
+                else {
+                    var classes = s.split(/\s+/).filter(function (c) { return c; });
+                    if (classes.length) {
+                        (_a = _this._element.classList).add.apply(_a, __spreadArray([], __read(classes)));
+                    }
+                }
+            });
+        };
+        SizingDirective.prototype._removeClassesOrStyles = function (clsOrStyles) {
+            var _this = this;
+            clsOrStyles.forEach(function (s) {
+                var _a;
+                if (s.includes(':')) {
+                    var _b = __read(s.split(':'), 1), prop = _b[0];
+                    _this._element.style.removeProperty(prop);
+                }
+                else {
+                    var classes = s.split(/\s+/).filter(function (c) { return c; });
+                    if (classes.length) {
+                        (_a = _this._element.classList).remove.apply(_a, __spreadArray([], __read(classes)));
+                    }
+                }
+            });
+        };
         SizingDirective.prototype._reflowHeight = function () {
             var cnt = this._reflowFrameCount;
             if (cnt < 15) {
@@ -605,6 +638,110 @@
                     type: i0.Input
                 }] } });
 
+    /**
+     * Use this directive on a `MatButton` element to provide an alternative view when an sync operation is in progress.
+     *
+     * For example:
+     *
+     * ```
+     * <button (click)="submit();" [buiAwait]="submitSubscription" buiAwaitAriaLabel="submitting">Submit</button>
+     * ```
+     *
+     * Please refer to [Material Design](https://material.io/components/progress-indicators#circular-progress-indicators)
+     * for more details of integrating circular spinner component with action buttons.
+     *
+     * The operation is considered 'in progress' when the bound property `buiAwait` evaluates to
+     *
+     * - `true`; or
+     * - an instance of `rxjs/Subscription` and `buiAwait.closed` is falsy
+     *
+     * When in progress
+     *
+     * - the button's caption will be hidden;
+     * - a `<mat-progress-spinner>` will be displayed in place of the caption;
+     * - the button will be disabled by setting the property `disabled` of the `MatButton` instance.
+     */
+    var AwaitDirective = /** @class */ (function () {
+        function AwaitDirective(_eRef, button, doc, factoryResolver, _viewCont) {
+            this._eRef = _eRef;
+            this.button = button;
+            this.doc = doc;
+            this._viewCont = _viewCont;
+            /** The ARIA label to be put on the spinner. The default value is `"In progress"`. */
+            this.buiAwaitAriaLabel = 'In progress';
+            /** The diameter of the in-progress spinner. The default value is `20`. */
+            this.buiAwaitDiameter = 20;
+            this._processing = false;
+            if (!button) {
+                console.error('[buiAwait] can only be used on a MatButton');
+                return;
+            }
+            this._factory = factoryResolver.resolveComponentFactory(progressSpinner.MatProgressSpinner);
+        }
+        /** @ignore */
+        AwaitDirective.prototype.ngAfterViewInit = function () {
+            if (this.button) {
+                this._overlayEl = this.doc.createElement('div');
+                this._eRef.nativeElement.appendChild(this._overlayEl);
+                this._overlayEl.classList.add('bui-await-overlay');
+                this._overlayEl.style.cssText =
+                    'display:flex; position:absolute; top:0; right:0; bottom:0; left:0; align-items: center; justify-content: center';
+                this._captionWrapper = this._eRef.nativeElement.querySelector('.mat-button-wrapper');
+            }
+        };
+        /** @ignore */
+        AwaitDirective.prototype.ngDoCheck = function () {
+            var inProgress = this.buiAwait === true || (typeof this.buiAwait === 'object' && !this.buiAwait.closed);
+            if (inProgress !== this._processing) {
+                this._processing = inProgress;
+                this._statusChanged();
+            }
+        };
+        AwaitDirective.prototype._statusChanged = function () {
+            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.color = this.button.color;
+                    var e = this._spinnerRef.location.nativeElement;
+                    e.setAttribute('aria-label', this.buiAwaitAriaLabel);
+                    this._overlayEl.appendChild(e);
+                    this._captionWrapper.style.visibility = 'hidden';
+                }
+                else {
+                    this._captionWrapper.style.visibility = '';
+                    this._spinnerRef.destroy();
+                    this._overlayEl.innerHTML = '';
+                }
+            }
+        };
+        return AwaitDirective;
+    }());
+    AwaitDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: AwaitDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace.MatButton, optional: true }, { token: common.DOCUMENT }, { token: i0__namespace.ComponentFactoryResolver }, { token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    AwaitDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.7", type: AwaitDirective, selector: "[buiAwait]", inputs: { buiAwait: "buiAwait", buiAwaitAriaLabel: "buiAwaitAriaLabel", buiAwaitDiameter: "buiAwaitDiameter" }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: AwaitDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[buiAwait]'
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: i0__namespace.ElementRef }, { type: i1__namespace.MatButton, decorators: [{
+                            type: i0.Optional
+                        }] }, { type: Document, decorators: [{
+                            type: i0.Inject,
+                            args: [common.DOCUMENT]
+                        }] }, { type: i0__namespace.ComponentFactoryResolver }, { type: i0__namespace.ViewContainerRef }];
+        }, propDecorators: { buiAwait: [{
+                    type: i0.Input
+                }], buiAwaitAriaLabel: [{
+                    type: i0.Input
+                }], buiAwaitDiameter: [{
+                    type: i0.Input
+                }] } });
+
     /**
      *  For functionality that cannot be easily achieved via CSS.
      */
@@ -614,14 +751,14 @@
         return BehaviorModule;
     }());
     BehaviorModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: BehaviorModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    BehaviorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: BehaviorModule, declarations: [SizingDirective, SizingMonitorDirective], imports: [common.CommonModule], exports: [SizingDirective, SizingMonitorDirective] });
-    BehaviorModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: BehaviorModule, imports: [[common.CommonModule]] });
+    BehaviorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", 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.7", ngImport: i0__namespace, type: BehaviorModule, imports: [[common.CommonModule, i1.MatButtonModule, progressSpinner.MatProgressSpinnerModule], progressSpinner.MatProgressSpinnerModule] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: BehaviorModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        declarations: [SizingDirective, SizingMonitorDirective],
-                        imports: [common.CommonModule],
-                        exports: [SizingDirective, SizingMonitorDirective]
+                        declarations: [SizingDirective, SizingMonitorDirective, AwaitDirective],
+                        imports: [common.CommonModule, i1.MatButtonModule, progressSpinner.MatProgressSpinnerModule],
+                        exports: [SizingDirective, SizingMonitorDirective, AwaitDirective, progressSpinner.MatProgressSpinnerModule]
                     }]
             }] });
 
@@ -629,6 +766,7 @@
      * Generated bundle index. Do not edit.
      */
 
+    exports.AwaitDirective = AwaitDirective;
     exports.BehaviorModule = BehaviorModule;
     exports.SizingDirective = SizingDirective;
     exports.SizingMonitorDirective = SizingMonitorDirective;