lib-portal-angular 0.0.24 → 0.0.29

package/fesm2022/lib-portal-angular.mjs

@@ -1,361 +1,94 @@
 import * as i0 from '@angular/core';
-import { forwardRef, Component, ChangeDetectionStrategy, Input, EventEmitter, Output, HostListener, ViewChild, NgModule } from '@angular/core';
-import * as i2 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import Brazilian from 'flatpickr/dist/l10n/pt.js';
+import { Component, Input, EventEmitter, ChangeDetectionStrategy, Output, HostListener, forwardRef, ViewChild, NgModule, createComponent, Injectable } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from 'angularx-flatpickr';
-import { FlatpickrModule } from 'angularx-flatpickr';
+import * as i2 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import hljs from 'highlight.js';
-import { of } from 'rxjs';
-import * as i3$1 from '@ng-select/ng-select';
+import { of, Subject } from 'rxjs';
+import * as i3 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
-import * as i3$2 from 'ngx-pagination';
+import * as i3$1 from 'ngx-pagination';
 import { NgxPaginationModule } from 'ngx-pagination';
 
-class CalendarComponent {
+class AlertComponent {
     constructor() {
-        this.inputId = 'startDate';
-        this.label = 'Event Start Date';
-        this.placeholder = 'Not set';
-        this.marginTop = 0;
-        this.marginBottom = 0;
-        this.marginLeft = 0;
-        this.marginRight = 0;
-        this.altInput = true;
-        this.convertModelValue = true;
-        this.enableTime = true;
-        this.dateFormat = 'd/m/Y H:i';
-        this.altFormat = 'd/m/Y';
-        this.locale = Brazilian.pt; // Define o idioma como brasileiro por padrão
-        this.onChange = (_) => { };
-        this.onTouched = () => { };
+        this.alerts = [];
+        this.closeTimeouts = {}; // Armazena os temporizadores para cada alerta
     }
     ngOnInit() {
-        // Any necessary initialization
-    }
-    writeValue(value) {
-        this.value = value;
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    onNgModelChange(event) {
-        this.onChange(event);
-        this.onTouched();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CalendarComponent, selector: "sim-advanced-calendar", inputs: { inputId: "inputId", label: "label", placeholder: "placeholder", marginTop: "marginTop", marginBottom: "marginBottom", marginLeft: "marginLeft", marginRight: "marginRight", altInput: "altInput", convertModelValue: "convertModelValue", enableTime: "enableTime", dateFormat: "dateFormat", altFormat: "altFormat", locale: "locale" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => CalendarComponent),
-                multi: true
-            }
-        ], ngImport: i0, template: `
-    <div class="form-group" [ngStyle]="{
-      'margin-top': marginTop + 'rem',
-      'margin-bottom': marginBottom + 'rem',
-      'margin-left': marginLeft + 'rem',
-      'margin-right': marginRight + 'rem'
-    }">
-      <label [for]="inputId" class="form-label">{{ label }}</label>
-      <input
-        [id]="inputId"
-        class="form-control"
-        type="text"
-        mwlFlatpickr
-        [(ngModel)]="value"
-        (ngModelChange)="onNgModelChange($event)"
-        [altInput]="altInput"
-        [convertModelValue]="convertModelValue"
-        [enableTime]="enableTime"
-        [dateFormat]="dateFormat"
-        [altFormat]="altFormat"
-        [placeholder]="placeholder"
-        [locale]="locale"
-      />
-    </div>
-  `, isInline: true, styles: [".form-group{font-family:Arial,sans-serif;font-size:1rem}.form-label{font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.FlatpickrDirective, selector: "[mwlFlatpickr]", inputs: ["options", "altFormat", "altInput", "altInputClass", "allowInput", "allowInvalidPreload", "appendTo", "ariaDateFormat", "clickOpens", "dateFormat", "defaultHour", "defaultMinute", "defaultSeconds", "disable", "disableMobile", "enable", "enableTime", "enableSeconds", "formatDate", "hourIncrement", "inline", "maxDate", "minDate", "maxTime", "minTime", "minuteIncrement", "mode", "nextArrow", "noCalendar", "now", "parseDate", "prevArrow", "shorthandCurrentMonth", "showMonths", "static", "time24hr", "weekNumbers", "getWeek", "wrap", "plugins", "locale", "convertModelValue", "monthSelectorType", "ignoredFocusElements"], outputs: ["flatpickrReady", "flatpickrChange", "flatpickrValueUpdate", "flatpickrOpen", "flatpickrClose", "flatpickrMonthChange", "flatpickrYearChange", "flatpickrDayCreate"], exportAs: ["mwlFlatpickr"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CalendarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sim-advanced-calendar', template: `
-    <div class="form-group" [ngStyle]="{
-      'margin-top': marginTop + 'rem',
-      'margin-bottom': marginBottom + 'rem',
-      'margin-left': marginLeft + 'rem',
-      'margin-right': marginRight + 'rem'
-    }">
-      <label [for]="inputId" class="form-label">{{ label }}</label>
-      <input
-        [id]="inputId"
-        class="form-control"
-        type="text"
-        mwlFlatpickr
-        [(ngModel)]="value"
-        (ngModelChange)="onNgModelChange($event)"
-        [altInput]="altInput"
-        [convertModelValue]="convertModelValue"
-        [enableTime]="enableTime"
-        [dateFormat]="dateFormat"
-        [altFormat]="altFormat"
-        [placeholder]="placeholder"
-        [locale]="locale"
-      />
-    </div>
-  `, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => CalendarComponent),
-                            multi: true
-                        }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, styles: [".form-group{font-family:Arial,sans-serif;font-size:1rem}.form-label{font-weight:700}\n"] }]
-        }], propDecorators: { inputId: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], marginTop: [{
-                type: Input
-            }], marginBottom: [{
-                type: Input
-            }], marginLeft: [{
-                type: Input
-            }], marginRight: [{
-                type: Input
-            }], altInput: [{
-                type: Input
-            }], convertModelValue: [{
-                type: Input
-            }], enableTime: [{
-                type: Input
-            }], dateFormat: [{
-                type: Input
-            }], altFormat: [{
-                type: Input
-            }], locale: [{
-                type: Input
-            }] } });
-
-class DatePickerComponent {
-    constructor() {
-        this.inputId = '';
-        this.label = '';
-        this.placeholder = '';
-        this.marginTop = 0;
-        this.marginBottom = 0;
-        this.marginLeft = 0;
-        this.marginRight = 0;
-        this.ngModelChange = new EventEmitter();
-        // ControlValueAccessor interface methods
-        this.onChange = () => { };
-        this.onTouched = () => { };
-    }
-    get value() {
-        return this.innerValue;
-    }
-    set value(val) {
-        this.innerValue = val;
-        this.onChange(val);
-        this.onTouched();
-    }
-    onNgModelChange(event) {
-        this.value = event;
-        this.ngModelChange.emit(event);
-    }
-    writeValue(value) {
-        this.value = value;
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        // Logic for disabling the component
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DatePickerComponent, selector: "sim-date-picker", inputs: { inputId: "inputId", label: "label", placeholder: "placeholder", marginTop: "marginTop", marginBottom: "marginBottom", marginLeft: "marginLeft", marginRight: "marginRight" }, outputs: { ngModelChange: "ngModelChange" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => DatePickerComponent),
-                multi: true
-            }
-        ], ngImport: i0, template: `
-    <div class="form-group" [ngStyle]="{
-      'margin-top': marginTop + 'rem',
-      'margin-bottom': marginBottom + 'rem',
-      'margin-left': marginLeft + 'rem',
-      'margin-right': marginRight + 'rem'
-    }">
-      <label [for]="inputId" class="form-label">{{ label }}</label>
-      <input
-        [id]="inputId"
-        class="form-control"
-        type="date"
-        [(ngModel)]="value"
-        (ngModelChange)="onNgModelChange($event)"
-        [placeholder]="placeholder"
-      />
-    </div>
-  `, isInline: true, styles: [".form-label{font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DatePickerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sim-date-picker', template: `
-    <div class="form-group" [ngStyle]="{
-      'margin-top': marginTop + 'rem',
-      'margin-bottom': marginBottom + 'rem',
-      'margin-left': marginLeft + 'rem',
-      'margin-right': marginRight + 'rem'
-    }">
-      <label [for]="inputId" class="form-label">{{ label }}</label>
-      <input
-        [id]="inputId"
-        class="form-control"
-        type="date"
-        [(ngModel)]="value"
-        (ngModelChange)="onNgModelChange($event)"
-        [placeholder]="placeholder"
-      />
-    </div>
-  `, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => DatePickerComponent),
-                            multi: true
-                        }
-                    ], styles: [".form-label{font-weight:700}\n"] }]
-        }], propDecorators: { inputId: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], marginTop: [{
-                type: Input
-            }], marginBottom: [{
-                type: Input
-            }], marginLeft: [{
-                type: Input
-            }], marginRight: [{
-                type: Input
-            }], ngModelChange: [{
-                type: Output
-            }] } });
-
-class DateTimePickerComponent {
-    constructor() {
-        this.inputId = '';
-        this.label = '';
-        this.placeholder = '';
-        this.marginTop = 0;
-        this.marginBottom = 0;
-        this.marginLeft = 0;
-        this.marginRight = 0;
-        this.ngModelChange = new EventEmitter();
-        // ControlValueAccessor interface methods
-        this.onChange = () => { };
-        this.onTouched = () => { };
-    }
-    get value() {
-        return this._value;
-    }
-    set value(val) {
-        this._value = val;
-        this.onChange(val);
-        this.onTouched();
+        // Inicia o temporizador de fechamento para cada alerta quando a página é carregada
+        this.alerts.forEach(alert => {
+            this.closeTimeouts[alert.message] = setTimeout(() => {
+                this.closeAlert(alert);
+            }, 6000); // Fecha após 8 segundos
+        });
     }
-    onNgModelChange(event) {
-        this.value = event;
-        this.ngModelChange.emit(event);
+    ngAfterViewInit() {
+        // Adiciona a classe 'show' após um curto atraso para acionar a animação
+        setTimeout(() => {
+            this.alerts.forEach(alert => {
+                const element = document.getElementById(`alert-${alert.message}`);
+                if (element) {
+                    element.classList.add('show');
+                }
+            });
+        }, 10); // Pequeno atraso para garantir que o elemento esteja no DOM
+    }
+    closeAlert(alert) {
+        const element = document.getElementById(`alert-${alert.message}`);
+        if (element) {
+            element.classList.remove('show');
+            setTimeout(() => {
+                this.alerts = this.alerts.filter(a => a !== alert);
+            }, 500); // Duração da animação de saída
+        }
+        else {
+            this.alerts = this.alerts.filter(a => a !== alert);
+        }
     }
-    writeValue(value) {
-        this._value = value;
+    getAlertClass(alert) {
+        return {
+            'alert-container': true,
+            'alert-dismissible': true,
+            [`alert-${alert.type}`]: true
+        };
     }
-    registerOnChange(fn) {
-        this.onChange = fn;
+    getAlertIconClass(alert) {
+        switch (alert.type) {
+            case 'success':
+                return 'success-icon'; // Classe para o ícone de sucesso
+            case 'info':
+                return 'info-icon'; // Classe para o ícone de informação
+            case 'warning':
+                return 'warning-icon'; // Classe para o ícone de aviso
+            case 'danger':
+                return 'danger-icon'; // Classe para o ícone de erro
+            default:
+                return '';
+        }
     }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
+    onMouseEnter(alert) {
+        // Cancela o temporizador quando o mouse entra no alerta
+        if (this.closeTimeouts[alert.message]) {
+            clearTimeout(this.closeTimeouts[alert.message]);
+            delete this.closeTimeouts[alert.message];
+        }
     }
-    setDisabledState(isDisabled) {
-        // Logic for disabling the component
+    onMouseLeave(alert) {
+        // Inicia um novo temporizador para fechar o alerta após 2 segundos quando o mouse sai do alerta
+        this.closeTimeouts[alert.message] = setTimeout(() => {
+            this.closeAlert(alert);
+        }, 2000); // Fechar após 2 segundos
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateTimePickerComponent, selector: "sim-date-time-picker", inputs: { inputId: "inputId", label: "label", placeholder: "placeholder", marginTop: "marginTop", marginBottom: "marginBottom", marginLeft: "marginLeft", marginRight: "marginRight" }, outputs: { ngModelChange: "ngModelChange" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => DateTimePickerComponent),
-                multi: true
-            }
-        ], ngImport: i0, template: `
-    <div class="form-group" [ngStyle]="{
-      'margin-top': marginTop + 'rem',
-      'margin-bottom': marginBottom + 'rem',
-      'margin-left': marginLeft + 'rem',
-      'margin-right': marginRight + 'rem'
-    }">
-      <label [for]="inputId" class="form-label">{{ label }}</label>
-      <input
-        [id]="inputId"
-        class="form-control"
-        type="datetime-local"
-        [(ngModel)]="value"
-        (ngModelChange)="onNgModelChange($event)"
-        [placeholder]="placeholder"
-      />
-    </div>
-  `, isInline: true, styles: [".form-label{font-weight:700}.custom-input{border:1px solid #9aa4b2;transition:border-color .3s,box-shadow .3s}.custom-input:hover{border-color:#2196f3;border-width:2px}.custom-input:focus{border-color:#2196f3;border-width:2px;box-shadow:0 0 5px #007bff80}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AlertComponent, selector: "lib-alert", inputs: { alerts: "alerts" }, ngImport: i0, template: "<div *ngFor=\"let alert of alerts\" \n     [ngClass]=\"getAlertClass(alert)\" \n     role=\"alert\" \n     [id]=\"'alert-' + alert.message\"\n     (mouseenter)=\"onMouseEnter(alert)\" \n     (mouseleave)=\"onMouseLeave(alert)\">\n  <button type=\"button\" class=\"close\" (click)=\"closeAlert(alert)\" aria-label=\"Close\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n  <div class=\"alert-header\">\n    <span [ngClass]=\"getAlertIconClass(alert)\" class=\"alert-icon\"></span>\n    <strong>{{ alert.title }}</strong>\n  </div>\n  <div class=\"alert-body\">\n    {{ alert.message }}\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.alert-container{position:fixed;top:20px;right:20px;max-width:400px;margin:10px auto;padding:15px;border-radius:4px;background-color:#f8d7da;color:#721c24;word-wrap:break-word;opacity:0;transform:translateY(-20px);transition:opacity .5s ease,transform .5s ease;display:flex;flex-direction:column;align-items:flex-start}.alert-container.show{opacity:1;transform:translateY(0)}.alert-container .close{position:absolute;top:10px;right:10px;background:none;border:none;font-size:20px;color:#000;opacity:.5;cursor:pointer;outline:none}.alert-container .close:hover{opacity:1}.alert-container .alert-header{display:flex;align-items:center;margin-bottom:5px}.alert-container .alert-icon{margin-right:10px;font-size:20px}.alert-container .alert-body{margin-left:30px}.alert-container .alert-icon.success-icon:before{content:\"\\2714\\fe0f\"}.alert-container .alert-icon.info-icon:before{content:\"\\2139\\fe0f\"}.alert-container .alert-icon.warning-icon:before{content:\"\\26a0\\fe0f\"}.alert-container .alert-icon.danger-icon:before{content:\"\\274c\"}.alert-success{background-color:#d4edda;color:#155724}.alert-info{background-color:#d8f4f7;color:#0c5460}.alert-warning{background-color:#fff3cd;color:#856404}.alert-danger{background-color:#fdd9d7;color:#721c24}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateTimePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sim-date-time-picker', template: `
-    <div class="form-group" [ngStyle]="{
-      'margin-top': marginTop + 'rem',
-      'margin-bottom': marginBottom + 'rem',
-      'margin-left': marginLeft + 'rem',
-      'margin-right': marginRight + 'rem'
-    }">
-      <label [for]="inputId" class="form-label">{{ label }}</label>
-      <input
-        [id]="inputId"
-        class="form-control"
-        type="datetime-local"
-        [(ngModel)]="value"
-        (ngModelChange)="onNgModelChange($event)"
-        [placeholder]="placeholder"
-      />
-    </div>
-  `, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => DateTimePickerComponent),
-                            multi: true
-                        }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, styles: [".form-label{font-weight:700}.custom-input{border:1px solid #9aa4b2;transition:border-color .3s,box-shadow .3s}.custom-input:hover{border-color:#2196f3;border-width:2px}.custom-input:focus{border-color:#2196f3;border-width:2px;box-shadow:0 0 5px #007bff80}\n"] }]
-        }], propDecorators: { inputId: [{
+            args: [{ selector: 'lib-alert', template: "<div *ngFor=\"let alert of alerts\" \n     [ngClass]=\"getAlertClass(alert)\" \n     role=\"alert\" \n     [id]=\"'alert-' + alert.message\"\n     (mouseenter)=\"onMouseEnter(alert)\" \n     (mouseleave)=\"onMouseLeave(alert)\">\n  <button type=\"button\" class=\"close\" (click)=\"closeAlert(alert)\" aria-label=\"Close\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n  <div class=\"alert-header\">\n    <span [ngClass]=\"getAlertIconClass(alert)\" class=\"alert-icon\"></span>\n    <strong>{{ alert.title }}</strong>\n  </div>\n  <div class=\"alert-body\">\n    {{ alert.message }}\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.alert-container{position:fixed;top:20px;right:20px;max-width:400px;margin:10px auto;padding:15px;border-radius:4px;background-color:#f8d7da;color:#721c24;word-wrap:break-word;opacity:0;transform:translateY(-20px);transition:opacity .5s ease,transform .5s ease;display:flex;flex-direction:column;align-items:flex-start}.alert-container.show{opacity:1;transform:translateY(0)}.alert-container .close{position:absolute;top:10px;right:10px;background:none;border:none;font-size:20px;color:#000;opacity:.5;cursor:pointer;outline:none}.alert-container .close:hover{opacity:1}.alert-container .alert-header{display:flex;align-items:center;margin-bottom:5px}.alert-container .alert-icon{margin-right:10px;font-size:20px}.alert-container .alert-body{margin-left:30px}.alert-container .alert-icon.success-icon:before{content:\"\\2714\\fe0f\"}.alert-container .alert-icon.info-icon:before{content:\"\\2139\\fe0f\"}.alert-container .alert-icon.warning-icon:before{content:\"\\26a0\\fe0f\"}.alert-container .alert-icon.danger-icon:before{content:\"\\274c\"}.alert-success{background-color:#d4edda;color:#155724}.alert-info{background-color:#d8f4f7;color:#0c5460}.alert-warning{background-color:#fff3cd;color:#856404}.alert-danger{background-color:#fdd9d7;color:#721c24}\n"] }]
+        }], propDecorators: { alerts: [{
                 type: Input
-            }], label: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], marginTop: [{
-                type: Input
-            }], marginBottom: [{
-                type: Input
-            }], marginLeft: [{
-                type: Input
-            }], marginRight: [{
-                type: Input
-            }], ngModelChange: [{
-                type: Output
             }] } });
 
 var ButtonClasses;
@@ -538,6 +271,8 @@ class ButtonComponent {
         this.marginBottom = 0;
         this.marginLeft = 0;
         this.marginRight = 0;
+        this.permissions = [];
+        this.permissionChecker = null;
         this.clickEvent = new EventEmitter();
         this.isHovered = false;
         this.isActive = false;
@@ -612,47 +347,57 @@ class ButtonComponent {
             'filter': activeFilter
         };
     }
+    hasPermission() {
+        if (!this.permissionChecker || this.permissions.length === 0) {
+            return true;
+        }
+        return this.permissionChecker(this.permissions);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonComponent, selector: "sim-app-button", inputs: { type: "type", label: "label", btnClass: "btnClass", fontSize: "fontSize", disabled: "disabled", autofocus: "autofocus", form: "form", formaction: "formaction", formenctype: "formenctype", formmethod: "formmethod", formnovalidate: "formnovalidate", formtarget: "formtarget", name: "name", value: "value", marginTop: "marginTop", marginBottom: "marginBottom", marginLeft: "marginLeft", marginRight: "marginRight" }, outputs: { clickEvent: "clickEvent" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "mousedown": "onMouseDown()", "mouseup": "onMouseUp()" } }, ngImport: i0, template: `
-    <button [type]="type"
-            class="btn"
-            [ngClass]="btnClass"
-            [ngStyle]="getDynamicStyles()"
-            (click)="onClick($event)"
-            [disabled]="disabled"
-            [attr.autofocus]="autofocus ? true : null"
-            [attr.form]="form"
-            [attr.formaction]="formaction"
-            [attr.formenctype]="formenctype"
-            [attr.formmethod]="formmethod"
-            [attr.formnovalidate]="formnovalidate"
-            [attr.formtarget]="formtarget"
-            [attr.name]="name"
-            [attr.value]="value">
-      {{ label }}
-    </button>
-  `, isInline: true, styles: [".btn{padding:.5rem 1rem;border-radius:.25rem;transition:background-color .3s,border-color .3s,filter .3s;font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:24px;letter-spacing:.005em;text-align:left}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonComponent, selector: "sim-app-button", inputs: { type: "type", label: "label", btnClass: "btnClass", fontSize: "fontSize", disabled: "disabled", autofocus: "autofocus", form: "form", formaction: "formaction", formenctype: "formenctype", formmethod: "formmethod", formnovalidate: "formnovalidate", formtarget: "formtarget", name: "name", value: "value", marginTop: "marginTop", marginBottom: "marginBottom", marginLeft: "marginLeft", marginRight: "marginRight", permissions: "permissions", permissionChecker: "permissionChecker" }, outputs: { clickEvent: "clickEvent" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "mousedown": "onMouseDown()", "mouseup": "onMouseUp()" } }, ngImport: i0, template: `
+    <ng-container *ngIf="hasPermission()">
+      <button [type]="type"
+              class="btn"
+              [ngClass]="btnClass"
+              [ngStyle]="getDynamicStyles()"
+              (click)="onClick($event)"
+              [disabled]="disabled"
+              [attr.autofocus]="autofocus ? true : null"
+              [attr.form]="form"
+              [attr.formaction]="formaction"
+              [attr.formenctype]="formenctype"
+              [attr.formmethod]="formmethod"
+              [attr.formnovalidate]="formnovalidate"
+              [attr.formtarget]="formtarget"
+              [attr.name]="name"
+              [attr.value]="value">
+        {{ label }}
+      </button>
+    </ng-container>
+  `, isInline: true, styles: [".btn{padding:.5rem 1rem;border-radius:.25rem;transition:background-color .3s,border-color .3s,filter .3s;font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:24px;letter-spacing:.005em;text-align:left}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sim-app-button', template: `
-    <button [type]="type"
-            class="btn"
-            [ngClass]="btnClass"
-            [ngStyle]="getDynamicStyles()"
-            (click)="onClick($event)"
-            [disabled]="disabled"
-            [attr.autofocus]="autofocus ? true : null"
-            [attr.form]="form"
-            [attr.formaction]="formaction"
-            [attr.formenctype]="formenctype"
-            [attr.formmethod]="formmethod"
-            [attr.formnovalidate]="formnovalidate"
-            [attr.formtarget]="formtarget"
-            [attr.name]="name"
-            [attr.value]="value">
-      {{ label }}
-    </button>
+    <ng-container *ngIf="hasPermission()">
+      <button [type]="type"
+              class="btn"
+              [ngClass]="btnClass"
+              [ngStyle]="getDynamicStyles()"
+              (click)="onClick($event)"
+              [disabled]="disabled"
+              [attr.autofocus]="autofocus ? true : null"
+              [attr.form]="form"
+              [attr.formaction]="formaction"
+              [attr.formenctype]="formenctype"
+              [attr.formmethod]="formmethod"
+              [attr.formnovalidate]="formnovalidate"
+              [attr.formtarget]="formtarget"
+              [attr.name]="name"
+              [attr.value]="value">
+        {{ label }}
+      </button>
+    </ng-container>
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".btn{padding:.5rem 1rem;border-radius:.25rem;transition:background-color .3s,border-color .3s,filter .3s;font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:24px;letter-spacing:.005em;text-align:left}\n"] }]
         }], propDecorators: { type: [{
                 type: Input
@@ -690,6 +435,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], marginRight: [{
                 type: Input
+            }], permissions: [{
+                type: Input
+            }], permissionChecker: [{
+                type: Input
             }], clickEvent: [{
                 type: Output
             }], onMouseEnter: [{
@@ -900,40 +649,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 class FormComponent {
     constructor() {
         this.cardTitle = 'Default Form Title';
+        this.colClasses = 'col-12'; // Classes de coluna responsiva
+        // Valores de margem dinâmica
+        this.marginTop = 0; // Em rem
+        this.marginLeft = 0; // Em rem
+        this.marginRight = 0; // Em rem
+    }
+    getRowStyles() {
+        return {
+            'margin-top': `${this.marginTop}rem`,
+            'margin-left': `${this.marginLeft}rem`,
+            'margin-right': `${this.marginRight}rem`
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormComponent, selector: "sim-app-form", inputs: { cardTitle: "cardTitle" }, ngImport: i0, template: `
-    <div class="row mt-2 mx-1">
-      <div class="col-sm-12">
-        <sim-app-card [cardTitle]="cardTitle">
-          <ng-content></ng-content>
-        </sim-app-card>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormComponent, selector: "sim-app-form", inputs: { cardTitle: "cardTitle", colClasses: "colClasses", marginTop: "marginTop", marginLeft: "marginLeft", marginRight: "marginRight" }, ngImport: i0, template: `
+    <div class="row" [ngStyle]="getRowStyles()">
+      <div [ngClass]="colClasses">
+        <div class="card">
+          <div class="card-title">
+            {{ cardTitle }}
+          </div>
+          <div class="card-content">
+            <ng-content></ng-content>
+          </div>
+        </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: CardComponent, selector: "sim-app-card", inputs: ["cardTitle"] }] }); }
+  `, isInline: true, styles: [".row{margin-top:.5rem;margin-left:.25rem;margin-right:.25rem}.col-12{padding:0}.card{border:1px solid #ddd;border-radius:.25rem;padding:1rem}.card-title{font-family:Inter,sans-serif;font-size:42px;font-weight:700;line-height:50.83px;text-align:left;width:98%;height:51px;gap:0px;opacity:0px;margin-bottom:1rem}.card-content{font-family:Arial,sans-serif}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'sim-app-form',
-                    template: `
-    <div class="row mt-2 mx-1">
-      <div class="col-sm-12">
-        <sim-app-card [cardTitle]="cardTitle">
-          <ng-content></ng-content>
-        </sim-app-card>
+            args: [{ selector: 'sim-app-form', template: `
+    <div class="row" [ngStyle]="getRowStyles()">
+      <div [ngClass]="colClasses">
+        <div class="card">
+          <div class="card-title">
+            {{ cardTitle }}
+          </div>
+          <div class="card-content">
+            <ng-content></ng-content>
+          </div>
+        </div>
       </div>
     </div>
-  `
-                }]
+  `, styles: [".row{margin-top:.5rem;margin-left:.25rem;margin-right:.25rem}.col-12{padding:0}.card{border:1px solid #ddd;border-radius:.25rem;padding:1rem}.card-title{font-family:Inter,sans-serif;font-size:42px;font-weight:700;line-height:50.83px;text-align:left;width:98%;height:51px;gap:0px;opacity:0px;margin-bottom:1rem}.card-content{font-family:Arial,sans-serif}\n"] }]
         }], propDecorators: { cardTitle: [{
                 type: Input
+            }], colClasses: [{
+                type: Input
+            }], marginTop: [{
+                type: Input
+            }], marginLeft: [{
+                type: Input
+            }], marginRight: [{
+                type: Input
             }] } });
 
 class InputComponent {
     constructor() {
         this.label = 'Default Label';
-        this.placeholder = 'Default Placeholder';
+        this.placeholder = '';
         this.id = 'inputId';
         this.type = 'text';
         this.disabled = false;
@@ -947,6 +723,9 @@ class InputComponent {
         this.marginBottom = 0;
         this.marginLeft = 0;
         this.marginRight = 0;
+        this.labelFontWeight = 400;
+        this.permissions = [];
+        this.permissionChecker = null;
         this.inputEvent = new EventEmitter();
         this.changeEvent = new EventEmitter();
         this.focusEvent = new EventEmitter();
@@ -995,26 +774,47 @@ class InputComponent {
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
+    hasPermission() {
+        if (!this.permissionChecker || this.permissions.length === 0) {
+            return true;
+        }
+        return this.permissionChecker(this.permissions);
+    }
+    getLabelStyles() {
+        return {
+            'font-weight': this.labelFontWeight,
+            'width': '623px',
+            'height': '19px',
+            'top': '1608px',
+            'left': '133px',
+            'gap': '0px',
+            'opacity': '0px',
+            'font-family': 'Inter',
+            'font-size': '16px',
+            'line-height': '19.36px',
+            'text-align': 'left'
+        };
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: InputComponent, selector: "sim-app-input", inputs: { label: "label", placeholder: "placeholder", id: "id", type: "type", disabled: "disabled", readonly: "readonly", maxlength: "maxlength", minlength: "minlength", required: "required", pattern: "pattern", autofocus: "autofocus", marginTop: "marginTop", marginBottom: "marginBottom", marginLeft: "marginLeft", marginRight: "marginRight" }, outputs: { inputEvent: "inputEvent", changeEvent: "changeEvent", focusEvent: "focusEvent", blurEvent: "blurEvent", keyupEvent: "keyupEvent", keydownEvent: "keydownEvent", keypressEvent: "keypressEvent" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: InputComponent, selector: "sim-app-input", inputs: { label: "label", placeholder: "placeholder", id: "id", type: "type", disabled: "disabled", readonly: "readonly", maxlength: "maxlength", minlength: "minlength", required: "required", pattern: "pattern", autofocus: "autofocus", marginTop: "marginTop", marginBottom: "marginBottom", marginLeft: "marginLeft", marginRight: "marginRight", labelFontWeight: "labelFontWeight", permissions: "permissions", permissionChecker: "permissionChecker" }, outputs: { inputEvent: "inputEvent", changeEvent: "changeEvent", focusEvent: "focusEvent", blurEvent: "blurEvent", keyupEvent: "keyupEvent", keydownEvent: "keydownEvent", keypressEvent: "keypressEvent" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => InputComponent),
                 multi: true
             }
         ], ngImport: i0, template: `
-    <div class="form-group" [ngStyle]="{
+    <div *ngIf="hasPermission()" class="form-group" [ngStyle]="{
       'margin-top': marginTop + 'rem',
       'margin-bottom': marginBottom + 'rem',
       'margin-left': marginLeft + 'rem',
       'margin-right': marginRight + 'rem'
     }">
-      <label [for]="id">{{ label }}</label>
+      <label [for]="id" [ngStyle]="getLabelStyles()">{{ label }}</label>
       <input [type]="type"
              class="form-control custom-input"
              [id]="id"
              [placeholder]="placeholder"
-             [value]="value"
+             [(ngModel)]="value"
              (input)="onInput($event)"
              (change)="onChange($event)"
              (focus)="onFocus($event)"
@@ -1030,23 +830,23 @@ class InputComponent {
              [attr.pattern]="pattern"
              [autofocus]="autofocus">
     </div>
-  `, isInline: true, styles: [".form-group{font-family:Arial,sans-serif;font-size:1rem;font-weight:700}.form-check-input{font-family:Arial,sans-serif;color:#333;font-size:.9rem}.form-check-label{font-family:Arial,sans-serif;color:#333;font-size:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".form-group{font-family:Inter;font-size:1rem;font-weight:700}.form-check-input{font-family:Inter;color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:Inter;font-size:16px;line-height:19.36px;text-align:left}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sim-app-input', template: `
-    <div class="form-group" [ngStyle]="{
+    <div *ngIf="hasPermission()" class="form-group" [ngStyle]="{
       'margin-top': marginTop + 'rem',
       'margin-bottom': marginBottom + 'rem',
       'margin-left': marginLeft + 'rem',
       'margin-right': marginRight + 'rem'
     }">
-      <label [for]="id">{{ label }}</label>
+      <label [for]="id" [ngStyle]="getLabelStyles()">{{ label }}</label>
       <input [type]="type"
              class="form-control custom-input"
              [id]="id"
              [placeholder]="placeholder"
-             [value]="value"
+             [(ngModel)]="value"
              (input)="onInput($event)"
              (change)="onChange($event)"
              (focus)="onFocus($event)"
@@ -1068,7 +868,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: forwardRef(() => InputComponent),
                             multi: true
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, styles: [".form-group{font-family:Arial,sans-serif;font-size:1rem;font-weight:700}.form-check-input{font-family:Arial,sans-serif;color:#333;font-size:.9rem}.form-check-label{font-family:Arial,sans-serif;color:#333;font-size:1rem}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, styles: [".form-group{font-family:Inter;font-size:1rem;font-weight:700}.form-check-input{font-family:Inter;color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:Inter;font-size:16px;line-height:19.36px;text-align:left}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -1099,6 +899,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], marginRight: [{
                 type: Input
+            }], labelFontWeight: [{
+                type: Input
+            }], permissions: [{
+                type: Input
+            }], permissionChecker: [{
+                type: Input
             }], inputEvent: [{
                 type: Output
             }], changeEvent: [{
@@ -1192,7 +998,7 @@ class MultiSelectComponent {
         </ng-template>
       </ng-select>
     </div>
-  `, isInline: true, styles: [".form-group{font-family:Arial,sans-serif;font-size:1rem}.form-label{font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".form-group{font-family:Arial,sans-serif;font-size:1rem}.form-label{font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
@@ -1538,7 +1344,7 @@ class BootstrapTableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BootstrapTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BootstrapTableComponent, selector: "sim-bootstrap-table", inputs: { columns: "columns", data: "data", itemsPerPageOptions: "itemsPerPageOptions", defaultItemsPerPage: "defaultItemsPerPage", marginTop: "marginTop", marginBottom: "marginBottom", marginLeft: "marginLeft", marginRight: "marginRight", showActionColumn: "showActionColumn", actionColumnLabel: "actionColumnLabel" }, outputs: { sortChange: "sortChange", pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange", onEditTable: "onEditTable", onDeleteTable: "onDeleteTable", onViewTable: "onViewTable" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group\" [ngStyle]=\"{\n  'margin-top': marginTop + 'rem',\n  'margin-bottom': marginBottom + 'rem',\n  'margin-left': marginLeft + 'rem',\n  'margin-right': marginRight + 'rem'\n}\" style=\"text-align: right;\">\n  <label for=\"itemsPerPageSelect\" style=\"margin-right: 0.5rem; margin-bottom: 0.7rem;\">Itens por P\u00E1gina:</label>\n  <select\n    id=\"itemsPerPageSelect\"\n    class=\"form-control form-control-sm d-inline-block w-auto\"\n    [(ngModel)]=\"defaultItemsPerPage\"\n    (ngModelChange)=\"onItemsPerPageChange($event)\">\n    <option *ngFor=\"let option of itemsPerPageOptions\" [value]=\"option\">{{ option }}</option>\n  </select>\n</div>\n\n<div class=\"table-responsive\">\n  <table class=\"table table-hover\">\n    <thead>\n      <tr>\n        <th *ngFor=\"let column of columns\" (click)=\"onSort(column.prop)\">\n          {{ column.label }}\n        </th>\n        <th *ngIf=\"showActionColumn\">{{ actionColumnLabel }}</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngFor=\"let item of data | paginate: config; let i = index\">\n        <td *ngFor=\"let column of columns\">\n          {{ item[column.prop] }}\n        </td>\n        <td *ngIf=\"showActionColumn\">\n          <div class=\"d-flex justify-content-center\">\n            <button *ngIf=\"onEditTable.observers.length > 0\" (click)=\"handleAction('edit', item, i)\" class=\"btn btn-sm btn-primary mx-1\">Edit</button>\n            <button *ngIf=\"onDeleteTable.observers.length > 0\" (click)=\"handleAction('delete', item, i)\" class=\"btn btn-sm btn-danger mx-1\">Delete</button>\n            <button *ngIf=\"onViewTable.observers.length > 0\" (click)=\"handleAction('view', item, i)\" class=\"btn btn-sm btn-info mx-1\">View</button>\n          </div>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\n<div class=\"text-center\">\n  <pagination-controls id=\"bootstrap-table\" (pageChange)=\"onPageChange($event)\" previousLabel=\"Anterior\" nextLabel=\"Pr\u00F3ximo\" [responsive]=\"true\"></pagination-controls>\n</div>\n\n\n<!-- Estilos CSS diretamente no HTML -->\n<style>\n  .table thead th {\n    background-color: #343a40; /* Tom de cinza escuro */\n    color: #fff;\n  }\n</style>\n", styles: ["", "\n  .table thead th {\n    background-color: #343a40; /* Tom de cinza escuro */\n    color: #fff;\n  }\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.PaginationControlsComponent, selector: "pagination-controls", inputs: ["id", "maxSize", "directionLinks", "autoHide", "responsive", "previousLabel", "nextLabel", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel"], outputs: ["pageChange", "pageBoundsCorrection"] }, { kind: "pipe", type: i3$2.PaginatePipe, name: "paginate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BootstrapTableComponent, selector: "sim-bootstrap-table", inputs: { columns: "columns", data: "data", itemsPerPageOptions: "itemsPerPageOptions", defaultItemsPerPage: "defaultItemsPerPage", marginTop: "marginTop", marginBottom: "marginBottom", marginLeft: "marginLeft", marginRight: "marginRight", showActionColumn: "showActionColumn", actionColumnLabel: "actionColumnLabel" }, outputs: { sortChange: "sortChange", pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange", onEditTable: "onEditTable", onDeleteTable: "onDeleteTable", onViewTable: "onViewTable" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group\" [ngStyle]=\"{\n  'margin-top': marginTop + 'rem',\n  'margin-bottom': marginBottom + 'rem',\n  'margin-left': marginLeft + 'rem',\n  'margin-right': marginRight + 'rem'\n}\" style=\"text-align: right;\">\n  <label for=\"itemsPerPageSelect\" style=\"margin-right: 0.5rem; margin-bottom: 0.7rem;\">Itens por P\u00E1gina:</label>\n  <select\n    id=\"itemsPerPageSelect\"\n    class=\"form-control form-control-sm d-inline-block w-auto\"\n    [(ngModel)]=\"defaultItemsPerPage\"\n    (ngModelChange)=\"onItemsPerPageChange($event)\">\n    <option *ngFor=\"let option of itemsPerPageOptions\" [value]=\"option\">{{ option }}</option>\n  </select>\n</div>\n\n<div class=\"table-responsive\">\n  <table class=\"table table-hover\">\n    <thead>\n      <tr>\n        <th *ngFor=\"let column of columns\" (click)=\"onSort(column.prop)\">\n          {{ column.label }}\n        </th>\n        <th *ngIf=\"showActionColumn\">{{ actionColumnLabel }}</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngFor=\"let item of data | paginate: config; let i = index\">\n        <td *ngFor=\"let column of columns\">\n          {{ item[column.prop] }}\n        </td>\n        <td *ngIf=\"showActionColumn\">\n          <div class=\"d-flex justify-content-center\">\n            <button *ngIf=\"onEditTable.observers.length > 0\" (click)=\"handleAction('edit', item, i)\" class=\"btn btn-sm btn-primary mx-1\">Edit</button>\n            <button *ngIf=\"onDeleteTable.observers.length > 0\" (click)=\"handleAction('delete', item, i)\" class=\"btn btn-sm btn-danger mx-1\">Delete</button>\n            <button *ngIf=\"onViewTable.observers.length > 0\" (click)=\"handleAction('view', item, i)\" class=\"btn btn-sm btn-info mx-1\">View</button>\n          </div>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\n<div class=\"text-center\">\n  <pagination-controls id=\"bootstrap-table\" (pageChange)=\"onPageChange($event)\" previousLabel=\"Anterior\" nextLabel=\"Pr\u00F3ximo\" [responsive]=\"true\"></pagination-controls>\n</div>\n\n\n<!-- Estilos CSS diretamente no HTML -->\n<style>\n  .table thead th {\n    background-color: #343a40; /* Tom de cinza escuro */\n    color: #fff;\n  }\n</style>\n", styles: ["", "\n  .table thead th {\n    background-color: #343a40; /* Tom de cinza escuro */\n    color: #fff;\n  }\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.PaginationControlsComponent, selector: "pagination-controls", inputs: ["id", "maxSize", "directionLinks", "autoHide", "responsive", "previousLabel", "nextLabel", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel"], outputs: ["pageChange", "pageBoundsCorrection"] }, { kind: "pipe", type: i3$1.PaginatePipe, name: "paginate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BootstrapTableComponent, decorators: [{
             type: Component,
@@ -1768,15 +1574,14 @@ class ComponentsModule {
             SelectComponent,
             RadioComponent,
             MultiSelectComponent,
-            CalendarComponent,
-            DatePickerComponent,
-            DateTimePickerComponent,
             BootstrapTableComponent,
             CodeHighlightComponent,
-            BadgeComponent], imports: [CommonModule,
+            BadgeComponent,
+            AlertComponent], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
-            NgSelectModule, i3.FlatpickrModule, NgxPaginationModule], exports: [ButtonComponent,
+            NgSelectModule,
+            NgxPaginationModule], exports: [ButtonComponent,
             CardComponent,
             FormComponent,
             InputComponent,
@@ -1788,17 +1593,14 @@ class ComponentsModule {
             FormsModule,
             ReactiveFormsModule,
             NgSelectModule,
-            CalendarComponent,
-            DatePickerComponent,
-            DateTimePickerComponent,
             BootstrapTableComponent,
             CodeHighlightComponent,
-            BadgeComponent] }); }
+            BadgeComponent,
+            AlertComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComponentsModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             NgSelectModule,
-            FlatpickrModule.forRoot(),
             NgxPaginationModule, FormsModule,
             ReactiveFormsModule,
             NgSelectModule] }); }
@@ -1816,20 +1618,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SelectComponent,
                         RadioComponent,
                         MultiSelectComponent,
-                        CalendarComponent,
-                        DatePickerComponent,
-                        DateTimePickerComponent,
                         BootstrapTableComponent,
                         CodeHighlightComponent,
-                        BadgeComponent
+                        BadgeComponent,
+                        AlertComponent,
                     ],
                     imports: [
                         CommonModule,
                         FormsModule,
                         ReactiveFormsModule,
                         NgSelectModule,
-                        FlatpickrModule.forRoot(),
-                        NgxPaginationModule
+                        NgxPaginationModule,
                     ],
                     exports: [
                         ButtonComponent,
@@ -1844,20 +1643,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         FormsModule,
                         ReactiveFormsModule,
                         NgSelectModule,
-                        CalendarComponent,
-                        DatePickerComponent,
-                        DateTimePickerComponent,
                         BootstrapTableComponent,
                         CodeHighlightComponent,
-                        BadgeComponent
-                    ]
+                        BadgeComponent,
+                        AlertComponent,
+                    ],
                 }]
         }] });
 
+class NotificationService {
+    constructor(appRef, injector) {
+        this.appRef = appRef;
+        this.injector = injector;
+        this.alertsSubject = new Subject();
+        this.alerts$ = this.alertsSubject.asObservable();
+    }
+    showAlert(type, title, message) {
+        const alert = { type, title, message };
+        this.alertsSubject.next(alert);
+        // Create the alert component dynamically
+        const componentRef = createComponent(AlertComponent, { environmentInjector: this.appRef.injector });
+        componentRef.instance.alerts = [alert];
+        this.appRef.attachView(componentRef.hostView);
+        const domElem = componentRef.hostView.rootNodes[0];
+        document.body.appendChild(domElem);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NotificationService, deps: [{ token: i0.ApplicationRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NotificationService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NotificationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ApplicationRef }, { type: i0.Injector }]; } });
+
 class LibPortalAngularModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LibPortalAngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: LibPortalAngularModule, imports: [ComponentsModule], exports: [ComponentsModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LibPortalAngularModule, imports: [ComponentsModule, ComponentsModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LibPortalAngularModule, providers: [
+            NotificationService
+        ], imports: [ComponentsModule, ComponentsModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LibPortalAngularModule, decorators: [{
             type: NgModule,
@@ -1866,8 +1692,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         ComponentsModule,
                     ],
                     exports: [
-                        ComponentsModule
-                    ]
+                        ComponentsModule,
+                    ],
+                    providers: [
+                        NotificationService
+                    ],
                 }]
         }] });
 
@@ -1883,5 +1712,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BadgeComponent, BootstrapTableComponent, ButtonClasses, ButtonComponent, CalendarComponent, CardComponent, CheckboxComponent, CodeHighlightComponent, ComponentsModule, DatePickerComponent, DateTimePickerComponent, FormComponent, InputComponent, LibPortalAngularModule, MultiSelectComponent, RadioComponent, SelectComponent, TextareaComponent };
+export { AlertComponent, BadgeComponent, BootstrapTableComponent, ButtonClasses, ButtonComponent, CardComponent, CheckboxComponent, CodeHighlightComponent, ComponentsModule, FormComponent, InputComponent, LibPortalAngularModule, MultiSelectComponent, NotificationService, RadioComponent, SelectComponent, TextareaComponent };
 //# sourceMappingURL=lib-portal-angular.mjs.map