@tabler/angular-ui - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

bundles/tabler-angular-ui.umd.js

 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/router'), require('rxjs/operators'), require('@angular/common'), require('@angular/forms'), require('@swimlane/ngx-charts'), require('ng2-charts'), require('angular-pipes'), require('ngx-bootstrap/dropdown'), require('ngx-highlightjs')) :
-	typeof define === 'function' && define.amd ? define('@tabler/angular-ui', ['exports', '@angular/core', '@angular/router', 'rxjs/operators', '@angular/common', '@angular/forms', '@swimlane/ngx-charts', 'ng2-charts', 'angular-pipes', 'ngx-bootstrap/dropdown', 'ngx-highlightjs'], factory) :
-	(factory((global.tabler = global.tabler || {}, global.tabler['angular-ui'] = {}),global.ng.core,global.ng.router,global.Rx.Observable.prototype,global.ng.common,global.ng.forms,global.ngxCharts,global.ng2Charts,global.angularPipes,global.dropdown,global.ngxHighlightjs));
-}(this, (function (exports,core,router,operators,common,forms,ngxCharts,ng2Charts,angularPipes,dropdown,ngxHighlightjs) { 'use strict';
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/router'), require('rxjs/ReplaySubject'), require('ngx-bootstrap'), require('@tabler/angular-ui/src/services/ui.service'), require('angular-pipes'), require('ngx-bootstrap/dropdown')) :
+	typeof define === 'function' && define.amd ? define('@tabler/angular-ui', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/router', 'rxjs/ReplaySubject', 'ngx-bootstrap', '@tabler/angular-ui/src/services/ui.service', 'angular-pipes', 'ngx-bootstrap/dropdown'], factory) :
+	(factory((global.tabler = global.tabler || {}, global.tabler['angular-ui'] = {}),global.ng.core,global.ng.common,global.ng.forms,global.ng.router,global.Rx,global.ngxBootstrap,global.ui_service,global.angularPipes,global.dropdown));
+}(this, (function (exports,core,common,forms,router,ReplaySubject,ngxBootstrap,ui_service,angularPipes,dropdown) { 'use strict';
 
@@ -52,37 +52,2 @@ /*! *****************************************************************************
 
-var LayoutComponent = /** @class */ (function () {
-    function LayoutComponent(route) {
-        this.route = route;
-    }
-    LayoutComponent.prototype.ngOnInit = function () {
-        var _this = this;
-        this.route.data
-            .pipe(operators.map(function (data) { return data["config"]; }))
-            .subscribe(function (config) { return _this.config = config; });
-    };
-    return LayoutComponent;
-}());
-LayoutComponent.decorators = [
-    { type: core.Component, args: [{
-                selector: 'ui-layout',
-                template: "\n    <div class=\"page\">\n      <div class=\"page-main\">\n        <ui-header [config]=\"config?.header\"></ui-header>\n        <div class=\"page-content\">\n          <router-outlet></router-outlet>\n        </div>\n        <ui-footer-links [config]=\"config?.subfooter\"></ui-footer-links>\n        <ui-footer [config]=\"config?.footer\"></ui-footer>\n      </div>\n    </div>\n  ",
-            },] },
-];
-LayoutComponent.ctorParameters = function () { return [
-    { type: router.ActivatedRoute, },
-]; };
-LayoutComponent.propDecorators = {
-    "config": [{ type: core.Input },],
-};
-var LayoutBaseComponent = /** @class */ (function () {
-    function LayoutBaseComponent() {
-    }
-    return LayoutBaseComponent;
-}());
-LayoutBaseComponent.decorators = [
-    { type: core.Component, args: [{
-                selector: 'ui-layout-base',
-                template: "\n    <div class=\"page\">\n      <router-outlet></router-outlet>\n    </div>\n  ",
-            },] },
-];
 var AlertComponent = /** @class */ (function () {
@@ -122,356 +87,198 @@ function AlertComponent() {
 ];
-var TimeAgoPipe = /** @class */ (function () {
-    function TimeAgoPipe(changeDetectorRef, ngZone) {
-        this.changeDetectorRef = changeDetectorRef;
-        this.ngZone = ngZone;
+var AvatarComponent = /** @class */ (function () {
+    function AvatarComponent() {
     }
-    TimeAgoPipe.prototype.transform = function (value) {
-        var _this = this;
-        this.removeTimer();
-        var d = new Date(value);
-        var now = new Date();
-        var seconds = Math.round(Math.abs((now.getTime() - d.getTime()) / 1000));
-        var timeToUpdate = (Number.isNaN(seconds)) ? 1000 : this.getSecondsUntilUpdate(seconds) * 1000;
-        this.timer = this.ngZone.runOutsideAngular(function () {
-            if (typeof window !== 'undefined') {
-                return window.setTimeout(function () {
-                    _this.ngZone.run(function () { return _this.changeDetectorRef.markForCheck(); });
-                }, timeToUpdate);
-            }
-            return null;
-        });
-        var minutes = Math.round(Math.abs(seconds / 60));
-        var hours = Math.round(Math.abs(minutes / 60));
-        var days = Math.round(Math.abs(hours / 24));
-        var months = Math.round(Math.abs(days / 30.416));
-        var years = Math.round(Math.abs(days / 365));
-        if (Number.isNaN(seconds)) {
-            return '';
-        }
-        else if (seconds <= 45) {
-            return 'a few seconds ago';
-        }
-        else if (seconds <= 90) {
-            return 'a minute ago';
-        }
-        else if (minutes <= 45) {
-            return minutes + ' minutes ago';
-        }
-        else if (minutes <= 90) {
-            return 'an hour ago';
-        }
-        else if (hours <= 22) {
-            return hours + ' hours ago';
-        }
-        else if (hours <= 36) {
-            return 'a day ago';
-        }
-        else if (days <= 25) {
-            return days + ' days ago';
-        }
-        else if (days <= 45) {
-            return 'a month ago';
-        }
-        else if (days <= 345) {
-            return months + ' months ago';
-        }
-        else if (days <= 545) {
-            return 'a year ago';
-        }
-        else {
-            return years + ' years ago';
-        }
+    AvatarComponent.prototype.backgroundImage = function () {
+        return this.image ? "url(" + this.image + ")" : '';
     };
-    TimeAgoPipe.prototype.ngOnDestroy = function () {
-        this.removeTimer();
-    };
-    TimeAgoPipe.prototype.removeTimer = function () {
-        if (this.timer) {
-            window.clearTimeout(this.timer);
-            this.timer = null;
-        }
-    };
-    TimeAgoPipe.prototype.getSecondsUntilUpdate = function (seconds) {
-        var min = 60;
-        var hr = min * 60;
-        var day = hr * 24;
-        if (seconds < min) {
-            return 2;
-        }
-        else if (seconds < hr) {
-            return 30;
-        }
-        else if (seconds < day) {
-            return 300;
-        }
-        else {
-            return 3600;
-        }
-    };
-    return TimeAgoPipe;
+    return AvatarComponent;
 }());
-TimeAgoPipe.decorators = [
-    { type: core.Pipe, args: [{
-                name: 'timeAgo',
-                pure: false
-            },] },
-];
-TimeAgoPipe.ctorParameters = function () { return [
-    { type: core.ChangeDetectorRef, },
-    { type: core.NgZone, },
-]; };
-var HeaderComponent = /** @class */ (function () {
-    function HeaderComponent() {
-    }
-    HeaderComponent.prototype.handleAction = function ($event) {
-        console.log('Header Event');
-        console.log($event);
-    };
-    return HeaderComponent;
-}());
-HeaderComponent.decorators = [
+AvatarComponent.decorators = [
     { type: core.Component, args: [{
-                selector: 'ui-header',
-                template: "\n    <div class=\"header\">\n      <div class=\"container\">\n        <div class=\"d-flex\">\n          <a class=\"navbar-brand\" routerLink=\"/\">\n            <img src=\"assets/brand/tabler.svg\" class=\"navbar-brand-img\" alt=\"tabler.io\">\n            <span class=\"d-none d-md-inline\">\n              {{ config?.title }}\n            </span>\n          </a>\n          <div class=\"ml-auto d-flex order-lg-2\">\n            <ui-header-links class=\"nav-item\" [links]=\"config?.links\"></ui-header-links>\n            <ui-header-notifications [notifications]=\"config?.notifications\"\n                                     (action)=\"handleAction($event)\"></ui-header-notifications>\n            <ui-header-profile [profile]=\"config?.user\" [links]=\"config?.profileLinks\"></ui-header-profile>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"header-nav\">\n      <div class=\"container\">\n        <div class=\"row align-items-center\">\n          <div class=\"col\">\n            <ui-menu [links]=\"config?.menu\"></ui-menu>\n          </div>\n          <div class=\"col-3 ml-auto\" *ngIf=\"config?.search\">\n            <form class=\"input-icon\">\n              <input type=\"search\" class=\"form-control header-search\" placeholder=\"Search&hellip;\" tabindex=\"1\">\n              <div class=\"input-icon-addon\">\n                <i class=\"fe fe-search\"></i>\n              </div>\n            </form>\n          </div>\n        </div>\n      </div>\n    </div>\n  ",
-                styles: []
+                selector: 'ui-avatar',
+                template: "\n    <span class=\"avatar avatar-{{size}}\" [style.background-image]=\"backgroundImage()\">\n      {{text}}\n      <span *ngIf=\"status\" class=\"avatar-status bg-{{status}}\"></span>\n    </span>\n  ",
+                styles: [],
             },] },
 ];
-HeaderComponent.ctorParameters = function () { return []; };
-HeaderComponent.propDecorators = {
-    "config": [{ type: core.Input },],
+AvatarComponent.propDecorators = {
+    "image": [{ type: core.Input },],
+    "size": [{ type: core.Input },],
+    "status": [{ type: core.Input },],
+    "text": [{ type: core.Input },],
 };
-var FooterComponent = /** @class */ (function () {
-    function FooterComponent() {
+var AvatarModule = /** @class */ (function () {
+    function AvatarModule() {
     }
-    return FooterComponent;
+    return AvatarModule;
 }());
-FooterComponent.decorators = [
-    { type: core.Component, args: [{
-                selector: 'ui-footer',
-                template: "\n    <footer class=\"footer\" *ngIf=\"config\">\n      <div class=\"container\">\n        <div class=\"row align-items-center flex-row-reverse\">\n          <div class=\"col-auto ml-auto\">\n            <div class=\"row align-items-center\">\n              <div class=\"col-auto\">\n                <ul class=\"list-inline list-inline-dots mb-0\">\n                  <ng-container *ngFor=\"let link of config?.links\">\n                    <li class=\"list-inline-item\">\n                      <a [href]=\"link.link\" [class]=\"link.class\" [target]=\"link.target || '_self'\">\n                        <i [class]=\"link.icon\"></i>\n                        {{ link.label }}\n                      </a>\n                    </li>\n                  </ng-container>\n                </ul>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-12 col-lg-auto mt-3 mt-lg-0 text-center\" [innerHtml]=\"config?.disclaimer\">\n          </div>\n        </div>\n      </div>\n    </footer>\n  ",
-                styles: []
+AvatarModule.decorators = [
+    { type: core.NgModule, args: [{
+                imports: [common.CommonModule],
+                declarations: [AvatarComponent],
+                exports: [AvatarComponent],
             },] },
 ];
-FooterComponent.propDecorators = {
-    "config": [{ type: core.Input },],
-};
-var MenuComponent = /** @class */ (function () {
-    function MenuComponent() {
-        this.links = [];
+var BadgeComponent = /** @class */ (function () {
+    function BadgeComponent() {
     }
-    return MenuComponent;
+    return BadgeComponent;
 }());
-MenuComponent.decorators = [
+BadgeComponent.decorators = [
     { type: core.Component, args: [{
-                selector: 'ui-menu',
-                template: "\n    <ul class=\"nav nav-tabs\" style=\"white-space: nowrap;\">\n      <ng-container *ngFor=\"let item of links\">\n        <li class=\"nav-item d-inline-block\">\n          <a href=\"#\" [routerLink]=\"item.url\" class=\"nav-link\" routerLinkActive=\"active\">\n            <i class=\"{{ item.icon }}\" *ngIf=\"item.icon\"></i>\n            {{item.name}}\n          </a>\n          <div class=\"nav-submenu nav\" *ngIf=\"item.subpages\">\n            <ng-container *ngFor=\"let subitem of item.subpages\">\n              <a href=\"#\" class=\"nav-item\" [routerLink]=\"subitem.url\" routerLinkActive=\"active\">\n                <i class=\"{{ subitem.icon }}\" *ngIf=\"subitem.icon\"></i>\n                {{subitem.name}}\n              </a>\n            </ng-container>\n          </div>\n        </li>\n      </ng-container>\n    </ul>\n  ",
-                styles: []
+                selector: 'ui-badge',
+                template: "\n    <span class=\"badge badge-{{color}}\">\n      {{label}}\n    </span>\n  ",
             },] },
 ];
-MenuComponent.propDecorators = {
-    "links": [{ type: core.Input },],
-};
-var PageComponent = /** @class */ (function () {
-    function PageComponent() {
-    }
-    return PageComponent;
-}());
-PageComponent.decorators = [
-    { type: core.Component, args: [{
-                selector: 'ui-page',
-                template: "\n     <div class=\"container\">\n      <ng-content></ng-content>\n    </div>\n  ",
-            },] },
-];
-var PageTitleComponent = /** @class */ (function () {
-    function PageTitleComponent() {
-        this.badgeStyle = 'default';
-        this.header = true;
-    }
-    return PageTitleComponent;
-}());
-PageTitleComponent.decorators = [
-    { type: core.Component, args: [{
-                selector: 'ui-page-title',
-                template: "\n    <div [class.page-header]=\"header\">\n      <h1 class=\"page-title\">\n        <i *ngIf=\"icon\" class=\"{{ icon }} page-title-icon m-3\"></i>\n        {{ title }}\n        <small *ngIf=\"badge\" class=\"badge badge-{{badgeStyle}} m-3\">\n          {{badge}}\n        </small>\n      </h1>\n      <div *ngIf=\"subTitle\" class=\"page-subtitle\">\n        {{subTitle}}\n      </div>\n      <div class=\"page-options\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  ",
-                styles: []
-            },] },
-];
-PageTitleComponent.propDecorators = {
-    "badge": [{ type: core.Input },],
-    "badgeStyle": [{ type: core.Input },],
-    "header": [{ type: core.Input },],
-    "icon": [{ type: core.Input },],
-    "title": [{ type: core.Input },],
-    "subTitle": [{ type: core.Input },],
-};
-var DashboardChartComponent = /** @class */ (function () {
-    function DashboardChartComponent() {
-        this.height = '10rem';
-        this.title = '';
-        this.data = [];
-        this.doughnut = false;
-        this.view = [230, 192];
-        this.showLegend = false;
-        this.showLabels = false;
-    }
-    return DashboardChartComponent;
-}());
-DashboardChartComponent.decorators = [
-    { type: core.Component, args: [{
-                selector: 'ui-dashboard-chart',
-                template: "\n    <div class=\"card\">\n      <div class=\"card-header\">\n        <h3 class=\"card-title\">{{ title }}</h3>\n      </div>\n      <div class=\"card-body\">\n        <div [style.height]=\"height\">\n          <ngx-charts-pie-chart\n            scheme=\"air\"\n            [view]=\"view\"\n            [results]=\"data\"\n            [legend]=\"showLegend\"\n            [labels]=\"showLabels\"\n            [doughnut]=\"doughnut\"\n            [gradient]=\"false\">\n          </ngx-charts-pie-chart>\n        </div>\n      </div>\n    </div>\n  ",
-                styles: []
-            },] },
-];
-DashboardChartComponent.propDecorators = {
-    "height": [{ type: core.Input },],
-    "title": [{ type: core.Input },],
-    "data": [{ type: core.Input },],
-    "doughnut": [{ type: core.Input },],
-};
-var DashboardChartBgComponent = /** @class */ (function () {
-    function DashboardChartBgComponent() {
-        this.datasets = [
-            {
-                data: [78, 81, 80, 45, 34, 12, 40],
-                label: 'Series A'
-            }
-        ];
-        this.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
-        this.options = {
-            maintainAspectRatio: false,
-            scales: {
-                xAxes: [{
-                        display: false
-                    }],
-                yAxes: [{
-                        display: false
-                    }]
-            },
-            elements: {
-                line: {
-                    borderWidth: 2
-                },
-                point: {
-                    radius: 0,
-                    hitRadius: 10,
-                    hoverRadius: 4,
-                },
-            },
-            legend: {
-                display: false
-            },
-            animation: {
-                duration: 0,
-            },
-        };
-        this.colors = [
-            {
-                backgroundColor: 'rgba(70,127,207,0.1)',
-                borderColor: 'rgba(70,127,207)',
-            }
-        ];
-    }
-    return DashboardChartBgComponent;
-}());
-DashboardChartBgComponent.decorators = [
-    { type: core.Component, args: [{
-                selector: 'ui-dashboard-chart-bg',
-                template: "\n    <div class=\"card\">\n      <div class=\"card-body\">\n      <!--<div class=\"card-body\">-->\n        <div class=\"card-value pull-right text-{{ color }}\">{{ rate }}</div>\n        <h3 class=\"mb-1\">{{ title}}</h3>\n        <div class=\"text-muted\">{{ description }}</div>\n      </div>\n      <div class=\"card-img\">\n          <canvas baseChart\n                  class=\"pt-5\"\n                  height=\"160\"\n                  [datasets]=\"datasets\"\n                  [labels]=\"labels\"\n                  [options]=\"options\"\n                  [colors]=\"colors\"\n                  chartType=\"line\"></canvas>\n        </div>\n    </div>\n  ",
-                styles: ["\n    .card-body {\n      background-color: transparent;\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      padding: 1.25rem;\n    }\n  "]
-            },] },
-];
-DashboardChartBgComponent.propDecorators = {
-    "rate": [{ type: core.Input },],
+BadgeComponent.propDecorators = {
+    "label": [{ type: core.Input },],
     "color": [{ type: core.Input },],
-    "title": [{ type: core.Input },],
-    "description": [{ type: core.Input },],
 };
-var DashboardDigitComponent = /** @class */ (function () {
-    function DashboardDigitComponent() {
-        this.color = 'blue';
-        this.title = 'Today Expenses';
-        this.digit = '$8500';
-        this.width = '54%';
+var BadgeModule = /** @class */ (function () {
+    function BadgeModule() {
     }
-    return DashboardDigitComponent;
+    return BadgeModule;
 }());
-DashboardDigitComponent.decorators = [
-    { type: core.Component, args: [{
-                selector: 'ui-dashboard-digit',
-                template: "\n    <div class=\"card\">\n      <div class=\"card-body text-center\">\n        <div class=\"h5\">{{ title }}</div>\n        <div class=\"display-4 font-weight-bold mb-4\">{{ digit }}</div>\n        <div class=\"progress progress-sm\">\n          <div class=\"progress-bar bg-{{ color }}\" [style.width]=\"width\"></div>\n        </div>\n      </div>\n    </div>\n  ",
-                styles: []
+BadgeModule.decorators = [
+    { type: core.NgModule, args: [{
+                imports: [common.CommonModule],
+                declarations: [BadgeComponent],
+                exports: [BadgeComponent],
             },] },
 ];
-DashboardDigitComponent.propDecorators = {
-    "color": [{ type: core.Input },],
-    "title": [{ type: core.Input },],
-    "digit": [{ type: core.Input },],
-    "width": [{ type: core.Input },],
-};
-var DashboardIconBoxComponent = /** @class */ (function () {
-    function DashboardIconBoxComponent() {
-        this.color = 'red';
-        this.icon = 'fa fa-dollar';
-        this.value = '16';
-        this.description = 'Sales';
-        this.subtitle = '6 waiting payments';
+var ButtonComponent = /** @class */ (function () {
+    function ButtonComponent() {
+        this.config = {};
+        this.disabled = false;
+        this.event = 'SUBMIT';
+        this.action = new core.EventEmitter();
     }
-    return DashboardIconBoxComponent;
+    ButtonComponent.prototype.ngOnInit = function () {
+        var _this = this;
+        var inputMap = ButtonComponent.copyProps
+            .filter(function (item) { return typeof _this[item] !== 'undefined'; })
+            .reduce(function (a, c) {
+            return (Object.assign({}, a, (_a = {}, _a[c] = _this[c], _a)));
+            var _a;
+        }, {});
+        this.config = Object.assign({}, inputMap, this.config);
+    };
+    Object.defineProperty(ButtonComponent.prototype, "_size", {
+        get: function () {
+            return this.config.size || '';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ButtonComponent.prototype, "_label", {
+        get: function () {
+            return this.config.label || null;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ButtonComponent.prototype, "_icon", {
+        get: function () {
+            return this.config.icon || null;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ButtonComponent.prototype, "_color", {
+        get: function () {
+            return this.config.color || 'primary';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ButtonComponent.prototype, "_event", {
+        get: function () {
+            return this.config.event || 'SUBMIT';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ButtonComponent.prototype, "_type", {
+        get: function () {
+            return this.config.type || 'button';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ButtonComponent.prototype, "_payload", {
+        get: function () {
+            return this.config.payload || null;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ButtonComponent.prototype, "_classNames", {
+        get: function () {
+            var base = 'btn';
+            var size = base + "-" + this._size;
+            var color = base + "-" + this._color;
+            return this.config.classNames || base + " " + size + " " + color;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    ButtonComponent.prototype.handleClick = function ($event) {
+        this.action.emit({
+            type: this._event,
+            payload: Object.assign({}, this._payload),
+            $event: $event,
+        });
+    };
+    return ButtonComponent;
 }());
-DashboardIconBoxComponent.decorators = [
+ButtonComponent.copyProps = ['color', 'size', 'type', 'label', 'icon', 'disabled', 'event', 'payload'];
+ButtonComponent.decorators = [
     { type: core.Component, args: [{
-                selector: 'ui-dashboard-icon-box',
-                template: "\n    <div class=\"card p-3\">\n      <div class=\"d-flex align-items-center\">\n\t\t<span class=\"stamp stamp-md bg-{{ color }} mr-3\">\n\t\t\t<i class=\"{{ icon }}\"></i>\n\t\t</span>\n        <div>\n          <h4 class=\"m-0\"><a href=\"javascript:void(0)\">{{ value }} <small>{{ description }}</small></a></h4>\n          <small class=\"text-muted\">{{ subtitle }}</small>\n        </div>\n      </div>\n    </div>\n  ",
-                styles: []
+                selector: 'ui-button',
+                template: "\n    <button [type]=\"_type\"\n            class=\"{{_classNames}}\"\n            [disabled]=\"disabled\"\n            (click)=\"handleClick($event)\">\n      <i *ngIf=\"_icon\" class=\"{{_icon}}\" [class.mr-1]=\"_label\"></i>\n      <ng-container *ngIf=\"_label\">\n        {{_label}}\n      </ng-container>\n      <ng-content></ng-content>\n    </button>\n  ",
             },] },
 ];
-DashboardIconBoxComponent.propDecorators = {
+ButtonComponent.propDecorators = {
+    "config": [{ type: core.Input },],
     "color": [{ type: core.Input },],
+    "size": [{ type: core.Input },],
+    "type": [{ type: core.Input },],
+    "label": [{ type: core.Input },],
     "icon": [{ type: core.Input },],
-    "value": [{ type: core.Input },],
-    "description": [{ type: core.Input },],
-    "subtitle": [{ type: core.Input },],
+    "disabled": [{ type: core.Input },],
+    "event": [{ type: core.Input },],
+    "payload": [{ type: core.Input },],
+    "action": [{ type: core.Output },],
 };
-var DashboardStatsComponent = /** @class */ (function () {
-    function DashboardStatsComponent() {
+var ButtonsComponent = /** @class */ (function () {
+    function ButtonsComponent() {
+        this.config = [];
+        this.disabled = false;
+        this.action = new core.EventEmitter();
     }
-    DashboardStatsComponent.prototype.isPositive = function () {
-        return this.percentage > 0;
-    };
-    return DashboardStatsComponent;
+    return ButtonsComponent;
 }());
-DashboardStatsComponent.decorators = [
+ButtonsComponent.decorators = [
     { type: core.Component, args: [{
-                selector: 'ui-dashboard-stats',
-                template: "\n    <div class=\"card\">\n      <div class=\"card-body p-3 text-center\">\n        <div class=\"text-right\" [class.text-green]=\"isPositive()\" [class.text-red]=\"!isPositive()\" >\n          <span *ngIf=\"percentage\">\n            {{percentage}}%\n            <i *ngIf=\"isPositive()\" class=\"fe fe-chevron-up\"></i>\n            <i *ngIf=\"!isPositive()\" class=\"fe fe-chevron-down\"></i>\n          </span>\n        </div>\n        <div class=\"h1 m-0\">{{ number }}</div>\n        <div class=\"text-muted mb-4\">{{ title }}</div>\n      </div>\n    </div>\n  ",
-                styles: []
+                selector: 'ui-buttons',
+                template: "\n    <div>\n      <ng-container *ngFor=\"let button of config\">\n        <ui-button [disabled]=\"disabled\"\n                   [config]=\"button\"\n                   [payload]=\"payload\"\n                   (action)=\"action.emit($event)\">\n        </ui-button>\n      </ng-container>\n    </div>\n  ",
             },] },
 ];
-DashboardStatsComponent.propDecorators = {
-    "number": [{ type: core.Input },],
-    "percentage": [{ type: core.Input },],
-    "title": [{ type: core.Input },],
+ButtonsComponent.propDecorators = {
+    "config": [{ type: core.Input },],
+    "disabled": [{ type: core.Input },],
+    "payload": [{ type: core.Input },],
+    "action": [{ type: core.Output },],
 };
-var AvatarComponent = /** @class */ (function () {
-    function AvatarComponent() {
+var ButtonModule = /** @class */ (function () {
+    function ButtonModule() {
     }
-    AvatarComponent.prototype.backgroundImage = function () {
-        return this.image ? "url(" + this.image + ")" : '';
-    };
-    return AvatarComponent;
+    return ButtonModule;
 }());
-AvatarComponent.decorators = [
-    { type: core.Component, args: [{
-                selector: 'ui-avatar',
-                template: "\n    <span class=\"avatar avatar-{{size}}\" [style.background-image]=\"backgroundImage()\">\n      {{text}}\n      <span *ngIf=\"status\" class=\"avatar-status bg-{{status}}\"></span>\n    </span>\n  ",
-                styles: []
+ButtonModule.decorators = [
+    { type: core.NgModule, args: [{
+                imports: [common.CommonModule],
+                declarations: [ButtonComponent, ButtonsComponent],
+                exports: [ButtonComponent, ButtonsComponent],
             },] },
 ];
-AvatarComponent.propDecorators = {
-    "image": [{ type: core.Input },],
-    "size": [{ type: core.Input },],
-    "status": [{ type: core.Input },],
-    "text": [{ type: core.Input },],
-};
 var CardComponent = /** @class */ (function () {
@@ -510,3 +317,5 @@ function CardComponent() {
                 template: "\n    <div class=\"card\" [class.hide]=\"hidden\" [class.card-fullscreen]=\"fullScreen\">\n      <div *ngIf=\"status\" class=\"card-status bg-{{ status }}\" [class.card-status-left]=\"statusLeft\"></div>\n      <div class=\"card-header\">\n        <h3 class=\"card-title\">\n          <i *ngIf=\"icon\" class=\"{{ icon }}\"></i>\n          {{header}}\n        </h3>\n        <div class=\"card-options\">\n          <form action=\"\" *ngIf=\"search\">\n            <div class=\"input-group\">\n              <input type=\"text\"\n                     class=\"form-control form-control-sm\" [placeholder]=\"search.placeholder\" name=\"s\" [(ngModel)]=\"search.value\">\n              <span class=\"input-group-btn ml-2\">\n                <button class=\"btn btn-sm btn-default\" type=\"submit\" (click)=\"action.emit( { type: 'SEARCH', payload: search.value } )\">\n                  <span class=\"fe fe-search\"></span>\n                </button>\n              </span>\n            </div>\n          </form>\n          <ng-container *ngIf=\"!buttons\">\n            <a class=\"card-options-collapse\" data-toggle=\"card-collapse\" href=\"#\"\n               [class.hide]=\"!allowCollapse\"\n               (click)=\"collapse($event)\">\n              <i class=\"fe\" [class.fe-chevron-down]=\"collapsed\" [class.fe-chevron-up]=\"!collapsed\"></i>\n            </a>\n            <a class=\"card-options-fullscreen\" data-toggle=\"card-fullscreen\" href=\"#\"\n               [class.hide]=\"!allowFullScreen\"\n               (click)=\"goFullScreen($event)\">\n              <i class=\"fe fe-maximize\"></i>\n            </a>\n            <a class=\"card-options-remove\" data-toggle=\"card-remove\" href=\"#\"\n               [class.hide]=\"!allowHide\"\n               (click)=\"hide($event)\">\n              <i class=\"fe fe-x\"></i>\n            </a>\n          </ng-container>\n          <ng-container *ngIf=\"buttons\">\n            <ng-container *ngFor=\"let button of buttons\">\n              <button class=\"btn btn-secondary btn-sm ml-2\"\n                      *ngIf=\"button.type === 'button'\"\n                      (click)=\"action.emit( { type: button.action, payload: button.payload || '' })\">\n                <i *ngIf=\"button.icon\" [class]=\"button.icon\"></i>\n                {{ button.text }}\n              </button>\n              <label class=\"custom-switch m-0\"\n                     *ngIf=\"button.type === 'switch'\">\n                <input type=\"checkbox\" [value]=\"button.checked\" class=\"custom-switch-input\"\n                       (change)=\"action.emit( { type: 'SWITCH', payload: button.checked } )\"\n                       [checked]=\"button.checked || false\">\n                <span class=\"custom-switch-indicator\"></span>\n              </label>\n            </ng-container>\n          </ng-container>\n        </div>\n      </div>\n      <div [class.hide]=\"collapsed\" [class.show]=\"!collapsed\">\n        <ng-container *ngIf=\"alert\">\n          <div class=\"card-alert alert alert-{{alert.type}} mb-0\">\n            {{alert.text}}\n          </div>\n        </ng-container>\n        <ng-content></ng-content>\n        <div class=\"card-footer\" *ngIf=\"footer\">{{footer}}</div>\n      </div>\n    </div>\n  ",
-                styles: ["\n    .hide {\n      display: none;\n    }\n    .show {\n      display: block;\n    }\n  "]
+                styles: [
+                    "\n    .hide {\n      display: none;\n    }\n    .show {\n      display: block;\n    }\n  ",
+                ],
             },] },
@@ -542,3 +351,3 @@ ];
                 template: "\n    <div class=\"card-body\">\n      <ng-container *ngIf=\"loader\">\n        <div class=\"dimmer active\">\n          <div class=\"loader\"></div>\n          <div class=\"dimmer-content\">\n            <ng-content></ng-content>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"!loader\">\n        <ng-content></ng-content>\n      </ng-container>\n    </div>\n  ",
-                styles: []
+                styles: [],
             },] },
@@ -549,2 +358,216 @@ ];
 };
+var CardModule = /** @class */ (function () {
+    function CardModule() {
+    }
+    return CardModule;
+}());
+CardModule.decorators = [
+    { type: core.NgModule, args: [{
+                imports: [common.CommonModule, forms.FormsModule],
+                declarations: [CardComponent, CardBodyComponent],
+                exports: [CardComponent, CardBodyComponent],
+            },] },
+];
+var UiLink = /** @class */ (function () {
+    function UiLink() {
+    }
+    return UiLink;
+}());
+var LinkContentComponent = /** @class */ (function () {
+    function LinkContentComponent() {
+    }
+    return LinkContentComponent;
+}());
+LinkContentComponent.decorators = [
+    { type: core.Component, args: [{
+                selector: 'ui-link-content',
+                template: "\n    <ui-badge *ngIf=\"link.badge\" class=\"float-right\" [color]=\"link.badge.color\" [label]=\"link.badge.label\">\n    </ui-badge>\n    <i *ngIf=\"link.icon\" [class]=\"link.icon\"></i>\n    <span *ngIf=\"link.label\"  [class]=\"link.labelClass\">{{ link.label }}</span>\n  ",
+            },] },
+];
+LinkContentComponent.propDecorators = {
+    "link": [{ type: core.Input },],
+};
+var LinkComponent = /** @class */ (function () {
+    function LinkComponent() {
+        this.link = {};
+    }
+    return LinkComponent;
+}());
+LinkComponent.decorators = [
+    { type: core.Component, args: [{
+                selector: 'ui-link',
+                template: "\n    <ng-container *ngIf=\"link && link.external; else internal\">\n      <a [href]=\"link.link\" [class]=\"link.linkClass\" [target]=\"link.target || '_self' \">\n        <ui-link-content [link]=\"link\"></ui-link-content>\n      </a>\n    </ng-container>\n    <ng-template #internal>\n      <a *ngIf=\"link\" [routerLink]=\"link.link\" [class]=\"link.linkClass\">\n        <ui-link-content [link]=\"link\"></ui-link-content>\n      </a>\n    </ng-template>\n  ",
+            },] },
+];
+LinkComponent.propDecorators = {
+    "link": [{ type: core.Input },],
+};
+var LinksComponent = /** @class */ (function () {
+    function LinksComponent() {
+    }
+    return LinksComponent;
+}());
+LinksComponent.decorators = [
+    { type: core.Component, args: [{
+                selector: 'ui-links',
+                template: "\n    <ng-container *ngFor=\"let link of links\">\n      <ui-link [link]=\"link\"></ui-link>\n    </ng-container>\n  ",
+            },] },
+];
+LinksComponent.propDecorators = {
+    "links": [{ type: core.Input },],
+};
+var LinkModule = /** @class */ (function () {
+    function LinkModule() {
+    }
+    return LinkModule;
+}());
+LinkModule.decorators = [
+    { type: core.NgModule, args: [{
+                imports: [
+                    common.CommonModule, router.RouterModule, BadgeModule
+                ],
+                declarations: [LinkComponent, LinkContentComponent, LinksComponent],
+                exports: [LinkComponent, LinkContentComponent, LinksComponent]
+            },] },
+];
+var UiNotification = /** @class */ (function () {
+    function UiNotification() {
+    }
+    return UiNotification;
+}());
+var UiBadge = /** @class */ (function () {
+    function UiBadge() {
+    }
+    return UiBadge;
+}());
+var UiProfile = /** @class */ (function () {
+    function UiProfile() {
+    }
+    return UiProfile;
+}());
+var UiLayout = /** @class */ (function () {
+    function UiLayout() {
+    }
+    return UiLayout;
+}());
+var UiService$1 = /** @class */ (function () {
+    function UiService$1() {
+        this.configSubject = new ReplaySubject.ReplaySubject();
+        this.config = {
+            appLink: '/',
+            appLogo: 'assets/brand/tabler.svg',
+            appName: 'Tabler for Angular',
+        };
+        this.config$ = this.configSubject.asObservable();
+        this.updateLayout();
+    }
+    Object.defineProperty(UiService$1.prototype, "appLink", {
+        set: function (link) {
+            this.config.appLink = link;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(UiService$1.prototype, "appLogo", {
+        set: function (logo) {
+            this.config.appLogo = logo;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(UiService$1.prototype, "appName", {
+        set: function (name) {
+            this.config.appName = name;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(UiService$1.prototype, "headerNav", {
+        set: function (items) {
+            this.config.headerNav = items;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(UiService$1.prototype, "headerSubNav", {
+        set: function (items) {
+            this.config.headerSubNav = items;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(UiService$1.prototype, "profile", {
+        set: function (profile) {
+            this.config.profile = profile;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(UiService$1.prototype, "profileNav", {
+        set: function (items) {
+            this.config.profileNav = items;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(UiService$1.prototype, "notifications", {
+        set: function (notifications) {
+            this.config.notifications = notifications;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(UiService$1.prototype, "footerNav", {
+        set: function (items) {
+            this.config.footerNav = items;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(UiService$1.prototype, "footerText", {
+        set: function (text) {
+            this.config.footerText = text;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(UiService$1.prototype, "footerSubNav", {
+        set: function (items) {
+            this.config.footerSubNav = items;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(UiService$1.prototype, "footerSubText", {
+        set: function (text) {
+            this.config.footerSubText = text;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    UiService$1.prototype.updateLayout = function (config) {
+        if (config === void 0) { config = {}; }
+        this.config = Object.assign({}, this.config, config);
+        this.configSubject.next(this.config);
+    };
+    return UiService$1;
+}());
+UiService$1.decorators = [
+    { type: core.Injectable },
+];
+UiService$1.ctorParameters = function () { return []; };
+var FooterComponent = /** @class */ (function () {
+    function FooterComponent() {
+    }
+    return FooterComponent;
+}());
+FooterComponent.decorators = [
+    { type: core.Component, args: [{
+                selector: 'ui-footer',
+                template: "\n    <ng-container *ngIf=\"config.footerSubNav || config.footerSubText\" >\n      <ui-footer-links [config]=\"config\"></ui-footer-links>\n    </ng-container>\n    <ng-container *ngIf=\"config.footerNav || config.footerText\" >\n      <footer class=\"footer\">\n        <div class=\"container\">\n          <div class=\"row align-items-center flex-row-reverse\">\n            <div class=\"col-auto ml-auto\">\n              <div class=\"row align-items-center\">\n                <div class=\"col-auto\">\n                  <ul class=\"list-inline list-inline-dots mb-0\">\n                    <ng-container *ngFor=\"let link of config?.footerNav\">\n                      <li class=\"list-inline-item\">\n                        <a [href]=\"link.link\" [class]=\"link.class\" [target]=\"link.target || '_self'\">\n                          <i [class]=\"link.icon\"></i>\n                          {{ link.label }}\n                        </a>\n                      </li>\n                    </ng-container>\n                  </ul>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-12 col-lg-auto mt-3 mt-lg-0 text-center\" [innerHtml]=\"config?.footerText\">\n            </div>\n          </div>\n        </div>\n      </footer>\n    </ng-container>\n  ",
+            },] },
+];
+FooterComponent.propDecorators = {
+    "config": [{ type: core.Input },],
+};
 var FooterLinksComponent = /** @class */ (function () {
@@ -558,4 +581,3 @@ function FooterLinksComponent() {
                 selector: 'ui-footer-links',
-                template: "\n    <div class=\"footer\" *ngIf=\"config\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-lg-8\">\n            <div class=\"row\">\n              <div class=\"col-6 col-md-3\">\n                <ul class=\"list-unstyled mb-0\">\n                  <li><a href=\"#\">First link</a></li>\n                  <li><a href=\"#\">Second link</a></li>\n                </ul>\n              </div>\n              <div class=\"col-6 col-md-3\">\n                <ul class=\"list-unstyled mb-0\">\n                  <li><a href=\"#\">Third link</a></li>\n                  <li><a href=\"#\">Fourth link</a></li>\n                </ul>\n              </div>\n              <div class=\"col-6 col-md-3\">\n                <ul class=\"list-unstyled mb-0\">\n                  <li><a href=\"#\">Fifth link</a></li>\n                  <li><a href=\"#\">Sixth link</a></li>\n                </ul>\n              </div>\n              <div class=\"col-6 col-md-3\">\n                <ul class=\"list-unstyled mb-0\">\n                  <li><a href=\"#\">Other link</a></li>\n                  <li><a href=\"#\">Last link</a></li>\n                </ul>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-lg-4 mt-4 mt-lg-0\" [innerHtml]=\"config?.description\"></div>\n        </div>\n      </div>\n    </div>\n  ",
-                styles: []
+                template: "\n    <div class=\"footer\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-lg-8\">\n            <div class=\"row\">\n              <div class=\"col-6 col-md-3\" *ngFor=\"let links of config.footerSubNav\">\n                <ul class=\"list-unstyled mb-0\">\n                  <li *ngFor=\"let link of links\">\n                    <ui-link [link]=\"link\"></ui-link>\n                  </li>\n                </ul>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-lg-4 mt-4 mt-lg-0\" [innerHtml]=\"config.footerSubText\"></div>\n        </div>\n      </div>\n    </div>\n  ",
             },] },
@@ -566,20 +588,156 @@ ];
 };
-var HighlightComponent = /** @class */ (function () {
-    function HighlightComponent() {
-        this.icon = 'fe fe-code';
-        this.name = 'Code snippet';
+var FooterModule = /** @class */ (function () {
+    function FooterModule() {
     }
-    return HighlightComponent;
+    return FooterModule;
 }());
-HighlightComponent.decorators = [
+FooterModule.decorators = [
+    { type: core.NgModule, args: [{
+                imports: [common.CommonModule, LinkModule],
+                declarations: [FooterComponent, FooterLinksComponent],
+                exports: [FooterComponent],
+            },] },
+];
+var TimeAgoPipe = /** @class */ (function () {
+    function TimeAgoPipe(changeDetectorRef, ngZone) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.ngZone = ngZone;
+    }
+    TimeAgoPipe.prototype.transform = function (value) {
+        var _this = this;
+        this.removeTimer();
+        var d = new Date(value);
+        var now = new Date();
+        var seconds = Math.round(Math.abs((now.getTime() - d.getTime()) / 1000));
+        var timeToUpdate = Number.isNaN(seconds) ? 1000 : this.getSecondsUntilUpdate(seconds) * 1000;
+        this.timer = this.ngZone.runOutsideAngular(function () {
+            if (typeof window !== 'undefined') {
+                return window.setTimeout(function () {
+                    _this.ngZone.run(function () { return _this.changeDetectorRef.markForCheck(); });
+                }, timeToUpdate);
+            }
+            return null;
+        });
+        var minutes = Math.round(Math.abs(seconds / 60));
+        var hours = Math.round(Math.abs(minutes / 60));
+        var days = Math.round(Math.abs(hours / 24));
+        var months = Math.round(Math.abs(days / 30.416));
+        var years = Math.round(Math.abs(days / 365));
+        if (Number.isNaN(seconds)) {
+            return '';
+        }
+        else if (seconds <= 45) {
+            return 'a few seconds ago';
+        }
+        else if (seconds <= 90) {
+            return 'a minute ago';
+        }
+        else if (minutes <= 45) {
+            return minutes + ' minutes ago';
+        }
+        else if (minutes <= 90) {
+            return 'an hour ago';
+        }
+        else if (hours <= 22) {
+            return hours + ' hours ago';
+        }
+        else if (hours <= 36) {
+            return 'a day ago';
+        }
+        else if (days <= 25) {
+            return days + ' days ago';
+        }
+        else if (days <= 45) {
+            return 'a month ago';
+        }
+        else if (days <= 345) {
+            return months + ' months ago';
+        }
+        else if (days <= 545) {
+            return 'a year ago';
+        }
+        else {
+            return years + ' years ago';
+        }
+    };
+    TimeAgoPipe.prototype.ngOnDestroy = function () {
+        this.removeTimer();
+    };
+    TimeAgoPipe.prototype.removeTimer = function () {
+        if (this.timer) {
+            window.clearTimeout(this.timer);
+            this.timer = null;
+        }
+    };
+    TimeAgoPipe.prototype.getSecondsUntilUpdate = function (seconds) {
+        var min = 60;
+        var hr = min * 60;
+        var day = hr * 24;
+        if (seconds < min) {
+            return 2;
+        }
+        else if (seconds < hr) {
+            return 30;
+        }
+        else if (seconds < day) {
+            return 300;
+        }
+        else {
+            return 3600;
+        }
+    };
+    return TimeAgoPipe;
+}());
+TimeAgoPipe.decorators = [
+    { type: core.Pipe, args: [{
+                name: 'timeAgo',
+                pure: false,
+            },] },
+];
+TimeAgoPipe.ctorParameters = function () { return [
+    { type: core.ChangeDetectorRef, },
+    { type: core.NgZone, },
+]; };
+var HeaderComponent = /** @class */ (function () {
+    function HeaderComponent() {
+    }
+    HeaderComponent.prototype.handleAction = function ($event) {
+        console.log('Header Event');
+        console.log($event);
+    };
+    return HeaderComponent;
+}());
+HeaderComponent.decorators = [
     { type: core.Component, args: [{
-                selector: 'ui-highlight',
-                template: "\n    <ui-card [header]=\"name\" [icon]=\"icon\" [buttons]=\"[]\">\n      <div class=\"p-5\">\n        <pre class=\"m-0 p-0\">\n          <code highlight [textContent]=\"code\"></code>\n        </pre>\n      </div>\n    </ui-card>\n  ",
+                selector: 'ui-header',
+                template: "\n    <div class=\"header\">\n      <div class=\"container\">\n        <div class=\"d-flex\">\n          <a class=\"navbar-brand\" [routerLink]=\"config.appLink\">\n            <img *ngIf=\"config.appLogo\" [attr.src]=\"config.appLogo\" class=\"navbar-brand-img\">\n            <span *ngIf=\"config.appName\" class=\"d-none d-md-inline\">\n              {{ config.appName }}\n            </span>\n          </a>\n          <div class=\"ml-auto d-flex order-lg-2\">\n            <ui-links [links]=\"config.headerSubNav\" class=\"nav-item\"></ui-links>\n            <ui-header-notifications [notifications]=\"config.notifications\"\n                                     (action)=\"handleAction($event)\"></ui-header-notifications>\n            <ui-header-profile [profile]=\"config.profile\"\n                               [links]=\"config.profileNav\"></ui-header-profile>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"header-nav\" *ngIf=\"config.headerNav\">\n      <div class=\"container\">\n        <div class=\"row align-items-center\">\n          <div class=\"col\">\n            <ui-menu [links]=\"config.headerNav\"></ui-menu>\n          </div>\n        </div>\n      </div>\n    </div>\n  ",
             },] },
 ];
-HighlightComponent.propDecorators = {
-    "code": [{ type: core.Input },],
-    "icon": [{ type: core.Input },],
-    "name": [{ type: core.Input },],
+HeaderComponent.propDecorators = {
+    "config": [{ type: core.Input },],
 };
+var HeaderNotificationItemComponent = /** @class */ (function () {
+    function HeaderNotificationItemComponent() {
+        this.action = new core.EventEmitter();
+    }
+    HeaderNotificationItemComponent.prototype.onClick = function (e) {
+        e.preventDefault();
+        this.action.emit({
+            type: 'NOTIFICATION_CLICK',
+            payload: this.notification,
+        });
+    };
+    return HeaderNotificationItemComponent;
+}());
+HeaderNotificationItemComponent.decorators = [
+    { type: core.Component, args: [{
+                selector: 'ui-header-notification-item',
+                template: "\n    <a href=\"#\" class=\"dropdown-item d-flex\" (click)=\"onClick($event)\">\n      <ui-avatar [text]=\"notification.avatarText\" class=\"mr-3 align-self-center\"></ui-avatar>\n      <div>\n        <strong>{{ notification.from }}</strong> {{ notification.text }}\n        <div class=\"small text-muted\">\n          {{ notification.date | timeAgo }}\n        </div>\n      </div>\n    </a>\n  ",
+                styles: [],
+            },] },
+];
+HeaderNotificationItemComponent.propDecorators = {
+    "notification": [{ type: core.Input },],
+    "action": [{ type: core.Output },],
+};
 var HeaderNotificationsComponent = /** @class */ (function () {
@@ -602,3 +760,3 @@ function HeaderNotificationsComponent() {
                 template: "\n    <div class=\"dropdown d-none d-md-flex py-2\" dropdown *ngIf=\"notifications\">\n      <a dropdownToggle class=\"nav-link icon\" data-toggle=\"dropdown\">\n        <i class=\"fe fe-bell\"></i>\n        <span class=\"nav-unread\"></span>\n      </a>\n      <div *dropdownMenu class=\"dropdown-menu dropdown-menu-right dropdown-menu-arrow\">\n        <ui-header-notification-item *ngFor=\"let notification of notifications\"\n                                     [notification]=\"notification\"\n                                     (action)=\"action.emit($event)\">\n        </ui-header-notification-item>\n        <div class=\"dropdown-divider\"></div>\n        <a href=\"#\" class=\"dropdown-item text-center text-muted-dark\"\n           (click)=\"onClick($event)\">\n          {{ actionText }}\n        </a>\n      </div>\n    </div>\n  ",
-                styles: []
+                styles: [],
             },] },
@@ -612,23 +770,2 @@ ];
 };
-var HeaderNotificationItemComponent = /** @class */ (function () {
-    function HeaderNotificationItemComponent() {
-        this.action = new core.EventEmitter();
-    }
-    HeaderNotificationItemComponent.prototype.onClick = function (e) {
-        e.preventDefault();
-        this.action.emit({ type: 'NOTIFICATION_CLICK', payload: this.notification });
-    };
-    return HeaderNotificationItemComponent;
-}());
-HeaderNotificationItemComponent.decorators = [
-    { type: core.Component, args: [{
-                selector: 'ui-header-notification-item',
-                template: "\n    <a href=\"#\" class=\"dropdown-item d-flex\" (click)=\"onClick($event)\">\n      <ui-avatar [text]=\"notification.avatarText\" class=\"mr-3 align-self-center\"></ui-avatar>\n      <div>\n        <strong>{{ notification.from }}</strong> {{ notification.text }}\n        <div class=\"small text-muted\">\n          {{ notification.date | timeAgo }}\n        </div>\n      </div>\n    </a>\n  ",
-                styles: []
-            },] },
-];
-HeaderNotificationItemComponent.propDecorators = {
-    "notification": [{ type: core.Input },],
-    "action": [{ type: core.Output },],
-};
 var HeaderProfileComponent = /** @class */ (function () {
@@ -642,3 +779,3 @@ function HeaderProfileComponent() {
                 selector: 'ui-header-profile',
-                template: "\n    <div class=\"dropdown\" dropdown *ngIf=\"profile\">\n      <a class=\"nav-link pr-0\" data-toggle=\"dropdown\" dropdownToggle>\n        <ui-avatar [image]=\"profile.avatar\" [text]=\"profile.avatarText\"></ui-avatar>\n        <span class=\"ml-2 d-none d-lg-block\">\n          <span class=\"text-default\">{{ profile.name }}</span>\n          <small class=\"text-muted d-block mt-1\">\n            {{ profile.description || profile.title || profile.email }}\n          </small>\n        </span>\n      </a>\n      <div *dropdownMenu class=\"dropdown-menu dropdown-menu-right dropdown-menu-arrow\">\n        <ng-container *ngFor=\"let link of links\">\n          <ui-header-profile-link [link]=\"link\"></ui-header-profile-link>\n        </ng-container>\n      </div>\n    </div>\n  ",
+                template: "\n    <div class=\"dropdown\" dropdown *ngIf=\"profile\">\n      <a class=\"nav-link pr-0\" data-toggle=\"dropdown\" dropdownToggle>\n        <ui-avatar [image]=\"profile.avatar\" [text]=\"profile.avatarText\"></ui-avatar>\n        <span class=\"ml-2 d-none d-lg-block\">\n          <span class=\"text-default\">{{ profile.name }}</span>\n          <small class=\"text-muted d-block mt-1\">\n            {{ profile.description || profile.title || profile.email }}\n          </small>\n        </span>\n      </a>\n      <div class=\"dropdown-menu dropdown-menu-right dropdown-menu-arrow\" *dropdownMenu>\n        <ng-container *ngFor=\"let link of links\">\n          <div *ngIf=\"link.divider; else linkEl\" class=\"dropdown-divider\"></div>\n          <ng-template #linkEl>\n            <ui-link [link]=\"link\"></ui-link>\n          </ng-template>\n        </ng-container>\n      </div>\n    </div>\n  ",
             },] },
@@ -650,73 +787,135 @@ ];
 };
-var HeaderProfileLinkComponent = /** @class */ (function () {
-    function HeaderProfileLinkComponent() {
+var MenuComponent = /** @class */ (function () {
+    function MenuComponent() {
+        this.links = [];
     }
-    return HeaderProfileLinkComponent;
+    return MenuComponent;
 }());
-HeaderProfileLinkComponent.decorators = [
+MenuComponent.decorators = [
     { type: core.Component, args: [{
-                selector: 'ui-header-profile-link',
-                template: "\n    <a *ngIf=\"link.link\" class=\"dropdown-item\" [routerLink]=\"link.link\">\n      <ui-badge *ngIf=\"link.badge\" class=\"float-right\" [badge]=\"link.badge\"></ui-badge>\n      <i *ngIf=\"link.icon\" [class]=\"link.icon\" [class.dropdown-icon]=\"true\"></i>\n      <span *ngIf=\"link.label\">{{link.label}}</span>\n    </a>\n    <div *ngIf=\"link.divider\" class=\"dropdown-divider\"></div>\n  ",
-                styles: []
+                selector: 'ui-menu',
+                template: "\n    <ul class=\"nav nav-tabs\" style=\"white-space: nowrap;\">\n      <ng-container *ngFor=\"let item of links\">\n        <li class=\"nav-item d-inline-block\">\n          <a href=\"#\" [routerLink]=\"item.link\" class=\"nav-link\" routerLinkActive=\"active\">\n            <i class=\"{{ item.icon }}\" *ngIf=\"item.icon\"></i>\n            {{item.label}}\n          </a>\n          <div class=\"nav-submenu nav\" *ngIf=\"item.children\">\n            <ng-container *ngFor=\"let sub of item.children\">\n              <a href=\"#\" class=\"nav-item\" [routerLink]=\"sub.link\" routerLinkActive=\"active\">\n                <i class=\"{{ sub.icon }}\" *ngIf=\"sub.icon\"></i>\n                {{sub.label}}\n              </a>\n            </ng-container>\n          </div>\n        </li>\n      </ng-container>\n    </ul>\n  ",
+                styles: [],
             },] },
 ];
-HeaderProfileLinkComponent.propDecorators = {
-    "link": [{ type: core.Input },],
+MenuComponent.propDecorators = {
+    "links": [{ type: core.Input },],
 };
-var BadgeComponent = /** @class */ (function () {
-    function BadgeComponent() {
+var HeaderModule = /** @class */ (function () {
+    function HeaderModule() {
     }
-    BadgeComponent.prototype.ngOnInit = function () {
-        if (this.badge) {
-            this.label = this.badge.label;
-            this.type = this.badge.type;
-        }
-    };
-    return BadgeComponent;
+    return HeaderModule;
 }());
-BadgeComponent.decorators = [
+HeaderModule.decorators = [
+    { type: core.NgModule, args: [{
+                imports: [common.CommonModule, router.RouterModule, AvatarModule, BadgeModule, ngxBootstrap.BsDropdownModule, LinkModule],
+                declarations: [
+                    TimeAgoPipe,
+                    HeaderComponent,
+                    HeaderNotificationsComponent,
+                    HeaderNotificationItemComponent,
+                    HeaderProfileComponent,
+                    MenuComponent,
+                ],
+                exports: [
+                    HeaderComponent,
+                ],
+            },] },
+];
+var LayoutComponent = /** @class */ (function () {
+    function LayoutComponent(ui) {
+        this.ui = ui;
+    }
+    return LayoutComponent;
+}());
+LayoutComponent.decorators = [
     { type: core.Component, args: [{
-                selector: 'ui-badge',
-                template: "\n    <span class=\"badge badge-{{type}}\">\n      {{label}}\n    </span>\n  ",
+                selector: 'ui-layout',
+                template: "\n    <div class=\"page\" *ngIf=\"ui.config$ | async as config; else loading\">\n      <div class=\"page-main\">\n        <ui-header [config]=\"config\"></ui-header>\n        <div class=\"page-content\">\n          <router-outlet></router-outlet>\n        </div>\n        <ui-footer [config]=\"config\"></ui-footer>\n      </div>\n    </div>\n    <ng-template #loading>\n      Loading...\n    </ng-template>\n  ",
             },] },
 ];
-BadgeComponent.propDecorators = {
-    "label": [{ type: core.Input },],
-    "type": [{ type: core.Input },],
+LayoutComponent.ctorParameters = function () { return [
+    { type: UiService$1, },
+]; };
+var LayoutBaseComponent = /** @class */ (function () {
+    function LayoutBaseComponent() {
+    }
+    return LayoutBaseComponent;
+}());
+LayoutBaseComponent.decorators = [
+    { type: core.Component, args: [{
+                selector: 'ui-layout-base',
+                template: "\n    <div class=\"page\">\n      <router-outlet></router-outlet>\n    </div>\n  ",
+            },] },
+];
+var LayoutModule = /** @class */ (function () {
+    function LayoutModule() {
+    }
+    return LayoutModule;
+}());
+LayoutModule.decorators = [
+    { type: core.NgModule, args: [{
+                imports: [common.CommonModule, router.RouterModule, HeaderModule, FooterModule],
+                declarations: [LayoutComponent, LayoutBaseComponent],
+                exports: [LayoutComponent, LayoutBaseComponent],
+            },] },
+];
+var PageComponent = /** @class */ (function () {
+    function PageComponent() {
+    }
+    return PageComponent;
+}());
+PageComponent.decorators = [
+    { type: core.Component, args: [{
+                selector: 'ui-page',
+                template: "\n     <div class=\"container\">\n      <ng-content></ng-content>\n    </div>\n  ",
+            },] },
+];
+var PageTitleComponent = /** @class */ (function () {
+    function PageTitleComponent() {
+        this.badgeStyle = 'default';
+        this.header = true;
+    }
+    return PageTitleComponent;
+}());
+PageTitleComponent.decorators = [
+    { type: core.Component, args: [{
+                selector: 'ui-page-title',
+                template: "\n    <div [class.page-header]=\"header\">\n      <h1 class=\"page-title\">\n        <i *ngIf=\"icon\" class=\"{{ icon }} page-title-icon m-3\"></i>\n        {{ title }}\n        <small *ngIf=\"badge\" class=\"badge badge-{{badgeStyle}} m-3\">\n          {{badge}}\n        </small>\n      </h1>\n      <div *ngIf=\"subTitle\" class=\"page-subtitle\">\n        {{subTitle}}\n      </div>\n      <div class=\"page-options\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  ",
+                styles: [],
+            },] },
+];
+PageTitleComponent.propDecorators = {
     "badge": [{ type: core.Input },],
+    "badgeStyle": [{ type: core.Input },],
+    "header": [{ type: core.Input },],
+    "icon": [{ type: core.Input },],
+    "title": [{ type: core.Input },],
+    "subTitle": [{ type: core.Input },],
 };
-var HeaderLinksComponent = /** @class */ (function () {
-    function HeaderLinksComponent() {
-        this.links = [];
+var PageModule = /** @class */ (function () {
+    function PageModule() {
     }
-    return HeaderLinksComponent;
+    return PageModule;
 }());
-HeaderLinksComponent.decorators = [
-    { type: core.Component, args: [{
-                selector: 'ui-header-links',
-                template: "\n    <ng-container *ngFor=\"let link of links\">\n      <a [href]=\"link.link\" [class]=\"link.class\" [target]=\"link.target || '_self' \">\n        <i [class]=\"link.icon\"></i>\n        <span class=\"d-none d-lg-inline\">{{ link.label }}</span>\n      </a>\n    </ng-container>\n  ",
+PageModule.decorators = [
+    { type: core.NgModule, args: [{
+                imports: [common.CommonModule],
+                declarations: [PageComponent, PageTitleComponent],
+                exports: [PageComponent, PageTitleComponent],
             },] },
 ];
-HeaderLinksComponent.propDecorators = {
-    "links": [{ type: core.Input },],
-};
 var uiModules = [
     AlertModule,
+    AvatarModule,
+    BadgeModule,
+    ButtonModule,
+    CardModule,
+    FooterModule,
+    HeaderModule,
+    LayoutModule,
+    LinkModule,
+    PageModule,
 ];
-var exported = __spread(uiModules, [
-    LayoutComponent,
-    LayoutBaseComponent,
-    PageComponent,
-    PageTitleComponent,
-    DashboardStatsComponent,
-    DashboardIconBoxComponent,
-    DashboardDigitComponent,
-    DashboardChartComponent,
-    DashboardChartBgComponent,
-    AvatarComponent,
-    CardComponent,
-    CardBodyComponent,
-    HighlightComponent,
-    MenuComponent,
-]);
+var exported = __spread(uiModules);
 var UiModule = /** @class */ (function () {
@@ -734,42 +933,10 @@ function UiModule() {
                     forms.ReactiveFormsModule,
-                    ngxCharts.NgxChartsModule,
-                    ng2Charts.ChartsModule,
                     angularPipes.NgPipesModule,
-                    dropdown.BsDropdownModule.forRoot(),
-                    ngxHighlightjs.HighlightModule.forRoot({
-                        theme: 'atom-one-light',
-                    })
+                    dropdown.BsDropdownModule.forRoot()
                 ], uiModules),
-                declarations: [
-                    HeaderComponent,
-                    FooterComponent,
-                    FooterLinksComponent,
-                    LayoutComponent,
-                    LayoutBaseComponent,
-                    MenuComponent,
-                    PageTitleComponent,
-                    PageComponent,
-                    DashboardStatsComponent,
-                    DashboardIconBoxComponent,
-                    DashboardDigitComponent,
-                    DashboardChartComponent,
-                    AvatarComponent,
-                    DashboardChartBgComponent,
-                    CardComponent,
-                    CardBodyComponent,
-                    HighlightComponent,
-                    HeaderNotificationsComponent,
-                    HeaderNotificationItemComponent,
-                    HeaderProfileComponent,
-                    HeaderProfileLinkComponent,
-                    BadgeComponent,
-                    TimeAgoPipe,
-                    HeaderLinksComponent,
-                ],
+                declarations: [],
                 exports: __spread(exported, [
-                    ngxCharts.NgxChartsModule,
-                    ng2Charts.ChartsModule,
                     angularPipes.NgPipesModule,
-                    router.RouterModule,
-                ])
+                ]),
+                providers: [ui_service.UiService],
             },] },
@@ -779,31 +946,30 @@ ];
 exports.UiModule = UiModule;
+exports.UiService = UiService$1;
+exports.UiProfile = UiProfile;
+exports.UiNotification = UiNotification;
+exports.UiLayout = UiLayout;
+exports.UiBadge = UiBadge;
+exports.AlertModule = AlertModule;
+exports.AvatarModule = AvatarModule;
+exports.BadgeModule = BadgeModule;
+exports.ButtonModule = ButtonModule;
+exports.CardModule = CardModule;
+exports.FooterModule = FooterModule;
+exports.HeaderModule = HeaderModule;
+exports.LayoutModule = LayoutModule;
 exports.LayoutComponent = LayoutComponent;
 exports.LayoutBaseComponent = LayoutBaseComponent;
-exports.AlertModule = AlertModule;
-exports.ɵo = AvatarComponent;
-exports.ɵx = BadgeComponent;
-exports.ɵr = CardBodyComponent;
-exports.ɵq = CardComponent;
-exports.ɵp = DashboardChartBgComponent;
-exports.ɵn = DashboardChartComponent;
-exports.ɵm = DashboardDigitComponent;
-exports.ɵl = DashboardIconBoxComponent;
-exports.ɵk = DashboardStatsComponent;
-exports.ɵe = FooterLinksComponent;
-exports.ɵd = FooterComponent;
-exports.ɵz = HeaderLinksComponent;
-exports.ɵu = HeaderNotificationItemComponent;
-exports.ɵt = HeaderNotificationsComponent;
-exports.ɵw = HeaderProfileLinkComponent;
-exports.ɵv = HeaderProfileComponent;
-exports.ɵc = HeaderComponent;
-exports.ɵs = HighlightComponent;
-exports.ɵh = MenuComponent;
-exports.ɵi = PageTitleComponent;
-exports.ɵj = PageComponent;
-exports.ɵg = LayoutBaseComponent;
-exports.ɵf = LayoutComponent;
+exports.LinkModule = LinkModule;
+exports.UiLink = UiLink;
+exports.PageModule = PageModule;
 exports.ɵa = AlertModule;
-exports.ɵb = AlertComponent;
-exports.ɵy = TimeAgoPipe;
+exports.ɵb = AvatarModule;
+exports.ɵc = BadgeModule;
+exports.ɵd = ButtonModule;
+exports.ɵe = CardModule;
+exports.ɵf = FooterModule;
+exports.ɵg = HeaderModule;
+exports.ɵh = LayoutModule;
+exports.ɵi = LinkModule;
+exports.ɵj = PageModule;
 
@@ -810,0 +976,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

bundles/tabler-angular-ui.umd.min.js

@@ -1,2 +0,2 @@
-!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/router"),require("rxjs/operators"),require("@angular/common"),require("@angular/forms"),require("@swimlane/ngx-charts"),require("ng2-charts"),require("angular-pipes"),require("ngx-bootstrap/dropdown"),require("ngx-highlightjs")):"function"==typeof define&&define.amd?define("@tabler/angular-ui",["exports","@angular/core","@angular/router","rxjs/operators","@angular/common","@angular/forms","@swimlane/ngx-charts","ng2-charts","angular-pipes","ngx-bootstrap/dropdown","ngx-highlightjs"],t):t((n.tabler=n.tabler||{},n.tabler["angular-ui"]={}),n.ng.core,n.ng.router,n.Rx.Observable.prototype,n.ng.common,n.ng.forms,n.ngxCharts,n.ng2Charts,n.angularPipes,n.dropdown,n.ngxHighlightjs)}(this,function(n,t,e,a,i,o,s,r,l,c,d){"use strict";function p(n,t){var e="function"==typeof Symbol&&n[Symbol.iterator];if(!e)return n;var a,i,o=e.call(n),s=[];try{for(;(void 0===t||0<t--)&&!(a=o.next()).done;)s.push(a.value)}catch(r){i={error:r}}finally{try{a&&!a.done&&(e=o["return"])&&e.call(o)}finally{if(i)throw i.error}}return s}function u(){for(var n=[],t=0;t<arguments.length;t++)n=n.concat(p(arguments[t]));return n}var g=function(){function n(n){this.route=n}return n.prototype.ngOnInit=function(){var t=this;this.route.data.pipe(a.map(function(n){return n.config})).subscribe(function(n){return t.config=n})},n}();g.decorators=[{type:t.Component,args:[{selector:"ui-layout",template:'\n    <div class="page">\n      <div class="page-main">\n        <ui-header [config]="config?.header"></ui-header>\n        <div class="page-content">\n          <router-outlet></router-outlet>\n        </div>\n        <ui-footer-links [config]="config?.subfooter"></ui-footer-links>\n        <ui-footer [config]="config?.footer"></ui-footer>\n      </div>\n    </div>\n  '}]}],g.ctorParameters=function(){return[{type:e.ActivatedRoute}]},g.propDecorators={config:[{type:t.Input}]};var h=function(){};h.decorators=[{type:t.Component,args:[{selector:"ui-layout-base",template:'\n    <div class="page">\n      <router-outlet></router-outlet>\n    </div>\n  '}]}];var f=function(){function n(){}return n.prototype.ngOnInit=function(){this.alert&&(this.label=this.alert.label,this.type=this.alert.type)},n}();f.decorators=[{type:t.Component,args:[{selector:"ui-alert",template:'\n    <div class="alert alert-{{type}}">\n      <ng-content></ng-content>\n      {{label}}\n    </div>\n  '}]}],f.propDecorators={label:[{type:t.Input}],type:[{type:t.Input}],alert:[{type:t.Input}]};var v=function(){};v.decorators=[{type:t.NgModule,args:[{imports:[i.CommonModule],declarations:[f],exports:[f]}]}];var m=function(){function n(n,t){this.changeDetectorRef=n,this.ngZone=t}return n.prototype.transform=function(n){var t=this;this.removeTimer();var e=new Date(n),a=new Date,i=Math.round(Math.abs((a.getTime()-e.getTime())/1e3)),o=Number.isNaN(i)?1e3:1e3*this.getSecondsUntilUpdate(i);this.timer=this.ngZone.runOutsideAngular(function(){return"undefined"!=typeof window?window.setTimeout(function(){t.ngZone.run(function(){return t.changeDetectorRef.markForCheck()})},o):null});var s=Math.round(Math.abs(i/60)),r=Math.round(Math.abs(s/60)),l=Math.round(Math.abs(r/24)),c=Math.round(Math.abs(l/30.416)),d=Math.round(Math.abs(l/365));return Number.isNaN(i)?"":i<=45?"a few seconds ago":i<=90?"a minute ago":s<=45?s+" minutes ago":s<=90?"an hour ago":r<=22?r+" hours ago":r<=36?"a day ago":l<=25?l+" days ago":l<=45?"a month ago":l<=345?c+" months ago":l<=545?"a year ago":d+" years ago"},n.prototype.ngOnDestroy=function(){this.removeTimer()},n.prototype.removeTimer=function(){this.timer&&(window.clearTimeout(this.timer),this.timer=null)},n.prototype.getSecondsUntilUpdate=function(n){return n<60?2:n<3600?30:n<86400?300:3600},n}();m.decorators=[{type:t.Pipe,args:[{name:"timeAgo",pure:!1}]}],m.ctorParameters=function(){return[{type:t.ChangeDetectorRef},{type:t.NgZone}]};var y=function(){function n(){}return n.prototype.handleAction=function(n){console.log("Header Event"),console.log(n)},n}();y.decorators=[{type:t.Component,args:[{selector:"ui-header",template:'\n    <div class="header">\n      <div class="container">\n        <div class="d-flex">\n          <a class="navbar-brand" routerLink="/">\n            <img src="assets/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">\n            <span class="d-none d-md-inline">\n              {{ config?.title }}\n            </span>\n          </a>\n          <div class="ml-auto d-flex order-lg-2">\n            <ui-header-links class="nav-item" [links]="config?.links"></ui-header-links>\n            <ui-header-notifications [notifications]="config?.notifications"\n                                     (action)="handleAction($event)"></ui-header-notifications>\n            <ui-header-profile [profile]="config?.user" [links]="config?.profileLinks"></ui-header-profile>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class="header-nav">\n      <div class="container">\n        <div class="row align-items-center">\n          <div class="col">\n            <ui-menu [links]="config?.menu"></ui-menu>\n          </div>\n          <div class="col-3 ml-auto" *ngIf="config?.search">\n            <form class="input-icon">\n              <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">\n              <div class="input-icon-addon">\n                <i class="fe fe-search"></i>\n              </div>\n            </form>\n          </div>\n        </div>\n      </div>\n    </div>\n  ',styles:[]}]}],y.ctorParameters=function(){return[]},y.propDecorators={config:[{type:t.Input}]};var b=function(){};b.decorators=[{type:t.Component,args:[{selector:"ui-footer",template:'\n    <footer class="footer" *ngIf="config">\n      <div class="container">\n        <div class="row align-items-center flex-row-reverse">\n          <div class="col-auto ml-auto">\n            <div class="row align-items-center">\n              <div class="col-auto">\n                <ul class="list-inline list-inline-dots mb-0">\n                  <ng-container *ngFor="let link of config?.links">\n                    <li class="list-inline-item">\n                      <a [href]="link.link" [class]="link.class" [target]="link.target || \'_self\'">\n                        <i [class]="link.icon"></i>\n                        {{ link.label }}\n                      </a>\n                    </li>\n                  </ng-container>\n                </ul>\n              </div>\n            </div>\n          </div>\n          <div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center" [innerHtml]="config?.disclaimer">\n          </div>\n        </div>\n      </div>\n    </footer>\n  ',styles:[]}]}],b.propDecorators={config:[{type:t.Input}]};var I=function(){this.links=[]};I.decorators=[{type:t.Component,args:[{selector:"ui-menu",template:'\n    <ul class="nav nav-tabs" style="white-space: nowrap;">\n      <ng-container *ngFor="let item of links">\n        <li class="nav-item d-inline-block">\n          <a href="#" [routerLink]="item.url" class="nav-link" routerLinkActive="active">\n            <i class="{{ item.icon }}" *ngIf="item.icon"></i>\n            {{item.name}}\n          </a>\n          <div class="nav-submenu nav" *ngIf="item.subpages">\n            <ng-container *ngFor="let subitem of item.subpages">\n              <a href="#" class="nav-item" [routerLink]="subitem.url" routerLinkActive="active">\n                <i class="{{ subitem.icon }}" *ngIf="subitem.icon"></i>\n                {{subitem.name}}\n              </a>\n            </ng-container>\n          </div>\n        </li>\n      </ng-container>\n    </ul>\n  ',styles:[]}]}],I.propDecorators={links:[{type:t.Input}]};var k=function(){};k.decorators=[{type:t.Component,args:[{selector:"ui-page",template:'\n     <div class="container">\n      <ng-content></ng-content>\n    </div>\n  '}]}];var w=function(){this.badgeStyle="default",this.header=!0};w.decorators=[{type:t.Component,args:[{selector:"ui-page-title",template:'\n    <div [class.page-header]="header">\n      <h1 class="page-title">\n        <i *ngIf="icon" class="{{ icon }} page-title-icon m-3"></i>\n        {{ title }}\n        <small *ngIf="badge" class="badge badge-{{badgeStyle}} m-3">\n          {{badge}}\n        </small>\n      </h1>\n      <div *ngIf="subTitle" class="page-subtitle">\n        {{subTitle}}\n      </div>\n      <div class="page-options">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  ',styles:[]}]}],w.propDecorators={badge:[{type:t.Input}],badgeStyle:[{type:t.Input}],header:[{type:t.Input}],icon:[{type:t.Input}],title:[{type:t.Input}],subTitle:[{type:t.Input}]};var x=function(){this.height="10rem",this.title="",this.data=[],this.doughnut=!1,this.view=[230,192],this.showLegend=!1,this.showLabels=!1};x.decorators=[{type:t.Component,args:[{selector:"ui-dashboard-chart",template:'\n    <div class="card">\n      <div class="card-header">\n        <h3 class="card-title">{{ title }}</h3>\n      </div>\n      <div class="card-body">\n        <div [style.height]="height">\n          <ngx-charts-pie-chart\n            scheme="air"\n            [view]="view"\n            [results]="data"\n            [legend]="showLegend"\n            [labels]="showLabels"\n            [doughnut]="doughnut"\n            [gradient]="false">\n          </ngx-charts-pie-chart>\n        </div>\n      </div>\n    </div>\n  ',styles:[]}]}],x.propDecorators={height:[{type:t.Input}],title:[{type:t.Input}],data:[{type:t.Input}],doughnut:[{type:t.Input}]};var C=function(){this.datasets=[{data:[78,81,80,45,34,12,40],label:"Series A"}],this.labels=["January","February","March","April","May","June","July"],this.options={maintainAspectRatio:!1,scales:{xAxes:[{display:!1}],yAxes:[{display:!1}]},elements:{line:{borderWidth:2},point:{radius:0,hitRadius:10,hoverRadius:4}},legend:{display:!1},animation:{duration:0}},this.colors=[{backgroundColor:"rgba(70,127,207,0.1)",borderColor:"rgba(70,127,207)"}]};C.decorators=[{type:t.Component,args:[{selector:"ui-dashboard-chart-bg",template:'\n    <div class="card">\n      <div class="card-body">\n      \x3c!--<div class="card-body">--\x3e\n        <div class="card-value pull-right text-{{ color }}">{{ rate }}</div>\n        <h3 class="mb-1">{{ title}}</h3>\n        <div class="text-muted">{{ description }}</div>\n      </div>\n      <div class="card-img">\n          <canvas baseChart\n                  class="pt-5"\n                  height="160"\n                  [datasets]="datasets"\n                  [labels]="labels"\n                  [options]="options"\n                  [colors]="colors"\n                  chartType="line"></canvas>\n        </div>\n    </div>\n  ',styles:["\n    .card-body {\n      background-color: transparent;\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      padding: 1.25rem;\n    }\n  "]}]}],C.propDecorators={rate:[{type:t.Input}],color:[{type:t.Input}],title:[{type:t.Input}],description:[{type:t.Input}]};var M=function(){this.color="blue",this.title="Today Expenses",this.digit="$8500",this.width="54%"};M.decorators=[{type:t.Component,args:[{selector:"ui-dashboard-digit",template:'\n    <div class="card">\n      <div class="card-body text-center">\n        <div class="h5">{{ title }}</div>\n        <div class="display-4 font-weight-bold mb-4">{{ digit }}</div>\n        <div class="progress progress-sm">\n          <div class="progress-bar bg-{{ color }}" [style.width]="width"></div>\n        </div>\n      </div>\n    </div>\n  ',styles:[]}]}],M.propDecorators={color:[{type:t.Input}],title:[{type:t.Input}],digit:[{type:t.Input}],width:[{type:t.Input}]};var D=function(){this.color="red",this.icon="fa fa-dollar",this.value="16",this.description="Sales",this.subtitle="6 waiting payments"};D.decorators=[{type:t.Component,args:[{selector:"ui-dashboard-icon-box",template:'\n    <div class="card p-3">\n      <div class="d-flex align-items-center">\n\t\t<span class="stamp stamp-md bg-{{ color }} mr-3">\n\t\t\t<i class="{{ icon }}"></i>\n\t\t</span>\n        <div>\n          <h4 class="m-0"><a href="javascript:void(0)">{{ value }} <small>{{ description }}</small></a></h4>\n          <small class="text-muted">{{ subtitle }}</small>\n        </div>\n      </div>\n    </div>\n  ',styles:[]}]}],D.propDecorators={color:[{type:t.Input}],icon:[{type:t.Input}],value:[{type:t.Input}],description:[{type:t.Input}],subtitle:[{type:t.Input}]};var T=function(){function n(){}return n.prototype.isPositive=function(){return 0<this.percentage},n}();T.decorators=[{type:t.Component,args:[{selector:"ui-dashboard-stats",template:'\n    <div class="card">\n      <div class="card-body p-3 text-center">\n        <div class="text-right" [class.text-green]="isPositive()" [class.text-red]="!isPositive()" >\n          <span *ngIf="percentage">\n            {{percentage}}%\n            <i *ngIf="isPositive()" class="fe fe-chevron-up"></i>\n            <i *ngIf="!isPositive()" class="fe fe-chevron-down"></i>\n          </span>\n        </div>\n        <div class="h1 m-0">{{ number }}</div>\n        <div class="text-muted mb-4">{{ title }}</div>\n      </div>\n    </div>\n  ',styles:[]}]}],T.propDecorators={number:[{type:t.Input}],percentage:[{type:t.Input}],title:[{type:t.Input}]};var S=function(){function n(){}return n.prototype.backgroundImage=function(){return this.image?"url("+this.image+")":""},n}();S.decorators=[{type:t.Component,args:[{selector:"ui-avatar",template:'\n    <span class="avatar avatar-{{size}}" [style.background-image]="backgroundImage()">\n      {{text}}\n      <span *ngIf="status" class="avatar-status bg-{{status}}"></span>\n    </span>\n  ',styles:[]}]}],S.propDecorators={image:[{type:t.Input}],size:[{type:t.Input}],status:[{type:t.Input}],text:[{type:t.Input}]};var F=function(){function n(){this.allowCollapse=!0,this.allowFullScreen=!1,this.allowHide=!0,this.collapsed=!1,this.fullScreen=!1,this.hidden=!1,this.loader=!1,this.statusLeft=!1,this.action=new t.EventEmitter}return n.prototype.collapse=function(n){n.preventDefault(),this.collapsed=!this.collapsed},n.prototype.hide=function(n){n.preventDefault(),this.hidden=!this.hidden},n.prototype.goFullScreen=function(n){n.preventDefault(),this.fullScreen=!this.fullScreen,this.collapsed&&(this.collapsed=!1)},n}();F.decorators=[{type:t.Component,args:[{selector:"ui-card",template:'\n    <div class="card" [class.hide]="hidden" [class.card-fullscreen]="fullScreen">\n      <div *ngIf="status" class="card-status bg-{{ status }}" [class.card-status-left]="statusLeft"></div>\n      <div class="card-header">\n        <h3 class="card-title">\n          <i *ngIf="icon" class="{{ icon }}"></i>\n          {{header}}\n        </h3>\n        <div class="card-options">\n          <form action="" *ngIf="search">\n            <div class="input-group">\n              <input type="text"\n                     class="form-control form-control-sm" [placeholder]="search.placeholder" name="s" [(ngModel)]="search.value">\n              <span class="input-group-btn ml-2">\n                <button class="btn btn-sm btn-default" type="submit" (click)="action.emit( { type: \'SEARCH\', payload: search.value } )">\n                  <span class="fe fe-search"></span>\n                </button>\n              </span>\n            </div>\n          </form>\n          <ng-container *ngIf="!buttons">\n            <a class="card-options-collapse" data-toggle="card-collapse" href="#"\n               [class.hide]="!allowCollapse"\n               (click)="collapse($event)">\n              <i class="fe" [class.fe-chevron-down]="collapsed" [class.fe-chevron-up]="!collapsed"></i>\n            </a>\n            <a class="card-options-fullscreen" data-toggle="card-fullscreen" href="#"\n               [class.hide]="!allowFullScreen"\n               (click)="goFullScreen($event)">\n              <i class="fe fe-maximize"></i>\n            </a>\n            <a class="card-options-remove" data-toggle="card-remove" href="#"\n               [class.hide]="!allowHide"\n               (click)="hide($event)">\n              <i class="fe fe-x"></i>\n            </a>\n          </ng-container>\n          <ng-container *ngIf="buttons">\n            <ng-container *ngFor="let button of buttons">\n              <button class="btn btn-secondary btn-sm ml-2"\n                      *ngIf="button.type === \'button\'"\n                      (click)="action.emit( { type: button.action, payload: button.payload || \'\' })">\n                <i *ngIf="button.icon" [class]="button.icon"></i>\n                {{ button.text }}\n              </button>\n              <label class="custom-switch m-0"\n                     *ngIf="button.type === \'switch\'">\n                <input type="checkbox" [value]="button.checked" class="custom-switch-input"\n                       (change)="action.emit( { type: \'SWITCH\', payload: button.checked } )"\n                       [checked]="button.checked || false">\n                <span class="custom-switch-indicator"></span>\n              </label>\n            </ng-container>\n          </ng-container>\n        </div>\n      </div>\n      <div [class.hide]="collapsed" [class.show]="!collapsed">\n        <ng-container *ngIf="alert">\n          <div class="card-alert alert alert-{{alert.type}} mb-0">\n            {{alert.text}}\n          </div>\n        </ng-container>\n        <ng-content></ng-content>\n        <div class="card-footer" *ngIf="footer">{{footer}}</div>\n      </div>\n    </div>\n  ',styles:["\n    .hide {\n      display: none;\n    }\n    .show {\n      display: block;\n    }\n  "]}]}],F.propDecorators={alert:[{type:t.Input}],allowCollapse:[{type:t.Input}],allowFullScreen:[{type:t.Input}],allowHide:[{type:t.Input}],buttons:[{type:t.Input}],collapsed:[{type:t.Input}],footer:[{type:t.Input}],fullScreen:[{type:t.Input}],header:[{type:t.Input}],hidden:[{type:t.Input}],icon:[{type:t.Input}],loader:[{type:t.Input}],search:[{type:t.Input}],status:[{type:t.Input}],statusLeft:[{type:t.Input}],action:[{type:t.Output}]};var L=function(){this.loader=!1};L.decorators=[{type:t.Component,args:[{selector:"ui-card-body",template:'\n    <div class="card-body">\n      <ng-container *ngIf="loader">\n        <div class="dimmer active">\n          <div class="loader"></div>\n          <div class="dimmer-content">\n            <ng-content></ng-content>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngIf="!loader">\n        <ng-content></ng-content>\n      </ng-container>\n    </div>\n  ',styles:[]}]}],L.propDecorators={loader:[{type:t.Input}]};var A=function(){};A.decorators=[{type:t.Component,args:[{selector:"ui-footer-links",template:'\n    <div class="footer" *ngIf="config">\n      <div class="container">\n        <div class="row">\n          <div class="col-lg-8">\n            <div class="row">\n              <div class="col-6 col-md-3">\n                <ul class="list-unstyled mb-0">\n                  <li><a href="#">First link</a></li>\n                  <li><a href="#">Second link</a></li>\n                </ul>\n              </div>\n              <div class="col-6 col-md-3">\n                <ul class="list-unstyled mb-0">\n                  <li><a href="#">Third link</a></li>\n                  <li><a href="#">Fourth link</a></li>\n                </ul>\n              </div>\n              <div class="col-6 col-md-3">\n                <ul class="list-unstyled mb-0">\n                  <li><a href="#">Fifth link</a></li>\n                  <li><a href="#">Sixth link</a></li>\n                </ul>\n              </div>\n              <div class="col-6 col-md-3">\n                <ul class="list-unstyled mb-0">\n                  <li><a href="#">Other link</a></li>\n                  <li><a href="#">Last link</a></li>\n                </ul>\n              </div>\n            </div>\n          </div>\n          <div class="col-lg-4 mt-4 mt-lg-0" [innerHtml]="config?.description"></div>\n        </div>\n      </div>\n    </div>\n  ',styles:[]}]}],A.propDecorators={config:[{type:t.Input}]};var R=function(){this.icon="fe fe-code",this.name="Code snippet"};R.decorators=[{type:t.Component,args:[{selector:"ui-highlight",template:'\n    <ui-card [header]="name" [icon]="icon" [buttons]="[]">\n      <div class="p-5">\n        <pre class="m-0 p-0">\n          <code highlight [textContent]="code"></code>\n        </pre>\n      </div>\n    </ui-card>\n  '}]}],R.propDecorators={code:[{type:t.Input}],icon:[{type:t.Input}],name:[{type:t.Input}]};var N=function(){function n(){this.notifications=[],this.actionText="Mark all as read",this.actionType="MARK_ALL_READ",this.action=new t.EventEmitter}return n.prototype.onClick=function(n){n.preventDefault(),this.action.emit({type:this.actionType})},n}();N.decorators=[{type:t.Component,args:[{selector:"ui-header-notifications",template:'\n    <div class="dropdown d-none d-md-flex py-2" dropdown *ngIf="notifications">\n      <a dropdownToggle class="nav-link icon" data-toggle="dropdown">\n        <i class="fe fe-bell"></i>\n        <span class="nav-unread"></span>\n      </a>\n      <div *dropdownMenu class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">\n        <ui-header-notification-item *ngFor="let notification of notifications"\n                                     [notification]="notification"\n                                     (action)="action.emit($event)">\n        </ui-header-notification-item>\n        <div class="dropdown-divider"></div>\n        <a href="#" class="dropdown-item text-center text-muted-dark"\n           (click)="onClick($event)">\n          {{ actionText }}\n        </a>\n      </div>\n    </div>\n  ',styles:[]}]}],N.propDecorators={notifications:[{type:t.Input}],actionText:[{type:t.Input}],actionType:[{type:t.Input}],action:[{type:t.Output}]};var O=function(){function n(){this.action=new t.EventEmitter}return n.prototype.onClick=function(n){n.preventDefault(),this.action.emit({type:"NOTIFICATION_CLICK",payload:this.notification})},n}();O.decorators=[{type:t.Component,args:[{selector:"ui-header-notification-item",template:'\n    <a href="#" class="dropdown-item d-flex" (click)="onClick($event)">\n      <ui-avatar [text]="notification.avatarText" class="mr-3 align-self-center"></ui-avatar>\n      <div>\n        <strong>{{ notification.from }}</strong> {{ notification.text }}\n        <div class="small text-muted">\n          {{ notification.date | timeAgo }}\n        </div>\n      </div>\n    </a>\n  ',styles:[]}]}],O.propDecorators={notification:[{type:t.Input}],action:[{type:t.Output}]};var P=function(){};P.decorators=[{type:t.Component,args:[{selector:"ui-header-profile",template:'\n    <div class="dropdown" dropdown *ngIf="profile">\n      <a class="nav-link pr-0" data-toggle="dropdown" dropdownToggle>\n        <ui-avatar [image]="profile.avatar" [text]="profile.avatarText"></ui-avatar>\n        <span class="ml-2 d-none d-lg-block">\n          <span class="text-default">{{ profile.name }}</span>\n          <small class="text-muted d-block mt-1">\n            {{ profile.description || profile.title || profile.email }}\n          </small>\n        </span>\n      </a>\n      <div *dropdownMenu class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">\n        <ng-container *ngFor="let link of links">\n          <ui-header-profile-link [link]="link"></ui-header-profile-link>\n        </ng-container>\n      </div>\n    </div>\n  '}]}],P.propDecorators={profile:[{type:t.Input}],links:[{type:t.Input}]};var q=function(){};q.decorators=[{type:t.Component,args:[{selector:"ui-header-profile-link",template:'\n    <a *ngIf="link.link" class="dropdown-item" [routerLink]="link.link">\n      <ui-badge *ngIf="link.badge" class="float-right" [badge]="link.badge"></ui-badge>\n      <i *ngIf="link.icon" [class]="link.icon" [class.dropdown-icon]="true"></i>\n      <span *ngIf="link.label">{{link.label}}</span>\n    </a>\n    <div *ngIf="link.divider" class="dropdown-divider"></div>\n  ',styles:[]}]}],q.propDecorators={link:[{type:t.Input}]};var E=function(){function n(){}return n.prototype.ngOnInit=function(){this.badge&&(this.label=this.badge.label,this.type=this.badge.type)},n}();E.decorators=[{type:t.Component,args:[{selector:"ui-badge",template:'\n    <span class="badge badge-{{type}}">\n      {{label}}\n    </span>\n  '}]}],E.propDecorators={label:[{type:t.Input}],type:[{type:t.Input}],badge:[{type:t.Input}]};var H=function(){this.links=[]};H.decorators=[{type:t.Component,args:[{selector:"ui-header-links",template:'\n    <ng-container *ngFor="let link of links">\n      <a [href]="link.link" [class]="link.class" [target]="link.target || \'_self\' ">\n        <i [class]="link.icon"></i>\n        <span class="d-none d-lg-inline">{{ link.label }}</span>\n      </a>\n    </ng-container>\n  '}]}],H.propDecorators={links:[{type:t.Input}]};var j=[v],$=u(j,[g,h,k,w,T,D,M,x,C,S,F,L,R,I]),_=function(){};_.decorators=[{type:t.NgModule,args:[{imports:u([i.CommonModule,e.RouterModule,o.FormsModule,o.ReactiveFormsModule,s.NgxChartsModule,r.ChartsModule,l.NgPipesModule,c.BsDropdownModule.forRoot(),d.HighlightModule.forRoot({theme:"atom-one-light"})],j),declarations:[y,b,A,g,h,I,w,k,T,D,M,x,S,C,F,L,R,N,O,P,q,E,m,H],exports:u($,[s.NgxChartsModule,r.ChartsModule,l.NgPipesModule,e.RouterModule])}]}],n.UiModule=_,n.LayoutComponent=g,n.LayoutBaseComponent=h,n.AlertModule=v,n.ɵo=S,n.ɵx=E,n.ɵr=L,n.ɵq=F,n.ɵp=C,n.ɵn=x,n.ɵm=M,n.ɵl=D,n.ɵk=T,n.ɵe=A,n.ɵd=b,n.ɵz=H,n.ɵu=O,n.ɵt=N,n.ɵw=q,n.ɵv=P,n.ɵc=y,n.ɵs=R,n.ɵh=I,n.ɵi=w,n.ɵj=k,n.ɵg=h,n.ɵf=g,n.ɵa=v,n.ɵb=f,n.ɵy=m,Object.defineProperty(n,"__esModule",{value:!0})});
+!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms"),require("@angular/router"),require("rxjs/ReplaySubject"),require("ngx-bootstrap"),require("@tabler/angular-ui/src/services/ui.service"),require("angular-pipes"),require("ngx-bootstrap/dropdown")):"function"==typeof define&&define.amd?define("@tabler/angular-ui",["exports","@angular/core","@angular/common","@angular/forms","@angular/router","rxjs/ReplaySubject","ngx-bootstrap","@tabler/angular-ui/src/services/ui.service","angular-pipes","ngx-bootstrap/dropdown"],e):e((n.tabler=n.tabler||{},n.tabler["angular-ui"]={}),n.ng.core,n.ng.common,n.ng.forms,n.ng.router,n.Rx,n.ngxBootstrap,n.ui_service,n.angularPipes,n.dropdown)}(this,function(n,t,e,o,i,a,r,l,s,c){"use strict";function p(n,e){var t="function"==typeof Symbol&&n[Symbol.iterator];if(!t)return n;var o,i,a=t.call(n),r=[];try{for(;(void 0===e||0<e--)&&!(o=a.next()).done;)r.push(o.value)}catch(l){i={error:l}}finally{try{o&&!o.done&&(t=a["return"])&&t.call(a)}finally{if(i)throw i.error}}return r}function u(){for(var n=[],e=0;e<arguments.length;e++)n=n.concat(p(arguments[e]));return n}var d=function(){function n(){}return n.prototype.ngOnInit=function(){this.alert&&(this.label=this.alert.label,this.type=this.alert.type)},n}();d.decorators=[{type:t.Component,args:[{selector:"ui-alert",template:'\n    <div class="alert alert-{{type}}">\n      <ng-content></ng-content>\n      {{label}}\n    </div>\n  '}]}],d.propDecorators={label:[{type:t.Input}],type:[{type:t.Input}],alert:[{type:t.Input}]};var f=function(){};f.decorators=[{type:t.NgModule,args:[{imports:[e.CommonModule],declarations:[d],exports:[d]}]}];var g=function(){function n(){}return n.prototype.backgroundImage=function(){return this.image?"url("+this.image+")":""},n}();g.decorators=[{type:t.Component,args:[{selector:"ui-avatar",template:'\n    <span class="avatar avatar-{{size}}" [style.background-image]="backgroundImage()">\n      {{text}}\n      <span *ngIf="status" class="avatar-status bg-{{status}}"></span>\n    </span>\n  ',styles:[]}]}],g.propDecorators={image:[{type:t.Input}],size:[{type:t.Input}],status:[{type:t.Input}],text:[{type:t.Input}]};var m=function(){};m.decorators=[{type:t.NgModule,args:[{imports:[e.CommonModule],declarations:[g],exports:[g]}]}];var v=function(){};v.decorators=[{type:t.Component,args:[{selector:"ui-badge",template:'\n    <span class="badge badge-{{color}}">\n      {{label}}\n    </span>\n  '}]}],v.propDecorators={label:[{type:t.Input}],color:[{type:t.Input}]};var y=function(){};y.decorators=[{type:t.NgModule,args:[{imports:[e.CommonModule],declarations:[v],exports:[v]}]}];var b=function(){function e(){this.config={},this.disabled=!1,this.event="SUBMIT",this.action=new t.EventEmitter}return e.prototype.ngOnInit=function(){var o=this,n=e.copyProps.filter(function(n){return"undefined"!=typeof o[n]}).reduce(function(n,e){return Object.assign({},n,((t={})[e]=o[e],t));var t},{});this.config=Object.assign({},n,this.config)},Object.defineProperty(e.prototype,"_size",{get:function(){return this.config.size||""},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"_label",{get:function(){return this.config.label||null},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"_icon",{get:function(){return this.config.icon||null},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"_color",{get:function(){return this.config.color||"primary"},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"_event",{get:function(){return this.config.event||"SUBMIT"},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"_type",{get:function(){return this.config.type||"button"},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"_payload",{get:function(){return this.config.payload||null},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"_classNames",{get:function(){var n="btn-"+this._size,e="btn-"+this._color;return this.config.classNames||"btn "+n+" "+e},enumerable:!0,configurable:!0}),e.prototype.handleClick=function(n){this.action.emit({type:this._event,payload:Object.assign({},this._payload),$event:n})},e}();b.copyProps=["color","size","type","label","icon","disabled","event","payload"],b.decorators=[{type:t.Component,args:[{selector:"ui-button",template:'\n    <button [type]="_type"\n            class="{{_classNames}}"\n            [disabled]="disabled"\n            (click)="handleClick($event)">\n      <i *ngIf="_icon" class="{{_icon}}" [class.mr-1]="_label"></i>\n      <ng-container *ngIf="_label">\n        {{_label}}\n      </ng-container>\n      <ng-content></ng-content>\n    </button>\n  '}]}],b.propDecorators={config:[{type:t.Input}],color:[{type:t.Input}],size:[{type:t.Input}],type:[{type:t.Input}],label:[{type:t.Input}],icon:[{type:t.Input}],disabled:[{type:t.Input}],event:[{type:t.Input}],payload:[{type:t.Input}],action:[{type:t.Output}]};var h=function(){this.config=[],this.disabled=!1,this.action=new t.EventEmitter};h.decorators=[{type:t.Component,args:[{selector:"ui-buttons",template:'\n    <div>\n      <ng-container *ngFor="let button of config">\n        <ui-button [disabled]="disabled"\n                   [config]="button"\n                   [payload]="payload"\n                   (action)="action.emit($event)">\n        </ui-button>\n      </ng-container>\n    </div>\n  '}]}],h.propDecorators={config:[{type:t.Input}],disabled:[{type:t.Input}],payload:[{type:t.Input}],action:[{type:t.Output}]};var k=function(){};k.decorators=[{type:t.NgModule,args:[{imports:[e.CommonModule],declarations:[b,h],exports:[b,h]}]}];var I=function(){function n(){this.allowCollapse=!0,this.allowFullScreen=!1,this.allowHide=!0,this.collapsed=!1,this.fullScreen=!1,this.hidden=!1,this.loader=!1,this.statusLeft=!1,this.action=new t.EventEmitter}return n.prototype.collapse=function(n){n.preventDefault(),this.collapsed=!this.collapsed},n.prototype.hide=function(n){n.preventDefault(),this.hidden=!this.hidden},n.prototype.goFullScreen=function(n){n.preventDefault(),this.fullScreen=!this.fullScreen,this.collapsed&&(this.collapsed=!1)},n}();I.decorators=[{type:t.Component,args:[{selector:"ui-card",template:'\n    <div class="card" [class.hide]="hidden" [class.card-fullscreen]="fullScreen">\n      <div *ngIf="status" class="card-status bg-{{ status }}" [class.card-status-left]="statusLeft"></div>\n      <div class="card-header">\n        <h3 class="card-title">\n          <i *ngIf="icon" class="{{ icon }}"></i>\n          {{header}}\n        </h3>\n        <div class="card-options">\n          <form action="" *ngIf="search">\n            <div class="input-group">\n              <input type="text"\n                     class="form-control form-control-sm" [placeholder]="search.placeholder" name="s" [(ngModel)]="search.value">\n              <span class="input-group-btn ml-2">\n                <button class="btn btn-sm btn-default" type="submit" (click)="action.emit( { type: \'SEARCH\', payload: search.value } )">\n                  <span class="fe fe-search"></span>\n                </button>\n              </span>\n            </div>\n          </form>\n          <ng-container *ngIf="!buttons">\n            <a class="card-options-collapse" data-toggle="card-collapse" href="#"\n               [class.hide]="!allowCollapse"\n               (click)="collapse($event)">\n              <i class="fe" [class.fe-chevron-down]="collapsed" [class.fe-chevron-up]="!collapsed"></i>\n            </a>\n            <a class="card-options-fullscreen" data-toggle="card-fullscreen" href="#"\n               [class.hide]="!allowFullScreen"\n               (click)="goFullScreen($event)">\n              <i class="fe fe-maximize"></i>\n            </a>\n            <a class="card-options-remove" data-toggle="card-remove" href="#"\n               [class.hide]="!allowHide"\n               (click)="hide($event)">\n              <i class="fe fe-x"></i>\n            </a>\n          </ng-container>\n          <ng-container *ngIf="buttons">\n            <ng-container *ngFor="let button of buttons">\n              <button class="btn btn-secondary btn-sm ml-2"\n                      *ngIf="button.type === \'button\'"\n                      (click)="action.emit( { type: button.action, payload: button.payload || \'\' })">\n                <i *ngIf="button.icon" [class]="button.icon"></i>\n                {{ button.text }}\n              </button>\n              <label class="custom-switch m-0"\n                     *ngIf="button.type === \'switch\'">\n                <input type="checkbox" [value]="button.checked" class="custom-switch-input"\n                       (change)="action.emit( { type: \'SWITCH\', payload: button.checked } )"\n                       [checked]="button.checked || false">\n                <span class="custom-switch-indicator"></span>\n              </label>\n            </ng-container>\n          </ng-container>\n        </div>\n      </div>\n      <div [class.hide]="collapsed" [class.show]="!collapsed">\n        <ng-container *ngIf="alert">\n          <div class="card-alert alert alert-{{alert.type}} mb-0">\n            {{alert.text}}\n          </div>\n        </ng-container>\n        <ng-content></ng-content>\n        <div class="card-footer" *ngIf="footer">{{footer}}</div>\n      </div>\n    </div>\n  ',styles:["\n    .hide {\n      display: none;\n    }\n    .show {\n      display: block;\n    }\n  "]}]}],I.propDecorators={alert:[{type:t.Input}],allowCollapse:[{type:t.Input}],allowFullScreen:[{type:t.Input}],allowHide:[{type:t.Input}],buttons:[{type:t.Input}],collapsed:[{type:t.Input}],footer:[{type:t.Input}],fullScreen:[{type:t.Input}],header:[{type:t.Input}],hidden:[{type:t.Input}],icon:[{type:t.Input}],loader:[{type:t.Input}],search:[{type:t.Input}],status:[{type:t.Input}],statusLeft:[{type:t.Input}],action:[{type:t.Output}]};var w=function(){this.loader=!1};w.decorators=[{type:t.Component,args:[{selector:"ui-card-body",template:'\n    <div class="card-body">\n      <ng-container *ngIf="loader">\n        <div class="dimmer active">\n          <div class="loader"></div>\n          <div class="dimmer-content">\n            <ng-content></ng-content>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngIf="!loader">\n        <ng-content></ng-content>\n      </ng-container>\n    </div>\n  ',styles:[]}]}],w.propDecorators={loader:[{type:t.Input}]};var M=function(){};M.decorators=[{type:t.NgModule,args:[{imports:[e.CommonModule,o.FormsModule],declarations:[I,w],exports:[I,w]}]}];var x=function(){},C=function(){};C.decorators=[{type:t.Component,args:[{selector:"ui-link-content",template:'\n    <ui-badge *ngIf="link.badge" class="float-right" [color]="link.badge.color" [label]="link.badge.label">\n    </ui-badge>\n    <i *ngIf="link.icon" [class]="link.icon"></i>\n    <span *ngIf="link.label"  [class]="link.labelClass">{{ link.label }}</span>\n  '}]}],C.propDecorators={link:[{type:t.Input}]};var N=function(){this.link={}};N.decorators=[{type:t.Component,args:[{selector:"ui-link",template:'\n    <ng-container *ngIf="link && link.external; else internal">\n      <a [href]="link.link" [class]="link.linkClass" [target]="link.target || \'_self\' ">\n        <ui-link-content [link]="link"></ui-link-content>\n      </a>\n    </ng-container>\n    <ng-template #internal>\n      <a *ngIf="link" [routerLink]="link.link" [class]="link.linkClass">\n        <ui-link-content [link]="link"></ui-link-content>\n      </a>\n    </ng-template>\n  '}]}],N.propDecorators={link:[{type:t.Input}]};var S=function(){};S.decorators=[{type:t.Component,args:[{selector:"ui-links",template:'\n    <ng-container *ngFor="let link of links">\n      <ui-link [link]="link"></ui-link>\n    </ng-container>\n  '}]}],S.propDecorators={links:[{type:t.Input}]};var O=function(){};O.decorators=[{type:t.NgModule,args:[{imports:[e.CommonModule,i.RouterModule,y],declarations:[N,C,S],exports:[N,C,S]}]}];var j=function(){},T=function(){},D=function(){},P=function(){},L=function(){function n(){this.configSubject=new a.ReplaySubject,this.config={appLink:"/",appLogo:"assets/brand/tabler.svg",appName:"Tabler for Angular"},this.config$=this.configSubject.asObservable(),this.updateLayout()}return Object.defineProperty(n.prototype,"appLink",{set:function(n){this.config.appLink=n},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"appLogo",{set:function(n){this.config.appLogo=n},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"appName",{set:function(n){this.config.appName=n},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"headerNav",{set:function(n){this.config.headerNav=n},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"headerSubNav",{set:function(n){this.config.headerSubNav=n},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"profile",{set:function(n){this.config.profile=n},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"profileNav",{set:function(n){this.config.profileNav=n},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"notifications",{set:function(n){this.config.notifications=n},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"footerNav",{set:function(n){this.config.footerNav=n},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"footerText",{set:function(n){this.config.footerText=n},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"footerSubNav",{set:function(n){this.config.footerSubNav=n},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"footerSubText",{set:function(n){this.config.footerSubText=n},enumerable:!0,configurable:!0}),n.prototype.updateLayout=function(n){void 0===n&&(n={}),this.config=Object.assign({},this.config,n),this.configSubject.next(this.config)},n}();L.decorators=[{type:t.Injectable}],L.ctorParameters=function(){return[]};var _=function(){};_.decorators=[{type:t.Component,args:[{selector:"ui-footer",template:'\n    <ng-container *ngIf="config.footerSubNav || config.footerSubText" >\n      <ui-footer-links [config]="config"></ui-footer-links>\n    </ng-container>\n    <ng-container *ngIf="config.footerNav || config.footerText" >\n      <footer class="footer">\n        <div class="container">\n          <div class="row align-items-center flex-row-reverse">\n            <div class="col-auto ml-auto">\n              <div class="row align-items-center">\n                <div class="col-auto">\n                  <ul class="list-inline list-inline-dots mb-0">\n                    <ng-container *ngFor="let link of config?.footerNav">\n                      <li class="list-inline-item">\n                        <a [href]="link.link" [class]="link.class" [target]="link.target || \'_self\'">\n                          <i [class]="link.icon"></i>\n                          {{ link.label }}\n                        </a>\n                      </li>\n                    </ng-container>\n                  </ul>\n                </div>\n              </div>\n            </div>\n            <div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center" [innerHtml]="config?.footerText">\n            </div>\n          </div>\n        </div>\n      </footer>\n    </ng-container>\n  '}]}],_.propDecorators={config:[{type:t.Input}]};var F=function(){};F.decorators=[{type:t.Component,args:[{selector:"ui-footer-links",template:'\n    <div class="footer">\n      <div class="container">\n        <div class="row">\n          <div class="col-lg-8">\n            <div class="row">\n              <div class="col-6 col-md-3" *ngFor="let links of config.footerSubNav">\n                <ul class="list-unstyled mb-0">\n                  <li *ngFor="let link of links">\n                    <ui-link [link]="link"></ui-link>\n                  </li>\n                </ul>\n              </div>\n            </div>\n          </div>\n          <div class="col-lg-4 mt-4 mt-lg-0" [innerHtml]="config.footerSubText"></div>\n        </div>\n      </div>\n    </div>\n  '}]}],F.propDecorators={config:[{type:t.Input}]};var R=function(){};R.decorators=[{type:t.NgModule,args:[{imports:[e.CommonModule,O],declarations:[_,F],exports:[_]}]}];var A=function(){function n(n,e){this.changeDetectorRef=n,this.ngZone=e}return n.prototype.transform=function(n){var e=this;this.removeTimer();var t=new Date(n),o=new Date,i=Math.round(Math.abs((o.getTime()-t.getTime())/1e3)),a=Number.isNaN(i)?1e3:1e3*this.getSecondsUntilUpdate(i);this.timer=this.ngZone.runOutsideAngular(function(){return"undefined"!=typeof window?window.setTimeout(function(){e.ngZone.run(function(){return e.changeDetectorRef.markForCheck()})},a):null});var r=Math.round(Math.abs(i/60)),l=Math.round(Math.abs(r/60)),s=Math.round(Math.abs(l/24)),c=Math.round(Math.abs(s/30.416)),p=Math.round(Math.abs(s/365));return Number.isNaN(i)?"":i<=45?"a few seconds ago":i<=90?"a minute ago":r<=45?r+" minutes ago":r<=90?"an hour ago":l<=22?l+" hours ago":l<=36?"a day ago":s<=25?s+" days ago":s<=45?"a month ago":s<=345?c+" months ago":s<=545?"a year ago":p+" years ago"},n.prototype.ngOnDestroy=function(){this.removeTimer()},n.prototype.removeTimer=function(){this.timer&&(window.clearTimeout(this.timer),this.timer=null)},n.prototype.getSecondsUntilUpdate=function(n){return n<60?2:n<3600?30:n<86400?300:3600},n}();A.decorators=[{type:t.Pipe,args:[{name:"timeAgo",pure:!1}]}],A.ctorParameters=function(){return[{type:t.ChangeDetectorRef},{type:t.NgZone}]};var E=function(){function n(){}return n.prototype.handleAction=function(n){console.log("Header Event"),console.log(n)},n}();E.decorators=[{type:t.Component,args:[{selector:"ui-header",template:'\n    <div class="header">\n      <div class="container">\n        <div class="d-flex">\n          <a class="navbar-brand" [routerLink]="config.appLink">\n            <img *ngIf="config.appLogo" [attr.src]="config.appLogo" class="navbar-brand-img">\n            <span *ngIf="config.appName" class="d-none d-md-inline">\n              {{ config.appName }}\n            </span>\n          </a>\n          <div class="ml-auto d-flex order-lg-2">\n            <ui-links [links]="config.headerSubNav" class="nav-item"></ui-links>\n            <ui-header-notifications [notifications]="config.notifications"\n                                     (action)="handleAction($event)"></ui-header-notifications>\n            <ui-header-profile [profile]="config.profile"\n                               [links]="config.profileNav"></ui-header-profile>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class="header-nav" *ngIf="config.headerNav">\n      <div class="container">\n        <div class="row align-items-center">\n          <div class="col">\n            <ui-menu [links]="config.headerNav"></ui-menu>\n          </div>\n        </div>\n      </div>\n    </div>\n  '}]}],E.propDecorators={config:[{type:t.Input}]};var U=function(){function n(){this.action=new t.EventEmitter}return n.prototype.onClick=function(n){n.preventDefault(),this.action.emit({type:"NOTIFICATION_CLICK",payload:this.notification})},n}();U.decorators=[{type:t.Component,args:[{selector:"ui-header-notification-item",template:'\n    <a href="#" class="dropdown-item d-flex" (click)="onClick($event)">\n      <ui-avatar [text]="notification.avatarText" class="mr-3 align-self-center"></ui-avatar>\n      <div>\n        <strong>{{ notification.from }}</strong> {{ notification.text }}\n        <div class="small text-muted">\n          {{ notification.date | timeAgo }}\n        </div>\n      </div>\n    </a>\n  ',styles:[]}]}],U.propDecorators={notification:[{type:t.Input}],action:[{type:t.Output}]};var $=function(){function n(){this.notifications=[],this.actionText="Mark all as read",this.actionType="MARK_ALL_READ",this.action=new t.EventEmitter}return n.prototype.onClick=function(n){n.preventDefault(),this.action.emit({type:this.actionType})},n}();$.decorators=[{type:t.Component,args:[{selector:"ui-header-notifications",template:'\n    <div class="dropdown d-none d-md-flex py-2" dropdown *ngIf="notifications">\n      <a dropdownToggle class="nav-link icon" data-toggle="dropdown">\n        <i class="fe fe-bell"></i>\n        <span class="nav-unread"></span>\n      </a>\n      <div *dropdownMenu class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">\n        <ui-header-notification-item *ngFor="let notification of notifications"\n                                     [notification]="notification"\n                                     (action)="action.emit($event)">\n        </ui-header-notification-item>\n        <div class="dropdown-divider"></div>\n        <a href="#" class="dropdown-item text-center text-muted-dark"\n           (click)="onClick($event)">\n          {{ actionText }}\n        </a>\n      </div>\n    </div>\n  ',styles:[]}]}],$.propDecorators={notifications:[{type:t.Input}],actionText:[{type:t.Input}],actionType:[{type:t.Input}],action:[{type:t.Output}]};var q=function(){};q.decorators=[{type:t.Component,args:[{selector:"ui-header-profile",template:'\n    <div class="dropdown" dropdown *ngIf="profile">\n      <a class="nav-link pr-0" data-toggle="dropdown" dropdownToggle>\n        <ui-avatar [image]="profile.avatar" [text]="profile.avatarText"></ui-avatar>\n        <span class="ml-2 d-none d-lg-block">\n          <span class="text-default">{{ profile.name }}</span>\n          <small class="text-muted d-block mt-1">\n            {{ profile.description || profile.title || profile.email }}\n          </small>\n        </span>\n      </a>\n      <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow" *dropdownMenu>\n        <ng-container *ngFor="let link of links">\n          <div *ngIf="link.divider; else linkEl" class="dropdown-divider"></div>\n          <ng-template #linkEl>\n            <ui-link [link]="link"></ui-link>\n          </ng-template>\n        </ng-container>\n      </div>\n    </div>\n  '}]}],q.propDecorators={profile:[{type:t.Input}],links:[{type:t.Input}]};var B=function(){this.links=[]};B.decorators=[{type:t.Component,args:[{selector:"ui-menu",template:'\n    <ul class="nav nav-tabs" style="white-space: nowrap;">\n      <ng-container *ngFor="let item of links">\n        <li class="nav-item d-inline-block">\n          <a href="#" [routerLink]="item.link" class="nav-link" routerLinkActive="active">\n            <i class="{{ item.icon }}" *ngIf="item.icon"></i>\n            {{item.label}}\n          </a>\n          <div class="nav-submenu nav" *ngIf="item.children">\n            <ng-container *ngFor="let sub of item.children">\n              <a href="#" class="nav-item" [routerLink]="sub.link" routerLinkActive="active">\n                <i class="{{ sub.icon }}" *ngIf="sub.icon"></i>\n                {{sub.label}}\n              </a>\n            </ng-container>\n          </div>\n        </li>\n      </ng-container>\n    </ul>\n  ',styles:[]}]}],B.propDecorators={links:[{type:t.Input}]};var H=function(){};H.decorators=[{type:t.NgModule,args:[{imports:[e.CommonModule,i.RouterModule,m,y,r.BsDropdownModule,O],declarations:[A,E,$,U,q,B],exports:[E]}]}];var z=function(n){this.ui=n};z.decorators=[{type:t.Component,args:[{selector:"ui-layout",template:'\n    <div class="page" *ngIf="ui.config$ | async as config; else loading">\n      <div class="page-main">\n        <ui-header [config]="config"></ui-header>\n        <div class="page-content">\n          <router-outlet></router-outlet>\n        </div>\n        <ui-footer [config]="config"></ui-footer>\n      </div>\n    </div>\n    <ng-template #loading>\n      Loading...\n    </ng-template>\n  '}]}],z.ctorParameters=function(){return[{type:L}]};var Z=function(){};Z.decorators=[{type:t.Component,args:[{selector:"ui-layout-base",template:'\n    <div class="page">\n      <router-outlet></router-outlet>\n    </div>\n  '}]}];var K=function(){};K.decorators=[{type:t.NgModule,args:[{imports:[e.CommonModule,i.RouterModule,H,R],declarations:[z,Z],exports:[z,Z]}]}];var W=function(){};W.decorators=[{type:t.Component,args:[{selector:"ui-page",template:'\n     <div class="container">\n      <ng-content></ng-content>\n    </div>\n  '}]}];var G=function(){this.badgeStyle="default",this.header=!0};G.decorators=[{type:t.Component,args:[{selector:"ui-page-title",template:'\n    <div [class.page-header]="header">\n      <h1 class="page-title">\n        <i *ngIf="icon" class="{{ icon }} page-title-icon m-3"></i>\n        {{ title }}\n        <small *ngIf="badge" class="badge badge-{{badgeStyle}} m-3">\n          {{badge}}\n        </small>\n      </h1>\n      <div *ngIf="subTitle" class="page-subtitle">\n        {{subTitle}}\n      </div>\n      <div class="page-options">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  ',styles:[]}]}],G.propDecorators={badge:[{type:t.Input}],badgeStyle:[{type:t.Input}],header:[{type:t.Input}],icon:[{type:t.Input}],title:[{type:t.Input}],subTitle:[{type:t.Input}]};var J=function(){};J.decorators=[{type:t.NgModule,args:[{imports:[e.CommonModule],declarations:[W,G],exports:[W,G]}]}];var Q=[f,m,y,k,M,R,H,K,O,J],V=u(Q),X=function(){};X.decorators=[{type:t.NgModule,args:[{imports:u([e.CommonModule,i.RouterModule,o.FormsModule,o.ReactiveFormsModule,s.NgPipesModule,c.BsDropdownModule.forRoot()],Q),declarations:[],exports:u(V,[s.NgPipesModule]),providers:[l.UiService]}]}],n.UiModule=X,n.UiService=L,n.UiProfile=D,n.UiNotification=j,n.UiLayout=P,n.UiBadge=T,n.AlertModule=f,n.AvatarModule=m,n.BadgeModule=y,n.ButtonModule=k,n.CardModule=M,n.FooterModule=R,n.HeaderModule=H,n.LayoutModule=K,n.LayoutComponent=z,n.LayoutBaseComponent=Z,n.LinkModule=O,n.UiLink=x,n.PageModule=J,n.ɵa=f,n.ɵb=m,n.ɵc=y,n.ɵd=k,n.ɵe=M,n.ɵf=R,n.ɵg=H,n.ɵh=K,n.ɵi=O,n.ɵj=J,Object.defineProperty(n,"__esModule",{value:!0})});
 //# sourceMappingURL=tabler-angular-ui.umd.min.js.map

esm2015/tabler-angular-ui.js

@@ -1,11 +0,10 @@
-import { Component, Input, NgModule, Pipe, NgZone, ChangeDetectorRef, EventEmitter, Output } from '@angular/core';
-import { ActivatedRoute, RouterModule } from '@angular/router';
-import { map } from 'rxjs/operators';
+import { Component, Input, NgModule, EventEmitter, Output, Injectable, Pipe, NgZone, ChangeDetectorRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { NgxChartsModule } from '@swimlane/ngx-charts';
-import { ChartsModule } from 'ng2-charts';
+import { RouterModule } from '@angular/router';
+import { ReplaySubject } from 'rxjs/ReplaySubject';
+import { BsDropdownModule } from 'ngx-bootstrap';
+import { UiService } from '@tabler/angular-ui/src/services/ui.service';
 import { NgPipesModule } from 'angular-pipes';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
-import { HighlightModule } from 'ngx-highlightjs';
+import { BsDropdownModule as BsDropdownModule$1 } from 'ngx-bootstrap/dropdown';
 
@@ -16,69 +15,2 @@ /**
  */
-class LayoutComponent {
-    /**
-     * @param {?} route
-     */
-    constructor(route) {
-        this.route = route;
-    }
-    /**
-     * @return {?}
-     */
-    ngOnInit() {
-        this.route.data
-            .pipe(map(data => data["config"]))
-            .subscribe(config => this.config = config);
-    }
-}
-LayoutComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ui-layout',
-                template: `
-    <div class="page">
-      <div class="page-main">
-        <ui-header [config]="config?.header"></ui-header>
-        <div class="page-content">
-          <router-outlet></router-outlet>
-        </div>
-        <ui-footer-links [config]="config?.subfooter"></ui-footer-links>
-        <ui-footer [config]="config?.footer"></ui-footer>
-      </div>
-    </div>
-  `,
-            },] },
-];
-/** @nocollapse */
-LayoutComponent.ctorParameters = () => [
-    { type: ActivatedRoute, },
-];
-LayoutComponent.propDecorators = {
-    "config": [{ type: Input },],
-};
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes} checked by tsc
- */
-class LayoutBaseComponent {
-}
-LayoutBaseComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ui-layout-base',
-                template: `
-    <div class="page">
-      <router-outlet></router-outlet>
-    </div>
-  `,
-            },] },
-];
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes} checked by tsc
- */
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes} checked by tsc
- */
 class AlertComponent {
@@ -136,187 +68,28 @@ /**
  */
-class TimeAgoPipe {
+class AvatarComponent {
     /**
-     * @param {?} changeDetectorRef
-     * @param {?} ngZone
-     */
-    constructor(changeDetectorRef, ngZone) {
-        this.changeDetectorRef = changeDetectorRef;
-        this.ngZone = ngZone;
-    }
-    /**
-     * @param {?} value
      * @return {?}
      */
-    transform(value) {
-        this.removeTimer();
-        const /** @type {?} */ d = new Date(value);
-        const /** @type {?} */ now = new Date();
-        const /** @type {?} */ seconds = Math.round(Math.abs((now.getTime() - d.getTime()) / 1000));
-        const /** @type {?} */ timeToUpdate = (Number.isNaN(seconds)) ? 1000 : this.getSecondsUntilUpdate(seconds) * 1000;
-        this.timer = this.ngZone.runOutsideAngular(() => {
-            if (typeof window !== 'undefined') {
-                return window.setTimeout(() => {
-                    this.ngZone.run(() => this.changeDetectorRef.markForCheck());
-                }, timeToUpdate);
-            }
-            return null;
-        });
-        const /** @type {?} */ minutes = Math.round(Math.abs(seconds / 60));
-        const /** @type {?} */ hours = Math.round(Math.abs(minutes / 60));
-        const /** @type {?} */ days = Math.round(Math.abs(hours / 24));
-        const /** @type {?} */ months = Math.round(Math.abs(days / 30.416));
-        const /** @type {?} */ years = Math.round(Math.abs(days / 365));
-        if (Number.isNaN(seconds)) {
-            return '';
-        }
-        else if (seconds <= 45) {
-            return 'a few seconds ago';
-        }
-        else if (seconds <= 90) {
-            return 'a minute ago';
-        }
-        else if (minutes <= 45) {
-            return minutes + ' minutes ago';
-        }
-        else if (minutes <= 90) {
-            return 'an hour ago';
-        }
-        else if (hours <= 22) {
-            return hours + ' hours ago';
-        }
-        else if (hours <= 36) {
-            return 'a day ago';
-        }
-        else if (days <= 25) {
-            return days + ' days ago';
-        }
-        else if (days <= 45) {
-            return 'a month ago';
-        }
-        else if (days <= 345) {
-            return months + ' months ago';
-        }
-        else if (days <= 545) {
-            return 'a year ago';
-        }
-        else {
-            // (days > 545)
-            return years + ' years ago';
-        }
+    backgroundImage() {
+        return this.image ? `url(${this.image})` : '';
     }
-    /**
-     * @return {?}
-     */
-    ngOnDestroy() {
-        this.removeTimer();
-    }
-    /**
-     * @return {?}
-     */
-    removeTimer() {
-        if (this.timer) {
-            window.clearTimeout(this.timer);
-            this.timer = null;
-        }
-    }
-    /**
-     * @param {?} seconds
-     * @return {?}
-     */
-    getSecondsUntilUpdate(seconds) {
-        const /** @type {?} */ min = 60;
-        const /** @type {?} */ hr = min * 60;
-        const /** @type {?} */ day = hr * 24;
-        if (seconds < min) {
-            // less than 1 min, update every 2 secs
-            return 2;
-        }
-        else if (seconds < hr) {
-            // less than an hour, update every 30 secs
-            return 30;
-        }
-        else if (seconds < day) {
-            // less then a day, update every 5 mins
-            return 300;
-        }
-        else {
-            // update every hour
-            return 3600;
-        }
-    }
 }
-TimeAgoPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'timeAgo',
-                pure: false
-            },] },
-];
-/** @nocollapse */
-TimeAgoPipe.ctorParameters = () => [
-    { type: ChangeDetectorRef, },
-    { type: NgZone, },
-];
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes} checked by tsc
- */
-class HeaderComponent {
-    constructor() { }
-    /**
-     * @param {?} $event
-     * @return {?}
-     */
-    handleAction($event) {
-        console.log('Header Event');
-        console.log($event);
-    }
-}
-HeaderComponent.decorators = [
+AvatarComponent.decorators = [
     { type: Component, args: [{
-                selector: 'ui-header',
+                selector: 'ui-avatar',
                 template: `
-    <div class="header">
-      <div class="container">
-        <div class="d-flex">
-          <a class="navbar-brand" routerLink="/">
-            <img src="assets/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
-            <span class="d-none d-md-inline">
-              {{ config?.title }}
-            </span>
-          </a>
-          <div class="ml-auto d-flex order-lg-2">
-            <ui-header-links class="nav-item" [links]="config?.links"></ui-header-links>
-            <ui-header-notifications [notifications]="config?.notifications"
-                                     (action)="handleAction($event)"></ui-header-notifications>
-            <ui-header-profile [profile]="config?.user" [links]="config?.profileLinks"></ui-header-profile>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="header-nav">
-      <div class="container">
-        <div class="row align-items-center">
-          <div class="col">
-            <ui-menu [links]="config?.menu"></ui-menu>
-          </div>
-          <div class="col-3 ml-auto" *ngIf="config?.search">
-            <form class="input-icon">
-              <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
-              <div class="input-icon-addon">
-                <i class="fe fe-search"></i>
-              </div>
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
+    <span class="avatar avatar-{{size}}" [style.background-image]="backgroundImage()">
+      {{text}}
+      <span *ngIf="status" class="avatar-status bg-{{status}}"></span>
+    </span>
   `,
-                styles: []
+                styles: [],
             },] },
 ];
 /** @nocollapse */
-HeaderComponent.ctorParameters = () => [];
-HeaderComponent.propDecorators = {
-    "config": [{ type: Input },],
+AvatarComponent.propDecorators = {
+    "image": [{ type: Input },],
+    "size": [{ type: Input },],
+    "status": [{ type: Input },],
+    "text": [{ type: Input },],
 };
@@ -328,40 +101,11 @@
  */
-class FooterComponent {
+class AvatarModule {
 }
-FooterComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ui-footer',
-                template: `
-    <footer class="footer" *ngIf="config">
-      <div class="container">
-        <div class="row align-items-center flex-row-reverse">
-          <div class="col-auto ml-auto">
-            <div class="row align-items-center">
-              <div class="col-auto">
-                <ul class="list-inline list-inline-dots mb-0">
-                  <ng-container *ngFor="let link of config?.links">
-                    <li class="list-inline-item">
-                      <a [href]="link.link" [class]="link.class" [target]="link.target || '_self'">
-                        <i [class]="link.icon"></i>
-                        {{ link.label }}
-                      </a>
-                    </li>
-                  </ng-container>
-                </ul>
-              </div>
-            </div>
-          </div>
-          <div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center" [innerHtml]="config?.disclaimer">
-          </div>
-        </div>
-      </div>
-    </footer>
-  `,
-                styles: []
+AvatarModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule],
+                declarations: [AvatarComponent],
+                exports: [AvatarComponent],
             },] },
 ];
-/** @nocollapse */
-FooterComponent.propDecorators = {
-    "config": [{ type: Input },],
-};
 
@@ -372,37 +116,2 @@ /**
  */
-class MenuComponent {
-    constructor() {
-        this.links = [];
-    }
-}
-MenuComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ui-menu',
-                template: `
-    <ul class="nav nav-tabs" style="white-space: nowrap;">
-      <ng-container *ngFor="let item of links">
-        <li class="nav-item d-inline-block">
-          <a href="#" [routerLink]="item.url" class="nav-link" routerLinkActive="active">
-            <i class="{{ item.icon }}" *ngIf="item.icon"></i>
-            {{item.name}}
-          </a>
-          <div class="nav-submenu nav" *ngIf="item.subpages">
-            <ng-container *ngFor="let subitem of item.subpages">
-              <a href="#" class="nav-item" [routerLink]="subitem.url" routerLinkActive="active">
-                <i class="{{ subitem.icon }}" *ngIf="subitem.icon"></i>
-                {{subitem.name}}
-              </a>
-            </ng-container>
-          </div>
-        </li>
-      </ng-container>
-    </ul>
-  `,
-                styles: []
-            },] },
-];
-/** @nocollapse */
-MenuComponent.propDecorators = {
-    "links": [{ type: Input },],
-};
 
@@ -413,56 +122,18 @@ /**
  */
-class PageComponent {
+class BadgeComponent {
 }
-PageComponent.decorators = [
+BadgeComponent.decorators = [
     { type: Component, args: [{
-                selector: 'ui-page',
+                selector: 'ui-badge',
                 template: `
-     <div class="container">
-      <ng-content></ng-content>
-    </div>
+    <span class="badge badge-{{color}}">
+      {{label}}
+    </span>
   `,
             },] },
 ];
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes} checked by tsc
- */
-class PageTitleComponent {
-    constructor() {
-        this.badgeStyle = 'default';
-        this.header = true;
-    }
-}
-PageTitleComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ui-page-title',
-                template: `
-    <div [class.page-header]="header">
-      <h1 class="page-title">
-        <i *ngIf="icon" class="{{ icon }} page-title-icon m-3"></i>
-        {{ title }}
-        <small *ngIf="badge" class="badge badge-{{badgeStyle}} m-3">
-          {{badge}}
-        </small>
-      </h1>
-      <div *ngIf="subTitle" class="page-subtitle">
-        {{subTitle}}
-      </div>
-      <div class="page-options">
-        <ng-content></ng-content>
-      </div>
-    </div>
-  `,
-                styles: []
-            },] },
-];
 /** @nocollapse */
-PageTitleComponent.propDecorators = {
-    "badge": [{ type: Input },],
-    "badgeStyle": [{ type: Input },],
-    "header": [{ type: Input },],
-    "icon": [{ type: Input },],
-    "title": [{ type: Input },],
-    "subTitle": [{ type: Input },],
+BadgeComponent.propDecorators = {
+    "label": [{ type: Input },],
+    "color": [{ type: Input },],
 };
@@ -474,46 +145,11 @@
  */
-class DashboardChartComponent {
-    constructor() {
-        this.height = '10rem';
-        this.title = '';
-        this.data = [];
-        this.doughnut = false;
-        this.view = [230, 192];
-        this.showLegend = false;
-        this.showLabels = false;
-    }
+class BadgeModule {
 }
-DashboardChartComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ui-dashboard-chart',
-                template: `
-    <div class="card">
-      <div class="card-header">
-        <h3 class="card-title">{{ title }}</h3>
-      </div>
-      <div class="card-body">
-        <div [style.height]="height">
-          <ngx-charts-pie-chart
-            scheme="air"
-            [view]="view"
-            [results]="data"
-            [legend]="showLegend"
-            [labels]="showLabels"
-            [doughnut]="doughnut"
-            [gradient]="false">
-          </ngx-charts-pie-chart>
-        </div>
-      </div>
-    </div>
-  `,
-                styles: []
+BadgeModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule],
+                declarations: [BadgeComponent],
+                exports: [BadgeComponent],
             },] },
 ];
-/** @nocollapse */
-DashboardChartComponent.propDecorators = {
-    "height": [{ type: Input },],
-    "title": [{ type: Input },],
-    "data": [{ type: Input },],
-    "doughnut": [{ type: Input },],
-};
 
@@ -524,89 +160,2 @@ /**
  */
-class DashboardChartBgComponent {
-    constructor() {
-        this.datasets = [
-            {
-                data: [78, 81, 80, 45, 34, 12, 40],
-                label: 'Series A'
-            }
-        ];
-        this.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
-        this.options = {
-            maintainAspectRatio: false,
-            scales: {
-                xAxes: [{
-                        display: false
-                    }],
-                yAxes: [{
-                        display: false
-                    }]
-            },
-            elements: {
-                line: {
-                    borderWidth: 2
-                },
-                point: {
-                    radius: 0,
-                    hitRadius: 10,
-                    hoverRadius: 4,
-                },
-            },
-            legend: {
-                display: false
-            },
-            animation: {
-                duration: 0,
-            },
-        };
-        this.colors = [
-            {
-                backgroundColor: 'rgba(70,127,207,0.1)',
-                borderColor: 'rgba(70,127,207)',
-            }
-        ];
-    }
-}
-DashboardChartBgComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ui-dashboard-chart-bg',
-                template: `
-    <div class="card">
-      <div class="card-body">
-      <!--<div class="card-body">-->
-        <div class="card-value pull-right text-{{ color }}">{{ rate }}</div>
-        <h3 class="mb-1">{{ title}}</h3>
-        <div class="text-muted">{{ description }}</div>
-      </div>
-      <div class="card-img">
-          <canvas baseChart
-                  class="pt-5"
-                  height="160"
-                  [datasets]="datasets"
-                  [labels]="labels"
-                  [options]="options"
-                  [colors]="colors"
-                  chartType="line"></canvas>
-        </div>
-    </div>
-  `,
-                styles: [`
-    .card-body {
-      background-color: transparent;
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      padding: 1.25rem;
-    }
-  `]
-            },] },
-];
-/** @nocollapse */
-DashboardChartBgComponent.propDecorators = {
-    "rate": [{ type: Input },],
-    "color": [{ type: Input },],
-    "title": [{ type: Input },],
-    "description": [{ type: Input },],
-};
 
@@ -617,33 +166,113 @@ /**
  */
-class DashboardDigitComponent {
+class ButtonComponent {
     constructor() {
-        this.color = 'blue';
-        this.title = 'Today Expenses';
-        this.digit = '$8500';
-        this.width = '54%';
+        this.config = {};
+        this.disabled = false;
+        this.event = 'SUBMIT';
+        this.action = new EventEmitter();
     }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+        // Get the values from the inputs and merge them with the config object.
+        const /** @type {?} */ inputMap = ButtonComponent.copyProps
+            .filter(item => typeof this[item] !== 'undefined')
+            .reduce((a, c) => (Object.assign({}, a, { [c]: this[c] })), {});
+        // The config object takes precedence
+        this.config = Object.assign({}, inputMap, this.config);
+    }
+    /**
+     * @return {?}
+     */
+    get _size() {
+        return this.config.size || '';
+    }
+    /**
+     * @return {?}
+     */
+    get _label() {
+        return this.config.label || null;
+    }
+    /**
+     * @return {?}
+     */
+    get _icon() {
+        return this.config.icon || null;
+    }
+    /**
+     * @return {?}
+     */
+    get _color() {
+        return this.config.color || 'primary';
+    }
+    /**
+     * @return {?}
+     */
+    get _event() {
+        return this.config.event || 'SUBMIT';
+    }
+    /**
+     * @return {?}
+     */
+    get _type() {
+        return this.config.type || 'button';
+    }
+    /**
+     * @return {?}
+     */
+    get _payload() {
+        return this.config.payload || null;
+    }
+    /**
+     * @return {?}
+     */
+    get _classNames() {
+        const /** @type {?} */ base = 'btn';
+        const /** @type {?} */ size = `${base}-${this._size}`;
+        const /** @type {?} */ color = `${base}-${this._color}`;
+        return this.config.classNames || `${base} ${size} ${color}`;
+    }
+    /**
+     * @param {?} $event
+     * @return {?}
+     */
+    handleClick($event) {
+        this.action.emit({
+            type: this._event,
+            payload: Object.assign({}, this._payload),
+            $event,
+        });
+    }
 }
-DashboardDigitComponent.decorators = [
+ButtonComponent.copyProps = ['color', 'size', 'type', 'label', 'icon', 'disabled', 'event', 'payload'];
+ButtonComponent.decorators = [
     { type: Component, args: [{
-                selector: 'ui-dashboard-digit',
+                selector: 'ui-button',
                 template: `
-    <div class="card">
-      <div class="card-body text-center">
-        <div class="h5">{{ title }}</div>
-        <div class="display-4 font-weight-bold mb-4">{{ digit }}</div>
-        <div class="progress progress-sm">
-          <div class="progress-bar bg-{{ color }}" [style.width]="width"></div>
-        </div>
-      </div>
-    </div>
+    <button [type]="_type"
+            class="{{_classNames}}"
+            [disabled]="disabled"
+            (click)="handleClick($event)">
+      <i *ngIf="_icon" class="{{_icon}}" [class.mr-1]="_label"></i>
+      <ng-container *ngIf="_label">
+        {{_label}}
+      </ng-container>
+      <ng-content></ng-content>
+    </button>
   `,
-                styles: []
             },] },
 ];
 /** @nocollapse */
-DashboardDigitComponent.propDecorators = {
+ButtonComponent.propDecorators = {
+    "config": [{ type: Input },],
     "color": [{ type: Input },],
-    "title": [{ type: Input },],
-    "digit": [{ type: Input },],
-    "width": [{ type: Input },],
+    "size": [{ type: Input },],
+    "type": [{ type: Input },],
+    "label": [{ type: Input },],
+    "icon": [{ type: Input },],
+    "disabled": [{ type: Input },],
+    "event": [{ type: Input },],
+    "payload": [{ type: Input },],
+    "action": [{ type: Output },],
 };
@@ -655,37 +284,31 @@
  */
-class DashboardIconBoxComponent {
+class ButtonsComponent {
     constructor() {
-        this.color = 'red';
-        this.icon = 'fa fa-dollar';
-        this.value = '16';
-        this.description = 'Sales';
-        this.subtitle = '6 waiting payments';
+        this.config = [];
+        this.disabled = false;
+        this.action = new EventEmitter();
     }
 }
-DashboardIconBoxComponent.decorators = [
+ButtonsComponent.decorators = [
     { type: Component, args: [{
-                selector: 'ui-dashboard-icon-box',
+                selector: 'ui-buttons',
                 template: `
-    <div class="card p-3">
-      <div class="d-flex align-items-center">
-		<span class="stamp stamp-md bg-{{ color }} mr-3">
-			<i class="{{ icon }}"></i>
-		</span>
-        <div>
-          <h4 class="m-0"><a href="javascript:void(0)">{{ value }} <small>{{ description }}</small></a></h4>
-          <small class="text-muted">{{ subtitle }}</small>
-        </div>
-      </div>
+    <div>
+      <ng-container *ngFor="let button of config">
+        <ui-button [disabled]="disabled"
+                   [config]="button"
+                   [payload]="payload"
+                   (action)="action.emit($event)">
+        </ui-button>
+      </ng-container>
     </div>
   `,
-                styles: []
             },] },
 ];
 /** @nocollapse */
-DashboardIconBoxComponent.propDecorators = {
-    "color": [{ type: Input },],
-    "icon": [{ type: Input },],
-    "value": [{ type: Input },],
-    "description": [{ type: Input },],
-    "subtitle": [{ type: Input },],
+ButtonsComponent.propDecorators = {
+    "config": [{ type: Input },],
+    "disabled": [{ type: Input },],
+    "payload": [{ type: Input },],
+    "action": [{ type: Output },],
 };
@@ -697,37 +320,11 @@
  */
-class DashboardStatsComponent {
-    /**
-     * @return {?}
-     */
-    isPositive() {
-        return this.percentage > 0;
-    }
+class ButtonModule {
 }
-DashboardStatsComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ui-dashboard-stats',
-                template: `
-    <div class="card">
-      <div class="card-body p-3 text-center">
-        <div class="text-right" [class.text-green]="isPositive()" [class.text-red]="!isPositive()" >
-          <span *ngIf="percentage">
-            {{percentage}}%
-            <i *ngIf="isPositive()" class="fe fe-chevron-up"></i>
-            <i *ngIf="!isPositive()" class="fe fe-chevron-down"></i>
-          </span>
-        </div>
-        <div class="h1 m-0">{{ number }}</div>
-        <div class="text-muted mb-4">{{ title }}</div>
-      </div>
-    </div>
-  `,
-                styles: []
+ButtonModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule],
+                declarations: [ButtonComponent, ButtonsComponent],
+                exports: [ButtonComponent, ButtonsComponent],
             },] },
 ];
-/** @nocollapse */
-DashboardStatsComponent.propDecorators = {
-    "number": [{ type: Input },],
-    "percentage": [{ type: Input },],
-    "title": [{ type: Input },],
-};
 
@@ -738,29 +335,2 @@ /**
  */
-class AvatarComponent {
-    /**
-     * @return {?}
-     */
-    backgroundImage() {
-        return this.image ? `url(${this.image})` : '';
-    }
-}
-AvatarComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ui-avatar',
-                template: `
-    <span class="avatar avatar-{{size}}" [style.background-image]="backgroundImage()">
-      {{text}}
-      <span *ngIf="status" class="avatar-status bg-{{status}}"></span>
-    </span>
-  `,
-                styles: []
-            },] },
-];
-/** @nocollapse */
-AvatarComponent.propDecorators = {
-    "image": [{ type: Input },],
-    "size": [{ type: Input },],
-    "status": [{ type: Input },],
-    "text": [{ type: Input },],
-};
 
@@ -881,3 +451,4 @@ /**
   `,
-                styles: [`
+                styles: [
+                    `
     .hide {
@@ -889,3 +460,4 @@ display: none;
     }
-  `]
+  `,
+                ],
             },] },
@@ -940,3 +512,3 @@ ];
   `,
-                styles: []
+                styles: [],
             },] },
@@ -953,2 +525,307 @@ ];
  */
+class CardModule {
+}
+CardModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule, FormsModule],
+                declarations: [CardComponent, CardBodyComponent],
+                exports: [CardComponent, CardBodyComponent],
+            },] },
+];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+class UiLink {
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+class LinkContentComponent {
+}
+LinkContentComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'ui-link-content',
+                template: `
+    <ui-badge *ngIf="link.badge" class="float-right" [color]="link.badge.color" [label]="link.badge.label">
+    </ui-badge>
+    <i *ngIf="link.icon" [class]="link.icon"></i>
+    <span *ngIf="link.label"  [class]="link.labelClass">{{ link.label }}</span>
+  `,
+            },] },
+];
+/** @nocollapse */
+LinkContentComponent.propDecorators = {
+    "link": [{ type: Input },],
+};
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+class LinkComponent {
+    constructor() {
+        this.link = {};
+    }
+}
+LinkComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'ui-link',
+                template: `
+    <ng-container *ngIf="link && link.external; else internal">
+      <a [href]="link.link" [class]="link.linkClass" [target]="link.target || '_self' ">
+        <ui-link-content [link]="link"></ui-link-content>
+      </a>
+    </ng-container>
+    <ng-template #internal>
+      <a *ngIf="link" [routerLink]="link.link" [class]="link.linkClass">
+        <ui-link-content [link]="link"></ui-link-content>
+      </a>
+    </ng-template>
+  `,
+            },] },
+];
+/** @nocollapse */
+LinkComponent.propDecorators = {
+    "link": [{ type: Input },],
+};
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+class LinksComponent {
+}
+LinksComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'ui-links',
+                template: `
+    <ng-container *ngFor="let link of links">
+      <ui-link [link]="link"></ui-link>
+    </ng-container>
+  `,
+            },] },
+];
+/** @nocollapse */
+LinksComponent.propDecorators = {
+    "links": [{ type: Input },],
+};
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+class LinkModule {
+}
+LinkModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule, RouterModule, BadgeModule
+                ],
+                declarations: [LinkComponent, LinkContentComponent, LinksComponent],
+                exports: [LinkComponent, LinkContentComponent, LinksComponent]
+            },] },
+];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+class UiNotification {
+}
+class UiBadge {
+}
+class UiProfile {
+}
+class UiLayout {
+}
+class UiService$1 {
+    constructor() {
+        this.configSubject = new ReplaySubject();
+        this.config = {
+            appLink: '/',
+            appLogo: 'assets/brand/tabler.svg',
+            appName: 'Tabler for Angular',
+        };
+        this.config$ = this.configSubject.asObservable();
+        this.updateLayout();
+    }
+    /**
+     * Define the link to Home
+     * @param {?} link
+     * @return {?}
+     */
+    set appLink(link) {
+        this.config.appLink = link;
+    }
+    /**
+     * Set the link to the app logo image
+     * @param {?} logo
+     * @return {?}
+     */
+    set appLogo(logo) {
+        this.config.appLogo = logo;
+    }
+    /**
+     * Set the app name
+     * @param {?} name
+     * @return {?}
+     */
+    set appName(name) {
+        this.config.appName = name;
+    }
+    /**
+     * Set the main navigation items
+     * @param {?} items
+     * @return {?}
+     */
+    set headerNav(items) {
+        this.config.headerNav = items;
+    }
+    /**
+     * Set the secondary navigation items
+     * @param {?} items
+     * @return {?}
+     */
+    set headerSubNav(items) {
+        this.config.headerSubNav = items;
+    }
+    /**
+     * Set the User Profile
+     * @param {?} profile
+     * @return {?}
+     */
+    set profile(profile) {
+        this.config.profile = profile;
+    }
+    /**
+     * Set the links in the user profile menu
+     * @param {?} items
+     * @return {?}
+     */
+    set profileNav(items) {
+        this.config.profileNav = items;
+    }
+    /**
+     * Set the notifications items dropdown
+     * @param {?} notifications
+     * @return {?}
+     */
+    set notifications(notifications) {
+        this.config.notifications = notifications;
+    }
+    /**
+     * Set the Navigation Items in the footer
+     * @param {?} items
+     * @return {?}
+     */
+    set footerNav(items) {
+        this.config.footerNav = items;
+    }
+    /**
+     * Set the footer text, good for a copyright/disclaimer message
+     * @param {?} text
+     * @return {?}
+     */
+    set footerText(text) {
+        this.config.footerText = text;
+    }
+    /**
+     * Set the footer sub navigation.
+     *
+     * Accepts an Array of UiLink Arrays
+     * @param {?} items
+     * @return {?}
+     */
+    set footerSubNav(items) {
+        this.config.footerSubNav = items;
+    }
+    /**
+     * Set the footer sub text
+     * @param {?} text
+     * @return {?}
+     */
+    set footerSubText(text) {
+        this.config.footerSubText = text;
+    }
+    /**
+     * Update the config by emitting values
+     * @param {?=} config
+     * @return {?}
+     */
+    updateLayout(config = {}) {
+        this.config = Object.assign({}, this.config, config);
+        this.configSubject.next(this.config);
+    }
+}
+UiService$1.decorators = [
+    { type: Injectable },
+];
+/** @nocollapse */
+UiService$1.ctorParameters = () => [];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+class FooterComponent {
+}
+FooterComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'ui-footer',
+                template: `
+    <ng-container *ngIf="config.footerSubNav || config.footerSubText" >
+      <ui-footer-links [config]="config"></ui-footer-links>
+    </ng-container>
+    <ng-container *ngIf="config.footerNav || config.footerText" >
+      <footer class="footer">
+        <div class="container">
+          <div class="row align-items-center flex-row-reverse">
+            <div class="col-auto ml-auto">
+              <div class="row align-items-center">
+                <div class="col-auto">
+                  <ul class="list-inline list-inline-dots mb-0">
+                    <ng-container *ngFor="let link of config?.footerNav">
+                      <li class="list-inline-item">
+                        <a [href]="link.link" [class]="link.class" [target]="link.target || '_self'">
+                          <i [class]="link.icon"></i>
+                          {{ link.label }}
+                        </a>
+                      </li>
+                    </ng-container>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center" [innerHtml]="config?.footerText">
+            </div>
+          </div>
+        </div>
+      </footer>
+    </ng-container>
+  `,
+            },] },
+];
+/** @nocollapse */
+FooterComponent.propDecorators = {
+    "config": [{ type: Input },],
+};
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
 class FooterLinksComponent {
@@ -960,3 +837,3 @@ }
                 template: `
-    <div class="footer" *ngIf="config">
+    <div class="footer">
       <div class="container">
@@ -966,29 +843,12 @@ <div class="row">
             <div class="row">
-              <div class="col-6 col-md-3">
+              <div class="col-6 col-md-3" *ngFor="let links of config.footerSubNav">
                 <ul class="list-unstyled mb-0">
-                  <li><a href="#">First link</a></li>
-                  <li><a href="#">Second link</a></li>
+                  <li *ngFor="let link of links">
+                    <ui-link [link]="link"></ui-link>
+                  </li>
                 </ul>
               </div>
-              <div class="col-6 col-md-3">
-                <ul class="list-unstyled mb-0">
-                  <li><a href="#">Third link</a></li>
-                  <li><a href="#">Fourth link</a></li>
-                </ul>
-              </div>
-              <div class="col-6 col-md-3">
-                <ul class="list-unstyled mb-0">
-                  <li><a href="#">Fifth link</a></li>
-                  <li><a href="#">Sixth link</a></li>
-                </ul>
-              </div>
-              <div class="col-6 col-md-3">
-                <ul class="list-unstyled mb-0">
-                  <li><a href="#">Other link</a></li>
-                  <li><a href="#">Last link</a></li>
-                </ul>
-              </div>
             </div>
           </div>
-          <div class="col-lg-4 mt-4 mt-lg-0" [innerHtml]="config?.description"></div>
+          <div class="col-lg-4 mt-4 mt-lg-0" [innerHtml]="config.footerSubText"></div>
         </div>
@@ -998,3 +858,2 @@ </div>
   `,
-                styles: []
             },] },
@@ -1011,27 +870,239 @@ ];
  */
-class HighlightComponent {
+class FooterModule {
+}
+FooterModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule, LinkModule],
+                declarations: [FooterComponent, FooterLinksComponent],
+                exports: [FooterComponent],
+            },] },
+];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+class TimeAgoPipe {
+    /**
+     * @param {?} changeDetectorRef
+     * @param {?} ngZone
+     */
+    constructor(changeDetectorRef, ngZone) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.ngZone = ngZone;
+    }
+    /**
+     * @param {?} value
+     * @return {?}
+     */
+    transform(value) {
+        this.removeTimer();
+        const /** @type {?} */ d = new Date(value);
+        const /** @type {?} */ now = new Date();
+        const /** @type {?} */ seconds = Math.round(Math.abs((now.getTime() - d.getTime()) / 1000));
+        const /** @type {?} */ timeToUpdate = Number.isNaN(seconds) ? 1000 : this.getSecondsUntilUpdate(seconds) * 1000;
+        this.timer = this.ngZone.runOutsideAngular(() => {
+            if (typeof window !== 'undefined') {
+                return window.setTimeout(() => {
+                    this.ngZone.run(() => this.changeDetectorRef.markForCheck());
+                }, timeToUpdate);
+            }
+            return null;
+        });
+        const /** @type {?} */ minutes = Math.round(Math.abs(seconds / 60));
+        const /** @type {?} */ hours = Math.round(Math.abs(minutes / 60));
+        const /** @type {?} */ days = Math.round(Math.abs(hours / 24));
+        const /** @type {?} */ months = Math.round(Math.abs(days / 30.416));
+        const /** @type {?} */ years = Math.round(Math.abs(days / 365));
+        if (Number.isNaN(seconds)) {
+            return '';
+        }
+        else if (seconds <= 45) {
+            return 'a few seconds ago';
+        }
+        else if (seconds <= 90) {
+            return 'a minute ago';
+        }
+        else if (minutes <= 45) {
+            return minutes + ' minutes ago';
+        }
+        else if (minutes <= 90) {
+            return 'an hour ago';
+        }
+        else if (hours <= 22) {
+            return hours + ' hours ago';
+        }
+        else if (hours <= 36) {
+            return 'a day ago';
+        }
+        else if (days <= 25) {
+            return days + ' days ago';
+        }
+        else if (days <= 45) {
+            return 'a month ago';
+        }
+        else if (days <= 345) {
+            return months + ' months ago';
+        }
+        else if (days <= 545) {
+            return 'a year ago';
+        }
+        else {
+            // (days > 545)
+            return years + ' years ago';
+        }
+    }
+    /**
+     * @return {?}
+     */
+    ngOnDestroy() {
+        this.removeTimer();
+    }
+    /**
+     * @return {?}
+     */
+    removeTimer() {
+        if (this.timer) {
+            window.clearTimeout(this.timer);
+            this.timer = null;
+        }
+    }
+    /**
+     * @param {?} seconds
+     * @return {?}
+     */
+    getSecondsUntilUpdate(seconds) {
+        const /** @type {?} */ min = 60;
+        const /** @type {?} */ hr = min * 60;
+        const /** @type {?} */ day = hr * 24;
+        if (seconds < min) {
+            // less than 1 min, update every 2 secs
+            return 2;
+        }
+        else if (seconds < hr) {
+            // less than an hour, update every 30 secs
+            return 30;
+        }
+        else if (seconds < day) {
+            // less then a day, update every 5 mins
+            return 300;
+        }
+        else {
+            // update every hour
+            return 3600;
+        }
+    }
+}
+TimeAgoPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'timeAgo',
+                pure: false,
+            },] },
+];
+/** @nocollapse */
+TimeAgoPipe.ctorParameters = () => [
+    { type: ChangeDetectorRef, },
+    { type: NgZone, },
+];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+class HeaderComponent {
+    /**
+     * @param {?} $event
+     * @return {?}
+     */
+    handleAction($event) {
+        console.log('Header Event');
+        console.log($event);
+    }
+}
+HeaderComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'ui-header',
+                template: `
+    <div class="header">
+      <div class="container">
+        <div class="d-flex">
+          <a class="navbar-brand" [routerLink]="config.appLink">
+            <img *ngIf="config.appLogo" [attr.src]="config.appLogo" class="navbar-brand-img">
+            <span *ngIf="config.appName" class="d-none d-md-inline">
+              {{ config.appName }}
+            </span>
+          </a>
+          <div class="ml-auto d-flex order-lg-2">
+            <ui-links [links]="config.headerSubNav" class="nav-item"></ui-links>
+            <ui-header-notifications [notifications]="config.notifications"
+                                     (action)="handleAction($event)"></ui-header-notifications>
+            <ui-header-profile [profile]="config.profile"
+                               [links]="config.profileNav"></ui-header-profile>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="header-nav" *ngIf="config.headerNav">
+      <div class="container">
+        <div class="row align-items-center">
+          <div class="col">
+            <ui-menu [links]="config.headerNav"></ui-menu>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+            },] },
+];
+/** @nocollapse */
+HeaderComponent.propDecorators = {
+    "config": [{ type: Input },],
+};
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+class HeaderNotificationItemComponent {
     constructor() {
-        this.icon = 'fe fe-code';
-        this.name = 'Code snippet';
+        this.action = new EventEmitter();
     }
+    /**
+     * @param {?} e
+     * @return {?}
+     */
+    onClick(e) {
+        e.preventDefault();
+        this.action.emit({
+            type: 'NOTIFICATION_CLICK',
+            payload: this.notification,
+        });
+    }
 }
-HighlightComponent.decorators = [
+HeaderNotificationItemComponent.decorators = [
     { type: Component, args: [{
-                selector: 'ui-highlight',
+                selector: 'ui-header-notification-item',
                 template: `
-    <ui-card [header]="name" [icon]="icon" [buttons]="[]">
-      <div class="p-5">
-        <pre class="m-0 p-0">
-          <code highlight [textContent]="code"></code>
-        </pre>
+    <a href="#" class="dropdown-item d-flex" (click)="onClick($event)">
+      <ui-avatar [text]="notification.avatarText" class="mr-3 align-self-center"></ui-avatar>
+      <div>
+        <strong>{{ notification.from }}</strong> {{ notification.text }}
+        <div class="small text-muted">
+          {{ notification.date | timeAgo }}
+        </div>
       </div>
-    </ui-card>
+    </a>
   `,
+                styles: [],
             },] },
 ];
 /** @nocollapse */
-HighlightComponent.propDecorators = {
-    "code": [{ type: Input },],
-    "icon": [{ type: Input },],
-    "name": [{ type: Input },],
+HeaderNotificationItemComponent.propDecorators = {
+    "notification": [{ type: Input },],
+    "action": [{ type: Output },],
 };
@@ -1081,3 +1152,3 @@
   `,
-                styles: []
+                styles: [],
             },] },
@@ -1097,42 +1168,2 @@ ];
  */
-class HeaderNotificationItemComponent {
-    constructor() {
-        this.action = new EventEmitter();
-    }
-    /**
-     * @param {?} e
-     * @return {?}
-     */
-    onClick(e) {
-        e.preventDefault();
-        this.action.emit({ type: 'NOTIFICATION_CLICK', payload: this.notification });
-    }
-}
-HeaderNotificationItemComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ui-header-notification-item',
-                template: `
-    <a href="#" class="dropdown-item d-flex" (click)="onClick($event)">
-      <ui-avatar [text]="notification.avatarText" class="mr-3 align-self-center"></ui-avatar>
-      <div>
-        <strong>{{ notification.from }}</strong> {{ notification.text }}
-        <div class="small text-muted">
-          {{ notification.date | timeAgo }}
-        </div>
-      </div>
-    </a>
-  `,
-                styles: []
-            },] },
-];
-/** @nocollapse */
-HeaderNotificationItemComponent.propDecorators = {
-    "notification": [{ type: Input },],
-    "action": [{ type: Output },],
-};
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes} checked by tsc
- */
 class HeaderProfileComponent {
@@ -1154,5 +1185,8 @@ }
       </a>
-      <div *dropdownMenu class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+      <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow" *dropdownMenu>
         <ng-container *ngFor="let link of links">
-          <ui-header-profile-link [link]="link"></ui-header-profile-link>
+          <div *ngIf="link.divider; else linkEl" class="dropdown-divider"></div>
+          <ng-template #linkEl>
+            <ui-link [link]="link"></ui-link>
+          </ng-template>
         </ng-container>
@@ -1174,21 +1208,36 @@ </div>
  */
-class HeaderProfileLinkComponent {
+class MenuComponent {
+    constructor() {
+        this.links = [];
+    }
 }
-HeaderProfileLinkComponent.decorators = [
+MenuComponent.decorators = [
     { type: Component, args: [{
-                selector: 'ui-header-profile-link',
+                selector: 'ui-menu',
                 template: `
-    <a *ngIf="link.link" class="dropdown-item" [routerLink]="link.link">
-      <ui-badge *ngIf="link.badge" class="float-right" [badge]="link.badge"></ui-badge>
-      <i *ngIf="link.icon" [class]="link.icon" [class.dropdown-icon]="true"></i>
-      <span *ngIf="link.label">{{link.label}}</span>
-    </a>
-    <div *ngIf="link.divider" class="dropdown-divider"></div>
+    <ul class="nav nav-tabs" style="white-space: nowrap;">
+      <ng-container *ngFor="let item of links">
+        <li class="nav-item d-inline-block">
+          <a href="#" [routerLink]="item.link" class="nav-link" routerLinkActive="active">
+            <i class="{{ item.icon }}" *ngIf="item.icon"></i>
+            {{item.label}}
+          </a>
+          <div class="nav-submenu nav" *ngIf="item.children">
+            <ng-container *ngFor="let sub of item.children">
+              <a href="#" class="nav-item" [routerLink]="sub.link" routerLinkActive="active">
+                <i class="{{ sub.icon }}" *ngIf="sub.icon"></i>
+                {{sub.label}}
+              </a>
+            </ng-container>
+          </div>
+        </li>
+      </ng-container>
+    </ul>
   `,
-                styles: []
+                styles: [],
             },] },
 ];
 /** @nocollapse */
-HeaderProfileLinkComponent.propDecorators = {
-    "link": [{ type: Input },],
+MenuComponent.propDecorators = {
+    "links": [{ type: Input },],
 };
@@ -1200,20 +1249,54 @@
  */
-class BadgeComponent {
+class HeaderModule {
+}
+HeaderModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule, RouterModule, AvatarModule, BadgeModule, BsDropdownModule, LinkModule],
+                declarations: [
+                    TimeAgoPipe,
+                    HeaderComponent,
+                    HeaderNotificationsComponent,
+                    HeaderNotificationItemComponent,
+                    HeaderProfileComponent,
+                    MenuComponent,
+                ],
+                exports: [
+                    HeaderComponent,
+                ],
+            },] },
+];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+class LayoutComponent {
     /**
-     * @return {?}
+     * @param {?} ui
      */
-    ngOnInit() {
-        if (this.badge) {
-            this.label = this.badge.label;
-            this.type = this.badge.type;
-        }
+    constructor(ui) {
+        this.ui = ui;
     }
 }
-BadgeComponent.decorators = [
+LayoutComponent.decorators = [
     { type: Component, args: [{
-                selector: 'ui-badge',
+                selector: 'ui-layout',
                 template: `
-    <span class="badge badge-{{type}}">
-      {{label}}
-    </span>
+    <div class="page" *ngIf="ui.config$ | async as config; else loading">
+      <div class="page-main">
+        <ui-header [config]="config"></ui-header>
+        <div class="page-content">
+          <router-outlet></router-outlet>
+        </div>
+        <ui-footer [config]="config"></ui-footer>
+      </div>
+    </div>
+    <ng-template #loading>
+      Loading...
+    </ng-template>
   `,
@@ -1223,7 +1306,5 @@ },] },
 /** @nocollapse */
-BadgeComponent.propDecorators = {
-    "label": [{ type: Input },],
-    "type": [{ type: Input },],
-    "badge": [{ type: Input },],
-};
+LayoutComponent.ctorParameters = () => [
+    { type: UiService$1, },
+];
 
@@ -1234,23 +1315,92 @@ /**
  */
-class HeaderLinksComponent {
+class LayoutBaseComponent {
+}
+LayoutBaseComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'ui-layout-base',
+                template: `
+    <div class="page">
+      <router-outlet></router-outlet>
+    </div>
+  `,
+            },] },
+];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+class LayoutModule {
+}
+LayoutModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule, RouterModule, HeaderModule, FooterModule],
+                declarations: [LayoutComponent, LayoutBaseComponent],
+                exports: [LayoutComponent, LayoutBaseComponent],
+            },] },
+];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+class PageComponent {
+}
+PageComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'ui-page',
+                template: `
+     <div class="container">
+      <ng-content></ng-content>
+    </div>
+  `,
+            },] },
+];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+class PageTitleComponent {
     constructor() {
-        this.links = [];
+        this.badgeStyle = 'default';
+        this.header = true;
     }
 }
-HeaderLinksComponent.decorators = [
+PageTitleComponent.decorators = [
     { type: Component, args: [{
-                selector: 'ui-header-links',
+                selector: 'ui-page-title',
                 template: `
-    <ng-container *ngFor="let link of links">
-      <a [href]="link.link" [class]="link.class" [target]="link.target || '_self' ">
-        <i [class]="link.icon"></i>
-        <span class="d-none d-lg-inline">{{ link.label }}</span>
-      </a>
-    </ng-container>
+    <div [class.page-header]="header">
+      <h1 class="page-title">
+        <i *ngIf="icon" class="{{ icon }} page-title-icon m-3"></i>
+        {{ title }}
+        <small *ngIf="badge" class="badge badge-{{badgeStyle}} m-3">
+          {{badge}}
+        </small>
+      </h1>
+      <div *ngIf="subTitle" class="page-subtitle">
+        {{subTitle}}
+      </div>
+      <div class="page-options">
+        <ng-content></ng-content>
+      </div>
+    </div>
   `,
+                styles: [],
             },] },
 ];
 /** @nocollapse */
-HeaderLinksComponent.propDecorators = {
-    "links": [{ type: Input },],
+PageTitleComponent.propDecorators = {
+    "badge": [{ type: Input },],
+    "badgeStyle": [{ type: Input },],
+    "header": [{ type: Input },],
+    "icon": [{ type: Input },],
+    "title": [{ type: Input },],
+    "subTitle": [{ type: Input },],
 };
@@ -1262,21 +1412,40 @@
  */
+class PageModule {
+}
+PageModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule],
+                declarations: [PageComponent, PageTitleComponent],
+                exports: [PageComponent, PageTitleComponent],
+            },] },
+];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
 const uiModules = [
     AlertModule,
+    AvatarModule,
+    BadgeModule,
+    ButtonModule,
+    CardModule,
+    FooterModule,
+    HeaderModule,
+    LayoutModule,
+    LinkModule,
+    PageModule,
 ];
 const exported = [
     ...uiModules,
-    LayoutComponent,
-    LayoutBaseComponent,
-    PageComponent,
-    PageTitleComponent,
-    DashboardStatsComponent,
-    DashboardIconBoxComponent,
-    DashboardDigitComponent,
-    DashboardChartComponent,
-    DashboardChartBgComponent,
-    AvatarComponent,
-    CardComponent,
-    CardBodyComponent,
-    HighlightComponent,
-    MenuComponent,
 ];
@@ -1292,44 +1461,12 @@ class UiModule {
                     ReactiveFormsModule,
-                    NgxChartsModule,
-                    ChartsModule,
                     NgPipesModule,
-                    BsDropdownModule.forRoot(),
-                    HighlightModule.forRoot({
-                        theme: 'atom-one-light',
-                    }),
-                    ...uiModules
+                    BsDropdownModule$1.forRoot(),
+                    ...uiModules,
                 ],
-                declarations: [
-                    HeaderComponent,
-                    FooterComponent,
-                    FooterLinksComponent,
-                    LayoutComponent,
-                    LayoutBaseComponent,
-                    MenuComponent,
-                    PageTitleComponent,
-                    PageComponent,
-                    DashboardStatsComponent,
-                    DashboardIconBoxComponent,
-                    DashboardDigitComponent,
-                    DashboardChartComponent,
-                    AvatarComponent,
-                    DashboardChartBgComponent,
-                    CardComponent,
-                    CardBodyComponent,
-                    HighlightComponent,
-                    HeaderNotificationsComponent,
-                    HeaderNotificationItemComponent,
-                    HeaderProfileComponent,
-                    HeaderProfileLinkComponent,
-                    BadgeComponent,
-                    TimeAgoPipe,
-                    HeaderLinksComponent,
-                ],
+                declarations: [],
                 exports: [
                     ...exported,
-                    NgxChartsModule,
-                    ChartsModule,
                     NgPipesModule,
-                    RouterModule,
-                ]
+                ],
+                providers: [UiService],
             },] },
@@ -1356,3 +1493,3 @@ ];
 
-export { UiModule, LayoutComponent, LayoutBaseComponent, AlertModule, AvatarComponent as ɵo, BadgeComponent as ɵx, CardBodyComponent as ɵr, CardComponent as ɵq, DashboardChartBgComponent as ɵp, DashboardChartComponent as ɵn, DashboardDigitComponent as ɵm, DashboardIconBoxComponent as ɵl, DashboardStatsComponent as ɵk, FooterLinksComponent as ɵe, FooterComponent as ɵd, HeaderLinksComponent as ɵz, HeaderNotificationItemComponent as ɵu, HeaderNotificationsComponent as ɵt, HeaderProfileLinkComponent as ɵw, HeaderProfileComponent as ɵv, HeaderComponent as ɵc, HighlightComponent as ɵs, MenuComponent as ɵh, PageTitleComponent as ɵi, PageComponent as ɵj, LayoutBaseComponent as ɵg, LayoutComponent as ɵf, AlertModule as ɵa, AlertComponent as ɵb, TimeAgoPipe as ɵy };
+export { UiModule, UiService$1 as UiService, UiProfile, UiNotification, UiLayout, UiBadge, AlertModule, AvatarModule, BadgeModule, ButtonModule, CardModule, FooterModule, HeaderModule, LayoutModule, LayoutComponent, LayoutBaseComponent, LinkModule, UiLink, PageModule, AlertModule as ɵa, AvatarModule as ɵb, BadgeModule as ɵc, ButtonModule as ɵd, CardModule as ɵe, FooterModule as ɵf, HeaderModule as ɵg, LayoutModule as ɵh, LinkModule as ɵi, PageModule as ɵj };
 //# sourceMappingURL=tabler-angular-ui.js.map

esm5/tabler-angular-ui.js

 import { __spread } from 'tslib';
-import { Component, Input, NgModule, Pipe, NgZone, ChangeDetectorRef, EventEmitter, Output } from '@angular/core';
-import { ActivatedRoute, RouterModule } from '@angular/router';
-import { map } from 'rxjs/operators';
+import { Component, Input, NgModule, EventEmitter, Output, Injectable, Pipe, NgZone, ChangeDetectorRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { NgxChartsModule } from '@swimlane/ngx-charts';
-import { ChartsModule } from 'ng2-charts';
+import { RouterModule } from '@angular/router';
+import { ReplaySubject } from 'rxjs/ReplaySubject';
+import { BsDropdownModule } from 'ngx-bootstrap';
+import { UiService } from '@tabler/angular-ui/src/services/ui.service';
 import { NgPipesModule } from 'angular-pipes';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
-import { HighlightModule } from 'ngx-highlightjs';
+import { BsDropdownModule as BsDropdownModule$1 } from 'ngx-bootstrap/dropdown';
 
-var LayoutComponent = /** @class */ (function () {
-    function LayoutComponent(route) {
-        this.route = route;
-    }
-    LayoutComponent.prototype.ngOnInit = function () {
-        var _this = this;
-        this.route.data
-            .pipe(map(function (data) { return data["config"]; }))
-            .subscribe(function (config) { return _this.config = config; });
-    };
-    return LayoutComponent;
-}());
-LayoutComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ui-layout',
-                template: "\n    <div class=\"page\">\n      <div class=\"page-main\">\n        <ui-header [config]=\"config?.header\"></ui-header>\n        <div class=\"page-content\">\n          <router-outlet></router-outlet>\n        </div>\n        <ui-footer-links [config]=\"config?.subfooter\"></ui-footer-links>\n        <ui-footer [config]=\"config?.footer\"></ui-footer>\n      </div>\n    </div>\n  ",
-            },] },
-];
-LayoutComponent.ctorParameters = function () { return [
-    { type: ActivatedRoute, },
-]; };
-LayoutComponent.propDecorators = {
-    "config": [{ type: Input },],
-};
-var LayoutBaseComponent = /** @class */ (function () {
-    function LayoutBaseComponent() {
-    }
-    return LayoutBaseComponent;
-}());
-LayoutBaseComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ui-layout-base',
-                template: "\n    <div class=\"page\">\n      <router-outlet></router-outlet>\n    </div>\n  ",
-            },] },
-];
 var AlertComponent = /** @class */ (function () {
@@ -82,356 +46,198 @@ function AlertComponent() {
 ];
-var TimeAgoPipe = /** @class */ (function () {
-    function TimeAgoPipe(changeDetectorRef, ngZone) {
-        this.changeDetectorRef = changeDetectorRef;
-        this.ngZone = ngZone;
+var AvatarComponent = /** @class */ (function () {
+    function AvatarComponent() {
     }
-    TimeAgoPipe.prototype.transform = function (value) {
-        var _this = this;
-        this.removeTimer();
-        var d = new Date(value);
-        var now = new Date();
-        var seconds = Math.round(Math.abs((now.getTime() - d.getTime()) / 1000));
-        var timeToUpdate = (Number.isNaN(seconds)) ? 1000 : this.getSecondsUntilUpdate(seconds) * 1000;
-        this.timer = this.ngZone.runOutsideAngular(function () {
-            if (typeof window !== 'undefined') {
-                return window.setTimeout(function () {
-                    _this.ngZone.run(function () { return _this.changeDetectorRef.markForCheck(); });
-                }, timeToUpdate);
-            }
-            return null;
-        });
-        var minutes = Math.round(Math.abs(seconds / 60));
-        var hours = Math.round(Math.abs(minutes / 60));
-        var days = Math.round(Math.abs(hours / 24));
-        var months = Math.round(Math.abs(days / 30.416));
-        var years = Math.round(Math.abs(days / 365));
-        if (Number.isNaN(seconds)) {
-            return '';
-        }
-        else if (seconds <= 45) {
-            return 'a few seconds ago';
-        }
-        else if (seconds <= 90) {
-            return 'a minute ago';
-        }
-        else if (minutes <= 45) {
-            return minutes + ' minutes ago';
-        }
-        else if (minutes <= 90) {
-            return 'an hour ago';
-        }
-        else if (hours <= 22) {
-            return hours + ' hours ago';
-        }
-        else if (hours <= 36) {
-            return 'a day ago';
-        }
-        else if (days <= 25) {
-            return days + ' days ago';
-        }
-        else if (days <= 45) {
-            return 'a month ago';
-        }
-        else if (days <= 345) {
-            return months + ' months ago';
-        }
-        else if (days <= 545) {
-            return 'a year ago';
-        }
-        else {
-            return years + ' years ago';
-        }
+    AvatarComponent.prototype.backgroundImage = function () {
+        return this.image ? "url(" + this.image + ")" : '';
     };
-    TimeAgoPipe.prototype.ngOnDestroy = function () {
-        this.removeTimer();
-    };
-    TimeAgoPipe.prototype.removeTimer = function () {
-        if (this.timer) {
-            window.clearTimeout(this.timer);
-            this.timer = null;
-        }
-    };
-    TimeAgoPipe.prototype.getSecondsUntilUpdate = function (seconds) {
-        var min = 60;
-        var hr = min * 60;
-        var day = hr * 24;
-        if (seconds < min) {
-            return 2;
-        }
-        else if (seconds < hr) {
-            return 30;
-        }
-        else if (seconds < day) {
-            return 300;
-        }
-        else {
-            return 3600;
-        }
-    };
-    return TimeAgoPipe;
+    return AvatarComponent;
 }());
-TimeAgoPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'timeAgo',
-                pure: false
-            },] },
-];
-TimeAgoPipe.ctorParameters = function () { return [
-    { type: ChangeDetectorRef, },
-    { type: NgZone, },
-]; };
-var HeaderComponent = /** @class */ (function () {
-    function HeaderComponent() {
-    }
-    HeaderComponent.prototype.handleAction = function ($event) {
-        console.log('Header Event');
-        console.log($event);
-    };
-    return HeaderComponent;
-}());
-HeaderComponent.decorators = [
+AvatarComponent.decorators = [
     { type: Component, args: [{
-                selector: 'ui-header',
-                template: "\n    <div class=\"header\">\n      <div class=\"container\">\n        <div class=\"d-flex\">\n          <a class=\"navbar-brand\" routerLink=\"/\">\n            <img src=\"assets/brand/tabler.svg\" class=\"navbar-brand-img\" alt=\"tabler.io\">\n            <span class=\"d-none d-md-inline\">\n              {{ config?.title }}\n            </span>\n          </a>\n          <div class=\"ml-auto d-flex order-lg-2\">\n            <ui-header-links class=\"nav-item\" [links]=\"config?.links\"></ui-header-links>\n            <ui-header-notifications [notifications]=\"config?.notifications\"\n                                     (action)=\"handleAction($event)\"></ui-header-notifications>\n            <ui-header-profile [profile]=\"config?.user\" [links]=\"config?.profileLinks\"></ui-header-profile>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"header-nav\">\n      <div class=\"container\">\n        <div class=\"row align-items-center\">\n          <div class=\"col\">\n            <ui-menu [links]=\"config?.menu\"></ui-menu>\n          </div>\n          <div class=\"col-3 ml-auto\" *ngIf=\"config?.search\">\n            <form class=\"input-icon\">\n              <input type=\"search\" class=\"form-control header-search\" placeholder=\"Search&hellip;\" tabindex=\"1\">\n              <div class=\"input-icon-addon\">\n                <i class=\"fe fe-search\"></i>\n              </div>\n            </form>\n          </div>\n        </div>\n      </div>\n    </div>\n  ",
-                styles: []
+                selector: 'ui-avatar',
+                template: "\n    <span class=\"avatar avatar-{{size}}\" [style.background-image]=\"backgroundImage()\">\n      {{text}}\n      <span *ngIf=\"status\" class=\"avatar-status bg-{{status}}\"></span>\n    </span>\n  ",
+                styles: [],
             },] },
 ];
-HeaderComponent.ctorParameters = function () { return []; };
-HeaderComponent.propDecorators = {
-    "config": [{ type: Input },],
+AvatarComponent.propDecorators = {
+    "image": [{ type: Input },],
+    "size": [{ type: Input },],
+    "status": [{ type: Input },],
+    "text": [{ type: Input },],
 };
-var FooterComponent = /** @class */ (function () {
-    function FooterComponent() {
+var AvatarModule = /** @class */ (function () {
+    function AvatarModule() {
     }
-    return FooterComponent;
+    return AvatarModule;
 }());
-FooterComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ui-footer',
-                template: "\n    <footer class=\"footer\" *ngIf=\"config\">\n      <div class=\"container\">\n        <div class=\"row align-items-center flex-row-reverse\">\n          <div class=\"col-auto ml-auto\">\n            <div class=\"row align-items-center\">\n              <div class=\"col-auto\">\n                <ul class=\"list-inline list-inline-dots mb-0\">\n                  <ng-container *ngFor=\"let link of config?.links\">\n                    <li class=\"list-inline-item\">\n                      <a [href]=\"link.link\" [class]=\"link.class\" [target]=\"link.target || '_self'\">\n                        <i [class]=\"link.icon\"></i>\n                        {{ link.label }}\n                      </a>\n                    </li>\n                  </ng-container>\n                </ul>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-12 col-lg-auto mt-3 mt-lg-0 text-center\" [innerHtml]=\"config?.disclaimer\">\n          </div>\n        </div>\n      </div>\n    </footer>\n  ",
-                styles: []
+AvatarModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule],
+                declarations: [AvatarComponent],
+                exports: [AvatarComponent],
             },] },
 ];
-FooterComponent.propDecorators = {
-    "config": [{ type: Input },],
-};
-var MenuComponent = /** @class */ (function () {
-    function MenuComponent() {
-        this.links = [];
+var BadgeComponent = /** @class */ (function () {
+    function BadgeComponent() {
     }
-    return MenuComponent;
+    return BadgeComponent;
 }());
-MenuComponent.decorators = [
+BadgeComponent.decorators = [
     { type: Component, args: [{
-                selector: 'ui-menu',
-                template: "\n    <ul class=\"nav nav-tabs\" style=\"white-space: nowrap;\">\n      <ng-container *ngFor=\"let item of links\">\n        <li class=\"nav-item d-inline-block\">\n          <a href=\"#\" [routerLink]=\"item.url\" class=\"nav-link\" routerLinkActive=\"active\">\n            <i class=\"{{ item.icon }}\" *ngIf=\"item.icon\"></i>\n            {{item.name}}\n          </a>\n          <div class=\"nav-submenu nav\" *ngIf=\"item.subpages\">\n            <ng-container *ngFor=\"let subitem of item.subpages\">\n              <a href=\"#\" class=\"nav-item\" [routerLink]=\"subitem.url\" routerLinkActive=\"active\">\n                <i class=\"{{ subitem.icon }}\" *ngIf=\"subitem.icon\"></i>\n                {{subitem.name}}\n              </a>\n            </ng-container>\n          </div>\n        </li>\n      </ng-container>\n    </ul>\n  ",
-                styles: []
+                selector: 'ui-badge',
+                template: "\n    <span class=\"badge badge-{{color}}\">\n      {{label}}\n    </span>\n  ",
             },] },
 ];
-MenuComponent.propDecorators = {
-    "links": [{ type: Input },],
-};
-var PageComponent = /** @class */ (function () {
-    function PageComponent() {
-    }
-    return PageComponent;
-}());
-PageComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ui-page',
-                template: "\n     <div class=\"container\">\n      <ng-content></ng-content>\n    </div>\n  ",
-            },] },
-];
-var PageTitleComponent = /** @class */ (function () {
-    function PageTitleComponent() {
-        this.badgeStyle = 'default';
-        this.header = true;
-    }
-    return PageTitleComponent;
-}());
-PageTitleComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ui-page-title',
-                template: "\n    <div [class.page-header]=\"header\">\n      <h1 class=\"page-title\">\n        <i *ngIf=\"icon\" class=\"{{ icon }} page-title-icon m-3\"></i>\n        {{ title }}\n        <small *ngIf=\"badge\" class=\"badge badge-{{badgeStyle}} m-3\">\n          {{badge}}\n        </small>\n      </h1>\n      <div *ngIf=\"subTitle\" class=\"page-subtitle\">\n        {{subTitle}}\n      </div>\n      <div class=\"page-options\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  ",
-                styles: []
-            },] },
-];
-PageTitleComponent.propDecorators = {
-    "badge": [{ type: Input },],
-    "badgeStyle": [{ type: Input },],
-    "header": [{ type: Input },],
-    "icon": [{ type: Input },],
-    "title": [{ type: Input },],
-    "subTitle": [{ type: Input },],
-};
-var DashboardChartComponent = /** @class */ (function () {
-    function DashboardChartComponent() {
-        this.height = '10rem';
-        this.title = '';
-        this.data = [];
-        this.doughnut = false;
-        this.view = [230, 192];
-        this.showLegend = false;
-        this.showLabels = false;
-    }
-    return DashboardChartComponent;
-}());
-DashboardChartComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ui-dashboard-chart',
-                template: "\n    <div class=\"card\">\n      <div class=\"card-header\">\n        <h3 class=\"card-title\">{{ title }}</h3>\n      </div>\n      <div class=\"card-body\">\n        <div [style.height]=\"height\">\n          <ngx-charts-pie-chart\n            scheme=\"air\"\n            [view]=\"view\"\n            [results]=\"data\"\n            [legend]=\"showLegend\"\n            [labels]=\"showLabels\"\n            [doughnut]=\"doughnut\"\n            [gradient]=\"false\">\n          </ngx-charts-pie-chart>\n        </div>\n      </div>\n    </div>\n  ",
-                styles: []
-            },] },
-];
-DashboardChartComponent.propDecorators = {
-    "height": [{ type: Input },],
-    "title": [{ type: Input },],
-    "data": [{ type: Input },],
-    "doughnut": [{ type: Input },],
-};
-var DashboardChartBgComponent = /** @class */ (function () {
-    function DashboardChartBgComponent() {
-        this.datasets = [
-            {
-                data: [78, 81, 80, 45, 34, 12, 40],
-                label: 'Series A'
-            }
-        ];
-        this.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
-        this.options = {
-            maintainAspectRatio: false,
-            scales: {
-                xAxes: [{
-                        display: false
-                    }],
-                yAxes: [{
-                        display: false
-                    }]
-            },
-            elements: {
-                line: {
-                    borderWidth: 2
-                },
-                point: {
-                    radius: 0,
-                    hitRadius: 10,
-                    hoverRadius: 4,
-                },
-            },
-            legend: {
-                display: false
-            },
-            animation: {
-                duration: 0,
-            },
-        };
-        this.colors = [
-            {
-                backgroundColor: 'rgba(70,127,207,0.1)',
-                borderColor: 'rgba(70,127,207)',
-            }
-        ];
-    }
-    return DashboardChartBgComponent;
-}());
-DashboardChartBgComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ui-dashboard-chart-bg',
-                template: "\n    <div class=\"card\">\n      <div class=\"card-body\">\n      <!--<div class=\"card-body\">-->\n        <div class=\"card-value pull-right text-{{ color }}\">{{ rate }}</div>\n        <h3 class=\"mb-1\">{{ title}}</h3>\n        <div class=\"text-muted\">{{ description }}</div>\n      </div>\n      <div class=\"card-img\">\n          <canvas baseChart\n                  class=\"pt-5\"\n                  height=\"160\"\n                  [datasets]=\"datasets\"\n                  [labels]=\"labels\"\n                  [options]=\"options\"\n                  [colors]=\"colors\"\n                  chartType=\"line\"></canvas>\n        </div>\n    </div>\n  ",
-                styles: ["\n    .card-body {\n      background-color: transparent;\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      padding: 1.25rem;\n    }\n  "]
-            },] },
-];
-DashboardChartBgComponent.propDecorators = {
-    "rate": [{ type: Input },],
+BadgeComponent.propDecorators = {
+    "label": [{ type: Input },],
     "color": [{ type: Input },],
-    "title": [{ type: Input },],
-    "description": [{ type: Input },],
 };
-var DashboardDigitComponent = /** @class */ (function () {
-    function DashboardDigitComponent() {
-        this.color = 'blue';
-        this.title = 'Today Expenses';
-        this.digit = '$8500';
-        this.width = '54%';
+var BadgeModule = /** @class */ (function () {
+    function BadgeModule() {
     }
-    return DashboardDigitComponent;
+    return BadgeModule;
 }());
-DashboardDigitComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ui-dashboard-digit',
-                template: "\n    <div class=\"card\">\n      <div class=\"card-body text-center\">\n        <div class=\"h5\">{{ title }}</div>\n        <div class=\"display-4 font-weight-bold mb-4\">{{ digit }}</div>\n        <div class=\"progress progress-sm\">\n          <div class=\"progress-bar bg-{{ color }}\" [style.width]=\"width\"></div>\n        </div>\n      </div>\n    </div>\n  ",
-                styles: []
+BadgeModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule],
+                declarations: [BadgeComponent],
+                exports: [BadgeComponent],
             },] },
 ];
