ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
779 lines (771 loc) • 24.1 kB
JavaScript
import { InjectionToken, Injectable, Inject, Optional, ɵɵdefineInjectable, ɵɵinject, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, forwardRef, NgZone, ElementRef, Input, Output, NgModule } from '@angular/core';
import { __spread, __assign, __read, __decorate, __metadata } from 'tslib';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { warnDeprecation, warn, PREFIX } from 'ng-zorro-antd/core/logger';
import { inNextTick, InputBoolean } from 'ng-zorro-antd/core/util';
import { Subject, BehaviorSubject, of, combineLatest, fromEvent } from 'rxjs';
import { tap, map, takeUntil, debounceTime, filter, distinctUntilChanged } from 'rxjs/operators';
import { DOCUMENT, CommonModule } from '@angular/common';
import { NzConfigService } from 'ng-zorro-antd/core/config';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzSpinModule } from 'ng-zorro-antd/spin';
/**
* @fileoverview added by tsickle
* Generated from: typings.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @enum {string} */
var NzCodeEditorLoadingStatus = {
UNLOAD: "unload",
LOADING: "loading",
LOADED: "LOADED",
};
/**
* @record
*/
function NzCodeEditorConfig() { }
if (false) {
/** @type {?|undefined} */
NzCodeEditorConfig.prototype.assetsRoot;
/** @type {?|undefined} */
NzCodeEditorConfig.prototype.defaultEditorOption;
/** @type {?|undefined} */
NzCodeEditorConfig.prototype.useStaticLoading;
/**
* @return {?}
*/
NzCodeEditorConfig.prototype.onLoad = function () { };
/**
* @return {?}
*/
NzCodeEditorConfig.prototype.onFirstEditorInit = function () { };
/**
* @return {?}
*/
NzCodeEditorConfig.prototype.onInit = function () { };
}
/** @type {?} */
var NZ_CODE_EDITOR_CONFIG = new InjectionToken('nz-code-editor-config', {
providedIn: 'root',
factory: NZ_CODE_EDITOR_CONFIG_FACTORY
});
/**
* @return {?}
*/
function NZ_CODE_EDITOR_CONFIG_FACTORY() {
return {};
}
/**
* @fileoverview added by tsickle
* Generated from: code-editor.service.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var NZ_CONFIG_COMPONENT_NAME = 'codeEditor';
/**
* @param {?=} fn
* @return {?}
*/
function tryTriggerFunc(fn) {
return (/**
* @param {...?} args
* @return {?}
*/
function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
if (fn) {
fn.apply(void 0, __spread(args));
}
});
}
var NzCodeEditorService = /** @class */ (function () {
function NzCodeEditorService(nzConfigService, _document, config) {
var _this = this;
this.nzConfigService = nzConfigService;
this.firstEditorInitialized = false;
this.loaded$ = new Subject();
this.loadingStatus = NzCodeEditorLoadingStatus.UNLOAD;
this.option$ = new BehaviorSubject(this.option);
/** @type {?} */
var globalConfig = this.nzConfigService.getConfigForComponent(NZ_CONFIG_COMPONENT_NAME);
if (config) {
warnDeprecation("'NZ_CODE_EDITOR_CONFIG' is deprecated and will be removed in next minor version. Please use 'NzConfigService' instead.");
}
this.document = _document;
this.config = __assign(__assign({}, config), globalConfig);
this.option = this.config.defaultEditorOption || {};
this.nzConfigService.getConfigChangeEventForComponent(NZ_CONFIG_COMPONENT_NAME).subscribe((/**
* @return {?}
*/
function () {
/** @type {?} */
var newGlobalConfig = _this.nzConfigService.getConfigForComponent(NZ_CONFIG_COMPONENT_NAME);
if (newGlobalConfig) {
_this._updateDefaultOption(newGlobalConfig.defaultEditorOption);
}
}));
}
/**
* @param {?} option
* @return {?}
*/
NzCodeEditorService.prototype.updateDefaultOption = /**
* @param {?} option
* @return {?}
*/
function (option) {
warnDeprecation("'updateDefaultOption' is deprecated and will be removed in next minor version. Please use 'set' of 'NzConfigService' instead.");
this._updateDefaultOption(option);
};
/**
* @private
* @param {?} option
* @return {?}
*/
NzCodeEditorService.prototype._updateDefaultOption = /**
* @private
* @param {?} option
* @return {?}
*/
function (option) {
this.option = __assign(__assign({}, this.option), option);
this.option$.next(this.option);
if (option.theme) {
monaco.editor.setTheme(option.theme);
}
};
/**
* @return {?}
*/
NzCodeEditorService.prototype.requestToInit = /**
* @return {?}
*/
function () {
var _this = this;
if (this.loadingStatus === NzCodeEditorLoadingStatus.LOADED) {
this.onInit();
return of(this.getLatestOption());
}
if (this.loadingStatus === NzCodeEditorLoadingStatus.UNLOAD) {
if (this.config.useStaticLoading && typeof monaco === 'undefined') {
warn('You choose to use static loading but it seems that you forget ' +
'to config webpack plugin correctly. Please refer to our official website' +
'for more details about static loading.');
}
else {
this.loadMonacoScript();
}
}
return this.loaded$.asObservable().pipe(tap((/**
* @return {?}
*/
function () { return _this.onInit(); })), map((/**
* @return {?}
*/
function () { return _this.getLatestOption(); })));
};
/**
* @private
* @return {?}
*/
NzCodeEditorService.prototype.loadMonacoScript = /**
* @private
* @return {?}
*/
function () {
var _this = this;
if (this.config.useStaticLoading) {
this.onLoad();
return;
}
if (this.loadingStatus === NzCodeEditorLoadingStatus.LOADING) {
return;
}
this.loadingStatus = NzCodeEditorLoadingStatus.LOADING;
/** @type {?} */
var assetsRoot = this.config.assetsRoot;
/** @type {?} */
var vs = assetsRoot ? assetsRoot + "/vs" : 'assets/vs';
/** @type {?} */
var windowAsAny = (/** @type {?} */ (window));
/** @type {?} */
var loadScript = this.document.createElement('script');
loadScript.type = 'text/javascript';
loadScript.src = vs + "/loader.js";
loadScript.onload = (/**
* @return {?}
*/
function () {
windowAsAny.require.config({
paths: { vs: vs }
});
windowAsAny.require(['vs/editor/editor.main'], (/**
* @return {?}
*/
function () {
_this.onLoad();
}));
});
loadScript.onerror = (/**
* @return {?}
*/
function () {
throw new Error(PREFIX + " cannot load assets of monaco editor from source \"" + vs + "\".");
});
this.document.documentElement.appendChild(loadScript);
};
/**
* @private
* @return {?}
*/
NzCodeEditorService.prototype.onLoad = /**
* @private
* @return {?}
*/
function () {
this.loadingStatus = NzCodeEditorLoadingStatus.LOADED;
this.loaded$.next(true);
this.loaded$.complete();
tryTriggerFunc(this.config.onLoad)();
};
/**
* @private
* @return {?}
*/
NzCodeEditorService.prototype.onInit = /**
* @private
* @return {?}
*/
function () {
if (!this.firstEditorInitialized) {
this.firstEditorInitialized = true;
tryTriggerFunc(this.config.onFirstEditorInit)();
}
tryTriggerFunc(this.config.onInit)();
};
/**
* @private
* @return {?}
*/
NzCodeEditorService.prototype.getLatestOption = /**
* @private
* @return {?}
*/
function () {
return __assign({}, this.option);
};
NzCodeEditorService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
NzCodeEditorService.ctorParameters = function () { return [
{ type: NzConfigService },
{ type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
{ type: undefined, decorators: [{ type: Inject, args: [NZ_CODE_EDITOR_CONFIG,] }, { type: Optional }] }
]; };
/** @nocollapse */ NzCodeEditorService.ɵprov = ɵɵdefineInjectable({ factory: function NzCodeEditorService_Factory() { return new NzCodeEditorService(ɵɵinject(NzConfigService), ɵɵinject(DOCUMENT), ɵɵinject(NZ_CODE_EDITOR_CONFIG, 8)); }, token: NzCodeEditorService, providedIn: "root" });
return NzCodeEditorService;
}());
if (false) {
/**
* @type {?}
* @private
*/
NzCodeEditorService.prototype.document;
/**
* @type {?}
* @private
*/
NzCodeEditorService.prototype.firstEditorInitialized;
/**
* @type {?}
* @private
*/
NzCodeEditorService.prototype.loaded$;
/**
* @type {?}
* @private
*/
NzCodeEditorService.prototype.loadingStatus;
/**
* @type {?}
* @private
*/
NzCodeEditorService.prototype.option;
/**
* @type {?}
* @private
*/
NzCodeEditorService.prototype.config;
/** @type {?} */
NzCodeEditorService.prototype.option$;
/**
* @type {?}
* @private
*/
NzCodeEditorService.prototype.nzConfigService;
}
/**
* @fileoverview added by tsickle
* Generated from: code-editor.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzCodeEditorComponent = /** @class */ (function () {
function NzCodeEditorComponent(nzCodeEditorService, ngZone, elementRef) {
this.nzCodeEditorService = nzCodeEditorService;
this.ngZone = ngZone;
this.nzEditorMode = 'normal';
this.nzOriginalText = '';
this.nzLoading = false;
this.nzFullControl = false;
this.nzEditorInitialized = new EventEmitter();
this.editorOptionCached = {};
this.destroy$ = new Subject();
this.resize$ = new Subject();
this.editorOption$ = new BehaviorSubject({});
this.value = '';
this.modelSet = false;
this.el = elementRef.nativeElement;
}
Object.defineProperty(NzCodeEditorComponent.prototype, "nzEditorOption", {
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this.editorOption$.next(value);
},
enumerable: true,
configurable: true
});
/**
* Initialize a monaco editor instance.
*/
/**
* Initialize a monaco editor instance.
* @return {?}
*/
NzCodeEditorComponent.prototype.ngAfterViewInit = /**
* Initialize a monaco editor instance.
* @return {?}
*/
function () {
var _this = this;
this.nzCodeEditorService.requestToInit().subscribe((/**
* @param {?} option
* @return {?}
*/
function (option) { return _this.setup(option); }));
};
/**
* @return {?}
*/
NzCodeEditorComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this.editorInstance) {
this.editorInstance.dispose();
}
this.destroy$.next();
this.destroy$.complete();
};
/**
* @param {?} value
* @return {?}
*/
NzCodeEditorComponent.prototype.writeValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
this.value = value;
this.setValue();
};
/**
* @param {?} fn
* @return {?}
*/
NzCodeEditorComponent.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onChange = fn;
};
/**
* @param {?} fn
* @return {?}
*/
NzCodeEditorComponent.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onTouch = fn;
};
/**
* @return {?}
*/
NzCodeEditorComponent.prototype.layout = /**
* @return {?}
*/
function () {
this.resize$.next();
};
/**
* @private
* @param {?} option
* @return {?}
*/
NzCodeEditorComponent.prototype.setup = /**
* @private
* @param {?} option
* @return {?}
*/
function (option) {
var _this = this;
inNextTick().subscribe((/**
* @return {?}
*/
function () {
_this.editorOptionCached = option;
_this.registerOptionChanges();
_this.initMonacoEditorInstance();
_this.registerResizeChange();
_this.setValue();
if (!_this.nzFullControl) {
_this.setValueEmitter();
}
_this.nzEditorInitialized.emit(_this.editorInstance);
}));
};
/**
* @private
* @return {?}
*/
NzCodeEditorComponent.prototype.registerOptionChanges = /**
* @private
* @return {?}
*/
function () {
var _this = this;
combineLatest([this.editorOption$, this.nzCodeEditorService.option$])
.pipe(takeUntil(this.destroy$))
.subscribe((/**
* @param {?} __0
* @return {?}
*/
function (_a) {
var _b = __read(_a, 2), selfOpt = _b[0], defaultOpt = _b[1];
_this.editorOptionCached = __assign(__assign(__assign({}, _this.editorOptionCached), defaultOpt), selfOpt);
_this.updateOptionToMonaco();
}));
};
/**
* @private
* @return {?}
*/
NzCodeEditorComponent.prototype.initMonacoEditorInstance = /**
* @private
* @return {?}
*/
function () {
var _this = this;
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
function () {
_this.editorInstance =
_this.nzEditorMode === 'normal'
? monaco.editor.create(_this.el, __assign({}, _this.editorOptionCached))
: monaco.editor.createDiffEditor(_this.el, __assign({}, ((/** @type {?} */ (_this.editorOptionCached)))));
}));
};
/**
* @private
* @return {?}
*/
NzCodeEditorComponent.prototype.registerResizeChange = /**
* @private
* @return {?}
*/
function () {
var _this = this;
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
function () {
fromEvent(window, 'resize')
.pipe(debounceTime(300), takeUntil(_this.destroy$))
.subscribe((/**
* @return {?}
*/
function () {
_this.layout();
}));
_this.resize$
.pipe(takeUntil(_this.destroy$), filter((/**
* @return {?}
*/
function () { return !!_this.editorInstance; })), map((/**
* @return {?}
*/
function () { return ({
width: _this.el.clientWidth,
height: _this.el.clientHeight
}); })), distinctUntilChanged((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
function (a, b) { return a.width === b.width && a.height === b.height; })), debounceTime(50))
.subscribe((/**
* @return {?}
*/
function () {
_this.editorInstance.layout();
}));
}));
};
/**
* @private
* @return {?}
*/
NzCodeEditorComponent.prototype.setValue = /**
* @private
* @return {?}
*/
function () {
if (!this.editorInstance) {
return;
}
if (this.nzFullControl && this.value) {
warn("should not set value when you are using full control mode! It would result in ambiguous data flow!");
return;
}
if (this.nzEditorMode === 'normal') {
if (this.modelSet) {
((/** @type {?} */ (this.editorInstance.getModel()))).setValue(this.value);
}
else {
((/** @type {?} */ (this.editorInstance))).setModel(monaco.editor.createModel(this.value, ((/** @type {?} */ (this.editorOptionCached))).language));
this.modelSet = true;
}
}
else {
if (this.modelSet) {
/** @type {?} */
var model = (/** @type {?} */ (((/** @type {?} */ (this.editorInstance))).getModel()));
model.modified.setValue(this.value);
model.original.setValue(this.nzOriginalText);
}
else {
/** @type {?} */
var language = ((/** @type {?} */ (this.editorOptionCached))).language;
((/** @type {?} */ (this.editorInstance))).setModel({
original: monaco.editor.createModel(this.nzOriginalText, language),
modified: monaco.editor.createModel(this.value, language)
});
this.modelSet = true;
}
}
};
/**
* @private
* @return {?}
*/
NzCodeEditorComponent.prototype.setValueEmitter = /**
* @private
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var model = (/** @type {?} */ ((this.nzEditorMode === 'normal'
? ((/** @type {?} */ (this.editorInstance))).getModel()
: (/** @type {?} */ (((/** @type {?} */ (this.editorInstance))).getModel())).modified)));
model.onDidChangeContent((/**
* @return {?}
*/
function () {
_this.emitValue(model.getValue());
}));
};
/**
* @private
* @param {?} value
* @return {?}
*/
NzCodeEditorComponent.prototype.emitValue = /**
* @private
* @param {?} value
* @return {?}
*/
function (value) {
this.value = value;
this.onChange(value);
};
/**
* @private
* @return {?}
*/
NzCodeEditorComponent.prototype.updateOptionToMonaco = /**
* @private
* @return {?}
*/
function () {
if (this.editorInstance) {
this.editorInstance.updateOptions(__assign({}, this.editorOptionCached));
}
};
NzCodeEditorComponent.decorators = [
{ type: Component, args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
selector: 'nz-code-editor',
exportAs: 'nzCodeEditor',
template: "\n <div class=\"ant-code-editor-loading\" *ngIf=\"nzLoading\">\n <nz-spin></nz-spin>\n </div>\n\n <div class=\"ant-code-editor-toolkit\" *ngIf=\"nzToolkit\">\n <ng-template [ngTemplateOutlet]=\"nzToolkit\"></ng-template>\n </div>\n ",
host: {
'[class.ant-code-editor]': 'true'
},
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
function () { return NzCodeEditorComponent; })),
multi: true
}
]
}] }
];
/** @nocollapse */
NzCodeEditorComponent.ctorParameters = function () { return [
{ type: NzCodeEditorService },
{ type: NgZone },
{ type: ElementRef }
]; };
NzCodeEditorComponent.propDecorators = {
nzEditorMode: [{ type: Input }],
nzOriginalText: [{ type: Input }],
nzLoading: [{ type: Input }],
nzFullControl: [{ type: Input }],
nzToolkit: [{ type: Input }],
nzEditorOption: [{ type: Input }],
nzEditorInitialized: [{ type: Output }]
};
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzCodeEditorComponent.prototype, "nzLoading", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzCodeEditorComponent.prototype, "nzFullControl", void 0);
return NzCodeEditorComponent;
}());
if (false) {
/** @type {?} */
NzCodeEditorComponent.ngAcceptInputType_nzLoading;
/** @type {?} */
NzCodeEditorComponent.ngAcceptInputType_nzFullControl;
/** @type {?} */
NzCodeEditorComponent.prototype.nzEditorMode;
/** @type {?} */
NzCodeEditorComponent.prototype.nzOriginalText;
/** @type {?} */
NzCodeEditorComponent.prototype.nzLoading;
/** @type {?} */
NzCodeEditorComponent.prototype.nzFullControl;
/** @type {?} */
NzCodeEditorComponent.prototype.nzToolkit;
/** @type {?} */
NzCodeEditorComponent.prototype.nzEditorInitialized;
/** @type {?} */
NzCodeEditorComponent.prototype.editorOptionCached;
/**
* @type {?}
* @private
*/
NzCodeEditorComponent.prototype.el;
/**
* @type {?}
* @private
*/
NzCodeEditorComponent.prototype.destroy$;
/**
* @type {?}
* @private
*/
NzCodeEditorComponent.prototype.resize$;
/**
* @type {?}
* @private
*/
NzCodeEditorComponent.prototype.editorOption$;
/**
* @type {?}
* @private
*/
NzCodeEditorComponent.prototype.editorInstance;
/**
* @type {?}
* @private
*/
NzCodeEditorComponent.prototype.value;
/**
* @type {?}
* @private
*/
NzCodeEditorComponent.prototype.modelSet;
/** @type {?} */
NzCodeEditorComponent.prototype.onChange;
/** @type {?} */
NzCodeEditorComponent.prototype.onTouch;
/**
* @type {?}
* @private
*/
NzCodeEditorComponent.prototype.nzCodeEditorService;
/**
* @type {?}
* @private
*/
NzCodeEditorComponent.prototype.ngZone;
}
/**
* @fileoverview added by tsickle
* Generated from: code-editor.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzCodeEditorModule = /** @class */ (function () {
function NzCodeEditorModule() {
}
NzCodeEditorModule.decorators = [
{ type: NgModule, args: [{
declarations: [NzCodeEditorComponent],
imports: [CommonModule, NzIconModule, NzSpinModule],
exports: [NzCodeEditorComponent]
},] }
];
return NzCodeEditorModule;
}());
/**
* @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-code-editor.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NZ_CODE_EDITOR_CONFIG, NZ_CODE_EDITOR_CONFIG_FACTORY, NzCodeEditorComponent, NzCodeEditorLoadingStatus, NzCodeEditorModule, NzCodeEditorService };
//# sourceMappingURL=ng-zorro-antd-code-editor.js.map