d7b9291dfd fix(module: *): create image using document method to av…

…oid ReferenceError in SSR (#6569)
NG-ZORRO · Apr 14, 2021 · 011764a · 011764a
1 parent 79e2617
commit 011764a
Show file tree

Hide file tree

Showing 589 changed files with 7,848 additions and 6,226 deletions.
diff --git a/auto-complete/autocomplete-trigger.directive.d.ts b/auto-complete/autocomplete-trigger.directive.d.ts
@@ -3,15 +3,15 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 import { Overlay } from '@angular/cdk/overlay';
-import { ElementRef, ExistingProvider, OnDestroy, ViewContainerRef } from '@angular/core';
+import { AfterViewInit, ElementRef, ExistingProvider, OnDestroy, ViewContainerRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { NzSafeAny, OnChangeType, OnTouchedType } from 'ng-zorro-antd/core/types';
 import { NzInputGroupWhitSuffixOrPrefixDirective } from 'ng-zorro-antd/input';
 import { NzAutocompleteOptionComponent } from './autocomplete-option.component';
 import { NzAutocompleteComponent } from './autocomplete.component';
 export declare const NZ_AUTOCOMPLETE_VALUE_ACCESSOR: ExistingProvider;
 export declare function getNzAutocompleteMissingPanelError(): Error;
-export declare class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnDestroy {
+export declare class NzAutocompleteTriggerDirective implements AfterViewInit, ControlValueAccessor, OnDestroy {
     private elementRef;
     private overlay;
     private viewContainerRef;
@@ -33,6 +33,7 @@ export declare class NzAutocompleteTriggerDirective implements ControlValueAcces
     private optionsChangeSubscription;
     private overlayOutsideClickSubscription;
     constructor(elementRef: ElementRef, overlay: Overlay, viewContainerRef: ViewContainerRef, nzInputGroupWhitSuffixOrPrefixDirective: NzInputGroupWhitSuffixOrPrefixDirective, document: NzSafeAny);
+    ngAfterViewInit(): void;
     ngOnDestroy(): void;
     writeValue(value: NzSafeAny): void;
     registerOnChange(fn: (value: {}) => {}): void;

diff --git a/auto-complete/autocomplete.component.d.ts b/auto-complete/autocomplete.component.d.ts
@@ -2,6 +2,7 @@
  * 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 { AnimationEvent } from '@angular/animations';
 import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, QueryList, TemplateRef } from '@angular/core';
 import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
 import { BooleanInput, CompareWith, NzSafeAny } from 'ng-zorro-antd/core/types';
@@ -35,6 +36,7 @@ export declare class NzAutocompleteComponent implements AfterContentInit, AfterV
     activeItem: NzAutocompleteOptionComponent;
     dir: Direction;
     private destroy$;
+    animationStateChange: EventEmitter<AnimationEvent>;
     /**
      * Options accessor, its source may be content or dataSource
      */
@@ -56,6 +58,7 @@ export declare class NzAutocompleteComponent implements AfterContentInit, AfterV
     readonly optionMouseEnter: Observable<NzAutocompleteOptionComponent>;
     constructor(changeDetectorRef: ChangeDetectorRef, ngZone: NgZone, directionality: Directionality, noAnimation?: NzNoAnimationDirective | undefined);
     ngOnInit(): void;
+    onAnimationEvent(event: AnimationEvent): void;
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;

diff --git a/auto-complete/ng-zorro-antd-auto-complete.metadata.json b/auto-complete/ng-zorro-antd-auto-complete.metadata.json
diff --git a/auto-complete/style/index.css b/auto-complete/style/index.css
@@ -145,6 +145,7 @@
 }
 .ant-select-selection-overflow-item {
   flex: none;
+  align-self: center;
   max-width: 100%;
 }
 .ant-select-multiple .ant-select-selector {
@@ -179,17 +180,17 @@
   max-width: 100%;
   height: 24px;
   margin-top: 2px;
-  margin-inline-end: 4px;
   margin-bottom: 2px;
-  padding-inline-start: 8px;
-  padding-inline-end: 4px;
   line-height: 22px;
   background: #f5f5f5;
   border: 1px solid #f0f0f0;
   border-radius: 2px;
   cursor: default;
   transition: font-size 0.3s, line-height 0.3s, height 0.3s;
   user-select: none;
+  margin-inline-end: 4px;
+  padding-inline-start: 8px;
+  padding-inline-end: 4px;
 }
 .ant-select-disabled.ant-select-multiple .ant-select-selection-item {
   color: #bfbfbf;
@@ -283,8 +284,8 @@
   line-height: 30px;
 }
 .ant-select-multiple.ant-select-lg .ant-select-selection-search {
-  height: 33px;
-  line-height: 33px;
+  height: 32px;
+  line-height: 32px;
 }
 .ant-select-multiple.ant-select-lg .ant-select-selection-search-input,
 .ant-select-multiple.ant-select-lg .ant-select-selection-search-mirror {
@@ -299,8 +300,8 @@
   line-height: 14px;
 }
 .ant-select-multiple.ant-select-sm .ant-select-selection-search {
-  height: 17px;
-  line-height: 17px;
+  height: 16px;
+  line-height: 16px;
 }
 .ant-select-multiple.ant-select-sm .ant-select-selection-search-input,
 .ant-select-multiple.ant-select-sm .ant-select-selection-search-mirror {
@@ -310,8 +311,8 @@
 .ant-select-multiple.ant-select-sm .ant-select-selection-placeholder {
   left: 7px;
 }
-.ant-select-multiple.ant-select-sm .ant-select-selection-search:first-child .ant-select-selection-search-input {
-  margin-left: 3px;
+.ant-select-multiple.ant-select-sm .ant-select-selection-search {
+  margin-inline-start: 3px;
 }
 .ant-select-multiple.ant-select-lg .ant-select-selection-item {
   height: 32px;
@@ -366,6 +367,9 @@
   background: #f5f5f5;
   cursor: not-allowed;
 }
+.ant-select-multiple.ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector {
+  background: #f5f5f5;
+}
 .ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector input {
   cursor: not-allowed;
 }
@@ -635,10 +639,6 @@
   right: 0;
   left: auto;
 }
-.ant-select-rtl.ant-select-multiple .ant-select-selection-search:first-child > .ant-select-selection-search-input {
-  margin-right: 5px !important;
-  margin-left: 0 !important;
-}
 .ant-select-rtl.ant-select-multiple .ant-select-selection-placeholder {
   right: 11px;
   left: auto;
@@ -661,11 +661,8 @@
   padding-right: 0;
   padding-left: 18px;
 }
-.ant-select-rtl.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
-  padding: 0 11px;
-}
 .ant-select-rtl.ant-select-single.ant-select-sm:not(.ant-select-customize-input).ant-select-show-arrow .ant-select-selection-search {
-  right: 0;
+  right: 6px;
 }
 .ant-select-rtl.ant-select-single.ant-select-sm:not(.ant-select-customize-input).ant-select-show-arrow .ant-select-selection-item,
 .ant-select-rtl.ant-select-single.ant-select-sm:not(.ant-select-customize-input).ant-select-show-arrow .ant-select-selection-placeholder {
@@ -707,8 +704,8 @@
   height: 35px;
 }
 .ant-empty-img-default-ellipse {
-  fill-opacity: 0.8;
   fill: #f5f5f5;
+  fill-opacity: 0.8;
 }
 .ant-empty-img-default-path-1 {
   fill: #aeb8c2;
@@ -854,16 +851,16 @@ textarea.ant-input-affix-wrapper {
 .ant-input-affix-wrapper-rtl {
   direction: rtl;
 }
-.ant-input-affix-wrapper:hover {
+.ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
   border-color: #40a9ff;
   border-right-width: 1px !important;
   z-index: 1;
 }
-.ant-input-rtl .ant-input-affix-wrapper:hover {
+.ant-input-rtl .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
   border-right-width: 0;
   border-left-width: 1px !important;
 }
-.ant-input-search-with-button .ant-input-affix-wrapper:hover {
+.ant-input-search-with-button .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
   z-index: 0;
 }
 .ant-input-affix-wrapper-focused,
@@ -1349,10 +1346,11 @@ textarea.ant-input {
   padding-bottom: 3px;
 }
 .ant-input-textarea-show-count::after {
-  display: block;
+  float: right;
   color: rgba(0, 0, 0, 0.45);
-  text-align: right;
+  white-space: nowrap;
   content: attr(data-count);
+  pointer-events: none;
 }
 .ant-input-search .ant-input:hover,
 .ant-input-search .ant-input:focus {

diff --git a/auto-complete/style/index.min.css b/auto-complete/style/index.min.css
diff --git a/badge/style/index.css b/badge/style/index.css
@@ -167,6 +167,10 @@
 .ant-badge-not-a-wrapper:not(.ant-badge-status) {
   vertical-align: middle;
 }
+.ant-badge-not-a-wrapper .ant-scroll-number-custom-component {
+  transform: none;
+}
+.ant-badge-not-a-wrapper .ant-scroll-number-custom-component,
 .ant-badge-not-a-wrapper .ant-scroll-number {
   position: relative;
   top: auto;
@@ -190,13 +194,18 @@
   overflow: hidden;
 }
 .ant-scroll-number-only {
+  position: relative;
   display: inline-block;
   height: 20px;
   transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  -webkit-transform-style: preserve-3d;
+  -webkit-backface-visibility: hidden;
 }
 .ant-scroll-number-only > p.ant-scroll-number-only-unit {
   height: 20px;
   margin: 0;
+  -webkit-transform-style: preserve-3d;
+  -webkit-backface-visibility: hidden;
 }
 .ant-scroll-number-symbol {
   vertical-align: top;

diff --git a/badge/style/index.less b/badge/style/index.less
@@ -148,6 +148,11 @@
       vertical-align: middle;
     }
 
+    .@{number-prefix-cls}-custom-component {
+      transform: none;
+    }
+
+    .@{number-prefix-cls}-custom-component,
     .@{ant-prefix}-scroll-number {
       position: relative;
       top: auto;
@@ -172,15 +177,25 @@
   }
 }
 
+// Safari will blink with transform when inner element has absolute style.
+.safari-fix-motion() {
+  -webkit-transform-style: preserve-3d;
+  -webkit-backface-visibility: hidden;
+}
+
 .@{number-prefix-cls} {
   overflow: hidden;
   &-only {
+    position: relative;
     display: inline-block;
     height: @badge-height;
     transition: all @animation-duration-slow @ease-in-out;
+    .safari-fix-motion;
+
     > p.@{number-prefix-cls}-only-unit {
       height: @badge-height;
       margin: 0;
+      .safari-fix-motion;
     }
   }