ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
267 lines (257 loc) • 10.3 kB
JavaScript
import { Directionality, BidiModule } from '@angular/cdk/bidi';
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 { takeUntil, map } from 'rxjs/operators';
/**
* 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 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'
},] }
];
/**
* 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 NZ_CONFIG_MODULE_NAME = 'pageHeader';
class NzPageHeaderComponent {
constructor(location, nzConfigService, elementRef, nzResizeObserver, cdr, directionality) {
this.location = location;
this.nzConfigService = nzConfigService;
this.elementRef = elementRef;
this.nzResizeObserver = nzResizeObserver;
this.cdr = cdr;
this.directionality = directionality;
this._nzModuleName = NZ_CONFIG_MODULE_NAME;
this.nzBackIcon = null;
this.nzGhost = true;
this.nzBack = new EventEmitter();
this.compact = false;
this.destroy$ = new Subject();
this.dir = 'ltr';
}
ngOnInit() {
var _a;
(_a = this.directionality.change) === null || _a === void 0 ? void 0 : _a.pipe(takeUntil(this.destroy$)).subscribe((direction) => {
this.dir = direction;
this.cdr.detectChanges();
});
this.dir = this.directionality.value;
}
ngAfterViewInit() {
this.nzResizeObserver
.observe(this.elementRef)
.pipe(map(([entry]) => entry.contentRect.width), takeUntil(this.destroy$))
.subscribe((width) => {
this.compact = width < 768;
this.cdr.markForCheck();
});
}
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();
}
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
getBackIcon() {
if (this.dir === 'rtl') {
return 'arrow-right';
}
return 'arrow-left';
}
}
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 || getBackIcon()" 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',
'[class.ant-page-header-rtl]': `dir === 'rtl'`
}
},] }
];
NzPageHeaderComponent.ctorParameters = () => [
{ type: Location, decorators: [{ type: Optional }] },
{ type: NzConfigService },
{ type: ElementRef },
{ type: NzResizeObserver },
{ type: ChangeDetectorRef },
{ type: Directionality, decorators: [{ type: Optional }] }
];
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(),
__metadata("design:type", Boolean)
], NzPageHeaderComponent.prototype, "nzGhost", void 0);
/**
* 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 NzPageHeaderCells = [
NzPageHeaderTitleDirective,
NzPageHeaderSubtitleDirective,
NzPageHeaderContentDirective,
NzPageHeaderTagDirective,
NzPageHeaderExtraDirective,
NzPageHeaderFooterDirective,
NzPageHeaderBreadcrumbDirective,
NzPageHeaderAvatarDirective
];
class NzPageHeaderModule {
}
NzPageHeaderModule.decorators = [
{ type: NgModule, args: [{
imports: [BidiModule, CommonModule, NzOutletModule, NzIconModule],
exports: [NzPageHeaderComponent, NzPageHeaderCells],
declarations: [NzPageHeaderComponent, NzPageHeaderCells]
},] }
];
/**
* 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 { NzPageHeaderAvatarDirective, NzPageHeaderBreadcrumbDirective, NzPageHeaderComponent, NzPageHeaderContentDirective, NzPageHeaderExtraDirective, NzPageHeaderFooterDirective, NzPageHeaderModule, NzPageHeaderSubtitleDirective, NzPageHeaderTagDirective, NzPageHeaderTitleDirective };
//# sourceMappingURL=ng-zorro-antd-page-header.js.map