info-library 2.10.28 → 2.10.31

package/bundles/info-library.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('text-mask-core/dist/textMaskCore'), require('@angular/router'), require('@angular/common/http'), require('rxjs'), require('rxjs/operators'), require('@angular/material/dialog'), require('@angular/cdk/overlay'), require('@angular/forms'), require('@angular/material/core'), require('@angular/material-moment-adapter'), require('text-mask-addons/dist/createAutoCorrectedDatePipe'), require('@angular/cdk/keycodes'), require('@angular/common'), require('ng2-currency-mask'), require('@angular/material/card'), require('@angular/material/icon'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/list'), require('@angular/material/select'), require('@angular/material/checkbox'), require('@angular/material/radio'), require('@angular/material/button'), require('@angular/material/datepicker'), require('@angular/material/progress-bar'), require('@angular/material/tooltip'), require('@angular/material/autocomplete'), require('@kolkov/angular-editor'), require('@angular/material/chips'), require('text-mask-addons/dist/emailMask')) :
-    typeof define === 'function' && define.amd ? define('info-library', ['exports', '@angular/core', 'text-mask-core/dist/textMaskCore', '@angular/router', '@angular/common/http', 'rxjs', 'rxjs/operators', '@angular/material/dialog', '@angular/cdk/overlay', '@angular/forms', '@angular/material/core', '@angular/material-moment-adapter', 'text-mask-addons/dist/createAutoCorrectedDatePipe', '@angular/cdk/keycodes', '@angular/common', 'ng2-currency-mask', '@angular/material/card', '@angular/material/icon', '@angular/material/form-field', '@angular/material/input', '@angular/material/list', '@angular/material/select', '@angular/material/checkbox', '@angular/material/radio', '@angular/material/button', '@angular/material/datepicker', '@angular/material/progress-bar', '@angular/material/tooltip', '@angular/material/autocomplete', '@kolkov/angular-editor', '@angular/material/chips', 'text-mask-addons/dist/emailMask'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['info-library'] = {}, global.ng.core, global.textMaskCore, global.ng.router, global.ng.common.http, global.rxjs, global.rxjs.operators, global.ng.material.dialog, global.ng.cdk.overlay, global.ng.forms, global.ng.material.core, global.ng.materialMomentAdapter, global.createAutoCorrectedDatePipe, global.ng.cdk.keycodes, global.ng.common, global.ng2CurrencyMask, global.ng.material.card, global.ng.material.icon, global.ng.material.formField, global.ng.material.input, global.ng.material.list, global.ng.material.select, global.ng.material.checkbox, global.ng.material.radio, global.ng.material.button, global.ng.material.datepicker, global.ng.material.progressBar, global.ng.material.tooltip, global.ng.material.autocomplete, global.angularEditor, global.ng.material.chips, global.emailMask));
-}(this, (function (exports, i0, textMaskCore, i3, i2, rxjs, operators, i6, i1, forms, core, materialMomentAdapter, createAutoCorrectedDatePipe, keycodes, common, ng2CurrencyMask, card, icon, formField, input, list, select, checkbox, radio, button, datepicker, progressBar, tooltip, autocomplete, angularEditor, chips, emailMask) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('text-mask-core/dist/textMaskCore'), require('@angular/router'), require('@angular/common/http'), require('rxjs'), require('rxjs/operators'), require('@angular/material/dialog'), require('@angular/cdk/overlay'), require('@angular/forms'), require('@angular/material/core'), require('@angular/material-moment-adapter'), require('text-mask-addons/dist/createAutoCorrectedDatePipe'), require('@angular/platform-browser'), require('@angular/cdk/keycodes'), require('@angular/common'), require('ng2-currency-mask'), require('@angular/material/card'), require('@angular/material/icon'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/list'), require('@angular/material/select'), require('@angular/material/checkbox'), require('@angular/material/radio'), require('@angular/material/button'), require('@angular/material/datepicker'), require('@angular/material/progress-bar'), require('@angular/material/tooltip'), require('@angular/material/autocomplete'), require('@kolkov/angular-editor'), require('@angular/material/chips'), require('text-mask-addons/dist/emailMask')) :
+    typeof define === 'function' && define.amd ? define('info-library', ['exports', '@angular/core', 'text-mask-core/dist/textMaskCore', '@angular/router', '@angular/common/http', 'rxjs', 'rxjs/operators', '@angular/material/dialog', '@angular/cdk/overlay', '@angular/forms', '@angular/material/core', '@angular/material-moment-adapter', 'text-mask-addons/dist/createAutoCorrectedDatePipe', '@angular/platform-browser', '@angular/cdk/keycodes', '@angular/common', 'ng2-currency-mask', '@angular/material/card', '@angular/material/icon', '@angular/material/form-field', '@angular/material/input', '@angular/material/list', '@angular/material/select', '@angular/material/checkbox', '@angular/material/radio', '@angular/material/button', '@angular/material/datepicker', '@angular/material/progress-bar', '@angular/material/tooltip', '@angular/material/autocomplete', '@kolkov/angular-editor', '@angular/material/chips', 'text-mask-addons/dist/emailMask'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['info-library'] = {}, global.ng.core, global.textMaskCore, global.ng.router, global.ng.common.http, global.rxjs, global.rxjs.operators, global.ng.material.dialog, global.ng.cdk.overlay, global.ng.forms, global.ng.material.core, global.ng.materialMomentAdapter, global.createAutoCorrectedDatePipe, global.ng.platformBrowser, global.ng.cdk.keycodes, global.ng.common, global.ng2CurrencyMask, global.ng.material.card, global.ng.material.icon, global.ng.material.formField, global.ng.material.input, global.ng.material.list, global.ng.material.select, global.ng.material.checkbox, global.ng.material.radio, global.ng.material.button, global.ng.material.datepicker, global.ng.material.progressBar, global.ng.material.tooltip, global.ng.material.autocomplete, global.angularEditor, global.ng.material.chips, global.emailMask));
+}(this, (function (exports, i0, textMaskCore, i3, i2, rxjs, operators, i6, i1, forms, core, materialMomentAdapter, createAutoCorrectedDatePipe, platformBrowser, keycodes, common, ng2CurrencyMask, card, icon, formField, input, list, select, checkbox, radio, button, datepicker, progressBar, tooltip, autocomplete, angularEditor, chips, emailMask) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -1660,7 +1660,7 @@
         InfoAuthenticationService.prototype.trocarEmpresa = function (usuario, empresaId) {
             var _this = this;
             return this._http
-                .post(this._plataforma.Config.webapiUrl + 'centrocontrole/usuario/trocarempresa', { Usuario: usuario, EmpresaId: empresaId }, { headers: this._dataService.getHeaderToken() })
+                .post(this._plataforma.Config.webapiUrl + 'centrocontrole/usuario/trocarempresa', { EmpresaId: empresaId }, { headers: this._dataService.getHeaderToken() })
                 .pipe(operators.map(( /**
          * @param {?} r
          * @return {?}
@@ -4622,13 +4622,51 @@
         };
         /**
          * @param {?} arquivoId
-         * @param {?} tipo
          * @return {?}
          */
-        InfoGridComponent.prototype.download = function (arquivoId, tipo) {
+        InfoGridComponent.prototype.download = function (arquivoId) {
+            var _this = this;
             if (this.apidownload == null)
                 alert('API Download está null');
-            window.open(this._dataAccessService.getAPIUrl(this.apidownload) + (this.methoddownload != null ? this.methoddownload : (tipo == 'DB' ? "GetDataBase" : "Get")) + "?id=" + arquivoId);
+            this._dataAccessService.get(this.apidownload, (this.methoddownload != null ? this.methoddownload : 'Get'), "id=" + arquivoId).subscribe(( /**
+             * @param {?} r
+             * @return {?}
+             */function (/**
+             * @param {?} r
+             * @return {?}
+             */ r) {
+                _this.messages = r.messages;
+                if (r.success && r.data != null) {
+                    /** @type {?} */
+                    var binaryString = window.atob(r.data.Conteudo);
+                    /** @type {?} */
+                    var binaryLen = binaryString.length;
+                    /** @type {?} */
+                    var bytes = new Uint8Array(binaryLen);
+                    for (var i = 0; i < binaryLen; i++) {
+                        /** @type {?} */
+                        var ascii = binaryString.charCodeAt(i);
+                        bytes[i] = ascii;
+                    }
+                    /** @type {?} */
+                    var blob = new Blob([bytes]);
+                    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
+                        window.navigator.msSaveOrOpenBlob(blob, r.data.Nome);
+                    }
+                    else {
+                        /** @type {?} */
+                        var fileURL = URL.createObjectURL(blob);
+                        /** @type {?} */
+                        var elementA = ( /** @type {?} */(document.createElement('a')));
+                        elementA.href = fileURL;
+                        elementA.download = r.data.Nome;
+                        document.body.appendChild(elementA);
+                        elementA.click();
+                        document.body.removeChild(elementA);
+                    }
+                }
+                _this.loading = false;
+            }));
         };
         /**
          * @param {?} model
@@ -4690,7 +4728,7 @@
     InfoGridComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'info-grid',
-                    template: "<info-pagebar *ngIf=\"showPagebar\" icon=\"work\" [pagetitle]=\"pagebarTitle\" [description]=\"description\">\r\n    <button mat-button type=\"button\" *ngIf=\"backurl != null && backurl != ''\" color=\"primary\" (click)=\"back()\">\r\n        <mat-icon class=\"fs-20\">chevron_left</mat-icon>{{\"Voltar\" | translate}}\r\n    </button>\r\n\r\n    <ng-container *ngFor=\"let b of pagebarbuttons\">\r\n        <button type=\"button\" mat-button color=\"primary\" (click)=\"b.modal == null ? navigateTo(b.url, false, null) : openCustomModal(b.modal, b.modalwidth, null)\">\r\n            <mat-icon *ngIf=\"b.icon != 'chevron_right'\" class=\"fs-20\">{{ b.icon }}</mat-icon>\r\n            {{ b.label | translate }}\r\n        </button>\r\n    </ng-container>\r\n\r\n    <button mat-button type=\"button\" *ngIf=\"searchmodel != null && !enabledSearch\" color=\"primary\" (click)=\"enabledSearch = !enabledSearch\">\r\n        <mat-icon class=\"fs-20\">search</mat-icon> {{ \"Pesquisar\" | translate}}\r\n    </button>\r\n    <button mat-button type=\"button\" *ngIf=\"enablednew && hasPermissionNew\" color=\"primary\" (click)=\"add()\">\r\n        <mat-icon class=\"fs-20\">add</mat-icon> {{ newlabel | translate}}\r\n    </button>\r\n</info-pagebar>\r\n\r\n<div [ngClass]=\"{ 'table-full': fullarea }\">\r\n    <div class=\"table-responsive white\">\r\n        <div class=\"table-title\" [ngStyle]=\"{ 'padding': (enabledSearch ? 10 : 0) + 'px 20px' }\">\r\n            <form autocomplete=\"off\" #formSearch=\"ngForm\" (ngSubmit)=\"search()\">\r\n                <div *ngIf=\"enabledSearch\" class=\"search-container row\">\r\n                    <div class=\"col-md-{{(searchbuttons || []).length == 0 ? '10' : '9' }}\">\r\n                        <div class=\"row\">\r\n                            <ng-content></ng-content>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"col-md-{{(searchbuttons || []).length == 0 ? '2' : '3' }} align-right\" *ngIf=\"searchmodel != null\">\r\n                        <div class=\"search-buttons \">\r\n                            <ng-container *ngIf=\"searchonlyonebutton\">\r\n                                <button mat-button type=\"submit\" color=\"primary\" [disabled]=\"formSearch.invalid || loading\">\r\n                                    {{ 'Buscar' | translate }}\r\n                                </button>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"!searchonlyonebutton\">\r\n                                <button mat-button type=\"button\" color=\"warn\" (click)=\"cancelSearch()\" *ngIf=\"enabledcancelsearch\">\r\n                                    <mat-icon class=\"fs-20\">close</mat-icon>\r\n                                </button>\r\n                                <button mat-button type=\"submit\" color=\"primary\" [disabled]=\"formSearch.invalid || loading\">\r\n                                    <mat-icon class=\"fs-20\">search</mat-icon>\r\n                                </button>\r\n                                \r\n                                <ng-container *ngFor=\"let b of searchbuttons\">\r\n                                    <button mat-button type=\"button\" color=\"primary\" [disabled]=\"formSearch.invalid || loading\" (click)=\"b.method()\">\r\n                                        <mat-icon *ngIf=\"b.icon\" class=\"fs-20\">{{b.icon | translate}}</mat-icon> {{b.label | translate}}\r\n                                    </button>\r\n                                </ng-container>\r\n                  \r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </form>\r\n        </div>\r\n\r\n        <fieldset *ngIf=\"!showPagebar\"><legend [innerHTML]=\"pagebarTitle | translate\"></legend></fieldset>\r\n        <section class=\"loading-bar\"><mat-progress-bar color=\"primary\" mode=\"indeterminate\" *ngIf=\"loading\"></mat-progress-bar></section>\r\n\r\n        <div id=\"auto-refresh\" *ngIf=\"autorefresh > 0\">\r\n            <i class=\"material-icons\" matTooltip=\"{{ 'AutoRefresh' | translate }} {{ autorefresh }} seg\" matTooltipPosition=\"left\">access_time</i>\r\n        </div>\r\n\r\n        <table class=\"table table-hover\" [ngStyle]=\"{ 'min-height.px': tableHeight }\" [ngClass]=\"{ 'loading': loading, 'clickaccess': enabledclickaccess }\" *ngIf=\"data != null\">\r\n            <thead>\r\n                <tr>\r\n                    <th style=\"width: 5%;\" *ngIf=\"enabledclassicons && data?.length > 0 && data[0]?.Icon != null\"></th>\r\n\r\n                    <ng-container *ngFor=\"let col of colunasHeaders; let i = index\">\r\n                        <th *ngIf=\"colunasWidth[i] == ''\" [class]=\"'col_' + col.toLowerCase()\" [ngClass]=\"{ 'text-center': colunasType[i] == 'check', 'align-right': colunasType[i].startsWith('n') }\">{{ col | translate }}</th>\r\n                        <th *ngIf=\"colunasWidth[i] != ''\" [ngStyle]=\"{ 'width': colunasWidth[i] }\" [ngClass]=\"{ 'text-center': colunasType[i] == 'check', 'align-right': colunasType[i].startsWith('n') }\">{{ col | translate }}</th>\r\n                    </ng-container>\r\n\r\n                    <th class=\"actions align-right buttons\" *ngIf=\"(templateurl != '') || (buttons != null && buttons.length > 0) || enableddetail || enabledview || ((disabledcol == '') && enablededit && hasPermissionEdit) || ((disabledcol == '') && enableddelete && hasPermissionDelete)\">\r\n                        <button mat-icon-button type=\"button\"[matTooltip]=\"newlabel | translate\" matTooltipPosition=\"left\" (click)=\"add()\" *ngIf=\"!showPagebar && enablednew && hasPermissionNew\">\r\n                            <mat-icon>add_circle_outline</mat-icon>\r\n                        </button>\r\n                    </th>\r\n                </tr>\r\n            </thead>\r\n            <tbody class=\"grid-content\">\r\n                <tr *ngFor=\"let mod of data\" [ngClass]=\"{ 'default-color': !enabledclassicons }\" [class]=\"mod.Class\" (click)=\"access(mod)\">\r\n                    <td *ngIf=\"enabledclassicons && mod?.Icon != null\">\r\n                        <ng-container *ngFor=\"let icon of icons\">\r\n                            <i class=\"material-icons\" [matTooltip]=\"icon.Tooltip | translate\" *ngIf=\"icon.Name == mod.Icon\" [ngClass]=\"{ 'icone-secundario': icon.Principal == false }\">{{icon.Icon}}</i>\r\n                        </ng-container>\r\n                    </td>\r\n\r\n                    <ng-container *ngFor=\"let col of colunasItens; let i = index\">\r\n                        <td *ngIf=\"mod[col] == null || mod[col] == undefined\"></td>\r\n                        <ng-container [ngSwitch]=\"colunasType[i]\" *ngIf=\"mod[col] != null && mod[col] != undefined\">\r\n                            <ng-container *ngSwitchCase=\"'label'\">\r\n                                <td *ngIf=\"mod[col] !== true && mod[col] !== false && mod[col] !== 0 && mod[col] !== '0'\" [innerHTML]=\"(mod[col] | translate) || ''\"></td>\r\n                                <td *ngIf=\"mod[col] === true\"><mat-icon>check_box</mat-icon></td>\r\n                                <td *ngIf=\"mod[col] === false\"><mat-icon>check_box_outline_blank</mat-icon></td>\r\n                                <td *ngIf=\"mod[col] === 0 || mod[col] === '0'\">0</td>\r\n                            </ng-container>\r\n\r\n                            <td nowrap *ngSwitchCase=\"'date'\" [innerHTML]=\"mod[col] | date:'shortDate'\"></td>\r\n                            <td nowrap *ngSwitchCase=\"'datetime'\">{{ mod[col] | date:'shortDate' }} {{ mod[col] | date:'mediumTime' }}</td>\r\n                            <td nowrap *ngSwitchCase=\"'monthyear'\" [innerHTML]=\"mod[col] | date:'MM/yyyy'\"></td>\r\n                            <td nowrap *ngSwitchCase=\"'n0'\" [class]=\"'align-right ' + (mod[col] < 0 ? 'text-red' : '')\">{{ mod[col] | number:'1.0-0' }}</td>\r\n                            <td nowrap *ngSwitchCase=\"'n2'\" [class]=\"'align-right ' + (mod[col] < 0 ? 'text-red' : '')\">{{ mod[col] | number:'1.2-2' }}</td>\r\n                            <td nowrap *ngSwitchCase=\"'n4'\" [class]=\"'align-right ' + (mod[col] < 0 ? 'text-red' : '')\">{{ mod[col] | number:'1.4-4' }}</td>\r\n                            <td nowrap *ngSwitchCase=\"'n6'\" [class]=\"'align-right ' + (mod[col] < 0 ? 'text-red' : '')\">{{ mod[col] | number:'1.6-6' }}</td>\r\n                            <td nowrap *ngSwitchCase=\"'n9'\" [class]=\"'align-right ' + (mod[col] < 0 ? 'text-red' : '')\">{{ mod[col] | number:'1.9-9' }}</td>\r\n                            <td nowrap *ngSwitchCase=\"'n12'\" [class]=\"'align-right ' + (mod[col] < 0 ? 'text-red' : '')\">{{ mod[col] | number:'1.12-12' }}</td>\r\n                           \r\n                            <td *ngSwitchCase=\"'check'\" class=\"text-center\">\r\n                                <ng-container *ngIf=\"mod[col] != null && (mod[col] === true || mod[col] == 1 || mod[col].toLowerCase() == 's'); then checked; else unchecked\"></ng-container>\r\n                                <ng-template #checked><mat-icon>check_box</mat-icon></ng-template>\r\n                                <ng-template #unchecked><mat-icon>check_box_outline_blank</mat-icon></ng-template>\r\n                            </td>\r\n                        </ng-container>\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"enabledclickaccess\">\r\n                        <td class=\"td-actions clickaccess\">\r\n                            <button mat-icon-button type=\"button\" (click)=\"access(mod)\" *ngIf=\"enabledview\">\r\n                                <mat-icon>{{accessicon || 'arrow_forward'}}</mat-icon>\r\n                            </button>\r\n                        </td>\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"!enabledclickaccess\">\r\n                        <td class=\"td-actions\" *ngIf=\"(templateurl != '') || (buttons != null && buttons.length > 0) || (mod.Download != null) || (mod.DownloadDataBase != null) || enableddetail || (mod?.Info != null) || enabledview || ((disabledcol == '' || mod[disabledcol] === true) && enablededit && hasPermissionEdit) || ((disabledcol == '' || mod[disabledcol] === true) && enableddelete && hasPermissionDelete)\">\r\n\r\n                            <a mat-icon-button href=\"{{ templateurl.replace('{id}', mod.Id) }}\" target=\"_blank\" [matTooltip]=\"'Abrir' | translate\" *ngIf=\"templateurl != ''\">\r\n                                <mat-icon>visibility</mat-icon>\r\n                            </a>\r\n\r\n                            <ng-container *ngFor=\"let b of buttons\">\r\n                                <button mat-icon-button type=\"button\" [matTooltip]=\"b.label | translate\" (click)=\"b.modalComponent != null ? openCustomModal(b.modalComponent, b.widthModalComponent, mod) : b.api != null ? eventButton(mod, b.api, b.method, b.confirm) : navigateTo(b.navigateTo, b.passId, mod.Id)\" *ngIf=\"b.showOnlyClass == null || b.showOnlyClass == mod.Class\" [disabled]=\"b.disabledField && mod[b.disabledField] === true\">\r\n                                    <mat-icon>{{b.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n\r\n                            <button mat-icon-button type=\"button\" [matTooltip]=\"'Download' | translate\" (click)=\"download(mod.Download, '')\" *ngIf=\"mod.Download != null\">\r\n                                <mat-icon>file_download</mat-icon>\r\n                            </button>\r\n                            \r\n                            <button mat-icon-button type=\"button\" [matTooltip]=\"'Download' | translate\" (click)=\"download(mod.DownloadDataBase, 'DB')\" *ngIf=\"mod.DownloadDataBase != null\">\r\n                                <mat-icon>file_download</mat-icon>\r\n                            </button>\r\n                            \r\n                            <button mat-icon-button type=\"button\" [matTooltip]=\"'Detalhe' | translate\" (click)=\"detail(mod)\" *ngIf=\"enableddetail\">\r\n                                <mat-icon>list</mat-icon>\r\n                            </button>\r\n                            \r\n                            <button mat-icon-button type=\"button\" [matTooltip]=\"'Informacao' | translate\" (click)=\"info(mod?.Info)\" *ngIf=\"mod?.Info != null\" [disabled]=\"mod?.Info == ''\">\r\n                                <mat-icon>info</mat-icon>\r\n                            </button>\r\n                            \r\n                            <!-- <button mat-icon-button type=\"button\" [matTooltip]=\"'Visualizar' | translate\" (click)=\"view(mod)\" *ngIf=\"enabledview\">\r\n                                <mat-icon>visibility</mat-icon>\r\n                            </button>\r\n                            \r\n                            <button mat-icon-button type=\"button\" [matTooltip]=\"'Editar' | translate\" (click)=\"edit(mod)\" *ngIf=\"(disabledcol == '' || mod[disabledcol] === true) && enablededit && hasPermissionEdit\">\r\n                                <mat-icon>edit</mat-icon>\r\n                            </button> -->\r\n                            \r\n                            <button mat-icon-button type=\"button\" [matTooltip]=\"'Excluir' | translate\" (click)=\"delete(mod)\" *ngIf=\"(disabledcol == '' || mod[disabledcol] === true) && enableddelete && hasPermissionDelete\">\r\n                                <mat-icon>delete</mat-icon>\r\n                            </button>\r\n\r\n                            <button mat-icon-button type=\"button\" [matTooltip]=\"'Acessar' | translate\" (click)=\"edit(mod)\" *ngIf=\"((disabledcol == '' || mod[disabledcol] === true) && enablededit && hasPermissionEdit) || enabledview\">\r\n                                <mat-icon>arrow_forward</mat-icon>\r\n                            </button>\r\n                        </td>\r\n                    </ng-container>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n        <span class=\"blank-table\" *ngIf=\"data != null && data.length == 0\">{{\"NenhumItemEncontrado\" | translate}}</span>\r\n\r\n        <info-paginator #paginator [hidden]=\"!paged || (data != null && data.length == 0)\" [size]=\"size\" (change)=\"changePage($event)\" ></info-paginator>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"block\" *ngIf=\"loading\"></div>\r\n<info-alert [messages]=\"messages\"></info-alert>",
+                    template: "<info-pagebar *ngIf=\"showPagebar\" icon=\"work\" [pagetitle]=\"pagebarTitle\" [description]=\"description\">\r\n    <button mat-button type=\"button\" *ngIf=\"backurl != null && backurl != ''\" color=\"primary\" (click)=\"back()\">\r\n        <mat-icon class=\"fs-20\">chevron_left</mat-icon>{{\"Voltar\" | translate}}\r\n    </button>\r\n\r\n    <ng-container *ngFor=\"let b of pagebarbuttons\">\r\n        <button type=\"button\" mat-button color=\"primary\" (click)=\"b.modal == null ? navigateTo(b.url, false, null) : openCustomModal(b.modal, b.modalwidth, null)\">\r\n            <mat-icon *ngIf=\"b.icon != 'chevron_right'\" class=\"fs-20\">{{ b.icon }}</mat-icon>\r\n            {{ b.label | translate }}\r\n        </button>\r\n    </ng-container>\r\n\r\n    <button mat-button type=\"button\" *ngIf=\"searchmodel != null && !enabledSearch\" color=\"primary\" (click)=\"enabledSearch = !enabledSearch\">\r\n        <mat-icon class=\"fs-20\">search</mat-icon> {{ \"Pesquisar\" | translate}}\r\n    </button>\r\n    <button mat-button type=\"button\" *ngIf=\"enablednew && hasPermissionNew\" color=\"primary\" (click)=\"add()\">\r\n        <mat-icon class=\"fs-20\">add</mat-icon> {{ newlabel | translate}}\r\n    </button>\r\n</info-pagebar>\r\n\r\n<div [ngClass]=\"{ 'table-full': fullarea }\">\r\n    <div class=\"table-responsive white\">\r\n        <div class=\"table-title\" [ngStyle]=\"{ 'padding': (enabledSearch ? 10 : 0) + 'px 20px' }\">\r\n            <form autocomplete=\"off\" #formSearch=\"ngForm\" (ngSubmit)=\"search()\">\r\n                <div *ngIf=\"enabledSearch\" class=\"search-container row\">\r\n                    <div class=\"col-md-{{(searchbuttons || []).length == 0 ? '10' : '9' }}\">\r\n                        <div class=\"row\">\r\n                            <ng-content></ng-content>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"col-md-{{(searchbuttons || []).length == 0 ? '2' : '3' }} align-right\" *ngIf=\"searchmodel != null\">\r\n                        <div class=\"search-buttons \">\r\n                            <ng-container *ngIf=\"searchonlyonebutton\">\r\n                                <button mat-button type=\"submit\" color=\"primary\" [disabled]=\"formSearch.invalid || loading\">\r\n                                    {{ 'Buscar' | translate }}\r\n                                </button>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"!searchonlyonebutton\">\r\n                                <button mat-button type=\"button\" color=\"warn\" (click)=\"cancelSearch()\" *ngIf=\"enabledcancelsearch\">\r\n                                    <mat-icon class=\"fs-20\">close</mat-icon>\r\n                                </button>\r\n                                <button mat-button type=\"submit\" color=\"primary\" [disabled]=\"formSearch.invalid || loading\">\r\n                                    <mat-icon class=\"fs-20\">search</mat-icon>\r\n                                </button>\r\n                                \r\n                                <ng-container *ngFor=\"let b of searchbuttons\">\r\n                                    <button mat-button type=\"button\" color=\"primary\" [disabled]=\"formSearch.invalid || loading\" (click)=\"b.method()\">\r\n                                        <mat-icon *ngIf=\"b.icon\" class=\"fs-20\">{{b.icon | translate}}</mat-icon> {{b.label | translate}}\r\n                                    </button>\r\n                                </ng-container>\r\n                  \r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </form>\r\n        </div>\r\n\r\n        <fieldset *ngIf=\"!showPagebar\"><legend [innerHTML]=\"pagebarTitle | translate\"></legend></fieldset>\r\n        <section class=\"loading-bar\"><mat-progress-bar color=\"primary\" mode=\"indeterminate\" *ngIf=\"loading\"></mat-progress-bar></section>\r\n\r\n        <div id=\"auto-refresh\" *ngIf=\"autorefresh > 0\">\r\n            <i class=\"material-icons\" matTooltip=\"{{ 'AutoRefresh' | translate }} {{ autorefresh }} seg\" matTooltipPosition=\"left\">access_time</i>\r\n        </div>\r\n\r\n        <table class=\"table table-hover\" [ngStyle]=\"{ 'min-height.px': tableHeight }\" [ngClass]=\"{ 'loading': loading, 'clickaccess': enabledclickaccess }\" *ngIf=\"data != null\">\r\n            <thead>\r\n                <tr>\r\n                    <th style=\"width: 5%;\" *ngIf=\"enabledclassicons && data?.length > 0 && data[0]?.Icon != null\"></th>\r\n\r\n                    <ng-container *ngFor=\"let col of colunasHeaders; let i = index\">\r\n                        <th *ngIf=\"colunasWidth[i] == ''\" [class]=\"'col_' + col.toLowerCase()\" [ngClass]=\"{ 'text-center': colunasType[i] == 'check', 'align-right': colunasType[i].startsWith('n') }\">{{ col | translate }}</th>\r\n                        <th *ngIf=\"colunasWidth[i] != ''\" [ngStyle]=\"{ 'width': colunasWidth[i] }\" [ngClass]=\"{ 'text-center': colunasType[i] == 'check', 'align-right': colunasType[i].startsWith('n') }\">{{ col | translate }}</th>\r\n                    </ng-container>\r\n\r\n                    <th class=\"actions align-right buttons\" *ngIf=\"(templateurl != '') || (buttons != null && buttons.length > 0) || enableddetail || enabledview || ((disabledcol == '') && enablededit && hasPermissionEdit) || ((disabledcol == '') && enableddelete && hasPermissionDelete)\">\r\n                        <button mat-icon-button type=\"button\"[matTooltip]=\"newlabel | translate\" matTooltipPosition=\"left\" (click)=\"add()\" *ngIf=\"!showPagebar && enablednew && hasPermissionNew\">\r\n                            <mat-icon>add_circle_outline</mat-icon>\r\n                        </button>\r\n                    </th>\r\n                </tr>\r\n            </thead>\r\n            <tbody class=\"grid-content\">\r\n                <tr *ngFor=\"let mod of data\" [ngClass]=\"{ 'default-color': !enabledclassicons }\" [class]=\"mod.Class\" (click)=\"access(mod)\">\r\n                    <td *ngIf=\"enabledclassicons && mod?.Icon != null\">\r\n                        <ng-container *ngFor=\"let icon of icons\">\r\n                            <i class=\"material-icons\" [matTooltip]=\"icon.Tooltip | translate\" *ngIf=\"icon.Name == mod.Icon\" [ngClass]=\"{ 'icone-secundario': icon.Principal == false }\">{{icon.Icon}}</i>\r\n                        </ng-container>\r\n                    </td>\r\n\r\n                    <ng-container *ngFor=\"let col of colunasItens; let i = index\">\r\n                        <td *ngIf=\"mod[col] == null || mod[col] == undefined\"></td>\r\n                        <ng-container [ngSwitch]=\"colunasType[i]\" *ngIf=\"mod[col] != null && mod[col] != undefined\">\r\n                            <ng-container *ngSwitchCase=\"'label'\">\r\n                                <td *ngIf=\"mod[col] !== true && mod[col] !== false && mod[col] !== 0 && mod[col] !== '0'\" [innerHTML]=\"(mod[col] | translate) || ''\"></td>\r\n                                <td *ngIf=\"mod[col] === true\"><mat-icon>check_box</mat-icon></td>\r\n                                <td *ngIf=\"mod[col] === false\"><mat-icon>check_box_outline_blank</mat-icon></td>\r\n                                <td *ngIf=\"mod[col] === 0 || mod[col] === '0'\">0</td>\r\n                            </ng-container>\r\n\r\n                            <td nowrap *ngSwitchCase=\"'date'\" [innerHTML]=\"mod[col] | date:'shortDate'\"></td>\r\n                            <td nowrap *ngSwitchCase=\"'datetime'\">{{ mod[col] | date:'shortDate' }} {{ mod[col] | date:'mediumTime' }}</td>\r\n                            <td nowrap *ngSwitchCase=\"'monthyear'\" [innerHTML]=\"mod[col] | date:'MM/yyyy'\"></td>\r\n                            <td nowrap *ngSwitchCase=\"'n0'\" [class]=\"'align-right ' + (mod[col] < 0 ? 'text-red' : '')\">{{ mod[col] | number:'1.0-0' }}</td>\r\n                            <td nowrap *ngSwitchCase=\"'n2'\" [class]=\"'align-right ' + (mod[col] < 0 ? 'text-red' : '')\">{{ mod[col] | number:'1.2-2' }}</td>\r\n                            <td nowrap *ngSwitchCase=\"'n4'\" [class]=\"'align-right ' + (mod[col] < 0 ? 'text-red' : '')\">{{ mod[col] | number:'1.4-4' }}</td>\r\n                            <td nowrap *ngSwitchCase=\"'n6'\" [class]=\"'align-right ' + (mod[col] < 0 ? 'text-red' : '')\">{{ mod[col] | number:'1.6-6' }}</td>\r\n                            <td nowrap *ngSwitchCase=\"'n9'\" [class]=\"'align-right ' + (mod[col] < 0 ? 'text-red' : '')\">{{ mod[col] | number:'1.9-9' }}</td>\r\n                            <td nowrap *ngSwitchCase=\"'n12'\" [class]=\"'align-right ' + (mod[col] < 0 ? 'text-red' : '')\">{{ mod[col] | number:'1.12-12' }}</td>\r\n                           \r\n                            <td *ngSwitchCase=\"'check'\" class=\"text-center\">\r\n                                <ng-container *ngIf=\"mod[col] != null && (mod[col] === true || mod[col] == 1 || mod[col].toLowerCase() == 's'); then checked; else unchecked\"></ng-container>\r\n                                <ng-template #checked><mat-icon>check_box</mat-icon></ng-template>\r\n                                <ng-template #unchecked><mat-icon>check_box_outline_blank</mat-icon></ng-template>\r\n                            </td>\r\n                        </ng-container>\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"enabledclickaccess\">\r\n                        <td class=\"td-actions clickaccess\">\r\n                            <button mat-icon-button type=\"button\" (click)=\"access(mod)\" *ngIf=\"enabledview\">\r\n                                <mat-icon>{{accessicon || 'arrow_forward'}}</mat-icon>\r\n                            </button>\r\n                        </td>\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"!enabledclickaccess\">\r\n                        <td class=\"td-actions\" *ngIf=\"(templateurl != '') || (buttons != null && buttons.length > 0) || (mod.Download != null) || enableddetail || (mod?.Info != null) || enabledview || ((disabledcol == '' || mod[disabledcol] === true) && enablededit && hasPermissionEdit) || ((disabledcol == '' || mod[disabledcol] === true) && enableddelete && hasPermissionDelete)\">\r\n\r\n                            <a mat-icon-button href=\"{{ templateurl.replace('{id}', mod.Id) }}\" target=\"_blank\" [matTooltip]=\"'Abrir' | translate\" *ngIf=\"templateurl != ''\">\r\n                                <mat-icon>visibility</mat-icon>\r\n                            </a>\r\n\r\n                            <ng-container *ngFor=\"let b of buttons\">\r\n                                <button mat-icon-button type=\"button\" [matTooltip]=\"b.label | translate\" (click)=\"b.modalComponent != null ? openCustomModal(b.modalComponent, b.widthModalComponent, mod) : b.api != null ? eventButton(mod, b.api, b.method, b.confirm) : navigateTo(b.navigateTo, b.passId, mod.Id)\" *ngIf=\"b.showOnlyClass == null || b.showOnlyClass == mod.Class\" [disabled]=\"b.disabledField && mod[b.disabledField] === true\">\r\n                                    <mat-icon>{{b.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n\r\n                            <button mat-icon-button type=\"button\" [matTooltip]=\"'Download' | translate\" (click)=\"download(mod.Download)\" *ngIf=\"mod.Download != null\">\r\n                                <mat-icon>file_download</mat-icon>\r\n                            </button>\r\n                            \r\n                            <button mat-icon-button type=\"button\" [matTooltip]=\"'Detalhe' | translate\" (click)=\"detail(mod)\" *ngIf=\"enableddetail\">\r\n                                <mat-icon>list</mat-icon>\r\n                            </button>\r\n                            \r\n                            <button mat-icon-button type=\"button\" [matTooltip]=\"'Informacao' | translate\" (click)=\"info(mod?.Info)\" *ngIf=\"mod?.Info != null\" [disabled]=\"mod?.Info == ''\">\r\n                                <mat-icon>info</mat-icon>\r\n                            </button>\r\n                            \r\n                            <!-- <button mat-icon-button type=\"button\" [matTooltip]=\"'Visualizar' | translate\" (click)=\"view(mod)\" *ngIf=\"enabledview\">\r\n                                <mat-icon>visibility</mat-icon>\r\n                            </button>\r\n                            \r\n                            <button mat-icon-button type=\"button\" [matTooltip]=\"'Editar' | translate\" (click)=\"edit(mod)\" *ngIf=\"(disabledcol == '' || mod[disabledcol] === true) && enablededit && hasPermissionEdit\">\r\n                                <mat-icon>edit</mat-icon>\r\n                            </button> -->\r\n                            \r\n                            <button mat-icon-button type=\"button\" [matTooltip]=\"'Excluir' | translate\" (click)=\"delete(mod)\" *ngIf=\"(disabledcol == '' || mod[disabledcol] === true) && enableddelete && hasPermissionDelete\">\r\n                                <mat-icon>delete</mat-icon>\r\n                            </button>\r\n\r\n                            <button mat-icon-button type=\"button\" [matTooltip]=\"'Acessar' | translate\" (click)=\"edit(mod)\" *ngIf=\"((disabledcol == '' || mod[disabledcol] === true) && enablededit && hasPermissionEdit) || enabledview\">\r\n                                <mat-icon>arrow_forward</mat-icon>\r\n                            </button>\r\n                        </td>\r\n                    </ng-container>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n        <span class=\"blank-table\" *ngIf=\"data != null && data.length == 0\">{{\"NenhumItemEncontrado\" | translate}}</span>\r\n\r\n        <info-paginator #paginator [hidden]=\"!paged || (data != null && data.length == 0)\" [size]=\"size\" (change)=\"changePage($event)\" ></info-paginator>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"block\" *ngIf=\"loading\"></div>\r\n<info-alert [messages]=\"messages\"></info-alert>",
                     providers: [InfoFormPropModel],
                     styles: [":host{display:block;min-height:200px;position:relative}:host #auto-refresh{background:transparent;margin:0;padding:0;position:absolute;right:0;top:8px}:host #auto-refresh i{cursor:default;font-size:18px}:host .table-title{background:#fcfcfc}:host .table-title .mat-icon-button{height:25px;line-height:25px;text-align:center;width:25px}:host .table-title .mat-icon-button .mat-icon{font-size:18px}:host .table-title :hover{transition:color .2s}:host .search-container{margin-top:10px;position:relative}:host .title-grid{font-size:.8rem;font-weight:700;padding-top:8px;text-transform:uppercase}:host table thead .col_dia,:host table thead .col_id{width:80px}:host table thead .col_moeda{width:90px}:host table thead .col_data,:host table thead .col_datacotacao,:host table thead .col_dataposicao,:host table thead .col_referencia{width:125px}:host table thead .col_conta,:host table thead .col_identificador{width:250px}:host table thead .col_cliente,:host table thead .col_descricao,:host table thead .col_nome{width:400px}:host table tbody .icone-secundario{font-size:12px}:host.uxc3 div.table-responsive .table-title{padding:0!important}:host.uxc3 div.table-responsive .table thead{background:transparent}:host.uxc3 div.table-responsive .table thead th{border-top:none;font-size:10px;padding:10px 5px 5px;text-transform:capitalize}:host.uxc3 div.table-responsive .table thead th.actions{border-bottom-width:0}:host.uxc3 div.table-responsive .table thead th:after{display:none}:host.uxc3 div.table-responsive .table tbody tr{background:#f9f9f9;height:40px}:host.uxc3 div.table-responsive .table tbody tr td{cursor:default;font-size:13px;font-weight:600;transition:color .2s ease-in-out}:host.uxc3 div.table-responsive .table tbody tr td.td-actions{border-bottom:none;margin-top:1px;padding-bottom:6px;padding-top:7px}:host.uxc3 div.table-responsive .table tbody tr td mat-icon{height:17px;line-height:17px}:host.uxc3 div.table-responsive .table tbody tr:hover{background:#f9f9f9}:host.uxc3 div.table-responsive .table tbody tr:nth-child(2n):hover,:host.uxc3 div.table-responsive .table tbody tr:nth-child(2n):hover .td-actions{background:#fff}"]
                 }] }
@@ -5102,7 +5140,7 @@
     InfoInputComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'info-input',
-                    template: "<mat-form-field *ngIf=\"type != 'textarea' && ismask == null\" >\r\n    <mat-icon *ngIf=\"iconPrefix\" matPrefix style=\"color: #aaa\">{{iconPrefix}}</mat-icon>\r\n    \r\n    <input matInput [type]=\"type\" [min]=\"min\" [max]=\"max\" [tabindex]=\"tabindex\" [placeholder]=\"placeholder | translate\" [(ngModel)]=\"value\" (input)=\"onChangeValue()\" (blur)=\"onBlur()\"\r\n        [maxlength]=\"maxlength\" [readonly]=\"readonly\" [disabled]=\"disabled\" [required]=\"required\">\r\n\r\n    <mat-icon *ngIf=\"iconSuffix\" matSuffix style=\"color: #aaa\">{{iconSuffix}}</mat-icon>\r\n    <mat-icon class=\"show-password\" *ngIf=\"passwordMode\" (click)=\"type = (type == 'password') ? 'text' : 'password'\" matSuffix >visibility{{ type == 'password' ? '' : '_off' }}</mat-icon>\r\n</mat-form-field>\r\n\r\n<mat-form-field *ngIf=\"type != 'textarea' && ismask != null\">\r\n    <mat-icon *ngIf=\"iconPrefix\" matPrefix style=\"color: #aaa\">{{iconPrefix}}</mat-icon>\r\n\r\n    <input matInput [tabindex]=\"tabindex\" [placeholder]=\"placeholder | translate\" [(ngModel)]=\"value\" (ngModelChange)=\"onChangeValue()\" (blur)=\"onBlur()\" *ngIf=\"customMask == null\"\r\n        [readonly]=\"readonly\" [disabled]=\"disabled\" [required]=\"required\" [options]=\"maskOptions\" currencyMask>\r\n\r\n    <input matInput [tabindex]=\"tabindex\" [placeholder]=\"placeholder | translate\" [(ngModel)]=\"value\" (ngModelChange)=\"onChangeValue()\" (blur)=\"onBlur()\" *ngIf=\"customMask != null\"\r\n        [readonly]=\"readonly\" [disabled]=\"disabled\" [required]=\"required\" [setmask]=\"customMask\" unmask >\r\n\r\n    <mat-icon *ngIf=\"iconSuffix\" matSuffix style=\"color: #aaa\">{{iconSuffix}}</mat-icon>\r\n</mat-form-field>\r\n\r\n<mat-form-field *ngIf=\"type == 'textarea'\">\r\n    <mat-icon *ngIf=\"iconPrefix\" matPrefix style=\"color: #aaa\">{{iconPrefix}}</mat-icon>\r\n    \r\n    <textarea matInput [tabindex]=\"tabindex\" [placeholder]=\"placeholder | translate\" [(ngModel)]=\"value\" (input)=\"onChangeValue()\" (blur)=\"onBlur()\" [rows]=\"rows\"\r\n        [maxlength]=\"maxlength\" [readonly]=\"readonly\" [disabled]=\"disabled\" [required]=\"required\"></textarea>\r\n</mat-form-field>",
+                    template: "<mat-form-field *ngIf=\"type != 'color' && type != 'textarea' && ismask == null\" >\r\n    <mat-icon *ngIf=\"iconPrefix\" matPrefix style=\"color: #aaa\">{{iconPrefix}}</mat-icon>\r\n    \r\n    <input matInput [type]=\"type\" [min]=\"min\" [max]=\"max\" [tabindex]=\"tabindex\" [placeholder]=\"placeholder | translate\" [(ngModel)]=\"value\" (input)=\"onChangeValue()\" (blur)=\"onBlur()\"\r\n        [maxlength]=\"maxlength\" [readonly]=\"readonly\" [disabled]=\"disabled\" [required]=\"required\">\r\n\r\n    <mat-icon *ngIf=\"iconSuffix\" matSuffix style=\"color: #aaa\">{{iconSuffix}}</mat-icon>\r\n    <mat-icon class=\"show-password\" *ngIf=\"passwordMode\" (click)=\"type = (type == 'password') ? 'text' : 'password'\" matSuffix >visibility{{ type == 'password' ? '' : '_off' }}</mat-icon>\r\n</mat-form-field>\r\n\r\n<mat-form-field *ngIf=\"type != 'color' && type != 'textarea' && ismask != null\">\r\n    <mat-icon *ngIf=\"iconPrefix\" matPrefix style=\"color: #aaa\">{{iconPrefix}}</mat-icon>\r\n\r\n    <input matInput [tabindex]=\"tabindex\" [placeholder]=\"placeholder | translate\" [(ngModel)]=\"value\" (ngModelChange)=\"onChangeValue()\" (blur)=\"onBlur()\" *ngIf=\"customMask == null\"\r\n        [readonly]=\"readonly\" [disabled]=\"disabled\" [required]=\"required\" [options]=\"maskOptions\" currencyMask>\r\n\r\n    <input matInput [tabindex]=\"tabindex\" [placeholder]=\"placeholder | translate\" [(ngModel)]=\"value\" (ngModelChange)=\"onChangeValue()\" (blur)=\"onBlur()\" *ngIf=\"customMask != null\"\r\n        [readonly]=\"readonly\" [disabled]=\"disabled\" [required]=\"required\" [setmask]=\"customMask\" unmask >\r\n\r\n    <mat-icon *ngIf=\"iconSuffix\" matSuffix style=\"color: #aaa\">{{iconSuffix}}</mat-icon>\r\n</mat-form-field>\r\n\r\n<mat-form-field *ngIf=\"type == 'textarea'\">\r\n    <mat-icon *ngIf=\"iconPrefix\" matPrefix style=\"color: #aaa\">{{iconPrefix}}</mat-icon>\r\n    \r\n    <textarea matInput [tabindex]=\"tabindex\" [placeholder]=\"placeholder | translate\" [(ngModel)]=\"value\" (input)=\"onChangeValue()\" (blur)=\"onBlur()\" [rows]=\"rows\"\r\n        [maxlength]=\"maxlength\" [readonly]=\"readonly\" [disabled]=\"disabled\" [required]=\"required\"></textarea>\r\n</mat-form-field>\r\n\r\n<mat-form-field class=\"input-color\" *ngIf=\"type == 'color'\">\r\n    \r\n    <div class=\"input-color-container\">\r\n        <input #colorInput style=\"width: 0px;visibility: hidden;\" type=\"color\" [(ngModel)]=\"value\" [readonly]=\"readonly\" [disabled]=\"disabled\">\r\n        <div class=\"color-picker\" [style.background-color]=\"value\" (click)=\"colorInput.click()\"></div>\r\n        \r\n        <input matInput type=\"text\" [tabindex]=\"tabindex\" [placeholder]=\"placeholder | translate\" [(ngModel)]=\"value\" (input)=\"onChangeValue()\" (blur)=\"onBlur()\"\r\n        [maxlength]=\"maxlength\" [readonly]=\"readonly\" [disabled]=\"disabled\" [required]=\"required\">\r\n        \r\n        <mat-icon *ngIf=\"iconSuffix\" matSuffix style=\"color: #aaa\">{{iconSuffix}}</mat-icon>\r\n    </div>\r\n</mat-form-field>",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -5111,7 +5149,8 @@
                              */function () { return InfoInputComponent; })),
                             multi: true
                         }
-                    ]
+                    ],
+                    styles: [":host .input-color ::ng-deep.mat-form-field-label{transition:transform .4s cubic-bezier(.25,.8,.25,1),color .4s cubic-bezier(.25,.8,.25,1),width .4s cubic-bezier(.25,.8,.25,1),margin .4s cubic-bezier(.25,.8,.25,1)}:host .input-color:not(.mat-form-field-should-float) ::ng-deep.mat-form-field-label{margin-left:40px}:host .input-color.mat-form-field-should-float ::ng-deep.mat-form-field-label{margin-left:0}:host .input-color .input-color-container{display:flex}:host .input-color .input-color-container input[type=color]{height:0;visibility:hidden;width:0}:host .input-color .input-color-container .color-picker{border:1px solid #000;border-radius:5px;margin-right:5px;width:30px}"]
                 }] }
     ];
     InfoInputComponent.propDecorators = {
@@ -5973,7 +6012,11 @@
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     var InfoEditorComponent = /** @class */ (function () {
-        function InfoEditorComponent() {
+        /**
+         * @param {?} _sanitizer
+         */
+        function InfoEditorComponent(_sanitizer) {
+            this._sanitizer = _sanitizer;
             this.required = false;
             this.value = '';
             this.focused = false;
@@ -5990,7 +6033,6 @@
                 enableToolbar: true,
                 showToolbar: true,
                 defaultParagraphSeparator: '',
-                sanitize: false,
                 toolbarPosition: 'top',
                 fonts: [
                     { class: 'arial', name: 'Arial' },
@@ -6117,6 +6159,7 @@
          * @return {?}
          */
         InfoEditorComponent.prototype.onChangeValue = function () {
+            this.value = this._sanitizer.sanitize(i0.SecurityContext.HTML, this.value);
             if (this.onChange != null)
                 this.onChange(this.value);
         };
@@ -6125,7 +6168,7 @@
          * @return {?}
          */
         InfoEditorComponent.prototype.writeValue = function (modelValue) {
-            this.value = modelValue;
+            this.value = this._sanitizer.sanitize(i0.SecurityContext.HTML, modelValue);
             this.onChangeValue();
         };
         /**
@@ -6162,9 +6205,13 @@
                              */function () { return InfoEditorComponent; })),
                             multi: true
                         }],
-                    styles: [":host ::ng-deep .angular-editor-toolbar-set #insertVideo-,:host ::ng-deep .angular-editor-toolbar-set #link-,:host ::ng-deep .angular-editor-toolbar-set #unlink-{display:none}:host ::ng-deep .angular-editor-textarea{border:none!important;border-bottom:1px solid!important;outline:none}:host ::ng-deep .angular-editor-textarea[contenteditable=false]{border-bottom:1.5px dotted #d3d3d3!important}:host ::ng-deep .angular-editor-wrapper:after{background-color:#000;bottom:0;content:\"\";height:2px;left:0;opacity:0;position:absolute;transform:scaleX(.5);transform-origin:50%;transition:background-color .3s cubic-bezier(.55,0,.55,.2);width:100%}:host ::ng-deep [focused=true] .angular-editor-wrapper:after{opacity:1;transform:scaleX(1);transition:transform .3s cubic-bezier(.25,.8,.25,1),opacity .1s cubic-bezier(.25,.8,.25,1),background-color .3s cubic-bezier(.25,.8,.25,1)}:host ::ng-deep .ng-touched.ng-invalid .angular-editor-wrapper:after{background-color:#f44336!important}:host ::ng-deep .ng-touched.ng-invalid .angular-editor-textarea[contenteditable=true]{border-bottom-color:#f44336!important}"]
+                    styles: [":host ::ng-deep .angular-editor-toolbar-set #insertVideo-,:host ::ng-deep .angular-editor-toolbar-set #link-,:host ::ng-deep .angular-editor-toolbar-set #toggleEditorMode-,:host ::ng-deep .angular-editor-toolbar-set #unlink-{display:none}:host ::ng-deep .angular-editor-textarea{border:none!important;border-bottom:1px solid!important;outline:none}:host ::ng-deep .angular-editor-textarea[contenteditable=false]{border-bottom:1.5px dotted #d3d3d3!important}:host ::ng-deep .angular-editor-wrapper:after{background-color:#000;bottom:0;content:\"\";height:2px;left:0;opacity:0;position:absolute;transform:scaleX(.5);transform-origin:50%;transition:background-color .3s cubic-bezier(.55,0,.55,.2);width:100%}:host ::ng-deep [focused=true] .angular-editor-wrapper:after{opacity:1;transform:scaleX(1);transition:transform .3s cubic-bezier(.25,.8,.25,1),opacity .1s cubic-bezier(.25,.8,.25,1),background-color .3s cubic-bezier(.25,.8,.25,1)}:host ::ng-deep .ng-touched.ng-invalid .angular-editor-wrapper:after{background-color:#f44336!important}:host ::ng-deep .ng-touched.ng-invalid .angular-editor-textarea[contenteditable=true]{border-bottom-color:#f44336!important}"]
                 }] }
     ];
+    /** @nocollapse */
+    InfoEditorComponent.ctorParameters = function () { return [
+        { type: platformBrowser.DomSanitizer }
+    ]; };
     InfoEditorComponent.propDecorators = {
         required: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
@@ -6189,6 +6236,11 @@
         InfoEditorComponent.prototype.id;
         /** @type {?} */
         InfoEditorComponent.prototype.editorConfig;
+        /**
+         * @type {?}
+         * @private
+         */
+        InfoEditorComponent.prototype._sanitizer;
     }
 
     /**