feat: add modal alert on web about update income tax

web/src/app/app.component.html

@@ -1,3 +1,4 @@
+<app-modal></app-modal>
 <app-header></app-header>
 <router-outlet></router-outlet>
 <app-footer></app-footer>

web/src/app/app.module.ts

@@ -20,6 +20,7 @@ import { ThirteenthComponent } from './pages/thirteenth/thirteenth.component';
 import { AlertModalComponent } from './shared/alert-modal/alert-modal.component';
 import { HourComponent } from './pages/hour/hour.component';
 import { DigitOnlyModule } from '@uiowa/digit-only';
+import { ModalComponent } from './components/modal/modal.component';
 
 export const WebCurrencyMaskConfig: CurrencyMaskConfig = {
   prefix: 'R$',
@@ -45,7 +46,8 @@ export const WebCurrencyMaskConfig: CurrencyMaskConfig = {
     CltPjComponent,
     ThirteenthComponent,
     AlertModalComponent,
-    HourComponent
+    HourComponent,
+    ModalComponent
 
   ],
   imports: [

web/src/app/components/modal/modal.component.css

@@ -0,0 +1,17 @@
+.modal {
+    background: rgba(0, 0, 0, .5)
+}
+
+.modal-title {
+    color: var(--bs-primary);
+    text-align: center;
+    font-weight: bold;
+}
+
+.modal-body {
+    text-align: justify;
+}
+
+.btn-primary {
+    background-color: var(--bs-primary);
+}

web/src/app/components/modal/modal.component.html

@@ -0,0 +1,17 @@
+<button type="button" (click)="openModal()" style="display:none"></button>
+
+<div class="modal" tabindex="-1" role="dialog" [ngStyle]="{'display':display}">
+    <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content">
+            <h3 class="modal-title mt-3">AVISO</h3>
+            <div class="modal-body">
+                <p>Portal do Trabalhador está com os valores de base dos cálculos atualizados com a
+                    Medida Provisória Nº 1171, publicada na data de 30/04/2023, relacionada a nova
+                    tabela progressiva do Imposto de Renda.</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-primary" (click)="onCloseHandled()">Fechar</button>
+            </div>
+        </div>
+    </div>
+</div>

web/src/app/components/modal/modal.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-modal',
+  templateUrl: './modal.component.html',
+  styleUrls: ['./modal.component.css']
+})
+export class ModalComponent implements OnInit {
+
+  display = "none"
+
+  constructor() { }
+
+  ngOnInit(): void {
+    setTimeout(() => {
+      this.openModal()
+    }, 500)
+  }
+
+  openModal() {
+    this.display = "block";
+  }
+
+  onCloseHandled() {
+    this.display = "none";
+  }
+
+}