feat(breadcrumb): implementa definições do AnimaliaDS

Implementa definições do AnimaliaDS no Breadcrumb

fixes DTHFUI-7558

Author: jcorrea97

projects/ui/src/lib/components/po-breadcrumb/po-breadcrumb-base.component.spec.ts

@@ -8,8 +8,8 @@ describe('PoDisclaimerBaseComponent:', () => {
 
   const items: Array<PoBreadcrumbItem> = [
     { label: 'Teste nível 1', link: '/test/nivel/1' },
-    { label: 'Teste nível 2', link: '/test/nivel/2' },
-    { label: 'Teste nível 3', link: '/test/nivel/3' },
+    { label: 'Teste nível 2', link: '/test/nivel/2', action: () => {} },
+    { label: 'Teste nível 3', action: () => {} },
     { label: 'Teste nível 4', link: '/test/nivel/4' }
   ];
 
@@ -30,4 +30,22 @@ describe('PoDisclaimerBaseComponent:', () => {
       expect(component.itemsView).toEqual(itemsEmpty);
     });
   });
+
+  describe('Methods:', () => {
+    it('transformToArrayPopup: should remove first, penultimate and last item .', () => {
+      component['transformToArrayPopup'](items);
+      expect(component.itemsViewPopup.length).toEqual(1);
+    });
+
+    it('transformArrayToActionPopUp: should edit property to `link` to `url` and remove action if exists `link`', () => {
+      const newItem = component['transformArrayToActionPopUp'](items);
+      const expectedOutputItems = [
+        { label: 'Teste nível 1', url: '/test/nivel/1' },
+        { label: 'Teste nível 2', url: '/test/nivel/2' },
+        { label: 'Teste nível 3', action: jasmine.any(Function) },
+        { label: 'Teste nível 4', url: '/test/nivel/4' }
+      ];
+      expect(newItem).toEqual(expectedOutputItems);
+    });
+  });
 });

projects/ui/src/lib/components/po-breadcrumb/po-breadcrumb-base.component.ts

@@ -92,6 +92,7 @@ export class PoBreadcrumbBaseComponent {
   @Input('p-params-service') paramsService?: object;
 
   itemsView: Array<PoBreadcrumbItem> = [];
+  itemsViewPopup: Array<any> = [];
 
   protected clickoutListener: () => void;
   protected resizeListener: () => void;
@@ -111,9 +112,33 @@ export class PoBreadcrumbBaseComponent {
   @Input('p-items') set items(items: Array<PoBreadcrumbItem>) {
     this._items = items;
     this.itemsView = [].concat(items);
+    if (this.itemsView.length >= 4) {
+      this.transformToArrayPopup(items);
+    }
   }
 
   get items() {
     return this._items;
   }
+
+  private transformToArrayPopup(items: Array<PoBreadcrumbItem>) {
+    const itemsCopy = items.map(obj => ({ ...obj }));
+    itemsCopy.shift();
+    itemsCopy.splice(-2, 1);
+    itemsCopy.pop();
+    this.itemsViewPopup = this.transformArrayToActionPopUp(itemsCopy);
+  }
+
+  private transformArrayToActionPopUp(items: Array<PoBreadcrumbItem>) {
+    return items.map(obj => {
+      if (obj.hasOwnProperty('link')) {
+        obj['url'] = obj.link;
+        delete obj.link;
+        if (obj.hasOwnProperty('action')) {
+          delete obj.action;
+        }
+      }
+      return obj;
+    });
+  }
 }

projects/ui/src/lib/components/po-breadcrumb/po-breadcrumb-dropdown/po-breadcrumb-dropdown.component.html

@@ -1,10 +1,20 @@
-<div class="po-breadcrumb-favorite po-clickable" (click)="toggleFavoriteAction()">
+<div
+  tabindex="0"
+  role="button"
+  class="po-breadcrumb-favorite po-clickable"
+  (click)="toggleFavoriteAction()"
+  (keyup.enter)="toggleFavoriteAction()"
+>
   <span
     class="po-icon po-icon-star po-breadcrumb-favorite-star po-clickable"
     [class.po-breadcrumb-favorite-star-active]="favorite"
   >
   </span>
 
-  <span class="po-hidden-sm po-breadcrumb-favorite-label" *ngIf="favorite">{{ literals?.unfavorite }}</span>
-  <span class="po-hidden-sm po-breadcrumb-favorite-label" *ngIf="!favorite">{{ literals?.favorite }}</span>
+  <span class="po-hidden-sm po-breadcrumb-favorite-label" *ngIf="favorite && !hiddenLiteral">{{
+    literals?.unfavorite
+  }}</span>
+  <span class="po-hidden-sm po-breadcrumb-favorite-label" *ngIf="!favorite && !hiddenLiteral">{{
+    literals?.favorite
+  }}</span>
 </div>

projects/ui/src/lib/components/po-breadcrumb/po-breadcrumb-dropdown/po-breadcrumb-dropdown.component.spec.ts

@@ -48,6 +48,9 @@ export class PoBreadcrumbFavoriteComponent implements OnInit, OnDestroy {
   // Parâmetro que será enviado junto com o serviço de favoritar.
   @Input('p-params-service') paramsService: object;
 
+  // Esconde literal e mantém apenas icone
+  @Input('p-hidden-literal') hiddenLiteral: boolean = false;
+
   favorite: boolean = false;
   literals;