ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
322 lines (312 loc) • 11.4 kB
JavaScript
import { Location, CommonModule } from '@angular/common';
import { Directive, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Optional, ElementRef, ChangeDetectorRef, Input, Output, ContentChild, NgModule } from '@angular/core';
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { __decorate, __metadata } from 'tslib';
import { NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
import { PREFIX } from 'ng-zorro-antd/core/logger';
import { NzResizeObserver } from 'ng-zorro-antd/core/resize-observers';
import { Subject } from 'rxjs';
import { map, takeUntil } from 'rxjs/operators';
/**
* @fileoverview added by tsickle
* Generated from: page-header-cells.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzPageHeaderTitleDirective {
}
NzPageHeaderTitleDirective.decorators = [
{ type: Directive, args: [{
selector: 'nz-page-header-title, [nz-page-header-title]',
exportAs: 'nzPageHeaderTitle',
host: {
class: 'ant-page-header-heading-title'
}
},] }
];
class NzPageHeaderSubtitleDirective {
}
NzPageHeaderSubtitleDirective.decorators = [
{ type: Directive, args: [{
selector: 'nz-page-header-subtitle, [nz-page-header-subtitle]',
exportAs: 'nzPageHeaderSubtitle',
host: {
class: 'ant-page-header-heading-sub-title'
}
},] }
];
class NzPageHeaderContentDirective {
}
NzPageHeaderContentDirective.decorators = [
{ type: Directive, args: [{
selector: 'nz-page-header-content, [nz-page-header-content]',
exportAs: 'nzPageHeaderContent',
host: {
class: 'ant-page-header-content'
}
},] }
];
class NzPageHeaderTagDirective {
}
NzPageHeaderTagDirective.decorators = [
{ type: Directive, args: [{
selector: 'nz-page-header-tags, [nz-page-header-tags]',
exportAs: 'nzPageHeaderTags',
host: {
class: 'ant-page-header-heading-tags'
}
},] }
];
class NzPageHeaderExtraDirective {
}
NzPageHeaderExtraDirective.decorators = [
{ type: Directive, args: [{
selector: 'nz-page-header-extra, [nz-page-header-extra]',
exportAs: 'nzPageHeaderExtra',
host: {
class: 'ant-page-header-heading-extra'
}
},] }
];
class NzPageHeaderFooterDirective {
}
NzPageHeaderFooterDirective.decorators = [
{ type: Directive, args: [{
selector: 'nz-page-header-footer, [nz-page-header-footer]',
exportAs: 'nzPageHeaderFooter',
host: {
class: 'ant-page-header-footer'
}
},] }
];
class NzPageHeaderBreadcrumbDirective {
}
NzPageHeaderBreadcrumbDirective.decorators = [
{ type: Directive, args: [{
selector: 'nz-breadcrumb[nz-page-header-breadcrumb]',
exportAs: 'nzPageHeaderBreadcrumb'
},] }
];
class NzPageHeaderAvatarDirective {
}
NzPageHeaderAvatarDirective.decorators = [
{ type: Directive, args: [{
selector: 'nz-avatar[nz-page-header-avatar]',
exportAs: 'nzPageHeaderAvatar'
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: page-header.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const NZ_CONFIG_COMPONENT_NAME = 'pageHeader';
class NzPageHeaderComponent {
/**
* @param {?} location
* @param {?} nzConfigService
* @param {?} elementRef
* @param {?} nzResizeObserver
* @param {?} cdr
*/
constructor(location, nzConfigService, elementRef, nzResizeObserver, cdr) {
this.location = location;
this.nzConfigService = nzConfigService;
this.elementRef = elementRef;
this.nzResizeObserver = nzResizeObserver;
this.cdr = cdr;
this.nzBackIcon = null;
this.nzGhost = true;
this.nzBack = new EventEmitter();
this.compact = false;
this.destroy$ = new Subject();
}
/**
* @return {?}
*/
ngAfterViewInit() {
this.nzResizeObserver
.observe(this.elementRef)
.pipe(map((/**
* @param {?} __0
* @return {?}
*/
([entry]) => entry.contentRect.width)), takeUntil(this.destroy$))
.subscribe((/**
* @param {?} width
* @return {?}
*/
(width) => {
this.compact = width < 768;
this.cdr.markForCheck();
}));
}
/**
* @return {?}
*/
onBack() {
if (this.nzBack.observers.length) {
this.nzBack.emit();
}
else {
if (!this.location) {
throw new Error(`${PREFIX} you should import 'RouterModule' or register 'Location' if you want to use 'nzBack' default event!`);
}
this.location.back();
}
}
/**
* @return {?}
*/
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
}
NzPageHeaderComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-page-header',
exportAs: 'nzPageHeader',
template: `
<ng-content select="nz-breadcrumb[nz-page-header-breadcrumb]"></ng-content>
<div class="ant-page-header-heading">
<div class="ant-page-header-heading-left">
<!--back-->
<div *ngIf="nzBackIcon !== null" (click)="onBack()" class="ant-page-header-back">
<div role="button" tabindex="0" class="ant-page-header-back-button">
<ng-container *nzStringTemplateOutlet="nzBackIcon; let backIcon">
<i nz-icon [nzType]="backIcon || 'arrow-left'" nzTheme="outline"></i>
</ng-container>
</div>
</div>
<!--avatar-->
<ng-content select="nz-avatar[nz-page-header-avatar]"></ng-content>
<!--title-->
<span class="ant-page-header-heading-title" *ngIf="nzTitle">
<ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
</span>
<ng-content *ngIf="!nzTitle" select="nz-page-header-title, [nz-page-header-title]"></ng-content>
<!--subtitle-->
<span class="ant-page-header-heading-sub-title" *ngIf="nzSubtitle">
<ng-container *nzStringTemplateOutlet="nzSubtitle">{{ nzSubtitle }}</ng-container>
</span>
<ng-content *ngIf="!nzSubtitle" select="nz-page-header-subtitle, [nz-page-header-subtitle]"></ng-content>
<ng-content select="nz-page-header-tags, [nz-page-header-tags]"></ng-content>
</div>
<ng-content select="nz-page-header-extra, [nz-page-header-extra]"></ng-content>
</div>
<ng-content select="nz-page-header-content, [nz-page-header-content]"></ng-content>
<ng-content select="nz-page-header-footer, [nz-page-header-footer]"></ng-content>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
host: {
class: 'ant-page-header',
'[class.has-footer]': 'nzPageHeaderFooter',
'[class.ant-page-header-ghost]': 'nzGhost',
'[class.has-breadcrumb]': 'nzPageHeaderBreadcrumb',
'[class.ant-page-header-compact]': 'compact'
}
}] }
];
/** @nocollapse */
NzPageHeaderComponent.ctorParameters = () => [
{ type: Location, decorators: [{ type: Optional }] },
{ type: NzConfigService },
{ type: ElementRef },
{ type: NzResizeObserver },
{ type: ChangeDetectorRef }
];
NzPageHeaderComponent.propDecorators = {
nzBackIcon: [{ type: Input }],
nzTitle: [{ type: Input }],
nzSubtitle: [{ type: Input }],
nzGhost: [{ type: Input }],
nzBack: [{ type: Output }],
nzPageHeaderFooter: [{ type: ContentChild, args: [NzPageHeaderFooterDirective, { static: false },] }],
nzPageHeaderBreadcrumb: [{ type: ContentChild, args: [NzPageHeaderBreadcrumbDirective, { static: false },] }]
};
__decorate([
WithConfig(NZ_CONFIG_COMPONENT_NAME),
__metadata("design:type", Boolean)
], NzPageHeaderComponent.prototype, "nzGhost", void 0);
if (false) {
/** @type {?} */
NzPageHeaderComponent.prototype.nzBackIcon;
/** @type {?} */
NzPageHeaderComponent.prototype.nzTitle;
/** @type {?} */
NzPageHeaderComponent.prototype.nzSubtitle;
/** @type {?} */
NzPageHeaderComponent.prototype.nzGhost;
/** @type {?} */
NzPageHeaderComponent.prototype.nzBack;
/** @type {?} */
NzPageHeaderComponent.prototype.nzPageHeaderFooter;
/** @type {?} */
NzPageHeaderComponent.prototype.nzPageHeaderBreadcrumb;
/** @type {?} */
NzPageHeaderComponent.prototype.compact;
/** @type {?} */
NzPageHeaderComponent.prototype.destroy$;
/**
* @type {?}
* @private
*/
NzPageHeaderComponent.prototype.location;
/** @type {?} */
NzPageHeaderComponent.prototype.nzConfigService;
/**
* @type {?}
* @private
*/
NzPageHeaderComponent.prototype.elementRef;
/**
* @type {?}
* @private
*/
NzPageHeaderComponent.prototype.nzResizeObserver;
/**
* @type {?}
* @private
*/
NzPageHeaderComponent.prototype.cdr;
}
/**
* @fileoverview added by tsickle
* Generated from: page-header.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const NzPageHeaderCells = [
NzPageHeaderTitleDirective,
NzPageHeaderSubtitleDirective,
NzPageHeaderContentDirective,
NzPageHeaderTagDirective,
NzPageHeaderExtraDirective,
NzPageHeaderFooterDirective,
NzPageHeaderBreadcrumbDirective,
NzPageHeaderAvatarDirective
];
class NzPageHeaderModule {
}
NzPageHeaderModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, NzOutletModule, NzIconModule],
exports: [NzPageHeaderComponent, NzPageHeaderCells],
declarations: [NzPageHeaderComponent, NzPageHeaderCells]
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ng-zorro-antd-page-header.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NzPageHeaderAvatarDirective, NzPageHeaderBreadcrumbDirective, NzPageHeaderComponent, NzPageHeaderContentDirective, NzPageHeaderExtraDirective, NzPageHeaderFooterDirective, NzPageHeaderModule, NzPageHeaderSubtitleDirective, NzPageHeaderTagDirective, NzPageHeaderTitleDirective };
//# sourceMappingURL=ng-zorro-antd-page-header.js.map