577 lines
32 KiB
JavaScript
577 lines
32 KiB
JavaScript
import { Directionality } from '@angular/cdk/bidi';
|
|
import { NgTemplateOutlet } from '@angular/common';
|
|
import * as i0 from '@angular/core';
|
|
import { input, ChangeDetectionStrategy, Component, output, linkedSignal, inject, computed, NgZone, DestroyRef, DOCUMENT, viewChild, ElementRef, numberAttribute, signal, effect, untracked, ViewEncapsulation, contentChildren, NgModule } from '@angular/core';
|
|
import { NzBadgeComponent, NzBadgeModule } from 'ng-zorro-antd/badge';
|
|
import * as i1$1 from 'ng-zorro-antd/button';
|
|
import { NzButtonModule } from 'ng-zorro-antd/button';
|
|
import { generateClassName, fromEventOutsideAngular } from 'ng-zorro-antd/core/util';
|
|
import * as i2 from 'ng-zorro-antd/core/outlet';
|
|
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
|
|
import * as i1 from 'ng-zorro-antd/icon';
|
|
import { NzIconModule } from 'ng-zorro-antd/icon';
|
|
import * as i2$1 from 'ng-zorro-antd/core/transition-patch';
|
|
import * as i3 from 'ng-zorro-antd/core/wave';
|
|
import { fadeMotion } from 'ng-zorro-antd/core/animation';
|
|
import { normalizePassiveListenerOptions, Platform } from '@angular/cdk/platform';
|
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
import { Subscription, Subject } from 'rxjs';
|
|
import { debounceTime, takeUntil } from 'rxjs/operators';
|
|
import { withConfigFactory, NzConfigService } from 'ng-zorro-antd/core/config';
|
|
import { NzScrollService } from 'ng-zorro-antd/core/services';
|
|
|
|
/**
|
|
* 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
|
|
*/
|
|
class NzFloatButtonContentComponent {
|
|
nzBadge = input(null, ...(ngDevMode ? [{ debugName: "nzBadge" }] : []));
|
|
nzIcon = input(null, ...(ngDevMode ? [{ debugName: "nzIcon" }] : []));
|
|
nzDescription = input(null, ...(ngDevMode ? [{ debugName: "nzDescription" }] : []));
|
|
nzShape = input('circle', ...(ngDevMode ? [{ debugName: "nzShape" }] : []));
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzFloatButtonContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: NzFloatButtonContentComponent, isStandalone: true, selector: "nz-float-button-content", inputs: { nzBadge: { classPropertyName: "nzBadge", publicName: "nzBadge", isSignal: true, isRequired: false, transformFunction: null }, nzIcon: { classPropertyName: "nzIcon", publicName: "nzIcon", isSignal: true, isRequired: false, transformFunction: null }, nzDescription: { classPropertyName: "nzDescription", publicName: "nzDescription", isSignal: true, isRequired: false, transformFunction: null }, nzShape: { classPropertyName: "nzShape", publicName: "nzShape", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["nzFloatButtonContent"], ngImport: i0, template: `
|
|
@if (nzBadge()) {
|
|
<nz-badge
|
|
[nzDot]="nzBadge()?.nzDot"
|
|
[nzShowDot]="nzBadge()?.nzDot"
|
|
[nzCount]="nzBadge()?.nzCount"
|
|
[nzShowZero]="nzBadge()?.nzShowZero"
|
|
[nzOverflowCount]="nzBadge()?.nzOverflowCount!"
|
|
[nzColor]="nzBadge()?.nzColor"
|
|
[nzOffset]="nzBadge()?.nzOffset"
|
|
[nzSize]="nzBadge()?.nzSize || 'default'"
|
|
>
|
|
<ng-container *ngTemplateOutlet="button"></ng-container>
|
|
</nz-badge>
|
|
} @else {
|
|
<ng-container *ngTemplateOutlet="button"></ng-container>
|
|
}
|
|
<ng-template #button>
|
|
<div class="ant-float-btn-body">
|
|
<div class="ant-float-btn-content">
|
|
@if (nzDescription() || nzIcon()) {
|
|
@if (nzIcon()) {
|
|
<div class="ant-float-btn-icon">
|
|
<ng-container *nzStringTemplateOutlet="nzIcon(); let icon">
|
|
<nz-icon [nzType]="icon" nzTheme="outline" />
|
|
</ng-container>
|
|
</div>
|
|
}
|
|
@if (nzDescription() && nzShape() === 'square') {
|
|
<div class="ant-float-btn-description">
|
|
<ng-container *nzStringTemplateOutlet="nzDescription()">
|
|
{{ nzDescription() }}
|
|
</ng-container>
|
|
</div>
|
|
}
|
|
} @else {
|
|
<div class="ant-float-btn-icon">
|
|
<nz-icon nzType="file-text" nzTheme="outline" />
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
`, 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: "ngmodule", type: NzOutletModule }, { kind: "directive", type: i2.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }, { kind: "component", type: NzBadgeComponent, selector: "nz-badge", inputs: ["nzShowZero", "nzShowDot", "nzStandalone", "nzDot", "nzOverflowCount", "nzColor", "nzStyle", "nzText", "nzTitle", "nzStatus", "nzCount", "nzOffset", "nzSize"], exportAs: ["nzBadge"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzFloatButtonContentComponent, decorators: [{
|
|
type: Component,
|
|
args: [{
|
|
selector: 'nz-float-button-content',
|
|
exportAs: 'nzFloatButtonContent',
|
|
imports: [NzIconModule, NzOutletModule, NzBadgeComponent, NgTemplateOutlet],
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
template: `
|
|
@if (nzBadge()) {
|
|
<nz-badge
|
|
[nzDot]="nzBadge()?.nzDot"
|
|
[nzShowDot]="nzBadge()?.nzDot"
|
|
[nzCount]="nzBadge()?.nzCount"
|
|
[nzShowZero]="nzBadge()?.nzShowZero"
|
|
[nzOverflowCount]="nzBadge()?.nzOverflowCount!"
|
|
[nzColor]="nzBadge()?.nzColor"
|
|
[nzOffset]="nzBadge()?.nzOffset"
|
|
[nzSize]="nzBadge()?.nzSize || 'default'"
|
|
>
|
|
<ng-container *ngTemplateOutlet="button"></ng-container>
|
|
</nz-badge>
|
|
} @else {
|
|
<ng-container *ngTemplateOutlet="button"></ng-container>
|
|
}
|
|
<ng-template #button>
|
|
<div class="ant-float-btn-body">
|
|
<div class="ant-float-btn-content">
|
|
@if (nzDescription() || nzIcon()) {
|
|
@if (nzIcon()) {
|
|
<div class="ant-float-btn-icon">
|
|
<ng-container *nzStringTemplateOutlet="nzIcon(); let icon">
|
|
<nz-icon [nzType]="icon" nzTheme="outline" />
|
|
</ng-container>
|
|
</div>
|
|
}
|
|
@if (nzDescription() && nzShape() === 'square') {
|
|
<div class="ant-float-btn-description">
|
|
<ng-container *nzStringTemplateOutlet="nzDescription()">
|
|
{{ nzDescription() }}
|
|
</ng-container>
|
|
</div>
|
|
}
|
|
} @else {
|
|
<div class="ant-float-btn-icon">
|
|
<nz-icon nzType="file-text" nzTheme="outline" />
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
`
|
|
}]
|
|
}] });
|
|
|
|
/**
|
|
* 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
|
|
*/
|
|
const CLASS_NAME$2 = 'ant-float-btn';
|
|
class NzFloatButtonComponent {
|
|
nzHref = input(null, ...(ngDevMode ? [{ debugName: "nzHref" }] : []));
|
|
nzTarget = input(null, ...(ngDevMode ? [{ debugName: "nzTarget" }] : []));
|
|
nzType = input('default', ...(ngDevMode ? [{ debugName: "nzType" }] : []));
|
|
nzIcon = input(null, ...(ngDevMode ? [{ debugName: "nzIcon" }] : []));
|
|
nzDescription = input(null, ...(ngDevMode ? [{ debugName: "nzDescription" }] : []));
|
|
nzShape = input('circle', ...(ngDevMode ? [{ debugName: "nzShape" }] : []));
|
|
nzBadge = input(null, ...(ngDevMode ? [{ debugName: "nzBadge" }] : []));
|
|
nzOnClick = output();
|
|
shape = linkedSignal(() => this.nzShape());
|
|
dir = inject(Directionality).valueSignal;
|
|
class = computed(() => {
|
|
const dir = this.dir();
|
|
const classes = [CLASS_NAME$2, this.generateClass(this.shape())];
|
|
if (dir === 'rtl') {
|
|
classes.push(this.generateClass(dir));
|
|
}
|
|
return classes;
|
|
}, ...(ngDevMode ? [{ debugName: "class" }] : []));
|
|
generateClass(suffix) {
|
|
return generateClassName(CLASS_NAME$2, suffix);
|
|
}
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzFloatButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: NzFloatButtonComponent, isStandalone: true, selector: "nz-float-button", inputs: { nzHref: { classPropertyName: "nzHref", publicName: "nzHref", isSignal: true, isRequired: false, transformFunction: null }, nzTarget: { classPropertyName: "nzTarget", publicName: "nzTarget", isSignal: true, isRequired: false, transformFunction: null }, nzType: { classPropertyName: "nzType", publicName: "nzType", isSignal: true, isRequired: false, transformFunction: null }, nzIcon: { classPropertyName: "nzIcon", publicName: "nzIcon", isSignal: true, isRequired: false, transformFunction: null }, nzDescription: { classPropertyName: "nzDescription", publicName: "nzDescription", isSignal: true, isRequired: false, transformFunction: null }, nzShape: { classPropertyName: "nzShape", publicName: "nzShape", isSignal: true, isRequired: false, transformFunction: null }, nzBadge: { classPropertyName: "nzBadge", publicName: "nzBadge", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nzOnClick: "nzOnClick" }, host: { properties: { "class": "class()" } }, exportAs: ["nzFloatButton"], ngImport: i0, template: `
|
|
@if (!!nzHref()) {
|
|
<a
|
|
[target]="nzTarget()"
|
|
[href]="nzHref()"
|
|
nz-button
|
|
[nzType]="nzType()"
|
|
[class.ant-float-btn-default]="nzType() === 'default'"
|
|
class="ant-float-btn-inner"
|
|
(click)="nzOnClick.emit(true)"
|
|
>
|
|
<ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
|
|
</a>
|
|
} @else {
|
|
<button
|
|
nz-button
|
|
[nzType]="nzType()"
|
|
[class.ant-float-btn-default]="nzType() === 'default'"
|
|
class="ant-float-btn-inner"
|
|
(click)="nzOnClick.emit(true)"
|
|
>
|
|
<ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
|
|
</button>
|
|
}
|
|
<ng-template #contentTemplate>
|
|
<nz-float-button-content
|
|
[nzBadge]="nzBadge()"
|
|
[nzIcon]="nzIcon()"
|
|
[nzDescription]="nzDescription()"
|
|
[nzShape]="shape()"
|
|
></nz-float-button-content>
|
|
</ng-template>
|
|
`, isInline: true, dependencies: [{ kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i1$1.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i2$1.ɵNzTransitionPatchDirective, selector: "[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i3.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: ["nzBadge", "nzIcon", "nzDescription", "nzShape"], exportAs: ["nzFloatButtonContent"] }, { kind: "ngmodule", type: NzBadgeModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzFloatButtonComponent, decorators: [{
|
|
type: Component,
|
|
args: [{
|
|
selector: 'nz-float-button',
|
|
exportAs: 'nzFloatButton',
|
|
imports: [NzButtonModule, NzFloatButtonContentComponent, NzBadgeModule, NgTemplateOutlet],
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
template: `
|
|
@if (!!nzHref()) {
|
|
<a
|
|
[target]="nzTarget()"
|
|
[href]="nzHref()"
|
|
nz-button
|
|
[nzType]="nzType()"
|
|
[class.ant-float-btn-default]="nzType() === 'default'"
|
|
class="ant-float-btn-inner"
|
|
(click)="nzOnClick.emit(true)"
|
|
>
|
|
<ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
|
|
</a>
|
|
} @else {
|
|
<button
|
|
nz-button
|
|
[nzType]="nzType()"
|
|
[class.ant-float-btn-default]="nzType() === 'default'"
|
|
class="ant-float-btn-inner"
|
|
(click)="nzOnClick.emit(true)"
|
|
>
|
|
<ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
|
|
</button>
|
|
}
|
|
<ng-template #contentTemplate>
|
|
<nz-float-button-content
|
|
[nzBadge]="nzBadge()"
|
|
[nzIcon]="nzIcon()"
|
|
[nzDescription]="nzDescription()"
|
|
[nzShape]="shape()"
|
|
></nz-float-button-content>
|
|
</ng-template>
|
|
`,
|
|
host: {
|
|
'[class]': 'class()'
|
|
}
|
|
}]
|
|
}] });
|
|
|
|
/**
|
|
* 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
|
|
*/
|
|
const withConfig = withConfigFactory('backTop');
|
|
const CLASS_NAME$1 = 'ant-float-btn';
|
|
const passiveEventListenerOptions = normalizePassiveListenerOptions({ passive: true });
|
|
class NzFloatButtonTopComponent {
|
|
nzConfigService = inject(NzConfigService);
|
|
scrollSrv = inject(NzScrollService);
|
|
platform = inject(Platform);
|
|
ngZone = inject(NgZone);
|
|
directionality = inject(Directionality);
|
|
destroyRef = inject(DestroyRef);
|
|
document = inject(DOCUMENT);
|
|
backTop = viewChild('backTop', ...(ngDevMode ? [{ debugName: "backTop", read: ElementRef }] : [{ read: ElementRef }]));
|
|
nzVisibilityHeight = input(...(ngDevMode ? [undefined, { debugName: "nzVisibilityHeight" }] : []));
|
|
nzHref = input(null, ...(ngDevMode ? [{ debugName: "nzHref" }] : []));
|
|
nzType = input('default', ...(ngDevMode ? [{ debugName: "nzType" }] : []));
|
|
nzShape = input('circle', ...(ngDevMode ? [{ debugName: "nzShape" }] : []));
|
|
nzIcon = input(null, ...(ngDevMode ? [{ debugName: "nzIcon" }] : []));
|
|
nzDescription = input(null, ...(ngDevMode ? [{ debugName: "nzDescription" }] : []));
|
|
nzTemplate = input(null, ...(ngDevMode ? [{ debugName: "nzTemplate" }] : []));
|
|
nzTarget = input(null, ...(ngDevMode ? [{ debugName: "nzTarget" }] : []));
|
|
nzDuration = input(450, ...(ngDevMode ? [{ debugName: "nzDuration", transform: numberAttribute }] : [{ transform: numberAttribute }]));
|
|
nzBadge = input(null, ...(ngDevMode ? [{ debugName: "nzBadge" }] : []));
|
|
nzOnClick = output();
|
|
// compact global config
|
|
visibilityHeight = withConfig('nzVisibilityHeight', this.nzVisibilityHeight, 400);
|
|
shape = linkedSignal(() => this.nzShape());
|
|
dir = this.directionality.valueSignal;
|
|
class = computed(() => {
|
|
const dir = this.dir();
|
|
const classes = [CLASS_NAME$1, `${CLASS_NAME$1}-top`, this.generateClass(this.shape())];
|
|
if (dir === 'rtl') {
|
|
classes.push(this.generateClass(dir));
|
|
}
|
|
if (!this.visible()) {
|
|
classes.push(this.generateClass('hidden'));
|
|
}
|
|
return classes;
|
|
}, ...(ngDevMode ? [{ debugName: "class" }] : []));
|
|
target = null;
|
|
visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
|
|
backTopClickSubscription = Subscription.EMPTY;
|
|
scrollListenerDestroy$ = new Subject();
|
|
constructor() {
|
|
this.destroyRef.onDestroy(() => {
|
|
this.scrollListenerDestroy$.next();
|
|
this.scrollListenerDestroy$.complete();
|
|
});
|
|
effect(() => {
|
|
const target = this.nzTarget();
|
|
if (target) {
|
|
this.target = typeof target === 'string' ? this.document.querySelector(target) : target;
|
|
this.registerScrollEvent();
|
|
}
|
|
});
|
|
effect(onCleanup => {
|
|
const backTop = this.backTop();
|
|
if (backTop) {
|
|
this.backTopClickSubscription.unsubscribe();
|
|
this.backTopClickSubscription = fromEventOutsideAngular(backTop.nativeElement, 'click')
|
|
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
.subscribe(() => {
|
|
this.scrollSrv.scrollTo(this.getTarget(), 0, { duration: this.nzDuration() });
|
|
this.ngZone.run(() => this.nzOnClick.emit(true));
|
|
});
|
|
}
|
|
return onCleanup(() => {
|
|
this.backTopClickSubscription.unsubscribe();
|
|
});
|
|
});
|
|
effect(() => {
|
|
this.visibilityHeight();
|
|
untracked(() => this.handleScroll());
|
|
});
|
|
}
|
|
ngOnInit() {
|
|
this.registerScrollEvent();
|
|
}
|
|
getTarget() {
|
|
return this.target || window;
|
|
}
|
|
handleScroll() {
|
|
if (!this.platform.isBrowser ||
|
|
this.visible() === this.scrollSrv.getScroll(this.getTarget()) > this.visibilityHeight()) {
|
|
return;
|
|
}
|
|
this.visible.update(v => !v);
|
|
}
|
|
registerScrollEvent() {
|
|
if (!this.platform.isBrowser) {
|
|
return;
|
|
}
|
|
this.scrollListenerDestroy$.next();
|
|
this.handleScroll();
|
|
fromEventOutsideAngular(this.getTarget(), 'scroll', passiveEventListenerOptions)
|
|
.pipe(debounceTime(50), takeUntil(this.scrollListenerDestroy$))
|
|
.subscribe(() => this.handleScroll());
|
|
}
|
|
generateClass(suffix) {
|
|
return generateClassName(CLASS_NAME$1, suffix);
|
|
}
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzFloatButtonTopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.0", type: NzFloatButtonTopComponent, isStandalone: true, selector: "nz-float-button-top", inputs: { nzVisibilityHeight: { classPropertyName: "nzVisibilityHeight", publicName: "nzVisibilityHeight", isSignal: true, isRequired: false, transformFunction: null }, nzHref: { classPropertyName: "nzHref", publicName: "nzHref", isSignal: true, isRequired: false, transformFunction: null }, nzType: { classPropertyName: "nzType", publicName: "nzType", isSignal: true, isRequired: false, transformFunction: null }, nzShape: { classPropertyName: "nzShape", publicName: "nzShape", isSignal: true, isRequired: false, transformFunction: null }, nzIcon: { classPropertyName: "nzIcon", publicName: "nzIcon", isSignal: true, isRequired: false, transformFunction: null }, nzDescription: { classPropertyName: "nzDescription", publicName: "nzDescription", isSignal: true, isRequired: false, transformFunction: null }, nzTemplate: { classPropertyName: "nzTemplate", publicName: "nzTemplate", isSignal: true, isRequired: false, transformFunction: null }, nzTarget: { classPropertyName: "nzTarget", publicName: "nzTarget", isSignal: true, isRequired: false, transformFunction: null }, nzDuration: { classPropertyName: "nzDuration", publicName: "nzDuration", isSignal: true, isRequired: false, transformFunction: null }, nzBadge: { classPropertyName: "nzBadge", publicName: "nzBadge", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nzOnClick: "nzOnClick" }, host: { properties: { "class": "class()" } }, viewQueries: [{ propertyName: "backTop", first: true, predicate: ["backTop"], descendants: true, read: ElementRef, isSignal: true }], exportAs: ["nzFloatButtonTop"], ngImport: i0, template: `
|
|
<div #backTop @fadeMotion>
|
|
<nz-float-button
|
|
[nzIcon]="nzIcon() || top"
|
|
[nzDescription]="nzDescription()"
|
|
[nzHref]="nzHref()"
|
|
[nzType]="nzType()"
|
|
[nzShape]="shape()"
|
|
[nzBadge]="nzBadge()"
|
|
></nz-float-button>
|
|
<ng-template #top>
|
|
<nz-icon nzType="vertical-align-top" nzTheme="outline" />
|
|
</ng-template>
|
|
</div>
|
|
`, isInline: true, dependencies: [{ kind: "component", type: NzFloatButtonComponent, selector: "nz-float-button", inputs: ["nzHref", "nzTarget", "nzType", "nzIcon", "nzDescription", "nzShape", "nzBadge"], 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 });
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzFloatButtonTopComponent, decorators: [{
|
|
type: Component,
|
|
args: [{
|
|
selector: 'nz-float-button-top',
|
|
exportAs: 'nzFloatButtonTop',
|
|
imports: [NzFloatButtonComponent, NzIconModule],
|
|
animations: [fadeMotion],
|
|
template: `
|
|
<div #backTop @fadeMotion>
|
|
<nz-float-button
|
|
[nzIcon]="nzIcon() || top"
|
|
[nzDescription]="nzDescription()"
|
|
[nzHref]="nzHref()"
|
|
[nzType]="nzType()"
|
|
[nzShape]="shape()"
|
|
[nzBadge]="nzBadge()"
|
|
></nz-float-button>
|
|
<ng-template #top>
|
|
<nz-icon nzType="vertical-align-top" nzTheme="outline" />
|
|
</ng-template>
|
|
</div>
|
|
`,
|
|
host: {
|
|
'[class]': 'class()'
|
|
},
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
encapsulation: ViewEncapsulation.None
|
|
}]
|
|
}], ctorParameters: () => [] });
|
|
|
|
/**
|
|
* 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
|
|
*/
|
|
const CLASS_NAME = 'ant-float-btn-group';
|
|
class NzFloatButtonGroupComponent {
|
|
nzFloatButtonComponents = contentChildren(NzFloatButtonComponent, ...(ngDevMode ? [{ debugName: "nzFloatButtonComponents" }] : []));
|
|
nzFloatButtonTopComponents = contentChildren(NzFloatButtonTopComponent, ...(ngDevMode ? [{ debugName: "nzFloatButtonTopComponents" }] : []));
|
|
nzHref = input(null, ...(ngDevMode ? [{ debugName: "nzHref" }] : []));
|
|
nzTarget = input(null, ...(ngDevMode ? [{ debugName: "nzTarget" }] : []));
|
|
nzType = input('default', ...(ngDevMode ? [{ debugName: "nzType" }] : []));
|
|
nzIcon = input(null, ...(ngDevMode ? [{ debugName: "nzIcon" }] : []));
|
|
nzDescription = input(null, ...(ngDevMode ? [{ debugName: "nzDescription" }] : []));
|
|
nzShape = input('circle', ...(ngDevMode ? [{ debugName: "nzShape" }] : []));
|
|
nzTrigger = input(null, ...(ngDevMode ? [{ debugName: "nzTrigger" }] : []));
|
|
nzOpen = input(null, ...(ngDevMode ? [{ debugName: "nzOpen" }] : []));
|
|
nzPlacement = input('top', ...(ngDevMode ? [{ debugName: "nzPlacement" }] : []));
|
|
nzOnOpenChange = output();
|
|
dir = inject(Directionality).valueSignal;
|
|
open = linkedSignal(() => !!this.nzOpen());
|
|
isMenuMode = computed(() => !!this.nzTrigger() && ['click', 'hover'].includes(this.nzTrigger()), ...(ngDevMode ? [{ debugName: "isMenuMode" }] : []));
|
|
isControlledMode = computed(() => this.nzOpen() !== null, ...(ngDevMode ? [{ debugName: "isControlledMode" }] : []));
|
|
class = computed(() => {
|
|
const shape = this.nzShape();
|
|
const dir = this.dir();
|
|
const classes = [CLASS_NAME, this.generateClass(shape)];
|
|
if (!this.isMenuMode()) {
|
|
classes.push(this.generateClass(`${shape}-shadow`));
|
|
}
|
|
else {
|
|
classes.push(this.generateClass(this.nzPlacement()));
|
|
}
|
|
if (dir === 'rtl') {
|
|
classes.push(this.generateClass(dir));
|
|
}
|
|
return classes;
|
|
}, ...(ngDevMode ? [{ debugName: "class" }] : []));
|
|
constructor() {
|
|
effect(() => {
|
|
if (this.nzFloatButtonComponents()) {
|
|
this.nzFloatButtonComponents().forEach(item => {
|
|
item.shape.set(this.nzShape());
|
|
});
|
|
}
|
|
if (this.nzFloatButtonTopComponents()) {
|
|
this.nzFloatButtonTopComponents().forEach(item => {
|
|
item.shape.set(this.nzShape());
|
|
});
|
|
}
|
|
});
|
|
}
|
|
clickOpenMenu() {
|
|
this.handleEvent('click', true);
|
|
}
|
|
hoverOpenMenu() {
|
|
this.handleEvent('hover', true);
|
|
}
|
|
clickCloseMenu() {
|
|
this.handleEvent('click', false);
|
|
}
|
|
hoverCloseMenu() {
|
|
this.handleEvent('hover', false);
|
|
}
|
|
handleEvent(type, isOpen) {
|
|
if (this.nzTrigger() !== type || this.isControlledMode() || this.open() === isOpen) {
|
|
return;
|
|
}
|
|
this.open.set(isOpen);
|
|
this.nzOnOpenChange.emit(isOpen);
|
|
}
|
|
generateClass(suffix) {
|
|
return generateClassName(CLASS_NAME, suffix);
|
|
}
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzFloatButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: NzFloatButtonGroupComponent, isStandalone: true, selector: "nz-float-button-group", inputs: { nzHref: { classPropertyName: "nzHref", publicName: "nzHref", isSignal: true, isRequired: false, transformFunction: null }, nzTarget: { classPropertyName: "nzTarget", publicName: "nzTarget", isSignal: true, isRequired: false, transformFunction: null }, nzType: { classPropertyName: "nzType", publicName: "nzType", isSignal: true, isRequired: false, transformFunction: null }, nzIcon: { classPropertyName: "nzIcon", publicName: "nzIcon", isSignal: true, isRequired: false, transformFunction: null }, nzDescription: { classPropertyName: "nzDescription", publicName: "nzDescription", isSignal: true, isRequired: false, transformFunction: null }, nzShape: { classPropertyName: "nzShape", publicName: "nzShape", isSignal: true, isRequired: false, transformFunction: null }, nzTrigger: { classPropertyName: "nzTrigger", publicName: "nzTrigger", isSignal: true, isRequired: false, transformFunction: null }, nzOpen: { classPropertyName: "nzOpen", publicName: "nzOpen", isSignal: true, isRequired: false, transformFunction: null }, nzPlacement: { classPropertyName: "nzPlacement", publicName: "nzPlacement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nzOnOpenChange: "nzOnOpenChange" }, host: { listeners: { "mouseleave": "hoverCloseMenu()" }, properties: { "class": "class()" } }, queries: [{ propertyName: "nzFloatButtonComponents", predicate: NzFloatButtonComponent, isSignal: true }, { propertyName: "nzFloatButtonTopComponents", predicate: NzFloatButtonTopComponent, isSignal: true }], exportAs: ["nzFloatButtonGroup"], ngImport: i0, template: `
|
|
@if (!isMenuMode()) {
|
|
<ng-container *ngTemplateOutlet="menu"></ng-container>
|
|
} @else {
|
|
@if (open()) {
|
|
<div class="ant-float-btn-group-wrap" @fadeMotion><ng-container *ngTemplateOutlet="menu"></ng-container></div>
|
|
}
|
|
<nz-float-button
|
|
class="ant-float-btn-group-trigger"
|
|
[nzType]="nzType()"
|
|
[nzIcon]="open() ? close : nzIcon()"
|
|
[nzShape]="nzShape()"
|
|
[nzDescription]="open() ? null : nzDescription()"
|
|
(nzOnClick)="open() ? clickCloseMenu() : clickOpenMenu()"
|
|
(mouseover)="hoverOpenMenu()"
|
|
></nz-float-button>
|
|
}
|
|
<ng-template #menu><ng-content></ng-content></ng-template>
|
|
<ng-template #close>
|
|
<nz-icon nzType="close" nzTheme="outline" />
|
|
</ng-template>
|
|
`, isInline: true, dependencies: [{ kind: "component", type: NzFloatButtonComponent, selector: "nz-float-button", inputs: ["nzHref", "nzTarget", "nzType", "nzIcon", "nzDescription", "nzShape", "nzBadge"], 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"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [fadeMotion], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzFloatButtonGroupComponent, decorators: [{
|
|
type: Component,
|
|
args: [{
|
|
selector: 'nz-float-button-group',
|
|
exportAs: 'nzFloatButtonGroup',
|
|
imports: [NzFloatButtonComponent, NzIconModule, NgTemplateOutlet],
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
animations: [fadeMotion],
|
|
template: `
|
|
@if (!isMenuMode()) {
|
|
<ng-container *ngTemplateOutlet="menu"></ng-container>
|
|
} @else {
|
|
@if (open()) {
|
|
<div class="ant-float-btn-group-wrap" @fadeMotion><ng-container *ngTemplateOutlet="menu"></ng-container></div>
|
|
}
|
|
<nz-float-button
|
|
class="ant-float-btn-group-trigger"
|
|
[nzType]="nzType()"
|
|
[nzIcon]="open() ? close : nzIcon()"
|
|
[nzShape]="nzShape()"
|
|
[nzDescription]="open() ? null : nzDescription()"
|
|
(nzOnClick)="open() ? clickCloseMenu() : clickOpenMenu()"
|
|
(mouseover)="hoverOpenMenu()"
|
|
></nz-float-button>
|
|
}
|
|
<ng-template #menu><ng-content></ng-content></ng-template>
|
|
<ng-template #close>
|
|
<nz-icon nzType="close" nzTheme="outline" />
|
|
</ng-template>
|
|
`,
|
|
host: {
|
|
'[class]': 'class()',
|
|
'(mouseleave)': 'hoverCloseMenu()'
|
|
}
|
|
}]
|
|
}], ctorParameters: () => [] });
|
|
|
|
/**
|
|
* 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
|
|
*/
|
|
class NzFloatButtonModule {
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzFloatButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: NzFloatButtonModule, imports: [NzFloatButtonComponent,
|
|
NzFloatButtonGroupComponent,
|
|
NzFloatButtonTopComponent,
|
|
NzFloatButtonContentComponent], exports: [NzFloatButtonComponent,
|
|
NzFloatButtonGroupComponent,
|
|
NzFloatButtonTopComponent,
|
|
NzFloatButtonContentComponent] });
|
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzFloatButtonModule, imports: [NzFloatButtonComponent,
|
|
NzFloatButtonGroupComponent,
|
|
NzFloatButtonTopComponent,
|
|
NzFloatButtonContentComponent] });
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzFloatButtonModule, decorators: [{
|
|
type: NgModule,
|
|
args: [{
|
|
exports: [
|
|
NzFloatButtonComponent,
|
|
NzFloatButtonGroupComponent,
|
|
NzFloatButtonTopComponent,
|
|
NzFloatButtonContentComponent
|
|
],
|
|
imports: [
|
|
NzFloatButtonComponent,
|
|
NzFloatButtonGroupComponent,
|
|
NzFloatButtonTopComponent,
|
|
NzFloatButtonContentComponent
|
|
]
|
|
}]
|
|
}] });
|
|
|
|
/**
|
|
* 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
|
|
*/
|
|
|
|
/**
|
|
* 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
|
|
*/
|
|
|
|
/**
|
|
* Generated bundle index. Do not edit.
|
|
*/
|
|
|
|
export { NzFloatButtonComponent, NzFloatButtonContentComponent, NzFloatButtonGroupComponent, NzFloatButtonModule, NzFloatButtonTopComponent };
|
|
//# sourceMappingURL=ng-zorro-antd-float-button.mjs.map
|