chore: sync ant-design v4.22.8 (#8479)

* chore: sync ant-design v4.22.8 --------- Co-authored-by: ng-zorro-bot <ng-zorro-bot@users.noreply.github.com> Co-authored-by: hyperlife1119 <hyperlife1119@qq.com>
NG-ZORRO · Apr 6, 2024 · d2917e6 · d2917e6
1 parent 0f6c11c
commit d2917e6
Show file tree

Hide file tree

Showing 35 changed files with 403 additions and 269 deletions.
diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less
@@ -14,39 +14,6 @@
     padding-left: 4px;
     overflow: auto;
     background-color: @anchor-bg;
-
-    &-horizontal {
-      margin-left: unset;
-      padding-left: unset;
-      margin-bottom: -4px;
-      padding-bottom: 4px;
-
-      .ant-anchor {
-        display: flex;
-
-        &-ink {
-          top: unset;
-          bottom: 0;
-          width: 100%;
-          height: unset;
-
-          &:before {
-            width: 100%;
-            height: 2px;
-          }
-
-          &-ball {
-            transform: translate(-50%, -50%);
-          }
-        }
-
-        &-link {
-          &:first-of-type {
-            padding-inline: 0;
-          }
-        }
-      }
-    }
   }
 
   &-ink {

diff --git a/components/anchor/style/patch.less b/components/anchor/style/patch.less
@@ -1,3 +1,43 @@
+@import '../../style/themes/index';
+
 nz-link {
   display: block;
 }
+
+.@{ant-prefix}-anchor {
+  &-wrapper {
+    // This is a feature of Antd 5, so we need add in the patch file.
+    &-horizontal {
+      margin-left: unset;
+      padding-left: unset;
+      margin-bottom: -4px;
+      padding-bottom: 4px;
+
+      .ant-anchor {
+        display: flex;
+
+        &-ink {
+          top: unset;
+          bottom: 0;
+          width: 100%;
+          height: unset;
+
+          &:before {
+            width: 100%;
+            height: 2px;
+          }
+
+          &-ball {
+            transform: translate(-50%, -50%);
+          }
+        }
+
+        &-link {
+          &:first-of-type {
+            padding-inline: 0;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/components/checkbox/style/mixin.less b/components/checkbox/style/mixin.less
@@ -26,7 +26,7 @@
       width: 100%;
       height: 100%;
       border: 1px solid @checkbox-color;
-      border-radius: @border-radius-base;
+      border-radius: @checkbox-border-radius;
       visibility: hidden;
       animation: antCheckboxEffect 0.36s ease-in-out;
       animation-fill-mode: backwards;

diff --git a/components/collapse/collapse-panel.component.ts b/components/collapse/collapse-panel.component.ts
@@ -56,7 +56,9 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'collapsePanel';
           </ng-container>
         </div>
       }
-      <ng-container *nzStringTemplateOutlet="nzHeader">{{ nzHeader }}</ng-container>
+      <span class="ant-collapse-header-text">
+        <ng-container *nzStringTemplateOutlet="nzHeader">{{ nzHeader }}</ng-container>
+      </span>
       @if (nzExtra) {
         <div class="ant-collapse-extra">
           <ng-container *nzStringTemplateOutlet="nzExtra">{{ nzExtra }}</ng-container>

diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less
@@ -43,6 +43,10 @@
         }
       }
 
+      .@{collapse-prefix-cls}-header-text {
+        flex: auto;
+      }
+
       .@{collapse-prefix-cls}-extra {
         margin-left: auto;
       }
@@ -55,6 +59,7 @@
     .@{collapse-prefix-cls}-header-collapsible-only {
       cursor: default;
       .@{collapse-prefix-cls}-header-text {
+        flex: none;
         cursor: pointer;
       }
     }

diff --git a/components/core/animation/drawer.ts b/components/core/animation/drawer.ts
@@ -0,0 +1,13 @@
+/**
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+import { AnimationTriggerMetadata, animate, style, transition, trigger } from '@angular/animations';
+
+import { AnimationDuration } from './animation-consts';
+
+export const drawerMaskMotion: AnimationTriggerMetadata = trigger('drawerMaskMotion', [
+  transition(':enter', [style({ opacity: 0 }), animate(`${AnimationDuration.SLOW}`, style({ opacity: 1 }))]),
+  transition(':leave', [style({ opacity: 1 }), animate(`${AnimationDuration.SLOW}`, style({ opacity: 0 }))])
+]);
diff --git a/components/core/animation/help.ts → components/core/animation/form.ts b/components/core/animation/help.ts → components/core/animation/form.ts
diff --git a/components/core/animation/public-api.ts b/components/core/animation/public-api.ts
@@ -5,10 +5,11 @@
 
 export * from './animation-consts';
 export * from './collapse';
+export * from './drawer';
 export * from './fade';
-export * from './help';
+export * from './form';
 export * from './move';
 export * from './notification';
 export * from './slide';
-export * from './zoom';
 export * from './thumb';
+export * from './zoom';
diff --git a/components/date-picker/style/status.less b/components/date-picker/style/status.less
@@ -20,7 +20,7 @@
     &:focus {
       .active(@text-color, @hoverBorderColor, @outlineColor);
     }
-    
+
     .@{picker-prefix-cls}-active-bar {
       background: @hoverBorderColor;
     }

diff --git a/components/drawer/drawer.component.ts b/components/drawer/drawer.component.ts
@@ -35,6 +35,7 @@ import {
 import { Observable, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
+import { drawerMaskMotion } from 'ng-zorro-antd/core/animation';
 import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
 import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
 import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
@@ -77,8 +78,8 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'drawer';
         [style.transition]="placementChanging ? 'none' : null"
         [style.zIndex]="nzZIndex"
       >
-        @if (nzMask) {
-          <div class="ant-drawer-mask" (click)="maskClick()" [ngStyle]="nzMaskStyle"></div>
+        @if (nzMask && isOpen) {
+          <div @drawerMaskMotion class="ant-drawer-mask" (click)="maskClick()" [ngStyle]="nzMaskStyle"></div>
         }
         <div
           class="ant-drawer-content-wrapper {{ nzWrapClassName }}"
@@ -144,6 +145,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'drawer';
   `,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [drawerMaskMotion],
   imports: [NzNoAnimationDirective, NgStyle, NzOutletModule, NzIconModule, PortalModule, NgTemplateOutlet],
   standalone: true
 })