@rededor/site-front-end-lib 20.0.26 → 20.0.27

package/components/load-screen/load-screen.component.html

@@ -0,0 +1,128 @@
+<svg
+  id="eHMRpL82XFk1"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  viewBox="85 98 130 104"
+  shape-rendering="geometricPrecision"
+  text-rendering="geometricPrecision"
+  project-id="d6bcc811f04c4bd68a9b60e9a293b656"
+  export-id="07f9d4f6c8ae45db93f339ab9b65e3a6"
+  cached="false"
+>
+  <style>
+    #eHMRpL82XFk2 {
+      animation-name: eHMRpL82XFk2_c_o, eHMRpL82XFk2_s_do;
+      animation-duration: 3000ms;
+      animation-fill-mode: forwards;
+      animation-timing-function: linear;
+      animation-direction: normal;
+      animation-iteration-count: infinite;
+    }
+
+    @keyframes eHMRpL82XFk2_c_o {
+      0% {
+        opacity: 0;
+        animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
+      }
+
+      33.333333% {
+        opacity: 1;
+      }
+
+      100% {
+        opacity: 1;
+      }
+    }
+
+    @keyframes eHMRpL82XFk2_s_do {
+      0% {
+        stroke-dashoffset: 1070.79;
+        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
+      }
+
+      33.333333% {
+        stroke-dashoffset: 2141.58;
+      }
+
+      100% {
+        stroke-dashoffset: 2141.58;
+      }
+    }
+
+    #eHMRpL82XFk3 {
+      animation: eHMRpL82XFk3_c_o 3000ms linear infinite normal forwards;
+    }
+
+    @keyframes eHMRpL82XFk3_c_o {
+      0% {
+        opacity: 0;
+      }
+
+      33.333333% {
+        opacity: 0;
+        animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
+      }
+
+      73.333333% {
+        opacity: 1;
+      }
+
+      100% {
+        opacity: 1;
+      }
+    }
+
+    #eHMRpL82XFk10_tr {
+      animation: eHMRpL82XFk10_tr__tr 3000ms linear infinite normal forwards;
+    }
+
+    @keyframes eHMRpL82XFk10_tr__tr {
+      0% {
+        transform: translate(135.33781px, 207.03926px) rotate(720deg);
+        animation-timing-function: cubic-bezier(0.415, 0.08, 0.115, 0.955);
+      }
+
+      100% {
+        transform: translate(135.33781px, 207.03926px) rotate(439.480519deg);
+      }
+    }
+
+    #eHMRpL82XFk11_tr {
+      animation: eHMRpL82XFk11_tr__tr 3000ms linear infinite normal forwards;
+    }
+
+    @keyframes eHMRpL82XFk11_tr__tr {
+      0% {
+        transform: translate(11.12px, 29.9px) rotate(-720deg);
+        animation-timing-function: cubic-bezier(0.415, 0.08, 0.115, 0.955);
+      }
+
+      100% {
+        transform: translate(11.12px, 29.9px) rotate(-439.480519deg);
+      }
+    }
+  </style>
+  <path
+    id="eHMRpL82XFk2"
+    d="M45.8896,122.909c-7.3496-3.448-13.8476-5.167-19.4941-5.157-3.078,0-5.5353.425-7.4437,1.301-1.9084.875-2.8677,1.994-2.8677,3.35c0,1.357,1.026,2.384,3.037,3.24c2.011.855,4.617,1.265,7.6951,1.265c6.115,0,12.4711-1.333,19.0683-3.999h.0051Zm5.4276.071c4.7003,2.399,9.9085,3.669,15.2003,3.705c7.7772,0,14.9267-2.785,21.4487-8.356c9.1417-7.761,15.7748-18.3767,19.8998-31.8469c2.305-7.5551,3.459-14.5602,3.462-21.0152-.02-4.2002-.6-8.3796-1.723-12.431-3.175,3.6665-6.13,7.5131-8.85,11.5199-2.6365,3.9041-6.4207,10.0285-11.3524,18.3731-4.9761,8.4358-9.1417,14.7458-12.4968,18.9301-3.677,4.514-7.8415,8.619-12.4198,12.243-2.6984,2.143-7.088,5.102-13.1688,8.878ZM111.103,51.5833c1.315,4.414,1.994,8.9891,2.016,13.59-.065,7.4184-1.21,14.7891-3.401,21.8858-4.289,14.4049-11.3396,25.6719-21.1516,33.8009-6.1174,5.274-13.9813,8.155-22.1053,8.098-2.6512.025-5.2956-.269-7.8746-.876-2.3496-.577-5.7063-1.786-10.0703-3.629-7.8284,3.148-15.1011,4.724-21.818,4.728-2.8272.064-5.6463-.325-8.3466-1.154-1.3689-.434-2.5854-1.241-3.5089-2.329-.8731-.909-1.3833-2.099-1.4365-3.35c0-2.143,1.1971-3.83,3.5911-5.062c2.394-1.231,5.614-1.866,9.6598-1.903c6.3613,0,13.6545,2.111,21.8797,6.332c5.6424-3.842,10.7329-8.419,15.1336-13.605c2.9446-3.447,5.3455-6.459,7.182-9.1109c1.8366-2.6522,6.5921-9.7535,14.2204-21.3847c5.9509-8.9554,13.7588-18.066,23.4242-27.3319-2.203-5.0614-4.712-8.9419-7.526-11.6414-5.7971-5.6789-13.6033-8.515-23.4188-8.5083-12.9071,0-23.8376,4.3124-32.7912,12.9371-4.3018,4.0733-7.8304,8.8729-10.4191,14.1721-2.2292,4.4289-3.413,9.2983-3.4628,14.243c0,4.7645,1.51,8.6163,4.5299,11.5553c2.8523,2.8142,6.7853,4.2229,11.7991,4.2263c6.9152,0,13.5535-2.6421,19.9148-7.9262c8.6492-7.2244,14.6342-17.425,17.9551-30.6016l1.3594.4302c-1.3133,8.4864-4.1108,15.974-8.3927,22.4628-4.3759,6.5799-9.7779,11.5047-16.2212,14.6782-4.4278,2.241-9.3313,3.4137-14.3076,3.4215-6.4981,0-11.4828-2.1578-14.9541-6.4736-3.078-3.8163-4.5914-8.5083-4.5914-14.0354c0-7.0861,2.0845-14.0169,6.2535-20.7925c4.1094-6.7327,9.9778-12.2517,16.9907-15.979c7.0658-3.7556,14.9318-5.6351,23.5982-5.6385c11.5186,0,20.6176,3.3439,27.2972,10.0318c2.777,2.7737,5.415,6.725,7.915,11.854c5.572-4.8523,10.855-8.6551,15.852-11.4086l.513,1.807c-4.627,2.8648-9.714,7.0337-15.262,12.5068l-.025-.0202Zm20.145-22.4729h10.553v10.7455c0,4.3326-.684,7.2008-2.052,8.6045-1.402,1.4476-3.935,2.281-7.598,2.5003-.581-.1338-1.178-.19-1.775-.167v-4.9147c1.693,0,2.947-.3745,3.761-1.1236.81-.7542,1.19-2.2068,1.138-4.3731h-4.052l.025-11.2719Z"
+    transform="translate(72.3964 71.999878)"
+    opacity="0"
+    fill="none"
+    stroke="#003da5"
+    stroke-linecap="square"
+    stroke-miterlimit="1"
+    stroke-dashoffset="1070.79"
+    stroke-dasharray="1070.79"
+  />
+  <path
+    id="eHMRpL82XFk3"
+    d="M45.8896,122.909c-7.3496-3.448-13.8476-5.167-19.4941-5.157-3.078,0-5.5353.425-7.4437,1.301-1.9084.875-2.8677,1.994-2.8677,3.35c0,1.357,1.026,2.384,3.037,3.24c2.011.855,4.617,1.265,7.6951,1.265c6.115,0,12.4711-1.333,19.0683-3.999h.0051Zm5.4276.071c4.7003,2.399,9.9085,3.669,15.2003,3.705c7.7772,0,14.9267-2.785,21.4487-8.356c9.1417-7.761,15.7748-18.3767,19.8998-31.8469c2.305-7.5551,3.459-14.5602,3.462-21.0152-.02-4.2002-.6-8.3796-1.723-12.431-3.175,3.6665-6.13,7.5131-8.85,11.5199-2.6365,3.9041-6.4207,10.0285-11.3524,18.3731-4.9761,8.4358-9.1417,14.7458-12.4968,18.9301-3.677,4.514-7.8415,8.619-12.4198,12.243-2.6984,2.143-7.088,5.102-13.1688,8.878ZM111.103,51.5833c1.315,4.414,1.994,8.9891,2.016,13.59-.065,7.4184-1.21,14.7891-3.401,21.8858-4.289,14.4049-11.3396,25.6719-21.1516,33.8009-6.1174,5.274-13.9813,8.155-22.1053,8.098-2.6512.025-5.2956-.269-7.8746-.876-2.3496-.577-5.7063-1.786-10.0703-3.629-7.8284,3.148-15.1011,4.724-21.818,4.728-2.8272.064-5.6463-.325-8.3466-1.154-1.3689-.434-2.5854-1.241-3.5089-2.329-.8731-.909-1.3833-2.099-1.4365-3.35c0-2.143,1.1971-3.83,3.5911-5.062c2.394-1.231,5.614-1.866,9.6598-1.903c6.3613,0,13.6545,2.111,21.8797,6.332c5.6424-3.842,10.7329-8.419,15.1336-13.605c2.9446-3.447,5.3455-6.459,7.182-9.1109c1.8366-2.6522,6.5921-9.7535,14.2204-21.3847c5.9509-8.9554,13.7588-18.066,23.4242-27.3319-2.203-5.0614-4.712-8.9419-7.526-11.6414-5.7971-5.6789-13.6033-8.515-23.4188-8.5083-12.9071,0-23.8376,4.3124-32.7912,12.9371-4.3018,4.0733-7.8304,8.8729-10.4191,14.1721-2.2292,4.4289-3.413,9.2983-3.4628,14.243c0,4.7645,1.51,8.6163,4.5299,11.5553c2.8523,2.8142,6.7853,4.2229,11.7991,4.2263c6.9152,0,13.5535-2.6421,19.9148-7.9262c8.6492-7.2244,14.6342-17.425,17.9551-30.6016l1.3594.4302c-1.3133,8.4864-4.1108,15.974-8.3927,22.4628-4.3759,6.5799-9.7779,11.5047-16.2212,14.6782-4.4278,2.241-9.3313,3.4137-14.3076,3.4215-6.4981,0-11.4828-2.1578-14.9541-6.4736-3.078-3.8163-4.5914-8.5083-4.5914-14.0354c0-7.0861,2.0845-14.0169,6.2535-20.7925c4.1094-6.7327,9.9778-12.2517,16.9907-15.979c7.0658-3.7556,14.9318-5.6351,23.5982-5.6385c11.5186,0,20.6176,3.3439,27.2972,10.0318c2.777,2.7737,5.415,6.725,7.915,11.854c5.572-4.8523,10.855-8.6551,15.852-11.4086l.513,1.807c-4.627,2.8648-9.714,7.0337-15.262,12.5068l-.025-.0202Zm20.145-22.4729h10.553v10.7455c0,4.3326-.684,7.2008-2.052,8.6045-1.402,1.4476-3.935,2.281-7.598,2.5003-.581-.1338-1.178-.19-1.775-.167v-4.9147c1.693,0,2.947-.3745,3.761-1.1236.81-.7542,1.19-2.2068,1.138-4.3731h-4.052l.025-11.2719Z"
+    transform="translate(72.3964 71.999878)"
+    opacity="0"
+    fill="#003da5"
+  />
+</svg>
+
+<h4>Aguarde mais um pouco</h4>
+
+<span>Estamos carregando as informações.</span>

