@flywheel-io/vision 0.1.2 → 0.2.0

package/bundles/flywheel-io-vision.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/material/button'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('rxjs'), require('@angular/forms'), require('@angular/material/paginator'), require('@angular/material/sort'), require('@angular/material/table'), require('rxjs/operators'), require('@angular/material/input'), require('@angular/material/select')) :
-    typeof define === 'function' && define.amd ? define('@flywheel-io/vision', ['exports', '@angular/core', '@angular/common', '@angular/material/button', '@angular/cdk/overlay', '@angular/cdk/portal', 'rxjs', '@angular/forms', '@angular/material/paginator', '@angular/material/sort', '@angular/material/table', 'rxjs/operators', '@angular/material/input', '@angular/material/select'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['flywheel-io'] = global['flywheel-io'] || {}, global['flywheel-io'].vision = {}), global.ng.core, global.ng.common, global.ng.material.button, global.ng.cdk.overlay, global.ng.cdk.portal, global.rxjs, global.ng.forms, global.ng.material.paginator, global.ng.material.sort, global.ng.material.table, global.rxjs.operators, global.ng.material.input, global.ng.material.select));
-}(this, (function (exports, core, common, button, overlay, portal, rxjs, forms, paginator, sort, table, operators, input, select) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/material/button'), require('rxjs'), require('@angular/material/icon'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/forms'), require('@angular/material/paginator'), require('@angular/material/sort'), require('@angular/material/table'), require('rxjs/operators'), require('@angular/material/input'), require('@angular/material/select')) :
+    typeof define === 'function' && define.amd ? define('@flywheel-io/vision', ['exports', '@angular/core', '@angular/common', '@angular/material/button', 'rxjs', '@angular/material/icon', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/forms', '@angular/material/paginator', '@angular/material/sort', '@angular/material/table', 'rxjs/operators', '@angular/material/input', '@angular/material/select'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['flywheel-io'] = global['flywheel-io'] || {}, global['flywheel-io'].vision = {}), global.ng.core, global.ng.common, global.ng.material.button, global.rxjs, global.ng.material.icon, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.forms, global.ng.material.paginator, global.ng.material.sort, global.ng.material.table, global.rxjs.operators, global.ng.material.input, global.ng.material.select));
+}(this, (function (exports, i0, common, button, rxjs, icon, overlay, portal, forms, paginator, sort, table, operators, input, select) { 'use strict';
 
     var FwButtonGroupComponent = /** @class */ (function () {
         function FwButtonGroupComponent() {
@@ -12,7 +12,7 @@
         return FwButtonGroupComponent;
     }());
     FwButtonGroupComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     host: {
                         'class': 'fw-button-group',
                         '[class.small]': 'size === "small"',
@@ -22,13 +22,13 @@
                     },
                     selector: 'fw-button-group',
                     template: "<ng-content></ng-content>",
-                    encapsulation: core.ViewEncapsulation.None,
+                    encapsulation: i0.ViewEncapsulation.None,
                     styles: ["fw-button-group.fw-button-group{border-radius:4px;display:inline-flex;align-items:stretch}fw-button-group.fw-button-group.compact button{line-height:24px;height:24px}fw-button-group.fw-button-group.small button{font-size:12px}fw-button-group.fw-button-group.medium button{font-size:14px}fw-button-group.fw-button-group.large button{font-size:18px}fw-button-group.fw-button-group button{min-width:0;margin:0!important;border-radius:0}fw-button-group.fw-button-group>button:first-of-type,fw-button-group.fw-button-group>fw-button:first-of-type>button{border-top-left-radius:4px;border-bottom-left-radius:4px}fw-button-group.fw-button-group>button:last-of-type,fw-button-group.fw-button-group>fw-button:last-of-type>button{border-top-right-radius:4px;border-bottom-right-radius:4px}fw-button-group.fw-button-group>button.mat-stroked-button,fw-button-group.fw-button-group>button.mat-stroked-button+button.mat-stroke-button,fw-button-group.fw-button-group>fw-button[ng-reflect-type=stroked]+fw-button[ng-reflect-type=stroked]>button,fw-button-group.fw-button-group>fw-button[ng-reflect-type=stroked]>button,fw-button-group.fw-button-group>fw-button[type=stroked]+fw-button[type=stroked]>button,fw-button-group.fw-button-group>fw-button[type=stroked]>button{border-right-width:0}fw-button-group.fw-button-group>button.mat-stroked-button:last-of-type,fw-button-group.fw-button-group>fw-button[ng-reflect-type=stroked]:last-of-type>button,fw-button-group.fw-button-group>fw-button[type=stroked]:last-of-type>button{border-right-width:1px!important}fw-button-group.fw-button-group>button:not(.mat-stroked-button)+button.mat-stroked-button,fw-button-group.fw-button-group>fw-button:not([ng-reflect-type=stroked])+fw-button[ng-reflect-type=stroked]>button,fw-button-group.fw-button-group>fw-button:not([type=stroked])+fw-button[type=stroked]>button{border-left-width:0}"]
                 },] }
     ];
     FwButtonGroupComponent.propDecorators = {
-        layout: [{ type: core.Input }],
-        size: [{ type: core.Input }]
+        layout: [{ type: i0.Input }],
+        size: [{ type: i0.Input }]
     };
 
     var FwButtonGroupModule = /** @class */ (function () {
@@ -37,7 +37,7 @@
         return FwButtonGroupModule;
     }());
     FwButtonGroupModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     exports: [
                         FwButtonGroupComponent,
                     ],
@@ -59,7 +59,7 @@
         return FwButtonComponent;
     }());
     FwButtonComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     host: {
                         'class': 'fw-button',
                         '[class.small]': 'size === "small"',
@@ -73,10 +73,10 @@
                 },] }
     ];
     FwButtonComponent.propDecorators = {
-        color: [{ type: core.Input }],
-        layout: [{ type: core.Input }],
-        size: [{ type: core.Input }],
-        type: [{ type: core.Input }]
+        color: [{ type: i0.Input }],
+        layout: [{ type: i0.Input }],
+        size: [{ type: i0.Input }],
+        type: [{ type: i0.Input }]
     };
 
     var FwButtonModule = /** @class */ (function () {
@@ -85,7 +85,7 @@
         return FwButtonModule;
     }());
     FwButtonModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
                         button.MatButtonModule,