-DashboardDigitComponent.propDecorators = {
-    "color": [{ type: Input },],
-    "title": [{ type: Input },],
-    "digit": [{ type: Input },],
-    "width": [{ type: Input },],
-};
-var DashboardIconBoxComponent = /** @class */ (function () {
-    function DashboardIconBoxComponent() {
-        this.color = 'red';
-        this.icon = 'fa fa-dollar';
-        this.value = '16';
-        this.description = 'Sales';
-        this.subtitle = '6 waiting payments';
+var ButtonComponent = /** @class */ (function () {
+    function ButtonComponent() {
+        this.config = {};
+        this.disabled = false;
+        this.event = 'SUBMIT';
+        this.action = new EventEmitter();
     }
-    return DashboardIconBoxComponent;
+    ButtonComponent.prototype.ngOnInit = function () {
+        var _this = this;
+        var inputMap = ButtonComponent.copyProps
+            .filter(function (item) { return typeof _this[item] !== 'undefined'; })
+            .reduce(function (a, c) {
+            return (Object.assign({}, a, (_a = {}, _a[c] = _this[c], _a)));
+            var _a;
+        }, {});
+        this.config = Object.assign({}, inputMap, this.config);
+    };
+    Object.defineProperty(ButtonComponent.prototype, "_size", {
+        get: function () {
+            return this.config.size || '';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ButtonComponent.prototype, "_label", {
+        get: function () {
+            return this.config.label || null;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ButtonComponent.prototype, "_icon", {
+        get: function () {
+            return this.config.icon || null;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ButtonComponent.prototype, "_color", {
+        get: function () {
+            return this.config.color || 'primary';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ButtonComponent.prototype, "_event", {
+        get: function () {
+            return this.config.event || 'SUBMIT';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ButtonComponent.prototype, "_type", {
+        get: function () {
+            return this.config.type || 'button';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ButtonComponent.prototype, "_payload", {
+        get: function () {
+            return this.config.payload || null;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ButtonComponent.prototype, "_classNames", {
+        get: function () {
+            var base = 'btn';
+            var size = base + "-" + this._size;
+            var color = base + "-" + this._color;
+            return this.config.classNames || base + " " + size + " " + color;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    ButtonComponent.prototype.handleClick = function ($event) {
+        this.action.emit({
+            type: this._event,
+            payload: Object.assign({}, this._payload),
+            $event: $event,
+        });
+    };
+    return ButtonComponent;
 }());
-DashboardIconBoxComponent.decorators = [
+ButtonComponent.copyProps = ['color', 'size', 'type', 'label', 'icon', 'disabled', 'event', 'payload'];
+ButtonComponent.decorators = [
     { type: Component, args: [{
-                selector: 'ui-dashboard-icon-box',
-                template: "\n    <div class=\"card p-3\">\n      <div class=\"d-flex align-items-center\">\n\t\t<span class=\"stamp stamp-md bg-{{ color }} mr-3\">\n\t\t\t<i class=\"{{ icon }}\"></i>\n\t\t</span>\n        <div>\n          <h4 class=\"m-0\"><a href=\"javascript:void(0)\">{{ value }} <small>{{ description }}</small></a></h4>\n          <small class=\"text-muted\">{{ subtitle }}</small>\n        </div>\n      </div>\n    </div>\n  ",
-                styles: []
+                selector: 'ui-button',
+                template: "\n    <button [type]=\"_type\"\n            class=\"{{_classNames}}\"\n            [disabled]=\"disabled\"\n            (click)=\"handleClick($event)\">\n      <i *ngIf=\"_icon\" class=\"{{_icon}}\" [class.mr-1]=\"_label\"></i>\n      <ng-container *ngIf=\"_label\">\n        {{_label}}\n      </ng-container>\n      <ng-content></ng-content>\n    </button>\n  ",
             },] },
 ];
-DashboardIconBoxComponent.propDecorators = {
+ButtonComponent.propDecorators = {
+    "config": [{ type: Input },],
     "color": [{ type: Input },],
+    "size": [{ type: Input },],
+    "type": [{ type: Input },],
+    "label": [{ type: Input },],
     "icon": [{ type: Input },],
-    "value": [{ type: Input },],
-    "description": [{ type: Input },],
-    "subtitle": [{ type: Input },],
+    "disabled": [{ type: Input },],
+    "event": [{ type: Input },],
+    "payload": [{ type: Input },],
+    "action": [{ type: Output },],
 };
-var DashboardStatsComponent = /** @class */ (function () {
-    function DashboardStatsComponent() {
+var ButtonsComponent = /** @class */ (function () {
+    function ButtonsComponent() {
+        this.config = [];
+        this.disabled = false;
+        this.action = new EventEmitter();
     }
-    DashboardStatsComponent.prototype.isPositive = function () {
-        return this.percentage > 0;
-    };
-    return DashboardStatsComponent;
+    return ButtonsComponent;
 }());
-DashboardStatsComponent.decorators = [
+ButtonsComponent.decorators = [
     { type: Component, args: [{
-                selector: 'ui-dashboard-stats',
-                template: "\n    <div class=\"card\">\n      <div class=\"card-body p-3 text-center\">\n        <div class=\"text-right\" [class.text-green]=\"isPositive()\" [class.text-red]=\"!isPositive()\" >\n          <span *ngIf=\"percentage\">\n            {{percentage}}%\n            <i *ngIf=\"isPositive()\" class=\"fe fe-chevron-up\"></i>\n            <i *ngIf=\"!isPositive()\" class=\"fe fe-chevron-down\"></i>\n          </span>\n        </div>\n        <div class=\"h1 m-0\">{{ number }}</div>\n        <div class=\"text-muted mb-4\">{{ title }}</div>\n      </div>\n    </div>\n  ",
-                styles: []
+                selector: 'ui-buttons',
+                template: "\n    <div>\n      <ng-container *ngFor=\"let button of config\">\n        <ui-button [disabled]=\"disabled\"\n                   [config]=\"button\"\n                   [payload]=\"payload\"\n                   (action)=\"action.emit($event)\">\n        </ui-button>\n      </ng-container>\n    </div>\n  ",
             },] },
 ];
-DashboardStatsComponent.propDecorators = {
-    "number": [{ type: Input },],
-    "percentage": [{ type: Input },],
-    "title": [{ type: Input },],
+ButtonsComponent.propDecorators = {
+    "config": [{ type: Input },],
+    "disabled": [{ type: Input },],
+    "payload": [{ type: Input },],
+    "action": [{ type: Output },],
 };
-var AvatarComponent = /** @class */ (function () {
-    function AvatarComponent() {
+var ButtonModule = /** @class */ (function () {
+    function ButtonModule() {
     }
-    AvatarComponent.prototype.backgroundImage = function () {
-        return this.image ? "url(" + this.image + ")" : '';
-    };
-    return AvatarComponent;
+    return ButtonModule;
 }());
-AvatarComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ui-avatar',
-                template: "\n    <span class=\"avatar avatar-{{size}}\" [style.background-image]=\"backgroundImage()\">\n      {{text}}\n      <span *ngIf=\"status\" class=\"avatar-status bg-{{status}}\"></span>\n    </span>\n  ",
-                styles: []
+ButtonModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule],
+                declarations: [ButtonComponent, ButtonsComponent],
+                exports: [ButtonComponent, ButtonsComponent],
             },] },
 ];
-AvatarComponent.propDecorators = {
-    "image": [{ type: Input },],
-    "size": [{ type: Input },],
-    "status": [{ type: Input },],
-    "text": [{ type: Input },],
-};
 var CardComponent = /** @class */ (function () {
@@ -470,3 +276,5 @@ function CardComponent() {
                 template: "\n    <div class=\"card\" [class.hide]=\"hidden\" [class.card-fullscreen]=\"fullScreen\">\n      <div *ngIf=\"status\" class=\"card-status bg-{{ status }}\" [class.card-status-left]=\"statusLeft\"></div>\n      <div class=\"card-header\">\n        <h3 class=\"card-title\">\n          <i *ngIf=\"icon\" class=\"{{ icon }}\"></i>\n          {{header}}\n        </h3>\n        <div class=\"card-options\">\n          <form action=\"\" *ngIf=\"search\">\n            <div class=\"input-group\">\n              <input type=\"text\"\n                     class=\"form-control form-control-sm\" [placeholder]=\"search.placeholder\" name=\"s\" [(ngModel)]=\"search.value\">\n              <span class=\"input-group-btn ml-2\">\n                <button class=\"btn btn-sm btn-default\" type=\"submit\" (click)=\"action.emit( { type: 'SEARCH', payload: search.value } )\">\n                  <span class=\"fe fe-search\"></span>\n                </button>\n              </span>\n            </div>\n          </form>\n          <ng-container *ngIf=\"!buttons\">\n            <a class=\"card-options-collapse\" data-toggle=\"card-collapse\" href=\"#\"\n               [class.hide]=\"!allowCollapse\"\n               (click)=\"collapse($event)\">\n              <i class=\"fe\" [class.fe-chevron-down]=\"collapsed\" [class.fe-chevron-up]=\"!collapsed\"></i>\n            </a>\n            <a class=\"card-options-fullscreen\" data-toggle=\"card-fullscreen\" href=\"#\"\n               [class.hide]=\"!allowFullScreen\"\n               (click)=\"goFullScreen($event)\">\n              <i class=\"fe fe-maximize\"></i>\n            </a>\n            <a class=\"card-options-remove\" data-toggle=\"card-remove\" href=\"#\"\n               [class.hide]=\"!allowHide\"\n               (click)=\"hide($event)\">\n              <i class=\"fe fe-x\"></i>\n            </a>\n          </ng-container>\n          <ng-container *ngIf=\"buttons\">\n            <ng-container *ngFor=\"let button of buttons\">\n              <button class=\"btn btn-secondary btn-sm ml-2\"\n                      *ngIf=\"button.type === 'button'\"\n                      (click)=\"action.emit( { type: button.action, payload: button.payload || '' })\">\n                <i *ngIf=\"button.icon\" [class]=\"button.icon\"></i>\n                {{ button.text }}\n              </button>\n              <label class=\"custom-switch m-0\"\n                     *ngIf=\"button.type === 'switch'\">\n                <input type=\"checkbox\" [value]=\"button.checked\" class=\"custom-switch-input\"\n                       (change)=\"action.emit( { type: 'SWITCH', payload: button.checked } )\"\n                       [checked]=\"button.checked || false\">\n                <span class=\"custom-switch-indicator\"></span>\n              </label>\n            </ng-container>\n          </ng-container>\n        </div>\n      </div>\n      <div [class.hide]=\"collapsed\" [class.show]=\"!collapsed\">\n        <ng-container *ngIf=\"alert\">\n          <div class=\"card-alert alert alert-{{alert.type}} mb-0\">\n            {{alert.text}}\n          </div>\n        </ng-container>\n        <ng-content></ng-content>\n        <div class=\"card-footer\" *ngIf=\"footer\">{{footer}}</div>\n      </div>\n    </div>\n  ",
-                styles: ["\n    .hide {\n      display: none;\n    }\n    .show {\n      display: block;\n    }\n  "]
+                styles: [
+                    "\n    .hide {\n      display: none;\n    }\n    .show {\n      display: block;\n    }\n  ",
+                ],
             },] },
@@ -502,3 +310,3 @@ ];
                 template: "\n    <div class=\"card-body\">\n      <ng-container *ngIf=\"loader\">\n        <div class=\"dimmer active\">\n          <div class=\"loader\"></div>\n          <div class=\"dimmer-content\">\n            <ng-content></ng-content>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"!loader\">\n        <ng-content></ng-content>\n      </ng-container>\n    </div>\n  ",
-                styles: []
+                styles: [],
             },] },
@@ -509,2 +317,216 @@ ];
 };
+var CardModule = /** @class */ (function () {
+    function CardModule() {
+    }
+    return CardModule;
+}());
+CardModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule, FormsModule],
+                declarations: [CardComponent, CardBodyComponent],
+                exports: [CardComponent, CardBodyComponent],
+            },] },
+];
+var UiLink = /** @class */ (function () {
+    function UiLink() {
+    }
+    return UiLink;
+}());
+var LinkContentComponent = /** @class */ (function () {
+    function LinkContentComponent() {
+    }
+    return LinkContentComponent;
+}());
+LinkContentComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'ui-link-content',
+                template: "\n    <ui-badge *ngIf=\"link.badge\" class=\"float-right\" [color]=\"link.badge.color\" [label]=\"link.badge.label\">\n    </ui-badge>\n    <i *ngIf=\"link.icon\" [class]=\"link.icon\"></i>\n    <span *ngIf=\"link.label\"  [class]=\"link.labelClass\">{{ link.label }}</span>\n  ",
+            },] },
+];
+LinkContentComponent.propDecorators = {
+    "link": [{ type: Input },],
+};
+var LinkComponent = /** @class */ (function () {
+    function LinkComponent() {
+        this.link = {};
+    }
+    return LinkComponent;
+}());
+LinkComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'ui-link',
+                template: "\n    <ng-container *ngIf=\"link && link.external; else internal\">\n      <a [href]=\"link.link\" [class]=\"link.linkClass\" [target]=\"link.target || '_self' \">\n        <ui-link-content [link]=\"link\"></ui-link-content>\n      </a>\n    </ng-container>\n    <ng-template #internal>\n      <a *ngIf=\"link\" [routerLink]=\"link.link\" [class]=\"link.linkClass\">\n        <ui-link-content [link]=\"link\"></ui-link-content>\n      </a>\n    </ng-template>\n  ",
+            },] },
+];
+LinkComponent.propDecorators = {
+    "link": [{ type: Input },],
+};
+var LinksComponent = /** @class */ (function () {
+    function LinksComponent() {
+    }
+    return LinksComponent;
+}());
+LinksComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'ui-links',
+                template: "\n    <ng-container *ngFor=\"let link of links\">\n      <ui-link [link]=\"link\"></ui-link>\n    </ng-container>\n  ",
+            },] },
+];
+LinksComponent.propDecorators = {
+    "links": [{ type: Input },],
+};
+var LinkModule = /** @class */ (function () {
+    function LinkModule() {
+    }
+    return LinkModule;
+}());
+LinkModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule, RouterModule, BadgeModule
+                ],
+                declarations: [LinkComponent, LinkContentComponent, LinksComponent],
+                exports: [LinkComponent, LinkContentComponent, LinksComponent]
+            },] },
+];
+var UiNotification = /** @class */ (function () {
+    function UiNotification() {
+    }
+    return UiNotification;
+}());
+var UiBadge = /** @class */ (function () {
+    function UiBadge() {
+    }
+    return UiBadge;
+}());
+var UiProfile = /** @class */ (function () {
+    function UiProfile() {
+    }
+    return UiProfile;
+}());
+var UiLayout = /** @class */ (function () {
+    function UiLayout() {
+    }
+    return UiLayout;
+}());
+var UiService$1 = /** @class */ (function () {
+    function UiService$1() {
+        this.configSubject = new ReplaySubject();
+        this.config = {
+            appLink: '/',
+            appLogo: 'assets/brand/tabler.svg',
+            appName: 'Tabler for Angular',
+        };
+        this.config$ = this.configSubject.asObservable();
+        this.updateLayout();
+    }
+    Object.defineProperty(UiService$1.prototype, "appLink", {
+        set: function (link) {
+            this.config.appLink = link;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(UiService$1.prototype, "appLogo", {
+        set: function (logo) {
+            this.config.appLogo = logo;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(UiService$1.prototype, "appName", {
+        set: function (name) {
+            this.config.appName = name;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(UiService$1.prototype, "headerNav", {
+        set: function (items) {
+            this.config.headerNav = items;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(UiService$1.prototype, "headerSubNav", {
+        set: function (items) {
+            this.config.headerSubNav = items;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(UiService$1.prototype, "profile", {
+        set: function (profile) {
+            this.config.profile = profile;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(UiService$1.prototype, "profileNav", {
+        set: function (items) {
+            this.config.profileNav = items;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(UiService$1.prototype, "notifications", {
+        set: function (notifications) {
+            this.config.notifications = notifications;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(UiService$1.prototype, "footerNav", {
+        set: function (items) {
+            this.config.footerNav = items;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(UiService$1.prototype, "footerText", {
+        set: function (text) {
+            this.config.footerText = text;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(UiService$1.prototype, "footerSubNav", {
+        set: function (items) {
+            this.config.footerSubNav = items;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(UiService$1.prototype, "footerSubText", {
+        set: function (text) {
+            this.config.footerSubText = text;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    UiService$1.prototype.updateLayout = function (config) {
+        if (config === void 0) { config = {}; }
+        this.config = Object.assign({}, this.config, config);
+        this.configSubject.next(this.config);
+    };
+    return UiService$1;
+}());
+UiService$1.decorators = [
+    { type: Injectable },
+];
+UiService$1.ctorParameters = function () { return []; };
+var FooterComponent = /** @class */ (function () {
+    function FooterComponent() {
+    }
+    return FooterComponent;
+}());
+FooterComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'ui-footer',
+                template: "\n    <ng-container *ngIf=\"config.footerSubNav || config.footerSubText\" >\n      <ui-footer-links [config]=\"config\"></ui-footer-links>\n    </ng-container>\n    <ng-container *ngIf=\"config.footerNav || config.footerText\" >\n      <footer class=\"footer\">\n        <div class=\"container\">\n          <div class=\"row align-items-center flex-row-reverse\">\n            <div class=\"col-auto ml-auto\">\n              <div class=\"row align-items-center\">\n                <div class=\"col-auto\">\n                  <ul class=\"list-inline list-inline-dots mb-0\">\n                    <ng-container *ngFor=\"let link of config?.footerNav\">\n                      <li class=\"list-inline-item\">\n                        <a [href]=\"link.link\" [class]=\"link.class\" [target]=\"link.target || '_self'\">\n                          <i [class]=\"link.icon\"></i>\n                          {{ link.label }}\n                        </a>\n                      </li>\n                    </ng-container>\n                  </ul>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-12 col-lg-auto mt-3 mt-lg-0 text-center\" [innerHtml]=\"config?.footerText\">\n            </div>\n          </div>\n        </div>\n      </footer>\n    </ng-container>\n  ",
+            },] },
+];
+FooterComponent.propDecorators = {
+    "config": [{ type: Input },],
+};
 var FooterLinksComponent = /** @class */ (function () {
@@ -518,4 +540,3 @@ function FooterLinksComponent() {
                 selector: 'ui-footer-links',
-                template: "\n    <div class=\"footer\" *ngIf=\"config\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-lg-8\">\n            <div class=\"row\">\n              <div class=\"col-6 col-md-3\">\n                <ul class=\"list-unstyled mb-0\">\n                  <li><a href=\"#\">First link</a></li>\n                  <li><a href=\"#\">Second link</a></li>\n                </ul>\n              </div>\n              <div class=\"col-6 col-md-3\">\n                <ul class=\"list-unstyled mb-0\">\n                  <li><a href=\"#\">Third link</a></li>\n                  <li><a href=\"#\">Fourth link</a></li>\n                </ul>\n              </div>\n              <div class=\"col-6 col-md-3\">\n                <ul class=\"list-unstyled mb-0\">\n                  <li><a href=\"#\">Fifth link</a></li>\n                  <li><a href=\"#\">Sixth link</a></li>\n                </ul>\n              </div>\n              <div class=\"col-6 col-md-3\">\n                <ul class=\"list-unstyled mb-0\">\n                  <li><a href=\"#\">Other link</a></li>\n                  <li><a href=\"#\">Last link</a></li>\n                </ul>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-lg-4 mt-4 mt-lg-0\" [innerHtml]=\"config?.description\"></div>\n        </div>\n      </div>\n    </div>\n  ",
-                styles: []
+                template: "\n    <div class=\"footer\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-lg-8\">\n            <div class=\"row\">\n              <div class=\"col-6 col-md-3\" *ngFor=\"let links of config.footerSubNav\">\n                <ul class=\"list-unstyled mb-0\">\n                  <li *ngFor=\"let link of links\">\n                    <ui-link [link]=\"link\"></ui-link>\n                  </li>\n                </ul>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-lg-4 mt-4 mt-lg-0\" [innerHtml]=\"config.footerSubText\"></div>\n        </div>\n      </div>\n    </div>\n  ",
             },] },
@@ -526,20 +547,156 @@ ];
 };
-var HighlightComponent = /** @class */ (function () {
-    function HighlightComponent() {
-        this.icon = 'fe fe-code';
-        this.name = 'Code snippet';
+var FooterModule = /** @class */ (function () {
+    function FooterModule() {
     }
-    return HighlightComponent;
+    return FooterModule;
 }());
-HighlightComponent.decorators = [
+FooterModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule, LinkModule],
+                declarations: [FooterComponent, FooterLinksComponent],
+                exports: [FooterComponent],
+            },] },
+];
+var TimeAgoPipe = /** @class */ (function () {
+    function TimeAgoPipe(changeDetectorRef, ngZone) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.ngZone = ngZone;
+    }
+    TimeAgoPipe.prototype.transform = function (value) {
+        var _this = this;
+        this.removeTimer();
+        var d = new Date(value);
+        var now = new Date();
+        var seconds = Math.round(Math.abs((now.getTime() - d.getTime()) / 1000));
+        var timeToUpdate = Number.isNaN(seconds) ? 1000 : this.getSecondsUntilUpdate(seconds) * 1000;
+        this.timer = this.ngZone.runOutsideAngular(function () {
+            if (typeof window !== 'undefined') {
+                return window.setTimeout(function () {
+                    _this.ngZone.run(function () { return _this.changeDetectorRef.markForCheck(); });
+                }, timeToUpdate);
+            }
+            return null;
+        });
+        var minutes = Math.round(Math.abs(seconds / 60));
+        var hours = Math.round(Math.abs(minutes / 60));
+        var days = Math.round(Math.abs(hours / 24));
+        var months = Math.round(Math.abs(days / 30.416));
+        var years = Math.round(Math.abs(days / 365));
+        if (Number.isNaN(seconds)) {
+            return '';
+        }
+        else if (seconds <= 45) {
+            return 'a few seconds ago';
+        }
+        else if (seconds <= 90) {
+            return 'a minute ago';
+        }
+        else if (minutes <= 45) {
+            return minutes + ' minutes ago';
+        }
+        else if (minutes <= 90) {
+            return 'an hour ago';
+        }
+        else if (hours <= 22) {
+            return hours + ' hours ago';
+        }
+        else if (hours <= 36) {
+            return 'a day ago';
+        }
+        else if (days <= 25) {
+            return days + ' days ago';
+        }
+        else if (days <= 45) {
+            return 'a month ago';
+        }
+        else if (days <= 345) {
+            return months + ' months ago';
+        }
+        else if (days <= 545) {
+            return 'a year ago';
+        }
+        else {
+            return years + ' years ago';
+        }
+    };
+    TimeAgoPipe.prototype.ngOnDestroy = function () {
+        this.removeTimer();
+    };
+    TimeAgoPipe.prototype.removeTimer = function () {
+        if (this.timer) {
+            window.clearTimeout(this.timer);
+            this.timer = null;
+        }
+    };
+    TimeAgoPipe.prototype.getSecondsUntilUpdate = function (seconds) {
+        var min = 60;
+        var hr = min * 60;
+        var day = hr * 24;
+        if (seconds < min) {
+            return 2;
+        }
+        else if (seconds < hr) {
+            return 30;
+        }
+        else if (seconds < day) {
+            return 300;
+        }
+        else {
+            return 3600;
+        }
+    };
+    return TimeAgoPipe;
+}());
+TimeAgoPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'timeAgo',
+                pure: false,
+            },] },
+];
+TimeAgoPipe.ctorParameters = function () { return [
+    { type: ChangeDetectorRef, },
+    { type: NgZone, },
+]; };
+var HeaderComponent = /** @class */ (function () {
+    function HeaderComponent() {
+    }
+    HeaderComponent.prototype.handleAction = function ($event) {
+        console.log('Header Event');
+        console.log($event);
+    };
+    return HeaderComponent;
+}());
+HeaderComponent.decorators = [
     { type: Component, args: [{
-                selector: 'ui-highlight',
-                template: "\n    <ui-card [header]=\"name\" [icon]=\"icon\" [buttons]=\"[]\">\n      <div class=\"p-5\">\n        <pre class=\"m-0 p-0\">\n          <code highlight [textContent]=\"code\"></code>\n        </pre>\n      </div>\n    </ui-card>\n  ",
+                selector: 'ui-header',
+                template: "\n    <div class=\"header\">\n      <div class=\"container\">\n        <div class=\"d-flex\">\n          <a class=\"navbar-brand\" [routerLink]=\"config.appLink\">\n            <img *ngIf=\"config.appLogo\" [attr.src]=\"config.appLogo\" class=\"navbar-brand-img\">\n            <span *ngIf=\"config.appName\" class=\"d-none d-md-inline\">\n              {{ config.appName }}\n            </span>\n          </a>\n          <div class=\"ml-auto d-flex order-lg-2\">\n            <ui-links [links]=\"config.headerSubNav\" class=\"nav-item\"></ui-links>\n            <ui-header-notifications [notifications]=\"config.notifications\"\n                                     (action)=\"handleAction($event)\"></ui-header-notifications>\n            <ui-header-profile [profile]=\"config.profile\"\n                               [links]=\"config.profileNav\"></ui-header-profile>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"header-nav\" *ngIf=\"config.headerNav\">\n      <div class=\"container\">\n        <div class=\"row align-items-center\">\n          <div class=\"col\">\n            <ui-menu [links]=\"config.headerNav\"></ui-menu>\n          </div>\n        </div>\n      </div>\n    </div>\n  ",
             },] },
 ];
-HighlightComponent.propDecorators = {
-    "code": [{ type: Input },],
-    "icon": [{ type: Input },],
-    "name": [{ type: Input },],
+HeaderComponent.propDecorators = {
+    "config": [{ type: Input },],
 };
+var HeaderNotificationItemComponent = /** @class */ (function () {
+    function HeaderNotificationItemComponent() {
+        this.action = new EventEmitter();
+    }
+    HeaderNotificationItemComponent.prototype.onClick = function (e) {
+        e.preventDefault();
+        this.action.emit({
+            type: 'NOTIFICATION_CLICK',
+            payload: this.notification,
+        });
+    };
+    return HeaderNotificationItemComponent;
+}());
+HeaderNotificationItemComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'ui-header-notification-item',
+                template: "\n    <a href=\"#\" class=\"dropdown-item d-flex\" (click)=\"onClick($event)\">\n      <ui-avatar [text]=\"notification.avatarText\" class=\"mr-3 align-self-center\"></ui-avatar>\n      <div>\n        <strong>{{ notification.from }}</strong> {{ notification.text }}\n        <div class=\"small text-muted\">\n          {{ notification.date | timeAgo }}\n        </div>\n      </div>\n    </a>\n  ",
+                styles: [],
+            },] },
+];
+HeaderNotificationItemComponent.propDecorators = {
+    "notification": [{ type: Input },],
+    "action": [{ type: Output },],
+};
 var HeaderNotificationsComponent = /** @class */ (function () {
@@ -562,3 +719,3 @@ function HeaderNotificationsComponent() {
                 template: "\n    <div class=\"dropdown d-none d-md-flex py-2\" dropdown *ngIf=\"notifications\">\n      <a dropdownToggle class=\"nav-link icon\" data-toggle=\"dropdown\">\n        <i class=\"fe fe-bell\"></i>\n        <span class=\"nav-unread\"></span>\n      </a>\n      <div *dropdownMenu class=\"dropdown-menu dropdown-menu-right dropdown-menu-arrow\">\n        <ui-header-notification-item *ngFor=\"let notification of notifications\"\n                                     [notification]=\"notification\"\n                                     (action)=\"action.emit($event)\">\n        </ui-header-notification-item>\n        <div class=\"dropdown-divider\"></div>\n        <a href=\"#\" class=\"dropdown-item text-center text-muted-dark\"\n           (click)=\"onClick($event)\">\n          {{ actionText }}\n        </a>\n      </div>\n    </div>\n  ",
-                styles: []
+                styles: [],
             },] },
@@ -572,23 +729,2 @@ ];
 };
-var HeaderNotificationItemComponent = /** @class */ (function () {
-    function HeaderNotificationItemComponent() {
-        this.action = new EventEmitter();
-    }
-    HeaderNotificationItemComponent.prototype.onClick = function (e) {
-        e.preventDefault();
-        this.action.emit({ type: 'NOTIFICATION_CLICK', payload: this.notification });
-    };
-    return HeaderNotificationItemComponent;
-}());
-HeaderNotificationItemComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ui-header-notification-item',
-                template: "\n    <a href=\"#\" class=\"dropdown-item d-flex\" (click)=\"onClick($event)\">\n      <ui-avatar [text]=\"notification.avatarText\" class=\"mr-3 align-self-center\"></ui-avatar>\n      <div>\n        <strong>{{ notification.from }}</strong> {{ notification.text }}\n        <div class=\"small text-muted\">\n          {{ notification.date | timeAgo }}\n        </div>\n      </div>\n    </a>\n  ",
-                styles: []
-            },] },
-];
-HeaderNotificationItemComponent.propDecorators = {
-    "notification": [{ type: Input },],
-    "action": [{ type: Output },],
-};
 var HeaderProfileComponent = /** @class */ (function () {
@@ -602,3 +738,3 @@ function HeaderProfileComponent() {
                 selector: 'ui-header-profile',
-                template: "\n    <div class=\"dropdown\" dropdown *ngIf=\"profile\">\n      <a class=\"nav-link pr-0\" data-toggle=\"dropdown\" dropdownToggle>\n        <ui-avatar [image]=\"profile.avatar\" [text]=\"profile.avatarText\"></ui-avatar>\n        <span class=\"ml-2 d-none d-lg-block\">\n          <span class=\"text-default\">{{ profile.name }}</span>\n          <small class=\"text-muted d-block mt-1\">\n            {{ profile.description || profile.title || profile.email }}\n          </small>\n        </span>\n      </a>\n      <div *dropdownMenu class=\"dropdown-menu dropdown-menu-right dropdown-menu-arrow\">\n        <ng-container *ngFor=\"let link of links\">\n          <ui-header-profile-link [link]=\"link\"></ui-header-profile-link>\n        </ng-container>\n      </div>\n    </div>\n  ",
+                template: "\n    <div class=\"dropdown\" dropdown *ngIf=\"profile\">\n      <a class=\"nav-link pr-0\" data-toggle=\"dropdown\" dropdownToggle>\n        <ui-avatar [image]=\"profile.avatar\" [text]=\"profile.avatarText\"></ui-avatar>\n        <span class=\"ml-2 d-none d-lg-block\">\n          <span class=\"text-default\">{{ profile.name }}</span>\n          <small class=\"text-muted d-block mt-1\">\n            {{ profile.description || profile.title || profile.email }}\n          </small>\n        </span>\n      </a>\n      <div class=\"dropdown-menu dropdown-menu-right dropdown-menu-arrow\" *dropdownMenu>\n        <ng-container *ngFor=\"let link of links\">\n          <div *ngIf=\"link.divider; else linkEl\" class=\"dropdown-divider\"></div>\n          <ng-template #linkEl>\n            <ui-link [link]=\"link\"></ui-link>\n          </ng-template>\n        </ng-container>\n      </div>\n    </div>\n  ",
             },] },
@@ -610,73 +746,135 @@ ];
 };
-var HeaderProfileLinkComponent = /** @class */ (function () {
-    function HeaderProfileLinkComponent() {
+var MenuComponent = /** @class */ (function () {
+    function MenuComponent() {
+        this.links = [];
     }
-    return HeaderProfileLinkComponent;
+    return MenuComponent;
 }());
-HeaderProfileLinkComponent.decorators = [
+MenuComponent.decorators = [
     { type: Component, args: [{
-                selector: 'ui-header-profile-link',
-                template: "\n    <a *ngIf=\"link.link\" class=\"dropdown-item\" [routerLink]=\"link.link\">\n      <ui-badge *ngIf=\"link.badge\" class=\"float-right\" [badge]=\"link.badge\"></ui-badge>\n      <i *ngIf=\"link.icon\" [class]=\"link.icon\" [class.dropdown-icon]=\"true\"></i>\n      <span *ngIf=\"link.label\">{{link.label}}</span>\n    </a>\n    <div *ngIf=\"link.divider\" class=\"dropdown-divider\"></div>\n  ",
-                styles: []
+                selector: 'ui-menu',
+                template: "\n    <ul class=\"nav nav-tabs\" style=\"white-space: nowrap;\">\n      <ng-container *ngFor=\"let item of links\">\n        <li class=\"nav-item d-inline-block\">\n          <a href=\"#\" [routerLink]=\"item.link\" class=\"nav-link\" routerLinkActive=\"active\">\n            <i class=\"{{ item.icon }}\" *ngIf=\"item.icon\"></i>\n            {{item.label}}\n          </a>\n          <div class=\"nav-submenu nav\" *ngIf=\"item.children\">\n            <ng-container *ngFor=\"let sub of item.children\">\n              <a href=\"#\" class=\"nav-item\" [routerLink]=\"sub.link\" routerLinkActive=\"active\">\n                <i class=\"{{ sub.icon }}\" *ngIf=\"sub.icon\"></i>\n                {{sub.label}}\n              </a>\n            </ng-container>\n          </div>\n        </li>\n      </ng-container>\n    </ul>\n  ",
+                styles: [],
             },] },
 ];
-HeaderProfileLinkComponent.propDecorators = {
-    "link": [{ type: Input },],
+MenuComponent.propDecorators = {
+    "links": [{ type: Input },],
 };
-var BadgeComponent = /** @class */ (function () {
-    function BadgeComponent() {
+var HeaderModule = /** @class */ (function () {
+    function HeaderModule() {
     }
-    BadgeComponent.prototype.ngOnInit = function () {
-        if (this.badge) {
-            this.label = this.badge.label;
-            this.type = this.badge.type;
-        }
-    };
-    return BadgeComponent;
+    return HeaderModule;
 }());
-BadgeComponent.decorators = [
+HeaderModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule, RouterModule, AvatarModule, BadgeModule, BsDropdownModule, LinkModule],
+                declarations: [
+                    TimeAgoPipe,
+                    HeaderComponent,
+                    HeaderNotificationsComponent,
+                    HeaderNotificationItemComponent,
+                    HeaderProfileComponent,
+                    MenuComponent,
+                ],
+                exports: [
+                    HeaderComponent,
+                ],
+            },] },
+];
+var LayoutComponent = /** @class */ (function () {
+    function LayoutComponent(ui) {
+        this.ui = ui;
+    }
+    return LayoutComponent;
+}());
+LayoutComponent.decorators = [
     { type: Component, args: [{
-                selector: 'ui-badge',
-                template: "\n    <span class=\"badge badge-{{type}}\">\n      {{label}}\n    </span>\n  ",
+                selector: 'ui-layout',
+                template: "\n    <div class=\"page\" *ngIf=\"ui.config$ | async as config; else loading\">\n      <div class=\"page-main\">\n        <ui-header [config]=\"config\"></ui-header>\n        <div class=\"page-content\">\n          <router-outlet></router-outlet>\n        </div>\n        <ui-footer [config]=\"config\"></ui-footer>\n      </div>\n    </div>\n    <ng-template #loading>\n      Loading...\n    </ng-template>\n  ",
             },] },
 ];
-BadgeComponent.propDecorators = {
-    "label": [{ type: Input },],
-    "type": [{ type: Input },],
+LayoutComponent.ctorParameters = function () { return [
+    { type: UiService$1, },
+]; };
+var LayoutBaseComponent = /** @class */ (function () {
+    function LayoutBaseComponent() {
+    }
+    return LayoutBaseComponent;
+}());
+LayoutBaseComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'ui-layout-base',
+                template: "\n    <div class=\"page\">\n      <router-outlet></router-outlet>\n    </div>\n  ",
+            },] },
+];
+var LayoutModule = /** @class */ (function () {
+    function LayoutModule() {
+    }
+    return LayoutModule;
+}());
+LayoutModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule, RouterModule, HeaderModule, FooterModule],
+                declarations: [LayoutComponent, LayoutBaseComponent],
+                exports: [LayoutComponent, LayoutBaseComponent],
+            },] },
+];
+var PageComponent = /** @class */ (function () {
+    function PageComponent() {
+    }
+    return PageComponent;
+}());
+PageComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'ui-page',
+                template: "\n     <div class=\"container\">\n      <ng-content></ng-content>\n    </div>\n  ",
+            },] },
+];
+var PageTitleComponent = /** @class */ (function () {
+    function PageTitleComponent() {
+        this.badgeStyle = 'default';
+        this.header = true;
+    }
+    return PageTitleComponent;
+}());
+PageTitleComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'ui-page-title',
+                template: "\n    <div [class.page-header]=\"header\">\n      <h1 class=\"page-title\">\n        <i *ngIf=\"icon\" class=\"{{ icon }} page-title-icon m-3\"></i>\n        {{ title }}\n        <small *ngIf=\"badge\" class=\"badge badge-{{badgeStyle}} m-3\">\n          {{badge}}\n        </small>\n      </h1>\n      <div *ngIf=\"subTitle\" class=\"page-subtitle\">\n        {{subTitle}}\n      </div>\n      <div class=\"page-options\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  ",
+                styles: [],
+            },] },
+];
+PageTitleComponent.propDecorators = {
     "badge": [{ type: Input },],
+    "badgeStyle": [{ type: Input },],
+    "header": [{ type: Input },],
+    "icon": [{ type: Input },],
+    "title": [{ type: Input },],
+    "subTitle": [{ type: Input },],
 };
-var HeaderLinksComponent = /** @class */ (function () {
-    function HeaderLinksComponent() {
-        this.links = [];
+var PageModule = /** @class */ (function () {
+    function PageModule() {
     }
-    return HeaderLinksComponent;
+    return PageModule;
 }());
-HeaderLinksComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ui-header-links',
-                template: "\n    <ng-container *ngFor=\"let link of links\">\n      <a [href]=\"link.link\" [class]=\"link.class\" [target]=\"link.target || '_self' \">\n        <i [class]=\"link.icon\"></i>\n        <span class=\"d-none d-lg-inline\">{{ link.label }}</span>\n      </a>\n    </ng-container>\n  ",
+PageModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule],
+                declarations: [PageComponent, PageTitleComponent],
+                exports: [PageComponent, PageTitleComponent],
             },] },
 ];