package/components/load-screen/load-screen.component.scss

@@ -0,0 +1,46 @@
+@use '../../styles/_breakpoints.scss' as breakpoints;
+
+:host {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+  height: 100%;
+  background: var(--neutral-pale, #e9e9e9);
+
+  svg {
+    width: 108px;
+    height: auto;
+    margin-bottom: 22px;
+  }
+
+  h4 {
+    color: var(--color-one-base, #004186);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 19px;
+    letter-spacing: 0.28px;
+
+    @media only screen and (min-width: breakpoints.$breakpoint-small) {
+      font-size: 16px;
+      line-height: 23px;
+      letter-spacing: 0.32px;
+    }
+  }
+
+  span {
+    color: var(--neutral-dark, #6e6e6e);
+    font-size: 10px;
+    font-weight: 500;
+    line-height: 13px;
+    letter-spacing: 0.6px;
+
+    @media only screen and (min-width: breakpoints.$breakpoint-small) {
+      font-size: 12px;
+      line-height: 16px;
+      letter-spacing: 0.72px;
+    }
+  }
+}

package/components/load-screen/load-screen.component.spec.ts

@@ -0,0 +1,27 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { LoadScreenComponent } from './load-screen.component';
+
+describe('LoadScreenComponent', () => {
+  let component: LoadScreenComponent;
+  let fixture: ComponentFixture<LoadScreenComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [LoadScreenComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoadScreenComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/components/load-screen/load-screen.component.ts

@@ -0,0 +1,18 @@
+import { Component, HostBinding, inject } from '@angular/core';
+import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+
+@Component({
+  selector: 'rdsite-load-screen',
+   
+  templateUrl: './load-screen.component.html',
+  styleUrls: ['./load-screen.component.scss'],
+})
+export class LoadScreenComponent {
+  private curaApiService = inject(CuraApiService);
+
+  @HostBinding('style') styleBinding = {
+    '--neutral-pale': this.curaApiService.theme.colors.getColor('neutral-pale'),
+    '--neutral-dark': this.curaApiService.theme.colors.getColor('neutral-dark'),
+    '--color-one-base': this.curaApiService.theme.colors.getColor('primary-base'),
+  };
+}

package/components/load-screen/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

package/components/load-screen/public-api.ts

@@ -0,0 +1 @@
+export * from './load-screen.component';

package/components/modal/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/components/modal/modal.component.html

@@ -0,0 +1,12 @@
+@if (modalContent) {
+  <div class="rdsite-modal-container">
+    <div class="rdsite-modal-content" (click)="$event.stopPropagation()">
+      <a class="close-button" (click)="close()">
+        <svg width="24" height="24" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
+          <use [attr.xlink:href]="assetsPath() + '/icons/iconset-default.svg#close'"></use>
+        </svg>
+      </a>
+      <ng-container *ngTemplateOutlet="modalContent; context: modalContentContext"></ng-container>
+    </div>
+  </div>
+}

package/components/modal/modal.component.scss

@@ -0,0 +1,34 @@
+:host {
+  width: 100vw;
+  height: 100vh;
+  margin: auto;
+  background-color: transparent;
+
+  &::backdrop {
+    background: var(--backdrop-color, rgba(0, 47, 108, 0.9));
+  }
+
+  .rdsite-modal-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rdsite-modal-content {
+    position: relative;
+
+    .close-button {
+      position: absolute;
+      top: 7px;
+      right: 7px;
+      cursor: pointer;
+      svg {
+        stroke: var(--close-color, rgba(235, 87, 87, 1));
+        stroke-width: 2px;
+        fill: none;
+      }
+    }
+  }
+}

package/components/modal/modal.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModalComponent } from './modal.component';
+
+describe('ModalComponent', () => {
+  let component: ModalComponent;
+  let fixture: ComponentFixture<ModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ModalComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/components/modal/modal.component.ts

@@ -0,0 +1,74 @@
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { Component, HostBinding, PLATFORM_ID, DOCUMENT, inject, HostListener, TemplateRef, ChangeDetectorRef, computed } from '@angular/core';
+import { AbstractModalComponent, ModalService } from '@rededor/site-front-end-lib/core';
+import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+
+@Component({
+  selector: 'dialog[rdsite-modal]#rdsite-modal',
+  imports: [CommonModule],
+  templateUrl: './modal.component.html',
+  styleUrl: './modal.component.scss',
+})
+export class ModalComponent implements AbstractModalComponent {
+  private readonly curaApiService = inject(CuraApiService);
+  private readonly modalService = inject(ModalService);
+  private readonly platformId = inject(PLATFORM_ID);
+  private readonly document = inject(DOCUMENT);
+  private readonly cdr = inject(ChangeDetectorRef);
+
+  // Controlado pelo ModalService
+  modalContent: TemplateRef<any> | null = null;
+  modalContentContext: Record<string, any> | null = null;
+
+  modal!: HTMLDialogElement;
+
+  @HostListener('document:keydown.escape')
+  closeModalOnEscape() {
+    if (this.modal.open) {
+      this.close();
+    }
+  }
+
+  @HostListener('click')
+  closeModalOnClick() {
+    if (this.modal.open) {
+      this.close();
+    }
+  }
+
+  @HostBinding('style') styleBinding = {
+    '--backdrop-color': this.curaApiService.theme.colors.getColor('primary-base', 0.9),
+    '--close-color': this.curaApiService.theme.colors.getColor('error-base'),
+  };
+
+  public assetsPath = computed(() => this.curaApiService.localAssetsPath());
+
+  ngOnInit() {
+    this.modal = this.document.getElementById('rdsite-modal') as HTMLDialogElement;
+  }
+
+  // Controlado pelo ModalService
+  public open() {
+    if (isPlatformBrowser(this.platformId)) {
+      const body = this.document.querySelector('body');
+      if (body) {
+        body.style.overflowY = 'hidden';
+        this.cdr.detectChanges();
+        this.modal.showModal();
+      }
+    }
+  }
+
+  // Controlado pelo proprio componente e pelo ModalService
+  public close() {
+    if (isPlatformBrowser(this.platformId)) {
+      const body = this.document.querySelector('body');
+      if (body) {
+        body.style.overflowY = 'auto';
+        this.modalContent = null;
+        this.modalContentContext = null;
+        this.modal.close();
+      }
+    }
+  }
+}

package/components/modal/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

package/components/modal/public-api.ts

@@ -0,0 +1 @@
+export * from './modal.component';

package/components/modal-drawer/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/components/modal-drawer/modal-drawer.component.html

@@ -0,0 +1,22 @@
+<div id="sheet" class="sheet" aria-hidden="true" data-testid="__modal-drawer-sheet">
+  <div class="overlay" data-testid="__modal-drawer-overlay"></div>
+  <div class="contents" data-testid="__modal-drawer-contents">
+    <div class="controls" data-testid="__modal-drawer-controls">
+      <div class="draggable-area" data-testid="__modal-drawer-draggable-area">
+        <div class="draggable-thumb" data-testid="__modal-drawer-draggable-thumb"></div>
+      </div>
+      <a class="close-sheet" type="button" title="Close the sheet" (click)="closeSheet()">
+        <svg width="32" height="32" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
+          <use [attr.xlink:href]="assetsPath() + '/icons/iconset-default.svg#close'"></use>
+        </svg>
+      </a>
+    </div>
+    <div class="body" data-testid="__modal-drawer-body">
+      @if (modalContent()) {
+        <ng-container>
+          <ng-container *ngTemplateOutlet="modalContent()"></ng-container>
+        </ng-container>
+      }
+    </div>
+  </div>
+</div>

package/components/modal-drawer/modal-drawer.component.scss

@@ -0,0 +1,250 @@
+:host {
+  .sheet {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999;
+    visibility: visible;
+    transition:
+      opacity 0.5s,
+      visibility 0.5s;
+
+    .overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: -1;
+      background: var(--primary-dark);
+    }
+
+    .contents {
+      display: flex;
+      flex-direction: column;
+      border-radius: 1rem 1rem 0 0;
+      background: #fff;
+      overflow-y: hidden;
+      --default-transitions: transform 0.8s, border-radius 0.8s;
+      transition: var(--default-transitions);
+      transform: translateY(0);
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    .contents:not(.not-selectable) {
+      transition:
+        var(--default-transitions),
+        height 0.8s;
+    }
+
+    .controls {
+      display: flex;
+      position: relative;
+    }
+
+    .draggable-area {
+      position: absolute;
+      top: 0;
+      width: 100%;
+      height: 80px;
+      cursor: grab;
+      background-color: #fff;
+    }
+
+    .draggable-thumb {
+      position: absolute;
+      z-index: 2;
+      left: 50%;
+      translate: -50%;
+      top: 16px;
+      width: 58px;
+      height: 8px;
+      background-color: #e9e9e9;
+      border-radius: 8px;
+    }
+
+    .close-sheet {
+      position: absolute;
+      top: 5px;
+      right: 5px;
+
+      &:hover {
+        rdsl-icon {
+          stroke: var(--secondary-base);
+        }
+        rdsl-icon ::ng-deep {
+          cura-icon {
+            --color: var(--secondary-base) !important;
+          }
+        }
+      }
+    }
+
+    .body {
+      flex-grow: 1;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      padding: 1rem;
+      box-sizing: border-box;
+    }
+  }
+
+  .sheet[aria-hidden='true'] .contents {
+    transform: translateY(100%);
+  }
+
+  .sheet[aria-hidden='true'] {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  &.doctor-card {
+    .draggable-area {
+      background-color: #ccd9e7;
+      .draggable-thumb {
+        background-color: #85a0bc;
+        border-radius: 8px;
+      }
+    }
+
+    .close-sheet {
+      display: none;
+    }
+
+    .img,
+    .icon {
+      position: absolute;
+      z-index: 2;
+      left: 50%;
+      translate: -50%;
+      top: 32px;
+      width: 84px;
+      height: 84px;
+      border-radius: 65px;
+      border: 2px solid var(--primary-base);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .img {
+      background-position: 50%;
+      background-size: cover;
+    }
+
+    .icon {
+      background-color: #d7f3ff;
+      rdsl-icon {
+        width: 97%;
+        height: auto;
+      }
+
+      rdsl-icon {
+        stroke: var(--primary-base);
+        stroke-width: 3px;
+      }
+      rdsl-icon ::ng-deep {
+        cura-icon {
+          --color: var(--primary-base) !important;
+        }
+      }
+    }
+
+    p {
+      text-align: left;
+      padding-bottom: 8px;
+    }
+    .info {
+      padding-top: 120px;
+      p {
+        color: #4f4f4f;
+        font-size: 18px;
+        font-weight: 500;
+        line-height: 28px;
+      }
+      .description {
+        p:first-of-type {
+          color: #828282;
+          font-size: 12px;
+          font-weight: 400;
+          line-height: 125%;
+        }
+        p:nth-of-type(2) {
+          color: var(--primary-base);
+          font-size: 12px;
+          font-weight: 400;
+          line-height: 125%;
+        }
+      }
+      .curriculo {
+        padding-top: 20px;
+        overflow-y: auto;
+        max-height: 40vh;
+        li {
+          list-style: none;
+          display: flex;
+          gap: 10px;
+          text-align: left;
+          margin-bottom: 12px;
+          font-size: 14px;
+          line-height: 125%;
+          color: #4a4a4a;
+        }
+        li::before {
+          content: '';
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background-color: var(--secondary-base);
+          display: block;
+          flex-shrink: 0;
+          margin-top: 5px;
+        }
+      }
+    }
+    .schedule {
+      padding-top: 24px;
+      .rdsl-button-small {
+        width: 100%;
+        height: 38px;
+      }
+    }
+  }
+
+  &.form-fallback {
+    .sheet {
+      .contents {
+        height: 40vh;
+        width: 90%;
+
+        .controls {
+          display: none;
+        }
+      }
+    }
+  }
+
+  &.filter-doencas {
+    .sheet .contents {
+      width: 90%;
+      border: 2px solid #d4d4d4;
+      .controls {
+        display: none;
+      }
+
+      .close-sheet {
+        display: none;
+      }
+    }
+  }
+}

package/components/modal-drawer/modal-drawer.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModalDrawerComponent } from './modal-drawer.component';
+
+describe('ModalDrawerComponent', () => {
+  let component: ModalDrawerComponent;
+  let fixture: ComponentFixture<ModalDrawerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ModalDrawerComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ModalDrawerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});