@@ -420,6 +420,272 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
+    function genId() {
+        return String.prototype.padStart(24, Math.floor(Math.random() * Date.now()).toString(16));
+    }
+    var FwNotificationService = /** @class */ (function () {
+        function FwNotificationService() {
+            this.notifications$ = new rxjs.BehaviorSubject([]);
+            this.notificationQueue = [];
+        }
+        FwNotificationService.prototype.show = function (notification) {
+            if (!notification.id) {
+                notification.id = genId();
+            }
+            this.notificationQueue.push(notification);
+            this.notifications$.next(this.notificationQueue);
+        };
+        FwNotificationService.prototype.dismiss = function (notificationId) {
+            this.notificationQueue = this.notificationQueue.filter(function (v) { return v.id !== notificationId; });
+            this.notifications$.next(this.notificationQueue);
+        };
+        FwNotificationService.prototype.dismissAll = function () {
+            this.notificationQueue = [];
+            this.notifications$.next(this.notificationQueue);
+        };
+        return FwNotificationService;
+    }());
+    FwNotificationService.ɵprov = i0.ɵɵdefineInjectable({ factory: function FwNotificationService_Factory() { return new FwNotificationService(); }, token: FwNotificationService, providedIn: "root" });
+    FwNotificationService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+
+    var FwNotificationContainerComponent = /** @class */ (function () {
+        function FwNotificationContainerComponent(cdr, notificationService) {
+            var _this = this;
+            this.cdr = cdr;
+            this.notificationService = notificationService;
+            this.limit = 3;
+            this.notifications = [];
+            this.showMore = false;
+            this.showLess = false;
+            this.subscriptions = {
+                notifications: rxjs.Subscription.EMPTY
+            };
+            this.subscriptions.notifications = this.notificationService.notifications$.subscribe(function (notifications) {
+                _this.notifications = notifications;
+                _this.showMore = _this.notifications.length > 1;
+                _this.showLess = false;
+                _this.cdr.markForCheck();
+            });
+        }
+        FwNotificationContainerComponent.prototype.ngOnDestroy = function () {
+            var e_1, _a;
+            try {
+                for (var _b = __values(Object.values(this.subscriptions)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var subscription = _c.value;
+                    subscription.unsubscribe();
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        };
+        FwNotificationContainerComponent.prototype.notificationClass = function (index) {
+            var cssClass;
+            var level = this.notifications.length > this.limit
+                ? index - (this.notifications.length - this.limit)
+                : index;
+            if (this.showLess) {
+                cssClass = 'default';
+            }
+            else {
+                cssClass = level >= 0 ? "level-" + level : 'hidden';
+            }
+            return cssClass;
+        };
+        FwNotificationContainerComponent.prototype.onReady = function (notification) {
+            var currentNotification = this.notifications[this.notifications.length - 1];
+            currentNotification.ref = notification;
+            notification.startTimer();
+        };
+        FwNotificationContainerComponent.prototype.onDismiss = function (notificationId) {
+            var notification = this.notifications.find(function (currentNotification) { return currentNotification.id === notificationId; });
+            if (notification) {
+                notification.ref.stopTimer();
+            }
+            this.notificationService.dismiss(notification.id);
+            this.cdr.markForCheck();
+        };
+        FwNotificationContainerComponent.prototype.clearAll = function () {
+            this.showMore = false;
+            this.showLess = false;
+            this.notificationService.dismissAll();
+            this.cdr.markForCheck();
+        };
+        FwNotificationContainerComponent.prototype.onShowMore = function () {
+            this.showLess = true;
+            this.showMore = false;
+            this.cdr.markForCheck();
+        };
+        FwNotificationContainerComponent.prototype.onShowLess = function () {
+            this.showMore = true;
+            this.showLess = false;
+            this.cdr.markForCheck();
+        };
+        return FwNotificationContainerComponent;
+    }());
+    FwNotificationContainerComponent.decorators = [
+        { type: i0.Component, args: [{
+                    host: {
+                        'class': 'fw-notification-container',
+                        '[class.duo]': 'notifications.length === 2',
+                        '[class.triple]': 'notifications.length >= 3',
+                    },
+                    selector: 'fw-notification-container',
+                    template: "<div role=\"list\">\n  <fw-notification *ngFor=\"let notification of notifications; index as i\"\n    (ready)=\"onReady($event)\"\n    (dismiss)=\"onDismiss($event)\"\n    [class]=\"notificationClass(i)\"\n    [notification]=\"notification\"\n    [attr.aria-label]=\"notification.type + ' : ' + notification.message\"\n    role=\"listitem\"\n  ></fw-notification>\n  <div class=\"buttons\">\n    <fw-button *ngIf=\"showLess\" (click)=\"onShowLess()\" mat-button aria-label=\"show less\" layout=\"compact\" size=\"small\">\n      <mat-icon>expand_less</mat-icon>\n    </fw-button>\n    <fw-button *ngIf=\"showMore\" (click)=\"onShowMore()\" mat-button aria-label=\"show more\" layout=\"compact\" size=\"small\">\n      <mat-icon>expand_more</mat-icon>\n    </fw-button>\n    <fw-button (click)=\"clearAll()\" mat-button class=\"clear-all\" aria-label=\"clear all\" layout=\"compact\" size=\"small\">\n      Clear All\n    </fw-button>\n  </div>\n</div>\n",
+                    encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: ["fw-notification-container{position:absolute;right:0;top:0;margin-top:20px;z-index:999999}fw-notification-container>div{display:flex;flex-direction:column-reverse}fw-notification-container .buttons{display:none;position:absolute;top:-5px;right:25px}fw-notification-container .buttons button{color:#fff;background-color:#919292;margin-left:2px}fw-notification-container .buttons button.mat-button{line-height:24px!important;margin:0 0 0 2px!important}fw-notification-container:hover .buttons{display:flex}fw-notification-container .hidden{display:none}fw-notification-container fw-notification:last-of-type{margin-top:24px}fw-notification-container.duo fw-notification.level-0,fw-notification-container.triple fw-notification.level-1{transform:scale(.95) translateY(-51px)}fw-notification-container.triple fw-notification.level-0{transform:scale(.9) translateY(-108px)}"]
+                },] }
+    ];
+    FwNotificationContainerComponent.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: FwNotificationService }
+    ]; };
+
+    var FwNotificationTimerService = /** @class */ (function () {
+        function FwNotificationTimerService() {
+            this.now = 0;
+            this.remainingDuration = 0;
+        }
+        FwNotificationTimerService.prototype.start = function (duration) {
+            var _this = this;
+            return new Promise(function (resolve) {
+                _this.remainingDuration = duration;
+                _this.resolver = resolve;
+                _this.continue();
+            });
+        };
+        FwNotificationTimerService.prototype.stop = function () {
+            clearTimeout(this.timerId);
+            this.remainingDuration = 0;
+        };
+        FwNotificationTimerService.prototype.pause = function () {
+            clearTimeout(this.timerId);
+            this.remainingDuration =
+                this.remainingDuration - new Date().getTime() - this.now;
+        };
+        FwNotificationTimerService.prototype.continue = function () {
+            var _this = this;
+            this.now = new Date().getTime();
+            this.timerId = window.setTimeout(function () {
+                _this.resolver();
+            }, this.remainingDuration);
+        };
+        return FwNotificationTimerService;
+    }());
+    FwNotificationTimerService.ɵprov = i0.ɵɵdefineInjectable({ factory: function FwNotificationTimerService_Factory() { return new FwNotificationTimerService(); }, token: FwNotificationTimerService, providedIn: "root" });
+    FwNotificationTimerService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: "root",
+                },] }
+    ];
+
+    (function (FwNotificationType) {
+        FwNotificationType["Error"] = "error";
+        FwNotificationType["Info"] = "info";
+        FwNotificationType["Success"] = "success";
+        FwNotificationType["Wait"] = "wait";
+        FwNotificationType["Warning"] = "warning";
+    })(exports.FwNotificationType || (exports.FwNotificationType = {}));
+
+    var FwNotificationComponent = /** @class */ (function () {
+        function FwNotificationComponent(cdr, timerService) {
+            this.cdr = cdr;
+            this.timerService = timerService;
+            this.notificationDuration = 9000;
+            this.ready = new i0.EventEmitter();
+            this.dismiss = new i0.EventEmitter();
+        }
+        FwNotificationComponent.prototype.ngAfterViewInit = function () {
+            this.ready.emit(this);
+            this.cdr.markForCheck();
+        };
+        FwNotificationComponent.prototype.startTimer = function () {
+            var _this = this;
+            this.timerService.start(this.notificationDuration).then(function () {
+                _this.onClickDismiss();
+                _this.cdr.markForCheck();
+            });
+        };
+        FwNotificationComponent.prototype.stopTimer = function () {
+            this.timerService.stop();
+            this.cdr.markForCheck();
+        };
+        FwNotificationComponent.prototype.onClickDismiss = function () {
+            this.dismiss.emit(this.notification.id);
+            this.cdr.markForCheck();
+        };
+        return FwNotificationComponent;
+    }());
+    FwNotificationComponent.decorators = [
+        { type: i0.Component, args: [{
+                    host: {
+                        'class': 'fw-notification',
+                        '[class.error]': "notification.type === '" + exports.FwNotificationType.Error + "'",
+                        '[class.info]': "notification.type === '" + exports.FwNotificationType.Info + "'",
+                        '[class.success]': "notification.type === '" + exports.FwNotificationType.Success + "'",
+                        '[class.wait]': "notification.type === '" + exports.FwNotificationType.Wait + "'",
+                        '[class.warning]': "notification.type === '" + exports.FwNotificationType.Warning + "'",
+                        '(click)': 'onClickDismiss()'
+                    },
+                    selector: 'fw-notification',
+                    template: "<ng-container>{{ notification.message }}</ng-container>",
+                    providers: [FwNotificationTimerService],
+                    encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [":root{--shadow-level-1:0px 1px 2px rgba(0,0,0,0.1);--shadow-level-2:0px 2px 4px rgba(0,0,0,0.1);--shadow-level-3:0px 4px 8px rgba(0,0,0,0.1);--inset-shadow-level-1:inset 0px 1px 2px rgba(0,0,0,0.1);--inset-shadow-level-2:inset 0px 2px 4px rgba(0,0,0,0.1);--inset-shadow-level-3:inset 0px 4px 8px rgba(0,0,0,0.1);--font-primary:\"Inter\",system-ui,-apple-system,BlinkMacSystemFont,Roboto,Ubuntu,\"Helvetica Neue\",Oxygen,Cantarell,sans-serif;--font-secondary:\"Poppins\",system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Ubuntu,\"Helvetica Neue\",Oxygen,Cantarell,sans-serif;--sidebar-width:55px;--menu-bar-width:180px;--page-layout-padding:235px;--radius:6px}*{font-family:var(--font-primary);box-sizing:border-box;text-shadow:1px 1px 1px rgba(0,0,0,.004);text-rendering:optimizeLegibility!important;-webkit-font-smoothing:antialiased!important}html{background:var(--color-gray)}body,html{height:100%}fw-notification{display:block;border-radius:4px;box-sizing:border-box;margin:5px 24px;max-width:33vw;min-width:344px;padding:14px 16px;height:48px;transform-origin:center;background-color:#2f96b4;border:1px solid hsla(0,0%,100%,.7019607843137254);box-shadow:0 0 12px #999;color:#fff;opacity:.99}fw-notification .notification{display:flex;justify-content:space-between;align-items:center}fw-notification.error{background-color:#bd362f}fw-notification.info{background-color:#2f96b4}fw-notification.success{background-color:#51a351}fw-notification.wait{background-color:#2f96b4}fw-notification.warning{background-color:#f89406}"]
+                },] }
+    ];
+    FwNotificationComponent.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: FwNotificationTimerService }
+    ]; };
+    FwNotificationComponent.propDecorators = {
+        notification: [{ type: i0.Input }],
+        notificationDuration: [{ type: i0.Input }],
+        ready: [{ type: i0.Output }],
+        dismiss: [{ type: i0.Output }]
+    };
+
+    var FwNotificationModule = /** @class */ (function () {
+        function FwNotificationModule() {
+        }
+        return FwNotificationModule;
+    }());
+    FwNotificationModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        FwButtonModule,
+                        FwButtonGroupModule,
+                        button.MatButtonModule,
+                        icon.MatIconModule,
+                    ],
+                    exports: [
+                        FwNotificationComponent,
+                        FwNotificationContainerComponent
+                    ],
+                    declarations: [
+                        FwNotificationComponent,
+                        FwNotificationContainerComponent,
+                    ],
+                    entryComponents: [
+                        FwNotificationComponent,
+                    ],
+                    providers: [
+                        FwNotificationService,
+                    ]
+                },] }
+    ];
+
     var FwPopoverTriggerDirective = /** @class */ (function () {
         function FwPopoverTriggerDirective(element, overlay, viewContainerRef) {
             this.element = element;
@@ -543,7 +809,7 @@
         return FwPopoverTriggerDirective;
     }());
     FwPopoverTriggerDirective.decorators = [
-        { type: core.Directive, args: [{
+        { type: i0.Directive, args: [{
                     host: {
                         'class': 'fw-popover-trigger',
                         '(mouseenter)': 'showPopover()',
@@ -554,13 +820,13 @@
                 },] }
     ];
     FwPopoverTriggerDirective.ctorParameters = function () { return [
-        { type: core.ElementRef },
+        { type: i0.ElementRef },
         { type: overlay.Overlay },
-        { type: core.ViewContainerRef }
+        { type: i0.ViewContainerRef }
     ]; };
     FwPopoverTriggerDirective.propDecorators = {
-        popover: [{ type: core.Input, args: ['fwPopoverTriggerFor',] }],
-        position: [{ type: core.Input, args: ['fwPopoverPosition',] }]
+        popover: [{ type: i0.Input, args: ['fwPopoverTriggerFor',] }],
+        position: [{ type: i0.Input, args: ['fwPopoverPosition',] }]
     };
 
     var FwPopoverTriggerComponent = /** @class */ (function (_super) {
@@ -585,7 +851,7 @@
         return FwPopoverTriggerComponent;
     }(FwPopoverTriggerDirective));
     FwPopoverTriggerComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     host: {
                         'class': 'fw-popover-trigger',
                         '(mouseenter)': 'showPopover()',
@@ -596,14 +862,14 @@
                 },] }
     ];
     FwPopoverTriggerComponent.ctorParameters = function () { return [
-        { type: core.ElementRef },
+        { type: i0.ElementRef },
         { type: overlay.Overlay },
-        { type: core.ViewContainerRef }
+        { type: i0.ViewContainerRef }
     ]; };
     FwPopoverTriggerComponent.propDecorators = {
-        popoverId: [{ type: core.Input, args: ['trigger-for',] }],
-        position: [{ type: core.Input, args: ['position',] }],
-        popoverTemplateRef: [{ type: core.ViewChild, args: [core.TemplateRef,] }]
+        popoverId: [{ type: i0.Input, args: ['trigger-for',] }],
+        position: [{ type: i0.Input, args: ['position',] }],
+        popoverTemplateRef: [{ type: i0.ViewChild, args: [i0.TemplateRef,] }]
     };
 
     var FwPopoverComponent = /** @class */ (function () {
@@ -612,16 +878,16 @@
         return FwPopoverComponent;
     }());
     FwPopoverComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     host: { 'class': 'fw-popover' },
                     selector: 'fw-popover',
                     template: "\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  <ng-template #content>\n    <div class=\"fw-popover-content-wrapper\">\n      <ng-content></ng-content>\n      <div class=\"fw-popover-caret\"></div>\n    </div>\n  </ng-template>",
-                    encapsulation: core.ViewEncapsulation.None,
+                    encapsulation: i0.ViewEncapsulation.None,
                     styles: [".white{color:#fff!important}.fill-white{background-color:#fff!important}.border-top-white,.border-white{border-color:#fff!important}.border-top-white{border-top:1px solid}.border-right-white{border-right:1px solid;border-color:#fff!important}.border-bottom-white{border-bottom:1px solid;border-color:#fff!important}.border-left-white{border-left:1px solid;border-color:#fff!important}.black{color:#000!important}.fill-black{background-color:#000!important}.border-black,.border-top-black{border-color:#000!important}.border-top-black{border-top:1px solid}.border-right-black{border-right:1px solid;border-color:#000!important}.border-bottom-black{border-bottom:1px solid;border-color:#000!important}.border-left-black{border-left:1px solid;border-color:#000!important}.green{color:#59b96b!important}.fill-green{background-color:#59b96b!important}.border-green,.border-top-green{border-color:#59b96b!important}.border-top-green{border-top:1px solid}.border-right-green{border-right:1px solid;border-color:#59b96b!important}.border-bottom-green{border-bottom:1px solid;border-color:#59b96b!important}.border-left-green{border-left:1px solid;border-color:#59b96b!important}.orange{color:#f7941d!important}.fill-orange{background-color:#f7941d!important}.border-orange,.border-top-orange{border-color:#f7941d!important}.border-top-orange{border-top:1px solid}.border-right-orange{border-right:1px solid;border-color:#f7941d!important}.border-bottom-orange{border-bottom:1px solid;border-color:#f7941d!important}.border-left-orange{border-left:1px solid;border-color:#f7941d!important}.red{color:#d22239!important}.fill-red{background-color:#d22239!important}.border-red,.border-top-red{border-color:#d22239!important}.border-top-red{border-top:1px solid}.border-right-red{border-right:1px solid;border-color:#d22239!important}.border-bottom-red{border-bottom:1px solid;border-color:#d22239!important}.border-left-red{border-left:1px solid;border-color:#d22239!important}.blue{color:#5871a2!important}.fill-blue{background-color:#5871a2!important}.border-blue,.border-top-blue{border-color:#5871a2!important}.border-top-blue{border-top:1px solid}.border-right-blue{border-right:1px solid;border-color:#5871a2!important}.border-bottom-blue{border-bottom:1px solid;border-color:#5871a2!important}.border-left-blue{border-left:1px solid;border-color:#5871a2!important}.focus-blue{color:#23527c!important}.fill-focus-blue{background-color:#23527c!important}.border-focus-blue,.border-top-focus-blue{border-color:#23527c!important}.border-top-focus-blue{border-top:1px solid}.border-right-focus-blue{border-right:1px solid;border-color:#23527c!important}.border-bottom-focus-blue{border-bottom:1px solid;border-color:#23527c!important}.border-left-focus-blue{border-left:1px solid;border-color:#23527c!important}.dark-blue{color:#394256!important}.fill-dark-blue{background-color:#394256!important}.border-dark-blue,.border-top-dark-blue{border-color:#394256!important}.border-top-dark-blue{border-top:1px solid}.border-right-dark-blue{border-right:1px solid;border-color:#394256!important}.border-bottom-dark-blue{border-bottom:1px solid;border-color:#394256!important}.border-left-dark-blue{border-left:1px solid;border-color:#394256!important}.light-blue{color:#e7f0fc!important}.fill-light-blue{background-color:#e7f0fc!important}.border-light-blue,.border-top-light-blue{border-color:#e7f0fc!important}.border-top-light-blue{border-top:1px solid}.border-right-light-blue{border-right:1px solid;border-color:#e7f0fc!important}.border-bottom-light-blue{border-bottom:1px solid;border-color:#e7f0fc!important}.border-left-light-blue{border-left:1px solid;border-color:#e7f0fc!important}.bright-blue{color:#2e72f6!important}.fill-bright-blue{background-color:#2e72f6!important}.border-bright-blue,.border-top-bright-blue{border-color:#2e72f6!important}.border-top-bright-blue{border-top:1px solid}.border-right-bright-blue{border-right:1px solid;border-color:#2e72f6!important}.border-bottom-bright-blue{border-bottom:1px solid;border-color:#2e72f6!important}.border-left-bright-blue{border-left:1px solid;border-color:#2e72f6!important}.grey{color:#58595b!important}.fill-grey{background-color:#58595b!important}.border-grey,.border-top-grey{border-color:#58595b!important}.border-top-grey{border-top:1px solid}.border-right-grey{border-right:1px solid;border-color:#58595b!important}.border-bottom-grey{border-bottom:1px solid;border-color:#58595b!important}.border-left-grey{border-left:1px solid;border-color:#58595b!important}.soft-grey{color:#dddede!important}.fill-soft-grey{background-color:#dddede!important}.border-soft-grey,.border-top-soft-grey{border-color:#dddede!important}.border-top-soft-grey{border-top:1px solid}.border-right-soft-grey{border-right:1px solid;border-color:#dddede!important}.border-bottom-soft-grey{border-bottom:1px solid;border-color:#dddede!important}.border-left-soft-grey{border-left:1px solid;border-color:#dddede!important}.light-grey{color:#eee!important}.fill-light-grey{background-color:#eee!important}.border-light-grey,.border-top-light-grey{border-color:#eee!important}.border-top-light-grey{border-top:1px solid}.border-right-light-grey{border-right:1px solid;border-color:#eee!important}.border-bottom-light-grey{border-bottom:1px solid;border-color:#eee!important}.border-left-light-grey{border-left:1px solid;border-color:#eee!important}.medium-grey{color:#ccc!important}.fill-medium-grey{background-color:#ccc!important}.border-medium-grey,.border-top-medium-grey{border-color:#ccc!important}.border-top-medium-grey{border-top:1px solid}.border-right-medium-grey{border-right:1px solid;border-color:#ccc!important}.border-bottom-medium-grey{border-bottom:1px solid;border-color:#ccc!important}.border-left-medium-grey{border-left:1px solid;border-color:#ccc!important}.medium-dark-grey{color:#999!important}.fill-medium-dark-grey{background-color:#999!important}.border-medium-dark-grey{border-color:#999!important}.border-top-medium-dark-grey{border-top:1px solid;border-color:#999!important}.border-right-medium-dark-grey{border-right:1px solid;border-color:#999!important}.border-bottom-medium-dark-grey{border-bottom:1px solid;border-color:#999!important}.border-left-medium-dark-grey{border-left:1px solid;border-color:#999!important}.dark-grey{color:#222!important}.fill-dark-grey{background-color:#222!important}.border-dark-grey,.border-top-dark-grey{border-color:#222!important}.border-top-dark-grey{border-top:1px solid}.border-right-dark-grey{border-right:1px solid;border-color:#222!important}.border-bottom-dark-grey{border-bottom:1px solid;border-color:#222!important}.border-left-dark-grey{border-left:1px solid;border-color:#222!important}.iron-grey{color:#d3d6db!important}.fill-iron-grey{background-color:#d3d6db!important}.border-iron-grey,.border-top-iron-grey{border-color:#d3d6db!important}.border-top-iron-grey{border-top:1px solid}.border-right-iron-grey{border-right:1px solid;border-color:#d3d6db!important}.border-bottom-iron-grey{border-bottom:1px solid;border-color:#d3d6db!important}.border-left-iron-grey{border-left:1px solid;border-color:#d3d6db!important}.bombay-grey{color:#aaacb0!important}.fill-bombay-grey{background-color:#aaacb0!important}.border-bombay-grey,.border-top-bombay-grey{border-color:#aaacb0!important}.border-top-bombay-grey{border-top:1px solid}.border-right-bombay-grey{border-right:1px solid;border-color:#aaacb0!important}.border-bottom-bombay-grey{border-bottom:1px solid;border-color:#aaacb0!important}.border-left-bombay-grey{border-left:1px solid;border-color:#aaacb0!important}.soft-blue{color:#eff1f5!important}.fill-soft-blue{background-color:#eff1f5!important}.border-soft-blue,.border-top-soft-blue{border-color:#eff1f5!important}.border-top-soft-blue{border-top:1px solid}.border-right-soft-blue{border-right:1px solid;border-color:#eff1f5!important}.border-bottom-soft-blue{border-bottom:1px solid;border-color:#eff1f5!important}.border-left-soft-blue{border-left:1px solid;border-color:#eff1f5!important}.darker-soft-blue{color:#e9ecf1!important}.fill-darker-soft-blue{background-color:#e9ecf1!important}.border-darker-soft-blue,.border-top-darker-soft-blue{border-color:#e9ecf1!important}.border-top-darker-soft-blue{border-top:1px solid}.border-right-darker-soft-blue{border-right:1px solid;border-color:#e9ecf1!important}.border-bottom-darker-soft-blue{border-bottom:1px solid;border-color:#e9ecf1!important}.border-left-darker-soft-blue{border-left:1px solid;border-color:#e9ecf1!important}.lighter-soft-blue{color:#f5f6f9!important}.fill-lighter-soft-blue{background-color:#f5f6f9!important}.border-lighter-soft-blue,.border-top-lighter-soft-blue{border-color:#f5f6f9!important}.border-top-lighter-soft-blue{border-top:1px solid}.border-right-lighter-soft-blue{border-right:1px solid;border-color:#f5f6f9!important}.border-bottom-lighter-soft-blue{border-bottom:1px solid;border-color:#f5f6f9!important}.border-left-lighter-soft-blue{border-left:1px solid;border-color:#f5f6f9!important}:root{--color-gray:var(--color-gray-100);--color-gray-50:#f6f7f8;--color-gray-100:#eff1f4;--color-gray-200:#e3e5e8;--color-gray-300:#d7d9dc;--color-gray-400:#cbcdcf;--color-gray-500:#bfc1c3;--color-primary:var(--color-primary-1000);--color-primary-100:#eaf1fe;--color-primary-200:#d5e3fd;--color-primary-300:#c0d5fc;--color-primary-400:#abc7fb;--color-primary-500:#97b9fb;--color-primary-600:#82aafa;--color-primary-700:#6da2ff;--color-primary-800:#588ef8;--color-primary-900:#4380f7;--color-primary-1000:#2e72f6;--color-primary-1100:#2967dd;--color-primary-1200:#255bc5;--color-primary-1300:#2050ac;--color-primary-1400:#1c4494;--color-primary-1500:#083076;--color-primary-1600:#122e62;--color-primary-1700:#0e224a;--color-primary-1800:#061734;--color-primary-1900:#050b19;--color-secondary:var(--color-secondary-900);--color-secondary-100:#ccf1e4;--color-secondary-200:#b3e9d7;--color-secondary-300:#99e2c9;--color-secondary-400:#80dbbc;--color-secondary-500:#66d4ae;--color-secondary-600:#4dcda1;--color-secondary-700:#33c593;--color-secondary-800:#1abe86;--color-secondary-900:#00b778;--color-secondary-1000:#00a56c;--color-secondary-1100:#009260;--color-secondary-1200:#008054;--color-secondary-1300:#006e48;--color-secondary-1400:#005c3c;--color-secondary-1500:#004930;--color-secondary-1600:#002518;--color-secondary-1700:#00120c;--shadow-level-1:0px 1px 2px rgba(0,0,0,0.1);--shadow-level-2:0px 2px 4px rgba(0,0,0,0.1);--shadow-level-3:0px 4px 8px rgba(0,0,0,0.1);--inset-shadow-level-1:inset 0px 1px 2px rgba(0,0,0,0.1);--inset-shadow-level-2:inset 0px 2px 4px rgba(0,0,0,0.1);--inset-shadow-level-3:inset 0px 4px 8px rgba(0,0,0,0.1);--font-primary:\"Inter\",system-ui,-apple-system,BlinkMacSystemFont,Roboto,Ubuntu,\"Helvetica Neue\",Oxygen,Cantarell,sans-serif;--font-secondary:\"Poppins\",system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Ubuntu,\"Helvetica Neue\",Oxygen,Cantarell,sans-serif;--sidebar-width:55px;--menu-bar-width:180px;--page-layout-padding:235px;--radius:6px}*{font-family:var(--font-primary);box-sizing:border-box;text-shadow:1px 1px 1px rgba(0,0,0,.004);text-rendering:optimizeLegibility!important;-webkit-font-smoothing:antialiased!important}html{background:var(--color-gray)}body,html{height:100%}fw-popover{display:none}.fw-popover-panel .fw-popover-content-wrapper{position:relative;background:#fff;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.15)!important;border:1px solid #d6dbe5;padding:16px}.fw-popover-panel .fw-popover-content-wrapper .fw-popover-caret{position:absolute;overflow:hidden;width:25px;height:25px}.fw-popover-panel .fw-popover-content-wrapper .fw-popover-caret:after{display:block;content:\"\";width:16px;height:16px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.15)!important;border:1px solid #d6dbe5;transform:rotate(45deg);position:relative}.fw-popover-panel.fw-popover-above{margin-bottom:-20px;padding-bottom:20px}.fw-popover-panel.fw-popover-above .fw-popover-caret{left:0;bottom:-16px;height:16px}.fw-popover-panel.fw-popover-above .fw-popover-caret:after{margin:-8px auto}.fw-popover-panel.fw-popover-below{margin-top:-20px;padding-top:20px}.fw-popover-panel.fw-popover-below .fw-popover-caret{left:0;top:-16px;height:16px}.fw-popover-panel.fw-popover-below .fw-popover-caret:after{top:16px;margin:-8px auto}.fw-popover-panel.fw-popover-left{margin-right:-20px;padding-right:20px}.fw-popover-panel.fw-popover-left .fw-popover-caret{right:-16px;top:0;width:16px}.fw-popover-panel.fw-popover-left .fw-popover-caret:after{top:calc(50% - 8px);left:-8px}.fw-popover-panel.fw-popover-right{margin-left:-20px;padding-left:20px}.fw-popover-panel.fw-popover-right .fw-popover-caret{left:-16px;top:0;width:16px}.fw-popover-panel.fw-popover-right .fw-popover-caret:after{top:calc(50% - 8px);right:-8px}"]
                 },] }
     ];
     FwPopoverComponent.propDecorators = {
-        templateRef: [{ type: core.ViewChild, args: ['content',] }]
+        templateRef: [{ type: i0.ViewChild, args: ['content',] }]
     };
 
     var FwPopoverModule = /** @class */ (function () {
@@ -630,7 +896,7 @@
         return FwPopoverModule;
     }());
     FwPopoverModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
                     ],
