tnx-shared 5.3.213 → 5.3.214

package/esm2015/components/html-preview/html-preview.component.js

@@ -1,21 +1,39 @@
 /* eslint-disable prefer-const */
-import { Component, EventEmitter, Injector, Input, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, forwardRef, Input, Output, ViewChild } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ComponentContextService } from '../../app-context/component-context.service';
-import { ComponentBase } from '../../classes/base/component-base';
 import { HtmlPreviewControlSchema } from '../../classes/form-schema';
+import { CommonService } from '../../services/common.service';
 import { GlobalService } from '../../services/global.service';
-export class HtmlPreviewComponent extends ComponentBase {
-    constructor(_injector, gs) {
-        super(_injector);
+export class HtmlPreviewComponent {
+    constructor(gs, _commonService) {
         this.gs = gs;
-        this.content = '';
+        this._commonService = _commonService;
         this.control = new HtmlPreviewControlSchema();
-        this.contentChange = new EventEmitter();
+        this.onChanged = new EventEmitter();
+        this.content = '';
+        this.id = '';
+        this.id = this._commonService.guid();
     }
-    ngOnChanges(changes) {
-        if (changes['content']) {
-            this.renderMath();
+    // ngOnChanges(changes: SimpleChanges) {
+    //     if (changes['content']) {
+    //         this.renderMath();
+    //     }
+    // }
+    writeValue(obj) {
+        if (obj) {
+            this.content = obj;
+        }
+        else {
+            this.content = '';
         }
+        this.renderMath();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
     }
     renderMath() {
         this.mathJaxObject = this.gs.nativeGlobal()['MathJax'];
@@ -24,24 +42,29 @@ export class HtmlPreviewComponent extends ComponentBase {
         }
         setTimeout(() => {
             var _a, _b;
-            const autoScrollBottom = !!((_a = this.control) === null || _a === void 0 ? void 0 : _a.autoScrollBottom);
-            const output = this.mathContent.nativeElement;
-            output.innerHTML = ((_b = this.content) === null || _b === void 0 ? void 0 : _b.trim()) || '';
-            this.mathJaxObject.texReset();
-            this.mathJaxObject.typesetClear();
-            this.mathJaxObject.typesetPromise([output]).catch(function (err) {
+            const $this = this;
+            const autoScrollBottom = !!((_a = $this.control) === null || _a === void 0 ? void 0 : _a.autoScrollBottom);
+            const output = $this.mathContent.nativeElement;
+            output.innerHTML = ((_b = $this.content) === null || _b === void 0 ? void 0 : _b.trim()) || '';
+            $this.mathJaxObject.texReset();
+            $this.mathJaxObject.typesetClear();
+            $this.mathJaxObject.typesetPromise([output]).catch(function (err) {
                 output.innerHTML = '';
                 output.appendChild(document.createTextNode(err.message));
                 console.error(err);
             }).then(function () {
+                var _a, _b, _c;
                 // Do something after typeset
                 if (autoScrollBottom) {
-                    const box = document.querySelector('#math-preview-box');
+                    const box = document.querySelector(`#math-preview-box-${$this.id}`);
                     const elem = box.getElementsByClassName('ps--active-y')[0];
                     if (elem) {
                         elem.scrollTop = elem.scrollHeight;
                     }
                 }
+                const value = (_c = (_b = (_a = document.getElementById(`mathPreview-${$this.id}`)) === null || _a === void 0 ? void 0 : _a.innerHTML) === null || _b === void 0 ? void 0 : _b.trim()) !== null && _c !== void 0 ? _c : '';
+                $this.onChange(value);
+                $this.onChanged.emit(value);
             });
             return this.mathJaxObject.startup.defaultPageReady();
         });
@@ -104,19 +127,25 @@ export class HtmlPreviewComponent extends ComponentBase {
 HtmlPreviewComponent.decorators = [
     { type: Component, args: [{
                 selector: 'html-preview',
-                template: "<div class=\"preview-box\" id=\"math-preview-box\" [ngStyle]=\"{'height': control.height + 'px'}\">\n    <tn-custom-scrollbar [showScrollHorizontal]=\"true\">\n        <!-- <span #mathContent id=\"mathPreview\" [innerHTML]=\"content | safeHtml\"></span> -->\n        <div #mathContent id=\"mathPreview\"></div>\n    </tn-custom-scrollbar>\n</div>",
-                providers: [ComponentContextService],
+                template: "<div class=\"preview-box\" id=\"math-preview-box-{{id}}\" [ngStyle]=\"{'height': control.height + 'px'}\">\n    <tn-custom-scrollbar [showScrollHorizontal]=\"true\">\n        <div #mathContent id=\"mathPreview-{{id}}\"></div>\n    </tn-custom-scrollbar>\n</div>",
+                providers: [
+                    ComponentContextService,
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => HtmlPreviewComponent),
+                        multi: true
+                    },
+                ],
                 styles: ["::ng-deep html-preview .preview-box{border:1px solid #ced4da;padding:10px}"]
             },] }
 ];
 HtmlPreviewComponent.ctorParameters = () => [
-    { type: Injector },
-    { type: GlobalService }
+    { type: GlobalService },
+    { type: CommonService }
 ];
 HtmlPreviewComponent.propDecorators = {
     mathContent: [{ type: ViewChild, args: ['mathContent',] }],
-    content: [{ type: Input }],
     control: [{ type: Input }],
-    contentChange: [{ type: Output }]
+    onChanged: [{ type: Output }]
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaHRtbC1wcmV2aWV3LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3RueC1zaGFyZWQvc3JjL2xpYi9jb21wb25lbnRzL2h0bWwtcHJldmlldy9odG1sLXByZXZpZXcuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGlDQUFpQztBQUNqQyxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxRQUFRLEVBQUUsS0FBSyxFQUFhLE1BQU0sRUFBaUIsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3RILE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDZDQUE2QyxDQUFDO0FBQ3RGLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxtQ0FBbUMsQ0FBQztBQUNsRSxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUNyRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sK0JBQStCLENBQUM7QUFROUQsTUFBTSxPQUFPLG9CQUFxQixTQUFRLGFBQWE7SUFTbkQsWUFDSSxTQUFtQixFQUNaLEVBQWlCO1FBRXhCLEtBQUssQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUZWLE9BQUUsR0FBRixFQUFFLENBQWU7UUFSbkIsWUFBTyxHQUFXLEVBQUUsQ0FBQztRQUNyQixZQUFPLEdBQTZCLElBQUksd0JBQXdCLEVBQUUsQ0FBQztRQUVsRSxrQkFBYSxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7SUFRbEQsQ0FBQztJQUVELFdBQVcsQ0FBQyxPQUFzQjtRQUM5QixJQUFJLE9BQU8sQ0FBQyxTQUFTLENBQUMsRUFBRTtZQUNwQixJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7U0FDckI7SUFDTCxDQUFDO0lBRUQsVUFBVTtRQUNOLElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDLEVBQUUsQ0FBQyxZQUFZLEVBQUUsQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUN2RCxJ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Q29udGVudCI6WyIvKiBlc2xpbnQtZGlzYWJsZSBwcmVmZXItY29uc3QgKi9cbmltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbmplY3RvciwgSW5wdXQsIE9uQ2hhbmdlcywgT3V0cHV0LCBTaW1wbGVDaGFuZ2VzLCBWaWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbXBvbmVudENvbnRleHRTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vYXBwLWNvbnRleHQvY29tcG9uZW50LWNvbnRleHQuc2VydmljZSc7XG5pbXBvcnQgeyBDb21wb25lbnRCYXNlIH0gZnJvbSAnLi4vLi4vY2xhc3Nlcy9iYXNlL2NvbXBvbmVudC1iYXNlJztcbmltcG9ydCB7IEh0bWxQcmV2aWV3Q29udHJvbFNjaGVtYSB9IGZyb20gJy4uLy4uL2NsYXNzZXMvZm9ybS1zY2hlbWEnO1xuaW1wb3J0IHsgR2xvYmFsU2VydmljZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL2dsb2JhbC5zZXJ2aWNlJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdodG1sLXByZXZpZXcnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9odG1sLXByZXZpZXcuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL2h0bWwtcHJldmlldy5jb21wb25lbnQuc2NzcyddLFxuICAgIHByb3ZpZGVyczogW0NvbXBvbmVudENvbnRleHRTZXJ2aWNlXVxufSlcbmV4cG9ydCBjbGFzcyBIdG1sUHJldmlld0NvbXBvbmVudCBleHRlbmRzIENvbXBvbmVudEJhc2UgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xuICAgIEBWaWV3Q2hpbGQoJ21hdGhDb250ZW50JykgbWF0aENvbnRlbnQ7XG5cbiAgICBASW5wdXQoKSBjb250ZW50OiBzdHJpbmcgPSAnJztcbiAgICBASW5wdXQoKSBjb250cm9sOiBIdG1sUHJldmlld0NvbnRyb2xTY2hlbWEgPSBuZXcgSHRtbFByZXZpZXdDb250cm9sU2NoZW1hKCk7XG5cbiAgICBAT3V0cHV0KCkgY29udGVudENoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuICAgIG1hdGhKYXhPYmplY3Q7XG5cbiAgICBjb25zdHJ1Y3RvcihcbiAgICAgICAgX2luamVjdG9yOiBJbmplY3RvcixcbiAgICAgICAgcHVibGljIGdzOiBHbG9iYWxTZXJ2aWNlXG4gICAgKSB7XG4gICAgICAgIHN1cGVyKF9pbmplY3Rvcik7XG4gICAgfVxuXG4gICAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcykge1xuICAgICAgICBpZiAoY2hhbmdlc1snY29udGVudCddKSB7XG4gICAgICAgICAgICB0aGlzLnJlbmRlck1hdGgoKTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIHJlbmRlck1hdGgoKSB7XG4gICAgICAgIHRoaXMubWF0aEpheE9iamVjdCA9IHRoaXMuZ3MubmF0aXZlR2xvYmFsKClbJ01hdGhKYXgnXTtcbiAgICAgICAgaWYgKCF0aGlzLm1hdGhKYXhPYmplY3QgJiYgIXRoaXMubWF0aENvbnRlbnQpIHtcbiAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuICAgICAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgICAgICAgIGNvbnN0IGF1dG9TY3JvbGxCb3R0b20gPSAhIXRoaXMuY29udHJvbD8uYXV0b1Njcm9sbEJvdHRvbTtcbiAgICAgICAgICAgIGNvbnN0IG91dHB1dCA9IHRoaXMubWF0aENvbnRlbnQubmF0aXZlRWxlbWVudDtcbiAgICAgICAgICAgIG91dHB1dC5pbm5lckhUTUwgPSB0aGlzLmNvbnRlbnQ/LnRyaW0oKSB8fCAnJztcbiAgICAgICAgICAgIHRoaXMubWF0aEpheE9iamVjdC50ZXhSZXNldCgpO1xuICAgICAgICAgICAgdGhpcy5tYXRoSmF4T2JqZWN0LnR5cGVzZXRDbGVhcigpO1xuICAgICAgICAgICAgdGhpcy5tYXRoSmF4T2JqZWN0LnR5cGVzZXRQcm9taXNlKFtvdXRwdXRdKS5jYXRjaChmdW5jdGlvbiAoZXJyKSB7XG4gICAgICAgICAgICAgICAgb3V0cHV0LmlubmVySFRNTCA9ICcnO1xuICAgICAgICAgICAgICAgIG91dHB1dC5hcHBlbmRDaGlsZChkb2N1bWVudC5jcmVhdGVUZXh0Tm9kZShlcnIubWVzc2FnZSkpO1xuICAgICAgICAgICAgICAgIGNvbnNvbGUuZXJyb3IoZXJyKTtcbiAgICAgICAgICAgIH0pLnRoZW4oZnVuY3Rpb24gKCkge1xuICAgICAgICAgICAgICAgIC8vIERvIHNvbWV0aGluZyBhZnRlciB0eXBlc2V0XG4gICAgICAgICAgICAgICAgaWYgKGF1dG9TY3JvbGxCb3R0b20pIHtcbiAgICAgICAgICAgICAgICAgICAgY29uc3QgYm94ID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI21hdGgtcHJldmlldy1ib3gnKTtcbiAgICAgICAgICAgICAgICAgICAgY29uc3QgZWxlbSA9IGJveC5nZXRFbGVtZW50c0J5Q2xhc3NOYW1lKCdwcy0tYWN0aXZlLXknKVswXTtcbiAgICAgICAgICAgICAgICAgICAgaWYgKGVsZW0pIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIGVsZW0uc2Nyb2xsVG9wID0gZWxlbS5zY3JvbGxIZWlnaHQ7XG4gICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9KTtcbiAgICAgICAgICAgIHJldHVybiB0aGlzLm1hdGhKYXhPYmplY3Quc3RhcnR1cC5kZWZhdWx0UGFnZVJlYWR5KCk7XG4gICAgICAgIH0pO1xuICAgIH1cblxuICAgIGxvYWRNYXRoQ29uZmlnKCkge1xuICAgICAgICBjb25zdCB3ZDogYW55ID0gdGhpcy5ncy5uYXRpdmVHbG9iYWwoKTtcbiAgICAgICAgd2QuTWF0aEpheCA9IHtcbiAgICAgICAgICAgICdsb2FkZXInOiB7IGxvYWQ6IFsnaW5wdXQvYXNjaWltYXRoJywgJ291dHB1dC9jaHRtbCcsICd1aS9tZW51JywgJ291dHB1dC9zdmcnLCAnW21tbF0vbW1sMyddIH0sXG4gICAgICAgICAgICAndGV4Jzoge1xuICAgICAgICAgICAgICAgIGlubGluZU1hdGg6IFtbJyQnLCAnJCddLCBbJ1xcXFwoJywgJ1xcXFwpJ11dLFxuICAgICAgICAgICAgICAgIHByb2Nlc3NFc2NhcGVzOiB0cnVlXG4gICAgICAgICAgICB9LFxuICAgICAgICAgICAgJ3N0YXJ0dXAnOiB7XG4gICAgICAgICAgICAgICAgcGFnZVJlYWR5OiAoKSA9PiB0aGlzLnJlbmRlck1hdGgoKVxuICAgICAgICAgICAgfSxcbiAgICAgICAgICAgICdzdmcnOiB7XG4gICAgICAgICAgICAgICAgc2NhbGU6IDEsXG4gICAgICAgICAgICAgICAgbWluU2NhbGU6IC41XG4gICAgICAgICAgICB9LFxuICAgICAgICAgICAgJ29wdGlvbnMnOiB7XG4gICAgICAgICAgICAgICAgZW5hYmxlTWVudTogISF0aGlzLmNvbnRyb2w/LnVzZU1hdGhKYXhNZW51LCAvLyBzZXQgdG8gZmFsc2UgdG8gZGlzYWJsZSB0aGUgbWVudVxuICAgICAgICAgICAgICAgIG1lbnVPcHRpb25zOiB7XG4gICAgICAgICAgICAgICAgICAgIHNldHRpbmdzOiB7XG4gICAgICAgICAgICAgICAgICAgICAgICB0ZXhIaW50czogdHJ1ZSwgLy8gcHV0IFRlWC1yZWxhdGVkIGF0dHJpYnV0ZXMgb24gTWF0aE1MXG4gICAgICAgICAgICAgICAgICAgICAgICBzZW1hbnRpY3M6IGZhbHNlLCAvLyBwdXQgb3JpZ2luYWwgZm9ybWF0IGluIDxzZW1hbnRpYz4gdGFnIGluIE1hdGhNTFxuICAgICAgICAgICAgICAgICAgICAgICAgem9vbTogJ0RvdWJsZS1DbGljaycsIC8vIG9yICdDbGljaycgb3IgJ0RvdWJsZUNsaWNrJyBhcyB6b29tIHRyaWdnZXJcbiAgICAgICAgICAgICAgICAgICAgICAgIHpzY2FsZTogJzIwMCUnLCAvLyB6b29tIHNjYWxpbmcgZmFjdG9yXG4gICAgICAgICAgICAgICAgICAgICAgICByZW5kZXJlcjogdGhpcy5jb250cm9sPy5tYXRoSmF4VHlwZSA/IHRoaXMuY29udHJvbC5tYXRoSmF4VHlwZSA6ICdDSFRNTCcsXG4gICAgICAgICAgICAgICAgICAgICAgICBzY2FsZTogMSwgLy8gc2NhbGluZyBmYWN0b3IgZm9yIGFsbCBtYXRoXG4gICAgICAgICAgICAgICAgICAgICAgICBpblRhYk9yZGVyOiB0cnVlLCAvLyB0cnVlIGlmIHRhYmJpbmcgaW5jbHVkZXMgbWF0aFxuXG4gICAgICAgICAgICAgICAgICAgICAgICBhc3Npc3RpdmVNbWw6IHRydWUsIC8vIHRydWUgaWYgaGlkZGVuIGFzc2lzdGl2ZSBNYXRoTUwgc2hvdWxkIGJlIGdlbmVyYXRlZCBmb3Igc2NyZWVuIHJlYWRlcnNcbiAgICAgICAgICAgICAgICAgICAgICAgIGNvbGxhcHNpYmxlOiBmYWxzZSwgLy8gdHJ1ZSBpZiBjb21wbGV4IG1hdGggc2hvdWxkIGJlIGNvbGxhcHNpYmxlXG4gICAgICAgICAgICAgICAgICAgICAgICBleHBsb3JlcjogZmFsc2UsIC8vIHRydWUgaWYgdGhlIGV4cHJlc3Npb24gZXhwbG9yZXIgc2hvdWxkIGJlIGFjdGl2ZVxuICAgICAgICAgICAgICAgICAgICB9LFxuICAgICAgICAgICAgICAgICAgICBhbm5vdGF0aW9uVHlwZXM6IHtcbiAgICAgICAgICAgICAgICAgICAgICAgIFRlWDogWydUZVgnLCAnTGFUZVgnLCAnYXBwbGljYXRpb24veC10ZXgnXSxcbiAgICAgICAgICAgICAgICAgICAgICAgIFN0YXJNYXRoOiBbJ1N0YXJNYXRoIDUuMCddLFxuICAgICAgICAgICAgICAgICAgICAgICAgTWFwbGU6IFsnTWFwbGUnXSxcbiAgICAgICAgICAgICAgICAgICAgICAgIENvbnRlbnRNYXRoTUw6IFsnTWF0aE1MLUNvbnRlbnQnLCAnYXBwbGljYXRpb24vbWF0aG1sLWNvbnRlbnQreG1sJ10sXG4gICAgICAgICAgICAgICAgICAgICAgICBPcGVuTWF0aDogWydPcGVuTWF0aCddXG4gICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9XG4gICAgICAgIH07XG4gICAgICAgIGNvbnN0IHNjcmlwdCA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ3NjcmlwdCcpO1xuICAgICAgICBpZiAodGhpcy5jb250cm9sPy5tYXRoSmF4VHlwZSA9PSAnU1ZHJykge1xuICAgICAgICAgICAgc2NyaXB0LnNyYyA9ICdhc3NldHMvdmVuZG9yL21hdGhqYXgvdGV4LW1tbC1zdmcuanMnO1xuICAgICAgICB9XG4gICAgICAgIGVsc2Uge1xuICAgICAgICAgICAgc2NyaXB0LnNyYyA9ICdhc3NldHMvdmVuZG9yL21hdGhqYXgvdGV4LW1tbC1jaHRtbC5qcyc7XG4gICAgICAgIH1cbiAgICAgICAgc2NyaXB0LnNldEF0dHJpYnV0ZSgnaWQnLCAnTWF0aEpheC1zY3JpcHQnKTtcbiAgICAgICAgZG9jdW1lbnQuaGVhZC5hcHBlbmRDaGlsZChzY3JpcHQpO1xuICAgIH1cblxuICAgIG5nT25Jbml0KCkge1xuICAgICAgICB0aGlzLmxvYWRNYXRoQ29uZmlnKCk7XG4gICAgfVxufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaHRtbC1wcmV2aWV3LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3RueC1zaGFyZWQvc3JjL2xpYi9jb21wb25lbnRzL2h0bWwtcHJldmlldy9odG1sLXByZXZpZXcuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGlDQUFpQztBQUNqQyxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxVQUFVLEVBQVksS0FBSyxFQUFxQixNQUFNLEVBQWlCLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMxSSxPQUFPLEVBQXdCLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDekUsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sNkNBQTZDLENBQUM7QUFFdEYsT0FBTyxFQUFFLHdCQUF3QixFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDckUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLCtCQUErQixDQUFDO0FBQzlELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQWU5RCxNQUFNLE9BQU8sb0JBQW9CO0lBWTdCLFlBQ1csRUFBaUIsRUFDaEIsY0FBNkI7UUFEOUIsT0FBRSxHQUFGLEVBQUUsQ0FBZTtRQUNoQixtQkFBYyxHQUFkLGNBQWMsQ0FBZTtRQVpoQyxZQUFPLEdBQTZCLElBQUksd0JBQXdCLEVBQUUsQ0FBQztRQUNsRSxjQUFTLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztRQUc5QyxZQUFPLEdBQVcsRUFBRSxDQUFDO1FBSXJCLE9BQUUsR0FBUSxFQUFFLENBQUM7UUFNVCxJQUFJLENBQUMsRUFBRSxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDeEMsQ0FBQztJQUVGLHdDQUF3QztJQUN4QyxnQ0FBZ0M7SUFDaEMsNkJBQTZCO0lBQzdCLFFBQVE7SUFDUixJQUFJO0lBRUosVUFBVSxDQUFDLEdB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QUFhLEVBQUUsQ0FBQyxnQkFBZ0IsRUFBRSxnQ0FBZ0MsQ0FBQzt3QkFDbkUsUUFBUSxFQUFFLENBQUMsVUFBVSxDQUFDO3FCQUN6QjtpQkFDSjthQUNKO1NBQ0osQ0FBQztRQUNGLE1BQU0sTUFBTSxHQUFHLFFBQVEsQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDaEQsSUFBSSxDQUFBLE1BQUEsSUFBSSxDQUFDLE9BQU8sMENBQUUsV0FBVyxLQUFJLEtBQUssRUFBRTtZQUNwQyxNQUFNLENBQUMsR0FBRyxHQUFHLHNDQUFzQyxDQUFDO1NBQ3ZEO2FBQ0k7WUFDRCxNQUFNLENBQUMsR0FBRyxHQUFHLHdDQUF3QyxDQUFDO1NBQ3pEO1FBQ0QsTUFBTSxDQUFDLFlBQVksQ0FBQyxJQUFJLEVBQUUsZ0JBQWdCLENBQUMsQ0FBQztRQUM1QyxRQUFRLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUN0QyxDQUFDO0lBRUQsUUFBUTtRQUNKLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQztJQUMxQixDQUFDOzs7WUE5SUosU0FBUyxTQUFDO2dCQUNQLFFBQVEsRUFBRSxjQUFjO2dCQUN4QixpUkFBNEM7Z0JBRTVDLFNBQVMsRUFBRTtvQkFDUCx1QkFBdUI7b0JBQ3ZCO3dCQUNJLE9BQU8sRUFBRSxpQkFBaUI7d0JBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsb0JBQW9CLENBQUM7d0JBQ25ELEtBQUssRUFBRSxJQUFJO3FCQUNkO2lCQUNKOzthQUNKOzs7WUFkUSxhQUFhO1lBRGIsYUFBYTs7OzBCQWlCakIsU0FBUyxTQUFDLGFBQWE7c0JBQ3ZCLEtBQUs7d0JBQ0wsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbIi8qIGVzbGludC1kaXNhYmxlIHByZWZlci1jb25zdCAqL1xuaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIGZvcndhcmRSZWYsIEluamVjdG9yLCBJbnB1dCwgT25DaGFuZ2VzLCBPbkluaXQsIE91dHB1dCwgU2ltcGxlQ2hhbmdlcywgVmlld0NoaWxkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBDb21wb25lbnRDb250ZXh0U2VydmljZSB9IGZyb20gJy4uLy4uL2FwcC1jb250ZXh0L2NvbXBvbmVudC1jb250ZXh0LnNlcnZpY2UnO1xuaW1wb3J0IHsgQ29tcG9uZW50QmFzZSB9IGZyb20gJy4uLy4uL2NsYXNzZXMvYmFzZS9jb21wb25lbnQtYmFzZSc7XG5pbXBvcnQgeyBIdG1sUHJldmlld0NvbnRyb2xTY2hlbWEgfSBmcm9tICcuLi8uLi9jbGFzc2VzL2Zvcm0tc2NoZW1hJztcbmltcG9ydCB7IENvbW1vblNlcnZpY2UgfSBmcm9tICcuLi8uLi9zZXJ2aWNlcy9jb21tb24uc2VydmljZSc7XG5pbXBvcnQgeyBHbG9iYWxTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vc2VydmljZXMvZ2xvYmFsLnNlcnZpY2UnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ2h0bWwtcHJldmlldycsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2h0bWwtcHJldmlldy5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vaHRtbC1wcmV2aWV3LmNvbXBvbmVudC5zY3NzJ10sXG4gICAgcHJvdmlkZXJzOiBbXG4gICAgICAgIENvbXBvbmVudENvbnRleHRTZXJ2aWNlLFxuICAgICAgICB7XG4gICAgICAgICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICAgICAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IEh0bWxQcmV2aWV3Q29tcG9uZW50KSxcbiAgICAgICAgICAgIG11bHRpOiB0cnVlXG4gICAgICAgIH0sXG4gICAgXVxufSlcbmV4cG9ydCBjbGFzcyBIdG1sUHJldmlld0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgQ29udHJvbFZhbHVlQWNjZXNzb3Ige1xuICAgIEBWaWV3Q2hpbGQoJ21hdGhDb250ZW50JykgbWF0aENvbnRlbnQ7XG4gICAgQElucHV0KCkgY29udHJvbDogSHRtbFByZXZpZXdDb250cm9sU2NoZW1hID0gbmV3IEh0bWxQcmV2aWV3Q29udHJvbFNjaGVtYSgpO1xuICAgIEBPdXRwdXQoKSBvbkNoYW5nZWQgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcblxuICAgIG1hdGhKYXhPYmplY3Q7XG4gICAgY29udGVudDogc3RyaW5nID0gJyc7XG5cbiAgICBvbkNoYW5nZTogRnVuY3Rpb247XG4gICAgb25Ub3VjaGVkOiBGdW5jdGlvbjtcbiAgICBpZDogYW55ID0gJyc7XG5cbiAgICBjb25zdHJ1Y3RvcihcbiAgICAgICAgcHVibGljIGdzOiBHbG9iYWxTZXJ2aWNlLFxuICAgICAgICBwcml2YXRlIF9jb21tb25TZXJ2aWNlOiBDb21tb25TZXJ2aWNlXG4gICAgKSB7XG4gICAgICAgIHRoaXMuaWQgPSB0aGlzLl9jb21tb25TZXJ2aWNlLmd1aWQoKTtcbiAgICAgfVxuXG4gICAgLy8gbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcykge1xuICAgIC8vICAgICBpZiAoY2hhbmdlc1snY29udGVudCddKSB7XG4gICAgLy8gICAgICAgICB0aGlzLnJlbmRlck1hdGgoKTtcbiAgICAvLyAgICAgfVxuICAgIC8vIH1cblxuICAgIHdyaXRlVmFsdWUob2JqOiBhbnkpOiB2b2lkIHtcbiAgICAgICAgaWYgKG9iaikge1xuICAgICAgICAgICAgdGhpcy5jb250ZW50ID0gb2JqO1xuICAgICAgICB9XG4gICAgICAgIGVsc2Uge1xuICAgICAgICAgICAgdGhpcy5jb250ZW50ID0gJyc7XG4gICAgICAgIH1cbiAgICAgICAgdGhpcy5yZW5kZXJNYXRoKCk7XG4gICAgfVxuXG4gICAgcmVnaXN0ZXJPbkNoYW5nZShmbjogYW55KTogdm9pZCB7XG4gICAgICAgIHRoaXMub25DaGFuZ2UgPSBmbjtcbiAgICB9XG4gICAgcmVnaXN0ZXJPblRvdWNoZWQoZm46IGFueSk6IHZvaWQge1xuICAgICAgICB0aGlzLm9uVG91Y2hlZCA9IGZuO1xuICAgIH1cblxuICAgIHJlbmRlck1hdGgoKSB7XG4gICAgICAgIHRoaXMubWF0aEpheE9iamVjdCA9IHRoaXMuZ3MubmF0aXZlR2xvYmFsKClbJ01hdGhKYXgnXTtcbiAgICAgICAgaWYgKCF0aGlzLm1hdGhKYXhPYmplY3QgJiYgIXRoaXMubWF0aENvbnRlbnQpIHtcbiAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuICAgICAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgICAgICAgIGNvbnN0ICR0aGlzID0gdGhpcztcbiAgICAgICAgICAgIGNvbnN0IGF1dG9TY3JvbGxCb3R0b20gPSAhISR0aGlzLmNvbnRyb2w/LmF1dG9TY3JvbGxCb3R0b207XG4gICAgICAgICAgICBjb25zdCBvdXRwdXQgPSAkdGhpcy5tYXRoQ29udGVudC5uYXRpdmVFbGVtZW50O1xuICAgICAgICAgICAgb3V0cHV0LmlubmVySFRNTCA9ICR0aGlzLmNvbnRlbnQ/LnRyaW0oKSB8fCAnJztcbiAgICAgICAgICAgICR0aGlzLm1hdGhKYXhPYmplY3QudGV4UmVzZXQoKTtcbiAgICAgICAgICAgICR0aGlzLm1hdGhKYXhPYmplY3QudHlwZXNldENsZWFyKCk7XG4gICAgICAgICAgICAkdGhpcy5tYXRoSmF4T2JqZWN0LnR5cGVzZXRQcm9taXNlKFtvdXRwdXRdKS5jYXRjaChmdW5jdGlvbiAoZXJyKSB7XG4gICAgICAgICAgICAgICAgb3V0cHV0LmlubmVySFRNTCA9ICcnO1xuICAgICAgICAgICAgICAgIG91dHB1dC5hcHBlbmRDaGlsZChkb2N1bWVudC5jcmVhdGVUZXh0Tm9kZShlcnIubWVzc2FnZSkpO1xuICAgICAgICAgICAgICAgIGNvbnNvbGUuZXJyb3IoZXJyKTtcbiAgICAgICAgICAgIH0pLnRoZW4oZnVuY3Rpb24gKCkge1xuICAgICAgICAgICAgICAgIC8vIERvIHNvbWV0aGluZyBhZnRlciB0eXBlc2V0XG4gICAgICAgICAgICAgICAgaWYgKGF1dG9TY3JvbGxCb3R0b20pIHtcbiAgICAgICAgICAgICAgICAgICAgY29uc3QgYm94ID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcihgI21hdGgtcHJldmlldy1ib3gtJHskdGhpcy5pZH1gKTtcbiAgICAgICAgICAgICAgICAgICAgY29uc3QgZWxlbSA9IGJveC5nZXRFbGVtZW50c0J5Q2xhc3NOYW1lKCdwcy0tYWN0aXZlLXknKVswXTtcbiAgICAgICAgICAgICAgICAgICAgaWYgKGVsZW0pIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIGVsZW0uc2Nyb2xsVG9wID0gZWxlbS5zY3JvbGxIZWlnaHQ7XG4gICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgY29uc3QgdmFsdWUgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChgbWF0aFByZXZpZXctJHskdGhpcy5pZH1gKT8uaW5uZXJIVE1MPy50cmltKCkgPz8gJyc7XG4gICAgICAgICAgICAgICAgJHRoaXMub25DaGFuZ2UodmFsdWUpO1xuICAgICAgICAgICAgICAgICR0aGlzLm9uQ2hhbmdlZC5lbWl0KHZhbHVlKTtcbiAgICAgICAgICAgIH0pO1xuICAgICAgICAgICAgcmV0dXJuIHRoaXMubWF0aEpheE9iamVjdC5zdGFydHVwLmRlZmF1bHRQYWdlUmVhZHkoKTtcbiAgICAgICAgfSk7XG4gICAgfVxuXG4gICAgbG9hZE1hdGhDb25maWcoKSB7XG4gICAgICAgIGNvbnN0IHdkOiBhbnkgPSB0aGlzLmdzLm5hdGl2ZUdsb2JhbCgpO1xuICAgICAgICB3ZC5NYXRoSmF4ID0ge1xuICAgICAgICAgICAgJ2xvYWRlcic6IHsgbG9hZDogWydpbnB1dC9hc2NpaW1hdGgnLCAnb3V0cHV0L2NodG1sJywgJ3VpL21lbnUnLCAnb3V0cHV0L3N2ZycsICdbbW1sXS9tbWwzJ10gfSxcbiAgICAgICAgICAgICd0ZXgnOiB7XG4gICAgICAgICAgICAgICAgaW5saW5lTWF0aDogW1snJCcsICckJ10sIFsnXFxcXCgnLCAnXFxcXCknXV0sXG4gICAgICAgICAgICAgICAgcHJvY2Vzc0VzY2FwZXM6IHRydWVcbiAgICAgICAgICAgIH0sXG4gICAgICAgICAgICAnc3RhcnR1cCc6IHtcbiAgICAgICAgICAgICAgICBwYWdlUmVhZHk6ICgpID0+IHRoaXMucmVuZGVyTWF0aCgpXG4gICAgICAgICAgICB9LFxuICAgICAgICAgICAgJ3N2Zyc6IHtcbiAgICAgICAgICAgICAgICBzY2FsZTogMSxcbiAgICAgICAgICAgICAgICBtaW5TY2FsZTogLjVcbiAgICAgICAgICAgIH0sXG4gICAgICAgICAgICAnb3B0aW9ucyc6IHtcbiAgICAgICAgICAgICAgICBlbmFibGVNZW51OiAhIXRoaXMuY29udHJvbD8udXNlTWF0aEpheE1lbnUsIC8vIHNldCB0byBmYWxzZSB0byBkaXNhYmxlIHRoZSBtZW51XG4gICAgICAgICAgICAgICAgbWVudU9wdGlvbnM6IHtcbiAgICAgICAgICAgICAgICAgICAgc2V0dGluZ3M6IHtcbiAgICAgICAgICAgICAgICAgICAgICAgIHRleEhpbnRzOiB0cnVlLCAvLyBwdXQgVGVYLXJlbGF0ZWQgYXR0cmlidXRlcyBvbiBNYXRoTUxcbiAgICAgICAgICAgICAgICAgICAgICAgIHNlbWFudGljczogZmFsc2UsIC8vIHB1dCBvcmlnaW5hbCBmb3JtYXQgaW4gPHNlbWFudGljPiB0YWcgaW4gTWF0aE1MXG4gICAgICAgICAgICAgICAgICAgICAgICB6b29tOiAnRG91YmxlLUNsaWNrJywgLy8gb3IgJ0NsaWNrJyBvciAnRG91YmxlQ2xpY2snIGFzIHpvb20gdHJpZ2dlclxuICAgICAgICAgICAgICAgICAgICAgICAgenNjYWxlOiAnMjAwJScsIC8vIHpvb20gc2NhbGluZyBmYWN0b3JcbiAgICAgICAgICAgICAgICAgICAgICAgIHJlbmRlcmVyOiB0aGlzLmNvbnRyb2w/Lm1hdGhKYXhUeXBlID8gdGhpcy5jb250cm9sLm1hdGhKYXhUeXBlIDogJ0NIVE1MJyxcbiAgICAgICAgICAgICAgICAgICAgICAgIHNjYWxlOiAxLCAvLyBzY2FsaW5nIGZhY3RvciBmb3IgYWxsIG1hdGhcbiAgICAgICAgICAgICAgICAgICAgICAgIGluVGFiT3JkZXI6IHRydWUsIC8vIHRydWUgaWYgdGFiYmluZyBpbmNsdWRlcyBtYXRoXG5cbiAgICAgICAgICAgICAgICAgICAgICAgIGFzc2lzdGl2ZU1tbDogdHJ1ZSwgLy8gdHJ1ZSBpZiBoaWRkZW4gYXNzaXN0aXZlIE1hdGhNTCBzaG91bGQgYmUgZ2VuZXJhdGVkIGZvciBzY3JlZW4gcmVhZGVyc1xuICAgICAgICAgICAgICAgICAgICAgICAgY29sbGFwc2libGU6IGZhbHNlLCAvLyB0cnVlIGlmIGNvbXBsZXggbWF0aCBzaG91bGQgYmUgY29sbGFwc2libGVcbiAgICAgICAgICAgICAgICAgICAgICAgIGV4cGxvcmVyOiBmYWxzZSwgLy8gdHJ1ZSBpZiB0aGUgZXhwcmVzc2lvbiBleHBsb3JlciBzaG91bGQgYmUgYWN0aXZlXG4gICAgICAgICAgICAgICAgICAgIH0sXG4gICAgICAgICAgICAgICAgICAgIGFubm90YXRpb25UeXBlczoge1xuICAgICAgICAgICAgICAgICAgICAgICAgVGVYOiBbJ1RlWCcsICdMYVRlWCcsICdhcHBsaWNhdGlvbi94LXRleCddLFxuICAgICAgICAgICAgICAgICAgICAgICAgU3Rhck1hdGg6IFsnU3Rhck1hdGggNS4wJ10sXG4gICAgICAgICAgICAgICAgICAgICAgICBNYXBsZTogWydNYXBsZSddLFxuICAgICAgICAgICAgICAgICAgICAgICAgQ29udGVudE1hdGhNTDogWydNYXRoTUwtQ29udGVudCcsICdhcHBsaWNhdGlvbi9tYXRobWwtY29udGVudCt4bWwnXSxcbiAgICAgICAgICAgICAgICAgICAgICAgIE9wZW5NYXRoOiBbJ09wZW5NYXRoJ11cbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH1cbiAgICAgICAgfTtcbiAgICAgICAgY29uc3Qgc2NyaXB0ID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnc2NyaXB0Jyk7XG4gICAgICAgIGlmICh0aGlzLmNvbnRyb2w/Lm1hdGhKYXhUeXBlID09ICdTVkcnKSB7XG4gICAgICAgICAgICBzY3JpcHQuc3JjID0gJ2Fzc2V0cy92ZW5kb3IvbWF0aGpheC90ZXgtbW1sLXN2Zy5qcyc7XG4gICAgICAgIH1cbiAgICAgICAgZWxzZSB7XG4gICAgICAgICAgICBzY3JpcHQuc3JjID0gJ2Fzc2V0cy92ZW5kb3IvbWF0aGpheC90ZXgtbW1sLWNodG1sLmpzJztcbiAgICAgICAgfVxuICAgICAgICBzY3JpcHQuc2V0QXR0cmlidXRlKCdpZCcsICdNYXRoSmF4LXNjcmlwdCcpO1xuICAgICAgICBkb2N1bWVudC5oZWFkLmFwcGVuZENoaWxkKHNjcmlwdCk7XG4gICAgfVxuXG4gICAgbmdPbkluaXQoKSB7XG4gICAgICAgIHRoaXMubG9hZE1hdGhDb25maWcoKTtcbiAgICB9XG59XG4iXX0=

package/fesm2015/tnx-shared.js

@@ -14511,7 +14511,7 @@ class CrudFormComponent extends ComponentBase {
 CrudFormComponent.decorators = [
     { type: Component, args: [{
                 selector: 'crud-form',
-                template: "<div [class]=\"_styleClass\">\n    <form #formElement autocomplete=\"off\" autocorrect=\"off\" spellcheck=\"false\"\n        [class]=\"'p-grid form-group crud-form' + (formClass ? ' ' + formClass : '')\"\n        (keydown.shift.tab)=\"preventBlur($event)\">\n        <div class=\"p-grid p-col-12\" [class.grid]=\"useGridTemplate\" style=\"margin: 0\">\n            <ng-container *ngFor=\"let control of setting.schema\">\n                <ng-container *ngTemplateOutlet=\"customControl; context: {\n                    control: control, data: _modelData, parentPath: '', path: control.field, showLabel: control.showLabel,\n                    mdWidth: control.mdWidth, rowSpan: control.rowSpan\n                }\">\n                </ng-container>\n            </ng-container>\n        </div>\n    </form>\n</div>\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"buttonContexts\">\n</p-contextMenu>\n<ng-template #customControl let-data=\"data\" let-control=\"control\" let-showLabel=\"showLabel\" let-mdWidth=\"mdWidth\"\n    let-rowSpan=\"rowSpan\" let-rowIndex=\"index\" let-path=\"path\" let-parentPath=\"parentPath\" let-tablePath=\"tablePath\">\n    <div *ngIf=\"!checkHidden(control, data, path)\" id=\"{{path}}-holder\"\n        class=\"p-col-{{control.gWidth}} p-md-{{mdWidth}} row-span-{{rowSpan}} {{control.class}} crud-form-control type-{{control.dataType}}\"\n        [class.error]=\"data._errors[control.field].length > 0\"\n        [class.not-show-in-box-holder]=\"control.showInBox === false\"\n        [class.show-in-box-holder]=\"control.showInBox === true\" [ngStyle]=\"control.style\">\n        <div class=\"label\" *ngIf=\"showLabel\">\n            <label *ngIf=\"control.label && !control.isHtmlLabel\" [pTooltip]=\"control.fullLabel\"\n                tooltipPosition=\"top\">{{control.label}}\n                <span *ngIf=\"control.required || control.showIconRequired\" class=\"star-required\">*</span>\n            </label>\n            <ng-container *ngIf=\"control.label && control.isHtmlLabel\">\n                <label [innerHTML]=\"control.label | safeHtml\" [pTooltip]=\"control.fullLabel\" tooltipPosition=\"top\">\n                </label>\n                <span *ngIf=\"control.required || control.showIconRequired\" class=\"star-required\">*</span>\n            </ng-container>\n            <span *ngIf=\"control.description\" class=\"control-description\">({{control.description}})</span>\n        </div>\n        <ng-container [ngSwitch]=\"control.controlType\">\n            <ng-container *ngSwitchCase=\"'label'\">\n                <ng-container [ngTemplateOutlet]=\"labelControl\"\n                    [ngTemplateOutletContext]=\"{control: control, data: data}\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'title'\">\n                <label *ngIf=\"!control.isHtml\" [for]=\"control.for\">{{control.text | translate}}</label>\n                <label *ngIf=\"control.isHtml\" [innerHTML]=\"control.text | safeHtml\"></label>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'text'\">\n                <div class=\"p-inputgroup\" *ngIf=\"control.suffFix\">\n                    <input [placeholder]=\"control.placeholder\"\n                        [required]=\"control.validators && control.validators.required\"\n                        [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText\n                        [type]=\"control.dataFormat\" [max]=\"control.max\" [min]=\"control.min\"\n                        [maxlength]=\"control.maxLength\" [(ngModel)]=\"data[control.field]\"\n                        (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                        (key.enter)=\"handleFieldValueChange(control, $event, eventType.ENTER, data, parentPath)\" />\n                    <span class=\"p-inputgroup-addon\">({{control.suffFix}})</span>\n                </div>\n                <input *ngIf=\"!control.suffFix\" [placeholder]=\"control.placeholder\"\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText [type]=\"control.dataFormat\"\n                    [max]=\"control.max\" [min]=\"control.min\" [maxlength]=\"control.maxLength\"\n                    [(ngModel)]=\"data[control.field]\"\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (key.enter)=\"handleFieldValueChange(control, $event, eventType.ENTER, data, parentPath)\" />\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'htmlPreview'\">\n                <html-preview [control]=\"control\" [(content)]=\"data[control.field]\">\n                </html-preview>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'reference-text'\">\n                <reference-textbox [control]=\"control\" [value]=\"data[control.field]\" [dataSource]=\"control.dataSource\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"></reference-textbox>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'template'\">\n                <ng-container [ngTemplateOutlet]=\"control.template\"\n                    [ngTemplateOutletContext]=\"{$implicit: _rootNode, control: control, data: data, tablePath: tablePath, parentPath: parentPath, rowIndex: rowIndex, funcUpdateModel: updateModelFromExternal}\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'content'\">\n                <div class=\"control-content label\">\n                    <span [innerHTML]=\"data[control.field] ? (data[control.field] | safeHtml) : ''\">\n                    </span>\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'mask'\">\n                <tn-mask [prefix]=\"control.prefix\" [decimalPlaces]=\"control.decimalPlaces\" [suffix]=\"control.suffix\"\n                    [placeholder]=\"control.placeholder\" [disabled]=\"checkDisabled(data, control)\"\n                    [maskType]=\"control.maskType\" [autoFormat]=\"control.autoFormat\" [min]=\"control.min\"\n                    [max]=\"control.max\" [(ngModel)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </tn-mask>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'numberrange'\">\n                <tn-number-picker-range [decimalPlaces]=\"control.decimalPlaces\"\n                    [disabled]=\"checkDisabled(data, control)\" [maskType]=\"control.maskType\" [min]=\"control.min\"\n                    [max]=\"control.max\" [placeholder]=\"control.placeholder\" [(ngModel)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (blur)=\"handleFieldValueChange(control, $event, eventType.BLUR, data, parentPath)\">\n                </tn-number-picker-range>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'money'\">\n                <input currencyMask [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText type=\"tel\"\n                    [options]=\"{prefix: '', thousands: '.', decimal: ',',precision:control.dataFormat === 'money'?0:0 }\"\n                    [(ngModel)]=\"data[control.field]\"\n                    (ngModelChange)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\" />\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'phoneOrfax'\">\n                <input [placeholder]=\"control.dataFormat==='phone'?'(999) 999-9999':'999-999-9999'\"\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" type=\"tel\" pInputText\n                    [(ngModel)]=\"data[control.field]\"\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\" />\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'textarea'\">\n                <textarea pInputTextarea [rows]=\"control.rows ? control.rows : 5\"\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" [(ngModel)]=\"data[control.field]\"\n                    [placeholder]=\"control.placeholder\"\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"></textarea>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'editor'\">\n                <tn-tinymce *ngIf=\"!checkDisabled(data, control)\"\n                    [required]=\"control.validators && control.validators.required\" [mode]=\"control.mode\"\n                    [placeholder]=\"control.placeholder\" [height]=\"control.height ? control.height : 250\"\n                    [languageCode]=\"control.languageCode\"\n                    [disabled]=\"control.disabled || (control.disableCheck && control.disableCheck(model))\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onKeyUp)=\"handleKeyUp(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </tn-tinymce>\n                <div *ngIf=\"checkDisabled(data, control)\" class=\"html-box\"\n                    [innerHTML]=\"data[control.field] ? (data[control.field] | safeHtml) : ''\">\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'datetime'\">\n                <datetime-picker [disabled]=\"checkDisabled(data, control)\" [control]=\"control\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </datetime-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'autocomplete'\">\n                <app-autocomplete-datasource [control]=\"control\"\n                    [suggestions]=\"data._source[control.field] || control.dataSource\" [(ngModel)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onValueChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </app-autocomplete-datasource>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'datetimerange'\">\n                <tn-datetime-picker-range [disabled]=\"control.disabled\" [control]=\"control\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </tn-datetime-picker-range>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'dropdown'\">\n                <dropdown [control]=\"control\" [dataSource]=\"getControlDataSource(control, data)\" [data]=\"data\"\n                    [(value)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleChangeDropdown(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onHideSmartEvent)=\"handleChangeDropdown(control, $event, eventType.HIDE, data, parentPath)\"\n                    (adjustValue)=\"handleAdjustValueDropdownEvent(control, parentPath)\"\n                    (onDataSourceLoaded)=\"handleDataSourceLoaded(control, parentPath, $event)\"\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\n                </dropdown>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'imageuploader'\">\n                <app-image-uploader [loadByEntityKey]=\"control.loadByEntityKey\" [entityKey]=\"control.entityKey\"\n                    [defaultNoImageUrl]=\"'/assets/images/no-image.jpg'\" [multiple]=\"control.multiple\"\n                    [disabled]=\"control.disabled\" [isAvatar]=\"control.isAvatar\" [(ngModel)]=\"data[control.field]\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\">\n                    <ng-template *ngIf=\"control.templateItems\" #items let-files>\n                        <ng-container *ngTemplateOutlet=\"control.templateItems; context: {\n                            $implicit: files\n                        }\"></ng-container>\n                    </ng-template>\n                    <ng-template *ngIf=\"control.templateItem\" #item let-file>\n                        <ng-container *ngTemplateOutlet=\"control.templateItem; context: {\n                            $implicit: file\n                        }\"></ng-container>\n                    </ng-template>\n                </app-image-uploader>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'fileManager'\">\n                <file-manager *ngIf=\"control.entityKey || data[control.entityKeyField] || control.rootFolderId\"\n                    [control]=\"control\" [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\n                    [entityKey]=\"control.entityKey ? control.entityKey : data[control.entityKeyField]\"\n                    [readonly]=\"control.disabled\" [layout]=\"control.layout\" [rootFolderId]=\"control.rootFolderId\"\n                    [maxFileSize]=\"control.maxFileSize\" [inTaiLieu]=\"control.inTaiLieu\"\n                    [inTaiLieuChung]=\"control.inTaiLieuChung\" [copyToFolderId]=\"control.copyToFolderId\"\n                    [filePickerSetting]=\"control.filePickerSetting\" [dataForm]=\"data\"\n                    [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\n                    [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\n                    [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\n                    [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\n                    [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\n                    [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\" [parentSetting]=\"setting\"\n                    [noFileMessage]=\"control.noFileMessage\"\n                    [(value)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onSelected)=\"control.onSelected($event)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\n                </file-manager>\n            </ng-container>\n            <span *ngSwitchCase=\"'fileUpload'\">\n                <file-upload [sharedFolderType]=\"control.sharedFolderType\" [maxFileSize]=\"control.maxFileSize\"\n                    [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\n                    [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\n                    [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\n                    [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\n                    [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\n                    [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\" [control]=\"control\"\n                    [showDeleteFile]=\"control.showDeleteFile\" [readonly]=\"control.readonly\" [accept]=\"control.accept\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onRemove)=\"handleFieldValueChange(control, $event, eventType.DELETED, data, parentPath)\">\n                </file-upload>\n            </span>\n            <span *ngSwitchCase=\"'serviceFileUpload'\">\n                <service-file-upload *ngIf=\"control.entityKey || data[control.entityKeyField] || control.rootFolderId\"\n                    [parentContext]=\"context\" [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\n                    [entityKey]=\"control.entityKey ? control.entityKey : data[control.entityKeyField]\"\n                    [control]=\"control\" [(ngModel)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onRemove)=\"handleFieldValueChange(control, $event, eventType.DELETED, data, parentPath)\">\n                </service-file-upload>\n            </span>\n            <ng-container *ngSwitchCase=\"'user-picker'\">\n                <user-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n                    [readOnlyValues]=\"data[control.field + '_readOnly']\" [multiple]=\"control.multiple\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\n                </user-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'switch'\">\n                <p-inputSwitch [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\n                    (onChange)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </p-inputSwitch>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'checkbox'\">\n                <div [class]=\"control.class\" role=\"checkbox-alone\">\n                    <p-checkbox [disabled]=\"checkDisabled(data, control)\" [binary]=\"true\"\n                        [label]=\"control.isCustomLabel ? control.displayLabel : (!control.hiddenLabel ? control.label : null)\"\n                        [(ngModel)]=\"data[control.field]\"\n                        (onChange)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                    </p-checkbox>\n                    <!-- <tn-checkbox [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n                        [(ngModel)]=\"data[control.field]\"\n                        (onChange)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"></tn-checkbox> -->\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'button'\">\n                <button type=\"button\" pButton [class]=\"control.btClass\" [icon]=\"control.icon\"\n                    [label]=\"control.buttonText | translate\" [ngStyle]=\"control.btStyle\" [pTooltip]=\"control.fullLabel\"\n                    tooltipPosition=\"top\" (click)=\"handleButtonClick(control, $event, parentPath)\"></button>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'container'\">\n                <div class=\"p-grid p-col-12\" style=\"margin: 0\" [class.not-show-in-box]=\"!control.showInBox\"\n                    [class.show-in-box]=\"control.showInBox\" [ngStyle]=\"control.boxStyle\">\n                    <ng-container *ngFor=\"let subControl of control.controls\">\n                        <ng-container *ngTemplateOutlet=\"customControl; context: {\n                            control: subControl,\n                            data: data[control.field],\n                            parentPath: path,\n                            rowIndex: rowIndex,\n                            path: path + '.' + subControl.field,\n                            showLabel: subControl.showLabel,\n                            mdWidth: subControl.mdWidth,\n                            rowSpan: subControl.rowSpan\n                        }\">\n                        </ng-container>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'checkboxlist'\">\n                <check-box-list [control]=\"control\" [dataSource]=\"data._source[control.field] || control.dataSource\"\n                    [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onSelect)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\n                </check-box-list>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'radiobuttonlist'\">\n                <radio-button-list [control]=\"control\" [dataSource]=\"control.dataSource\"\n                    [disabled]=\"checkDisabled(data, control)\" [(value)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (adjustValue)=\"handleAdjustValueDropdownEvent(control, parentPath)\"\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\"\n                    (onDataSourceLoaded)=\"handleDataSourceLoaded(control, parentPath, $event)\">\n                </radio-button-list>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'colorPicker'\">\n                <tn-color-picker [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </tn-color-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'spanControl'\">\n                <span *ngIf=\"!control.ishtml\">{{data[control.field]}}</span>\n                <span *ngIf=\"control.ishtml\" [innerHTML]=\"data[control.field]\"></span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'colorControl'\">\n                <span class=\"show-color-control\" [ngStyle]=\"{ backgroundColor: data[control.sourceField]}\"></span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'address'\">\n                <address-picker [control]=\"control\" [showSubLabel]=\"control.showSubLabel\"\n                    [disabled]=\"checkDisabled(data, control)\" [(data)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onSelect)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\n                </address-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'autocomplete-picker'\">\n                <autocomplete-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n                    [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\n                </autocomplete-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'cocautochuc'\">\n                <cocautochuc-picker [control]=\"control\" [parentOrgId]=\"control.parentOrgId\"\n                    [disabled]=\"checkDisabled(data, control)\" [parentOrgCode]=\"control.parentOrgCode\"\n                    [filter]=\"control.filter\" [multiple]=\"control.multiple\" [required]=\"control.required\"\n                    [isUsingId]=\"control.isUsingId\" [disabledParentItem]=\"control.disabledParentItem\"\n                    [rootParentId]=\"control.rootParentId\" [(ngModel)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </cocautochuc-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'cocautochuc-picker'\">\n                <cocautochuc-picker-list [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n                    [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\n                </cocautochuc-picker-list>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'cocautochuc-picker-new'\">\n                <cocautochuc-picker-list-new [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n                    [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\n                </cocautochuc-picker-list-new>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'vanban'\">\n                <vanban-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n                    [required]=\"control.required\" [readOnly]=\"control.readOnly\" [loaiVanBan]=\"control.loaiVanBan\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </vanban-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'congviec'\">\n                <div>\n                    <congviec-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n                        [required]=\"control.required\" [(ngModel)]=\"data[control.field]\"\n                        (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                        (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                    </congviec-picker>\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'percent'\">\n                <div>\n                    <tn-mask [suffix]=\"'%'\" [placeholder]=\"control.placeholder\" [maskType]=\"'int'\"\n                        [autoFormat]=\"control.autoFormat\" [min]=\"0\" [max]=\"100\"\n                        [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\n                        (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                        (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                    </tn-mask>\n                    <p-slider [step]=\"1\" [min]=\"0\" [max]=\"100\" [disabled]=\"checkDisabled(data, control)\"\n                        [(ngModel)]=\"data[control.field]\"\n                        (onSlideEnd)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                    </p-slider>\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'chips'\">\n                <p-chips [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\n                    (onAdd)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onRemove)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"></p-chips>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'entity-picker'\">\n                <entity-picker [control]=\"control\" [children]=\"children\" [disabled]=\"checkDisabled(data, control)\"\n                    [required]=\"control.required\" [readOnly]=\"control.readOnly\" [(ngModel)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </entity-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'table'\">\n                <div [class]=\"control.class\">\n                    <tn-custom-scrollbar class=\"--has-border\" [showScrollHorizontal]=\"true\">\n                        <p-table class=\"new-table scr-table table-control\" [value]=\"data[control.field]\"\n                            [columns]=\"control.headerTemplate\" [responsive]=\"true\" [scrollable]=\"false\"\n                            [rowTrackBy]=\"trackByFuncId\"\n                            (onRowReorder)=\"handleRowOrdered(control, $event, eventType.ROW_REORDER, data, parentPath)\">\n                            <ng-template pTemplate=\"colgroup\">\n                                <colgroup>\n                                    <col *ngIf=\"control.showNumber\" style=\"width: 40px\" />\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate\">\n                                        <col *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\n                                            [style.width]=\"subControl.width\" />\n                                    </ng-container>\n                                    <col *ngIf=\"control.enableReorderRow\" style=\"width: 30px\" />\n                                    <col *ngIf=\"control.showFunction\" [style.width]=\"control.widthFunctionColumn\" />\n                                </colgroup>\n                            </ng-template>\n                            <ng-template *ngIf=\"getComponentByType(_prefixCustomHeader + control.field)\"\n                                pTemplate=\"header\" let-columns>\n                                <ng-container\n                                    *ngTemplateOutlet=\"getComponentByType(_prefixCustomHeader + control.field), context: {$implicit: control.headerTemplate, crudForm: this, containerSticky: containerSticky}\">\n                                </ng-container>\n                            </ng-template>\n                            <ng-template *ngIf=\"!getComponentByType(_prefixCustomHeader + control.field)\"\n                                pTemplate=\"header\" let-rowData let-columns>\n                                <tr>\n                                    <th *ngIf=\"control.showNumber\" class=\"th-sticky stt\">\n                                        {{ 'TT' |translate}}\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                    </th>\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate\">\n                                        <th *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\n                                            [width]=\"subControl.width\"\n                                            [pTooltip]=\"subControl.fullLabel || subControl.label\" tooltipPosition=\"top\"\n                                            style=\"text-align: center;\">\n                                            {{subControl.label}}\n                                            <span *ngIf=\"subControl.required\" class=\"star-required\">*</span>\n                                            <span *ngIf=\"subControl.description\"\n                                                class=\"subControl-description\">({{subControl.description}})</span>\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                        </th>\n                                    </ng-container>\n                                    <th *ngIf=\"control.enableReorderRow\">\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                    </th>\n                                    <th *ngIf=\"control.showFunction\" class=\"table-function column-function\">\n                                        <div class=\"cell-header-function\"><span>Ch\u1EE9c n\u0103ng</span></div>\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                    </th>\n                                </tr>\n                            </ng-template>\n                            <ng-template pTemplate=\"body\" let-rowData let-ri=\"rowIndex\">\n                                <tr [pReorderableRow]=\"ri\" [class]=\"rowData.class\"\n                                    (click)=\"handleRowClick(rowData, control)\">\n                                    <td *ngIf=\"control.showNumber\" class=\"stt th-sticky\"\n                                        style=\"text-align: center; vertical-align: inherit\">\n                                        <span>\n                                            {{ri + 1}}\n                                        </span>\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                    </td>\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate; let i = index\">\n                                        <td *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\n                                            [class.control-inside]=\"true\" [class]=\"subControl.class\"\n                                            [ngStyle]=\"{'text-align': getTextAlign(subControl.textAlign), 'vertical-align': 'inherit'}\">\n                                            <span class=\"p-column-title\">{{subControl.label}}</span>\n                                            <ng-template [ngIf]=\"getControlType(subControl) != 'column'\">\n                                                <ng-container *ngTemplateOutlet=\"customControl; context: {\n                                                    control: subControl,\n                                                    data: rowData,\n                                                    index: ri,\n                                                    tablePath: path,\n                                                    parentPath: path + '[' + ri + ']',\n                                                    path: path + '[' + ri + '].' + subControl.field,\n                                                    showLabel: false,\n                                                    mdWidth: 12,\n                                                    rowSpan: 1\n                                                }\">\n                                                </ng-container>\n                                            </ng-template>\n                                            <ng-template [ngIf]=\"getControlType(subControl) == 'column'\">\n                                                <span>{{_modelData[control.field][ri][subControl.field]}}</span>\n                                            </ng-template>\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                        </td>\n                                    </ng-container>\n                                    <td *ngIf=\"control.enableReorderRow\" class=\"no-padding center v-center\">\n                                        <i class=\"fas fa-arrows-alt\" style=\"cursor:pointer; padding: 8px; color: #555;\"\n                                            pReorderableRowHandle></i>\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                    </td>\n                                    <td *ngIf=\"control.showFunction\" style=\"text-align: center\"\n                                        class=\"column-function text-center\">\n                                        <div *ngIf=\"!control.rowButtonTemplate\"\n                                            class=\"p-toolbar-group-center button-group\">\n                                            <button *ngIf=\"control.showSave\" [disabled]=\"rowData._disableSave\"\n                                                type=\"button\" pButton class=\"p-button-text p-button-rounded\"\n                                                icon=\"pi pi-save\" [pTooltip]=\"'L\u01B0u' | translate\" tooltipPosition=\"top\"\n                                                (click)=\"saveRow(ri, control, path)\"></button>\n                                            <button *ngIf=\"control.showEdit\" [disabled]=\"rowData._disableEdit\"\n                                                type=\"button\" pButton class=\"p-button-text p-button-rounded\"\n                                                icon=\"pi pi-pencil\" [pTooltip]=\"'S\u1EEDa' | translate\" tooltipPosition=\"top\"\n                                                (click)=\"editRow(ri, control, path)\"></button>\n                                            <button *ngIf=\"control.showDelete\" [disabled]=\"rowData._disableDelete\"\n                                                type=\"button\" pButton\n                                                class=\"p-button-text p-button-danger p-button-rounded\"\n                                                icon=\"pi pi-trash\" [pTooltip]=\"'X\u00F3a' | translate\" tooltipPosition=\"top\"\n                                                (click)=\"deleteRow(ri, control, path)\"></button>\n                                            <button *ngIf=\"control.rowButtons\" type=\"button\" pButton\n                                                icon=\"pi pi-ellipsis-v\"\n                                                class=\"link-or-action p-button-text p-button-rounded\"\n                                                pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\" tooltipPosition=\"top\"\n                                                (click)=\"showContextMenu($event, rowData, control)\"></button>\n                                        </div>\n                                        <div *ngIf=\"control.rowButtonTemplate\"\n                                            class=\"p-toolbar-group-center button-group\">\n                                            <ng-container\n                                                *ngTemplateOutlet=\"control.rowButtonTemplate; context: {rowData: _modelData[control.field][ri], rowIndex: ri, path: path, control: control}\">\n                                            </ng-container>\n                                        </div>\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                    </td>\n                                </tr>\n                            </ng-template>\n                            <ng-template *ngIf=\"control.summaryTemplate\" pTemplate=\"summary\" let-rowData>\n                                <ng-container *ngTemplateOutlet=\"control.summaryTemplate; context: {rowData: rowData}\">\n                                </ng-container>\n                            </ng-template>\n                        </p-table>\n                    </tn-custom-scrollbar>\n                    <div *ngIf=\"control.showFooter\" class=\"--table-schema-footer\">\n                        <button *ngIf=\"control.showAdd\" type=\"button\" pButton style=\"width:auto\" label=\"Th\u00EAm m\u1EDBi\"\n                            icon=\"pi pi-plus\" class=\"p-button-text\" (click)=\"addNewRow(control, path)\"></button>\n                        <span *ngIf=\"control.showDialog\" style=\"font-weight: normal;\">\n                            <p-checkbox label=\"M\u1EDF dialog\" [binary]=\"true\" [(ngModel)]=\"control.showEdit\">\n                            </p-checkbox>\n                        </span>\n                        <button *ngIf=\"control.enableAddMulti\" type=\"button\" pButton\n                            style=\"width:auto; margin-left:10px;\" label=\"Th\u00EAm nhi\u1EC1u\" icon=\"pi pi-clone\"\n                            class=\"p-button-text\" (click)=\"addMultiRow(control, 5, path)\"></button>\n                        <button *ngFor=\"let bt of control.footerButtons\" type=\"button\" pButton [class]=\"bt.class\"\n                            [icon]=\"bt.icon\" [label]=\"bt.label | translate\" style=\"width:auto; margin-left:10px;\"\n                            (click)=\"messageRow( -1, control, path)\"></button>\n                    </div>\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n                <ng-container *ngIf=\"control.template\">\n                    <ng-container [ngTemplateOutlet]=\"control.template\" [ngTemplateOutletContext]=\"{\n                        crudForm: this, data: data, index: rowIndex, parentPath: parentPath, control: control, changeFunc: handleFieldValueChange\n                    }\">\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"!control.template\" [ngTemplateOutlet]=\"getComponentByType(control.field)\"\n                    [ngTemplateOutletContext]=\"{\n                        crudForm: this, data: data, index: rowIndex, parentPath: parentPath, control: control, changeFunc: handleFieldValueChange\n                    }\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngTemplateOutlet=\"validation; context: {control: control, data: data}\">\n            </ng-container>\n            <div *ngIf=\"control.message\" class=\"control-message\">\n                <span [class]=\"control.messageClass\">{{control.message}}</span>\n            </div>\n        </ng-container>\n    </div>\n</ng-template>\n<ng-template #validation let-control=\"control\" let-data=\"data\">\n    <ng-container *ngIf=\"data._errors[control.field].length > 0\">\n        <div class=\"error-container\">\n            <ng-container *ngFor=\"let error of data._errors[control.field]\">\n                <div class=\"error-item\" *ngIf=\"error\">\n                    <ng-container [ngTemplateOutlet]=\"errorMessage\" [ngTemplateOutletContext]=\"{content: error}\">\n                    </ng-container>\n                </div>\n            </ng-container>\n        </div>\n    </ng-container>\n</ng-template>\n<ng-template #errorMessage let-content=\"content\">\n    <div class=\"error-content\">\n        <i class=\"pi pi-ban\"></i>\n        <span> {{content}}</span>\n    </div>\n</ng-template>\n<ng-template #labelControl let-control=\"control\">\n    <ng-container>\n        <label [class]=\"getLabelClass(control)\" *ngIf=\"!control.isHtml\" [attr.label-index]=\"control.indexLabel\"\n            [pTooltip]=\"control.title\" tooltipPosition=\"top\" tooltipStyleClass=\"wrap\" [escape]=\"false\"\n            [for]=\"control.for\">{{control.text | translate}}</label>\n        <label [class]=\"getLabelClass(control)\" *ngIf=\"control.isHtml\" [innerHTML]=\"control.text | safeHtml\"\n            [attr.label-index]=\"control.indexLabel\"></label>\n    </ng-container>\n</ng-template>\n<ng-template #containerSticky>\n    <span class=\"fix-sticky top\"></span>\n    <span class=\"fix-sticky right\"></span>\n    <span class=\"fix-sticky left\"></span>\n</ng-template>\n<!-- <ng-template #templateCongViecForm let-control=\"control\">\n    <base-congviec-form [control]=\"control\" [parentSetting]=\"congViecSetting\" [tenCongViec]=\"control.data.tenCongViec\">\n    </base-congviec-form>\n</ng-template> -->\n<tn-dialog *ngIf=\"tableFormDialogModel.showEditForm\" #dialog [styleClass]=\"'address-form'\"\n    [header]=\"tableFormDialogModel.header | translate\" [popupSize]=\"tableFormDialogModel.popupSize\"\n    (onHide)=\"tableFormDialogModel.showEditForm = false\">\n    <table-detail-form #formBase [parentSetting]=\"setting\" [schema]=\"tableFormSchema\" [data]=\"tableFormDialogModel.data\"\n        (onSaved)=\"handleSavedTableRow($event)\" (onCancel)=\"tableFormDialogModel.showEditForm = false\">\n    </table-detail-form>\n</tn-dialog>",
+                template: "<div [class]=\"_styleClass\">\n    <form #formElement autocomplete=\"off\" autocorrect=\"off\" spellcheck=\"false\"\n        [class]=\"'p-grid form-group crud-form' + (formClass ? ' ' + formClass : '')\"\n        (keydown.shift.tab)=\"preventBlur($event)\">\n        <div class=\"p-grid p-col-12\" [class.grid]=\"useGridTemplate\" style=\"margin: 0\">\n            <ng-container *ngFor=\"let control of setting.schema\">\n                <ng-container *ngTemplateOutlet=\"customControl; context: {\n                    control: control, data: _modelData, parentPath: '', path: control.field, showLabel: control.showLabel,\n                    mdWidth: control.mdWidth, rowSpan: control.rowSpan\n                }\">\n                </ng-container>\n            </ng-container>\n        </div>\n    </form>\n</div>\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"buttonContexts\">\n</p-contextMenu>\n<ng-template #customControl let-data=\"data\" let-control=\"control\" let-showLabel=\"showLabel\" let-mdWidth=\"mdWidth\"\n    let-rowSpan=\"rowSpan\" let-rowIndex=\"index\" let-path=\"path\" let-parentPath=\"parentPath\" let-tablePath=\"tablePath\">\n    <div *ngIf=\"!checkHidden(control, data, path)\" id=\"{{path}}-holder\"\n        class=\"p-col-{{control.gWidth}} p-md-{{mdWidth}} row-span-{{rowSpan}} {{control.class}} crud-form-control type-{{control.dataType}}\"\n        [class.error]=\"data._errors[control.field].length > 0\"\n        [class.not-show-in-box-holder]=\"control.showInBox === false\"\n        [class.show-in-box-holder]=\"control.showInBox === true\" [ngStyle]=\"control.style\">\n        <div class=\"label\" *ngIf=\"showLabel\">\n            <label *ngIf=\"control.label && !control.isHtmlLabel\" [pTooltip]=\"control.fullLabel\"\n                tooltipPosition=\"top\">{{control.label}}\n                <span *ngIf=\"control.required || control.showIconRequired\" class=\"star-required\">*</span>\n            </label>\n            <ng-container *ngIf=\"control.label && control.isHtmlLabel\">\n                <label [innerHTML]=\"control.label | safeHtml\" [pTooltip]=\"control.fullLabel\" tooltipPosition=\"top\">\n                </label>\n                <span *ngIf=\"control.required || control.showIconRequired\" class=\"star-required\">*</span>\n            </ng-container>\n            <span *ngIf=\"control.description\" class=\"control-description\">({{control.description}})</span>\n        </div>\n        <ng-container [ngSwitch]=\"control.controlType\">\n            <ng-container *ngSwitchCase=\"'label'\">\n                <ng-container [ngTemplateOutlet]=\"labelControl\"\n                    [ngTemplateOutletContext]=\"{control: control, data: data}\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'title'\">\n                <label *ngIf=\"!control.isHtml\" [for]=\"control.for\">{{control.text | translate}}</label>\n                <label *ngIf=\"control.isHtml\" [innerHTML]=\"control.text | safeHtml\"></label>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'text'\">\n                <div class=\"p-inputgroup\" *ngIf=\"control.suffFix\">\n                    <input [placeholder]=\"control.placeholder\"\n                        [required]=\"control.validators && control.validators.required\"\n                        [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText\n                        [type]=\"control.dataFormat\" [max]=\"control.max\" [min]=\"control.min\"\n                        [maxlength]=\"control.maxLength\" [(ngModel)]=\"data[control.field]\"\n                        (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                        (key.enter)=\"handleFieldValueChange(control, $event, eventType.ENTER, data, parentPath)\" />\n                    <span class=\"p-inputgroup-addon\">({{control.suffFix}})</span>\n                </div>\n                <input *ngIf=\"!control.suffFix\" [placeholder]=\"control.placeholder\"\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText [type]=\"control.dataFormat\"\n                    [max]=\"control.max\" [min]=\"control.min\" [maxlength]=\"control.maxLength\"\n                    [(ngModel)]=\"data[control.field]\"\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (key.enter)=\"handleFieldValueChange(control, $event, eventType.ENTER, data, parentPath)\" />\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'htmlPreview'\">\n                <html-preview [control]=\"control\" [(ngModel)]=\"data[control.field]\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </html-preview>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'reference-text'\">\n                <reference-textbox [control]=\"control\" [value]=\"data[control.field]\" [dataSource]=\"control.dataSource\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"></reference-textbox>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'template'\">\n                <ng-container [ngTemplateOutlet]=\"control.template\"\n                    [ngTemplateOutletContext]=\"{$implicit: _rootNode, control: control, data: data, tablePath: tablePath, parentPath: parentPath, rowIndex: rowIndex, funcUpdateModel: updateModelFromExternal}\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'content'\">\n                <div class=\"control-content label\">\n                    <span [innerHTML]=\"data[control.field] ? (data[control.field] | safeHtml) : ''\">\n                    </span>\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'mask'\">\n                <tn-mask [prefix]=\"control.prefix\" [decimalPlaces]=\"control.decimalPlaces\" [suffix]=\"control.suffix\"\n                    [placeholder]=\"control.placeholder\" [disabled]=\"checkDisabled(data, control)\"\n                    [maskType]=\"control.maskType\" [autoFormat]=\"control.autoFormat\" [min]=\"control.min\"\n                    [max]=\"control.max\" [(ngModel)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </tn-mask>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'numberrange'\">\n                <tn-number-picker-range [decimalPlaces]=\"control.decimalPlaces\"\n                    [disabled]=\"checkDisabled(data, control)\" [maskType]=\"control.maskType\" [min]=\"control.min\"\n                    [max]=\"control.max\" [placeholder]=\"control.placeholder\" [(ngModel)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (blur)=\"handleFieldValueChange(control, $event, eventType.BLUR, data, parentPath)\">\n                </tn-number-picker-range>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'money'\">\n                <input currencyMask [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText type=\"tel\"\n                    [options]=\"{prefix: '', thousands: '.', decimal: ',',precision:control.dataFormat === 'money'?0:0 }\"\n                    [(ngModel)]=\"data[control.field]\"\n                    (ngModelChange)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\" />\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'phoneOrfax'\">\n                <input [placeholder]=\"control.dataFormat==='phone'?'(999) 999-9999':'999-999-9999'\"\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" type=\"tel\" pInputText\n                    [(ngModel)]=\"data[control.field]\"\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\" />\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'textarea'\">\n                <textarea pInputTextarea [rows]=\"control.rows ? control.rows : 5\"\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" [(ngModel)]=\"data[control.field]\"\n                    [placeholder]=\"control.placeholder\"\n                    (keyup)=\"handleKeyUp(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"></textarea>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'editor'\">\n                <tn-tinymce *ngIf=\"!checkDisabled(data, control)\"\n                    [required]=\"control.validators && control.validators.required\" [mode]=\"control.mode\"\n                    [placeholder]=\"control.placeholder\" [height]=\"control.height ? control.height : 250\"\n                    [languageCode]=\"control.languageCode\"\n                    [disabled]=\"control.disabled || (control.disableCheck && control.disableCheck(model))\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onKeyUp)=\"handleKeyUp(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </tn-tinymce>\n                <div *ngIf=\"checkDisabled(data, control)\" class=\"html-box\"\n                    [innerHTML]=\"data[control.field] ? (data[control.field] | safeHtml) : ''\">\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'datetime'\">\n                <datetime-picker [disabled]=\"checkDisabled(data, control)\" [control]=\"control\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </datetime-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'autocomplete'\">\n                <app-autocomplete-datasource [control]=\"control\"\n                    [suggestions]=\"data._source[control.field] || control.dataSource\" [(ngModel)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onValueChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </app-autocomplete-datasource>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'datetimerange'\">\n                <tn-datetime-picker-range [disabled]=\"control.disabled\" [control]=\"control\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </tn-datetime-picker-range>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'dropdown'\">\n                <dropdown [control]=\"control\" [dataSource]=\"getControlDataSource(control, data)\" [data]=\"data\"\n                    [(value)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleChangeDropdown(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onHideSmartEvent)=\"handleChangeDropdown(control, $event, eventType.HIDE, data, parentPath)\"\n                    (adjustValue)=\"handleAdjustValueDropdownEvent(control, parentPath)\"\n                    (onDataSourceLoaded)=\"handleDataSourceLoaded(control, parentPath, $event)\"\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\n                </dropdown>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'imageuploader'\">\n                <app-image-uploader [loadByEntityKey]=\"control.loadByEntityKey\" [entityKey]=\"control.entityKey\"\n                    [defaultNoImageUrl]=\"'/assets/images/no-image.jpg'\" [multiple]=\"control.multiple\"\n                    [disabled]=\"control.disabled\" [isAvatar]=\"control.isAvatar\" [(ngModel)]=\"data[control.field]\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\">\n                    <ng-template *ngIf=\"control.templateItems\" #items let-files>\n                        <ng-container *ngTemplateOutlet=\"control.templateItems; context: {\n                            $implicit: files\n                        }\"></ng-container>\n                    </ng-template>\n                    <ng-template *ngIf=\"control.templateItem\" #item let-file>\n                        <ng-container *ngTemplateOutlet=\"control.templateItem; context: {\n                            $implicit: file\n                        }\"></ng-container>\n                    </ng-template>\n                </app-image-uploader>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'fileManager'\">\n                <file-manager *ngIf=\"control.entityKey || data[control.entityKeyField] || control.rootFolderId\"\n                    [control]=\"control\" [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\n                    [entityKey]=\"control.entityKey ? control.entityKey : data[control.entityKeyField]\"\n                    [readonly]=\"control.disabled\" [layout]=\"control.layout\" [rootFolderId]=\"control.rootFolderId\"\n                    [maxFileSize]=\"control.maxFileSize\" [inTaiLieu]=\"control.inTaiLieu\"\n                    [inTaiLieuChung]=\"control.inTaiLieuChung\" [copyToFolderId]=\"control.copyToFolderId\"\n                    [filePickerSetting]=\"control.filePickerSetting\" [dataForm]=\"data\"\n                    [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\n                    [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\n                    [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\n                    [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\n                    [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\n                    [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\" [parentSetting]=\"setting\"\n                    [noFileMessage]=\"control.noFileMessage\" [(value)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onSelected)=\"control.onSelected($event)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\n                </file-manager>\n            </ng-container>\n            <span *ngSwitchCase=\"'fileUpload'\">\n                <file-upload [sharedFolderType]=\"control.sharedFolderType\" [maxFileSize]=\"control.maxFileSize\"\n                    [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\n                    [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\n                    [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\n                    [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\n                    [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\n                    [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\" [control]=\"control\"\n                    [showDeleteFile]=\"control.showDeleteFile\" [readonly]=\"control.readonly\" [accept]=\"control.accept\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onRemove)=\"handleFieldValueChange(control, $event, eventType.DELETED, data, parentPath)\">\n                </file-upload>\n            </span>\n            <span *ngSwitchCase=\"'serviceFileUpload'\">\n                <service-file-upload *ngIf=\"control.entityKey || data[control.entityKeyField] || control.rootFolderId\"\n                    [parentContext]=\"context\" [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\n                    [entityKey]=\"control.entityKey ? control.entityKey : data[control.entityKeyField]\"\n                    [control]=\"control\" [(ngModel)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onRemove)=\"handleFieldValueChange(control, $event, eventType.DELETED, data, parentPath)\">\n                </service-file-upload>\n            </span>\n            <ng-container *ngSwitchCase=\"'user-picker'\">\n                <user-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n                    [readOnlyValues]=\"data[control.field + '_readOnly']\" [multiple]=\"control.multiple\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\n                </user-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'switch'\">\n                <p-inputSwitch [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\n                    (onChange)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </p-inputSwitch>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'checkbox'\">\n                <div [class]=\"control.class\" role=\"checkbox-alone\">\n                    <p-checkbox [disabled]=\"checkDisabled(data, control)\" [binary]=\"true\"\n                        [label]=\"control.isCustomLabel ? control.displayLabel : (!control.hiddenLabel ? control.label : null)\"\n                        [(ngModel)]=\"data[control.field]\"\n                        (onChange)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                    </p-checkbox>\n                    <!-- <tn-checkbox [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n                        [(ngModel)]=\"data[control.field]\"\n                        (onChange)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"></tn-checkbox> -->\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'button'\">\n                <button type=\"button\" pButton [class]=\"control.btClass\" [icon]=\"control.icon\"\n                    [label]=\"control.buttonText | translate\" [ngStyle]=\"control.btStyle\" [pTooltip]=\"control.fullLabel\"\n                    tooltipPosition=\"top\" (click)=\"handleButtonClick(control, $event, parentPath)\"></button>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'container'\">\n                <div class=\"p-grid p-col-12\" style=\"margin: 0\" [class.not-show-in-box]=\"!control.showInBox\"\n                    [class.show-in-box]=\"control.showInBox\" [ngStyle]=\"control.boxStyle\">\n                    <ng-container *ngFor=\"let subControl of control.controls\">\n                        <ng-container *ngTemplateOutlet=\"customControl; context: {\n                            control: subControl,\n                            data: data[control.field],\n                            parentPath: path,\n                            rowIndex: rowIndex,\n                            path: path + '.' + subControl.field,\n                            showLabel: subControl.showLabel,\n                            mdWidth: subControl.mdWidth,\n                            rowSpan: subControl.rowSpan\n                        }\">\n                        </ng-container>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'checkboxlist'\">\n                <check-box-list [control]=\"control\" [dataSource]=\"data._source[control.field] || control.dataSource\"\n                    [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onSelect)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\n                </check-box-list>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'radiobuttonlist'\">\n                <radio-button-list [control]=\"control\" [dataSource]=\"control.dataSource\"\n                    [disabled]=\"checkDisabled(data, control)\" [(value)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (adjustValue)=\"handleAdjustValueDropdownEvent(control, parentPath)\"\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\"\n                    (onDataSourceLoaded)=\"handleDataSourceLoaded(control, parentPath, $event)\">\n                </radio-button-list>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'colorPicker'\">\n                <tn-color-picker [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </tn-color-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'spanControl'\">\n                <span *ngIf=\"!control.ishtml\">{{data[control.field]}}</span>\n                <span *ngIf=\"control.ishtml\" [innerHTML]=\"data[control.field]\"></span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'colorControl'\">\n                <span class=\"show-color-control\" [ngStyle]=\"{ backgroundColor: data[control.sourceField]}\"></span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'address'\">\n                <address-picker [control]=\"control\" [showSubLabel]=\"control.showSubLabel\"\n                    [disabled]=\"checkDisabled(data, control)\" [(data)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onSelect)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\n                </address-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'autocomplete-picker'\">\n                <autocomplete-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n                    [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\n                </autocomplete-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'cocautochuc'\">\n                <cocautochuc-picker [control]=\"control\" [parentOrgId]=\"control.parentOrgId\"\n                    [disabled]=\"checkDisabled(data, control)\" [parentOrgCode]=\"control.parentOrgCode\"\n                    [filter]=\"control.filter\" [multiple]=\"control.multiple\" [required]=\"control.required\"\n                    [isUsingId]=\"control.isUsingId\" [disabledParentItem]=\"control.disabledParentItem\"\n                    [rootParentId]=\"control.rootParentId\" [(ngModel)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </cocautochuc-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'cocautochuc-picker'\">\n                <cocautochuc-picker-list [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n                    [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\n                </cocautochuc-picker-list>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'cocautochuc-picker-new'\">\n                <cocautochuc-picker-list-new [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n                    [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\n                </cocautochuc-picker-list-new>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'vanban'\">\n                <vanban-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n                    [required]=\"control.required\" [readOnly]=\"control.readOnly\" [loaiVanBan]=\"control.loaiVanBan\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </vanban-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'congviec'\">\n                <div>\n                    <congviec-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n                        [required]=\"control.required\" [(ngModel)]=\"data[control.field]\"\n                        (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                        (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                    </congviec-picker>\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'percent'\">\n                <div>\n                    <tn-mask [suffix]=\"'%'\" [placeholder]=\"control.placeholder\" [maskType]=\"'int'\"\n                        [autoFormat]=\"control.autoFormat\" [min]=\"0\" [max]=\"100\"\n                        [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\n                        (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                        (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                    </tn-mask>\n                    <p-slider [step]=\"1\" [min]=\"0\" [max]=\"100\" [disabled]=\"checkDisabled(data, control)\"\n                        [(ngModel)]=\"data[control.field]\"\n                        (onSlideEnd)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                    </p-slider>\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'chips'\">\n                <p-chips [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\n                    (onAdd)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onRemove)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"></p-chips>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'entity-picker'\">\n                <entity-picker [control]=\"control\" [children]=\"children\" [disabled]=\"checkDisabled(data, control)\"\n                    [required]=\"control.required\" [readOnly]=\"control.readOnly\" [(ngModel)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </entity-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'table'\">\n                <div [class]=\"control.class\">\n                    <tn-custom-scrollbar class=\"--has-border\" [showScrollHorizontal]=\"true\">\n                        <p-table class=\"new-table scr-table table-control\" [value]=\"data[control.field]\"\n                            [columns]=\"control.headerTemplate\" [responsive]=\"true\" [scrollable]=\"false\"\n                            [rowTrackBy]=\"trackByFuncId\"\n                            (onRowReorder)=\"handleRowOrdered(control, $event, eventType.ROW_REORDER, data, parentPath)\">\n                            <ng-template pTemplate=\"colgroup\">\n                                <colgroup>\n                                    <col *ngIf=\"control.showNumber\" style=\"width: 40px\" />\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate\">\n                                        <col *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\n                                            [style.width]=\"subControl.width\" />\n                                    </ng-container>\n                                    <col *ngIf=\"control.enableReorderRow\" style=\"width: 30px\" />\n                                    <col *ngIf=\"control.showFunction\" [style.width]=\"control.widthFunctionColumn\" />\n                                </colgroup>\n                            </ng-template>\n                            <ng-template *ngIf=\"getComponentByType(_prefixCustomHeader + control.field)\"\n                                pTemplate=\"header\" let-columns>\n                                <ng-container\n                                    *ngTemplateOutlet=\"getComponentByType(_prefixCustomHeader + control.field), context: {$implicit: control.headerTemplate, crudForm: this, containerSticky: containerSticky}\">\n                                </ng-container>\n                            </ng-template>\n                            <ng-template *ngIf=\"!getComponentByType(_prefixCustomHeader + control.field)\"\n                                pTemplate=\"header\" let-rowData let-columns>\n                                <tr>\n                                    <th *ngIf=\"control.showNumber\" class=\"th-sticky stt\">\n                                        {{ 'TT' |translate}}\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                    </th>\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate\">\n                                        <th *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\n                                            [width]=\"subControl.width\"\n                                            [pTooltip]=\"subControl.fullLabel || subControl.label\" tooltipPosition=\"top\"\n                                            style=\"text-align: center;\">\n                                            {{subControl.label}}\n                                            <span *ngIf=\"subControl.required\" class=\"star-required\">*</span>\n                                            <span *ngIf=\"subControl.description\"\n                                                class=\"subControl-description\">({{subControl.description}})</span>\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                        </th>\n                                    </ng-container>\n                                    <th *ngIf=\"control.enableReorderRow\">\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                    </th>\n                                    <th *ngIf=\"control.showFunction\" class=\"table-function column-function\">\n                                        <div class=\"cell-header-function\"><span>Ch\u1EE9c n\u0103ng</span></div>\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                    </th>\n                                </tr>\n                            </ng-template>\n                            <ng-template pTemplate=\"body\" let-rowData let-ri=\"rowIndex\">\n                                <tr [pReorderableRow]=\"ri\" [class]=\"rowData.class\"\n                                    (click)=\"handleRowClick(rowData, control)\">\n                                    <td *ngIf=\"control.showNumber\" class=\"stt th-sticky\"\n                                        style=\"text-align: center; vertical-align: inherit\">\n                                        <span>\n                                            {{ri + 1}}\n                                        </span>\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                    </td>\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate; let i = index\">\n                                        <td *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\n                                            [class.control-inside]=\"true\" [class]=\"subControl.class\"\n                                            [ngStyle]=\"{'text-align': getTextAlign(subControl.textAlign), 'vertical-align': 'inherit'}\">\n                                            <span class=\"p-column-title\">{{subControl.label}}</span>\n                                            <ng-template [ngIf]=\"getControlType(subControl) != 'column'\">\n                                                <ng-container *ngTemplateOutlet=\"customControl; context: {\n                                                    control: subControl,\n                                                    data: rowData,\n                                                    index: ri,\n                                                    tablePath: path,\n                                                    parentPath: path + '[' + ri + ']',\n                                                    path: path + '[' + ri + '].' + subControl.field,\n                                                    showLabel: false,\n                                                    mdWidth: 12,\n                                                    rowSpan: 1\n                                                }\">\n                                                </ng-container>\n                                            </ng-template>\n                                            <ng-template [ngIf]=\"getControlType(subControl) == 'column'\">\n                                                <span>{{_modelData[control.field][ri][subControl.field]}}</span>\n                                            </ng-template>\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                        </td>\n                                    </ng-container>\n                                    <td *ngIf=\"control.enableReorderRow\" class=\"no-padding center v-center\">\n                                        <i class=\"fas fa-arrows-alt\" style=\"cursor:pointer; padding: 8px; color: #555;\"\n                                            pReorderableRowHandle></i>\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                    </td>\n                                    <td *ngIf=\"control.showFunction\" style=\"text-align: center\"\n                                        class=\"column-function text-center\">\n                                        <div *ngIf=\"!control.rowButtonTemplate\"\n                                            class=\"p-toolbar-group-center button-group\">\n                                            <button *ngIf=\"control.showSave\" [disabled]=\"rowData._disableSave\"\n                                                type=\"button\" pButton class=\"p-button-text p-button-rounded\"\n                                                icon=\"pi pi-save\" [pTooltip]=\"'L\u01B0u' | translate\" tooltipPosition=\"top\"\n                                                (click)=\"saveRow(ri, control, path)\"></button>\n                                            <button *ngIf=\"control.showEdit\" [disabled]=\"rowData._disableEdit\"\n                                                type=\"button\" pButton class=\"p-button-text p-button-rounded\"\n                                                icon=\"pi pi-pencil\" [pTooltip]=\"'S\u1EEDa' | translate\" tooltipPosition=\"top\"\n                                                (click)=\"editRow(ri, control, path)\"></button>\n                                            <button *ngIf=\"control.showDelete\" [disabled]=\"rowData._disableDelete\"\n                                                type=\"button\" pButton\n                                                class=\"p-button-text p-button-danger p-button-rounded\"\n                                                icon=\"pi pi-trash\" [pTooltip]=\"'X\u00F3a' | translate\" tooltipPosition=\"top\"\n                                                (click)=\"deleteRow(ri, control, path)\"></button>\n                                            <button *ngIf=\"control.rowButtons\" type=\"button\" pButton\n                                                icon=\"pi pi-ellipsis-v\"\n                                                class=\"link-or-action p-button-text p-button-rounded\"\n                                                pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\" tooltipPosition=\"top\"\n                                                (click)=\"showContextMenu($event, rowData, control)\"></button>\n                                        </div>\n                                        <div *ngIf=\"control.rowButtonTemplate\"\n                                            class=\"p-toolbar-group-center button-group\">\n                                            <ng-container\n                                                *ngTemplateOutlet=\"control.rowButtonTemplate; context: {rowData: _modelData[control.field][ri], rowIndex: ri, path: path, control: control}\">\n                                            </ng-container>\n                                        </div>\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                    </td>\n                                </tr>\n                            </ng-template>\n                            <ng-template *ngIf=\"control.summaryTemplate\" pTemplate=\"summary\" let-rowData>\n                                <ng-container *ngTemplateOutlet=\"control.summaryTemplate; context: {rowData: rowData}\">\n                                </ng-container>\n                            </ng-template>\n                        </p-table>\n                    </tn-custom-scrollbar>\n                    <div *ngIf=\"control.showFooter\" class=\"--table-schema-footer\">\n                        <button *ngIf=\"control.showAdd\" type=\"button\" pButton style=\"width:auto\" label=\"Th\u00EAm m\u1EDBi\"\n                            icon=\"pi pi-plus\" class=\"p-button-text\" (click)=\"addNewRow(control, path)\"></button>\n                        <span *ngIf=\"control.showDialog\" style=\"font-weight: normal;\">\n                            <p-checkbox label=\"M\u1EDF dialog\" [binary]=\"true\" [(ngModel)]=\"control.showEdit\">\n                            </p-checkbox>\n                        </span>\n                        <button *ngIf=\"control.enableAddMulti\" type=\"button\" pButton\n                            style=\"width:auto; margin-left:10px;\" label=\"Th\u00EAm nhi\u1EC1u\" icon=\"pi pi-clone\"\n                            class=\"p-button-text\" (click)=\"addMultiRow(control, 5, path)\"></button>\n                        <button *ngFor=\"let bt of control.footerButtons\" type=\"button\" pButton [class]=\"bt.class\"\n                            [icon]=\"bt.icon\" [label]=\"bt.label | translate\" style=\"width:auto; margin-left:10px;\"\n                            (click)=\"messageRow( -1, control, path)\"></button>\n                    </div>\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n                <ng-container *ngIf=\"control.template\">\n                    <ng-container [ngTemplateOutlet]=\"control.template\" [ngTemplateOutletContext]=\"{\n                        crudForm: this, data: data, index: rowIndex, parentPath: parentPath, control: control, changeFunc: handleFieldValueChange\n                    }\">\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"!control.template\" [ngTemplateOutlet]=\"getComponentByType(control.field)\"\n                    [ngTemplateOutletContext]=\"{\n                        crudForm: this, data: data, index: rowIndex, parentPath: parentPath, control: control, changeFunc: handleFieldValueChange\n                    }\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngTemplateOutlet=\"validation; context: {control: control, data: data}\">\n            </ng-container>\n            <div *ngIf=\"control.message\" class=\"control-message\">\n                <span [class]=\"control.messageClass\">{{control.message}}</span>\n            </div>\n        </ng-container>\n    </div>\n</ng-template>\n<ng-template #validation let-control=\"control\" let-data=\"data\">\n    <ng-container *ngIf=\"data._errors[control.field].length > 0\">\n        <div class=\"error-container\">\n            <ng-container *ngFor=\"let error of data._errors[control.field]\">\n                <div class=\"error-item\" *ngIf=\"error\">\n                    <ng-container [ngTemplateOutlet]=\"errorMessage\" [ngTemplateOutletContext]=\"{content: error}\">\n                    </ng-container>\n                </div>\n            </ng-container>\n        </div>\n    </ng-container>\n</ng-template>\n<ng-template #errorMessage let-content=\"content\">\n    <div class=\"error-content\">\n        <i class=\"pi pi-ban\"></i>\n        <span> {{content}}</span>\n    </div>\n</ng-template>\n<ng-template #labelControl let-control=\"control\">\n    <ng-container>\n        <label [class]=\"getLabelClass(control)\" *ngIf=\"!control.isHtml\" [attr.label-index]=\"control.indexLabel\"\n            [pTooltip]=\"control.title\" tooltipPosition=\"top\" tooltipStyleClass=\"wrap\" [escape]=\"false\"\n            [for]=\"control.for\">{{control.text | translate}}</label>\n        <label [class]=\"getLabelClass(control)\" *ngIf=\"control.isHtml\" [innerHTML]=\"control.text | safeHtml\"\n            [attr.label-index]=\"control.indexLabel\"></label>\n    </ng-container>\n</ng-template>\n<ng-template #containerSticky>\n    <span class=\"fix-sticky top\"></span>\n    <span class=\"fix-sticky right\"></span>\n    <span class=\"fix-sticky left\"></span>\n</ng-template>\n<!-- <ng-template #templateCongViecForm let-control=\"control\">\n    <base-congviec-form [control]=\"control\" [parentSetting]=\"congViecSetting\" [tenCongViec]=\"control.data.tenCongViec\">\n    </base-congviec-form>\n</ng-template> -->\n<tn-dialog *ngIf=\"tableFormDialogModel.showEditForm\" #dialog [styleClass]=\"'address-form'\"\n    [header]=\"tableFormDialogModel.header | translate\" [popupSize]=\"tableFormDialogModel.popupSize\"\n    (onHide)=\"tableFormDialogModel.showEditForm = false\">\n    <table-detail-form #formBase [parentSetting]=\"setting\" [schema]=\"tableFormSchema\" [data]=\"tableFormDialogModel.data\"\n        (onSaved)=\"handleSavedTableRow($event)\" (onCancel)=\"tableFormDialogModel.showEditForm = false\">\n    </table-detail-form>\n</tn-dialog>",
                 providers: [ComponentContextService],
                 styles: [".label-only{font-weight:700;margin-bottom:1em}div.label{position:relative}div.label .star-required{color:red;position:absolute;padding-left:.2em;padding-top:.1em}th>span.star-required{color:red;padding-left:.2em;padding-top:.3em}div.type-container.not-show-in-box-holder{padding:0}.--table-schema-footer{display:flex;align-items:center;font-weight:600;padding:.5em;background:#f8f9fa;color:#495057;border:1px solid #e9ecef}.show-in-box{border:1px solid #ced4da;border-radius:5px}.not-show-in-box{padding:0}.view-mode div.label{padding-bottom:3px}.view-mode div.label label{font-weight:700;font-size:.85em}.view-mode>span:not(:empty){display:inline-block;width:100%;padding:5px 0}.view-mode.type-table div.label+div{padding:5px 0}td>.view-mode{display:inline-block;padding:.25rem .5rem}td>.view-mode .view-mode{padding:0}.crud-form-control div[role=checkbox-alone]{margin-top:24px}.crud-form-control div[role=checkbox-alone].mg-top-0{margin-top:0}.crud-form-control .label+div[role=checkbox-alone]{margin-top:11px}.crud-form-control.type-table div[role=checkbox-alone]{margin-top:6px;text-align:center}.crud-form-control.type-table div[role=checkbox-alone].mg-top-0{margin-top:0}.crud-form-control.type-table div[role=checkbox-alone].align-left{text-align:left}.crud-form-control.type-title{font-size:1.2rem;font-weight:700;color:#025ba7;border-bottom:1px solid #cfcfcf;text-transform:uppercase;padding:5px;margin-bottom:5px}.crud-form-control.type-title>.label{margin-bottom:0}.control-description,.crud-form-control .subControl-description{font-size:.8rem;font-weight:700;color:#007eff;margin-bottom:5px}.control-description{padding-left:.75rem}.th-sticky{text-align:center!important;z-index:2!important;position:sticky!important;top:0;background:inherit}.th-sticky.stt{left:0}.cell-header-function{display:flex;align-items:center}.cell-header-function>span{text-align:center;flex:1 1}.cell-header-function button{width:24px;height:24px;padding:0;margin:0}.no-value{font-size:.8em}@keyframes fadeIn{0%{opacity:0;top:-25px}to{opacity:1;top:0}}@keyframes shrink{0%{height:0}to{height:20px}}@media screen and (min-width:40.063em){.label-right{padding-left:2em}}::ng-deep crud-form .crud-form-control .tn-check-box-list{margin-top:5px}::ng-deep crud-form .crud-form-control>div.label{margin-bottom:5px;font-size:.9rem;height:1.15em}::ng-deep crud-form .crud-form-control>div.label+*{width:100%}::ng-deep crud-form .crud-form-control>.error-container .error-item{overflow:visible;animation:shrink .1s;min-height:20px;padding-top:5px}::ng-deep crud-form .crud-form-control>.error-container .error-item .error-content{display:flex;position:relative;color:red;font-size:.9em;animation:fadeIn .1s}::ng-deep crud-form .crud-form-control>.error-container .error-item .error-content i{font-size:.9em;display:flex;padding-top:1px}::ng-deep crud-form .crud-form-control>.error-container .error-item .error-content span{display:flex;padding-left:5px}::ng-deep crud-form .crud-form-control .control-message{margin-top:5px;font-size:.9rem}::ng-deep crud-form .crud-form-control .control-message .green{color:#00af00}::ng-deep crud-form .crud-form-control .control-message .red{color:red}::ng-deep crud-form .crud-form-control .control-message .blue{color:#0095ff}::ng-deep crud-form .crud-form-control.no-label>div.label{display:none}::ng-deep crud-form .crud-form-control.error .p-dropdown,::ng-deep crud-form .crud-form-control.error .p-inputtext,::ng-deep crud-form .crud-form-control.error .p-multiselect,::ng-deep crud-form .crud-form-control.error .tn-dropdown,::ng-deep crud-form .crud-form-control.error input,::ng-deep crud-form .crud-form-control.error select,::ng-deep crud-form .crud-form-control.error textarea{border-color:#ff5722!important}::ng-deep crud-form .crud-form-control.error .p-autocomplete-multiple-container:not(.p-disabled).p-focus,::ng-deep crud-form .crud-form-control.error .p-inputtext:enabled:focus,::ng-deep crud-form .crud-form-control.error .tn-dropdown:not(.p-disabled).p-focus{box-shadow:0 0 0 .2rem #ffc4b3}::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .p-dropdown,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .p-inputtext,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .p-multiselect,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .tn-dropdown,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) input,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) select,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) textarea{border-color:#ced4da!important}::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .p-autocomplete-multiple-container:not(.p-disabled).p-focus,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .p-dropdown.tn-dropdown.p-focus,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .p-inputtext:enabled:focus{box-shadow:0 0 0 .2rem #a6d5fa}::ng-deep crud-form .crud-form-container{padding:.5rem .5rem 0}::ng-deep crud-form .p-datatable .p-datatable-tbody tr td.control-inside,::ng-deep crud-form .p-datatable .p-datatable-tbody tr td.control-inside .show-in-box:not(.crud-form-control),::ng-deep crud-form base-congviec-form crud-form>.crud-form-container{padding:0}@media screen and (min-width:768px){::ng-deep crud-form .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}::ng-deep crud-form .grid .p-md-1{width:unset;grid-column:span 1}::ng-deep crud-form .grid .p-md-2{width:unset;grid-column:span 2}::ng-deep crud-form .grid .p-md-3{width:unset;grid-column:span 3}::ng-deep crud-form .grid .p-md-4{width:unset;grid-column:span 4}::ng-deep crud-form .grid .p-md-5{width:unset;grid-column:span 5}::ng-deep crud-form .grid .p-md-6{width:unset;grid-column:span 6}::ng-deep crud-form .grid .p-md-7{width:unset;grid-column:span 7}::ng-deep crud-form .grid .p-md-8{width:unset;grid-column:span 8}::ng-deep crud-form .grid .p-md-9{width:unset;grid-column:span 9}::ng-deep crud-form .grid .p-md-10{width:unset;grid-column:span 10}::ng-deep crud-form .grid .p-md-11{width:unset;grid-column:span 11}::ng-deep crud-form .grid .p-md-12{width:unset;grid-column:span 12}::ng-deep crud-form .grid .row-span-1{grid-row:span 1}::ng-deep crud-form .grid .row-span-2{grid-row:span 2}::ng-deep crud-form .grid .row-span-3{grid-row:span 3}::ng-deep crud-form .grid .row-span-4{grid-row:span 4}::ng-deep crud-form .grid .row-span-5{grid-row:span 5}::ng-deep crud-form .grid .row-span-6{grid-row:span 6}::ng-deep crud-form .grid .row-span-7{grid-row:span 7}::ng-deep crud-form .grid .row-span-8{grid-row:span 8}::ng-deep crud-form .grid .row-span-9{grid-row:span 9}::ng-deep crud-form .grid .row-span-10{grid-row:span 10}::ng-deep crud-form .grid .row-span-11{grid-row:span 11}::ng-deep crud-form .grid .row-span-12{grid-row:span 12}::ng-deep crud-form .grid .row-span-13{grid-row:span 13}::ng-deep crud-form .grid .row-span-14{grid-row:span 14}::ng-deep crud-form .grid .row-span-15{grid-row:span 15}::ng-deep crud-form .grid .row-span-16{grid-row:span 16}::ng-deep crud-form .grid .row-span-17{grid-row:span 17}::ng-deep crud-form .grid .row-span-18{grid-row:span 18}::ng-deep crud-form .grid .row-span-19{grid-row:span 19}::ng-deep crud-form .grid .row-span-20{grid-row:span 20}::ng-deep crud-form .grid .row-span-21{grid-row:span 21}::ng-deep crud-form .grid .row-span-22{grid-row:span 22}::ng-deep crud-form .grid .row-span-23{grid-row:span 23}::ng-deep crud-form .grid .row-span-24{grid-row:span 24}::ng-deep crud-form .grid .row-span-25{grid-row:span 25}::ng-deep crud-form .grid .row-span-26{grid-row:span 26}::ng-deep crud-form .grid .row-span-27{grid-row:span 27}::ng-deep crud-form .grid .row-span-28{grid-row:span 28}::ng-deep crud-form .grid .row-span-29{grid-row:span 29}::ng-deep crud-form .grid .row-span-30{grid-row:span 30}::ng-deep crud-form .grid .row-span-31{grid-row:span 31}::ng-deep crud-form .grid .row-span-32{grid-row:span 32}::ng-deep crud-form .grid .row-span-33{grid-row:span 33}::ng-deep crud-form .grid .row-span-34{grid-row:span 34}::ng-deep crud-form .grid .row-span-35{grid-row:span 35}::ng-deep crud-form .grid .row-span-36{grid-row:span 36}::ng-deep crud-form .grid .row-span-37{grid-row:span 37}::ng-deep crud-form .grid .row-span-38{grid-row:span 38}::ng-deep crud-form .grid .row-span-39{grid-row:span 39}::ng-deep crud-form .grid .row-span-40{grid-row:span 40}::ng-deep crud-form .grid .row-span-41{grid-row:span 41}::ng-deep crud-form .grid .row-span-42{grid-row:span 42}::ng-deep crud-form .grid .row-span-43{grid-row:span 43}::ng-deep crud-form .grid .row-span-44{grid-row:span 44}::ng-deep crud-form .grid .row-span-45{grid-row:span 45}::ng-deep crud-form .grid .row-span-46{grid-row:span 46}::ng-deep crud-form .grid .row-span-47{grid-row:span 47}::ng-deep crud-form .grid .row-span-48{grid-row:span 48}::ng-deep crud-form .grid .row-span-49{grid-row:span 49}::ng-deep crud-form .grid .row-span-50{grid-row:span 50}}:host ::ng-deep .tox-tinymce{border:none;border-top:1px solid #ccc;overflow:unset}:host ::ng-deep .tox-tinymce .tox-editor-container{overflow:unset}:host ::ng-deep .tox-tinymce .tox-toolbar{border:1px solid #ccc;border-bottom:none}:host ::ng-deep .tox-tinymce .tox-edit-area{border:1px solid #ccc}:host ::ng-deep .tox-tinymce .tox-edit-area iframe{box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}:host ::ng-deep .tox-tinymce .tox-menubar{border:1px solid #ccc}:host ::ng-deep .tox .tox-edit-area.tinymce-focus{border:1px solid #66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 3px 0 #66afe9;transition:box-shadow .3s,border-color .3s;transition-property:box-shadow,border-color;transition-duration:.3s,.3s;transition-timing-function:ease,ease;transition-delay:0s,0s}:host ::ng-deep .rq .tox .tox-edit-area{border-left-color:#ff4c46}:host ::ng-deep .table-schema-paging{margin-bottom:40px;display:block}"]
             },] }
@@ -46802,18 +46802,35 @@ FileSizePipe.decorators = [
 ];
 
 /* eslint-disable prefer-const */
-class HtmlPreviewComponent extends ComponentBase {
-    constructor(_injector, gs) {
-        super(_injector);
+class HtmlPreviewComponent {
+    constructor(gs, _commonService) {
         this.gs = gs;
-        this.content = '';
+        this._commonService = _commonService;
         this.control = new HtmlPreviewControlSchema();
-        this.contentChange = new EventEmitter();
+        this.onChanged = new EventEmitter();
+        this.content = '';
+        this.id = '';
+        this.id = this._commonService.guid();
     }
-    ngOnChanges(changes) {
-        if (changes['content']) {
-            this.renderMath();
+    // ngOnChanges(changes: SimpleChanges) {
+    //     if (changes['content']) {
+    //         this.renderMath();
+    //     }
+    // }
+    writeValue(obj) {
+        if (obj) {
+            this.content = obj;
+        }
+        else {
+            this.content = '';
         }
+        this.renderMath();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
     }
     renderMath() {
         this.mathJaxObject = this.gs.nativeGlobal()['MathJax'];
@@ -46822,24 +46839,29 @@ class HtmlPreviewComponent extends ComponentBase {
         }
         setTimeout(() => {
             var _a, _b;
-            const autoScrollBottom = !!((_a = this.control) === null || _a === void 0 ? void 0 : _a.autoScrollBottom);
-            const output = this.mathContent.nativeElement;
-            output.innerHTML = ((_b = this.content) === null || _b === void 0 ? void 0 : _b.trim()) || '';
-            this.mathJaxObject.texReset();
-            this.mathJaxObject.typesetClear();
-            this.mathJaxObject.typesetPromise([output]).catch(function (err) {
+            const $this = this;
+            const autoScrollBottom = !!((_a = $this.control) === null || _a === void 0 ? void 0 : _a.autoScrollBottom);
+            const output = $this.mathContent.nativeElement;
+            output.innerHTML = ((_b = $this.content) === null || _b === void 0 ? void 0 : _b.trim()) || '';
+            $this.mathJaxObject.texReset();
+            $this.mathJaxObject.typesetClear();
+            $this.mathJaxObject.typesetPromise([output]).catch(function (err) {
                 output.innerHTML = '';
                 output.appendChild(document.createTextNode(err.message));
                 console.error(err);
             }).then(function () {
+                var _a, _b, _c;
                 // Do something after typeset
                 if (autoScrollBottom) {
-                    const box = document.querySelector('#math-preview-box');
+                    const box = document.querySelector(`#math-preview-box-${$this.id}`);
                     const elem = box.getElementsByClassName('ps--active-y')[0];
                     if (elem) {
                         elem.scrollTop = elem.scrollHeight;
                     }
                 }
+                const value = (_c = (_b = (_a = document.getElementById(`mathPreview-${$this.id}`)) === null || _a === void 0 ? void 0 : _a.innerHTML) === null || _b === void 0 ? void 0 : _b.trim()) !== null && _c !== void 0 ? _c : '';
+                $this.onChange(value);
+                $this.onChanged.emit(value);
             });
             return this.mathJaxObject.startup.defaultPageReady();
         });
@@ -46902,20 +46924,26 @@ class HtmlPreviewComponent extends ComponentBase {
 HtmlPreviewComponent.decorators = [
     { type: Component, args: [{
                 selector: 'html-preview',
-                template: "<div class=\"preview-box\" id=\"math-preview-box\" [ngStyle]=\"{'height': control.height + 'px'}\">\n    <tn-custom-scrollbar [showScrollHorizontal]=\"true\">\n        <!-- <span #mathContent id=\"mathPreview\" [innerHTML]=\"content | safeHtml\"></span> -->\n        <div #mathContent id=\"mathPreview\"></div>\n    </tn-custom-scrollbar>\n</div>",
-                providers: [ComponentContextService],
+                template: "<div class=\"preview-box\" id=\"math-preview-box-{{id}}\" [ngStyle]=\"{'height': control.height + 'px'}\">\n    <tn-custom-scrollbar [showScrollHorizontal]=\"true\">\n        <div #mathContent id=\"mathPreview-{{id}}\"></div>\n    </tn-custom-scrollbar>\n</div>",
+                providers: [
+                    ComponentContextService,
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => HtmlPreviewComponent),
+                        multi: true
+                    },
+                ],
                 styles: ["::ng-deep html-preview .preview-box{border:1px solid #ced4da;padding:10px}"]
             },] }
 ];
 HtmlPreviewComponent.ctorParameters = () => [
-    { type: Injector },
-    { type: GlobalService }
+    { type: GlobalService },
+    { type: CommonService }
 ];
 HtmlPreviewComponent.propDecorators = {
     mathContent: [{ type: ViewChild, args: ['mathContent',] }],
-    content: [{ type: Input }],
     control: [{ type: Input }],
-    contentChange: [{ type: Output }]
+    onChanged: [{ type: Output }]
 };
 
 function coreDeclaration() {