ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
512 lines (502 loc) • 17.4 kB
JavaScript
import { Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, Renderer2, EventEmitter, Optional, Host, NgZone, ChangeDetectorRef, Output, Input, ViewChild, NgModule } from '@angular/core';
import { __decorate, __metadata } from 'tslib';
import { MediaMatcher, LayoutModule } from '@angular/cdk/layout';
import { Platform, PlatformModule } from '@angular/cdk/platform';
import { Subject } from 'rxjs';
import { takeUntil, finalize } from 'rxjs/operators';
import { toCssPixel, NzDomEventService, InputBoolean } from 'ng-zorro-antd/core';
import { CommonModule } from '@angular/common';
import { NzIconModule } from 'ng-zorro-antd/icon';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzContentComponent = /** @class */ (function () {
function NzContentComponent(elementRef, renderer) {
this.elementRef = elementRef;
this.renderer = renderer;
this.renderer.addClass(this.elementRef.nativeElement, 'ant-layout-content');
}
NzContentComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-content',
exportAs: 'nzContent',
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
template: "<ng-content></ng-content>",
styles: ["\n nz-content {\n display: block;\n }\n "]
}] }
];
/** @nocollapse */
NzContentComponent.ctorParameters = function () { return [
{ type: ElementRef },
{ type: Renderer2 }
]; };
return NzContentComponent;
}());
if (false) {
/**
* @type {?}
* @private
*/
NzContentComponent.prototype.elementRef;
/**
* @type {?}
* @private
*/
NzContentComponent.prototype.renderer;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzFooterComponent = /** @class */ (function () {
function NzFooterComponent(elementRef, renderer) {
this.elementRef = elementRef;
this.renderer = renderer;
this.renderer.addClass(this.elementRef.nativeElement, 'ant-layout-footer');
}
NzFooterComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-footer',
exportAs: 'nzFooter',
preserveWhitespaces: false,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
template: "<ng-content></ng-content>",
styles: ["\n nz-footer {\n display: block;\n }\n "]
}] }
];
/** @nocollapse */
NzFooterComponent.ctorParameters = function () { return [
{ type: ElementRef },
{ type: Renderer2 }
]; };
return NzFooterComponent;
}());
if (false) {
/** @type {?} */
NzFooterComponent.prototype.elementRef;
/**
* @type {?}
* @private
*/
NzFooterComponent.prototype.renderer;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzHeaderComponent = /** @class */ (function () {
function NzHeaderComponent(elementRef, renderer) {
this.elementRef = elementRef;
this.renderer = renderer;
this.renderer.addClass(this.elementRef.nativeElement, 'ant-layout-header');
}
NzHeaderComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-header',
exportAs: 'nzHeader',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
preserveWhitespaces: false,
template: "<ng-content></ng-content>",
styles: ["\n nz-header {\n display: block;\n }\n "]
}] }
];
/** @nocollapse */
NzHeaderComponent.ctorParameters = function () { return [
{ type: ElementRef },
{ type: Renderer2 }
]; };
return NzHeaderComponent;
}());
if (false) {
/** @type {?} */
NzHeaderComponent.prototype.elementRef;
/**
* @type {?}
* @private
*/
NzHeaderComponent.prototype.renderer;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzLayoutComponent = /** @class */ (function () {
function NzLayoutComponent(elementRef, renderer) {
this.elementRef = elementRef;
this.renderer = renderer;
renderer.addClass(elementRef.nativeElement, 'ant-layout');
}
/**
* @return {?}
*/
NzLayoutComponent.prototype.destroySider = /**
* @return {?}
*/
function () {
this.renderer.removeClass(this.elementRef.nativeElement, 'ant-layout-has-sider');
};
/**
* @return {?}
*/
NzLayoutComponent.prototype.initSider = /**
* @return {?}
*/
function () {
this.renderer.addClass(this.elementRef.nativeElement, 'ant-layout-has-sider');
};
NzLayoutComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-layout',
exportAs: 'nzLayout',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
preserveWhitespaces: false,
template: "<ng-content></ng-content>"
}] }
];
/** @nocollapse */
NzLayoutComponent.ctorParameters = function () { return [
{ type: ElementRef },
{ type: Renderer2 }
]; };
return NzLayoutComponent;
}());
if (false) {
/**
* @type {?}
* @private
*/
NzLayoutComponent.prototype.elementRef;
/**
* @type {?}
* @private
*/
NzLayoutComponent.prototype.renderer;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzSiderComponent = /** @class */ (function () {
function NzSiderComponent(nzLayoutComponent, mediaMatcher, ngZone, platform, cdr, nzDomEventService, renderer, elementRef) {
this.nzLayoutComponent = nzLayoutComponent;
this.mediaMatcher = mediaMatcher;
this.ngZone = ngZone;
this.platform = platform;
this.cdr = cdr;
this.nzDomEventService = nzDomEventService;
this.below = false;
this.destroy$ = new Subject();
this.dimensionMap = {
xs: '480px',
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px',
xxl: '1600px'
};
this.nzCollapsedChange = new EventEmitter();
this.nzWidth = 200;
this.nzTheme = 'dark';
this.nzCollapsedWidth = 80;
this.nzReverseArrow = false;
this.nzCollapsible = false;
this.nzCollapsed = false;
renderer.addClass(elementRef.nativeElement, 'ant-layout-sider');
}
Object.defineProperty(NzSiderComponent.prototype, "trigger", {
get: /**
* @return {?}
*/
function () {
return this.nzTrigger !== undefined ? this.nzTrigger : this.defaultTrigger;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NzSiderComponent.prototype, "flexSetting", {
get: /**
* @return {?}
*/
function () {
return "0 0 " + this.widthSetting;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NzSiderComponent.prototype, "widthSetting", {
get: /**
* @return {?}
*/
function () {
if (this.nzCollapsed) {
return this.nzCollapsedWidth + "px";
}
else {
return toCssPixel(this.nzWidth);
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
NzSiderComponent.prototype.watchMatchMedia = /**
* @return {?}
*/
function () {
var _this = this;
if (this.nzBreakpoint) {
/** @type {?} */
var matchBelow = this.mediaMatcher.matchMedia("(max-width: " + this.dimensionMap[this.nzBreakpoint] + ")").matches;
this.below = matchBelow;
this.nzCollapsed = matchBelow;
this.nzCollapsedChange.emit(matchBelow);
this.ngZone.run((/**
* @return {?}
*/
function () {
_this.cdr.markForCheck();
}));
}
};
/**
* @return {?}
*/
NzSiderComponent.prototype.toggleCollapse = /**
* @return {?}
*/
function () {
this.nzCollapsed = !this.nzCollapsed;
this.nzCollapsedChange.emit(this.nzCollapsed);
};
Object.defineProperty(NzSiderComponent.prototype, "isZeroTrigger", {
get: /**
* @return {?}
*/
function () {
return (this.nzCollapsible &&
this.trigger &&
this.nzCollapsedWidth === 0 &&
((this.nzBreakpoint && this.below) || !this.nzBreakpoint));
},
enumerable: true,
configurable: true
});
Object.defineProperty(NzSiderComponent.prototype, "isSiderTrigger", {
get: /**
* @return {?}
*/
function () {
return this.nzCollapsible && this.trigger && this.nzCollapsedWidth !== 0;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
NzSiderComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
if (this.nzLayoutComponent) {
this.nzLayoutComponent.initSider();
}
};
/**
* @return {?}
*/
NzSiderComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
var _this = this;
if (this.platform.isBrowser) {
Promise.resolve().then((/**
* @return {?}
*/
function () { return _this.watchMatchMedia(); }));
this.nzDomEventService
.registerResizeListener()
.pipe(takeUntil(this.destroy$), finalize((/**
* @return {?}
*/
function () { return _this.nzDomEventService.unregisterResizeListener(); })))
.subscribe((/**
* @return {?}
*/
function () { return _this.watchMatchMedia(); }));
}
};
/**
* @return {?}
*/
NzSiderComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.destroy$.next();
this.destroy$.complete();
if (this.nzLayoutComponent) {
this.nzLayoutComponent.destroySider();
}
};
NzSiderComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-sider',
exportAs: 'nzSider',
preserveWhitespaces: false,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
template: "<div class=\"ant-layout-sider-children\">\n <ng-content></ng-content>\n</div>\n<span class=\"ant-layout-sider-zero-width-trigger\" *ngIf=\"isZeroTrigger\" (click)=\"toggleCollapse()\">\n <ng-template [ngTemplateOutlet]=\"nzZeroTrigger || zeroTrigger\"></ng-template>\n</span>\n<div class=\"ant-layout-sider-trigger\"\n *ngIf=\"isSiderTrigger\"\n (click)=\"toggleCollapse()\"\n [style.width]=\"widthSetting\">\n <ng-template [ngTemplateOutlet]=\"trigger\"></ng-template>\n</div>\n<ng-template #defaultTrigger>\n <i nz-icon [nzType]=\"nzCollapsed ? 'right' : 'left'\" *ngIf=\"!nzReverseArrow\"></i>\n <i nz-icon [nzType]=\"nzCollapsed ? 'left' : 'right'\" *ngIf=\"nzReverseArrow\"></i>\n</ng-template>\n<ng-template #zeroTrigger>\n <i nz-icon nzType=\"bars\"></i>\n</ng-template>",
host: {
'[class.ant-layout-sider-zero-width]': 'nzCollapsed && nzCollapsedWidth === 0',
'[class.ant-layout-sider-light]': "nzTheme === 'light'",
'[class.ant-layout-sider-collapsed]': 'nzCollapsed',
'[style.flex]': 'flexSetting',
'[style.max-width]': 'widthSetting',
'[style.min-width]': 'widthSetting',
'[style.width]': 'widthSetting'
}
}] }
];
/** @nocollapse */
NzSiderComponent.ctorParameters = function () { return [
{ type: NzLayoutComponent, decorators: [{ type: Optional }, { type: Host }] },
{ type: MediaMatcher },
{ type: NgZone },
{ type: Platform },
{ type: ChangeDetectorRef },
{ type: NzDomEventService },
{ type: Renderer2 },
{ type: ElementRef }
]; };
NzSiderComponent.propDecorators = {
nzCollapsedChange: [{ type: Output }],
nzWidth: [{ type: Input }],
nzTheme: [{ type: Input }],
nzCollapsedWidth: [{ type: Input }],
nzBreakpoint: [{ type: Input }],
nzZeroTrigger: [{ type: Input }],
nzReverseArrow: [{ type: Input }],
nzCollapsible: [{ type: Input }],
nzCollapsed: [{ type: Input }],
nzTrigger: [{ type: Input }],
defaultTrigger: [{ type: ViewChild, args: ['defaultTrigger', { static: true },] }]
};
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzSiderComponent.prototype, "nzReverseArrow", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzSiderComponent.prototype, "nzCollapsible", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzSiderComponent.prototype, "nzCollapsed", void 0);
return NzSiderComponent;
}());
if (false) {
/**
* @type {?}
* @private
*/
NzSiderComponent.prototype.below;
/**
* @type {?}
* @private
*/
NzSiderComponent.prototype.destroy$;
/**
* @type {?}
* @private
*/
NzSiderComponent.prototype.dimensionMap;
/** @type {?} */
NzSiderComponent.prototype.nzCollapsedChange;
/** @type {?} */
NzSiderComponent.prototype.nzWidth;
/** @type {?} */
NzSiderComponent.prototype.nzTheme;
/** @type {?} */
NzSiderComponent.prototype.nzCollapsedWidth;
/** @type {?} */
NzSiderComponent.prototype.nzBreakpoint;
/** @type {?} */
NzSiderComponent.prototype.nzZeroTrigger;
/** @type {?} */
NzSiderComponent.prototype.nzReverseArrow;
/** @type {?} */
NzSiderComponent.prototype.nzCollapsible;
/** @type {?} */
NzSiderComponent.prototype.nzCollapsed;
/** @type {?} */
NzSiderComponent.prototype.nzTrigger;
/** @type {?} */
NzSiderComponent.prototype.defaultTrigger;
/**
* @type {?}
* @private
*/
NzSiderComponent.prototype.nzLayoutComponent;
/**
* @type {?}
* @private
*/
NzSiderComponent.prototype.mediaMatcher;
/**
* @type {?}
* @private
*/
NzSiderComponent.prototype.ngZone;
/**
* @type {?}
* @private
*/
NzSiderComponent.prototype.platform;
/**
* @type {?}
* @private
*/
NzSiderComponent.prototype.cdr;
/**
* @type {?}
* @private
*/
NzSiderComponent.prototype.nzDomEventService;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzLayoutModule = /** @class */ (function () {
function NzLayoutModule() {
}
NzLayoutModule.decorators = [
{ type: NgModule, args: [{
declarations: [NzLayoutComponent, NzHeaderComponent, NzContentComponent, NzFooterComponent, NzSiderComponent],
exports: [NzLayoutComponent, NzHeaderComponent, NzContentComponent, NzFooterComponent, NzSiderComponent],
imports: [CommonModule, NzIconModule, LayoutModule, PlatformModule]
},] }
];
return NzLayoutModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NzContentComponent, NzFooterComponent, NzHeaderComponent, NzLayoutComponent, NzLayoutModule, NzSiderComponent };
//# sourceMappingURL=ng-zorro-antd-layout.js.map