ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
105 lines • 12.7 kB
JavaScript
/**
* 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
*/
import { __decorate } from "tslib";
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, Input, TemplateRef } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
import { InputBoolean } from 'ng-zorro-antd/core/util';
import { NzSpaceItemDirective } from './space-item.directive';
const NZ_CONFIG_MODULE_NAME = 'space';
const SPACE_SIZE = {
small: 8,
middle: 16,
large: 24
};
export class NzSpaceComponent {
constructor(nzConfigService, cdr) {
this.nzConfigService = nzConfigService;
this.cdr = cdr;
this._nzModuleName = NZ_CONFIG_MODULE_NAME;
this.nzDirection = 'horizontal';
this.nzSplit = null;
this.nzWrap = false;
this.nzSize = 'small';
this.spaceSize = SPACE_SIZE.small;
this.destroy$ = new Subject();
}
updateSpaceItems() {
const numberSize = typeof this.nzSize === 'string' ? SPACE_SIZE[this.nzSize] : this.nzSize;
this.spaceSize = numberSize / (this.nzSplit ? 2 : 1);
this.cdr.markForCheck();
}
ngOnChanges() {
this.updateSpaceItems();
this.mergedAlign = this.nzAlign === undefined && this.nzDirection === 'horizontal' ? 'center' : this.nzAlign;
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
ngAfterContentInit() {
this.updateSpaceItems();
this.items.changes.pipe(takeUntil(this.destroy$)).subscribe(() => {
this.cdr.markForCheck();
});
}
}
NzSpaceComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-space, [nz-space]',
exportAs: 'NzSpace',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<ng-content></ng-content>
<ng-template ngFor let-item let-last="last" let-index="index" [ngForOf]="items">
<div
class="ant-space-item"
[style.margin-bottom.px]="nzDirection === 'vertical' ? (last ? null : spaceSize) : null"
[style.margin-right.px]="nzDirection === 'horizontal' ? (last ? null : spaceSize) : null"
>
<ng-container [ngTemplateOutlet]="item"></ng-container>
</div>
<span
*ngIf="nzSplit && !last"
class="ant-space-split"
[style.margin-bottom.px]="nzDirection === 'vertical' ? (last ? null : spaceSize) : null"
[style.margin-right.px]="nzDirection === 'horizontal' ? (last ? null : spaceSize) : null"
>
<ng-template [ngTemplateOutlet]="nzSplit" [ngTemplateOutletContext]="{ $implicit: index }"></ng-template>
</span>
</ng-template>
`,
host: {
class: 'ant-space',
'[class.ant-space-horizontal]': 'nzDirection === "horizontal"',
'[class.ant-space-vertical]': 'nzDirection === "vertical"',
'[class.ant-space-align-start]': 'mergedAlign === "start"',
'[class.ant-space-align-end]': 'mergedAlign === "end"',
'[class.ant-space-align-center]': 'mergedAlign === "center"',
'[class.ant-space-align-baseline]': 'mergedAlign === "baseline"',
'[style.flex-wrap]': 'nzWrap ? "wrap" : null'
}
},] }
];
NzSpaceComponent.ctorParameters = () => [
{ type: NzConfigService },
{ type: ChangeDetectorRef }
];
NzSpaceComponent.propDecorators = {
nzDirection: [{ type: Input }],
nzAlign: [{ type: Input }],
nzSplit: [{ type: Input }],
nzWrap: [{ type: Input }],
nzSize: [{ type: Input }],
items: [{ type: ContentChildren, args: [NzSpaceItemDirective, { read: TemplateRef },] }]
};
__decorate([
InputBoolean()
], NzSpaceComponent.prototype, "nzWrap", void 0);
__decorate([
WithConfig()
], NzSpaceComponent.prototype, "nzSize", void 0);
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3BhY2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9zcGFjZS9zcGFjZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7OztHQUdHOztBQUVILE9BQU8sRUFFTCx1QkFBdUIsRUFDdkIsaUJBQWlCLEVBQ2pCLFNBQVMsRUFDVCxlQUFlLEVBQ2YsS0FBSyxFQUlMLFdBQVcsRUFDWixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQy9CLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUUzQyxPQUFPLEVBQWUsZUFBZSxFQUFFLFVBQVUsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBRXJGLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUV2RCxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUc5RCxNQUFNLHFCQUFxQixHQUFnQixPQUFPLENBQUM7QUFDbkQsTUFBTSxVQUFVLEdBRVo7SUFDRixLQUFLLEVBQUUsQ0FBQztJQUNSLE1BQU0sRUFBRSxFQUFFO0lBQ1YsS0FBSyxFQUFFLEVBQUU7Q0FDVixDQUFDO0FBcUNGLE1BQU0sT0FBTyxnQkFBZ0I7SUFpQjNCLFlBQW1CLGVBQWdDLEVBQVUsR0FBc0I7UUFBaEUsb0JBQWUsR0FBZixlQUFlLENBQWlCO1FBQVUsUUFBRyxHQUFILEdBQUcsQ0FBbUI7UUFkMUUsa0JBQWEsR0FBZ0IscUJBQXFCLENBQUM7UUFFbkQsZ0JBQVcsR0FBcUIsWUFBWSxDQUFDO1FBRTdDLFlBQU8sR0FBOEMsSUFBSSxDQUFDO1FBQzFDLFdBQU0sR0FBWSxLQUFLLENBQUM7UUFDMUIsV0FBTSxHQUFnQixPQUFPLENBQUM7UUFLckQsY0FBUyxHQUFXLFVBQVUsQ0FBQyxLQUFLLENBQUM7UUFDN0IsYUFBUSxHQUFHLElBQUksT0FBTyxFQUFFLENBQUM7SUFFcUQsQ0FBQztJQUUvRSxnQkFBZ0I7UUFDdEIsTUFBTSxVQUFVLEdBQUcsT0FBTyxJQUFJLENBQUMsTUFBTSxLQUFLLFFBQVEsQ0FBQyxDQUFDLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQztRQUMzRixJQUFJLENBQUMsU0FBUyxHQUFHLFVBQVUsR0FBRyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDckQsSUFBSSxDQUFDLEdBQUcsQ0FBQyxZQUFZLEVBQUUsQ0FBQztJQUMxQixDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDO1FBQ3hCLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDLE9BQU8sS0FBSyxTQUFTLElBQUksSUFBSSxDQUFDLFdBQVcsS0FBSyxZQUFZLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQztJQUMvRyxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDckIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUMzQixDQUFDO0lBRUQsa0JBQWtCO1FBQ2hCLElBQUksQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDO1FBQ3hCLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLEdBQUcsRUFBRTtZQUMvRCxJQUFJLENBQUMsR0FBRyxDQUFDLFlBQVksRUFBRSxDQUFDO1FBQzFCLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQzs7O1lBM0VGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsc0JBQXNCO2dCQUNoQyxRQUFRLEVBQUUsU0FBUztnQkFDbkIsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07Z0JBQy9DLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQW1CVDtnQkFDRCxJQUFJLEVBQUU7b0JBQ0osS0FBSyxFQUFFLFdBQVc7b0JBQ2xCLDhCQUE4QixFQUFFLDhCQUE4QjtvQkFDOUQsNEJBQTRCLEVBQUUsNEJBQTRCO29CQUMxRCwrQkFBK0IsRUFBRSx5QkFBeUI7b0JBQzFELDZCQUE2QixFQUFFLHVCQUF1QjtvQkFDdEQsZ0NBQWdDLEVBQUUsMEJBQTBCO29CQUM1RCxrQ0FBa0MsRUFBRSw0QkFBNEI7b0JBQ2hFLG1CQUFtQixFQUFFLHdCQUF3QjtpQkFDOUM7YUFDRjs7O1lBbERxQixlQUFlO1lBWm5DLGlCQUFpQjs7OzBCQW9FaEIsS0FBSztzQkFDTCxLQUFLO3NCQUNMLEtBQUs7cUJBQ0wsS0FBSztxQkFDTCxLQUFLO29CQUVMLGVBQWUsU0FBQyxvQkFBb0IsRUFBRSxFQUFFLElBQUksRUFBRSxXQUFXLEVBQUU7O0FBSG5DO0lBQWYsWUFBWSxFQUFFO2dEQUF5QjtBQUMxQjtJQUFiLFVBQVUsRUFBRTtnREFBK0IiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIFVzZSBvZiB0aGlzIHNvdXJjZSBjb2RlIGlzIGdvdmVybmVkIGJ5IGFuIE1JVC1zdHlsZSBsaWNlbnNlIHRoYXQgY2FuIGJlXG4gKiBmb3VuZCBpbiB0aGUgTElDRU5TRSBmaWxlIGF0IGh0dHBzOi8vZ2l0aHViLmNvbS9ORy1aT1JSTy9uZy16b3Jyby1hbnRkL2Jsb2IvbWFzdGVyL0xJQ0VOU0VcbiAqL1xuXG5pbXBvcnQge1xuICBBZnRlckNvbnRlbnRJbml0LFxuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gIENvbXBvbmVudCxcbiAgQ29udGVudENoaWxkcmVuLFxuICBJbnB1dCxcbiAgT25DaGFuZ2VzLFxuICBPbkRlc3Ryb3ksXG4gIFF1ZXJ5TGlzdCxcbiAgVGVtcGxhdGVSZWZcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTdWJqZWN0IH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyB0YWtlVW50aWwgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5cbmltcG9ydCB7IE56Q29uZmlnS2V5LCBOekNvbmZpZ1NlcnZpY2UsIFdpdGhDb25maWcgfSBmcm9tICduZy16b3Jyby1hbnRkL2NvcmUvY29uZmlnJztcbmltcG9ydCB7IEJvb2xlYW5JbnB1dCwgTnpTYWZlQW55IH0gZnJvbSAnbmctem9ycm8tYW50ZC9jb3JlL3R5cGVzJztcbmltcG9ydCB7IElucHV0Qm9vbGVhbiB9IGZyb20gJ25nLXpvcnJvLWFudGQvY29yZS91dGlsJztcblxuaW1wb3J0IHsgTnpTcGFjZUl0ZW1EaXJlY3RpdmUgfSBmcm9tICcuL3NwYWNlLWl0ZW0uZGlyZWN0aXZlJztcbmltcG9ydCB7IE56U3BhY2VBbGlnbiwgTnpTcGFjZURpcmVjdGlvbiwgTnpTcGFjZVNpemUsIE56U3BhY2VUeXBlIH0gZnJvbSAnLi90eXBlcyc7XG5cbmNvbnN0IE5aX0NPTkZJR19NT0RVTEVfTkFNRTogTnpDb25maWdLZXkgPSAnc3BhY2UnO1xuY29uc3QgU1BBQ0VfU0laRToge1xuICBbc2l6ZUtleSBpbiBOelNwYWNlVHlwZV06IG51bWJlcjtcbn0gPSB7XG4gIHNtYWxsOiA4LFxuICBtaWRkbGU6IDE2LFxuICBsYXJnZTogMjRcbn07XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ256LXNwYWNlLCBbbnotc3BhY2VdJyxcbiAgZXhwb3J0QXM6ICdOelNwYWNlJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHRlbXBsYXRlOiBgXG4gICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgIDxuZy10ZW1wbGF0ZSBuZ0ZvciBsZXQtaXRlbSBsZXQtbGFzdD1cImxhc3RcIiBsZXQtaW5kZXg9XCJpbmRleFwiIFtuZ0Zvck9mXT1cIml0ZW1zXCI+XG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzPVwiYW50LXNwYWNlLWl0ZW1cIlxuICAgICAgICBbc3R5bGUubWFyZ2luLWJvdHRvbS5weF09XCJuekRpcmVjdGlvbiA9PT0gJ3ZlcnRpY2FsJyA/IChsYXN0ID8gbnVsbCA6IHNwYWNlU2l6ZSkgOiBudWxsXCJcbiAgICAgICAgW3N0eWxlLm1hcmdpbi1yaWdodC5weF09XCJuekRpcmVjdGlvbiA9PT0gJ2hvcml6b250YWwnID8gKGxhc3QgPyBudWxsIDogc3BhY2VTaXplKSA6IG51bGxcIlxuICAgICAgPlxuICAgICAgICA8bmctY29udGFpbmVyIFtuZ1RlbXBsYXRlT3V0bGV0XT1cIml0ZW1cIj48L25nLWNvbnRhaW5lcj5cbiAgICAgIDwvZGl2PlxuICAgICAgPHNwYW5cbiAgICAgICAgKm5nSWY9XCJuelNwbGl0ICYmICFsYXN0XCJcbiAgICAgICAgY2xhc3M9XCJhbnQtc3BhY2Utc3BsaXRcIlxuICAgICAgICBbc3R5bGUubWFyZ2luLWJvdHRvbS5weF09XCJuekRpcmVjdGlvbiA9PT0gJ3ZlcnRpY2FsJyA/IChsYXN0ID8gbnVsbCA6IHNwYWNlU2l6ZSkgOiBudWxsXCJcbiAgICAgICAgW3N0eWxlLm1hcmdpbi1yaWdodC5weF09XCJuekRpcmVjdGlvbiA9PT0gJ2hvcml6b250YWwnID8gKGxhc3QgPyBudWxsIDogc3BhY2VTaXplKSA6IG51bGxcIlxuICAgICAgPlxuICAgICAgICA8bmctdGVtcGxhdGUgW25nVGVtcGxhdGVPdXRsZXRdPVwibnpTcGxpdFwiIFtuZ1RlbXBsYXRlT3V0bGV0Q29udGV4dF09XCJ7ICRpbXBsaWNpdDogaW5kZXggfVwiPjwvbmctdGVtcGxhdGU+XG4gICAgICA8L3NwYW4+XG4gICAgPC9uZy10ZW1wbGF0ZT5cbiAgYCxcbiAgaG9zdDoge1xuICAgIGNsYXNzOiAnYW50LXNwYWNlJyxcbiAgICAnW2NsYXNzLmFudC1zcGFjZS1ob3Jpem9udGFsXSc6ICduekRpcmVjdGlvbiA9PT0gXCJob3Jpem9udGFsXCInLFxuICAgICdbY2xhc3MuYW50LXNwYWNlLXZlcnRpY2FsXSc6ICduekRpcmVjdGlvbiA9PT0gXCJ2ZXJ0aWNhbFwiJyxcbiAgICAnW2NsYXNzLmFudC1zcGFjZS1hbGlnbi1zdGFydF0nOiAnbWVyZ2VkQWxpZ24gPT09IFwic3RhcnRcIicsXG4gICAgJ1tjbGFzcy5hbnQtc3BhY2UtYWxpZ24tZW5kXSc6ICdtZXJnZWRBbGlnbiA9PT0gXCJlbmRcIicsXG4gICAgJ1tjbGFzcy5hbnQtc3BhY2UtYWxpZ24tY2VudGVyXSc6ICdtZXJnZWRBbGlnbiA9PT0gXCJjZW50ZXJcIicsXG4gICAgJ1tjbGFzcy5hbnQtc3BhY2UtYWxpZ24tYmFzZWxpbmVdJzogJ21lcmdlZEFsaWduID09PSBcImJhc2VsaW5lXCInLFxuICAgICdbc3R5bGUuZmxleC13cmFwXSc6ICdueldyYXAgPyBcIndyYXBcIiA6IG51bGwnXG4gIH1cbn0pXG5leHBvcnQgY2xhc3MgTnpTcGFjZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcywgT25EZXN0cm95LCBBZnRlckNvbnRlbnRJbml0IHtcbiAgc3RhdGljIG5nQWNjZXB0SW5wdXRUeXBlX256V3JhcDogQm9vbGVhbklucHV0O1xuXG4gIHJlYWRvbmx5IF9uek1vZHVsZU5hbWU6IE56Q29uZmlnS2V5ID0gTlpfQ09ORklHX01PRFVMRV9OQU1FO1xuXG4gIEBJbnB1dCgpIG56RGlyZWN0aW9uOiBOelNwYWNlRGlyZWN0aW9uID0gJ2hvcml6b250YWwnO1xuICBASW5wdXQoKSBuekFsaWduPzogTnpTcGFjZUFsaWduO1xuICBASW5wdXQoKSBuelNwbGl0OiBUZW1wbGF0ZVJlZjx7ICRpbXBsaWNpdDogbnVtYmVyIH0+IHwgbnVsbCA9IG51bGw7XG4gIEBJbnB1dCgpIEBJbnB1dEJvb2xlYW4oKSBueldyYXA6IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCkgQFdpdGhDb25maWcoKSBuelNpemU6IE56U3BhY2VTaXplID0gJ3NtYWxsJztcblxuICBAQ29udGVudENoaWxkcmVuKE56U3BhY2VJdGVtRGlyZWN0aXZlLCB7IHJlYWQ6IFRlbXBsYXRlUmVmIH0pIGl0ZW1zITogUXVlcnlMaXN0PFRlbXBsYXRlUmVmPE56U2FmZUFueT4+O1xuXG4gIG1lcmdlZEFsaWduPzogTnpTcGFjZUFsaWduO1xuICBzcGFjZVNpemU6IG51bWJlciA9IFNQQUNFX1NJWkUuc21hbGw7XG4gIHByaXZhdGUgZGVzdHJveSQgPSBuZXcgU3ViamVjdCgpO1xuXG4gIGNvbnN0cnVjdG9yKHB1YmxpYyBuekNvbmZpZ1NlcnZpY2U6IE56Q29uZmlnU2VydmljZSwgcHJpdmF0ZSBjZHI6IENoYW5nZURldGVjdG9yUmVmKSB7fVxuXG4gIHByaXZhdGUgdXBkYXRlU3BhY2VJdGVtcygpOiB2b2lkIHtcbiAgICBjb25zdCBudW1iZXJTaXplID0gdHlwZW9mIHRoaXMubnpTaXplID09PSAnc3RyaW5nJyA/IFNQQUNFX1NJWkVbdGhpcy5uelNpemVdIDogdGhpcy5uelNpemU7XG4gICAgdGhpcy5zcGFjZVNpemUgPSBudW1iZXJTaXplIC8gKHRoaXMubnpTcGxpdCA/IDIgOiAxKTtcbiAgICB0aGlzLmNkci5tYXJrRm9yQ2hlY2soKTtcbiAgfVxuXG4gIG5nT25DaGFuZ2VzKCk6IHZvaWQge1xuICAgIHRoaXMudXBkYXRlU3BhY2VJdGVtcygpO1xuICAgIHRoaXMubWVyZ2VkQWxpZ24gPSB0aGlzLm56QWxpZ24gPT09IHVuZGVmaW5lZCAmJiB0aGlzLm56RGlyZWN0aW9uID09PSAnaG9yaXpvbnRhbCcgPyAnY2VudGVyJyA6IHRoaXMubnpBbGlnbjtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMuZGVzdHJveSQubmV4dCgpO1xuICAgIHRoaXMuZGVzdHJveSQuY29tcGxldGUoKTtcbiAgfVxuXG4gIG5nQWZ0ZXJDb250ZW50SW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLnVwZGF0ZVNwYWNlSXRlbXMoKTtcbiAgICB0aGlzLml0ZW1zLmNoYW5nZXMucGlwZSh0YWtlVW50aWwodGhpcy5kZXN0cm95JCkpLnN1YnNjcmliZSgoKSA9PiB7XG4gICAgICB0aGlzLmNkci5tYXJrRm9yQ2hlY2soKTtcbiAgICB9KTtcbiAgfVxufVxuIl19