ng-zorro-antd-float-button.mjs 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627
  1. import * as i0 from '@angular/core';
  2. import { Input, ChangeDetectionStrategy, Component, EventEmitter, Output, inject, numberAttribute, ViewChild, ViewEncapsulation, ContentChildren, NgModule } from '@angular/core';
  3. import { takeUntil, debounceTime } from 'rxjs/operators';
  4. import * as i3 from 'ng-zorro-antd/button';
  5. import { NzButtonModule } from 'ng-zorro-antd/button';
  6. import * as i2 from 'ng-zorro-antd/core/services';
  7. import { NzDestroyService } from 'ng-zorro-antd/core/services';
  8. import { NgTemplateOutlet, DOCUMENT } from '@angular/common';
  9. import { NzStringTemplateOutletDirective } from 'ng-zorro-antd/core/outlet';
  10. import * as i1 from 'ng-zorro-antd/icon';
  11. import { NzIconModule } from 'ng-zorro-antd/icon';
  12. import * as i2$1 from '@angular/cdk/bidi';
  13. import * as i4 from 'ng-zorro-antd/core/transition-patch';
  14. import * as i5 from 'ng-zorro-antd/core/wave';
  15. import { fadeMotion } from 'ng-zorro-antd/core/animation';
  16. import { __esDecorate, __runInitializers } from 'tslib';
  17. import * as i3$1 from '@angular/cdk/platform';
  18. import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
  19. import { Subject, Subscription } from 'rxjs';
  20. import * as i1$1 from 'ng-zorro-antd/core/config';
  21. import { WithConfig } from 'ng-zorro-antd/core/config';
  22. import { fromEventOutsideAngular } from 'ng-zorro-antd/core/util';
  23. /**
  24. * Use of this source code is governed by an MIT-style license that can be
  25. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  26. */
  27. class NzFloatButtonContentComponent {
  28. nzIcon = null;
  29. nzDescription = null;
  30. nzShape = 'circle';
  31. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzFloatButtonContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
  32. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzFloatButtonContentComponent, isStandalone: true, selector: "nz-float-button-content", inputs: { nzIcon: "nzIcon", nzDescription: "nzDescription", nzShape: "nzShape" }, exportAs: ["nzFloatButtonContent"], ngImport: i0, template: `
  33. <div class="ant-float-btn-body">
  34. <div class="ant-float-btn-content">
  35. @if (nzDescription || nzIcon) {
  36. @if (nzIcon) {
  37. <div class="ant-float-btn-icon">
  38. <ng-template [ngTemplateOutlet]="nzIcon"></ng-template>
  39. </div>
  40. }
  41. @if (nzDescription && nzShape === 'square') {
  42. <div class="ant-float-btn-description">
  43. <ng-container *nzStringTemplateOutlet="nzDescription">
  44. {{ nzDescription }}
  45. </ng-container>
  46. </div>
  47. }
  48. } @else {
  49. <div class="ant-float-btn-icon">
  50. <nz-icon nzType="file-text" nzTheme="outline" />
  51. </div>
  52. }
  53. </div>
  54. </div>
  55. `, isInline: true, dependencies: [{ kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
  56. }
  57. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzFloatButtonContentComponent, decorators: [{
  58. type: Component,
  59. args: [{
  60. selector: 'nz-float-button-content',
  61. exportAs: 'nzFloatButtonContent',
  62. imports: [NzIconModule, NgTemplateOutlet, NzStringTemplateOutletDirective],
  63. changeDetection: ChangeDetectionStrategy.OnPush,
  64. template: `
  65. <div class="ant-float-btn-body">
  66. <div class="ant-float-btn-content">
  67. @if (nzDescription || nzIcon) {
  68. @if (nzIcon) {
  69. <div class="ant-float-btn-icon">
  70. <ng-template [ngTemplateOutlet]="nzIcon"></ng-template>
  71. </div>
  72. }
  73. @if (nzDescription && nzShape === 'square') {
  74. <div class="ant-float-btn-description">
  75. <ng-container *nzStringTemplateOutlet="nzDescription">
  76. {{ nzDescription }}
  77. </ng-container>
  78. </div>
  79. }
  80. } @else {
  81. <div class="ant-float-btn-icon">
  82. <nz-icon nzType="file-text" nzTheme="outline" />
  83. </div>
  84. }
  85. </div>
  86. </div>
  87. `
  88. }]
  89. }], propDecorators: { nzIcon: [{
  90. type: Input
  91. }], nzDescription: [{
  92. type: Input
  93. }], nzShape: [{
  94. type: Input
  95. }] } });
  96. class NzFloatButtonComponent {
  97. destroy$;
  98. directionality;
  99. cdr;
  100. nzHref = null;
  101. nzTarget = null;
  102. nzType = 'default';
  103. nzShape = 'circle';
  104. nzIcon = null;
  105. nzDescription = null;
  106. nzOnClick = new EventEmitter();
  107. dir = 'ltr';
  108. constructor(destroy$, directionality, cdr) {
  109. this.destroy$ = destroy$;
  110. this.directionality = directionality;
  111. this.cdr = cdr;
  112. this.dir = this.directionality.value;
  113. }
  114. ngOnInit() {
  115. this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction) => {
  116. this.dir = direction;
  117. this.cdr.detectChanges();
  118. });
  119. this.dir = this.directionality.value;
  120. }
  121. ngOnDestroy() {
  122. this.destroy$.next();
  123. this.destroy$.complete();
  124. }
  125. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzFloatButtonComponent, deps: [{ token: i2.NzDestroyService }, { token: i2$1.Directionality }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
  126. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzFloatButtonComponent, isStandalone: true, selector: "nz-float-button", inputs: { nzHref: "nzHref", nzTarget: "nzTarget", nzType: "nzType", nzShape: "nzShape", nzIcon: "nzIcon", nzDescription: "nzDescription" }, outputs: { nzOnClick: "nzOnClick" }, host: { properties: { "class.ant-float-btn-circle": "nzShape === 'circle'", "class.ant-float-btn-square": "nzShape === 'square'", "class.ant-float-btn-rtl": "dir === 'rtl'" }, classAttribute: "ant-float-btn" }, providers: [NzDestroyService], exportAs: ["nzFloatButton"], ngImport: i0, template: `
  127. @if (!!nzHref) {
  128. <a
  129. [target]="nzTarget"
  130. [href]="nzHref"
  131. nz-button
  132. [nzType]="nzType"
  133. [class.ant-float-btn-default]="nzType === 'default'"
  134. class="ant-float-btn-inner"
  135. (click)="nzOnClick.emit(true)"
  136. >
  137. <nz-float-button-content
  138. [nzIcon]="nzIcon"
  139. [nzDescription]="nzDescription"
  140. [nzShape]="nzShape"
  141. ></nz-float-button-content>
  142. </a>
  143. } @else {
  144. <button
  145. nz-button
  146. [nzType]="nzType"
  147. [class.ant-float-btn-default]="nzType === 'default'"
  148. class="ant-float-btn-inner"
  149. (click)="nzOnClick.emit(true)"
  150. >
  151. <nz-float-button-content
  152. [nzIcon]="nzIcon"
  153. [nzDescription]="nzDescription"
  154. [nzShape]="nzShape"
  155. ></nz-float-button-content>
  156. </button>
  157. }
  158. `, isInline: true, dependencies: [{ kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i3.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i4.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i5.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "component", type: NzFloatButtonContentComponent, selector: "nz-float-button-content", inputs: ["nzIcon", "nzDescription", "nzShape"], exportAs: ["nzFloatButtonContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
  159. }
  160. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzFloatButtonComponent, decorators: [{
  161. type: Component,
  162. args: [{
  163. selector: 'nz-float-button',
  164. exportAs: 'nzFloatButton',
  165. imports: [NzButtonModule, NzFloatButtonContentComponent],
  166. changeDetection: ChangeDetectionStrategy.OnPush,
  167. template: `
  168. @if (!!nzHref) {
  169. <a
  170. [target]="nzTarget"
  171. [href]="nzHref"
  172. nz-button
  173. [nzType]="nzType"
  174. [class.ant-float-btn-default]="nzType === 'default'"
  175. class="ant-float-btn-inner"
  176. (click)="nzOnClick.emit(true)"
  177. >
  178. <nz-float-button-content
  179. [nzIcon]="nzIcon"
  180. [nzDescription]="nzDescription"
  181. [nzShape]="nzShape"
  182. ></nz-float-button-content>
  183. </a>
  184. } @else {
  185. <button
  186. nz-button
  187. [nzType]="nzType"
  188. [class.ant-float-btn-default]="nzType === 'default'"
  189. class="ant-float-btn-inner"
  190. (click)="nzOnClick.emit(true)"
  191. >
  192. <nz-float-button-content
  193. [nzIcon]="nzIcon"
  194. [nzDescription]="nzDescription"
  195. [nzShape]="nzShape"
  196. ></nz-float-button-content>
  197. </button>
  198. }
  199. `,
  200. host: {
  201. class: 'ant-float-btn',
  202. '[class.ant-float-btn-circle]': `nzShape === 'circle'`,
  203. '[class.ant-float-btn-square]': `nzShape === 'square'`,
  204. '[class.ant-float-btn-rtl]': `dir === 'rtl'`
  205. },
  206. providers: [NzDestroyService]
  207. }]
  208. }], ctorParameters: () => [{ type: i2.NzDestroyService }, { type: i2$1.Directionality }, { type: i0.ChangeDetectorRef }], propDecorators: { nzHref: [{
  209. type: Input
  210. }], nzTarget: [{
  211. type: Input
  212. }], nzType: [{
  213. type: Input
  214. }], nzShape: [{
  215. type: Input
  216. }], nzIcon: [{
  217. type: Input
  218. }], nzDescription: [{
  219. type: Input
  220. }], nzOnClick: [{
  221. type: Output
  222. }] } });
  223. const NZ_CONFIG_MODULE_NAME = 'backTop';
  224. const passiveEventListenerOptions = normalizePassiveListenerOptions({ passive: true });
  225. let NzFloatButtonTopComponent = (() => {
  226. let _nzVisibilityHeight_decorators;
  227. let _nzVisibilityHeight_initializers = [];
  228. let _nzVisibilityHeight_extraInitializers = [];
  229. return class NzFloatButtonTopComponent {
  230. static {
  231. const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
  232. _nzVisibilityHeight_decorators = [WithConfig()];
  233. __esDecorate(null, null, _nzVisibilityHeight_decorators, { kind: "field", name: "nzVisibilityHeight", static: false, private: false, access: { has: obj => "nzVisibilityHeight" in obj, get: obj => obj.nzVisibilityHeight, set: (obj, value) => { obj.nzVisibilityHeight = value; } }, metadata: _metadata }, _nzVisibilityHeight_initializers, _nzVisibilityHeight_extraInitializers);
  234. if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
  235. }
  236. nzConfigService;
  237. scrollSrv;
  238. platform;
  239. ngZone;
  240. cdr;
  241. destroy$;
  242. directionality;
  243. _nzModuleName = NZ_CONFIG_MODULE_NAME;
  244. scrollListenerDestroy$ = new Subject();
  245. target = null;
  246. visible = false;
  247. dir = 'ltr';
  248. nzHref = null;
  249. nzType = 'default';
  250. nzShape = 'circle';
  251. nzIcon = null;
  252. nzDescription = null;
  253. nzTemplate;
  254. nzVisibilityHeight = __runInitializers(this, _nzVisibilityHeight_initializers, 400);
  255. nzTarget = __runInitializers(this, _nzVisibilityHeight_extraInitializers);
  256. nzDuration = 450;
  257. nzOnClick = new EventEmitter();
  258. set backTop(backTop) {
  259. if (backTop) {
  260. this.backTopClickSubscription.unsubscribe();
  261. this.backTopClickSubscription = fromEventOutsideAngular(backTop.nativeElement, 'click')
  262. .pipe(takeUntil(this.destroy$))
  263. .subscribe(() => {
  264. this.scrollSrv.scrollTo(this.getTarget(), 0, { duration: this.nzDuration });
  265. if (this.nzOnClick.observers.length) {
  266. this.ngZone.run(() => this.nzOnClick.emit(true));
  267. }
  268. });
  269. }
  270. }
  271. doc = inject(DOCUMENT);
  272. backTopClickSubscription = Subscription.EMPTY;
  273. constructor(nzConfigService, scrollSrv, platform, ngZone, cdr, destroy$, directionality) {
  274. this.nzConfigService = nzConfigService;
  275. this.scrollSrv = scrollSrv;
  276. this.platform = platform;
  277. this.ngZone = ngZone;
  278. this.cdr = cdr;
  279. this.destroy$ = destroy$;
  280. this.directionality = directionality;
  281. this.dir = this.directionality.value;
  282. }
  283. ngOnInit() {
  284. this.registerScrollEvent();
  285. this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction) => {
  286. this.dir = direction;
  287. this.cdr.detectChanges();
  288. });
  289. this.dir = this.directionality.value;
  290. }
  291. getTarget() {
  292. return this.target || window;
  293. }
  294. handleScroll() {
  295. if (this.visible === this.scrollSrv.getScroll(this.getTarget()) > this.nzVisibilityHeight) {
  296. return;
  297. }
  298. this.visible = !this.visible;
  299. this.cdr.detectChanges();
  300. }
  301. registerScrollEvent() {
  302. if (!this.platform.isBrowser) {
  303. return;
  304. }
  305. this.scrollListenerDestroy$.next();
  306. this.handleScroll();
  307. fromEventOutsideAngular(this.getTarget(), 'scroll', passiveEventListenerOptions)
  308. .pipe(debounceTime(50), takeUntil(this.scrollListenerDestroy$))
  309. .subscribe(() => this.handleScroll());
  310. }
  311. ngOnDestroy() {
  312. this.scrollListenerDestroy$.next();
  313. this.scrollListenerDestroy$.complete();
  314. }
  315. detectChanges() {
  316. this.cdr.detectChanges();
  317. }
  318. ngOnChanges(changes) {
  319. const { nzTarget } = changes;
  320. if (nzTarget) {
  321. this.target = typeof this.nzTarget === 'string' ? this.doc.querySelector(this.nzTarget) : this.nzTarget;
  322. this.registerScrollEvent();
  323. }
  324. }
  325. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzFloatButtonTopComponent, deps: [{ token: i1$1.NzConfigService }, { token: i2.NzScrollService }, { token: i3$1.Platform }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i2.NzDestroyService }, { token: i2$1.Directionality }], target: i0.ɵɵFactoryTarget.Component });
  326. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.2", type: NzFloatButtonTopComponent, isStandalone: true, selector: "nz-float-button-top", inputs: { nzHref: "nzHref", nzType: "nzType", nzShape: "nzShape", nzIcon: "nzIcon", nzDescription: "nzDescription", nzTemplate: "nzTemplate", nzVisibilityHeight: ["nzVisibilityHeight", "nzVisibilityHeight", numberAttribute], nzTarget: "nzTarget", nzDuration: ["nzDuration", "nzDuration", numberAttribute] }, outputs: { nzOnClick: "nzOnClick" }, host: { properties: { "class.ant-float-btn-circle": "nzShape === 'circle'", "class.ant-float-btn-hidden": "!visible", "class.ant-float-btn-square": "nzShape === 'square'", "class.ant-float-btn-rtl": "dir === 'rtl'" }, classAttribute: "ant-float-btn ant-float-btn-top" }, providers: [NzDestroyService], viewQueries: [{ propertyName: "backTop", first: true, predicate: ["backTop"], descendants: true }], exportAs: ["nzFloatButtonTop"], usesOnChanges: true, ngImport: i0, template: `
  327. <div #backTop @fadeMotion>
  328. <nz-float-button
  329. [nzIcon]="nzIcon || top"
  330. [nzDescription]="nzDescription"
  331. [nzHref]="nzHref"
  332. [nzType]="nzType"
  333. [nzShape]="nzShape"
  334. ></nz-float-button>
  335. <ng-template #top>
  336. <nz-icon nzType="vertical-align-top" nzTheme="outline" />
  337. </ng-template>
  338. </div>
  339. `, isInline: true, dependencies: [{ kind: "component", type: NzFloatButtonComponent, selector: "nz-float-button", inputs: ["nzHref", "nzTarget", "nzType", "nzShape", "nzIcon", "nzDescription"], outputs: ["nzOnClick"], exportAs: ["nzFloatButton"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }], animations: [fadeMotion], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  340. };
  341. })();
  342. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzFloatButtonTopComponent, decorators: [{
  343. type: Component,
  344. args: [{
  345. selector: 'nz-float-button-top',
  346. exportAs: 'nzFloatButtonTop',
  347. imports: [NzFloatButtonComponent, NzIconModule],
  348. animations: [fadeMotion],
  349. template: `
  350. <div #backTop @fadeMotion>
  351. <nz-float-button
  352. [nzIcon]="nzIcon || top"
  353. [nzDescription]="nzDescription"
  354. [nzHref]="nzHref"
  355. [nzType]="nzType"
  356. [nzShape]="nzShape"
  357. ></nz-float-button>
  358. <ng-template #top>
  359. <nz-icon nzType="vertical-align-top" nzTheme="outline" />
  360. </ng-template>
  361. </div>
  362. `,
  363. host: {
  364. class: 'ant-float-btn ant-float-btn-top',
  365. '[class.ant-float-btn-circle]': `nzShape === 'circle'`,
  366. '[class.ant-float-btn-hidden]': `!visible`,
  367. '[class.ant-float-btn-square]': `nzShape === 'square'`,
  368. '[class.ant-float-btn-rtl]': `dir === 'rtl'`
  369. },
  370. changeDetection: ChangeDetectionStrategy.OnPush,
  371. encapsulation: ViewEncapsulation.None,
  372. preserveWhitespaces: false,
  373. providers: [NzDestroyService]
  374. }]
  375. }], ctorParameters: () => [{ type: i1$1.NzConfigService }, { type: i2.NzScrollService }, { type: i3$1.Platform }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i2.NzDestroyService }, { type: i2$1.Directionality }], propDecorators: { nzHref: [{
  376. type: Input
  377. }], nzType: [{
  378. type: Input
  379. }], nzShape: [{
  380. type: Input
  381. }], nzIcon: [{
  382. type: Input
  383. }], nzDescription: [{
  384. type: Input
  385. }], nzTemplate: [{
  386. type: Input
  387. }], nzVisibilityHeight: [{
  388. type: Input,
  389. args: [{ transform: numberAttribute }]
  390. }], nzTarget: [{
  391. type: Input
  392. }], nzDuration: [{
  393. type: Input,
  394. args: [{ transform: numberAttribute }]
  395. }], nzOnClick: [{
  396. type: Output
  397. }], backTop: [{
  398. type: ViewChild,
  399. args: ['backTop', { static: false }]
  400. }] } });
  401. class NzFloatButtonGroupComponent {
  402. destroy$;
  403. directionality;
  404. cdr;
  405. nzFloatButtonComponent;
  406. nzFloatButtonTopComponents;
  407. nzHref = null;
  408. nzTarget = null;
  409. nzType = 'default';
  410. nzIcon = null;
  411. nzDescription = null;
  412. nzShape = 'circle';
  413. nzTrigger = null;
  414. nzOpen = null;
  415. nzOnOpenChange = new EventEmitter();
  416. isOpen = false;
  417. dir = 'ltr';
  418. constructor(destroy$, directionality, cdr) {
  419. this.destroy$ = destroy$;
  420. this.directionality = directionality;
  421. this.cdr = cdr;
  422. this.dir = this.directionality.value;
  423. }
  424. ngOnInit() {
  425. this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction) => {
  426. this.dir = direction;
  427. this.cdr.detectChanges();
  428. });
  429. this.dir = this.directionality.value;
  430. }
  431. ngAfterContentInit() {
  432. if (this.nzFloatButtonComponent) {
  433. this.nzFloatButtonComponent.forEach(item => {
  434. item.nzShape = this.nzShape;
  435. });
  436. }
  437. if (this.nzFloatButtonTopComponents) {
  438. this.nzFloatButtonTopComponents.forEach(item => {
  439. item.nzShape = this.nzShape;
  440. item.detectChanges();
  441. });
  442. }
  443. }
  444. clickOpenMenu() {
  445. if (this.nzTrigger !== 'click' || this.nzOpen !== null) {
  446. return;
  447. }
  448. this.isOpen = true;
  449. this.nzOnOpenChange.emit(true);
  450. this.cdr.markForCheck();
  451. }
  452. hoverOpenMenu() {
  453. if (this.nzTrigger !== 'hover' || this.nzOpen !== null) {
  454. return;
  455. }
  456. this.isOpen = true;
  457. this.nzOnOpenChange.emit(true);
  458. this.cdr.markForCheck();
  459. }
  460. clickCloseMenu() {
  461. if (this.nzTrigger !== 'click') {
  462. return;
  463. }
  464. this.isOpen = false;
  465. this.nzOnOpenChange.emit(false);
  466. this.cdr.markForCheck();
  467. }
  468. hoverCloseMenu() {
  469. if (this.nzTrigger !== 'hover' || typeof this.nzOpen === 'boolean') {
  470. return;
  471. }
  472. this.isOpen = false;
  473. this.nzOnOpenChange.emit(false);
  474. this.cdr.markForCheck();
  475. }
  476. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzFloatButtonGroupComponent, deps: [{ token: i2.NzDestroyService }, { token: i2$1.Directionality }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
  477. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzFloatButtonGroupComponent, isStandalone: true, selector: "nz-float-button-group", inputs: { nzHref: "nzHref", nzTarget: "nzTarget", nzType: "nzType", nzIcon: "nzIcon", nzDescription: "nzDescription", nzShape: "nzShape", nzTrigger: "nzTrigger", nzOpen: "nzOpen" }, outputs: { nzOnOpenChange: "nzOnOpenChange" }, host: { listeners: { "mouseleave": "hoverCloseMenu()" }, properties: { "class.ant-float-btn-group-circle": "nzShape === 'circle'", "class.ant-float-btn-group-circle-shadow": "nzShape === 'circle'", "class.ant-float-btn-group-square": "nzShape === 'square'", "class.ant-float-btn-group-square-shadow": "nzShape === 'square' && !nzTrigger", "class.ant-float-btn-group-rtl": "dir === 'rtl'" }, classAttribute: "ant-float-btn-group" }, providers: [NzDestroyService], queries: [{ propertyName: "nzFloatButtonComponent", predicate: NzFloatButtonComponent }, { propertyName: "nzFloatButtonTopComponents", predicate: NzFloatButtonTopComponent }], exportAs: ["nzFloatButtonGroup"], ngImport: i0, template: `
  478. @if (!nzTrigger || isOpen || nzOpen === true) {
  479. <div [class.ant-float-btn-group-wrap]="!!nzTrigger" @fadeMotion><ng-content></ng-content></div>
  480. }
  481. @if (!!nzTrigger) {
  482. @if (!isOpen && !nzOpen) {
  483. <nz-float-button
  484. [nzType]="nzType"
  485. [nzIcon]="nzIcon"
  486. [nzShape]="nzShape"
  487. [nzDescription]="nzDescription"
  488. (nzOnClick)="clickOpenMenu()"
  489. (mouseover)="hoverOpenMenu()"
  490. ></nz-float-button>
  491. } @else {
  492. <nz-float-button
  493. [nzType]="nzType"
  494. [nzIcon]="close"
  495. [nzShape]="nzShape"
  496. (nzOnClick)="clickCloseMenu()"
  497. ></nz-float-button>
  498. }
  499. }
  500. <ng-template #close>
  501. <nz-icon nzType="close" nzTheme="outline" />
  502. </ng-template>
  503. `, isInline: true, dependencies: [{ kind: "component", type: NzFloatButtonComponent, selector: "nz-float-button", inputs: ["nzHref", "nzTarget", "nzType", "nzShape", "nzIcon", "nzDescription"], outputs: ["nzOnClick"], exportAs: ["nzFloatButton"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }], animations: [fadeMotion], changeDetection: i0.ChangeDetectionStrategy.OnPush });
  504. }
  505. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzFloatButtonGroupComponent, decorators: [{
  506. type: Component,
  507. args: [{
  508. selector: 'nz-float-button-group',
  509. exportAs: 'nzFloatButtonGroup',
  510. imports: [NzFloatButtonComponent, NzIconModule],
  511. changeDetection: ChangeDetectionStrategy.OnPush,
  512. animations: [fadeMotion],
  513. template: `
  514. @if (!nzTrigger || isOpen || nzOpen === true) {
  515. <div [class.ant-float-btn-group-wrap]="!!nzTrigger" @fadeMotion><ng-content></ng-content></div>
  516. }
  517. @if (!!nzTrigger) {
  518. @if (!isOpen && !nzOpen) {
  519. <nz-float-button
  520. [nzType]="nzType"
  521. [nzIcon]="nzIcon"
  522. [nzShape]="nzShape"
  523. [nzDescription]="nzDescription"
  524. (nzOnClick)="clickOpenMenu()"
  525. (mouseover)="hoverOpenMenu()"
  526. ></nz-float-button>
  527. } @else {
  528. <nz-float-button
  529. [nzType]="nzType"
  530. [nzIcon]="close"
  531. [nzShape]="nzShape"
  532. (nzOnClick)="clickCloseMenu()"
  533. ></nz-float-button>
  534. }
  535. }
  536. <ng-template #close>
  537. <nz-icon nzType="close" nzTheme="outline" />
  538. </ng-template>
  539. `,
  540. host: {
  541. class: 'ant-float-btn-group',
  542. '(mouseleave)': 'hoverCloseMenu()',
  543. '[class.ant-float-btn-group-circle]': `nzShape === 'circle'`,
  544. '[class.ant-float-btn-group-circle-shadow]': `nzShape === 'circle'`,
  545. '[class.ant-float-btn-group-square]': `nzShape === 'square'`,
  546. '[class.ant-float-btn-group-square-shadow]': `nzShape === 'square' && !nzTrigger`,
  547. '[class.ant-float-btn-group-rtl]': `dir === 'rtl'`
  548. },
  549. providers: [NzDestroyService]
  550. }]
  551. }], ctorParameters: () => [{ type: i2.NzDestroyService }, { type: i2$1.Directionality }, { type: i0.ChangeDetectorRef }], propDecorators: { nzFloatButtonComponent: [{
  552. type: ContentChildren,
  553. args: [NzFloatButtonComponent]
  554. }], nzFloatButtonTopComponents: [{
  555. type: ContentChildren,
  556. args: [NzFloatButtonTopComponent]
  557. }], nzHref: [{
  558. type: Input
  559. }], nzTarget: [{
  560. type: Input
  561. }], nzType: [{
  562. type: Input
  563. }], nzIcon: [{
  564. type: Input
  565. }], nzDescription: [{
  566. type: Input
  567. }], nzShape: [{
  568. type: Input
  569. }], nzTrigger: [{
  570. type: Input
  571. }], nzOpen: [{
  572. type: Input
  573. }], nzOnOpenChange: [{
  574. type: Output
  575. }] } });
  576. /**
  577. * Use of this source code is governed by an MIT-style license that can be
  578. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  579. */
  580. class NzFloatButtonModule {
  581. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzFloatButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
  582. static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: NzFloatButtonModule, imports: [NzFloatButtonComponent,
  583. NzFloatButtonGroupComponent,
  584. NzFloatButtonTopComponent,
  585. NzFloatButtonContentComponent], exports: [NzFloatButtonComponent,
  586. NzFloatButtonGroupComponent,
  587. NzFloatButtonTopComponent,
  588. NzFloatButtonContentComponent] });
  589. static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzFloatButtonModule, imports: [NzFloatButtonComponent,
  590. NzFloatButtonGroupComponent,
  591. NzFloatButtonTopComponent,
  592. NzFloatButtonContentComponent] });
  593. }
  594. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzFloatButtonModule, decorators: [{
  595. type: NgModule,
  596. args: [{
  597. exports: [
  598. NzFloatButtonComponent,
  599. NzFloatButtonGroupComponent,
  600. NzFloatButtonTopComponent,
  601. NzFloatButtonContentComponent
  602. ],
  603. imports: [
  604. NzFloatButtonComponent,
  605. NzFloatButtonGroupComponent,
  606. NzFloatButtonTopComponent,
  607. NzFloatButtonContentComponent
  608. ]
  609. }]
  610. }] });
  611. /**
  612. * Use of this source code is governed by an MIT-style license that can be
  613. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  614. */
  615. /**
  616. * Generated bundle index. Do not edit.
  617. */
  618. export { NzFloatButtonComponent, NzFloatButtonContentComponent, NzFloatButtonGroupComponent, NzFloatButtonModule, NzFloatButtonTopComponent };
  619. //# sourceMappingURL=ng-zorro-antd-float-button.mjs.map