Merge branch 'v3.x' into dropdown-context-ios

projects/core/components/expand/expand.component.ts

@@ -9,11 +9,14 @@ import {
     HostListener,
     Inject,
     Input,
+    Self,
     TemplateRef,
     ViewChild,
 } from '@angular/core';
-import {TUI_PARENT_ANIMATION, TuiValuesOf} from '@taiga-ui/cdk';
+import {TUI_PARENT_ANIMATION, TuiDestroyService, TuiValuesOf} from '@taiga-ui/cdk';
 import {TUI_EXPAND_LOADED} from '@taiga-ui/core/constants';
+import {Observable, timer} from 'rxjs';
+import {takeUntil} from 'rxjs/operators';
 
 import {TuiExpandContentDirective} from './expand-content.directive';
 
@@ -31,6 +34,7 @@ const LOADER_HEIGHT = 48;
     templateUrl: './expand.template.html',
     styleUrls: ['./expand.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [TuiDestroyService],
     animations: [TUI_PARENT_ANIMATION],
 })
 export class TuiExpandComponent {
@@ -68,7 +72,10 @@ export class TuiExpandComponent {
     @HostBinding('attr.aria-expanded')
     expanded: boolean | null = null;
 
-    constructor(@Inject(ChangeDetectorRef) private readonly cdr: ChangeDetectorRef) {}
+    constructor(
+        @Inject(ChangeDetectorRef) private readonly cdr: ChangeDetectorRef,
+        @Self() @Inject(TuiDestroyService) private readonly destroy$: Observable<void>,
+    ) {}
 
     @HostBinding('class._overflow')
     get overflow(): boolean {
@@ -129,14 +136,16 @@ export class TuiExpandComponent {
     private retrigger(state: TuiValuesOf<typeof State>): void {
         this.state = State.Prepared;
 
-        // We need delay to re-trigger CSS height transition from the correct number
-        setTimeout(() => {
-            if (this.state !== State.Prepared) {
-                return;
-            }
-
-            this.state = state;
-            this.cdr.markForCheck();
-        });
+        timer(0)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+                // We need delay to re-trigger CSS height transition from the correct number
+                if (this.state !== State.Prepared) {
+                    return;
+                }
+
+                this.state = state;
+                this.cdr.markForCheck();
+            });
     }
 }

projects/core/directives/dropdown/dropdown.component.ts

@@ -99,7 +99,7 @@ export class TuiDropdownComponent {
     private update(top: number, left: number): void {
         const {style} = this.el.nativeElement;
         const {right} = this.el.nativeElement.getBoundingClientRect();
-        const {maxHeight, offset} = this.options;
+        const {maxHeight, minHeight, offset} = this.options;
         const {innerHeight} = this.win;
         const clientRect = this.el.nativeElement.offsetParent?.getBoundingClientRect();
         const {position} = this.directive;
@@ -116,10 +116,14 @@ export class TuiDropdownComponent {
             ? rect.top - 2 * offset
             : offsetY + innerHeight - top - offset;
 
+        const sided = right <= rect.left || left >= rect.right;
+
         style.position = position;
         style.top = tuiPx(Math.max(top, offsetY + offset));
         style.left = tuiPx(left);
-        style.maxHeight = tuiPx(Math.min(maxHeight, available));
+        style.maxHeight = sided
+            ? `min(100%, ${maxHeight}px)`
+            : tuiPx(Math.min(maxHeight, Math.max(available, minHeight)));
         style.width = '';
         style.minWidth = '';
 

projects/demo/src/modules/experimental/swipe-action/examples/4/index.html

@@ -15,12 +15,7 @@
     </div>
 
     <button
-        iconLeft="tuiIconEye"
-        size="m"
-        tuiIconButton
-        tuiSwipeAction
-    ></button>
-    <button
+        *ngIf="editButton"
         iconLeft="tuiIconEdit3"
         size="m"
         tuiIconButton
@@ -44,3 +39,11 @@
     />
     Share button
 </label>
+<label>
+    <input
+        tuiCheckbox
+        type="checkbox"
+        [(ngModel)]="editButton"
+    />
+    Edit button
+</label>

projects/demo/src/modules/experimental/swipe-action/examples/4/index.less

@@ -15,6 +15,7 @@ button[tuiSwipeAction] {
 label {
     display: flex;
     align-items: center;
+    margin-top: 0.5rem;
 }
 
 input[type='checkbox'] {

projects/demo/src/modules/experimental/swipe-action/examples/4/index.ts

@@ -11,4 +11,5 @@ import {encapsulation} from '@demo/emulate/encapsulation';
 })
 export class TuiSwipeActionExample4 {
     shareButton = false;
+    editButton = true;
 }

projects/experimental/components/swipe-action/swipe-actions.style.less

@@ -30,6 +30,10 @@
     align-items: center;
     transform-style: preserve-3d;
 
+    &:empty {
+        display: none;
+    }
+
     ::ng-deep & > * {
         .loop(6);
     }