-HeaderLinksComponent.propDecorators = {
-    "links": [{ type: Input },],
-};
 var uiModules = [
     AlertModule,
+    AvatarModule,
+    BadgeModule,
+    ButtonModule,
+    CardModule,
+    FooterModule,
+    HeaderModule,
+    LayoutModule,
+    LinkModule,
+    PageModule,
 ];
-var exported = __spread(uiModules, [
-    LayoutComponent,
-    LayoutBaseComponent,
-    PageComponent,
-    PageTitleComponent,
-    DashboardStatsComponent,
-    DashboardIconBoxComponent,
-    DashboardDigitComponent,
-    DashboardChartComponent,
-    DashboardChartBgComponent,
-    AvatarComponent,
-    CardComponent,
-    CardBodyComponent,
-    HighlightComponent,
-    MenuComponent,
-]);
+var exported = __spread(uiModules);
 var UiModule = /** @class */ (function () {
@@ -694,46 +892,14 @@ function UiModule() {
                     ReactiveFormsModule,
-                    NgxChartsModule,
-                    ChartsModule,
                     NgPipesModule,
-                    BsDropdownModule.forRoot(),
-                    HighlightModule.forRoot({
-                        theme: 'atom-one-light',
-                    })
+                    BsDropdownModule$1.forRoot()
                 ], uiModules),
-                declarations: [
-                    HeaderComponent,
-                    FooterComponent,
-                    FooterLinksComponent,
-                    LayoutComponent,
-                    LayoutBaseComponent,
-                    MenuComponent,
-                    PageTitleComponent,
-                    PageComponent,
-                    DashboardStatsComponent,
-                    DashboardIconBoxComponent,
-                    DashboardDigitComponent,
-                    DashboardChartComponent,
-                    AvatarComponent,
-                    DashboardChartBgComponent,
-                    CardComponent,
-                    CardBodyComponent,
-                    HighlightComponent,
-                    HeaderNotificationsComponent,
-                    HeaderNotificationItemComponent,
-                    HeaderProfileComponent,
-                    HeaderProfileLinkComponent,
-                    BadgeComponent,
-                    TimeAgoPipe,
-                    HeaderLinksComponent,
-                ],
+                declarations: [],
                 exports: __spread(exported, [
-                    NgxChartsModule,
-                    ChartsModule,
                     NgPipesModule,
-                    RouterModule,
-                ])
+                ]),
+                providers: [UiService],
             },] },
 ];
 
