feat(loading-overlay): implementações AnimaliaDS

po-ui · Nov 14, 2023 · dee3db4 · dee3db4
1 parent 5698533
commit dee3db4
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 10 deletions.
diff --git a/...cts/ui/src/lib/components/po-loading/po-loading-overlay/po-loading-overlay.component.html b/...cts/ui/src/lib/components/po-loading/po-loading-overlay/po-loading-overlay.component.html
@@ -1,3 +1,3 @@
-<div [class.po-overlay-absolute]="!screenLock" [class.po-overlay-fixed]="screenLock">
-  <po-loading class="po-loading-overlay-content" [p-text]="text"></po-loading>
-</div>
+<po-overlay [p-screen-lock]="screenLock">
+  <po-loading [p-text]="text"></po-loading>
+</po-overlay>
diff --git a/.../ui/src/lib/components/po-loading/po-loading-overlay/po-loading-overlay.component.spec.ts b/.../ui/src/lib/components/po-loading/po-loading-overlay/po-loading-overlay.component.spec.ts
@@ -32,21 +32,18 @@ describe('PoLoadingOverlayComponent', () => {
       component.screenLock = true;
       fixture.detectChanges();
       expect(nativeElement.querySelector('.po-overlay-fixed')).toBeTruthy();
-      expect(nativeElement.querySelector('.po-overlay-overlay-absolute')).toBeFalsy();
     });
 
     it('should set class `po-loading-absolute` when p-screen-locked is true', () => {
       component.screenLock = false;
       fixture.detectChanges();
       expect(nativeElement.querySelector('.po-overlay-fixed')).toBeFalsy();
-      expect(nativeElement.querySelector('.po-overlay-absolute')).toBeTruthy();
     });
 
     it('should set class `po-loading-overlay-absolute` when p-screen-locked is not defined', () => {
       component.screenLock = undefined;
       fixture.detectChanges();
       expect(nativeElement.querySelector('.po-overlay-fixed')).toBeFalsy();
-      expect(nativeElement.querySelector('.po-overlay-absolute')).toBeTruthy();
     });
   });
 });
diff --git a/projects/ui/src/lib/components/po-loading/po-loading.component.html b/projects/ui/src/lib/components/po-loading/po-loading.component.html
@@ -1,4 +1,11 @@
 <div class="po-loading">
   <po-loading-icon></po-loading-icon>
-  <span class="po-loading-label po-text-ellipsis" *ngIf="text">{{ text }}</span>
+  <ng-template [ngIf]="text">
+    <span class="po-loading-label po-text-ellipsis"
+      >{{ text }}
+      <div class="po-loading-dot" aria-hidden="true">.</div>
+      <div class="po-loading-dot" aria-hidden="true">.</div>
+      <div class="po-loading-dot" aria-hidden="true">.</div>
+    </span>
+  </ng-template>
 </div>
diff --git a/projects/ui/src/lib/components/po-loading/po-loading.component.spec.ts b/projects/ui/src/lib/components/po-loading/po-loading.component.spec.ts
@@ -33,7 +33,9 @@ describe('PoLoadingComponent', () => {
     component.text = expectedContent;
     fixture.detectChanges();
 
-    const contentComponent = nativeElement.querySelector('.po-loading-label').innerHTML;
+    const contentComponent = nativeElement
+      .querySelector('.po-loading-label')
+      .innerHTML.substr(0, expectedContent.length);
 
     expect(contentComponent).toBe(expectedContent);
   });

diff --git a/projects/ui/src/lib/components/po-loading/po-loading.module.ts b/projects/ui/src/lib/components/po-loading/po-loading.module.ts
@@ -6,6 +6,7 @@ import { PoLanguageModule } from './../../services/po-language/po-language.modul
 import { PoLoadingComponent } from './po-loading.component';
 import { PoLoadingIconComponent } from './po-loading-icon/po-loading-icon.component';
 import { PoLoadingOverlayComponent } from './po-loading-overlay/po-loading-overlay.component';
+import { PoOverlayModule } from '../po-overlay/po-overlay.module';
 
 /**
  *
@@ -14,8 +15,8 @@ import { PoLoadingOverlayComponent } from './po-loading-overlay/po-loading-overl
  * Módulo do componente po-loading-overlay.
  */
 @NgModule({
-  imports: [CommonModule, PoLanguageModule],
   declarations: [PoLoadingComponent, PoLoadingIconComponent, PoLoadingOverlayComponent],
-  exports: [PoLoadingComponent, PoLoadingIconComponent, PoLoadingOverlayComponent]
+  exports: [PoLoadingComponent, PoLoadingIconComponent, PoLoadingOverlayComponent],
+  imports: [CommonModule, PoLanguageModule, PoOverlayModule]
 })
 export class PoLoadingModule {}