UNPKG

@lucasferreiralsf/angular-frontend-library

Version:

This is a set of custom angular components to easy the development of any Subway frontend project.

1,347 lines 55.2 kB
import { SelectionModel } from '@angular/cdk/collections';
import { map } from 'rxjs/operators';
import { flipInX, flipOutX, fadeInUp, fadeOut } from 'ng-animate';
import { MatInputModule } from '@angular/material/input';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatMenuModule } from '@angular/material/menu';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatListModule } from '@angular/material/list';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatCardModule } from '@angular/material/card';
import { MatStepperModule } from '@angular/material/stepper';
import { MatTabsModule } from '@angular/material/tabs';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatChipsModule } from '@angular/material/chips';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatRippleModule } from '@angular/material/core';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { PortalModule } from '@angular/cdk/portal';
import { Overlay, CdkOverlayOrigin, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
import { FlexLayoutModule } from '@angular/flex-layout';
import { CommonModule } from '@angular/common';
import { trigger, transition, useAnimation, state, style, animate } from '@angular/animations';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { PerfectScrollbarModule, PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
import { Component, Input, Output, EventEmitter, ViewChild, ViewContainerRef, ViewChildren, ChangeDetectorRef, Injectable, Directive, NgModule, Renderer2, defineInjectable, inject } from '@angular/core';
import { MatFormField, MatTableDataSource, MatPaginator, MatDialogRef, MatCheckboxModule, MatButtonModule, MatDialog } from '@angular/material';
import { MatDialogModule, MatDialog as MatDialog$1 } from '@angular/material/dialog';

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class ViewContainerComponent {
    constructor() {
        this.columnNames = [];
        this.actions = [];
        this.inputData = [];
        this.topActionButtons = [];
    }
    /**
     * @return {?}
     */
    ngOnInit() { }
}
ViewContainerComponent.decorators = [
    { type: Component, args: [{
                selector: 'sb-view-container',
                template: "<div class=\"view-container mat-elevation-z3\">\r\n  <sb-data-table [selectColumn]=\"tableSelectColumn\" [columnNames]=\"columnNames\" [actions]=\"actions\" [inputData]=\"inputData\" [topActionButtons]=\"topActionButtons\">\r\n      <ng-content select=\".filters\" class=\"sb-data-table-content\"></ng-content>\r\n  </sb-data-table>\r\n</div>\r\n",
                styles: [".view-container{transition:box-shadow 280ms cubic-bezier(.4,0,.2,1);display:block;position:relative;padding:16px 0;margin:5px;border-radius:4px;background:#fff}.filter-container{padding:5px 16px}"]
            }] }
];
/** @nocollapse */
ViewContainerComponent.ctorParameters = () => [];
ViewContainerComponent.propDecorators = {
    tableSelectColumn: [{ type: Input }],
    columnNames: [{ type: Input }],
    actions: [{ type: Input }],
    inputData: [{ type: Input }],
    topActionButtons: [{ type: Input }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class FilterTableComponent {
    /**
     * @param {?} overlay
     * @param {?} viewContainerRef
     */
    constructor(overlay, viewContainerRef) {
        this.overlay = overlay;
        this.viewContainerRef = viewContainerRef;
        this.limpar = new EventEmitter();
        this.pesquisa = new EventEmitter();
        this.positions = [{
                originX: 'end',
                originY: 'bottom',
                overlayX: 'end',
                overlayY: 'top'
            }];
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.dropDownDialogOpen = 'out';
        this.btnLimparOutsideShow = 'out';
    }
    /**
     * @return {?}
     */
    ngAfterViewInit() {
        this.strategy = this.overlay.position()
            .flexibleConnectedTo(this._overlayOrigin.elementRef)
            .withPositions(this.positions).withTransformOriginOn('#filter-table-button');
        this.config = new OverlayConfig({
            positionStrategy: this.strategy,
            hasBackdrop: true,
            backdropClass: 'cdk-overlay-transparent-backdrop'
        });
        this.overlayRef = this.overlay.create(this.config);
    }
    /**
     * @return {?}
     */
    openFilterTableContentOverlay() {
        this.overlayRef.backdropClick().subscribe((/**
         * @return {?}
         */
        () => {
            this.overlayRef.detach();
        }));
        this.overlayRef.attach(this.overlayDropDownContentTemplate);
    }
    /**
     * closeDropdown
     * @return {?}
     */
    closeDropdown() {
        if (this.overlayRef.hasAttached) {
            this.overlayRef.detach();
        }
    }
    /* clickedInside($event: Event) {
        $event.preventDefault();
        $event.stopPropagation();  // <- that will stop propagation on lower layers
      } */
    /* @HostListener("document:click", ['$event']) clickedOutside($event) {
          this.dropDownDialogOpen = 'out'
      } */
    /**
     * @return {?}
     */
    toggleFilter() {
        this.dropDownDialogOpen = this.dropDownDialogOpen === 'out' ? 'in' : 'out';
    }
    /**
     * @return {?}
     */
    pesquisar() {
        this.pesquisa.emit();
        this.btnLimparOutsideShow = 'in';
        this.closeDropdown();
    }
    /**
     * @return {?}
     */
    limparFiltro() {
        this.limpar.emit();
        this.btnLimparOutsideShow = 'out';
        this.closeDropdown();
    }
}
FilterTableComponent.decorators = [
    { type: Component, args: [{
                selector: 'sb-filter-table',
                template: "<div fxLayout=\"row\" fxLayoutAlign=\"flex-end center\">\r\n\t<button @flipInOut *ngIf=\"btnLimparOutsideShow == 'in'\" id=\"btn-filter-limpar-outside\" mat-button class=\"btn-filter\"\r\n\t\t(click)=\"limparFiltro();\">Limpar Filtro</button>\r\n\t<button mat-icon-button (click)=\"openFilterTableContentOverlay()\" cdk-overlay-origin id=\"filter-table-button\">\r\n\t\t<mat-icon>filter_list</mat-icon>\r\n\t</button>\r\n\t<ng-template cdk-portal #overlayDropDownContentTemplate=\"cdkPortal\">\r\n\t\t<mat-card @flipInOut style=\"z-index: 1;\" class=\"mat-elevation-z4\">\r\n\t\t\t<div fxLayout=\"row wrap\" fxLayoutGap=\"20px grid\" fxLayoutAlign=\"center\">\r\n\t\t\t\t<ng-content></ng-content>\r\n\t\t\t</div>\r\n\t\t\t<sb-filter-table-actions (limpar)=\"limparFiltro()\" (pesquisa)=\"pesquisar()\"></sb-filter-table-actions>\r\n\t\t</mat-card>\r\n\t</ng-template>\r\n</div>\r\n",
                animations: [
                    trigger('flipInOut', [
                        transition('void => *', useAnimation(flipInX, {
                            params: { timing: 0.4, delay: 0 }
                        })),
                        transition('* => void', useAnimation(flipOutX, {
                            params: { timing: 0.5, delay: 0 }
                        }))
                    ])
                ],
                styles: [""]
            }] }
];
/** @nocollapse */
FilterTableComponent.ctorParameters = () => [
    { type: Overlay },
    { type: ViewContainerRef }
];
FilterTableComponent.propDecorators = {
    limpar: [{ type: Output }],
    pesquisa: [{ type: Output }],
    _overlayOrigin: [{ type: ViewChild, args: [CdkOverlayOrigin,] }],
    overlayDropDownContentTemplate: [{ type: ViewChild, args: ['overlayDropDownContentTemplate',] }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class MatFormFieldComponent {
    /**
     * @param {?} cdr
     */
    constructor(cdr) {
        this.cdr = cdr;
        this.showHint = false;
    }
    /**
     * @return {?}
     */
    ngOnInit() { }
    /**
     * @return {?}
     */
    ngAfterViewInit() {
        this.formfields.forEach((/**
         * @param {?} ff
         * @return {?}
         */
        (ff) => {
            ff.updateOutlineGap();
        }));
        this.cdr.detectChanges();
    }
}
MatFormFieldComponent.decorators = [
    { type: Component, args: [{
                selector: 'sb-mat-form-field',
                template: "<mat-form-field [appearance]=\"appearence\" fxFlex >\r\n  <mat-label>{{formName}}</mat-label>\r\n  <input  matInput placeholder=\"{{placeHolder ? placeHolder : formName}}\" />\r\n  <mat-icon matSuffix>{{iconName}}</mat-icon>\r\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\r\n</mat-form-field>\r\n",
                styles: [""]
            }] }
];
/** @nocollapse */
MatFormFieldComponent.ctorParameters = () => [
    { type: ChangeDetectorRef }
];
MatFormFieldComponent.propDecorators = {
    appearence: [{ type: Input }],
    showHint: [{ type: Input }],
    hint: [{ type: Input }],
    matSuffix: [{ type: Input }],
    matPrefix: [{ type: Input }],
    iconName: [{ type: Input }],
    placeHolder: [{ type: Input }],
    formName: [{ type: Input }],
    ngModel: [{ type: Output }],
    formfields: [{ type: ViewChildren, args: [MatFormField,] }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class FilterTableActionsComponent {
    constructor() {
        this.limpar = new EventEmitter();
        this.pesquisa = new EventEmitter();
    }
    /**
     * @return {?}
     */
    ngOnInit() {
    }
    /**
     * @return {?}
     */
    pesquisar() {
        this.pesquisa.emit();
    }
    /**
     * @return {?}
     */
    limparFiltro() {
        this.limpar.emit();
    }
}
FilterTableActionsComponent.decorators = [
    { type: Component, args: [{
                selector: 'sb-filter-table-actions',
                template: "<div fxLayout=\"row\" fxLayoutAlign=\"flex-end center\" fxLayoutGap=\"8px\">\n  <button\n    id=\"btn-filter-limpar-inside\"\n    mat-stroked-button\n    class=\"btn-filter\"\n    (click)=\"limparFiltro()\"\n  >\n    Limpar\n  </button>\n  <button\n    id=\"btn-filter-pesquisar\"\n    mat-flat-button\n    color=\"primary\"\n    class=\"btn-filter\"\n    (click)=\"pesquisar()\"\n  >\n    Pesquisar\n  </button>\n  <ng-content></ng-content>\n</div>\n",
                styles: [""]
            }] }
];
/** @nocollapse */
FilterTableActionsComponent.ctorParameters = () => [];
FilterTableActionsComponent.propDecorators = {
    limpar: [{ type: Output }],
    pesquisa: [{ type: Output }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class DataTableService {
    // tslint:disable-next-line: variable-name
    constructor() {
        this.buttonRowEvent = new EventEmitter();
        this.topButtonEvent = new EventEmitter();
        this.inputDataEvent = new EventEmitter();
        this.filterLimparEvent = new EventEmitter();
        this.filterPesquisarEvent = new EventEmitter();
    }
    /**
     * @return {?}
     */
    ngOnInit() { }
    /**
     * @return {?}
     */
    getData() {
        return this.data;
    }
    /**
     * @param {?} element
     * @return {?}
     */
    setDataSource(element) {
        this.data = new MatTableDataSource(element);
        return this.data;
    }
    /**
     * @param {?} element
     * @return {?}
     */
    setInputData(element) {
        this.inputDataEvent.emit(element);
    }
    /**
     * @param {?} event
     * @param {?} index
     * @return {?}
     */
    buttonRowClick(event, index) {
        this.buttonRowEvent.emit({ event, index });
    }
    /**
     * @param {?} eventSlug
     * @return {?}
     */
    topButtonClick(eventSlug) {
        this.topButtonEvent.emit(eventSlug);
    }
    /**
     * @return {?}
     */
    filterLimparButtonClick() {
        this.filterLimparEvent.emit();
    }
    /**
     * @return {?}
     */
    filterPesquisarButtonClick() {
        this.filterPesquisarEvent.emit();
    }
}
DataTableService.decorators = [
    { type: Injectable, args: [{
                providedIn: 'root'
            },] }
];
/** @nocollapse */
DataTableService.ctorParameters = () => [];
/** @nocollapse */ DataTableService.ngInjectableDef = defineInjectable({ factory: function DataTableService_Factory() { return new DataTableService(); }, token: DataTableService, providedIn: "root" });

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class PopoverService {
    constructor() {
        this.emitirCloseEvent = new EventEmitter();
        this.buttonClickEvent = new EventEmitter();
    }
    /**
     * @return {?}
     */
    closeDropdown() {
        this.emitirCloseEvent.emit();
    }
    /**
     * @param {?} event
     * @param {?} elementId
     * @return {?}
     */
    buttonClickEmit(event, elementId) {
        this.buttonClickEvent.emit({ event, elementId });
    }
}
PopoverService.decorators = [
    { type: Injectable, args: [{
                providedIn: 'root'
            },] }
];
/** @nocollapse */
PopoverService.ctorParameters = () => [];
/** @nocollapse */ PopoverService.ngInjectableDef = defineInjectable({ factory: function PopoverService_Factory() { return new PopoverService(); }, token: PopoverService, providedIn: "root" });

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class DataTableComponent {
    /**
     * @param {?} dataTableService
     * @param {?} popoverService
     * @param {?} renderer
     */
    constructor(dataTableService, popoverService, renderer) {
        this.dataTableService = dataTableService;
        this.popoverService = popoverService;
        this.renderer = renderer;
        this.selectColumn = false;
        this.columnNames = [];
        this.actions = [];
        this.inputData = [];
        this.topActionButtons = [];
        this.displayedColumns = [];
        this.columnsToDisplay = [];
        this.selection = new SelectionModel(true, []);
        this.columnsNameApi = [];
        this.topButtonStyle = {
            height: '32px',
            'line-height': '32px'
        };
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.data = this.dataTableService.setDataSource(this.inputData);
        this.columnsNameApi = this.columnNames.map((/**
         * @param {?} e
         * @return {?}
         */
        e => e.columnNameApi));
        this.displayColumns();
        this.dataTableService.inputDataEvent.subscribe((/**
         * @param {?} inputData
         * @return {?}
         */
        inputData => {
            this.load(inputData);
        }));
    }
    /**
     * @param {?} inputData
     * @return {?}
     */
    load(inputData) {
        this.inputData = inputData;
        this.columnsNameApi = this.columnNames.map((/**
         * @param {?} e
         * @return {?}
         */
        e => e.columnNameApi));
        this.data = this.dataTableService.setDataSource(this.inputData);
        this.noData = this.data.connect().pipe(map((/**
         * @param {?} data
         * @return {?}
         */
        data => data.length === 0)));
        this.data.paginator = this.paginator;
        this.addActionsToData();
        this.displayColumns();
        this.popoverService.buttonClickEvent.subscribe((/**
         * @param {?} event
         * @return {?}
         */
        event => {
            this.buttonRowClick(event.event, event.elementId);
        }));
    }
    /**
     * @return {?}
     */
    filterLimparButtonClick() {
        this.dataTableService.filterLimparButtonClick();
    }
    /**
     * @return {?}
     */
    filterPesquisarButtonClick() {
        this.dataTableService.filterPesquisarButtonClick();
    }
    /**
     * @param {?} eventSlug
     * @return {?}
     */
    topButtonClick(eventSlug) {
        this.dataTableService.topButtonClick(eventSlug);
    }
    /**
     * @param {?} event
     * @param {?} index
     * @return {?}
     */
    buttonRowClick(event, index) {
        // console.log(`buttonRowClick: ${event.toLowerCase()}, ${index.toLowerCase()}`);
        this.dataTableService.buttonRowClick(event.toLowerCase(), index);
    }
    /**
     * @return {?}
     */
    addActionsToData() {
        this.data.data.map((/**
         * @param {?} e
         * @return {?}
         */
        e => {
            // tslint:disable-next-line: no-string-literal
            e['actions'] = Object.assign({}, this.actions);
        }));
    }
    /**
     * @return {?}
     */
    isAllSelected() {
        /** @type {?} */
        const numSelected = this.selection.selected.length;
        /** @type {?} */
        const numRows = this.data.data.length;
        return numSelected === numRows;
    }
    /**
     * @return {?}
     */
    masterToggle() {
        this.isAllSelected()
            ? this.selection.clear()
            : this.data.data.forEach((/**
             * @param {?} row
             * @return {?}
             */
            row => this.selection.select(row)));
    }
    /**
     * @return {?}
     */
    displayColumns() {
        if (this.selectColumn) {
            this.addSelectToDisplayedColumns();
        }
        if (this.actions.length >= 0) {
            this.addActionsToDisplayedColumns();
        }
    }
    /**
     * @return {?}
     */
    addSelectToDisplayedColumns() {
        /** @type {?} */
        const select = ['select'];
        if (this.columnsNameApi && this.columnsNameApi.length !== 0) {
            this.columnsNameApi = select.concat(this.columnsNameApi);
            this.displayedColumns = this.columnsNameApi;
            this.columnsToDisplay = this.displayedColumns.slice();
        }
        else {
            this.displayedColumns = select.concat(Object.keys(this.data[0]));
            this.columnsToDisplay = this.displayedColumns.slice();
        }
    }
    /**
     * @return {?}
     */
    addActionsToDisplayedColumns() {
        /** @type {?} */
        const actions = ['actions'];
        if (this.columnsNameApi && this.columnsNameApi.length !== 0) {
            this.columnsNameApi.push(actions[0]);
            this.displayedColumns = this.columnsNameApi;
            this.columnsToDisplay = this.displayedColumns.slice();
        }
        else {
            this.displayedColumns = actions.concat(Object.keys(this.data[0]));
            this.columnsToDisplay = this.displayedColumns.slice();
        }
    }
    /**
     * @param {?} columnNameApi
     * @return {?}
     */
    verifyNameColumn(columnNameApi) {
        /** @type {?} */
        const columnNameApiArray = this.columnNames.map((/**
         * @param {?} e
         * @return {?}
         */
        e => e.columnNameApi));
        /** @type {?} */
        const indexcolumnNameApi = columnNameApiArray.indexOf(columnNameApi);
        if (indexcolumnNameApi >= 0) {
            return this.columnNames[indexcolumnNameApi].displayName;
        }
        else {
            return columnNameApi;
        }
    }
    /**
     * @return {?}
     */
    addColumn() {
        /** @type {?} */
        const randomColumn = Math.floor(Math.random() * this.displayedColumns.length);
        this.columnsToDisplay.push(this.displayedColumns[randomColumn]);
    }
    /**
     * @return {?}
     */
    removeColumn() {
        if (this.columnsToDisplay.length) {
            this.columnsToDisplay.pop();
        }
    }
}
DataTableComponent.decorators = [
    { type: Component, args: [{
                selector: 'sb-data-table',
                template: "<div>\r\n  <div fxLayout fxLayoutAlign=\"space-between center\" class=\"mr-16 ml-16 mb-5\">\r\n    <div #topButtonAction fxLayout=\"row wrap\" fxLayoutAlign=\"flex-start center\" fxLayoutGap=\"10px grid\">\r\n      <sb-button\r\n        *ngFor=\"let buttonElement of topActionButtons\"\r\n        [materialTypeButton]=\"buttonElement.buttonType\"\r\n        [color]=\"buttonElement.buttonColor\"\r\n        [actionName]=\"buttonElement.actionName\"\r\n        [customStyles]=\"topButtonStyle\"\r\n        (buttonClick)=\"topButtonClick(buttonElement.eventSlug)\"\r\n      ></sb-button>\r\n    </div>\r\n    <sb-filter-table (limpar)=\"filterLimparButtonClick()\" (pesquisa)=\"filterPesquisarButtonClick()\">\r\n      <ng-content select=\".sb-data-table-content\"></ng-content>\r\n    </sb-filter-table>\r\n  </div>\r\n  <table mat-table [dataSource]=\"data\" style=\"width: 100%;\" class=\"table-striped table-hover\">\r\n    <!-- Checkbox Column -->\r\n\r\n    <ng-container [matColumnDef]=\"column\" *ngFor=\"let column of displayedColumns\">\r\n      <div *ngIf=\"column == 'select'\">\r\n        <th mat-header-cell *matHeaderCellDef>\r\n          <mat-checkbox\r\n            (change)=\"$event ? masterToggle() : null\"\r\n            [checked]=\"selection.hasValue() && isAllSelected()\"\r\n            [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n          >\r\n          </mat-checkbox>\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let row\">\r\n          <mat-checkbox\r\n            (click)=\"$event.stopPropagation()\"\r\n            (change)=\"$event ? selection.toggle(row) : null\"\r\n            [checked]=\"selection.isSelected(row)\"\r\n          >\r\n          </mat-checkbox>\r\n        </td>\r\n      </div>\r\n      <div *ngIf=\"column !== 'select' && column !== 'actions'\">\r\n        <th mat-header-cell *matHeaderCellDef>\r\n          {{ verifyNameColumn(column) }}\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let element\">{{ element[column] }}</td>\r\n      </div>\r\n      <div *ngIf=\"column == 'actions'\">\r\n        <th mat-header-cell *matHeaderCellDef>A\u00E7\u00F5es</th>\r\n        <td mat-cell *matCellDef=\"let element\">\r\n          <div fxLayout>\r\n            <div *ngFor=\"let buttonElement of (element.actions | keyvalue)\">\r\n              <button\r\n                mat-icon-button\r\n                *ngIf=\"!buttonElement.value.isDelete\"\r\n                (click)=\"buttonRowClick(buttonElement.value.actionName, element.id)\"\r\n                matTooltip=\"{{ buttonElement.value.actionDescription }}\"\r\n              >\r\n                <mat-icon>{{ buttonElement.value.actionIcon }}</mat-icon>\r\n              </button>\r\n              <sb-popover\r\n                *ngIf=\"buttonElement.value.isDelete\"\r\n                matTooltip=\"{{ buttonElement.value.actionDescription }}\"\r\n                elementId=\"{{ element.id }}\"\r\n                popoverTitle=\"{{ buttonElement.value.isDeleteTitle }}\"\r\n                popoverDescription=\"{{ buttonElement.value.isDeleteDescription }}\"\r\n              ></sb-popover>\r\n            </div>\r\n          </div>\r\n        </td>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: columnsToDisplay\" (click)=\"selection.toggle(row)\"></tr>\r\n  </table>\r\n\r\n  <div @flipInOut *ngIf=\"data.data.length == 0\" fxLayout=\"column\" fxLayoutAlign=\"center center\" fxLayoutGap=\"5px\" class=\"m-30\">\r\n    <img src=\"../../../assets/img/nodata.svg\" />\r\n    <p class=\" mat-caption\">\r\n      Sem Registros\r\n    </p>\r\n  </div>\r\n\r\n  <mat-paginator [pageSizeOptions]=\"[5, 10, 25, 100]\" class=\"mt-10\"></mat-paginator>\r\n</div>\r\n",
                animations: [
                    trigger('flipInOut', [
                        transition('void => *', useAnimation(flipInX, {
                            params: { timing: 0.3, delay: 0, a: '10px', b: '0' }
                        })),
                        transition('* => void', useAnimation(flipOutX, {
                            params: { timing: 0.3, delay: 0 }
                        }))
                    ])
                ],
                styles: ["td.mat-cell:last-of-type,td.mat-footer-cell:last-of-type,th.mat-header-cell:last-of-type{width:180px;text-align:center}"]
            }] }
];
/** @nocollapse */
DataTableComponent.ctorParameters = () => [
    { type: DataTableService },
    { type: PopoverService },
    { type: Renderer2 }
];
DataTableComponent.propDecorators = {
    selectColumn: [{ type: Input }],
    columnNames: [{ type: Input }],
    actions: [{ type: Input }],
    inputData: [{ type: Input }],
    topActionButtons: [{ type: Input }],
    paginator: [{ type: ViewChild, args: [MatPaginator,] }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class DataTableActionsComponent {
    constructor() { }
    /**
     * @return {?}
     */
    ngOnInit() {
    }
}
DataTableActionsComponent.decorators = [
    { type: Component, args: [{
                selector: 'sb-data-table-actions',
                template: "<p>\n  data-table-actions works!\n</p>\n",
                styles: [""]
            }] }
];
/** @nocollapse */
DataTableActionsComponent.ctorParameters = () => [];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class DataTableRowActionsComponent {
    constructor() { }
    /**
     * @return {?}
     */
    ngOnInit() {
    }
}
DataTableRowActionsComponent.decorators = [
    { type: Component, args: [{
                selector: 'sb-data-table-row-actions',
                template: "<p>\n  data-table-row-actions works!\n</p>\n",
                styles: [""]
            }] }
];
/** @nocollapse */
DataTableRowActionsComponent.ctorParameters = () => [];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class PopoverComponent {
    /**
     * @param {?} overlay
     * @param {?} viewContainerRef
     * @param {?} popoverService
     */
    constructor(overlay, viewContainerRef, popoverService) {
        this.overlay = overlay;
        this.viewContainerRef = viewContainerRef;
        this.popoverService = popoverService;
        this.positions = [
            {
                originX: 'start',
                originY: 'top',
                overlayX: 'center',
                overlayY: 'bottom'
            }
        ];
    }
    /**
     * @return {?}
     */
    ngAfterViewInit() {
        this.strategy = this.overlay
            .position()
            .flexibleConnectedTo(this.popoverOrigin.elementRef)
            .withPositions(this.positions)
            .withTransformOriginOn('#action-dropdown-button');
        this.config = new OverlayConfig({
            positionStrategy: this.strategy,
            hasBackdrop: true,
            backdropClass: 'cdk-overlay-transparent-backdrop'
        });
        this.overlayRef = this.overlay.create(this.config);
    }
    /**
     * @return {?}
     */
    openPopover() {
        this.overlayRef.backdropClick().subscribe((/**
         * @return {?}
         */
        () => {
            this.overlayRef.detach();
        }));
        this.popoverService.emitirCloseEvent.subscribe((/**
         * @return {?}
         */
        () => {
            this.overlayRef.detach();
        }));
        this.overlayRef.attach(this.popoverContentTemplate);
    }
    /**
     * @param {?} event
     * @return {?}
     */
    clickActionButton(event) {
        this.popoverService.buttonClickEmit(event.toLowerCase(), this.elementId);
        this.popoverService.closeDropdown();
    }
}
PopoverComponent.decorators = [
    { type: Component, args: [{
                selector: 'sb-popover',
                template: "<button\r\n  mat-icon-button\r\n  type=\"button\"\r\n  id=\"action-dropdown-button\"\r\n  cdk-overlay-origin\r\n  (click)=\"openPopover()\"\r\n>\r\n  <mat-icon>delete</mat-icon>\r\n</button>\r\n<ng-template cdk-portal #popoverContentTemplate=\"cdkPortal\">\r\n  <div\r\n    @flipInOut\r\n    fxLayout=\"column\"\r\n    fxLayoutAlign=\"space-between\"\r\n    class=\"div-container-popover mat-elevation-z4 arrowBox\"\r\n  >\r\n    <div fxLayout>\r\n      <div class=\"mat-body\">{{ popoverTitle }}</div>\r\n    </div>\r\n    <div fxLayout class=\"p-10\">\r\n      <div class=\"mat-caption\">{{ popoverDescription }}</div>\r\n    </div>\r\n    <div fxLayout fxLayoutAlign=\"flex-end\" fxLayoutGap=\"5px\">\r\n      <button\r\n        mat-flat-button\r\n        class=\"button-popover\"\r\n        (click)=\"clickActionButton('canceldelete')\"\r\n      >\r\n        Cancelar\r\n      </button>\r\n      <button\r\n        mat-flat-button\r\n        color=\"primary\"\r\n        class=\"button-popover\"\r\n        (click)=\"clickActionButton('confirmdelete')\"\r\n      >\r\n        Confirmar\r\n      </button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n",
                animations: [
                    trigger('flipInOut', [
                        transition('void => *', useAnimation(fadeInUp, {
                            params: { timing: 0.3, delay: 0, a: '10px', b: '0' }
                        })),
                        transition('* => void', useAnimation(fadeOut, {
                            params: { timing: 0.3, delay: 0 }
                        }))
                    ])
                ],
                styles: [".button-popover{font-size:.7em;height:20px;line-height:20px;padding:0}.mat-body{font-weight:500}.arrowBox{min-width:200px;min-height:30px;background-color:#fff;border-radius:5px;position:relative;padding:10px;font-family:Roboto,sans-serif;font-size:14px;line-height:22px;text-align:center;margin:0 0 7px 30px}.arrowBox:after{content:' ';width:0;height:0;border-top:10px solid #fff;border-left:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid #fff;border-radius:0 30%;position:absolute;left:50%;top:100%;margin:-10px 0 0 -5px;-webkit-transform:rotate(135deg);transform:rotate(135deg);box-shadow:3px -4px 5px -1px rgba(0,0,0,.26)}#player{z-index:-1;position:relative;top:-16px;left:114px}#inner{-webkit-transform:rotate(45deg);transform:rotate(45deg);background-color:#fff;width:20px;height:20px;top:2px;left:-9px;position:relative;border-radius:6px}#outer{position:absolute;width:16px;height:25px;overflow:hidden;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}"]
            }] }
];
/** @nocollapse */
PopoverComponent.ctorParameters = () => [
    { type: Overlay },
    { type: ViewContainerRef },
    { type: PopoverService }
];
PopoverComponent.propDecorators = {
    popoverTitle: [{ type: Input }],
    popoverDescription: [{ type: Input }],
    elementId: [{ type: Input }],
    popoverOrigin: [{ type: ViewChild, args: [CdkOverlayOrigin,] }],
    popoverContentTemplate: [{ type: ViewChild, args: ['popoverContentTemplate',] }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class ButtonComponent {
    constructor() {
        this.buttonClick = new EventEmitter();
        /* if(this.testeVariavel === 'mat-button') {
          this.matButton = true;
        } */
    }
    /**
     * @return {?}
     */
    ngOnInit() {
    }
    /**
     * @return {?}
     */
    topButtonClick() {
        this.buttonClick.emit();
    }
}
ButtonComponent.decorators = [
    { type: Component, args: [{
                selector: 'sb-button',
                template: "<div [ngSwitch]=\"materialTypeButton\">\r\n  <button\r\n    *ngSwitchCase=\"'mat-button'\"\r\n    mat-button\r\n    color=\"{{ color }}\"\r\n    [ngClass]=\"fullWidth ? 'button-full-width' : ''\"\r\n    [type]=\"typeButton\"\r\n    [ngStyle]=\"customStyles\"\r\n    (click)=\"topButtonClick()\"\r\n  >\r\n    <div *ngIf=\"actionName\">\r\n      {{ actionName }}\r\n    </div>\r\n    <div *ngIf=\"!actionName || actionName == '' || actionName == null\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </button>\r\n  <button\r\n    *ngSwitchCase=\"'mat-raised-button'\"\r\n    mat-raised-button\r\n    color=\"{{ color }}\"\r\n    [ngClass]=\"fullWidth ? 'button-full-width' : ''\"\r\n    [type]=\"typeButton\"\r\n    [ngStyle]=\"customStyles\"\r\n    (click)=\"topButtonClick()\"\r\n  >\r\n    <div *ngIf=\"actionName\">\r\n      {{ actionName }}\r\n    </div>\r\n    <div *ngIf=\"!actionName\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </button>\r\n  <button\r\n    *ngSwitchCase=\"'mat-icon-button'\"\r\n    mat-icon-button\r\n    color=\"{{ color }}\"\r\n    [ngClass]=\"fullWidth ? 'button-full-width' : ''\"\r\n    [type]=\"typeButton\"\r\n    [ngStyle]=\"customStyles\"\r\n    (click)=\"topButtonClick()\"\r\n  >\r\n    <div *ngIf=\"actionName\">\r\n      {{ actionName }}\r\n    </div>\r\n    <div *ngIf=\"!actionName\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </button>\r\n  <button\r\n    *ngSwitchCase=\"'mat-fab'\"\r\n    mat-fab\r\n    color=\"{{ color }}\"\r\n    [ngClass]=\"fullWidth ? 'button-full-width' : ''\"\r\n    [type]=\"typeButton\"\r\n    [ngStyle]=\"customStyles\"\r\n    (click)=\"topButtonClick()\"\r\n  >\r\n    <div *ngIf=\"actionName\">\r\n      {{ actionName }}\r\n    </div>\r\n    <div *ngIf=\"!actionName\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </button>\r\n  <button\r\n    *ngSwitchCase=\"'mat-mini-fab'\"\r\n    mat-mini-fab\r\n    color=\"{{ color }}\"\r\n    [ngClass]=\"fullWidth ? 'button-full-width' : ''\"\r\n    [type]=\"typeButton\"\r\n    [ngStyle]=\"customStyles\"\r\n    (click)=\"topButtonClick()\"\r\n  >\r\n    <div *ngIf=\"actionName\">\r\n      {{ actionName }}\r\n    </div>\r\n    <div *ngIf=\"!actionName\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </button>\r\n  <button\r\n    *ngSwitchCase=\"'mat-stroked-button'\"\r\n    mat-stroked-button\r\n    color=\"{{ color }}\"\r\n    [ngClass]=\"fullWidth ? 'button-full-width' : ''\"\r\n    [type]=\"typeButton\"\r\n    [ngStyle]=\"customStyles\"\r\n    (click)=\"topButtonClick()\"\r\n  >\r\n    <div *ngIf=\"actionName\">\r\n      {{ actionName }}\r\n    </div>\r\n    <div *ngIf=\"!actionName\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </button>\r\n  <button\r\n    *ngSwitchCase=\"'mat-flat-button'\"\r\n    mat-flat-button\r\n    color=\"{{ color }}\"\r\n    [ngClass]=\"fullWidth ? 'button-full-width' : ''\"\r\n    [type]=\"typeButton\"\r\n    [ngStyle]=\"customStyles\"\r\n    (click)=\"topButtonClick()\"\r\n  >\r\n    <div *ngIf=\"actionName\">\r\n      {{ actionName }}\r\n    </div>\r\n    <div *ngIf=\"!actionName\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </button>\r\n</div>\r\n",
                styles: [".button-full-width{width:100%}"]
            }] }
];
/** @nocollapse */
ButtonComponent.ctorParameters = () => [];
ButtonComponent.propDecorators = {
    color: [{ type: Input }],
    actionName: [{ type: Input }],
    typeButton: [{ type: Input }],
    materialTypeButton: [{ type: Input }],
    fullWidth: [{ type: Input }],
    customStyles: [{ type: Input }],
    buttonClick: [{ type: Output }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class DialogComponent {
    /**
     * @param {?} dialogRef
     */
    constructor(dialogRef) {
        this.dialogRef = dialogRef;
        this.confirmClick = new EventEmitter();
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        //this.tabs = this.dialogService.getTabs();
    }
    /**
     * @return {?}
     */
    onCancelClick() {
        this.dialogRef.close();
    }
    /**
     * @return {?}
     */
    onConfirmClick() {
        this.confirmClick.emit();
    }
}
DialogComponent.decorators = [
    { type: Component, args: [{
                selector: 'sb-dialog',
                template: "<div mat-dialog-content>\r\n  <ng-content></ng-content>\r\n</div>\r\n<div mat-dialog-actions fxLayout fxLayoutAlign=\"flex-end center\" fxLayoutGap=\"5px\">\r\n  <sb-button actionName=\"Cancelar\" typeButton=\"button\" materialTypeButton=\"mat-stroked-button\" (buttonClick)=\"onCancelClick()\"></sb-button>\r\n  <sb-button actionName=\"Confirmar\" [typeButton]=\"typeButton\" materialTypeButton=\"mat-flat-button\" color=\"primary\" (buttonClick)=\"onConfirmClick()\"></sb-button>\r\n</div>\r\n<!-- <h1 mat-dialog-title>Hi {{data.name}}</h1>\r\n  <p>What's your favorite animal?</p>\r\n  <mat-form-field>\r\n    <input matInput [(ngModel)]=\"data\">\r\n  </mat-form-field>\r\n  <ng-content [select]=\"selectContentId\"></ng-content>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button mat-button (click)=\"onNoClick()\">No Thanks</button>\r\n  <button mat-button [mat-dialog-close]=\"data\" cdkFocusInitial>Ok</button>\r\n</div> -->\r\n",
                styles: [""]
            }] }
];
/** @nocollapse */
DialogComponent.ctorParameters = () => [
    { type: MatDialogRef }
];
DialogComponent.propDecorators = {
    typeButton: [{ type: Input }],
    confirmClick: [{ type: Output }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class ViewEditContainerComponent {
    constructor() {
        this.modalConfirmClick = new EventEmitter();
    }
    /**
     * @return {?}
     */
    ngOnInit() {
    }
    /**
     * @return {?}
     */
    confirmClick() {
        this.modalConfirmClick.emit();
    }
}
ViewEditContainerComponent.decorators = [
    { type: Component, args: [{
                selector: 'sb-view-edit-container',
                template: "<sb-dialog (confirmClick)=\"confirmClick()\" [typeButton]=\"typeButton ? typeButton : 'submit'\">\r\n  <mat-tab-group>\r\n    <mat-tab #matTabTag *ngFor=\"let tab of templates; let index = index\" [label]=\"tab[0]\">\r\n      <ng-container *ngTemplateOutlet=\"tab[1]\"></ng-container>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n</sb-dialog>\r\n\r\n<!-- <ng-content></ng-content> -->\r\n\r\n\r\n",
                styles: [""]
            }] }
];
/** @nocollapse */
ViewEditContainerComponent.ctorParameters = () => [];
ViewEditContainerComponent.propDecorators = {
    templates: [{ type: Input }],
    typeButton: [{ type: Input }],
    modalConfirmClick: [{ type: Output }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class MatTabComponent {
    constructor() { }
    /**
     * @return {?}
     */
    ngOnInit() {
    }
}
MatTabComponent.decorators = [
    { type: Component, args: [{
                selector: 'sb-mat-tab',
                template: "<mat-tab [label]=\"label\">\r\n    <ng-content></ng-content>\r\n</mat-tab>\r\n",
                styles: [""]
            }] }
];
/** @nocollapse */
MatTabComponent.ctorParameters = () => [];
MatTabComponent.propDecorators = {
    label: [{ type: Input }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class HeaderService {
    constructor() {
        this.showMenuClickEvent = new EventEmitter();
    }
    /**
     * @return {?}
     */
    showMenuClick() {
        this.showMenuClickEvent.emit();
    }
    /**
     * @param {?} e
     * @return {?}
     */
    showMenuButton(e) {
        this.hasSideNav = e;
    }
}
HeaderService.decorators = [
    { type: Injectable, args: [{
                providedIn: 'root'
            },] }
];
/** @nocollapse */
HeaderService.ctorParameters = () => [];
/** @nocollapse */ HeaderService.ngInjectableDef = defineInjectable({ factory: function HeaderService_Factory() { return new HeaderService(); }, token: HeaderService, providedIn: "root" });

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class HeaderComponent {
    /**
     * @param {?} headerService
     */
    constructor(headerService) {
        this.headerService = headerService;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.showMenuButton = this.headerService.hasSideNav;
    }
    /**
     * @return {?}
     */
    showMenuButtonClick() {
        this.headerService.showMenuClick();
    }
}
HeaderComponent.decorators = [
    { type: Component, args: [{
                selector: 'sb-header',
                template: "<header>\n  <mat-toolbar color=\"primary\">\n    <mat-toolbar-row fxLayout fxLayoutAlign=\"space-between center\">\n      <div fxLayout fxLayoutAlign=\"center center\">\n        <div fxLayout fxLayoutAlign=\"center center\">\n          <img *ngIf=\"logoImgSrc\" [src]=\"logoImgSrc\" class=\"logo-principal\" />\n          <div class=\"sb-mat-title-appbar\">{{ appName }}</div>\n        </div>\n        <button\n          *ngIf=\"showMenuButton\"\n          mat-icon-button\n          (click)=\"showMenuButtonClick()\"\n        >\n          <mat-icon class=\"icons-toolbar\">menu</mat-icon>\n        </button>\n      </div>\n      <div>\n        <ng-content></ng-content>\n      </div>\n    </mat-toolbar-row>\n  </mat-toolbar>\n</header>\n",
                styles: [".logo-principal{width:28px;margin:auto}.sb-mat-title-appbar{font:400 24px/36px Roboto,\"Helvetica Neue\",sans-serif;margin:0 0 0 8px;color:#fff}"]
            }] }
];
/** @nocollapse */
HeaderComponent.ctorParameters = () => [
    { type: HeaderService }
];
HeaderComponent.propDecorators = {
    logoImgSrc: [{ type: Input }],
    appName: [{ type: Input }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/** @type {?} */
const MATERIAL_MODULES = [
    MatCheckboxModule,
    MatCheckboxModule,
    MatButtonModule,
    MatInputModule,
    MatAutocompleteModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatRadioModule,
    MatSelectModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatMenuModule,
    MatSidenavModule,
    MatToolbarModule,
    MatListModule,
    MatGridListModule,
    MatCardModule,
    MatStepperModule,
    MatTabsModule,
    MatExpansionModule,
    MatButtonToggleModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatDialogModule,
    MatTooltipModule,
    MatSnackBarModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule,
    MatRippleModule
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class SidenavService {
    constructor() {
        this.isExpanded = true;
        this.isShowing = false;
        this.isHideToggle = !this.isExpanded;
        this.expandEmitter = new EventEmitter();
        this.showEmitter = new EventEmitter();
        this.hideToggleEmitter = new EventEmitter();
    }
    /**
     * @return {?}
     */
    isExpandStatus() {
        return this.isExpanded;
    }
    /**
     * @param {?} e
     * @return {?}
     */
    expandEmit(e) {
        this.expandEmitter.emit(e);
    }
    /**
     * @param {?} e
     * @return {?}
     */
    showEmit(e) {
        this.showEmitter.emit(e);
    }
    /**
     * @param {?} e
     * @return {?}
     */
    hideToggleEmit(e) {
        this.hideToggleEmitter.emit(e);
    }
}
SidenavService.decorators = [
    { type: Injectable, args: [{
                providedIn: 'root'
            },] }
];
/** @nocollapse */
SidenavService.ctorParameters = () => [];
/** @nocollapse */ SidenavService.ngInjectableDef = defineInjectable({ factory: function SidenavService_Factory() { return new SidenavService(); }, token: SidenavService, providedIn: "root" });

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class SideNavComponent {
    /**
     * @param {?} headerService
     * @param {?} sidenavService
     */
    constructor(headerService, sidenavService) {
        this.headerService = headerService;
        this.sidenavService = sidenavService;
        this.isExpanded = true;
        this.isShowing = false;
        this.isHideToggle = !this.isExpanded;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.headerService.showMenuClickEvent.subscribe((/**
         * @return {?}
         */
        () => {
            if (this.isExpanded === true) {
                this.sidenavService.expandEmit(false);
                this.isExpanded = false;
            }
            else {
                this.sidenavService.expandEmit(true);
                this.isExpanded = true;
            }
            if (this.isHideToggle === true) {
                this.sidenavService.hideToggleEmit(false);
                this.isHideToggle = false;
            }
            else {
                this.sidenavService.hideToggleEmit(true);
                this.isHideToggle = true;
            }
        }));
    }
    /**
     * @return {?}
     */
    mouseenter() {
        if (!this.isExpanded) {
            this.isShowing = true;
            this.sidenavService.showEmit(true);
            this.isHideToggle = false;
            this.sidenavService.hideToggleEmit(false);
        }
    }
    /**
     * @return {?}
     */
    mouseleave() {
        if (!this.isExpanded) {
            this.isShowing = false;
            this.sidenavService.showEmit(false);
            this.isHideToggle = true;
            this.sidenavService.hideToggleEmit(true);
        }
    }
}
SideNavComponent.decorators = [
    { type: Component, args: [{
                selector: 'sb-side-nav',
                template: "<mat-sidenav-container class=\"sb-sidenav-container\" autosize>\n  <mat-sidenav\n    #sidenav\n    class=\"mat-elevation-z3 sb-sidenav\"\n    [@openClose]=\"isHideToggle ? 'closed' : 'open'\"\n    mode=\"side\"\n    opened=\"true\"\n    (mouseenter)=\"mouseenter()\"\n    (mouseleave)=\"mouseleave()\"\n    *ngIf=\"isRenderSidenav\"\n  >\n    <perfect-scrollbar>\n      <ng-content select=\".sb-sidenav-menus\"></ng-content>\n    </perfect-scrollbar>\n  </mat-sidenav>\n\n  <!-- Main content -->\n  <mat-sidenav-content>\n    <perfect-scrollbar>\n      <ng-content select=\".sb-sidenav-content\"></ng-content>\n    </perfect-scrollbar>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n",
                animations: [
                    trigger('openClose', [
                        state('open', style({
                            width: '238px'
                        })),
                        state('closed', style({
                            width: '72px'
                        })),
                        transition('open => closed', [
                            style({ width: '72px' }),
                            animate('200ms ease-in')
                        ]),
                        transition('closed => open', [
                            style({ width: '238px' }),
                            animate('200ms ease-in')
                        ]),
                    ]),
                ],
                styles: [".sb-sidenav-container{height:100%}.sb-sidenav{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}"]
            }] }
];
/** @nocollapse */
SideNavComponent.ctorParameters = () => [
    { type: HeaderService },
    { type: SidenavService }
];
SideNavComponent.propDecorators = {
    isRenderSidenav: [{ type: Input }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class HeaderDirective {
    /**
     * @param {?} headerService
     */
    constructor(headerService) {
        headerService.showMenuButton(true);
    }
}
HeaderDirective.decorators = [
    { type: Directive, args: [{
                selector: '[sbHasSideNav]'
            },] }
];
/** @nocollapse */
HeaderDirective.ctorParameters = () => [
    { type: HeaderService }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/** @type {?} */
const DEFAULT_PERFECT_SCROLLBAR_CONFIG = {};
const ɵ0 = DEFAULT_PERFECT_SCROLLBAR_CONFIG;
class SubwayComponentsLibraryModule {
}
SubwayComponentsLibraryModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    ViewContainerComponent,
                    FilterTableComponent,
                    MatFormFieldComponent,
                    FilterTableActionsComponent,
                    DataTableComponent,
                    DataTableActionsComponent,
                    DataTableRowActionsComponent,
                    PopoverComponent,
                    ButtonComponent,
                    DialogComponent,
                    ViewEditContainerComponent,
                    MatTabComponent,
                    HeaderComponent,
                    HeaderDirective,
                    SideNavComponent
                ],
                imports: [
                    CommonModule,
                    BrowserAnimationsModule,
                    ReactiveFormsModule,
                    PerfectScrollbarModule,
                    FormsModule,
                    MATERIAL_MODULES,
                    FlexLayoutModule,
                    PortalModule,
                    OverlayModule
                ],
                exports: [
                    ViewContainerComponent,
                    MatFormFieldComponent,
                    ButtonComponent,
                    ViewEditContainerComponent,
                    DialogComponent,
                    HeaderComponent,
                    HeaderDirective,
                    SideNavComponent
                ],
                providers: [
                    {
                        provide: PERFECT_SCROLLBAR_CONFIG,
                        useValue: ɵ0
                    }
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class DialogService {
    /**
     * @param {?} dialog
     */
    constructor(dialog) {
        this.dialog = dialog;
        this.tabs = ['First', 'Second', 'Third'];
    }
    /**
     * @return {?}
     */
    ngOnInit() {
    }
    /**
     * @return {?}
     */
    getTabs() {
        return this.tabs;
    }
    /**
     * @param {?} dialogComponent
     * @param {?} data
     * @return {?}
     */
    openDialog(dialogComponent, data) {
        /** @type {?} */
        const dialogRef = this.dialog.open(dialogComponent, {
            width: this.widthDialog,
            data
        });
        dialogRef.afterClosed().subscribe((/**
         * @param {?} result
         * @return {?}
         */
        result => {
        }));
    }
}
DialogService.decorators = [
    { type: Injectable, args: [{
                providedIn: 'root'
            },] }
];
/** @nocollapse */
DialogService.ctorParameters = () => [
    { type: MatDialog }
];
/** @nocollapse */ DialogService.ngInjectableDef = defineInjectable({ factory: function DialogService_Factory() { return new DialogService(inject(MatDialog$1)); }, token: DialogService, providedIn: "root" });

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

export { SubwayComponentsLibraryModule, DialogService, DataTableService, PopoverService, SidenavService, ViewContainerComponent, MatFormFieldComponent, ButtonComponent, ViewEditContainerComponent, DialogComponent, HeaderComponent, SideNavComponent, DataTableComponent, HeaderDirective, DataTableActionsComponent as ɵc, DataTableRowActionsComponent as ɵd, FilterTableActionsComponent as ɵb, FilterTableComponent as ɵa, PopoverComponent as ɵe, HeaderService as ɵg, MATERIAL_MODULES as ɵh, MatTabComponent as ɵf };

//# sourceMappingURL=lucasferreiralsf-angular-frontend-library.js.map