-export { UiModule, LayoutComponent, LayoutBaseComponent, AlertModule, AvatarComponent as ɵo, BadgeComponent as ɵx, CardBodyComponent as ɵr, CardComponent as ɵq, DashboardChartBgComponent as ɵp, DashboardChartComponent as ɵn, DashboardDigitComponent as ɵm, DashboardIconBoxComponent as ɵl, DashboardStatsComponent as ɵk, FooterLinksComponent as ɵe, FooterComponent as ɵd, HeaderLinksComponent as ɵz, HeaderNotificationItemComponent as ɵu, HeaderNotificationsComponent as ɵt, HeaderProfileLinkComponent as ɵw, HeaderProfileComponent as ɵv, HeaderComponent as ɵc, HighlightComponent as ɵs, MenuComponent as ɵh, PageTitleComponent as ɵi, PageComponent as ɵj, LayoutBaseComponent as ɵg, LayoutComponent as ɵf, AlertModule as ɵa, AlertComponent as ɵb, TimeAgoPipe as ɵy };
+export { UiModule, UiService$1 as UiService, UiProfile, UiNotification, UiLayout, UiBadge, AlertModule, AvatarModule, BadgeModule, ButtonModule, CardModule, FooterModule, HeaderModule, LayoutModule, LayoutComponent, LayoutBaseComponent, LinkModule, UiLink, PageModule, AlertModule as ɵa, AvatarModule as ɵb, BadgeModule as ɵc, ButtonModule as ɵd, CardModule as ɵe, FooterModule as ɵf, HeaderModule as ɵg, LayoutModule as ɵh, LinkModule as ɵi, PageModule as ɵj };
 //# sourceMappingURL=tabler-angular-ui.js.map

