lib-portal-angular 0.0.22 → 0.0.23

package/fesm2022/lib-portal-angular.mjs

@@ -1,94 +1,361 @@
 import * as i0 from '@angular/core';
-import { Component, Input, EventEmitter, ChangeDetectionStrategy, Output, HostListener, forwardRef, ViewChild, createComponent, Injectable, NgModule } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+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 * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from 'angularx-flatpickr';
+import { FlatpickrModule } from 'angularx-flatpickr';
 import hljs from 'highlight.js';
-import { of, Subject } from 'rxjs';
-import * as i3 from '@ng-select/ng-select';
+import { of } from 'rxjs';
+import * as i3$1 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
-import * as i3$1 from 'ngx-pagination';
+import * as i3$2 from 'ngx-pagination';
 import { NgxPaginationModule } from 'ngx-pagination';
 
-class AlertComponent {
+class CalendarComponent {
     constructor() {
-        this.alerts = [];
-        this.closeTimeouts = {}; // Armazena os temporizadores para cada alerta
+        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 = () => { };
     }
     ngOnInit() {
-        // 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
-        });
+        // Any necessary initialization
     }
-    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];
-        }
+    onNgModelChange(event) {
+        this.onChange(event);
+        this.onTouched();
     }
-    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: 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;
     }
-    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"] }] }); }
+    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: AlertComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
-            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: [{
+            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();
+    }
+    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: 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateTimePickerComponent, 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: [{
+                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;
@@ -271,8 +538,6 @@ 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;
@@ -347,57 +612,47 @@ 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", 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 }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sim-app-button', 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>
+    <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>
   `, 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
@@ -435,10 +690,6 @@ 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: [{
@@ -649,67 +900,40 @@ 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", 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>
+    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>
       </div>
     </div>
-  `, 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"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: CardComponent, selector: "sim-app-card", inputs: ["cardTitle"] }] }); }
 }
 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" [ngStyle]="getRowStyles()">
-      <div [ngClass]="colClasses">
-        <div class="card">
-          <div class="card-title">
-            {{ cardTitle }}
-          </div>
-          <div class="card-content">
-            <ng-content></ng-content>
-          </div>
-        </div>
+            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>
       </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 = '';
+        this.placeholder = 'Default Placeholder';
         this.id = 'inputId';
         this.type = 'text';
         this.disabled = false;
@@ -723,9 +947,6 @@ 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();
@@ -774,47 +995,26 @@ 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", labelFontWeight: "labelFontWeight", permissions: "permissions", permissionChecker: "permissionChecker" }, 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" }, 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 *ngIf="hasPermission()" class="form-group" [ngStyle]="{
+    <div class="form-group" [ngStyle]="{
       'margin-top': marginTop + 'rem',
       'margin-bottom': marginBottom + 'rem',
       'margin-left': marginLeft + 'rem',
       'margin-right': marginRight + 'rem'
     }">
-      <label [for]="id" [ngStyle]="getLabelStyles()">{{ label }}</label>
+      <label [for]="id">{{ label }}</label>
       <input [type]="type"
              class="form-control custom-input"
              [id]="id"
              [placeholder]="placeholder"
-             [(ngModel)]="value"
+             [value]="value"
              (input)="onInput($event)"
              (change)="onChange($event)"
              (focus)="onFocus($event)"
@@ -830,23 +1030,23 @@ class InputComponent {
              [attr.pattern]="pattern"
              [autofocus]="autofocus">
     </div>
-  `, 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 }); }
+  `, 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sim-app-input', template: `
-    <div *ngIf="hasPermission()" class="form-group" [ngStyle]="{
+    <div class="form-group" [ngStyle]="{
       'margin-top': marginTop + 'rem',
       'margin-bottom': marginBottom + 'rem',
       'margin-left': marginLeft + 'rem',
       'margin-right': marginRight + 'rem'
     }">
