fix(datagrid): set expandable rows overflow hidden only during animat…

…ion (backport to 15.x) (#1289)

Backport 66395d0 from #1288. <br> ## PR
Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

&lt;!-- Please check the one that applies to this PR using
&quot;x&quot;. --&gt;

- [x] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?
In expandable row in datagrid overflow is set to hidden in occupancies.

&lt;!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. --&gt;

Issue Number: CDE-1692

## What is the new behavior?
In expandable row in datagrid overflow is set to hidden only during
animation.

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

&lt;!-- If this PR contains a breaking change, please describe the
impact and migration path for existing applications below. --&gt;

## Other information

Co-authored-by: Valentin Mladenov <[email protected]>

.storybook/stories/datagrid/datagrid-expandable-row.stories.ts

@@ -45,7 +45,26 @@ const defaultStory: Story = args => ({
       (clrDgExpandedChange)="index === 0 && clrDgExpandedChange($event)"
       (clrDgSelectedChange)="index === 0 && clrDgSelectedChange($event)"
     >
-      <clr-dg-cell>{{element.name}}</clr-dg-cell>
+      <clr-dg-cell>
+        <a
+          href="javascript:void(0)"
+          role="tooltip"
+          aria-haspopup="true"
+          class="tooltip tooltip-lg tooltip-bottom-right"
+        >
+          <cds-icon
+            shape="exclamation-circle"
+            solid
+          ></cds-icon>
+          <span class="tooltip-content"
+            >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in
+            neque in ante placerat mattis id sed quam. Proin rhoncus lacus et
+            tempor dignissim. Vivamus sem quam, pellentesque aliquet suscipit
+            eget, pellentesque sed arcu. Vivamus in dui lectus.</span
+          >
+        </a>
+        {{ element.name }}
+      </clr-dg-cell>
       <clr-dg-cell>{{element.symbol}}</clr-dg-cell>
       <clr-dg-cell>{{element.number}}</clr-dg-cell>
       <clr-dg-cell>

projects/angular/clarity.api.md

@@ -2209,10 +2209,12 @@ export class ClrEmphasisModule {
 // @public (undocumented)
 export class ClrExpandableAnimation {
     // Warning: (ae-forgotten-export) The symbol "DomAdapter" needs to be exported by the entry point index.d.ts
-    constructor(element: ElementRef, domAdapter: DomAdapter);
+    constructor(element: ElementRef, domAdapter: DomAdapter, renderer: Renderer2);
     // (undocumented)
     animationDone(): void;
     // (undocumented)
+    animationStart(): void;
+    // (undocumented)
     clrExpandTrigger: any;
     // (undocumented)
     get expandAnimation(): {

projects/angular/src/utils/animations/expandable-animation/expandable-animation.ts

@@ -5,7 +5,7 @@
  */
 
 import { animate, style, transition, trigger } from '@angular/animations';
-import { Component, ElementRef, HostBinding, HostListener, Input } from '@angular/core';
+import { Component, ElementRef, HostBinding, HostListener, Input, Renderer2 } from '@angular/core';
 
 import { DomAdapter } from '../../dom-adapter/dom-adapter';
 
@@ -16,7 +16,6 @@ import { DomAdapter } from '../../dom-adapter/dom-adapter';
     `
       :host {
         display: block;
-        overflow: hidden;
       }
     `,
   ],
@@ -35,15 +34,21 @@ export class ClrExpandableAnimation {
 
   startHeight = 0;
 
-  constructor(private element: ElementRef, private domAdapter: DomAdapter) {}
+  constructor(private element: ElementRef, private domAdapter: DomAdapter, private renderer: Renderer2) {}
 
   @HostBinding('@expandAnimation')
   get expandAnimation() {
     return { value: this.clrExpandTrigger, params: { startHeight: this.startHeight } };
   }
 
+  @HostListener('@expandAnimation.start')
+  animationStart() {
+    this.renderer.setStyle(this.element.nativeElement, 'overflow', 'hidden');
+  }
   @HostListener('@expandAnimation.done')
   animationDone() {
+    this.renderer.removeStyle(this.element.nativeElement, 'overflow');
+
     // A "safe" auto-update of the height ensuring basic OOTB user experience .
     // Prone to small jumps in initial animation height if data was changed in the meantime, window was resized, etc.
     // For optimal behavior call manually updateStartHeight() from the parent component before initiating the update.