package.json

 {
   "$schema": "../../node_modules/ng-packagr/package.schema.json",
   "name": "@tabler/angular-ui",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "publishConfig": {
@@ -6,0 +6,0 @@ "access": "public"

public_api.d.ts

@@ -1,3 +0,3 @@
-export * from './src/containers';
 export * from './src/modules';
 export { UiModule } from './src/ui.module';
+export { UiService, UiProfile, UiNotification, UiLayout, UiBadge } from './src/services/ui.service';

src/modules/index.d.ts

@@ -1,1 +0,10 @@
-export { AlertModule } from './alert/alert.module';
+export * from './alert';
+export * from './avatar';
+export * from './badge';
+export * from './button';
+export * from './card';
+export * from './footer';
+export * from './header';
+export * from './layout';
+export * from './link';
+export * from './page';

tabler-angular-ui.d.ts

@@ -5,27 +5,2 @@ /**
 export * from './index';
-export { AvatarComponent as ɵo } from './src/components/avatar/avatar.component';
-export { BadgeComponent as ɵx } from './src/components/badge/badge.component';
-export { CardBodyComponent as ɵr } from './src/components/card-body/card-body.component';
-export { CardComponent as ɵq } from './src/components/card/card.component';
-export { DashboardChartBgComponent as ɵp } from './src/components/dashboard-chart-bg/dashboard-chart-bg.component';
-export { DashboardChartComponent as ɵn } from './src/components/dashboard-chart/dashboard-chart.component';
-export { DashboardDigitComponent as ɵm } from './src/components/dashboard-digit/dashboard-digit.component';
-export { DashboardIconBoxComponent as ɵl } from './src/components/dashboard-icon-box/dashboard-icon-box.component';
-export { DashboardStatsComponent as ɵk } from './src/components/dashboard-stats/dashboard-stats.component';
-export { FooterLinksComponent as ɵe } from './src/components/footer-links/footer-links.component';
-export { FooterComponent as ɵd } from './src/components/footer/footer.component';
-export { HeaderLinksComponent as ɵz } from './src/components/header-links/header-links.component';
-export { HeaderNotificationItemComponent as ɵu } from './src/components/header-notification-item/header-notification-item.component';
-export { HeaderNotificationsComponent as ɵt } from './src/components/header-notifications/header-notifications.component';
-export { HeaderProfileLinkComponent as ɵw } from './src/components/header-profile-link/header-profile-link.component';
-export { HeaderProfileComponent as ɵv } from './src/components/header-profile/header-profile.component';
-export { HeaderComponent as ɵc } from './src/components/header/header.component';
-export { HighlightComponent as ɵs } from './src/components/highlight/highlight.component';
-export { MenuComponent as ɵh } from './src/components/menu/menu.component';
-export { PageTitleComponent as ɵi } from './src/components/page-title/page-title.component';
-export { PageComponent as ɵj } from './src/components/page/page.component';
-export { LayoutBaseComponent as ɵg } from './src/containers/layout-base/layout-base.component';
-export { LayoutComponent as ɵf } from './src/containers/layout/layout.component';
-export { AlertModule as ɵa } from './src/modules/alert/alert.module';
-export { AlertComponent as ɵb } from './src/modules/alert/components/alert/alert.component';
-export { TimeAgoPipe as ɵy } from './src/pipes/time-ago.pipe';
+export { AlertModule as ɵa, AvatarModule as ɵb, BadgeModule as ɵc, ButtonModule as ɵd, CardModule as ɵe, FooterModule as ɵf, HeaderModule as ɵg, LayoutModule as ɵh, LinkModule as ɵi, PageModule as ɵj } from './src/modules';

tabler-angular-ui.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":4,"exports":[{"from":"./src/modules"}],"metadata":{"UiModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":62,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":64,"character":4},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":65,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":66,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":67,"character":4},{"__symbolic":"reference","module":"@swimlane/ngx-charts","name":"NgxChartsModule","line":68,"character":4},{"__symbolic":"reference","module":"ng2-charts","name":"ChartsModule","line":69,"character":4},{"__symbolic":"reference","module":"angular-pipes","name":"NgPipesModule","line":70,"character":4},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"ngx-bootstrap/dropdown","name":"BsDropdownModule","line":71,"character":4},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"ngx-highlightjs","name":"HighlightModule","line":72,"character":4},"member":"forRoot"},"arguments":[{"theme":"atom-one-light"}]},{"__symbolic":"reference","name":"ɵa"}],"declarations":[{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵj"},{"__symbolic":"reference","name":"ɵk"},{"__symbolic":"reference","name":"ɵl"},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","name":"ɵn"},{"__symbolic":"reference","name":"ɵo"},{"__symbolic":"reference","name":"ɵp"},{"__symbolic":"reference","name":"ɵq"},{"__symbolic":"reference","name":"ɵr"},{"__symbolic":"reference","name":"ɵs"},{"__symbolic":"reference","name":"ɵt"},{"__symbolic":"reference","name":"ɵu"},{"__symbolic":"reference","name":"ɵv"},{"__symbolic":"reference","name":"ɵw"},{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","name":"ɵy"},{"__symbolic":"reference","name":"ɵz"}],"exports":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","name":"ɵj"},{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵk"},{"__symbolic":"reference","name":"ɵl"},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","name":"ɵn"},{"__symbolic":"reference","name":"ɵp"},{"__symbolic":"reference","name":"ɵo"},{"__symbolic":"reference","name":"ɵq"},{"__symbolic":"reference","name":"ɵr"},{"__symbolic":"reference","name":"ɵs"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","module":"@swimlane/ngx-charts","name":"NgxChartsModule","line":105,"character":4},{"__symbolic":"reference","module":"ng2-charts","name":"ChartsModule","line":106,"character":4},{"__symbolic":"reference","module":"angular-pipes","name":"NgPipesModule","line":107,"character":4},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":108,"character":4}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":5,"character":12}],"declarations":[{"__symbolic":"reference","name":"ɵb"}],"exports":[{"__symbolic":"reference","name":"ɵb"}]}]}],"members":{}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"ui-alert","template":"\n    <div class=\"alert alert-{{type}}\">\n      <ng-content></ng-content>\n      {{label}}\n    </div>\n  "}]}],"members":{"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"alert":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"ui-header","template":"\n    <div class=\"header\">\n      <div class=\"container\">\n        <div class=\"d-flex\">\n          <a class=\"navbar-brand\" routerLink=\"/\">\n            <img src=\"assets/brand/tabler.svg\" class=\"navbar-brand-img\" alt=\"tabler.io\">\n            <span class=\"d-none d-md-inline\">\n              {{ config?.title }}\n            </span>\n          </a>\n          <div class=\"ml-auto d-flex order-lg-2\">\n\n            <ui-header-links class=\"nav-item\" [links]=\"config?.links\"></ui-header-links>\n            \n            <ui-header-notifications [notifications]=\"config?.notifications\"\n                                     (action)=\"handleAction($event)\"></ui-header-notifications>\n\n            <ui-header-profile [profile]=\"config?.user\" [links]=\"config?.profileLinks\"></ui-header-profile>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"header-nav\">\n      <div class=\"container\">\n        <div class=\"row align-items-center\">\n          <div class=\"col\">\n            <ui-menu [links]=\"config?.menu\"></ui-menu>\n          </div>\n          <div class=\"col-3 ml-auto\" *ngIf=\"config?.search\">\n            <form class=\"input-icon\">\n              <input type=\"search\" class=\"form-control header-search\" placeholder=\"Search&hellip;\" tabindex=\"1\">\n              <div class=\"input-icon-addon\">\n                <i class=\"fe fe-search\"></i>\n              </div>\n            </form>\n          </div>\n        </div>\n      </div>\n    </div>\n  ","styles":[]}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"handleAction":[{"__symbolic":"method"}]}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"ui-footer","template":"\n    <footer class=\"footer\" *ngIf=\"config\">\n      <div class=\"container\">\n        <div class=\"row align-items-center flex-row-reverse\">\n          <div class=\"col-auto ml-auto\">\n            <div class=\"row align-items-center\">\n              <div class=\"col-auto\">\n                <ul class=\"list-inline list-inline-dots mb-0\">\n                  <ng-container *ngFor=\"let link of config?.links\">\n                    <li class=\"list-inline-item\">\n                      <a [href]=\"link.link\" [class]=\"link.class\" [target]=\"link.target || '_self'\">\n                        <i [class]=\"link.icon\"></i>\n                        {{ link.label }}\n                      </a>\n                    </li>\n                  </ng-container>\n                </ul>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-12 col-lg-auto mt-3 mt-lg-0 text-center\" [innerHtml]=\"config?.disclaimer\">\n          </div>\n        </div>\n      </div>\n    </footer>\n  ","styles":[]}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}]}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"ui-footer-links","template":"\n    <div class=\"footer\" *ngIf=\"config\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-lg-8\">\n            <div class=\"row\">\n              <div class=\"col-6 col-md-3\">\n                <ul class=\"list-unstyled mb-0\">\n                  <li><a href=\"#\">First link</a></li>\n                  <li><a href=\"#\">Second link</a></li>\n                </ul>\n              </div>\n              <div class=\"col-6 col-md-3\">\n                <ul class=\"list-unstyled mb-0\">\n                  <li><a href=\"#\">Third link</a></li>\n                  <li><a href=\"#\">Fourth link</a></li>\n                </ul>\n              </div>\n              <div class=\"col-6 col-md-3\">\n                <ul class=\"list-unstyled mb-0\">\n                  <li><a href=\"#\">Fifth link</a></li>\n                  <li><a href=\"#\">Sixth link</a></li>\n                </ul>\n              </div>\n              <div class=\"col-6 col-md-3\">\n                <ul class=\"list-unstyled mb-0\">\n                  <li><a href=\"#\">Other link</a></li>\n                  <li><a href=\"#\">Last link</a></li>\n                </ul>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-lg-4 mt-4 mt-lg-0\" [innerHtml]=\"config?.description\"></div>\n        </div>\n      </div>\n    </div>\n  ","styles":[]}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}]}},"ɵf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"ui-layout","template":"\n    <div class=\"page\">\n      <div class=\"page-main\">\n        <ui-header [config]=\"config?.header\"></ui-header>\n        <div class=\"page-content\">\n          <router-outlet></router-outlet>\n        </div>\n        <ui-footer-links [config]=\"config?.subfooter\"></ui-footer-links>\n        <ui-footer [config]=\"config?.footer\"></ui-footer>\n      </div>\n    </div>\n  "}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/router","name":"ActivatedRoute","line":22,"character":28}]}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"ui-layout-base","template":"\n    <div class=\"page\">\n      <router-outlet></router-outlet>\n    </div>\n  "}]}],"members":{}},"ɵh":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"ui-menu","template":"\n    <ul class=\"nav nav-tabs\" style=\"white-space: nowrap;\">\n      <ng-container *ngFor=\"let item of links\">\n        <li class=\"nav-item d-inline-block\">\n          <a href=\"#\" [routerLink]=\"item.url\" class=\"nav-link\" routerLinkActive=\"active\">\n            <i class=\"{{ item.icon }}\" *ngIf=\"item.icon\"></i>\n            {{item.name}}\n          </a>\n          <div class=\"nav-submenu nav\" *ngIf=\"item.subpages\">\n            <ng-container *ngFor=\"let subitem of item.subpages\">\n              <a href=\"#\" class=\"nav-item\" [routerLink]=\"subitem.url\" routerLinkActive=\"active\">\n                <i class=\"{{ subitem.icon }}\" *ngIf=\"subitem.icon\"></i>\n                {{subitem.name}}\n              </a>\n            </ng-container>\n          </div>\n        </li>\n      </ng-container>\n    </ul>\n  ","styles":[]}]}],"members":{"links":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}]}},"ɵi":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"ui-page-title","template":"\n    <div [class.page-header]=\"header\">\n      <h1 class=\"page-title\">\n        <i *ngIf=\"icon\" class=\"{{ icon }} page-title-icon m-3\"></i>\n        {{ title }}\n        <small *ngIf=\"badge\" class=\"badge badge-{{badgeStyle}} m-3\">\n          {{badge}}\n        </small>\n      </h1>\n\n      <div *ngIf=\"subTitle\" class=\"page-subtitle\">\n        {{subTitle}}\n      </div>\n\n      <div class=\"page-options\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  ","styles":[]}]}],"members":{"badge":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"badgeStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"header":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"subTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}]}},"ɵj":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"ui-page","template":"\n     <div class=\"container\">\n      <ng-content></ng-content>\n    </div>\n  "}]}],"members":{}},"ɵk":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"ui-dashboard-stats","template":"\n    <div class=\"card\">\n      <div class=\"card-body p-3 text-center\">\n        <div class=\"text-right\" [class.text-green]=\"isPositive()\" [class.text-red]=\"!isPositive()\" >\n          <span *ngIf=\"percentage\">\n            {{percentage}}%\n            <i *ngIf=\"isPositive()\" class=\"fe fe-chevron-up\"></i>\n            <i *ngIf=\"!isPositive()\" class=\"fe fe-chevron-down\"></i>\n          </span>\n        </div>\n        <div class=\"h1 m-0\">{{ number }}</div>\n        <div class=\"text-muted mb-4\">{{ title }}</div>\n      </div>\n    </div>\n  ","styles":[]}]}],"members":{"number":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"percentage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"isPositive":[{"__symbolic":"method"}]}},"ɵl":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"ui-dashboard-icon-box","template":"\n    <div class=\"card p-3\">\n      <div class=\"d-flex align-items-center\">\n\t\t<span class=\"stamp stamp-md bg-{{ color }} mr-3\">\n\t\t\t<i class=\"{{ icon }}\"></i>\n\t\t</span>\n        <div>\n          <h4 class=\"m-0\"><a href=\"javascript:void(0)\">{{ value }} <small>{{ description }}</small></a></h4>\n          <small class=\"text-muted\">{{ subtitle }}</small>\n        </div>\n      </div>\n    </div>\n  ","styles":[]}]}],"members":{"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"description":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"subtitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}]}},"ɵm":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"ui-dashboard-digit","template":"\n    <div class=\"card\">\n      <div class=\"card-body text-center\">\n        <div class=\"h5\">{{ title }}</div>\n        <div class=\"display-4 font-weight-bold mb-4\">{{ digit }}</div>\n        <div class=\"progress progress-sm\">\n          <div class=\"progress-bar bg-{{ color }}\" [style.width]=\"width\"></div>\n        </div>\n      </div>\n    </div>\n  ","styles":[]}]}],"members":{"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"digit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}]}},"ɵn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"ui-dashboard-chart","template":"\n    <div class=\"card\">\n      <div class=\"card-header\">\n        <h3 class=\"card-title\">{{ title }}</h3>\n      </div>\n      <div class=\"card-body\">\n        <div [style.height]=\"height\">\n          <ngx-charts-pie-chart\n            scheme=\"air\"\n            [view]=\"view\"\n            [results]=\"data\"\n            [legend]=\"showLegend\"\n            [labels]=\"showLabels\"\n            [doughnut]=\"doughnut\"\n            [gradient]=\"false\">\n          </ngx-charts-pie-chart>\n        </div>\n      </div>\n    </div>\n  ","styles":[]}]}],"members":{"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"doughnut":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}]}},"ɵo":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"ui-avatar","template":"\n    <span class=\"avatar avatar-{{size}}\" [style.background-image]=\"backgroundImage()\">\n      {{text}}\n      <span *ngIf=\"status\" class=\"avatar-status bg-{{status}}\"></span>\n    </span>\n  ","styles":[]}]}],"members":{"image":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"status":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"text":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"backgroundImage":[{"__symbolic":"method"}]}},"ɵp":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"ui-dashboard-chart-bg","template":"\n    <div class=\"card\">\n      <div class=\"card-body\">\n      <!--<div class=\"card-body\">-->\n        <div class=\"card-value pull-right text-{{ color }}\">{{ rate }}</div>\n        <h3 class=\"mb-1\">{{ title}}</h3>\n        <div class=\"text-muted\">{{ description }}</div>\n      </div>\n      <div class=\"card-img\">\n          <canvas baseChart \n                  class=\"pt-5\"\n                  height=\"160\"\n                  [datasets]=\"datasets\"\n                  [labels]=\"labels\"\n                  [options]=\"options\"\n                  [colors]=\"colors\"\n                  chartType=\"line\"></canvas>\n        </div>\n    </div>\n  ","styles":["\n    .card-body {\n      background-color: transparent;\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      padding: 1.25rem;\n    }\n  "]}]}],"members":{"rate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"description":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}]}},"ɵq":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"ui-card","template":"\n    <div class=\"card\" [class.hide]=\"hidden\" [class.card-fullscreen]=\"fullScreen\">\n      <div *ngIf=\"status\" class=\"card-status bg-{{ status }}\" [class.card-status-left]=\"statusLeft\"></div>\n      <div class=\"card-header\">\n        <h3 class=\"card-title\">\n          <i *ngIf=\"icon\" class=\"{{ icon }}\"></i>\n          {{header}}\n        </h3>\n        <div class=\"card-options\">\n          <form action=\"\" *ngIf=\"search\">\n            <div class=\"input-group\">\n              <input type=\"text\"\n                     class=\"form-control form-control-sm\" [placeholder]=\"search.placeholder\" name=\"s\" [(ngModel)]=\"search.value\">\n              <span class=\"input-group-btn ml-2\">\n                <button class=\"btn btn-sm btn-default\" type=\"submit\" (click)=\"action.emit( { type: 'SEARCH', payload: search.value } )\">\n                  <span class=\"fe fe-search\"></span>\n                </button>\n              </span>\n            </div>\n          </form>\n\n          <ng-container *ngIf=\"!buttons\">\n            <a class=\"card-options-collapse\" data-toggle=\"card-collapse\" href=\"#\"\n               [class.hide]=\"!allowCollapse\"\n               (click)=\"collapse($event)\">\n              <i class=\"fe\" [class.fe-chevron-down]=\"collapsed\" [class.fe-chevron-up]=\"!collapsed\"></i>\n            </a>\n            <a class=\"card-options-fullscreen\" data-toggle=\"card-fullscreen\" href=\"#\"\n               [class.hide]=\"!allowFullScreen\"\n               (click)=\"goFullScreen($event)\">\n              <i class=\"fe fe-maximize\"></i>\n            </a>\n            <a class=\"card-options-remove\" data-toggle=\"card-remove\" href=\"#\"\n               [class.hide]=\"!allowHide\"\n               (click)=\"hide($event)\">\n              <i class=\"fe fe-x\"></i>\n            </a>\n          </ng-container>\n\n          <ng-container *ngIf=\"buttons\">\n            <ng-container *ngFor=\"let button of buttons\">\n              \n              <button class=\"btn btn-secondary btn-sm ml-2\"\n                      *ngIf=\"button.type === 'button'\"\n                      (click)=\"action.emit( { type: button.action, payload: button.payload || '' })\">\n                <i *ngIf=\"button.icon\" [class]=\"button.icon\"></i>\n                {{ button.text }}\n              </button>\n\n              <label class=\"custom-switch m-0\"\n                     *ngIf=\"button.type === 'switch'\">\n                <input type=\"checkbox\" [value]=\"button.checked\" class=\"custom-switch-input\"\n                       (change)=\"action.emit( { type: 'SWITCH', payload: button.checked } )\"\n                       [checked]=\"button.checked || false\">\n                <span class=\"custom-switch-indicator\"></span>\n              </label>\n\n            </ng-container>\n          </ng-container>\n\n        </div>\n      </div>\n      \n      <div [class.hide]=\"collapsed\" [class.show]=\"!collapsed\">\n\n        <ng-container *ngIf=\"alert\">\n          <div class=\"card-alert alert alert-{{alert.type}} mb-0\">\n            {{alert.text}}\n          </div>\n        </ng-container>\n\n        <ng-content></ng-content>\n        \n        <div class=\"card-footer\" *ngIf=\"footer\">{{footer}}</div>\n      </div>\n    </div>\n  ","styles":["\n    .hide {\n      display: none;\n    }\n    .show {\n      display: block;\n    }\n  "]}]}],"members":{"alert":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":91,"character":3}}]}],"allowCollapse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":92,"character":3}}]}],"allowFullScreen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":3}}]}],"allowHide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":94,"character":3}}]}],"buttons":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":95,"character":3}}]}],"collapsed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":3}}]}],"footer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":97,"character":3}}]}],"fullScreen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":98,"character":3}}]}],"header":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":99,"character":3}}]}],"hidden":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":100,"character":3}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":101,"character":3}}]}],"loader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":102,"character":3}}]}],"search":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":103,"character":3}}]}],"status":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":104,"character":3}}]}],"statusLeft":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":105,"character":3}}]}],"action":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":107,"character":3}}]}],"collapse":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"goFullScreen":[{"__symbolic":"method"}]}},"ɵr":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"ui-card-body","template":"\n    <div class=\"card-body\">\n      <ng-container *ngIf=\"loader\">\n        <div class=\"dimmer active\">\n          <div class=\"loader\"></div>\n          <div class=\"dimmer-content\">\n            <ng-content></ng-content>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"!loader\">\n        <ng-content></ng-content>\n      </ng-container>\n    </div>\n  ","styles":[]}]}],"members":{"loader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}]}},"ɵs":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"ui-highlight","template":"\n    <ui-card [header]=\"name\" [icon]=\"icon\" [buttons]=\"[]\">\n      <div class=\"p-5\">\n        <pre class=\"m-0 p-0\">\n          <code highlight [textContent]=\"code\"></code>\n        </pre>\n      </div>\n    </ui-card>\n  "}]}],"members":{"code":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}]}},"ɵt":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"ui-header-notifications","template":"\n    <div class=\"dropdown d-none d-md-flex py-2\" dropdown *ngIf=\"notifications\">\n      <a dropdownToggle class=\"nav-link icon\" data-toggle=\"dropdown\">\n        <i class=\"fe fe-bell\"></i>\n        <span class=\"nav-unread\"></span>\n      </a>\n      <div *dropdownMenu class=\"dropdown-menu dropdown-menu-right dropdown-menu-arrow\">\n\n        <ui-header-notification-item *ngFor=\"let notification of notifications\"\n                                     [notification]=\"notification\"\n                                     (action)=\"action.emit($event)\">\n        </ui-header-notification-item>\n\n        <div class=\"dropdown-divider\"></div>\n        <a href=\"#\" class=\"dropdown-item text-center text-muted-dark\"\n           (click)=\"onClick($event)\">\n          {{ actionText }}\n        </a>\n      </div>\n    </div>\n  ","styles":[]}]}],"members":{"notifications":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"actionText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"actionType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"action":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":31,"character":3}}]}],"onClick":[{"__symbolic":"method"}]}},"ɵu":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"ui-header-notification-item","template":"\n    <a href=\"#\" class=\"dropdown-item d-flex\" (click)=\"onClick($event)\">\n      <ui-avatar [text]=\"notification.avatarText\" class=\"mr-3 align-self-center\"></ui-avatar>\n      <div>\n        <strong>{{ notification.from }}</strong> {{ notification.text }}\n\n        <div class=\"small text-muted\">\n          {{ notification.date | timeAgo }}\n        </div>\n      </div>\n    </a>\n  ","styles":[]}]}],"members":{"notification":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"action":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":20,"character":3}}]}],"onClick":[{"__symbolic":"method"}]}},"ɵv":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"ui-header-profile","template":"\n    <div class=\"dropdown\" dropdown *ngIf=\"profile\">\n      <a class=\"nav-link pr-0\" data-toggle=\"dropdown\" dropdownToggle>\n        <ui-avatar [image]=\"profile.avatar\" [text]=\"profile.avatarText\"></ui-avatar>\n        <span class=\"ml-2 d-none d-lg-block\">\n          <span class=\"text-default\">{{ profile.name }}</span>\n          <small class=\"text-muted d-block mt-1\">\n            {{ profile.description || profile.title || profile.email }}\n          </small>\n        </span>\n      </a>\n\n      <div *dropdownMenu class=\"dropdown-menu dropdown-menu-right dropdown-menu-arrow\">\n        <ng-container *ngFor=\"let link of links\">\n\n          <ui-header-profile-link [link]=\"link\"></ui-header-profile-link>\n\n        </ng-container>\n      </div>\n    </div>\n  "}]}],"members":{"profile":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"links":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}]}},"ɵw":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"ui-header-profile-link","template":"\n    <a *ngIf=\"link.link\" class=\"dropdown-item\" [routerLink]=\"link.link\">\n      <ui-badge *ngIf=\"link.badge\" class=\"float-right\" [badge]=\"link.badge\"></ui-badge>\n\n      <i *ngIf=\"link.icon\" [class]=\"link.icon\" [class.dropdown-icon]=\"true\"></i>\n\n      <span *ngIf=\"link.label\">{{link.label}}</span>\n    </a>\n    <div *ngIf=\"link.divider\" class=\"dropdown-divider\"></div>\n  ","styles":[]}]}],"members":{"link":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}]}},"ɵx":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"ui-badge","template":"\n    <span class=\"badge badge-{{type}}\">\n      {{label}}\n    </span>\n  "}]}],"members":{"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"badge":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵy":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"timeAgo","pure":false}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":9,"character":41},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":9,"character":76}]}],"transform":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"removeTimer":[{"__symbolic":"method"}],"getSecondsUntilUpdate":[{"__symbolic":"method"}]}},"ɵz":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"ui-header-links","template":"\n    <ng-container *ngFor=\"let link of links\">\n      <a [href]=\"link.link\" [class]=\"link.class\" [target]=\"link.target || '_self' \">\n        <i [class]=\"link.icon\"></i>\n        <span class=\"d-none d-lg-inline\">{{ link.label }}</span>\n      </a>\n    </ng-container>\n  "}]}],"members":{"links":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}]}}},"origins":{"UiModule":"./src/ui.module","ɵa":"./src/modules/alert/alert.module","ɵb":"./src/modules/alert/components/alert/alert.component","ɵc":"./src/components/header/header.component","ɵd":"./src/components/footer/footer.component","ɵe":"./src/components/footer-links/footer-links.component","ɵf":"./src/containers/layout/layout.component","ɵg":"./src/containers/layout-base/layout-base.component","ɵh":"./src/components/menu/menu.component","ɵi":"./src/components/page-title/page-title.component","ɵj":"./src/components/page/page.component","ɵk":"./src/components/dashboard-stats/dashboard-stats.component","ɵl":"./src/components/dashboard-icon-box/dashboard-icon-box.component","ɵm":"./src/components/dashboard-digit/dashboard-digit.component","ɵn":"./src/components/dashboard-chart/dashboard-chart.component","ɵo":"./src/components/avatar/avatar.component","ɵp":"./src/components/dashboard-chart-bg/dashboard-chart-bg.component","ɵq":"./src/components/card/card.component","ɵr":"./src/components/card-body/card-body.component","ɵs":"./src/components/highlight/highlight.component","ɵt":"./src/components/header-notifications/header-notifications.component","ɵu":"./src/components/header-notification-item/header-notification-item.component","ɵv":"./src/components/header-profile/header-profile.component","ɵw":"./src/components/header-profile-link/header-profile-link.component","ɵx":"./src/components/badge/badge.component","ɵy":"./src/pipes/time-ago.pipe","ɵz":"./src/components/header-links/header-links.component"},"importAs":"@tabler/angular-ui"}
+{"__symbolic":"module","version":4,"exports":[{"from":"./src/modules"}],"metadata":{"UiModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":38,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":40,"character":4},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":41,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":42,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":43,"character":4},{"__symbolic":"reference","module":"angular-pipes","name":"NgPipesModule","line":44,"character":4},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"ngx-bootstrap/dropdown","name":"BsDropdownModule","line":45,"character":4},"member":"forRoot"}},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵj"}],"declarations":[],"exports":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵj"},{"__symbolic":"reference","module":"angular-pipes","name":"NgPipesModule","line":51,"character":4}],"providers":[{"__symbolic":"reference","module":"@tabler/angular-ui/src/services/ui.service","name":"UiService","line":53,"character":14}]}]}],"members":{}},"UiService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":49,"character":1}}],"members":{"updateLayout":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor"}]}},"UiProfile":{"__symbolic":"class","members":{}},"UiNotification":{"__symbolic":"class","members":{}},"UiLayout":{"__symbolic":"class","members":{}},"UiBadge":{"__symbolic":"class","members":{}}},"origins":{"UiModule":"./src/ui.module","UiService":"./src/services/ui.service","UiProfile":"./src/services/ui.service","UiNotification":"./src/services/ui.service","UiLayout":"./src/services/ui.service","UiBadge":"./src/services/ui.service","ɵa":"./src/modules","ɵb":"./src/modules","ɵc":"./src/modules","ɵd":"./src/modules","ɵe":"./src/modules","ɵf":"./src/modules","ɵg":"./src/modules","ɵh":"./src/modules","ɵi":"./src/modules","ɵj":"./src/modules"},"importAs":"@tabler/angular-ui"}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Number of package files

60

increased by42.86%

Lines of code

3764

increased by17.51%

Worsened metrics

Total package byte prevSize

400555

decreased by-1.9%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes