feat(module:collapse): support nzExtra (#3177)

* feat(module:collapse): support extra

* docs: add extra demo

Author: Wendell

components/collapse/demo/extra.md

@@ -0,0 +1,14 @@
+---
+order: 5
+title:
+  zh-CN: 额外节点
+  en-US: Extra Node
+---
+
+## zh-CN
+
+你可以通过 `nzExtra` 来指定面板右上角的额外内容。
+
+## en-US
+
+You can use `nzExtra` to put extra elements in the top right corner.

components/collapse/demo/extra.ts

@@ -0,0 +1,44 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-collapse-extra',
+  template: `
+    <nz-collapse>
+      <nz-collapse-panel
+        *ngFor="let panel of panels"
+        [nzHeader]="panel.name"
+        [nzActive]="panel.active"
+        [nzExtra]="extraTpl"
+        [nzDisabled]="panel.disabled"
+      >
+        <p style="margin:0;">
+          A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome
+          guest in many households across the world.
+        </p>
+      </nz-collapse-panel>
+    </nz-collapse>
+    <ng-template #extraTpl>
+      <i nz-icon nzType="setting"></i>
+    </ng-template>
+  `,
+  styles: []
+})
+export class NzDemoCollapseExtraComponent {
+  panels = [
+    {
+      active: true,
+      name: 'This is panel header 1',
+      disabled: false
+    },
+    {
+      active: false,
+      disabled: false,
+      name: 'This is panel header 2'
+    },
+    {
+      active: false,
+      disabled: true,
+      name: 'This is panel header 3'
+    }
+  ];
+}

components/collapse/doc/index.en-US.md

@@ -27,7 +27,8 @@ A content area which can be collapsed and expanded.
 | -------- | ----------- | ---- | ------- |
 | `[nzDisabled]` | If `true`, panel cannot be opened or closed | `boolean` | `false` |
 | `[nzHeader]` | Title of the panel | `string｜TemplateRef<void>` | - |
+| `[nzExpandedIcon]` | Customize an icon for toggle | `string｜TemplateRef<void>` | - |
+| `[nzExtra]` | Extra element in the corner | `string｜TemplateRef<void>` | - |
 | `[nzShowArrow]` | Display arrow or not | `boolean` | `true` |
 | `[nzActive]` | Active status of panel, double binding | `boolean` | - |
 | `(nzActiveChange)` | Callback function of the active status | `EventEmitter<boolean>` | - |
-| `[nzExpandedIcon]` | Customize an icon for toggle | `string｜TemplateRef<void>` | - |

components/collapse/doc/index.zh-CN.md

@@ -28,7 +28,8 @@ cols: 1
 | --- | --- | --- | --- |
 | `[nzDisabled]` | 禁用后的面板展开与否将无法通过用户交互改变 | `boolean` | `false` |
 | `[nzHeader]` | 面板头内容 | `string｜TemplateRef<void>` | - |
+| `[nzExpandedIcon]` | 自定义切换图标 | `string｜TemplateRef<void>` | - |
+| `[nzExtra]` | 自定义渲染每个面板右上角的内容 | `string｜TemplateRef<void>` | - |
 | `[nzShowArrow]` | 是否展示箭头 | `boolean` | `true` |
 | `[nzActive]` | 面板是否展开，可双向绑定 | `boolean` | - |
 | `(nzActiveChange)` | 面板展开回调 | `EventEmitter<boolean>` | - |
-| `[nzExpandedIcon]` | 自定义切换图标 | `string｜TemplateRef<void>` | - |

components/collapse/nz-collapse-panel.component.html

@@ -5,6 +5,9 @@
     </ng-container>
   </ng-container>
   <ng-container *nzStringTemplateOutlet="nzHeader">{{ nzHeader }}</ng-container>
+  <div class="ant-collapse-extra" *ngIf="nzExtra">
+    <ng-container *nzStringTemplateOutlet="nzExtra">{{ nzExtra }}</ng-container>
+  </div>
 </div>
 <div class="ant-collapse-content"
   [class.ant-collapse-content-active]="nzActive"

components/collapse/nz-collapse-panel.component.ts

@@ -40,6 +40,7 @@ export class NzCollapsePanelComponent implements OnInit, OnDestroy {
   @Input() @InputBoolean() @HostBinding('class.ant-collapse-item-active') nzActive = false;
   @Input() @InputBoolean() @HostBinding('class.ant-collapse-item-disabled') nzDisabled = false;
   @Input() @InputBoolean() nzShowArrow = true;
+  @Input() nzExtra: string | TemplateRef<void>;
   @Input() nzHeader: string | TemplateRef<void>;
   @Input() nzExpandedIcon: string | TemplateRef<void>;
   @Output() readonly nzActiveChange = new EventEmitter<boolean>();

components/collapse/nz-collapse.spec.ts

@@ -129,6 +129,16 @@ describe('collapse', () => {
       fixture.detectChanges();
       expect(panels[0].nativeElement.querySelector('.ant-collapse-header').innerText).toBe('string');
     });
+    it('should extra work', () => {
+      fixture.detectChanges();
+      expect(panels[0].nativeElement.querySelector('.ant-collapse-extra')).toBeFalsy();
+
+      testComponent.showExtra = 'Extra';
+      fixture.detectChanges();
+      const extraEl = panels[0].nativeElement.querySelector('.ant-collapse-extra');
+      expect(extraEl!).not.toBeFalsy();
+      expect(extraEl!.innerText).toBe('Extra');
+    });
   });
   describe('collapse template', () => {
     let fixture: ComponentFixture<NzTestCollapseTemplateComponent>;
@@ -171,6 +181,7 @@ describe('collapse', () => {
         (nzActiveChange)="active01Change($event)"
         [nzHeader]="header"
         [nzShowArrow]="showArrow"
+        [nzExtra]="showExtra"
       >
         <p>Panel01</p>
       </nz-collapse-panel>
@@ -188,7 +199,7 @@ export class NzTestCollapseBasicComponent {
   active01 = false;
   active02 = false;
   showArrow = true;
-  // showExtra = '';
+  showExtra = '';
   header = 'string';
   active01Change = jasmine.createSpy('active01 callback');
   active02Change = jasmine.createSpy('active02 callback');

components/collapse/style/index.less

@@ -44,6 +44,10 @@
         }
       }
 
+      .@{collapse-prefix-cls}-extra {
+        float: right;
+      }
+
       &:focus {
         outline: none;
       }

components/style/themes/default.less

@@ -526,7 +526,7 @@
 
 // Collapse
 // ---
-@collapse-header-padding: 12px 0 12px 40px;
+@collapse-header-padding: 12px 16px 12px 40px;
 @collapse-header-bg: @background-color-light;
 @collapse-content-padding: @padding-md;
 @collapse-content-bg: @component-background;

scripts/site/_site/doc/theme.less

@@ -494,7 +494,7 @@
 
 // Collapse
 // ---
-@collapse-header-padding: 12px 0 12px 40px;
+@collapse-header-padding: 12px 16px 12px 40px;
 @collapse-header-bg: @background-color-light;
 @collapse-content-padding: @padding-md;
 @collapse-content-bg: @component-background;