angular-matecu 1.0.4

package/bundles/angular-matecu.umd.js

@@ -0,0 +1,561 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('rxjs'), require('rxjs/operators'), require('@angular/forms'), require('@angular/material/toolbar'), require('@angular/material/button'), require('@angular/material/icon'), require('@angular/material/dialog')) :
+    typeof define === 'function' && define.amd ? define('angular-matecu', ['exports', '@angular/core', '@angular/common', 'rxjs', 'rxjs/operators', '@angular/forms', '@angular/material/toolbar', '@angular/material/button', '@angular/material/icon', '@angular/material/dialog'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['angular-matecu'] = {}, global.ng.core, global.ng.common, global.rxjs, global.rxjs.operators, global.ng.forms, global.ng.material.toolbar, global.ng.material.button, global.ng.material.icon, global.ng.material.dialog));
+}(this, (function (exports, i0, i4, rxjs, operators, i5, i1, i2, i3, i1$1) { 'use strict';
+
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () {
+                            return e[k];
+                        }
+                    });
+                }
+            });
+        }
+        n['default'] = e;
+        return Object.freeze(n);
+    }
+
+    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
+    var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
+    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
+
+    var MatecuSpinnerService = /** @class */ (function () {
+        function MatecuSpinnerService() {
+            this.active$ = new rxjs.BehaviorSubject(false);
+            this.requestsKeys = [];
+        }
+        MatecuSpinnerService.prototype.watch = function () {
+            return this.active$.pipe();
+        };
+        MatecuSpinnerService.prototype.add = function (customKey) {
+            var key = (typeof (customKey) === 'string' && customKey.length > 0) ? customKey : this.createKey();
+            this.requestsKeys.push(key);
+            this.updateStatus();
+            return key;
+        };
+        MatecuSpinnerService.prototype.remove = function (key) {
+            this.requestsKeys = this.requestsKeys.filter(function (requestKey) { return requestKey !== key; });
+            this.updateStatus();
+        };
+        MatecuSpinnerService.prototype.clear = function () {
+            this.requestsKeys = [];
+            this.updateStatus();
+        };
+        MatecuSpinnerService.prototype.updateStatus = function () {
+            var active = this.requestsKeys.length > 0;
+            this.active$.next(active);
+        };
+        MatecuSpinnerService.prototype.createKey = function () {
+            var time = new Date().getTime();
+            var complement = Math.random();
+            return time + "__" + complement;
+        };
+        return MatecuSpinnerService;
+    }());
+    MatecuSpinnerService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: MatecuSpinnerService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    MatecuSpinnerService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: MatecuSpinnerService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: MatecuSpinnerService, decorators: [{
+                type: i0.Injectable,
+                args: [{
+                        providedIn: 'root',
+                    }]
+            }], ctorParameters: function () { return []; } });
+
+    var MatecuSpinnerComponent = /** @class */ (function () {
+        function MatecuSpinnerComponent(spinnerService) {
+            this.spinnerService = spinnerService;
+            this.destroy$ = new rxjs.Subject();
+            this.hiddenClass = 'matecu-spinner--hidden';
+            this.activeCache = false;
+            this.className = 'matecu-spinner';
+            this.color = '#2196F3';
+            this.global = false;
+            this.size = '70px';
+        }
+        Object.defineProperty(MatecuSpinnerComponent.prototype, "active", {
+            get: function () {
+                return this.activeCache;
+            },
+            set: function (value) {
+                if (this.global) {
+                    return;
+                }
+                this.activeCache = value;
+                this.className = value
+                    ? this.className.replace(" " + this.hiddenClass, '')
+                    : (this.className += " " + this.hiddenClass);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        MatecuSpinnerComponent.prototype.ngOnDestroy = function () {
+            this.destroy$.next();
+            this.destroy$.complete();
+        };
+        MatecuSpinnerComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            if (this.global) {
+                this.spinnerService.watch().pipe(operators.tap(function (value) { return _this.activeCache = value; }), operators.takeUntil(this.destroy$)).subscribe();
+            }
+        };
+        return MatecuSpinnerComponent;
+    }());
+    MatecuSpinnerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: MatecuSpinnerComponent, deps: [{ token: MatecuSpinnerService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MatecuSpinnerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.4", type: MatecuSpinnerComponent, selector: "matecu-spinner", inputs: { color: "color", global: "global", active: "active", size: "size" }, host: { properties: { "class": "this.className" } }, ngImport: i0__namespace, template: "<ng-container *ngIf=\"active\">\n    <svg xmlns:svg=\"http://www.w3.org/2000/svg\" [attr.width]=\"size\" [attr.height]=\"size\"\n    xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.0\" viewBox=\"0 0 128 128\" xml:space=\"preserve\">\n    <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"transparent\" />\n    <g>\n        <path class=\"matecu-spinner__100\" d=\"M122.5 69.25H96.47a33.1 33.1 0 0 0 0-10.5h26.05a5.25 5.25 0 0 1 0 10.5z\" [attr.fill]=\"color\"\n            fill-opacity=\"1\" />\n        <path class=\"matecu-spinner__30\" d=\"M112.04 97.83L89.47 84.8a33.1 33.1 0 0 0 5.25-9.1l22.57 13.03a5.25 5.25 0 0 1-5.28 9.1z\" [attr.fill]=\"color\"\n            fill-opacity=\"0.3\" />\n        <path class=\"matecu-spinner__30\" d=\"M88.68 117.35L75.65 94.78a33.1 33.1 0 0 0 9.1-5.25l13.02 22.57a5.25 5.25 0 1 1-9.1 5.25z\"\n            [attr.fill]=\"color\" fill-opacity=\"0.3\" />\n        <path class=\"matecu-spinner__30\" d=\"M58.7 122.57V96.5a33.1 33.1 0 0 0 10.5 0v26.07a5.25 5.25 0 0 1-10.5 0z\" [attr.fill]=\"color\"\n            fill-opacity=\"0.3\" />\n        <path class=\"matecu-spinner__30\" d=\"M30.1 112.1l13.04-22.57a33.1 33.1 0 0 0 9.1 5.25L39.2 117.35a5.25 5.25 0 1 1-9.1-5.25z\" [attr.fill]=\"color\"\n            fill-opacity=\"0.3\" />\n        <path class=\"matecu-spinner__30\" d=\"M10.6 88.74L33.16 75.7a33.1 33.1 0 0 0 5.25 9.1L15.88 97.83a5.25 5.25 0 1 1-5.25-9.1z\" [attr.fill]=\"color\"\n            fill-opacity=\"0.3\" />\n        <path class=\"matecu-spinner__40\" d=\"M5.37 58.75h26.06a33.1 33.1 0 0 0 0 10.5H5.37a5.25 5.25 0 0 1 0-10.5z\" [attr.fill]=\"color\"\n            fill-opacity=\"0.4\" />\n        <path class=\"matecu-spinner__50\" d=\"M15.85 30.17L38.4 43.2a33.1 33.1 0 0 0-5.24 9.1L10.6 39.25a5.25 5.25 0 1 1 5.25-9.1z\" [attr.fill]=\"color\"\n            fill-opacity=\"0.5\" />\n        <path class=\"matecu-spinner__60\" d=\"M39.2 10.65l13.03 22.57a33.1 33.1 0 0 0-9.1 5.25l-13-22.57a5.25 5.25 0 1 1 9.1-5.25z\" [attr.fill]=\"color\"\n            fill-opacity=\"0.6\" />\n        <path class=\"matecu-spinner__70\" d=\"M69.2 5.43V31.5a33.1 33.1 0 0 0-10.5 0V5.42a5.25 5.25 0 1 1 10.5 0z\" [attr.fill]=\"color\"\n            fill-opacity=\"0.7\" />\n        <path class=\"matecu-spinner__80\" d=\"M97.77 15.9L84.75 38.47a33.1 33.1 0 0 0-9.1-5.25l13.03-22.57a5.25 5.25 0 1 1 9.1 5.25z\" [attr.fill]=\"color\"\n            fill-opacity=\"0.8\" />\n        <path class=\"matecu-spinner__90\" d=\"M117.3 39.26L94.7 52.3a33.1 33.1 0 0 0-5.25-9.1l22.57-13.03a5.25 5.25 0 0 1 5.25 9.1z\" [attr.fill]=\"color\"\n            fill-opacity=\"0.9\" />\n        <animateTransform attributeName=\"transform\" type=\"rotate\"\n            values=\"0 64 64;30 64 64;60 64 64;90 64 64;120 64 64;150 64 64;180 64 64;210 64 64;240 64 64;270 64 64;300 64 64;330 64 64\"\n            calcMode=\"discrete\" dur=\"600ms\" repeatCount=\"indefinite\"></animateTransform>\n    </g>\n</svg>\n</ng-container>", styles: [".matecu-spinner{display:flex;align-items:center;justify-content:center}.matecu-spinner>svg{width:80px;height:80px}.matecu-spinner__hidden{display:none}"], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: MatecuSpinnerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'matecu-spinner',
+                        templateUrl: './matecu-spinner.component.html',
+                        styleUrls: ['./matecu-spinner.component.css']
+                    }]
+            }], ctorParameters: function () { return [{ type: MatecuSpinnerService }]; }, propDecorators: { className: [{
+                    type: i0.HostBinding,
+                    args: ['class']
+                }], color: [{
+                    type: i0.Input
+                }], global: [{
+                    type: i0.Input
+                }], active: [{
+                    type: i0.Input
+                }], size: [{
+                    type: i0.Input
+                }] } });
+
+    var MatecuSpinnerModule = /** @class */ (function () {
+        function MatecuSpinnerModule() {
+        }
+        return MatecuSpinnerModule;
+    }());
+    MatecuSpinnerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: MatecuSpinnerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    MatecuSpinnerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: MatecuSpinnerModule, declarations: [MatecuSpinnerComponent], imports: [i4.CommonModule], exports: [MatecuSpinnerComponent] });
+    MatecuSpinnerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: MatecuSpinnerModule, imports: [[
+                i4.CommonModule
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: MatecuSpinnerModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [MatecuSpinnerComponent],
+                        imports: [
+                            i4.CommonModule
+                        ],
+                        exports: [
+                            MatecuSpinnerComponent
+                        ]
+                    }]
+            }] });
+
+    var MatecuTopbarLayoutComponent = /** @class */ (function () {
+        function MatecuTopbarLayoutComponent() {
+            this.className = 'matecu-topbar-layout';
+            this.showSearchInput = false;
+            this.search = false;
+            this.searchInput = new i5.FormControl();
+            this.isProminent = false;
+            this.scrollingClass = 'matecu-topbar-layout--scrolling';
+            this.prominentClass = 'matecu-topbar-layout--prominent';
+            this.searchPlaceholder = 'Buscar';
+            this.color = 'primary';
+            this.navMenu = true;
+            this.actionMenu = false;
+            this.clickNavMenu = new i0.EventEmitter();
+            this.clickActionMenu = new i0.EventEmitter();
+        }
+        Object.defineProperty(MatecuTopbarLayoutComponent.prototype, "prominent", {
+            set: function (value) {
+                this.isProminent = value;
+                if (value) {
+                    this.className += ' ' + this.prominentClass;
+                }
+                else {
+                    var regex = new RegExp(this.prominentClass, 'ig');
+                    this.className = this.className.replace(regex, '').trim();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MatecuTopbarLayoutComponent.prototype, "searchControl", {
+            set: function (value) {
+                if (!!value) {
+                    this.searchInput = value;
+                    this.search = true;
+                }
+                else {
+                    this.searchInput = new i5.FormControl();
+                    this.search = false;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        MatecuTopbarLayoutComponent.prototype.ngOnInit = function () {
+            this.spyScroll().subscribe();
+        };
+        MatecuTopbarLayoutComponent.prototype.toogleSearch = function () {
+            this.showSearchInput = !this.showSearchInput;
+        };
+        MatecuTopbarLayoutComponent.prototype.closeSearch = function () {
+            this.showSearchInput = false;
+            this.searchInput.reset();
+        };
+        MatecuTopbarLayoutComponent.prototype.onMenuClick = function () {
+        };
+        MatecuTopbarLayoutComponent.prototype.onClickNavMenu = function () {
+            this.clickNavMenu.emit();
+        };
+        MatecuTopbarLayoutComponent.prototype.onClickActionMenu = function () {
+            this.clickActionMenu.emit();
+        };
+        MatecuTopbarLayoutComponent.prototype.spyScroll = function () {
+            var _this = this;
+            var scrollabe = document.querySelector('.matecu-topbar-layout__body');
+            if (!scrollabe) {
+                return rxjs.of(null);
+            }
+            return rxjs.fromEvent(scrollabe, 'scroll').pipe(operators.tap(function () { return _this.applyScrollStyles(scrollabe); }), operators.map(function () { return scrollabe; }));
+        };
+        MatecuTopbarLayoutComponent.prototype.applyScrollStyles = function (scrollabe) {
+            if (!scrollabe) {
+                return;
+            }
+            var scrollPosition = scrollabe.scrollTop;
+            if (scrollPosition > 30) {
+                this.className += ' ' + this.scrollingClass;
+            }
+            if (scrollPosition < 10) {
+                var regexp = new RegExp(this.scrollingClass, 'ig');
+                this.className = this.className.replace(regexp, '').trim();
+            }
+        };
+        return MatecuTopbarLayoutComponent;
+    }());
+    MatecuTopbarLayoutComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: MatecuTopbarLayoutComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MatecuTopbarLayoutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.4", type: MatecuTopbarLayoutComponent, selector: "matecu-topbar-layout", inputs: { searchPlaceholder: "searchPlaceholder", color: "color", navMenu: "navMenu", actionMenu: "actionMenu", prominent: "prominent", searchControl: "searchControl" }, outputs: { clickNavMenu: "clickNavMenu", clickActionMenu: "clickActionMenu" }, host: { properties: { "class": "this.className" } }, ngImport: i0__namespace, template: "<div>\n    <mat-toolbar [color]=\"color\">\n            <div *ngIf=\"navMenu\">\n              <button\n                mat-icon-button\n                type=\"button\"\n                (click)=\"onClickNavMenu()\"\n              >\n                <mat-icon>menu</mat-icon>\n              </button>\n            </div>\n            <div class=\"matecu-topbar-layout__fab\">\n              <ng-content select=\"matecu-topbar-fab\"></ng-content>\n            </div>\n            <div class=\"matecu-topbar-layout__title\">\n              <ng-content select=\"matecu-topbar-title\"></ng-content>\n            </div>\n          \n            <div *ngIf=\"search\">\n              <button type=\"button\" (click)=\"toogleSearch()\" mat-icon-button>\n                <mat-icon>search</mat-icon>\n              </button>\n            </div>\n            \n            <div *ngIf=\"actionMenu\">\n              <button type=\"button\" (click)=\"onClickActionMenu()\" mat-icon-button>\n                <mat-icon>more_vert</mat-icon>\n              </button>\n            </div>\n           \n            <div\n              class=\"matecu-topbar-layout__search\"\n              [ngClass]=\"{ active: showSearchInput }\"\n            >\n              <input\n                type=\"text\"\n                [formControl]=\"searchInput\"\n                [placeholder]=\"searchPlaceholder\"\n              />\n              <button mat-icon-button type=\"button\"  (click)=\"closeSearch()\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </div>\n    </mat-toolbar>\n  \n  \n</div>\n<div class=\"matecu-topbar-layout__body\" >\n  <ng-content select=\"matecu-topbar-body\"></ng-content>\n</div>\n", styles: [".matecu-topbar-layout,:host{display:grid;height:100vh;grid-template-rows:auto 1fr;position:relative;overflow:hidden}.matecu-topbar-layout,.matecu-topbar-layout *,:host,:host *{box-sizing:border-box}.matecu-topbar-layout mat-toolbar,:host mat-toolbar{position:relative;height:64px;max-height:64px;transition:all .3s}.matecu-topbar-layout mat-toolbar>div,:host mat-toolbar>div{display:flex;align-items:flex-start;min-height:100%}.matecu-topbar-layout__title,:host__title{margin-right:auto;height:100%;padding-left:10px;align-items:center!important}.matecu-topbar-layout__fab,:host__fab{z-index:1;height:100%;display:flex;align-items:flex-end!important}@media screen and (max-width:425px){.matecu-topbar-layout__fab,:host__fab{position:fixed;bottom:20px;right:20px;height:auto!important;min-height:auto!important}}.matecu-topbar-layout__search,:host__search{position:absolute;top:0;left:0;width:100%;transform:translateY(-110%);overflow:hidden;transition:transform .2s ease-in-out;display:flex;align-items:center!important;height:64px;min-height:64px!important;box-shadow:0 4px 8px #00000080}.matecu-topbar-layout__search input,:host__search input{position:absolute;display:block;top:0;left:0;width:100%;bottom:0;padding:0 50px 0 10px;border:none;border-bottom:1px solid #ccc}.matecu-topbar-layout__search button,:host__search button{z-index:2;position:absolute;right:10px;color:#000}.matecu-topbar-layout__search.active,:host__search.active{transform:translateY(0)}.matecu-topbar-layout__body,:host__body{padding-top:50px;padding-bottom:50px;overflow-y:auto}:host.matecu-topbar-layout--prominent .mat-toolbar{height:128px;max-height:128px;align-items:flex-start}:host.matecu-topbar-layout--scrolling .mat-toolbar{height:64px!important;max-height:64px!important;align-items:center!important;box-shadow:0 4px 8px #00000080}"], components: [{ type: i1__namespace.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i2__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: MatecuTopbarLayoutComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'matecu-topbar-layout',
+                        templateUrl: './matecu-topbar-layout.component.html',
+                        styleUrls: ['./matecu-topbar-layout.component.scss']
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { className: [{
+                    type: i0.HostBinding,
+                    args: ['class']
+                }], searchPlaceholder: [{
+                    type: i0.Input
+                }], color: [{
+                    type: i0.Input
+                }], navMenu: [{
+                    type: i0.Input
+                }], actionMenu: [{
+                    type: i0.Input
+                }], clickNavMenu: [{
+                    type: i0.Output
+                }], clickActionMenu: [{
+                    type: i0.Output
+                }], prominent: [{
+                    type: i0.Input
+                }], searchControl: [{
+                    type: i0.Input
+                }] } });
+
+    var MatecuTopbarTitleComponent = /** @class */ (function () {
+        function MatecuTopbarTitleComponent() {
+            this.className = 'title';
+        }
+        MatecuTopbarTitleComponent.prototype.ngOnInit = function () {
+        };
+        return MatecuTopbarTitleComponent;
+    }());
+    MatecuTopbarTitleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: MatecuTopbarTitleComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MatecuTopbarTitleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.4", type: MatecuTopbarTitleComponent, selector: "matecu-topbar-title", host: { properties: { "class": "this.className" } }, ngImport: i0__namespace, template: "<ng-content></ng-content>", styles: [""] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: MatecuTopbarTitleComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'matecu-topbar-title',
+                        templateUrl: './matecu-topbar-title.component.html',
+                        styleUrls: ['./matecu-topbar-title.component.scss']
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { className: [{
+                    type: i0.HostBinding,
+                    args: ['class']
+                }] } });
+
+    var MatecuTopbarBodyComponent = /** @class */ (function () {
+        function MatecuTopbarBodyComponent() {
+            this.className = 'matecu-topbar-body';
+        }
+        MatecuTopbarBodyComponent.prototype.ngOnInit = function () {
+        };
+        return MatecuTopbarBodyComponent;
+    }());
+    MatecuTopbarBodyComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: MatecuTopbarBodyComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MatecuTopbarBodyComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.4", type: MatecuTopbarBodyComponent, selector: "matecu-topbar-body", host: { properties: { "class": "this.className" } }, ngImport: i0__namespace, template: "<ng-content></ng-content>", styles: [":host{display:block}"] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: MatecuTopbarBodyComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'matecu-topbar-body',
+                        templateUrl: './matecu-topbar-body.component.html',
+                        styleUrls: ['./matecu-topbar-body.component.scss']
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { className: [{
+                    type: i0.HostBinding,
+                    args: ['class']
+                }] } });
+
+    var MatecuTopbarFabComponent = /** @class */ (function () {
+        function MatecuTopbarFabComponent() {
+            this.color = 'accent';
+            this.clickAction = new i0.EventEmitter();
+            this.className = 'matecu-topbar-fab';
+        }
+        MatecuTopbarFabComponent.prototype.ngOnInit = function () {
+        };
+        MatecuTopbarFabComponent.prototype.onClickAction = function () {
+            this.clickAction.emit();
+        };
+        return MatecuTopbarFabComponent;
+    }());
+    MatecuTopbarFabComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: MatecuTopbarFabComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MatecuTopbarFabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.4", type: MatecuTopbarFabComponent, selector: "matecu-topbar-fab", inputs: { color: "color" }, outputs: { clickAction: "clickAction" }, host: { properties: { "class": "this.className" } }, ngImport: i0__namespace, template: "<button type=\"button\" mat-raised-button [color]=\"color\" (click)=\"onClickAction()\">\n    <ng-content></ng-content>\n</button>", styles: [".matecu-topbar-fab,:host{display:flex;justify-content:center;align-content:center}.matecu-topbar-fab button,:host button{transform:translateY(50%);height:4rem;box-sizing:border-box;border-radius:4rem}@media screen and (max-width:425px){.matecu-topbar-fab button,:host button{transform:translateY(0)}}"], components: [{ type: i2__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: MatecuTopbarFabComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'matecu-topbar-fab',
+                        templateUrl: './matecu-topbar-fab.component.html',
+                        styleUrls: ['./matecu-topbar-fab.component.scss']
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { color: [{
+                    type: i0.Input
+                }], clickAction: [{
+                    type: i0.Output
+                }], className: [{
+                    type: i0.HostBinding,
+                    args: ['class']
+                }] } });
+
+    var MatecuTopbarLayoutModule = /** @class */ (function () {
+        function MatecuTopbarLayoutModule() {
+        }
+        return MatecuTopbarLayoutModule;
+    }());
+    MatecuTopbarLayoutModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: MatecuTopbarLayoutModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    MatecuTopbarLayoutModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: MatecuTopbarLayoutModule, declarations: [MatecuTopbarLayoutComponent, MatecuTopbarTitleComponent, MatecuTopbarBodyComponent, MatecuTopbarFabComponent], imports: [i4.CommonModule,
+            i1.MatToolbarModule,
+            i3.MatIconModule,
+            i5.FormsModule,
+            i5.ReactiveFormsModule,
+            i2.MatButtonModule], exports: [MatecuTopbarLayoutComponent, MatecuTopbarTitleComponent, MatecuTopbarBodyComponent, MatecuTopbarFabComponent] });
+    MatecuTopbarLayoutModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: MatecuTopbarLayoutModule, imports: [[
+                i4.CommonModule,
+                i1.MatToolbarModule,
+                i3.MatIconModule,
+                i5.FormsModule,
+                i5.ReactiveFormsModule,
+                i2.MatButtonModule
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: MatecuTopbarLayoutModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [MatecuTopbarLayoutComponent, MatecuTopbarTitleComponent, MatecuTopbarBodyComponent, MatecuTopbarFabComponent],
+                        imports: [
+                            i4.CommonModule,
+                            i1.MatToolbarModule,
+                            i3.MatIconModule,
+                            i5.FormsModule,
+                            i5.ReactiveFormsModule,
+                            i2.MatButtonModule
+                        ],
+                        exports: [
+                            MatecuTopbarLayoutComponent, MatecuTopbarTitleComponent, MatecuTopbarBodyComponent, MatecuTopbarFabComponent
+                        ]
+                    }]
+            }] });
+
+    exports.MatecuAlertBoxType = void 0;
+    (function (MatecuAlertBoxType) {
+        MatecuAlertBoxType["warning"] = "warning";
+        MatecuAlertBoxType["success"] = "success";
+        MatecuAlertBoxType["danger"] = "danger";
+        MatecuAlertBoxType["info"] = "info";
+    })(exports.MatecuAlertBoxType || (exports.MatecuAlertBoxType = {}));
+
+    var MatecuAlertBoxComponent = /** @class */ (function () {
+        function MatecuAlertBoxComponent() {
+            this.classNameBase = 'matecu-alert-box';
+            this.alertIcon = false;
+            this.className = this.classNameBase;
+        }
+        Object.defineProperty(MatecuAlertBoxComponent.prototype, "color", {
+            get: function () {
+                return this.alertColor;
+            },
+            set: function (value) {
+                this.alertColor = value;
+                if (!!value) {
+                    this.className = this.classNameBase + " " + this.classNameBase + "--" + value;
+                }
+                else {
+                    this.className = this.classNameBase;
+                }
+                this.updateIcon();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MatecuAlertBoxComponent.prototype, "icon", {
+            get: function () {
+                return this.alertIcon;
+            },
+            set: function (value) {
+                this.alertIcon = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        MatecuAlertBoxComponent.prototype.ngOnInit = function () { };
+        MatecuAlertBoxComponent.prototype.updateIcon = function () {
+            switch (this.color) {
+                case exports.MatecuAlertBoxType.danger:
+                    this.iconValue = 'dangerous';
+                    break;
+                case exports.MatecuAlertBoxType.warning:
+                    this.iconValue = 'warning';
+                    break;
+                case exports.MatecuAlertBoxType.success:
+                    this.iconValue = 'check_circle';
+                    break;
+                case exports.MatecuAlertBoxType.info:
+                    this.iconValue = 'info';
+                    break;
+                default:
+                    this.iconValue = null;
+                    break;
+            }
+        };
+        return MatecuAlertBoxComponent;
+    }());
+    MatecuAlertBoxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: MatecuAlertBoxComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MatecuAlertBoxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.4", type: MatecuAlertBoxComponent, selector: "matecu-alert-box", inputs: { color: "color", icon: "icon" }, host: { properties: { "class": "this.className" } }, ngImport: i0__namespace, template: "<ng-container *ngIf=\"icon && iconValue\">\n  <div class=\"matecu-alert-box__icon\">\n    <mat-icon>{{iconValue}}</mat-icon>\n  </div>\n</ng-container>\n<div class=\"matecu-alert-box__content\">\n  <ng-content>\n\n\n  </ng-content>\n</div>\n", styles: [":host.matecu-alert-box{display:flex;padding:1rem;border-radius:.25rem;position:relative;border:1px solid #e0e0e0;box-sizing:border-box;margin:1rem 0}:host.matecu-alert-box--success{color:#0f5032;background-color:#d2e6dc;border-color:#badccd}:host.matecu-alert-box--danger{color:#821e28;background-color:#f8d7da;border-color:#f5c2c7}:host.matecu-alert-box--warning{color:#644d03;background-color:#fff3cd;border-color:#ffecb4}:host.matecu-alert-box--info{color:#055160;background-color:#cff4fc;border-color:#b6effb}:host.matecu-alert-box .matecu-alert-box__icon{display:flex;margin-right:1rem}:host.matecu-alert-box .matecu-alert-box__content{align-self:center}"], components: [{ type: i3__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: MatecuAlertBoxComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'matecu-alert-box',
+                        templateUrl: './matecu-alert-box.component.html',
+                        styleUrls: ['./matecu-alert-box.component.scss'],
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { color: [{
+                    type: i0.Input
+                }], icon: [{
+                    type: i0.Input
+                }], className: [{
+                    type: i0.HostBinding,
+                    args: ['class']
+                }] } });
+
+    var MatecuAlertDialogComponent = /** @class */ (function () {
+        function MatecuAlertDialogComponent(dialogData, dialogRef) {
+            this.dialogData = dialogData;
+            this.dialogRef = dialogRef;
+            this.hasTitle = false;
+            this.hasDismissBtn = false;
+            this.hasActionBtn = false;
+            this.showActions = false;
+            this.setHasTitle();
+            this.setHasDismissBtn();
+            this.setHasActionBtn();
+            this.setShowActions();
+        }
+        MatecuAlertDialogComponent.prototype.ngOnInit = function () { };
+        MatecuAlertDialogComponent.prototype.activateAction = function () {
+            this.dialogRef.close(true);
+        };
+        MatecuAlertDialogComponent.prototype.setHasTitle = function () {
+            this.hasTitle = this.isValidString(this.dialogData.title);
+        };
+        MatecuAlertDialogComponent.prototype.setHasDismissBtn = function () {
+            this.hasDismissBtn = this.isValidString(this.dialogData.dismissText);
+        };
+        MatecuAlertDialogComponent.prototype.setHasActionBtn = function () {
+            this.hasActionBtn = this.isValidString(this.dialogData.action);
+        };
+        MatecuAlertDialogComponent.prototype.setShowActions = function () {
+            this.showActions = this.hasActionBtn || this.hasDismissBtn;
+        };
+        MatecuAlertDialogComponent.prototype.isValidString = function (str) {
+            var isValid = typeof str === 'string' && str.trim().length > 0;
+            return isValid;
+        };
+        return MatecuAlertDialogComponent;
+    }());
+    MatecuAlertDialogComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: MatecuAlertDialogComponent, deps: [{ token: i1$1.MAT_DIALOG_DATA }, { token: i1__namespace$1.MatDialogRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MatecuAlertDialogComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.4", type: MatecuAlertDialogComponent, selector: "matecu-alert-dialog", ngImport: i0__namespace, template: "<h2 mat-dialog-title *ngIf=\"hasTitle\">{{dialogData.title}}</h2>\n<mat-dialog-content>\n\n  <matecu-alert-box [color]=\"dialogData.type\" [icon]=\"!!dialogData.icon\">\n    {{dialogData.message}}\n  </matecu-alert-box>\n\n</mat-dialog-content>\n<mat-dialog-actions *ngIf=\"showActions\" align=\"end\">\n  <button mat-button color=\"primary\" tabindex=\"-1\" mat-dialog-close\n    *ngIf=\"hasDismissBtn\">{{dialogData.dismissText}}</button>\n  <button mat-button color=\"primary\" tabindex=\"-2\" (click)=\"activateAction()\"\n    *ngIf=\"hasActionBtn\">{{dialogData.action}}</button>\n</mat-dialog-actions>\n", styles: [""], components: [{ type: MatecuAlertBoxComponent, selector: "matecu-alert-box", inputs: ["color", "icon"] }, { type: i2__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1__namespace$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1__namespace$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: MatecuAlertDialogComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'matecu-alert-dialog',
+                        templateUrl: './matecu-alert-dialog.component.html',
+                        styleUrls: ['./matecu-alert-dialog.component.scss'],
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1$1.MAT_DIALOG_DATA]
+                        }] }, { type: i1__namespace$1.MatDialogRef }];
+        } });
+
+    var MatecuAlertBoxModule = /** @class */ (function () {
+        function MatecuAlertBoxModule() {
+        }
+        return MatecuAlertBoxModule;
+    }());
+    MatecuAlertBoxModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: MatecuAlertBoxModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    MatecuAlertBoxModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: MatecuAlertBoxModule, declarations: [MatecuAlertBoxComponent, MatecuAlertDialogComponent], imports: [i4.CommonModule, i3.MatIconModule, i1$1.MatDialogModule, i2.MatButtonModule], exports: [MatecuAlertBoxComponent] });
+    MatecuAlertBoxModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: MatecuAlertBoxModule, imports: [[i4.CommonModule, i3.MatIconModule, i1$1.MatDialogModule, i2.MatButtonModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: MatecuAlertBoxModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [MatecuAlertBoxComponent, MatecuAlertDialogComponent],
+                        imports: [i4.CommonModule, i3.MatIconModule, i1$1.MatDialogModule, i2.MatButtonModule],
+                        exports: [MatecuAlertBoxComponent],
+                    }]
+            }] });
+
+    /*
+     * Public API Surface of angular-matecu
+     */
+
+    /**
+     * Generated bundle index. Do not edit.
+     */
+
+    exports.MatecuAlertBoxComponent = MatecuAlertBoxComponent;
+    exports.MatecuAlertBoxModule = MatecuAlertBoxModule;
+    exports.MatecuAlertDialogComponent = MatecuAlertDialogComponent;
+    exports.MatecuSpinnerComponent = MatecuSpinnerComponent;
+    exports.MatecuSpinnerModule = MatecuSpinnerModule;
+    exports.MatecuSpinnerService = MatecuSpinnerService;
+    exports.MatecuTopbarBodyComponent = MatecuTopbarBodyComponent;
+    exports.MatecuTopbarFabComponent = MatecuTopbarFabComponent;
+    exports.MatecuTopbarLayoutComponent = MatecuTopbarLayoutComponent;
+    exports.MatecuTopbarLayoutModule = MatecuTopbarLayoutModule;
+    exports.MatecuTopbarTitleComponent = MatecuTopbarTitleComponent;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+})));
+//# sourceMappingURL=angular-matecu.umd.js.map