lib-portal-angular 0.0.1

package/fesm2022/lib-portal-angular.mjs

@@ -0,0 +1,1887 @@
+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 * 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 } from 'rxjs';
+import * as i3$1 from '@ng-select/ng-select';
+import { NgSelectModule } from '@ng-select/ng-select';
+import * as i3$2 from 'ngx-pagination';
+import { NgxPaginationModule } from 'ngx-pagination';
+
+class CalendarComponent {
+    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 = () => { };
+    }
+    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();
+    }
+    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;
+(function (ButtonClasses) {
+    ButtonClasses["Primary"] = "btn-primary";
+    ButtonClasses["Secondary"] = "btn-secondary";
+    ButtonClasses["Success"] = "btn-success";
+    ButtonClasses["Danger"] = "btn-danger";
+    ButtonClasses["Warning"] = "btn-warning";
+    ButtonClasses["Info"] = "btn-info";
+    ButtonClasses["Light"] = "btn-light";
+    ButtonClasses["Dark"] = "btn-dark";
+    ButtonClasses["Link"] = "btn-link";
+})(ButtonClasses || (ButtonClasses = {}));
+
+class BadgeComponent {
+    constructor() {
+        this.label = 'Mensagem';
+        this.badgeContent = '+45';
+        this.marginTop = 0;
+        this.marginBottom = 0;
+        this.marginLeft = 0;
+        this.marginRight = 0;
+        this.btnClass = ButtonClasses.Primary;
+        this.buttonClick = new EventEmitter();
+        this.isHovered = false;
+        this.isClicked = false;
+        this.isActive = false;
+    }
+    getDynamicStyles() {
+        let backgroundColor = '';
+        let textColor = '#fff'; // Default text color
+        let borderColor = '';
+        switch (this.btnClass) {
+            case ButtonClasses.Primary:
+                backgroundColor = '#00444C';
+                break;
+            case ButtonClasses.Secondary:
+                backgroundColor = '#2CA58D';
+                break;
+            case ButtonClasses.Success:
+                backgroundColor = '#00C853';
+                break;
+            case ButtonClasses.Danger:
+                backgroundColor = '#D32F2F';
+                break;
+            case ButtonClasses.Warning:
+                backgroundColor = '#FFC107';
+                break;
+            case ButtonClasses.Info:
+                backgroundColor = '#3EC9D6';
+                break;
+            case ButtonClasses.Light:
+                backgroundColor = '#EEF2F6';
+                textColor = '#00444C'; // Custom text color for Light
+                break;
+            case ButtonClasses.Dark:
+                backgroundColor = '#111936';
+                break;
+            case ButtonClasses.Link:
+                backgroundColor = 'transparent';
+                borderColor = '#DDE5E9';
+                textColor = '#00444C'; // Custom text color for Link
+                break;
+            default:
+                backgroundColor = '#00444C';
+                break;
+        }
+        const hoverFilter = this.isHovered ? 'brightness(80%)' : 'none'; // Adjusted hover brightness
+        const activeFilter = this.isClicked ? 'brightness(60%)' : hoverFilter; // Adjusted active brightness
+        return {
+            'margin-top': `${this.marginTop}rem`,
+            'margin-bottom': `${this.marginBottom}rem`,
+            'margin-left': `${this.marginLeft}rem`,
+            'margin-right': `${this.marginRight}rem`,
+            'background-color': backgroundColor,
+            'color': textColor,
+            'border': borderColor ? `1px solid ${borderColor}` : 'none',
+            'transition': 'background-color 0.3s, border-color 0.3s, filter 0.3s',
+            'filter': activeFilter
+        };
+    }
+    onClick() {
+        this.buttonClick.emit();
+    }
+    onMouseEnter() {
+        this.isHovered = true;
+    }
+    onMouseLeave() {
+        this.isHovered = false;
+        this.isClicked = false;
+    }
+    onMouseDown() {
+        this.isClicked = true;
+    }
+    onMouseUp() {
+        this.isClicked = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BadgeComponent, selector: "sim-app-badge", inputs: { label: "label", badgeContent: "badgeContent", marginTop: "marginTop", marginBottom: "marginBottom", marginLeft: "marginLeft", marginRight: "marginRight", btnClass: "btnClass" }, outputs: { buttonClick: "buttonClick" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "mousedown": "onMouseDown()", "mouseup": "onMouseUp()" } }, ngImport: i0, template: `
+    <button
+      class="notification-button"
+      [ngStyle]="getDynamicStyles()"
+      (click)="onClick()"
+      [class.hovered]="isHovered"
+      [class.clicked]="isClicked"
+      (mousedown)="onMouseDown()"
+      (mouseup)="onMouseUp()"
+      (mouseleave)="onMouseLeave()"
+      (mouseenter)="onMouseEnter()">
+      {{ label }}
+      <span class="badge">{{ badgeContent }}</span>
+    </button>
+  `, isInline: true, styles: [".notification-button{position:relative;display:inline-block;width:155px;height:58px;padding:14px 29px 14px 36px;border-radius:6px;border:none;font-size:16px;font-weight:700;text-align:center;transition:opacity .3s}.badge{position:absolute;width:52px;height:32px;top:-15px;right:-20px;background-color:#dc3545;color:#fff;border-radius:16px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;font-family:Inter,sans-serif}.notification-button.hovered{opacity:.8}.notification-button.clicked{opacity:.6}\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: BadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sim-app-badge', template: `
+    <button
+      class="notification-button"
+      [ngStyle]="getDynamicStyles()"
+      (click)="onClick()"
+      [class.hovered]="isHovered"
+      [class.clicked]="isClicked"
+      (mousedown)="onMouseDown()"
+      (mouseup)="onMouseUp()"
+      (mouseleave)="onMouseLeave()"
+      (mouseenter)="onMouseEnter()">
+      {{ label }}
+      <span class="badge">{{ badgeContent }}</span>
+    </button>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".notification-button{position:relative;display:inline-block;width:155px;height:58px;padding:14px 29px 14px 36px;border-radius:6px;border:none;font-size:16px;font-weight:700;text-align:center;transition:opacity .3s}.badge{position:absolute;width:52px;height:32px;top:-15px;right:-20px;background-color:#dc3545;color:#fff;border-radius:16px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;font-family:Inter,sans-serif}.notification-button.hovered{opacity:.8}.notification-button.clicked{opacity:.6}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], badgeContent: [{
+                type: Input
+            }], marginTop: [{
+                type: Input
+            }], marginBottom: [{
+                type: Input
+            }], marginLeft: [{
+                type: Input
+            }], marginRight: [{
+                type: Input
+            }], btnClass: [{
+                type: Input
+            }], buttonClick: [{
+                type: Output
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }], onMouseDown: [{
+                type: HostListener,
+                args: ['mousedown']
+            }], onMouseUp: [{
+                type: HostListener,
+                args: ['mouseup']
+            }] } });
+
+class ButtonComponent {
+    constructor() {
+        this.type = 'button';
+        this.label = 'Submit';
+        this.btnClass = ButtonClasses.Primary;
+        this.fontSize = '1rem';
+        this.disabled = false;
+        this.autofocus = false;
+        this.form = null;
+        this.formaction = null;
+        this.formenctype = null;
+        this.formmethod = null;
+        this.formnovalidate = false;
+        this.formtarget = null;
+        this.name = null;
+        this.value = null;
+        this.marginTop = 0;
+        this.marginBottom = 0;
+        this.marginLeft = 0;
+        this.marginRight = 0;
+        this.clickEvent = new EventEmitter();
+        this.isHovered = false;
+        this.isActive = false;
+    }
+    onMouseEnter() {
+        this.isHovered = true;
+    }
+    onMouseLeave() {
+        this.isHovered = false;
+        this.isActive = false;
+    }
+    onMouseDown() {
+        this.isActive = true;
+    }
+    onMouseUp() {
+        this.isActive = false;
+    }
+    onClick(event) {
+        this.clickEvent.emit(event);
+    }
+    getDynamicStyles() {
+        let backgroundColor = '';
+        let textColor = '#fff'; // Default text color
+        let borderColor = '';
+        switch (this.btnClass) {
+            case ButtonClasses.Primary:
+                backgroundColor = '#00444C';
+                break;
+            case ButtonClasses.Secondary:
+                backgroundColor = '#2CA58D';
+                break;
+            case ButtonClasses.Success:
+                backgroundColor = '#00C853';
+                break;
+            case ButtonClasses.Danger:
+                backgroundColor = '#D32F2F';
+                break;
+            case ButtonClasses.Warning:
+                backgroundColor = '#FFC107';
+                break;
+            case ButtonClasses.Info:
+                backgroundColor = '#3EC9D6';
+                break;
+            case ButtonClasses.Light:
+                backgroundColor = '#EEF2F6';
+                textColor = '#00444C'; // Custom text color for Light
+                break;
+            case ButtonClasses.Dark:
+                backgroundColor = '#111936';
+                break;
+            case ButtonClasses.Link:
+                backgroundColor = 'transparent';
+                borderColor = '#DDE5E9';
+                textColor = '#00444C'; // Custom text color for Link
+                break;
+            default:
+                backgroundColor = '#00444C';
+                break;
+        }
+        const hoverFilter = this.isHovered ? 'brightness(80%)' : 'none'; // Adjusted hover brightness
+        const activeFilter = this.isActive ? 'brightness(60%)' : hoverFilter; // Adjusted active brightness
+        return {
+            'font-size': this.fontSize,
+            'margin-top': `${this.marginTop}rem`,
+            'margin-bottom': `${this.marginBottom}rem`,
+            'margin-left': `${this.marginLeft}rem`,
+            'margin-right': `${this.marginRight}rem`,
+            'background-color': backgroundColor,
+            'color': textColor,
+            'border': borderColor ? `1px solid ${borderColor}` : 'none',
+            'transition': 'background-color 0.3s, border-color 0.3s, filter 0.3s',
+            'filter': activeFilter
+        };
+    }
+    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 }); }
+}
+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>
+  `, 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
+            }], label: [{
+                type: Input
+            }], btnClass: [{
+                type: Input
+            }], fontSize: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], autofocus: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }], formaction: [{
+                type: Input
+            }], formenctype: [{
+                type: Input
+            }], formmethod: [{
+                type: Input
+            }], formnovalidate: [{
+                type: Input
+            }], formtarget: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], marginTop: [{
+                type: Input
+            }], marginBottom: [{
+                type: Input
+            }], marginLeft: [{
+                type: Input
+            }], marginRight: [{
+                type: Input
+            }], clickEvent: [{
+                type: Output
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }], onMouseDown: [{
+                type: HostListener,
+                args: ['mousedown']
+            }], onMouseUp: [{
+                type: HostListener,
+                args: ['mouseup']
+            }] } });
+
+class CardComponent {
+    constructor() {
+        this.cardTitle = 'Default Title';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CardComponent, selector: "sim-app-card", inputs: { cardTitle: "cardTitle" }, ngImport: i0, template: `
+    <div class="card mb-3">
+      <div class="card-header">
+        <h3>{{ cardTitle }}</h3>
+      </div>
+      <div class="card-body">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sim-app-card',
+                    template: `
+    <div class="card mb-3">
+      <div class="card-header">
+        <h3>{{ cardTitle }}</h3>
+      </div>
+      <div class="card-body">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `
+                }]
+        }], propDecorators: { cardTitle: [{
+                type: Input
+            }] } });
+
+class CheckboxComponent {
+    constructor() {
+        this.id = 'defaultCheckbox';
+        this.checked = false;
+        this.disabled = false;
+        this.label = 'Check me out';
+        this.marginTop = 0;
+        this.marginBottom = 0;
+        this.marginLeft = 0;
+        this.marginRight = 0;
+        this.checkedChange = new EventEmitter();
+        this.onChangeFn = () => { };
+        this.onTouchedFn = () => { };
+    }
+    onChange(event) {
+        const input = event.target;
+        this.checked = input.checked;
+        this.onChangeFn(this.checked);
+        this.checkedChange.emit(this.checked);
+    }
+    writeValue(value) {
+        this.checked = value;
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckboxComponent, selector: "sim-app-checkbox", inputs: { id: "id", checked: "checked", disabled: "disabled", label: "label", marginTop: "marginTop", marginBottom: "marginBottom", marginLeft: "marginLeft", marginRight: "marginRight" }, outputs: { checkedChange: "checkedChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CheckboxComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: `
+    <div
+      class="form-group form-check"
+      [ngStyle]="{
+        'margin-top': marginTop + 'rem',
+        'margin-bottom': marginBottom + 'rem',
+        'margin-left': marginLeft + 'rem',
+        'margin-right': marginRight + 'rem'
+      }">
+      <input
+        type="checkbox"
+        class="form-check-input"
+        [id]="id"
+        [checked]="checked"
+        [disabled]="disabled"
+        (change)="onChange($event)"
+      />
+      <label class="form-check-label" [for]="id">{{ label }}</label>
+    </div>
+  `, isInline: true, styles: [".form-check-input{font-family:Arial,sans-serif;color:#333;font-size:1rem}.form-check-label{font-family:Arial,sans-serif;color:#333;font-size:1rem;font-weight:700}\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: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sim-app-checkbox', template: `
+    <div
+      class="form-group form-check"
+      [ngStyle]="{
+        'margin-top': marginTop + 'rem',
+        'margin-bottom': marginBottom + 'rem',
+        'margin-left': marginLeft + 'rem',
+        'margin-right': marginRight + 'rem'
+      }">
+      <input
+        type="checkbox"
+        class="form-check-input"
+        [id]="id"
+        [checked]="checked"
+        [disabled]="disabled"
+        (change)="onChange($event)"
+      />
+      <label class="form-check-label" [for]="id">{{ label }}</label>
+    </div>
+  `, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CheckboxComponent),
+                            multi: true
+                        }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, styles: [".form-check-input{font-family:Arial,sans-serif;color:#333;font-size:1rem}.form-check-label{font-family:Arial,sans-serif;color:#333;font-size:1rem;font-weight:700}\n"] }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], checked: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], marginTop: [{
+                type: Input
+            }], marginBottom: [{
+                type: Input
+            }], marginLeft: [{
+                type: Input
+            }], marginRight: [{
+                type: Input
+            }], checkedChange: [{
+                type: Output
+            }] } });
+
+class CodeHighlightComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.code = ''; // Definindo um valor padrão
+        this.language = 'typescript';
+        this.highlightedCode = '';
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.highlightCode();
+            this.cdr.detectChanges();
+        });
+    }
+    highlightCode() {
+        const code = hljs.highlight(this.language, this.code).value;
+        this.highlightedCode = code;
+    }
+    copyCode() {
+        const codeElement = this.codeElement.nativeElement;
+        navigator.clipboard.writeText(codeElement.innerText).then(() => {
+            alert('Code copied to clipboard!');
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CodeHighlightComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CodeHighlightComponent, selector: "app-code-highlight", inputs: { code: "code", language: "language" }, viewQueries: [{ propertyName: "codeElement", first: true, predicate: ["codeElement"], descendants: true }], ngImport: i0, template: `
+    <div class="code-container">
+      <pre><code #codeElement [innerHTML]="highlightedCode"></code></pre>
+      <button (click)="copyCode()">Copy</button>
+    </div>
+  `, isInline: true, styles: [".code-container{position:relative}pre{background-color:#2d2d2d;color:#f8f8f2;padding:1rem;border-radius:5px;overflow-x:auto}button{position:absolute;top:10px;right:10px;background-color:#f8f8f2;border:none;padding:.5rem 1rem;cursor:pointer;border-radius:5px;box-shadow:0 2px 4px #0003;transition:background-color .3s,transform .2s,box-shadow .2s}button:hover{background-color:#e0e0e0;box-shadow:0 4px 8px #0000004d}button:active{background-color:#d0d0d0;transform:scale(.98)}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CodeHighlightComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-code-highlight', template: `
+    <div class="code-container">
+      <pre><code #codeElement [innerHTML]="highlightedCode"></code></pre>
+      <button (click)="copyCode()">Copy</button>
+    </div>
+  `, styles: [".code-container{position:relative}pre{background-color:#2d2d2d;color:#f8f8f2;padding:1rem;border-radius:5px;overflow-x:auto}button{position:absolute;top:10px;right:10px;background-color:#f8f8f2;border:none;padding:.5rem 1rem;cursor:pointer;border-radius:5px;box-shadow:0 2px 4px #0003;transition:background-color .3s,transform .2s,box-shadow .2s}button:hover{background-color:#e0e0e0;box-shadow:0 4px 8px #0000004d}button:active{background-color:#d0d0d0;transform:scale(.98)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { code: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], codeElement: [{
+                type: ViewChild,
+                args: ['codeElement']
+            }] } });
+
+class FormComponent {
+    constructor() {
+        this.cardTitle = 'Default Form Title';
+    }
+    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>
+      </div>
+    </div>
+  `, 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 mt-2 mx-1">
+      <div class="col-sm-12">
+        <sim-app-card [cardTitle]="cardTitle">
+          <ng-content></ng-content>
+        </sim-app-card>
+      </div>
+    </div>
+  `
+                }]
+        }], propDecorators: { cardTitle: [{
+                type: Input
+            }] } });
+
+class InputComponent {
+    constructor() {
+        this.label = 'Default Label';
+        this.placeholder = 'Default Placeholder';
+        this.id = 'inputId';
+        this.type = 'text';
+        this.disabled = false;
+        this.readonly = false;
+        this.maxlength = null;
+        this.minlength = null;
+        this.required = false;
+        this.pattern = null;
+        this.autofocus = false;
+        this.marginTop = 0;
+        this.marginBottom = 0;
+        this.marginLeft = 0;
+        this.marginRight = 0;
+        this.inputEvent = new EventEmitter();
+        this.changeEvent = new EventEmitter();
+        this.focusEvent = new EventEmitter();
+        this.blurEvent = new EventEmitter();
+        this.keyupEvent = new EventEmitter();
+        this.keydownEvent = new EventEmitter();
+        this.keypressEvent = new EventEmitter();
+        this.onChangeCallback = () => { };
+        this.onTouchedCallback = () => { };
+        this.value = '';
+    }
+    onInput(event) {
+        const inputElement = event.target;
+        this.value = inputElement.value;
+        this.onChangeCallback(this.value);
+        this.inputEvent.emit(event);
+    }
+    onChange(event) {
+        this.changeEvent.emit(event);
+    }
+    onFocus(event) {
+        this.focusEvent.emit(event);
+    }
+    onBlur(event) {
+        this.onTouchedCallback();
+        this.blurEvent.emit(event);
+    }
+    onKeyup(event) {
+        this.keyupEvent.emit(event);
+    }
+    onKeydown(event) {
+        this.keydownEvent.emit(event);
+    }
+    onKeypress(event) {
+        this.keypressEvent.emit(event);
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    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: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => InputComponent),
+                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]="id">{{ label }}</label>
+      <input [type]="type"
+             class="form-control custom-input"
+             [id]="id"
+             [placeholder]="placeholder"
+             [value]="value"
+             (input)="onInput($event)"
+             (change)="onChange($event)"
+             (focus)="onFocus($event)"
+             (blur)="onBlur($event)"
+             (keyup)="onKeyup($event)"
+             (keydown)="onKeydown($event)"
+             (keypress)="onKeypress($event)"
+             [disabled]="disabled"
+             [readonly]="readonly"
+             [attr.maxlength]="maxlength"
+             [attr.minlength]="minlength"
+             [required]="required"
+             [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 }); }
+}
+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]="{
+      'margin-top': marginTop + 'rem',
+      'margin-bottom': marginBottom + 'rem',
+      'margin-left': marginLeft + 'rem',
+      'margin-right': marginRight + 'rem'
+    }">
+      <label [for]="id">{{ label }}</label>
+      <input [type]="type"
+             class="form-control custom-input"
+             [id]="id"
+             [placeholder]="placeholder"
+             [value]="value"
+             (input)="onInput($event)"
+             (change)="onChange($event)"
+             (focus)="onFocus($event)"
+             (blur)="onBlur($event)"
+             (keyup)="onKeyup($event)"
+             (keydown)="onKeydown($event)"
+             (keypress)="onKeypress($event)"
+             [disabled]="disabled"
+             [readonly]="readonly"
+             [attr.maxlength]="maxlength"
+             [attr.minlength]="minlength"
+             [required]="required"
+             [attr.pattern]="pattern"
+             [autofocus]="autofocus">
+    </div>
+  `, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], maxlength: [{
+                type: Input
+            }], minlength: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], pattern: [{
+                type: Input
+            }], autofocus: [{
+                type: Input
+            }], marginTop: [{
+                type: Input
+            }], marginBottom: [{
+                type: Input
+            }], marginLeft: [{
+                type: Input
+            }], marginRight: [{
+                type: Input
+            }], inputEvent: [{
+                type: Output
+            }], changeEvent: [{
+                type: Output
+            }], focusEvent: [{
+                type: Output
+            }], blurEvent: [{
+                type: Output
+            }], keyupEvent: [{
+                type: Output
+            }], keydownEvent: [{
+                type: Output
+            }], keypressEvent: [{
+                type: Output
+            }] } });
+
+class MultiSelectComponent {
+    constructor() {
+        this.label = 'Multi Select';
+        this.data = []; // Aceita um array de objetos genéricos
+        this.placeholder = 'Select items';
+        this.selected = []; // A variável selected deve ser um array
+        this.id = 'multiSelectId';
+        this.bindLabel = ''; // Label dinâmico genérico
+        this.marginTop = 0;
+        this.marginBottom = 0;
+        this.marginLeft = 0;
+        this.marginRight = 0;
+        this.keyupEvent = new EventEmitter();
+        this.items = of([]); // Inicialização da propriedade
+        this.onChangeCallback = () => { };
+        this.onTouchedCallback = () => { };
+        this.isCourseEntered = false;
+    }
+    ngOnInit() {
+        this.items = of(this.data);
+    }
+    onFocus() {
+        this.isCourseEntered = true;
+    }
+    onBlur() {
+        this.isCourseEntered = false;
+    }
+    onKeyUp(event) {
+        this.keyupEvent.emit(event);
+    }
+    writeValue(value) {
+        this.selected = value || [];
+    }
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    setDisabledState(isDisabled) {
+        // No implementation needed for this example
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiSelectComponent, selector: "sim-app-multi-select", inputs: { label: "label", data: "data", placeholder: "placeholder", selected: "selected", id: "id", bindLabel: "bindLabel", marginTop: "marginTop", marginBottom: "marginBottom", marginLeft: "marginLeft", marginRight: "marginRight" }, outputs: { keyupEvent: "keyupEvent" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MultiSelectComponent),
+                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]="id" class="form-label">{{ label }}</label>
+      <ng-select
+        [class.course-entry]="isCourseEntered"
+        class="ng-select"
+        [items]="items | async"
+        [multiple]="true"
+        [closeOnSelect]="false"
+        [hideSelected]="true"
+        [bindLabel]="bindLabel"
+        [(ngModel)]="selected"
+        (keyup)="onKeyUp($event)"
+        [id]="id"
+        [placeholder]="selected && selected.length === 0 ? placeholder : ''"
+        (focus)="onFocus()"
+        (blur)="onBlur()"
+      >
+        <ng-template ng-option-tmp let-item="item">
+          {{ item[bindLabel] }}
+        </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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sim-app-multi-select', template: `
+    <div class="form-group" [ngStyle]="{
+      'margin-top': marginTop + 'rem',
+      'margin-bottom': marginBottom + 'rem',
+      'margin-left': marginLeft + 'rem',
+      'margin-right': marginRight + 'rem'
+    }">
+      <label [for]="id" class="form-label">{{ label }}</label>
+      <ng-select
+        [class.course-entry]="isCourseEntered"
+        class="ng-select"
+        [items]="items | async"
+        [multiple]="true"
+        [closeOnSelect]="false"
+        [hideSelected]="true"
+        [bindLabel]="bindLabel"
+        [(ngModel)]="selected"
+        (keyup)="onKeyUp($event)"
+        [id]="id"
+        [placeholder]="selected && selected.length === 0 ? placeholder : ''"
+        (focus)="onFocus()"
+        (blur)="onBlur()"
+      >
+        <ng-template ng-option-tmp let-item="item">
+          {{ item[bindLabel] }}
+        </ng-template>
+      </ng-select>
+    </div>
+  `, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MultiSelectComponent),
+                            multi: true
+                        }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, styles: [".form-group{font-family:Arial,sans-serif;font-size:1rem}.form-label{font-weight:700}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], bindLabel: [{
+                type: Input
+            }], marginTop: [{
+                type: Input
+            }], marginBottom: [{
+                type: Input
+            }], marginLeft: [{
+                type: Input
+            }], marginRight: [{
+                type: Input
+            }], keyupEvent: [{
+                type: Output
+            }] } });
+
+class RadioComponent {
+    constructor() {
+        this.name = 'defaultRadio';
+        this.id = 'radioId';
+        this.value = 'default';
+        this.checked = false;
+        this.disabled = false;
+        this.label = 'Radio label';
+        this.marginTop = 0;
+        this.marginBottom = 0;
+        this.marginLeft = 0;
+        this.marginRight = 0;
+        this.changeEvent = new EventEmitter();
+        this.onChangeCallback = () => { };
+        this.onTouchedCallback = () => { };
+    }
+    handleRadioChange(event) {
+        const inputElement = event.target;
+        this.checked = inputElement.checked;
+        this.onChangeCallback(this.checked);
+        this.changeEvent.emit(event);
+    }
+    writeValue(value) {
+        this.checked = value;
+    }
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RadioComponent, selector: "sim-app-radio", inputs: { name: "name", id: "id", value: "value", checked: "checked", disabled: "disabled", label: "label", marginTop: "marginTop", marginBottom: "marginBottom", marginLeft: "marginLeft", marginRight: "marginRight" }, outputs: { changeEvent: "changeEvent" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => RadioComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: `
+    <div class="form-check" [ngStyle]="{
+      'margin-top': marginTop + 'rem',
+      'margin-bottom': marginBottom + 'rem',
+      'margin-left': marginLeft + 'rem',
+      'margin-right': marginRight + 'rem'
+    }">
+      <input class="form-check-input"
+             type="radio"
+             [name]="name"
+             [id]="id"
+             [value]="value"
+             [checked]="checked"
+             (change)="handleRadioChange($event)"
+             [disabled]="disabled">
+      <label class="form-check-label" [for]="id">{{ label }}</label>
+    </div>
+  `, isInline: true, styles: [".form-check{font-family:Arial,sans-serif;font-size:1rem}.form-check-input{font-family:Arial,sans-serif;color:#333;font-size:1rem;margin-right:.5rem}.form-check-label{font-family:Arial,sans-serif;color:#333;font-size:1rem;font-weight:700}\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: RadioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sim-app-radio', template: `
+    <div class="form-check" [ngStyle]="{
+      'margin-top': marginTop + 'rem',
+      'margin-bottom': marginBottom + 'rem',
+      'margin-left': marginLeft + 'rem',
+      'margin-right': marginRight + 'rem'
+    }">
+      <input class="form-check-input"
+             type="radio"
+             [name]="name"
+             [id]="id"
+             [value]="value"
+             [checked]="checked"
+             (change)="handleRadioChange($event)"
+             [disabled]="disabled">
+      <label class="form-check-label" [for]="id">{{ label }}</label>
+    </div>
+  `, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RadioComponent),
+                            multi: true
+                        }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, styles: [".form-check{font-family:Arial,sans-serif;font-size:1rem}.form-check-input{font-family:Arial,sans-serif;color:#333;font-size:1rem;margin-right:.5rem}.form-check-label{font-family:Arial,sans-serif;color:#333;font-size:1rem;font-weight:700}\n"] }]
+        }], propDecorators: { name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], checked: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], marginTop: [{
+                type: Input
+            }], marginBottom: [{
+                type: Input
+            }], marginLeft: [{
+                type: Input
+            }], marginRight: [{
+                type: Input
+            }], changeEvent: [{
+                type: Output
+            }] } });
+
+class SelectComponent {
+    constructor() {
+        this.label = 'Default Label';
+        this.id = 'selectId';
+        this.disabled = false;
+        this.options = [];
+        this.marginTop = 0;
+        this.marginBottom = 0;
+        this.marginLeft = 0;
+        this.marginRight = 0;
+        this.changeEvent = new EventEmitter();
+        this.onChangeCallback = () => { };
+        this.onTouchedCallback = () => { };
+    }
+    onSelectChange(event) {
+        const selectElement = event.target;
+        this.value = selectElement.value;
+        this.onChangeCallback(this.value);
+        this.changeEvent.emit(this.value);
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SelectComponent, selector: "sim-app-select", inputs: { label: "label", id: "id", disabled: "disabled", options: "options", marginTop: "marginTop", marginBottom: "marginBottom", marginLeft: "marginLeft", marginRight: "marginRight" }, outputs: { changeEvent: "changeEvent" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SelectComponent),
+                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]="id">{{ label }}</label>
+      <select class="form-control custom-select"
+              [id]="id"
+              [value]="value"
+              (change)="onSelectChange($event)"
+              [disabled]="disabled">
+        <option *ngFor="let option of options" [value]="option.value">{{ option.label }}</option>
+      </select>
+    </div>
+  `, isInline: true, styles: [".form-group{margin-bottom:1rem}.form-label{font-family:Arial,sans-serif;color:#333;font-size:1rem;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sim-app-select', template: `
+    <div 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>
+      <select class="form-control custom-select"
+              [id]="id"
+              [value]="value"
+              (change)="onSelectChange($event)"
+              [disabled]="disabled">
+        <option *ngFor="let option of options" [value]="option.value">{{ option.label }}</option>
+      </select>
+    </div>
+  `, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SelectComponent),
+                            multi: true
+                        }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, styles: [".form-group{margin-bottom:1rem}.form-label{font-family:Arial,sans-serif;color:#333;font-size:1rem;font-weight:700}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], marginTop: [{
+                type: Input
+            }], marginBottom: [{
+                type: Input
+            }], marginLeft: [{
+                type: Input
+            }], marginRight: [{
+                type: Input
+            }], changeEvent: [{
+                type: Output
+            }] } });
+
+class BootstrapTableComponent {
+    constructor() {
+        this.columns = [];
+        this.data = [];
+        this.itemsPerPageOptions = [5, 10, 15, 20];
+        this.defaultItemsPerPage = 10;
+        this.marginTop = 0;
+        this.marginBottom = 0;
+        this.marginLeft = 0;
+        this.marginRight = 0;
+        this.showActionColumn = false;
+        this.actionColumnLabel = 'Actions';
+        this.sortChange = new EventEmitter();
+        this.pageChange = new EventEmitter();
+        this.itemsPerPageChange = new EventEmitter();
+        this.onEditTable = new EventEmitter();
+        this.onDeleteTable = new EventEmitter();
+        this.onViewTable = new EventEmitter();
+        this.currentPage = 1;
+        this.totalItems = 0;
+        this.config = {
+            id: 'bootstrap-table',
+            itemsPerPage: this.defaultItemsPerPage,
+            currentPage: this.currentPage,
+            totalItems: this.totalItems
+        };
+    }
+    ngOnInit() {
+        this.totalItems = this.data.length;
+        this.updateConfig();
+    }
+    ngOnChanges(changes) {
+        if (changes['data']) {
+            this.totalItems = this.data.length;
+            this.updateConfig();
+        }
+    }
+    updateConfig() {
+        this.config.itemsPerPage = this.defaultItemsPerPage;
+        this.config.currentPage = this.currentPage;
+        this.config.totalItems = this.totalItems;
+    }
+    onSort(column) {
+        this.sortChange.emit(column);
+    }
+    onPageChange(page) {
+        this.currentPage = page;
+        this.config.currentPage = page;
+        this.pageChange.emit(page);
+    }
+    onItemsPerPageChange(event) {
+        const itemsPerPage = parseInt(event, 10);
+        this.defaultItemsPerPage = itemsPerPage;
+        this.config.itemsPerPage = itemsPerPage;
+        this.itemsPerPageChange.emit(itemsPerPage);
+        this.updateConfig();
+    }
+    handleAction(action, item, index) {
+        switch (action) {
+            case 'edit':
+                this.onEditTable.emit({ item, index });
+                break;
+            case 'delete':
+                this.onDeleteTable.emit({ item, index });
+                break;
+            case 'view':
+                this.onViewTable.emit({ item, index });
+                break;
+        }
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BootstrapTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sim-bootstrap-table', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+        }], propDecorators: { columns: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], itemsPerPageOptions: [{
+                type: Input
+            }], defaultItemsPerPage: [{
+                type: Input
+            }], marginTop: [{
+                type: Input
+            }], marginBottom: [{
+                type: Input
+            }], marginLeft: [{
+                type: Input
+            }], marginRight: [{
+                type: Input
+            }], showActionColumn: [{
+                type: Input
+            }], actionColumnLabel: [{
+                type: Input
+            }], sortChange: [{
+                type: Output
+            }], pageChange: [{
+                type: Output
+            }], itemsPerPageChange: [{
+                type: Output
+            }], onEditTable: [{
+                type: Output
+            }], onDeleteTable: [{
+                type: Output
+            }], onViewTable: [{
+                type: Output
+            }] } });
+
+class TextareaComponent {
+    constructor() {
+        this.label = 'Default Label';
+        this.placeholder = 'Default Placeholder';
+        this.id = 'textareaId';
+        this.rows = 3;
+        this.disabled = false;
+        this.readonly = false;
+        this.maxlength = null;
+        this.minlength = null;
+        this.required = false;
+        this.autofocus = false;
+        this.marginTop = 0;
+        this.marginBottom = 0;
+        this.marginLeft = 0;
+        this.marginRight = 0;
+        this.inputEvent = new EventEmitter();
+        this.changeEvent = new EventEmitter();
+        this.focusEvent = new EventEmitter();
+        this.blurEvent = new EventEmitter();
+        this.keyupEvent = new EventEmitter();
+        this.keydownEvent = new EventEmitter();
+        this.keypressEvent = new EventEmitter();
+        this.onChangeCallback = () => { };
+        this.onTouchedCallback = () => { };
+        this.value = '';
+    }
+    onInput(event) {
+        const inputElement = event.target;
+        this.value = inputElement.value;
+        this.onChangeCallback(this.value);
+        this.inputEvent.emit(event);
+    }
+    onChange(event) {
+        this.changeEvent.emit(event);
+    }
+    onFocus(event) {
+        this.focusEvent.emit(event);
+    }
+    onBlur(event) {
+        this.onTouchedCallback();
+        this.blurEvent.emit(event);
+    }
+    onKeyup(event) {
+        this.keyupEvent.emit(event);
+    }
+    onKeydown(event) {
+        this.keydownEvent.emit(event);
+    }
+    onKeypress(event) {
+        this.keypressEvent.emit(event);
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TextareaComponent, selector: "sim-app-textarea", inputs: { label: "label", placeholder: "placeholder", id: "id", rows: "rows", disabled: "disabled", readonly: "readonly", maxlength: "maxlength", minlength: "minlength", required: "required", 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(() => TextareaComponent),
+                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]="id" class="form-label">{{ label }}</label>
+      <textarea class="form-control custom-textarea"
+                [id]="id"
+                [rows]="rows"
+                [placeholder]="placeholder"
+                [value]="value"
+                (input)="onInput($event)"
+                (change)="onChange($event)"
+                (focus)="onFocus($event)"
+                (blur)="onBlur($event)"
+                (keyup)="onKeyup($event)"
+                (keydown)="onKeydown($event)"
+                (keypress)="onKeypress($event)"
+                [attr.maxlength]="maxlength"
+                [attr.minlength]="minlength"
+                [required]="required"
+                [disabled]="disabled"
+                [readonly]="readonly"
+                [autofocus]="autofocus"></textarea>
+    </div>
+  `, isInline: true, styles: [".form-group{margin-bottom:1rem}.form-label{font-family:Arial,sans-serif;color:#333;font-size:1rem;font-weight:700}\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: TextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sim-app-textarea', template: `
+    <div class="form-group" [ngStyle]="{
+      'margin-top': marginTop + 'rem',
+      'margin-bottom': marginBottom + 'rem',
+      'margin-left': marginLeft + 'rem',
+      'margin-right': marginRight + 'rem'
+    }">
+      <label [for]="id" class="form-label">{{ label }}</label>
+      <textarea class="form-control custom-textarea"
+                [id]="id"
+                [rows]="rows"
+                [placeholder]="placeholder"
+                [value]="value"
+                (input)="onInput($event)"
+                (change)="onChange($event)"
+                (focus)="onFocus($event)"
+                (blur)="onBlur($event)"
+                (keyup)="onKeyup($event)"
+                (keydown)="onKeydown($event)"
+                (keypress)="onKeypress($event)"
+                [attr.maxlength]="maxlength"
+                [attr.minlength]="minlength"
+                [required]="required"
+                [disabled]="disabled"
+                [readonly]="readonly"
+                [autofocus]="autofocus"></textarea>
+    </div>
+  `, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TextareaComponent),
+                            multi: true
+                        }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, styles: [".form-group{margin-bottom:1rem}.form-label{font-family:Arial,sans-serif;color:#333;font-size:1rem;font-weight:700}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], maxlength: [{
+                type: Input
+            }], minlength: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], autofocus: [{
+                type: Input
+            }], marginTop: [{
+                type: Input
+            }], marginBottom: [{
+                type: Input
+            }], marginLeft: [{
+                type: Input
+            }], marginRight: [{
+                type: Input
+            }], inputEvent: [{
+                type: Output
+            }], changeEvent: [{
+                type: Output
+            }], focusEvent: [{
+                type: Output
+            }], blurEvent: [{
+                type: Output
+            }], keyupEvent: [{
+                type: Output
+            }], keydownEvent: [{
+                type: Output
+            }], keypressEvent: [{
+                type: Output
+            }] } });
+
+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,
+            CardComponent,
+            FormComponent,
+            InputComponent,
+            CheckboxComponent,
+            TextareaComponent,
+            SelectComponent,
+            RadioComponent,
+            MultiSelectComponent,
+            CalendarComponent,
+            DatePickerComponent,
+            DateTimePickerComponent,
+            BootstrapTableComponent,
+            CodeHighlightComponent,
+            BadgeComponent], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            NgSelectModule, i3.FlatpickrModule, NgxPaginationModule], exports: [ButtonComponent,
+            CardComponent,
+            FormComponent,
+            InputComponent,
+            CheckboxComponent,
+            TextareaComponent,
+            SelectComponent,
+            RadioComponent,
+            MultiSelectComponent,
+            FormsModule,
+            ReactiveFormsModule,
+            NgSelectModule,
+            CalendarComponent,
+            DatePickerComponent,
+            DateTimePickerComponent,
+            BootstrapTableComponent,
+            CodeHighlightComponent,
+            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] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComponentsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ButtonComponent,
+                        CardComponent,
+                        FormComponent,
+                        InputComponent,
+                        CheckboxComponent,
+                        TextareaComponent,
+                        SelectComponent,
+                        RadioComponent,
+                        MultiSelectComponent,
+                        CalendarComponent,
+                        DatePickerComponent,
+                        DateTimePickerComponent,
+                        BootstrapTableComponent,
+                        CodeHighlightComponent,
+                        BadgeComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        NgSelectModule,
+                        FlatpickrModule.forRoot(),
+                        NgxPaginationModule
+                    ],
+                    exports: [
+                        ButtonComponent,
+                        CardComponent,
+                        FormComponent,
+                        InputComponent,
+                        CheckboxComponent,
+                        TextareaComponent,
+                        SelectComponent,
+                        RadioComponent,
+                        MultiSelectComponent,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        NgSelectModule,
+                        CalendarComponent,
+                        DatePickerComponent,
+                        DateTimePickerComponent,
+                        BootstrapTableComponent,
+                        CodeHighlightComponent,
+                        BadgeComponent
+                    ]
+                }]
+        }] });
+
+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] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LibPortalAngularModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        ComponentsModule,
+                    ],
+                    exports: [
+                        ComponentsModule
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of sim-lib
+ *
+ * Este arquivo exporta todos os componentes, enums e módulos necessários
+ * para que os consumidores da biblioteca possam utilizá-los em suas aplicações.
+ */
+// Componentes
+
+/**
+ * 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 };
+//# sourceMappingURL=lib-portal-angular.mjs.map