@lxlib/seed
Version:
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.1.
673 lines (664 loc) • 20.6 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import { Injectable, ɵɵdefineInjectable, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Host, Optional, ElementRef, Renderer2, TemplateRef, ChangeDetectorRef, ContentChild, ViewChild, NgModule } from '@angular/core';
import { toNumber, InputNumber, InputBoolean, isEmpty, LxlibUtilModule } from '@lxlib/util';
import { RequiredValidator, NgModel, FormControlName } from '@angular/forms';
import { ResponsiveService } from '@lxlib/theme';
import { helpMotion } from 'ng-zorro-antd/core/animation';
import { CommonModule } from '@angular/common';
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
/**
* @fileoverview added by tsickle
* Generated from: se.config.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class SEConfig {
constructor() {
/**
* 大小，默认：`default`
* - `compact` 紧凑型，强制忽略 `error`、`extra` 展示
*/
this.size = 'default';
/**
* 布局类型，等同 `nzLayout`
* - `inline` 时强制大小为 `compact`
*/
this.nzLayout = 'horizontal';
/**
* 间距，当 `nzLayout:horizontal` 时有效，默认：`32`
*/
this.gutter = 32;
/**
* 列数，默认：`2`
*/
this.col = 2;
/**
* 标签文本宽度，单位：`px`，默认：`150`
*/
this.labelWidth = 150;
/**
* 是否立即呈现错误视觉
*/
this.firstVisual = false;
}
}
SEConfig.decorators = [
{ type: Injectable, args: [{ providedIn: 'root' },] }
];
/** @nocollapse */ SEConfig.ɵprov = ɵɵdefineInjectable({ factory: function SEConfig_Factory() { return new SEConfig(); }, token: SEConfig, providedIn: "root" });
if (false) {
/**
* 大小，默认：`default`
* - `compact` 紧凑型，强制忽略 `error`、`extra` 展示
* @type {?}
*/
SEConfig.prototype.size;
/**
* 布局类型，等同 `nzLayout`
* - `inline` 时强制大小为 `compact`
* @type {?}
*/
SEConfig.prototype.nzLayout;
/**
* 间距，当 `nzLayout:horizontal` 时有效，默认：`32`
* @type {?}
*/
SEConfig.prototype.gutter;
/**
* 列数，默认：`2`
* @type {?}
*/
SEConfig.prototype.col;
/**
* 标签文本宽度，单位：`px`，默认：`150`
* @type {?}
*/
SEConfig.prototype.labelWidth;
/**
* 是否立即呈现错误视觉
* @type {?}
*/
SEConfig.prototype.firstVisual;
}
/**
* @fileoverview added by tsickle
* Generated from: se-container.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class SEContainerComponent {
// #endregion
/**
* @param {?} cog
*/
constructor(cog) {
this.line = false;
Object.assign(this, Object.assign(Object.assign({}, new SEConfig()), cog));
}
/**
* @return {?}
*/
get gutter() {
return this.nzLayout === 'horizontal' ? this._gutter : 0;
}
/**
* @param {?} value
* @return {?}
*/
set gutter(value) {
this._gutter = toNumber(value);
}
/**
* @return {?}
*/
get nzLayout() {
return this._nzLayout;
}
/**
* @param {?} value
* @return {?}
*/
set nzLayout(value) {
this._nzLayout = value;
if (value === 'inline') {
this.size = 'compact';
}
}
}
SEContainerComponent.decorators = [
{ type: Component, args: [{
selector: 'se-container, [se-container]',
exportAs: 'seContainer',
template: "<div class=\"ant-row se__container se__{{nzLayout}} se__{{size}}\"\n [ngStyle]=\"{'margin-left.px': -(gutter / 2), 'margin-right.px': -(gutter / 2)}\">\n <se-title *ngIf=\"title\">\n <ng-container *nzStringTemplateOutlet=\"title\">{{ title }}</ng-container>\n </se-title>\n <ng-content></ng-content>\n</div>\n",
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
}] }
];
/** @nocollapse */
SEContainerComponent.ctorParameters = () => [
{ type: SEConfig }
];
SEContainerComponent.propDecorators = {
colInCon: [{ type: Input, args: ['se-container',] }],
col: [{ type: Input }],
labelWidth: [{ type: Input }],
title: [{ type: Input }],
gutter: [{ type: Input }],
nzLayout: [{ type: Input }],
size: [{ type: Input }],
firstVisual: [{ type: Input }],
line: [{ type: Input }]
};
__decorate([
InputNumber(null),
__metadata("design:type", Number)
], SEContainerComponent.prototype, "colInCon", void 0);
__decorate([
InputNumber(null),
__metadata("design:type", Number)
], SEContainerComponent.prototype, "col", void 0);
__decorate([
InputNumber(null),
__metadata("design:type", Number)
], SEContainerComponent.prototype, "labelWidth", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Boolean)
], SEContainerComponent.prototype, "firstVisual", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], SEContainerComponent.prototype, "line", void 0);
if (false) {
/** @type {?} */
SEContainerComponent.prototype.colInCon;
/** @type {?} */
SEContainerComponent.prototype.col;
/** @type {?} */
SEContainerComponent.prototype.labelWidth;
/** @type {?} */
SEContainerComponent.prototype.title;
/**
* @type {?}
* @private
*/
SEContainerComponent.prototype._gutter;
/**
* @type {?}
* @private
*/
SEContainerComponent.prototype._nzLayout;
/** @type {?} */
SEContainerComponent.prototype.size;
/** @type {?} */
SEContainerComponent.prototype.firstVisual;
/** @type {?} */
SEContainerComponent.prototype.line;
}
/**
* @fileoverview added by tsickle
* Generated from: se-title.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class SETitleComponent {
/**
* @param {?} parent
* @param {?} el
* @param {?} ren
*/
constructor(parent, el, ren) {
this.parent = parent;
this.ren = ren;
if (parent == null) {
throw new Error(`[se-title] must include 'se-container' component`);
}
this.el = el.nativeElement;
}
/**
* @private
* @return {?}
*/
setClass() {
const { gutter } = this.parent;
const { el } = this;
this.ren.setStyle(el, 'padding-left', `${gutter / 2}px`);
this.ren.setStyle(el, 'padding-right', `${gutter / 2}px`);
}
/**
* @return {?}
*/
ngOnInit() {
this.setClass();
}
}
SETitleComponent.decorators = [
{ type: Component, args: [{
selector: 'se-title, [se-title]',
exportAs: 'seTitle',
template: '<ng-content></ng-content>',
host: {
'[class.se__title]': 'true',
},
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
}] }
];
/** @nocollapse */
SETitleComponent.ctorParameters = () => [
{ type: SEContainerComponent, decorators: [{ type: Host }, { type: Optional }] },
{ type: ElementRef },
{ type: Renderer2 }
];
if (false) {
/**
* @type {?}
* @private
*/
SETitleComponent.prototype.el;
/**
* @type {?}
* @private
*/
SETitleComponent.prototype.parent;
/**
* @type {?}
* @private
*/
SETitleComponent.prototype.ren;
}
/**
* @fileoverview added by tsickle
* Generated from: se.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const prefixCls = `se`;
/** @type {?} */
let nextUniqueId = 0;
class SEComponent {
/**
* @param {?} el
* @param {?} parent
* @param {?} rep
* @param {?} ren
* @param {?} cdr
*/
constructor(el, parent, rep, ren, cdr) {
this.parent = parent;
this.rep = rep;
this.ren = ren;
this.cdr = cdr;
this.clsMap = [];
this.inited = false;
this.onceFlag = false;
this.errorData = {};
this.invalid = false;
this._labelWidth = null;
this.required = false;
this.controlClass = '';
this._id = `_se-${nextUniqueId++}`;
this._autoId = true;
if (parent == null) {
throw new Error(`[se] must include 'se-container' component`);
}
this.el = el.nativeElement;
}
/**
* @param {?} val
* @return {?}
*/
set error(val) {
this.errorData = typeof val === 'string' || val instanceof TemplateRef ? { '': val } : val;
}
/**
* @param {?} value
* @return {?}
*/
set id(value) {
this._id = value;
this._autoId = false;
}
// #endregion
/**
* @return {?}
*/
get paddingValue() {
return this.parent.gutter / 2;
}
/**
* @return {?}
*/
get showErr() {
return this.invalid && !!this._error;
}
/**
* @return {?}
*/
get compact() {
return this.parent.size === 'compact';
}
/**
* @private
* @return {?}
*/
get ngControl() {
return this.ngModel || this.formControlName;
}
/**
* @private
* @template THIS
* @this {THIS}
* @return {THIS}
*/
setClass() {
const { el, ren, clsMap, col, parent, cdr, line, labelWidth, rep } = (/** @type {?} */ (this));
(/** @type {?} */ (this))._labelWidth = parent.nzLayout === 'horizontal' ? (labelWidth != null ? labelWidth : parent.labelWidth) : null;
clsMap.forEach((/**
* @param {?} cls
* @return {?}
*/
cls => ren.removeClass(el, cls)));
clsMap.length = 0;
/** @type {?} */
const repCls = parent.nzLayout === 'horizontal' ? rep.genCls(col != null ? col : parent.colInCon || parent.col) : [];
clsMap.push(`ant-form-item`, ...repCls, `${prefixCls}__item`);
if (line || parent.line) {
clsMap.push(`${prefixCls}__line`);
}
clsMap.forEach((/**
* @param {?} cls
* @return {?}
*/
cls => ren.addClass(el, cls)));
cdr.detectChanges();
return (/** @type {?} */ (this));
}
/**
* @private
* @return {?}
*/
bindModel() {
var _a, _b, _c;
if (!this.ngControl || this.status$)
return;
this.status$ = (/** @type {?} */ (this.ngControl.statusChanges)).subscribe((/**
* @param {?} res
* @return {?}
*/
res => this.updateStatus(res === 'INVALID')));
if (this._autoId) {
/** @type {?} */
const control = (/** @type {?} */ ((_b = (_a = ((/** @type {?} */ (this.ngControl.valueAccessor)))) === null || _a === void 0 ? void 0 : _a._elementRef) === null || _b === void 0 ? void 0 : _b.nativeElement));
if (control) {
control.id = this._id;
}
}
// auto required
if (this.required !== true) {
/** @type {?} */
const rawValidators = (/** @type {?} */ ((_c = ((/** @type {?} */ (this.ngControl)))) === null || _c === void 0 ? void 0 : _c._rawValidators));
this.required = rawValidators.find((/**
* @param {?} w
* @return {?}
*/
w => w instanceof RequiredValidator)) != null;
this.cdr.detectChanges();
}
}
/**
* @private
* @param {?} invalid
* @return {?}
*/
updateStatus(invalid) {
if (this.ngControl.disabled || this.ngControl.isDisabled) {
return;
}
this.invalid = (/** @type {?} */ (((invalid && this.onceFlag) || (this.ngControl.dirty && invalid))));
/** @type {?} */
const errors = this.ngControl.errors;
if (errors != null && Object.keys(errors).length > 0) {
/** @type {?} */
const key = Object.keys(errors)[0] || '';
/** @type {?} */
const err = this.errorData[key];
this._error = err != null ? err : this.errorData[''] || '';
}
this.cdr.detectChanges();
}
/**
* @return {?}
*/
checkContent() {
/** @type {?} */
const el = this.contentElement.nativeElement;
/** @type {?} */
const cls = `${prefixCls}__item-empty`;
if (isEmpty(el)) {
this.ren.addClass(el, cls);
}
else {
this.ren.removeClass(el, cls);
}
}
/**
* @return {?}
*/
ngAfterContentInit() {
this.checkContent();
}
/**
* @return {?}
*/
ngOnChanges() {
this.onceFlag = this.parent.firstVisual;
if (this.inited)
this.setClass().bindModel();
}
/**
* @return {?}
*/
ngAfterViewInit() {
this.setClass().bindModel();
this.inited = true;
if (this.onceFlag) {
Promise.resolve().then((/**
* @return {?}
*/
() => {
this.updateStatus((/** @type {?} */ (this.ngControl.invalid)));
this.onceFlag = false;
}));
}
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this.status$) {
this.status$.unsubscribe();
}
}
}
SEComponent.decorators = [
{ type: Component, args: [{
selector: 'se',
exportAs: 'se',
template: "<div class=\"ant-form-item-label\" [class.se__nolabel]=\"!label\" [style.width.px]=\"_labelWidth\">\n <label *ngIf=\"label\" [attr.for]=\"_id\" class=\"se__label\" [ngClass]=\"{'ant-form-item-required': required}\">\n <span class=\"se__label-text\">\n <ng-container *nzStringTemplateOutlet=\"label\">{{ label }}</ng-container>\n </span>\n <span *ngIf=\"optional || optionalHelp\" class=\"se__label-optional\" [class.se__label-optional-no-text]=\"!optional\">\n <ng-container *nzStringTemplateOutlet=\"optional\">{{ optional }}</ng-container>\n <i *ngIf=\"optionalHelp\" nz-tooltip [nzTooltipTitle]=\"optionalHelp\" nz-icon nzType=\"question-circle\"></i>\n </span>\n </label>\n</div>\n<div class=\"ant-form-item-control se__control\">\n <div class=\"ant-form-item-control-input {{controlClass}}\">\n <div class=\"ant-form-item-control-input-content\" (cdkObserveContent)=\"checkContent()\" #contentElement>\n <ng-content></ng-content>\n </div>\n </div>\n <div class=\"ant-form-item-explain\" *ngIf=\"showErr && !compact\">\n <div @helpMotion>\n <ng-container *nzStringTemplateOutlet=\"_error\">{{ _error }}</ng-container>\n </div>\n </div>\n <div *ngIf=\"extra && !compact\" class=\"ant-form-item-extra\">\n <ng-container *nzStringTemplateOutlet=\"extra\">{{ extra }}</ng-container>\n </div>\n</div>\n",
host: {
'[style.padding-left.px]': 'paddingValue',
'[style.padding-right.px]': 'paddingValue',
'[class.ant-form-item-has-error]': 'showErr',
'[class.ant-form-item-with-help]': 'showErr && !compact',
},
preserveWhitespaces: false,
animations: [helpMotion],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
}] }
];
/** @nocollapse */
SEComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: SEContainerComponent, decorators: [{ type: Optional }, { type: Host }] },
{ type: ResponsiveService },
{ type: Renderer2 },
{ type: ChangeDetectorRef }
];
SEComponent.propDecorators = {
ngModel: [{ type: ContentChild, args: [NgModel, { static: true },] }],
formControlName: [{ type: ContentChild, args: [FormControlName, { static: true },] }],
contentElement: [{ type: ViewChild, args: ['contentElement', { static: true },] }],
optional: [{ type: Input }],
optionalHelp: [{ type: Input }],
error: [{ type: Input }],
extra: [{ type: Input }],
label: [{ type: Input }],
col: [{ type: Input }],
required: [{ type: Input }],
controlClass: [{ type: Input }],
line: [{ type: Input }],
labelWidth: [{ type: Input }],
id: [{ type: Input }]
};
__decorate([
InputNumber(null),
__metadata("design:type", Number)
], SEComponent.prototype, "col", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], SEComponent.prototype, "required", void 0);
__decorate([
InputBoolean(null),
__metadata("design:type", Boolean)
], SEComponent.prototype, "line", void 0);
__decorate([
InputNumber(null),
__metadata("design:type", Number)
], SEComponent.prototype, "labelWidth", void 0);
if (false) {
/**
* @type {?}
* @private
*/
SEComponent.prototype.el;
/**
* @type {?}
* @private
*/
SEComponent.prototype.status$;
/**
* @type {?}
* @private
*/
SEComponent.prototype.ngModel;
/**
* @type {?}
* @private
*/
SEComponent.prototype.formControlName;
/**
* @type {?}
* @private
*/
SEComponent.prototype.contentElement;
/**
* @type {?}
* @private
*/
SEComponent.prototype.clsMap;
/**
* @type {?}
* @private
*/
SEComponent.prototype.inited;
/**
* @type {?}
* @private
*/
SEComponent.prototype.onceFlag;
/**
* @type {?}
* @private
*/
SEComponent.prototype.errorData;
/** @type {?} */
SEComponent.prototype.invalid;
/** @type {?} */
SEComponent.prototype._labelWidth;
/** @type {?} */
SEComponent.prototype._error;
/** @type {?} */
SEComponent.prototype.optional;
/** @type {?} */
SEComponent.prototype.optionalHelp;
/** @type {?} */
SEComponent.prototype.extra;
/** @type {?} */
SEComponent.prototype.label;
/** @type {?} */
SEComponent.prototype.col;
/** @type {?} */
SEComponent.prototype.required;
/** @type {?} */
SEComponent.prototype.controlClass;
/** @type {?} */
SEComponent.prototype.line;
/** @type {?} */
SEComponent.prototype.labelWidth;
/** @type {?} */
SEComponent.prototype._id;
/** @type {?} */
SEComponent.prototype._autoId;
/**
* @type {?}
* @private
*/
SEComponent.prototype.parent;
/**
* @type {?}
* @private
*/
SEComponent.prototype.rep;
/**
* @type {?}
* @private
*/
SEComponent.prototype.ren;
/**
* @type {?}
* @private
*/
SEComponent.prototype.cdr;
}
/**
* @fileoverview added by tsickle
* Generated from: se.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const COMPONENTS = [SEContainerComponent, SEComponent, SETitleComponent];
class SEModule {
}
SEModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, LxlibUtilModule, NzToolTipModule, NzIconModule, NzOutletModule],
declarations: [...COMPONENTS],
exports: [...COMPONENTS],
},] }
];
/**
* @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: edit.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { SEComponent, SEConfig, SEContainerComponent, SEModule, SETitleComponent };
//# sourceMappingURL=edit.js.map