ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
537 lines (526 loc) • 19.8 kB
JavaScript
import { Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, Renderer2, EventEmitter, ChangeDetectorRef, ContentChild, Output, Input, ContentChildren, NgModule } from '@angular/core';
import { __decorate, __metadata } from 'tslib';
import { Platform, PlatformModule } from '@angular/cdk/platform';
import { siderResponsiveMap, NzBreakpointService } from 'ng-zorro-antd/core/services';
import { toCssPixel, inNextTick, InputBoolean } from 'ng-zorro-antd/core/util';
import { NzMenuDirective } from 'ng-zorro-antd/menu';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { LayoutModule } from '@angular/cdk/layout';
import { CommonModule } from '@angular/common';
import { NzIconModule } from 'ng-zorro-antd/icon';
/**
* @fileoverview added by tsickle
* Generated from: content.component.ts
* @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: "\n <ng-content></ng-content>\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
* Generated from: footer.component.ts
* @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: "\n <ng-content></ng-content>\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
* Generated from: header.component.ts
* @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: "\n <ng-content></ng-content>\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
* Generated from: sider.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzSiderComponent = /** @class */ (function () {
function NzSiderComponent(platform, cdr, breakpointService) {
this.platform = platform;
this.cdr = cdr;
this.breakpointService = breakpointService;
this.destroy$ = new Subject();
this.nzMenuDirective = null;
this.nzCollapsedChange = new EventEmitter();
this.nzWidth = 200;
this.nzTheme = 'dark';
this.nzCollapsedWidth = 80;
this.nzBreakpoint = null;
this.nzZeroTrigger = null;
this.nzTrigger = undefined;
this.nzReverseArrow = false;
this.nzCollapsible = false;
this.nzCollapsed = false;
this.matchBreakPoint = false;
this.flexSetting = null;
this.widthSetting = null;
}
/**
* @return {?}
*/
NzSiderComponent.prototype.updateStyleMap = /**
* @return {?}
*/
function () {
this.widthSetting = this.nzCollapsed ? this.nzCollapsedWidth + "px" : toCssPixel(this.nzWidth);
this.flexSetting = "0 0 " + this.widthSetting;
this.cdr.markForCheck();
};
/**
* @return {?}
*/
NzSiderComponent.prototype.updateMenuInlineCollapsed = /**
* @return {?}
*/
function () {
if (this.nzMenuDirective && this.nzMenuDirective.nzMode === 'inline' && this.nzCollapsedWidth !== 0) {
this.nzMenuDirective.setInlineCollapsed(this.nzCollapsed);
}
};
/**
* @param {?} collapsed
* @return {?}
*/
NzSiderComponent.prototype.setCollapsed = /**
* @param {?} collapsed
* @return {?}
*/
function (collapsed) {
if (collapsed !== this.nzCollapsed) {
this.nzCollapsed = collapsed;
this.nzCollapsedChange.emit(collapsed);
this.updateMenuInlineCollapsed();
this.updateStyleMap();
this.cdr.markForCheck();
}
};
/**
* @return {?}
*/
NzSiderComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this.updateStyleMap();
if (this.platform.isBrowser) {
this.breakpointService
.subscribe(siderResponsiveMap, true)
.pipe(takeUntil(this.destroy$))
.subscribe((/**
* @param {?} map
* @return {?}
*/
function (map) {
/** @type {?} */
var breakpoint = _this.nzBreakpoint;
if (breakpoint) {
inNextTick().subscribe((/**
* @return {?}
*/
function () {
_this.matchBreakPoint = !map[breakpoint];
_this.setCollapsed(_this.matchBreakPoint);
_this.cdr.markForCheck();
}));
}
}));
}
};
/**
* @param {?} changes
* @return {?}
*/
NzSiderComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
var nzCollapsed = changes.nzCollapsed, nzCollapsedWidth = changes.nzCollapsedWidth, nzWidth = changes.nzWidth;
if (nzCollapsed || nzCollapsedWidth || nzWidth) {
this.updateStyleMap();
}
if (nzCollapsed) {
this.updateMenuInlineCollapsed();
}
};
/**
* @return {?}
*/
NzSiderComponent.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
this.updateMenuInlineCollapsed();
};
/**
* @return {?}
*/
NzSiderComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.destroy$.next();
this.destroy$.complete();
};
NzSiderComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-sider',
exportAs: 'nzSider',
preserveWhitespaces: false,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
template: "\n <div class=\"ant-layout-sider-children\">\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"nzCollapsible && nzTrigger !== null\"\n nz-sider-trigger\n [matchBreakPoint]=\"matchBreakPoint\"\n [nzCollapsedWidth]=\"nzCollapsedWidth\"\n [nzCollapsed]=\"nzCollapsed\"\n [nzBreakpoint]=\"nzBreakpoint\"\n [nzReverseArrow]=\"nzReverseArrow\"\n [nzTrigger]=\"nzTrigger\"\n [nzZeroTrigger]=\"nzZeroTrigger\"\n [siderWidth]=\"widthSetting\"\n (click)=\"setCollapsed(!nzCollapsed)\"\n ></div>\n ",
host: {
'[class.ant-layout-sider]': 'true',
'[class.ant-layout-sider-zero-width]': "nzCollapsed && nzCollapsedWidth === 0",
'[class.ant-layout-sider-light]': "nzTheme === 'light'",
'[class.ant-layout-sider-dark]': "nzTheme === 'dark'",
'[class.ant-layout-sider-collapsed]': "nzCollapsed",
'[style.flex]': 'flexSetting',
'[style.maxWidth]': 'widthSetting',
'[style.minWidth]': 'widthSetting',
'[style.width]': 'widthSetting'
}
}] }
];
/** @nocollapse */
NzSiderComponent.ctorParameters = function () { return [
{ type: Platform },
{ type: ChangeDetectorRef },
{ type: NzBreakpointService }
]; };
NzSiderComponent.propDecorators = {
nzMenuDirective: [{ type: ContentChild, args: [NzMenuDirective,] }],
nzCollapsedChange: [{ type: Output }],
nzWidth: [{ type: Input }],
nzTheme: [{ type: Input }],
nzCollapsedWidth: [{ type: Input }],
nzBreakpoint: [{ type: Input }],
nzZeroTrigger: [{ type: Input }],
nzTrigger: [{ type: Input }],
nzReverseArrow: [{ type: Input }],
nzCollapsible: [{ type: Input }],
nzCollapsed: [{ type: Input }]
};
__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 {?} */
NzSiderComponent.ngAcceptInputType_nzReverseArrow;
/** @type {?} */
NzSiderComponent.ngAcceptInputType_nzCollapsible;
/** @type {?} */
NzSiderComponent.ngAcceptInputType_nzCollapsed;
/**
* @type {?}
* @private
*/
NzSiderComponent.prototype.destroy$;
/** @type {?} */
NzSiderComponent.prototype.nzMenuDirective;
/** @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.nzTrigger;
/** @type {?} */
NzSiderComponent.prototype.nzReverseArrow;
/** @type {?} */
NzSiderComponent.prototype.nzCollapsible;
/** @type {?} */
NzSiderComponent.prototype.nzCollapsed;
/** @type {?} */
NzSiderComponent.prototype.matchBreakPoint;
/** @type {?} */
NzSiderComponent.prototype.flexSetting;
/** @type {?} */
NzSiderComponent.prototype.widthSetting;
/**
* @type {?}
* @private
*/
NzSiderComponent.prototype.platform;
/**
* @type {?}
* @private
*/
NzSiderComponent.prototype.cdr;
/**
* @type {?}
* @private
*/
NzSiderComponent.prototype.breakpointService;
}
/**
* @fileoverview added by tsickle
* Generated from: layout.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzLayoutComponent = /** @class */ (function () {
function NzLayoutComponent() {
}
NzLayoutComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-layout',
exportAs: 'nzLayout',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
preserveWhitespaces: false,
template: "\n <ng-content></ng-content>\n ",
host: {
'[class.ant-layout-has-sider]': 'listOfNzSiderComponent.length > 0',
'[class.ant-layout]': 'true'
}
}] }
];
NzLayoutComponent.propDecorators = {
listOfNzSiderComponent: [{ type: ContentChildren, args: [NzSiderComponent,] }]
};
return NzLayoutComponent;
}());
if (false) {
/** @type {?} */
NzLayoutComponent.prototype.listOfNzSiderComponent;
}
/**
* @fileoverview added by tsickle
* Generated from: sider-trigger.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzSiderTriggerComponent = /** @class */ (function () {
function NzSiderTriggerComponent() {
this.nzCollapsed = false;
this.nzReverseArrow = false;
this.nzZeroTrigger = null;
this.nzTrigger = undefined;
this.matchBreakPoint = false;
this.nzCollapsedWidth = null;
this.siderWidth = null;
this.nzBreakpoint = null;
this.isZeroTrigger = false;
this.isNormalTrigger = false;
}
/**
* @return {?}
*/
NzSiderTriggerComponent.prototype.updateTriggerType = /**
* @return {?}
*/
function () {
this.isZeroTrigger = this.nzCollapsedWidth === 0 && ((this.nzBreakpoint && this.matchBreakPoint) || !this.nzBreakpoint);
this.isNormalTrigger = this.nzCollapsedWidth !== 0;
};
/**
* @return {?}
*/
NzSiderTriggerComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.updateTriggerType();
};
/**
* @return {?}
*/
NzSiderTriggerComponent.prototype.ngOnChanges = /**
* @return {?}
*/
function () {
this.updateTriggerType();
};
NzSiderTriggerComponent.decorators = [
{ type: Component, args: [{
selector: '[nz-sider-trigger]',
exportAs: 'nzSiderTrigger',
preserveWhitespaces: false,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
template: "\n <ng-container *ngIf=\"isZeroTrigger\">\n <ng-template [ngTemplateOutlet]=\"nzZeroTrigger || defaultZeroTrigger\"></ng-template>\n </ng-container>\n <ng-container *ngIf=\"isNormalTrigger\">\n <ng-template [ngTemplateOutlet]=\"nzTrigger || defaultTrigger\"></ng-template>\n </ng-container>\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 #defaultZeroTrigger>\n <i nz-icon nzType=\"bars\"></i>\n </ng-template>\n ",
host: {
'[class.ant-layout-sider-trigger]': 'isNormalTrigger',
'[style.width]': 'isNormalTrigger ? siderWidth : null',
'[class.ant-layout-sider-zero-width-trigger]': 'isZeroTrigger',
'[class.ant-layout-sider-zero-width-trigger-right]': 'isZeroTrigger && nzReverseArrow',
'[class.ant-layout-sider-zero-width-trigger-left]': 'isZeroTrigger && !nzReverseArrow'
}
}] }
];
NzSiderTriggerComponent.propDecorators = {
nzCollapsed: [{ type: Input }],
nzReverseArrow: [{ type: Input }],
nzZeroTrigger: [{ type: Input }],
nzTrigger: [{ type: Input }],
matchBreakPoint: [{ type: Input }],
nzCollapsedWidth: [{ type: Input }],
siderWidth: [{ type: Input }],
nzBreakpoint: [{ type: Input }]
};
return NzSiderTriggerComponent;
}());
if (false) {
/** @type {?} */
NzSiderTriggerComponent.prototype.nzCollapsed;
/** @type {?} */
NzSiderTriggerComponent.prototype.nzReverseArrow;
/** @type {?} */
NzSiderTriggerComponent.prototype.nzZeroTrigger;
/** @type {?} */
NzSiderTriggerComponent.prototype.nzTrigger;
/** @type {?} */
NzSiderTriggerComponent.prototype.matchBreakPoint;
/** @type {?} */
NzSiderTriggerComponent.prototype.nzCollapsedWidth;
/** @type {?} */
NzSiderTriggerComponent.prototype.siderWidth;
/** @type {?} */
NzSiderTriggerComponent.prototype.nzBreakpoint;
/** @type {?} */
NzSiderTriggerComponent.prototype.isZeroTrigger;
/** @type {?} */
NzSiderTriggerComponent.prototype.isNormalTrigger;
}
/**
* @fileoverview added by tsickle
* Generated from: layout.module.ts
* @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, NzSiderTriggerComponent],
exports: [NzLayoutComponent, NzHeaderComponent, NzContentComponent, NzFooterComponent, NzSiderComponent],
imports: [CommonModule, NzIconModule, LayoutModule, PlatformModule]
},] }
];
return NzLayoutModule;
}());
/**
* @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-layout.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NzContentComponent, NzFooterComponent, NzHeaderComponent, NzLayoutComponent, NzLayoutModule, NzSiderComponent, NzSiderTriggerComponent as ɵNzSiderTriggerComponent };
//# sourceMappingURL=ng-zorro-antd-layout.js.map