@@ -815,7 +1081,7 @@
         return FwTableComponent;
     }());
     FwTableComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     host: {
                         'class': 'fw-table',
                         '[class.compact]': 'isCompact',
@@ -826,17 +1092,17 @@
                 },] }
     ];
     FwTableComponent.ctorParameters = function () { return [
-        { type: core.ChangeDetectorRef }
+        { type: i0.ChangeDetectorRef }
     ]; };
     FwTableComponent.propDecorators = {
-        columns: [{ type: core.Input }],
-        dataSource: [{ type: core.Input }],
-        layout: [{ type: core.Input }],
-        pageSize: [{ type: core.Input }],
-        webCompPageSize: [{ type: core.Input, args: ['page-size',] }],
-        sort: [{ type: core.Input }],
-        matPaginator: [{ type: core.ViewChild, args: [paginator.MatPaginator,] }],
-        matSort: [{ type: core.ViewChild, args: [sort.MatSort,] }]
+        columns: [{ type: i0.Input }],
+        dataSource: [{ type: i0.Input }],
+        layout: [{ type: i0.Input }],
+        pageSize: [{ type: i0.Input }],
+        webCompPageSize: [{ type: i0.Input, args: ['page-size',] }],
+        sort: [{ type: i0.Input }],
+        matPaginator: [{ type: i0.ViewChild, args: [paginator.MatPaginator,] }],
+        matSort: [{ type: i0.ViewChild, args: [sort.MatSort,] }]
     };
 
     var FwTableModule = /** @class */ (function () {
@@ -845,7 +1111,7 @@
         return FwTableModule;
     }());
     FwTableModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
                         forms.FormsModule,
@@ -876,12 +1142,18 @@
     exports.FwButtonGroupComponent = FwButtonGroupComponent;
     exports.FwButtonGroupModule = FwButtonGroupModule;
     exports.FwButtonModule = FwButtonModule;
+    exports.FwNotificationComponent = FwNotificationComponent;
+    exports.FwNotificationContainerComponent = FwNotificationContainerComponent;
+    exports.FwNotificationModule = FwNotificationModule;
+    exports.FwNotificationService = FwNotificationService;
     exports.FwPopoverComponent = FwPopoverComponent;
     exports.FwPopoverModule = FwPopoverModule;
     exports.FwPopoverTriggerComponent = FwPopoverTriggerComponent;
     exports.FwPopoverTriggerDirective = FwPopoverTriggerDirective;
     exports.FwTableComponent = FwTableComponent;
     exports.FwTableModule = FwTableModule;
+    exports.genId = genId;
+    exports.ɵa = FwNotificationTimerService;
 
     Object.defineProperty(exports, '__esModule', { value: true });