-      <label [for]="id" [ngStyle]="getLabelStyles()">{{ label }}</label>
+      <label [for]="id">{{ label }}</label>
       <input [type]="type"
              class="form-control custom-input"
              [id]="id"
              [placeholder]="placeholder"
-             [(ngModel)]="value"
+             [value]="value"
              (input)="onInput($event)"
              (change)="onChange($event)"
              (focus)="onFocus($event)"
@@ -868,7 +1068,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: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"] }]
+                    ], 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"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -899,12 +1099,6 @@ 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: [{
@@ -998,7 +1192,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.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 }); }
+  `, 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
@@ -1344,7 +1538,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$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 }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BootstrapTableComponent, decorators: [{
             type: Component,
@@ -1563,33 +1757,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
-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 ComponentsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ComponentsModule, declarations: [ButtonComponent,
@@ -1601,14 +1768,15 @@ class ComponentsModule {
             SelectComponent,
             RadioComponent,
             MultiSelectComponent,
+            CalendarComponent,
+            DatePickerComponent,
+            DateTimePickerComponent,
             BootstrapTableComponent,
             CodeHighlightComponent,
-            BadgeComponent,
-            AlertComponent], imports: [CommonModule,
+            BadgeComponent], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
-            NgSelectModule,
-            NgxPaginationModule], exports: [ButtonComponent,
+            NgSelectModule, i3.FlatpickrModule, NgxPaginationModule], exports: [ButtonComponent,
             CardComponent,
             FormComponent,
             InputComponent,
@@ -1620,16 +1788,17 @@ class ComponentsModule {
             FormsModule,
             ReactiveFormsModule,
             NgSelectModule,
+            CalendarComponent,
+            DatePickerComponent,
+            DateTimePickerComponent,
             BootstrapTableComponent,
             CodeHighlightComponent,
-            BadgeComponent,
-            AlertComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComponentsModule, providers: [
-            NotificationService
-        ], imports: [CommonModule,
+            BadgeComponent] }); }
+    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] }); }
@@ -1647,17 +1816,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SelectComponent,
                         RadioComponent,
                         MultiSelectComponent,
+                        CalendarComponent,
+                        DatePickerComponent,
+                        DateTimePickerComponent,
                         BootstrapTableComponent,
                         CodeHighlightComponent,
-                        BadgeComponent,
-                        AlertComponent,
+                        BadgeComponent
                     ],
                     imports: [
                         CommonModule,
                         FormsModule,
                         ReactiveFormsModule,
                         NgSelectModule,
-                        NgxPaginationModule,
+                        FlatpickrModule.forRoot(),
+                        NgxPaginationModule
                     ],
                     exports: [
                         ButtonComponent,
@@ -1672,14 +1844,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         FormsModule,
                         ReactiveFormsModule,
                         NgSelectModule,
+                        CalendarComponent,
+                        DatePickerComponent,
+                        DateTimePickerComponent,
                         BootstrapTableComponent,
                         CodeHighlightComponent,
-                        BadgeComponent,
-                        AlertComponent
-                    ],
-                    providers: [
-                        NotificationService
-                    ],
+                        BadgeComponent
+                    ]
                 }]
         }] });
 
@@ -1712,5 +1883,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AlertComponent, BadgeComponent, BootstrapTableComponent, ButtonClasses, ButtonComponent, CardComponent, CheckboxComponent, CodeHighlightComponent, ComponentsModule, FormComponent, InputComponent, LibPortalAngularModule, MultiSelectComponent, NotificationService, RadioComponent, SelectComponent, TextareaComponent };
+export { BadgeComponent, BootstrapTableComponent, ButtonClasses, ButtonComponent, CalendarComponent, CardComponent, CheckboxComponent, CodeHighlightComponent, ComponentsModule, DatePickerComponent, DateTimePickerComponent, FormComponent, InputComponent, LibPortalAngularModule, MultiSelectComponent, RadioComponent, SelectComponent, TextareaComponent };
 //# sourceMappingURL=lib-portal-angular.mjs.map