feat(issueProvider): add ani to issue list

src/app/features/issue-panel/issue-panel-calendar-agenda/issue-panel-calendar-agenda.component.html

@@ -14,7 +14,10 @@
   @for (day of agendaItems(); track day.dayStr) {
   <div class="agenda-day">
     <h4>{{ day.dayStr|date:'shortDate' }}</h4>
-    <div class="item-list">
+    <div
+      class="item-list"
+      [@standardList]="day.itemsForDay.length"
+    >
       @for (item of day.itemsForDay; track item.issueData.id) {
       <issue-preview-item
         [issueProviderId]="issueProvider().id"

src/app/features/issue-panel/issue-panel-calendar-agenda/issue-panel-calendar-agenda.component.ts

@@ -19,6 +19,7 @@ import { ICalIssueReduced } from '../../issue/providers/calendar/calendar.model'
 import { getErrorTxt } from 'src/app/util/get-error-text';
 import { getWorklogStr } from '../../../util/get-work-log-str';
 import { DatePipe } from '@angular/common';
+import { standardListAnimation } from '../../../ui/animations/standard-list.ani';
 
 @Component({
   selector: 'issue-panel-calendar-agenda',
@@ -27,6 +28,7 @@ import { DatePipe } from '@angular/common';
   templateUrl: './issue-panel-calendar-agenda.component.html',
   styleUrl: './issue-panel-calendar-agenda.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [standardListAnimation],
 })
 export class IssuePanelCalendarAgendaComponent implements OnInit {
   readonly T: typeof T = T;

src/app/features/issue-panel/issue-provider-tab/issue-provider-tab.component.html

@@ -107,10 +107,13 @@
 } @else if (!issueItems()?.length && searchText()?.length > 0) {
 <div class="empty">No items found (already added are not shown)</div>
 } @else {
-<div class="item-list">
+<div
+  class="item-list"
+  [@standardList]="issueItems()?.length"
+>
   <!--  (cdkDropListDropped)="drop($event)"-->
 
-  @for (item of issueItems(); track $index) {
+  @for (item of issueItems(); track item.issueData.id) {
   <!--    <div style="display: flex; align-items: center">-->
   <!--      <button-->
   <!--        mat-icon-button-->

src/app/features/issue-panel/issue-provider-tab/issue-provider-tab.component.ts

@@ -45,6 +45,7 @@ import { IS_MOUSE_PRIMARY } from '../../../util/is-mouse-primary';
 import { getIssueProviderHelpLink } from '../../issue/mapping-helper/get-issue-provider-help-link';
 import { ISSUE_PROVIDER_HUMANIZED } from '../../issue/issue.const';
 import { IssuePanelCalendarAgendaComponent } from '../issue-panel-calendar-agenda/issue-panel-calendar-agenda.component';
+import { standardListAnimation } from '../../../ui/animations/standard-list.ani';
 
 @Component({
   selector: 'issue-provider-tab',
@@ -63,6 +64,7 @@ import { IssuePanelCalendarAgendaComponent } from '../issue-panel-calendar-agend
   templateUrl: './issue-provider-tab.component.html',
   styleUrl: './issue-provider-tab.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [standardListAnimation],
 })
 export class IssueProviderTabComponent implements OnDestroy, AfterViewInit {
   readonly HelperClasses = HelperClasses;

src/app/features/tasks/task-list/task-list-ani.ts

@@ -1,44 +1,8 @@
-import {
-  animate,
-  keyframes,
-  query,
-  stagger,
-  style,
-  transition,
-  trigger,
-} from '@angular/animations';
-import { ANI_FAST_TIMING } from '../../../ui/animations/animation.const';
-
-const ANI = [
-  query(':enter', style({ opacity: 0, height: 0 }), { optional: true }),
-
-  query(
-    ':enter',
-    stagger('40ms', [
-      animate(
-        ANI_FAST_TIMING,
-        keyframes([
-          style({ opacity: 0, height: 0, transform: 'scale(0)', offset: 0 }),
-          style({ opacity: 1, height: '*', transform: 'scale(1)', offset: 0.99 }),
-          style({ height: 'auto', offset: 1.0 }),
-        ]),
-      ),
-    ]),
-    { optional: true },
-  ),
-
-  query(
-    ':leave',
-    stagger('-40ms', [
-      style({ transform: 'scale(1)', opacity: 1, height: '*' }),
-      animate(ANI_FAST_TIMING, style({ transform: 'scale(0)', height: 0 })),
-    ]),
-    { optional: true },
-  ),
-];
+import { transition, trigger } from '@angular/animations';
+import { STANDARD_LIST_ANI } from '../../../ui/animations/standard-list.ani';
 
 export const taskListAnimation = trigger('taskList', [
-  transition(':increment, :decrement', ANI),
-  transition('* <=> ALWAYS', ANI),
+  transition(':increment, :decrement', STANDARD_LIST_ANI),
+  transition('* <=> ALWAYS', STANDARD_LIST_ANI),
   transition('* <=> BLOCK', []),
 ]);

src/app/ui/animations/standard-list.ani.ts

@@ -9,7 +9,7 @@ import {
 } from '@angular/animations';
 import { ANI_FAST_TIMING } from './animation.const';
 
-const ANI = [
+export const STANDARD_LIST_ANI = [
   query(':enter', style({ opacity: 0, height: 0 }), { optional: true }),
 
   query(
@@ -38,5 +38,5 @@ const ANI = [
 ];
 
 export const standardListAnimation = trigger('standardList', [
-  transition(':increment, :decrement', ANI),
+  transition(':increment, :decrement', STANDARD_LIST_ANI),
 ]);