tnx-shared 5.2.20 → 5.2.21

package/esm2020/components/crud/crud-form/crud-form.component.mjs

@@ -2020,7 +2020,7 @@ export class CrudFormComponent extends ComponentBase {
     }
 }
 CrudFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: CrudFormComponent, deps: [{ token: i0.Injector }, { token: i1.CommonService }, { token: i2.CrudService }, { token: i3.TranslateService }, { token: i4.DeviceDetectorService }, { token: i5.EnvironmentService }, { token: i6.ComponentService }, { token: i7.DomSanitizer }, { token: i8.EntityPickerService }], target: i0.ɵɵFactoryTarget.Component });
-CrudFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: CrudFormComponent, selector: "crud-form", inputs: { setting: "setting", context: "context", filesUploaded: "filesUploaded", isViewMode: "isViewMode", disableKeypressControl: "disableKeypressControl", disableCaching: "disableCaching", styleClass: "styleClass", formId: "formId", formClass: "formClass", autoFocus: "autoFocus", trapFocus: "trapFocus", data: "data", formState: "formState" }, outputs: { onFormReady: "onFormReady", onControlReady: "onControlReady", onAllControlReady: "onAllControlReady", onModelChanged: "onModelChanged", dataChange: "dataChange", onChange: "onChange", onAfterTrinhKy: "onAfterTrinhKy" }, providers: [ComponentContextService], queries: [{ propertyName: "children", predicate: TemplateRef }], viewQueries: [{ propertyName: "formElement", first: true, predicate: ["formElement"], descendants: true }, { propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"_styleClass\">\r\n    <form #formElement autocomplete=\"off\" autocorrect=\"off\" spellcheck=\"false\"\r\n        [class]=\"'p-grid form-group crud-form' + (formClass ? ' ' + formClass : '')\"\r\n        (keydown.shift.tab)=\"preventBlur($event)\">\r\n        <div class=\"p-grid p-col-12\" style=\"margin: 0\">\r\n            <ng-container *ngFor=\"let control of setting.schema\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"customControl; context: {control: control, data: _modelData, parentPath: '', path: control.field, showLabel: control.showLabel, mdWidth: control.mdWidth}\">\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </form>\r\n</div>\r\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"buttonContexts\">\r\n</p-contextMenu>\r\n<ng-template #customControl let-data=\"data\" let-control=\"control\" let-showLabel=\"showLabel\" let-mdWidth=\"mdWidth\"\r\n    let-rowIndex=\"index\" let-path=\"path\" let-parentPath=\"parentPath\" let-tablePath=\"tablePath\" let-groupKey=\"groupKey\">\r\n    <div *ngIf=\"!checkHidden(control, data, path)\" id=\"{{path}}-holder\"\r\n        class=\"p-col-{{control.gWidth}} p-md-{{mdWidth}} {{control.class}} crud-form-control type-{{control.dataType}}\"\r\n        [class.error]=\"data._errors[control.field].length > 0\"\r\n        [class.not-show-in-box-holder]=\"control.showInBox === false\"\r\n        [class.show-in-box-holder]=\"control.showInBox === true\" [ngStyle]=\"control.style\">\r\n        <div class=\"label\" *ngIf=\"showLabel\">\r\n            <label *ngIf=\"control.label\" [pTooltip]=\"control.fullLabel\" tooltipPosition=\"top\">{{control.label}}\r\n                <span *ngIf=\"control.required\" class=\"star-required\">*</span></label>\r\n            <span *ngIf=\"control.description\" class=\"control-description\">({{control.description}})</span>\r\n        </div>\r\n        <ng-container [ngSwitch]=\"control.controlType\">\r\n            <ng-container *ngSwitchCase=\"'label'\">\r\n                <ng-container [ngTemplateOutlet]=\"labelControl\"\r\n                    [ngTemplateOutletContext]=\"{control: control, data: data}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'title'\">\r\n                <label *ngIf=\"!control.ishtml\" [for]=\"control.for\">{{control.text | translate}}</label>\r\n                <label *ngIf=\"control.ishtml\" [innerHTML]=\"control.text | translate\"></label>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'text'\">\r\n                <div class=\"p-inputgroup\" *ngIf=\"control.suffFix\">\r\n                    <input [placeholder]=\"control.placeholder\"\r\n                        [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText\r\n                        [type]=\"control.dataFormat\" [(ngModel)]=\"data[control.field]\" [max]=\"control.max\"\r\n                        [min]=\"control.min\" [maxlength]=\"control.maxLength\"\r\n                        (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                        (key.enter)=\"handleFieldValueChange(control, $event, 'enter', data, parentPath)\" />\r\n                    <span class=\"p-inputgroup-addon\">({{control.suffFix}})</span>\r\n                </div>\r\n                <input *ngIf=\"!control.suffFix\" [placeholder]=\"control.placeholder\"\r\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText [type]=\"control.dataFormat\"\r\n                    [(ngModel)]=\"data[control.field]\" [max]=\"control.max\" [min]=\"control.min\"\r\n                    [maxlength]=\"control.maxLength\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (key.enter)=\"handleFieldValueChange(control, $event, 'enter', data, parentPath)\" />\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'reference-text'\">\r\n                <reference-textbox [control]=\"control\" [value]=\"data[control.field]\"></reference-textbox>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'template'\">\r\n                <ng-container [ngTemplateOutlet]=\"control.template\"\r\n                    [ngTemplateOutletContext]=\"{$implicit: _rootNode, control: control, data: data, tablePath: tablePath, parentPath: parentPath, rowIndex: rowIndex, funcUpdateModel: updateModelFromExternal}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'mask'\">\r\n                <tn-mask [prefix]=\"control.prefix\" [decimalPlaces]=\"control.decimalPlaces\" [suffix]=\"control.suffix\"\r\n                    [placeholder]=\"control.placeholder\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [maskType]=\"control.maskType\" [min]=\"control.min\" [max]=\"control.max\"\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </tn-mask>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'numberrange'\">\r\n                <tn-number-picker-range [decimalPlaces]=\"control.decimalPlaces\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [maskType]=\"control.maskType\"\r\n                    [(ngModel)]=\"data[control.field]\" [min]=\"control.min\" [max]=\"control.max\"\r\n                    (search)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (blur)=\"handleFieldValueChange(control, $event, 'blur', data, parentPath)\">\r\n                </tn-number-picker-range>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'money'\">\r\n                <input currencyMask [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText type=\"tel\"\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    [options]=\"{prefix: '', thousands: '.', decimal: ',',precision:control.dataFormat === 'money'?0:0 }\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\" />\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'phoneOrfax'\">\r\n                <input [placeholder]=\"control.dataFormat==='phone'?'(999) 999-9999':'999-999-9999'\"\r\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" type=\"tel\" pInputText\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\" />\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'textarea'\">\r\n                <textarea pInputTextarea [rows]=\"control.rows ? control.rows : 5\"\r\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" [(ngModel)]=\"data[control.field]\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"></textarea>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'editor'\">\r\n                <tn-tinymce *ngIf=\"!checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                    [required]=\"control.validators && control.validators.required\" [mode]=\"control.mode\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    [height]=\"control.height ? control.height : 250\" [languageCode]=\"control.languageCode\"\r\n                    [disabled]=\"control.disabled || (control.disableCheck && control.disableCheck(model))\">\r\n                </tn-tinymce>\r\n                <div *ngIf=\"checkDisabled(data, control)\" class=\"html-box\"\r\n                    [innerHTML]=\"data[control.field] ? (data[control.field] | safeHtml) : ''\">\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'datetime'\">\r\n                <datetime-picker [(ngModel)]=\"data[control.field]\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [control]=\"control\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </datetime-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'autocomplete'\">\r\n                <app-autocomplete-datasource [control]=\"control\" [(ngModel)]=\"data[control.field]\"\r\n                    [suggestions]=\"data._source[control.field] || control.dataSource\"\r\n                    (onValueChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </app-autocomplete-datasource>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'datetimerange'\">\r\n                <tn-datetime-picker-range [(ngModel)]=\"data[control.field]\" [disabled]=\"control.disabled\"\r\n                    [control]=\"control\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </tn-datetime-picker-range>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                <dropdown [control]=\"control\" [dataSource]=\"getControlDataSource(control, data)\"\r\n                    [(value)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleChangeDropdown(control, $event, 'change', data, parentPath)\"\r\n                    (onHideSmartEvent)=\"handleChangeDropdown(control, $event, 'hide', data, parentPath)\"\r\n                    (adjustValue)=\"handleAdjustValueDropdownEvent(control, parentPath)\"\r\n                    (onDataSourceLoaded)=\"handleDataSourceLoaded(control, parentPath, $event)\"\r\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\r\n                </dropdown>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'fileManager'\">\r\n                <ng-container *ngTemplateOutlet=\"customTemplate['crudFormFileManagerComponent']; context: {\r\n                    $implicit: data, control: control, parentPath: parentPath, checkDisabled: checkDisabled, handleFieldValueChange: handleFieldValueChange,\r\n                    handleControlReadyEvent: handleControlReadyEvent\r\n                }\"></ng-container>\r\n                <!-- <file-manager [control]=\"control\" [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\r\n                    [entityKey]=\"control.entityKey ? control.entityKey : data[control.entityKeyField]\"\r\n                    [readonly]=\"control.disabled\" [layout]=\"control.layout\" [maxFileSize]=\"control.maxFileSize\"\r\n                    [inTaiLieu]=\"control.inTaiLieu\" [inTaiLieuChung]=\"control.inTaiLieuChung\"\r\n                    [copyToFolderId]=\"control.copyToFolderId\"\r\n                    [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\r\n                    [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\r\n                    [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\r\n                    [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\r\n                    [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\r\n                    [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\"\r\n                    [(value)]=\"data[control.field]\" (onSelected)=\"control.onSelected($event)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\r\n                </file-manager> -->\r\n            </ng-container>\r\n            <span *ngSwitchCase=\"'fileUpload'\">\r\n                <file-upload [(ngModel)]=\"data[control.field]\" [sharedFolderType]=\"control.sharedFolderType\"\r\n                    [maxFileSize]=\"control.maxFileSize\"\r\n                    [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\r\n                    [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\r\n                    [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\r\n                    [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\r\n                    [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\r\n                    [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    [readonly]=\"control.readonly\" [accept]=\"control.accept\">\r\n                </file-upload>\r\n            </span>\r\n            <span *ngSwitchCase=\"'serviceFileUpload'\">\r\n                <ng-container *ngTemplateOutlet=\"customTemplate['crudFormServiceFileUploadComponent']; context: {\r\n                    $implicit: data, control: control, parentContext: context, parentPath: parentPath, \r\n                    checkDisabled: checkDisabled, handleFieldValueChange: handleFieldValueChange,\r\n                    handleControlReadyEvent: handleControlReadyEvent\r\n                }\"></ng-container>\r\n                <!-- <service-file-upload [(ngModel)]=\"data[control.field]\" [parentContext]=\"context\"\r\n                    [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\r\n                    [entityKey]=\"data[control.entityKeyField]\" [control]=\"control\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </service-file-upload> -->\r\n            </span>\r\n            <ng-container *ngSwitchCase=\"'user-picker'\">\r\n                <user-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [readOnlyValues]=\"data[control.field + '_readOnly']\" [(ngModel)]=\"data[control.field]\"\r\n                    [multiple]=\"control.multiple\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\r\n                </user-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'switch'\">\r\n                <p-inputSwitch [(ngModel)]=\"data[control.field]\" [disabled]=\"checkDisabled(data, control)\"\r\n                    (onChange)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </p-inputSwitch>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                <div [class]=\"control.class\" role=\"checkbox-alone\">\r\n                    <p-checkbox [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                        [label]=\"!control.hiddenLabel ? control.label : null\"\r\n                        (onChange)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\" binary=\"true\">\r\n                    </p-checkbox>\r\n                    <!-- <tn-checkbox [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                        [(ngModel)]=\"data[control.field]\"\r\n                        (onChange)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"></tn-checkbox> -->\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'button'\">\r\n                <button type=\"button\" pButton [class]=\"control.btClass\" [icon]=\"control.icon\"\r\n                    [label]=\"control.label | translate\" [ngStyle]=\"control.btStyle\"\r\n                    (click)=\"handleButtonClick(control, $event, parentPath)\"></button>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'container'\">\r\n                <div class=\"p-grid p-col-12\" style=\"margin: 0\" [class.not-show-in-box]=\"!control.showInBox\"\r\n                    [class.show-in-box]=\"control.showInBox\" [ngStyle]=\"control.boxStyle\">\r\n                    <ng-container *ngFor=\"let subControl of control.controls\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"customControl; context: {control: subControl, data: data[control.field], parentPath: path, rowIndex: rowIndex, path: path + '.' + subControl.field, showLabel: subControl.showLabel, mdWidth: subControl.mdWidth}\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'checkboxlist'\">\r\n                <check-box-list [control]=\"control\" [dataSource]=\"data._source[control.field] || control.dataSource\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                    (onSelect)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\r\n                </check-box-list>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'radiobuttonlist'\">\r\n                <radio-button-list [control]=\"control\" [dataSource]=\"control.dataSource\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [(value)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (adjustValue)=\"handleAdjustValueDropdownEvent(control, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\"\r\n                    (onDataSourceLoaded)=\"handleDataSourceLoaded(control, parentPath, $event)\">\r\n                </radio-button-list>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'colorPicker'\">\r\n                <tn-color-picker [(ngModel)]=\"data[control.field]\" [disabled]=\"checkDisabled(data, control)\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </tn-color-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'spanControl'\">\r\n                <span *ngIf=\"!control.ishtml\">{{data[control.field]}}</span>\r\n                <span *ngIf=\"control.ishtml\" [innerHTML]=\"data[control.field]\"></span>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'colorControl'\">\r\n                <span class=\"show-color-control\" [ngStyle]=\"{ backgroundColor: data[control.sourceField]}\"></span>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'address'\">\r\n                <ng-container *ngTemplateOutlet=\"customTemplate['crudFormAddressComponent']; context: {\r\n                    $implicit: data, control: control, parentPath: parentPath, checkDisabled: checkDisabled, handleFieldValueChange: handleFieldValueChange,\r\n                    handleControlReadyEvent: handleControlReadyEvent\r\n                }\"></ng-container>\r\n                <!-- <address-picker [control]=\"control\" [showSubLabel]=\"control.showSubLabel\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [(data)]=\"data[control.field]\"\r\n                    (onSelect)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\r\n                </address-picker> -->\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'autocomplete-picker'\">\r\n                <autocomplete-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\r\n                </autocomplete-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'entity-picker'\">\r\n                <entity-picker [control]=\"control\" [children]=\"children\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </entity-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'cocautochuc'\">\r\n                <cocautochuc-picker [control]=\"control\" [parentOrgId]=\"control.parentOrgId\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [parentOrgCode]=\"control.parentOrgCode\"\r\n                    [filter]=\"control.filter\" [multiple]=\"control.multiple\" [required]=\"control.required\"\r\n                    [isUsingId]=\"control.isUsingId\" [disabledParentItem]=\"control.disabledParentItem\"\r\n                    [rootParentId]=\"control.rootParentId\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </cocautochuc-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'cocautochuc-picker'\">\r\n                <cocautochuc-picker-list [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\r\n                </cocautochuc-picker-list>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'vanban'\">\r\n                <ng-container *ngTemplateOutlet=\"customTemplate['crudFormVanBanPickerComponent']; context: {\r\n                    $implicit: data, control: control, parentPath: parentPath, checkDisabled: checkDisabled, handleFieldValueChange: handleFieldValueChange,\r\n                    handleControlReadyEvent: handleControlReadyEvent\r\n                }\"></ng-container>\r\n                <!-- <vanban-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [(ngModel)]=\"data[control.field]\" [readOnly]=\"control.readOnly\"\r\n                    [loaiVanBan]=\"control.loaiVanBan\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </vanban-picker> -->\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'congviec'\">\r\n                <div>\r\n                    <ng-container *ngTemplateOutlet=\"customTemplate['crudFormCongViecPickerComponent']; context: {\r\n                        $implicit: data, control: control, parentPath: parentPath, checkDisabled: checkDisabled, handleFieldValueChange: handleFieldValueChange,\r\n                        handleControlReadyEvent: handleControlReadyEvent\r\n                    }\"></ng-container>\r\n                    <!-- <congviec-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                        [required]=\"control.required\" [(ngModel)]=\"data[control.field]\"\r\n                        (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                    </congviec-picker> -->\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'percent'\">\r\n                <div>\r\n                    <tn-mask [suffix]=\"'%'\" [placeholder]=\"control.placeholder\" [maskType]=\"'int'\" [min]=\"0\" [max]=\"100\"\r\n                        [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                        (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                    </tn-mask>\r\n                    <p-slider [step]=\"1\" [min]=\"0\" [max]=\"100\" [disabled]=\"checkDisabled(data, control)\"\r\n                        [(ngModel)]=\"data[control.field]\"\r\n                        (onSlideEnd)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                    </p-slider>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'common-picker'\">\r\n                <common-picker [control]=\"control\"\r\n                    [disabled]=\"control.disabled || (control.disableCheck && control.disableCheck(model))\"\r\n                    [groupKey]=\"groupKey\" [valueInGroup]=\"model[control.field]\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event,'change', data, parentPath);\">\r\n                </common-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'table'\">\r\n                <div [class]=\"control.class\">\r\n                    <tn-custom-scrollbar class=\"--has-border\" [showScrollHorizontal]=\"true\">\r\n                        <p-table class=\"new-table scr-table table-control\" [value]=\"data[control.field]\"\r\n                            [columns]=\"control.headerTemplate\" [responsive]=\"true\" [scrollable]=\"false\"\r\n                            [rowTrackBy]=\"trackByFuncId\"\r\n                            (onRowReorder)=\"handleRowOrdered(control, $event, 'rowReorder', data, parentPath)\">\r\n                            <ng-template *ngIf=\"getComponentByType(_prefixCustomHeader + control.field)\"\r\n                                pTemplate=\"header\" let-columns>\r\n                                <ng-container\r\n                                    *ngTemplateOutlet=\"getComponentByType(_prefixCustomHeader + control.field), context: {$implicit: control.headerTemplate, crudForm: this, containerSticky: containerSticky}\">\r\n                                </ng-container>\r\n                            </ng-template>\r\n                            <ng-template *ngIf=\"!getComponentByType(_prefixCustomHeader + control.field)\"\r\n                                pTemplate=\"header\" let-rowData let-columns>\r\n                                <tr>\r\n                                    <th *ngIf=\"control.showNumber\" style=\"text-align: center; width: 5%\">\r\n                                        {{ 'TT' |translate}}\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate\">\r\n                                        <th *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\r\n                                            [pTooltip]=\"subControl.fullLabel || subControl.label\" tooltipPosition=\"top\"\r\n                                            style=\"text-align: center;\" [style.width]=\"subControl.width\">\r\n                                            {{subControl.label}}\r\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                        </th>\r\n                                    </ng-container>\r\n                                    <th *ngIf=\"control.enableReorderRow\" style=\"width: 30px\">\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                    <th *ngIf=\"control.showFunction\" [style.width]=\"control.widthFunctionColumn\"\r\n                                        class=\"table-function column-function\">\r\n                                        <div class=\"cell-header-function\"><span>Ch\u1EE9c n\u0103ng</span></div>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                </tr>\r\n                            </ng-template>\r\n                            <ng-template pTemplate=\"body\" let-rowData let-ri=\"rowIndex\">\r\n                                <tr [pReorderableRow]=\"ri\">\r\n                                    <td class=\"stt\" style=\"text-align: center; vertical-align: inherit\">\r\n                                        <span>\r\n                                            {{ri + 1}}\r\n                                        </span>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </td>\r\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate; let i = index\">\r\n                                        <td *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\r\n                                            [class.control-inside]=\"true\" [class]=\"subControl.class\"\r\n                                            [ngStyle]=\"{'text-align': getTextAlign(subControl.textAlign), 'vertical-align': 'inherit'}\">\r\n                                            <span class=\"p-column-title\">{{subControl.label}}</span>\r\n                                            <ng-template [ngIf]=\"getControlType(subControl) != 'column'\">\r\n                                                <ng-container\r\n                                                    *ngTemplateOutlet=\"customControl; context: getContextTd(subControl, rowData, ri, path)\">\r\n                                                </ng-container>\r\n                                            </ng-template>\r\n                                            <ng-template [ngIf]=\"getControlType(subControl) == 'column'\">\r\n                                                <span>{{_modelData[control.field][ri][subControl.field]}}</span>\r\n                                            </ng-template>\r\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                        </td>\r\n                                    </ng-container>\r\n                                    <td *ngIf=\"control.enableReorderRow\" class=\"no-padding center v-center\">\r\n                                        <i class=\"fas fa-arrows-alt\" style=\"cursor:pointer; padding: 8px; color: #555;\"\r\n                                            pReorderableRowHandle></i>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </td>\r\n                                    <td *ngIf=\"control.showFunction\" style=\"text-align: center\"\r\n                                        class=\"column-function text-center\">\r\n                                        <div *ngIf=\"!control.rowButtonTemplate\"\r\n                                            class=\"p-toolbar-group-center button-group\">\r\n                                            <button *ngIf=\"control.showSave\" [disabled]=\"rowData._disableSave\"\r\n                                                type=\"button\" pButton class=\"p-button-text p-button-rounded\"\r\n                                                icon=\"pi pi-save\" [pTooltip]=\"'L\u01B0u' | translate\" tooltipPosition=\"top\"\r\n                                                (click)=\"saveRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.showEdit\" [disabled]=\"rowData._disableEdit\"\r\n                                                type=\"button\" pButton class=\"p-button-text p-button-rounded\"\r\n                                                icon=\"pi pi-pencil\" [pTooltip]=\"'S\u1EEDa' | translate\" tooltipPosition=\"top\"\r\n                                                (click)=\"editRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.showDelete\" [disabled]=\"rowData._disableDelete\"\r\n                                                type=\"button\" pButton\r\n                                                class=\"p-button-text p-button-danger p-button-rounded\"\r\n                                                icon=\"pi pi-trash\" [pTooltip]=\"'X\u00F3a' | translate\" tooltipPosition=\"top\"\r\n                                                (click)=\"deleteRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.rowButtons\" type=\"button\" pButton\r\n                                                icon=\"pi pi-ellipsis-v\"\r\n                                                class=\"link-or-action p-button-text p-button-rounded\"\r\n                                                pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\" tooltipPosition=\"top\"\r\n                                                (click)=\"showContextMenu($event, rowData, control)\"></button>\r\n                                        </div>\r\n                                        <div *ngIf=\"control.rowButtonTemplate\"\r\n                                            class=\"p-toolbar-group-center button-group\">\r\n                                            <ng-container\r\n                                                *ngTemplateOutlet=\"control.rowButtonTemplate; context: {rowData: _modelData[control.field][ri], rowIndex: ri, path: path, control: control}\">\r\n                                            </ng-container>\r\n                                        </div>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </td>\r\n                                </tr>\r\n                            </ng-template>\r\n                            <ng-template *ngIf=\"control.summaryTemplate\" pTemplate=\"summary\" let-rowData>\r\n                                <ng-container *ngTemplateOutlet=\"control.summaryTemplate; context: {rowData: rowData}\">\r\n                                </ng-container>\r\n                            </ng-template>\r\n                        </p-table>\r\n                    </tn-custom-scrollbar>\r\n                    <div *ngIf=\"control.showFooter\" class=\"--table-schema-footer\">\r\n                        <button *ngIf=\"control.showAdd\" type=\"button\" pButton style=\"width:auto\" label=\"Th\u00EAm m\u1EDBi\"\r\n                            icon=\"pi pi-plus\" class=\"p-button-text\" (click)=\"addNewRow(control, path)\"></button>\r\n                        <span *ngIf=\"control.showDialog\" style=\"font-weight: normal;\">\r\n                            <p-checkbox label=\"M\u1EDF dialog\" [binary]=\"true\" [(ngModel)]=\"control.showEdit\">\r\n                            </p-checkbox>\r\n                        </span>\r\n                        <button *ngIf=\"control.enableAddMulti\" type=\"button\" pButton\r\n                            style=\"width:auto; margin-left:10px;\" label=\"Th\u00EAm nhi\u1EC1u\" icon=\"pi pi-clone\"\r\n                            class=\"p-button-text\" (click)=\"addMultiRow(control, 5, path)\"></button>\r\n                        <button *ngFor=\"let bt of control.footerButtons\" type=\"button\" pButton [class]=\"bt.class\"\r\n                            [icon]=\"bt.icon\" [label]=\"bt.label | translate\" style=\"width:auto; margin-left:10px;\"\r\n                            (click)=\"messageRow( -1, control, path)\"></button>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                <ng-container [ngTemplateOutlet]=\"getComponentByType(control.field)\" [ngTemplateOutletContext]=\"{\r\n                        crudForm: this, data: data, index: rowIndex, parentPath: parentPath, control: control, changeFunc: handleFieldValueChange\r\n                    }\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"validation; context: {control: control, data: data}\">\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #validation let-control=\"control\" let-data=\"data\">\r\n    <ng-container *ngIf=\"data._errors[control.field].length > 0\">\r\n        <div class=\"error-container\">\r\n            <ng-container *ngFor=\"let error of data._errors[control.field]\">\r\n                <div class=\"error-item\" *ngIf=\"error\">\r\n                    <ng-container [ngTemplateOutlet]=\"errorMessage\" [ngTemplateOutletContext]=\"{content: error}\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #errorMessage let-content=\"content\">\r\n    <div class=\"error-content\">\r\n        <i class=\"pi pi-ban\"></i>\r\n        <span> {{content}}</span>\r\n    </div>\r\n</ng-template>\r\n<ng-template #labelControl let-control=\"control\">\r\n    <ng-container>\r\n        <label [class]=\"getLabelClass(control)\" *ngIf=\"!control.ishtml\" [attr.label-index]=\"control.indexLabel\"\r\n            [pTooltip]=\"control.title\" tooltipPosition=\"top\" tooltipStyleClass=\"wrap\" [escape]=\"false\"\r\n            [for]=\"control.for\">{{control.text | translate}}</label>\r\n        <label [class]=\"getLabelClass(control)\" *ngIf=\"control.ishtml\" [innerHTML]=\"control.text | safeHtml\"\r\n            [attr.label-index]=\"control.indexLabel\"></label>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #containerSticky>\r\n    <span class=\"fix-sticky top\"></span>\r\n    <span class=\"fix-sticky right\"></span>\r\n    <span class=\"fix-sticky left\"></span>\r\n</ng-template>\r\n<tn-dialog *ngIf=\"tableFormShow\" #dialog [styleClass]=\"'address-form'\" [header]=\"tableFormTitle | translate\"\r\n    [popupSize]=\"tableFormPopupSize\" (onHide)=\"tableFormShow = false\">\r\n    <ng-container *ngTemplateOutlet=\"customTemplate['crudFormTableDetailForm']; context: {\r\n        $implicit: tableFormSchema, parentSetting: setting, data: tableFormData, onSaved: handleSavedTableRow, onCancel: handleCancelEditTableRow,\r\n        onInit: handleInitTableDetailForm\r\n    }\"></ng-container>\r\n    <!-- <table-detail-form #formBase [parentSetting]=\"setting\" [schema]=\"tableFormSchema\" [data]=\"tableFormData\"\r\n        (onSaved)=\"handleSavedTableRow($event)\" (onCancel)=\"tableFormShow = false\">\r\n    </table-detail-form> -->\r\n    <ng-template #footer>\r\n        <ng-container *ngTemplateOutlet=\"tableFormFooterTemplate\"></ng-container>\r\n    </ng-template>\r\n</tn-dialog>", 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:.3em}div.type-container.not-show-in-box-holder{padding:0}.--table-schema-footer{display:flex;align-items:center;font-weight:600;padding:.5em;border-width:0 1px 1px;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{font-size:.8rem;color:#6c757d;margin-bottom:5px;margin-left:10px}.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}::ng-deep .crud-form-control .tn-check-box-list{margin-top:5px}::ng-deep .crud-form-control>div.label{margin-bottom:5px;font-size:.9em;height:1.15em}::ng-deep .crud-form-control>div.label+*{width:100%}::ng-deep .crud-form-control>.error-container .error-item{overflow:visible;animation:shrink .1s;min-height:20px;padding-top:5px}::ng-deep .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-control>.error-container .error-item .error-content i{font-size:.9em;display:flex;padding-top:1px}::ng-deep .crud-form-control>.error-container .error-item .error-content span{display:flex;padding-left:5px}::ng-deep .crud-form-control.no-label>div.label{display:none}::ng-deep .crud-form-control.error select,::ng-deep .crud-form-control.error textarea,::ng-deep .crud-form-control.error input,::ng-deep .crud-form-control.error .p-inputtext,::ng-deep .crud-form-control.error .p-dropdown,::ng-deep .crud-form-control.error .p-multiselect,::ng-deep .crud-form-control.error .tn-dropdown{border-color:#ff5722!important}::ng-deep .crud-form-control.error .tn-dropdown:not(.p-disabled).p-focus,::ng-deep .crud-form-control.error .p-autocomplete-multiple-container:not(.p-disabled).p-focus,::ng-deep .crud-form-control.error .p-inputtext:enabled:focus{box-shadow:0 0 0 .2rem #ffc4b3}::ng-deep .crud-form-control.error div.crud-form-control:not(.error) select,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) textarea,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) input,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-inputtext,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-dropdown,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-multiselect,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .tn-dropdown{border-color:#ced4da!important}::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-dropdown.tn-dropdown.p-focus,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-inputtext:enabled:focus,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-autocomplete-multiple-container:not(.p-disabled).p-focus{box-shadow:0 0 0 .2rem #a6d5fa}@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-container{padding:.5rem .5rem 0}::ng-deep crud-form .p-datatable .p-datatable-tbody tr td.control-inside{padding:0}::ng-deep crud-form .p-datatable .p-datatable-tbody tr td.control-inside .show-in-box:not(.crud-form-control){padding:0}::ng-deep crud-form base-congviec-form crud-form>.crud-form-container{padding:0}: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 #00000013}: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 #00000013,0 0 3px #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}.no-value{font-size:.8em}:host ::ng-deep .table-schema-paging{margin-bottom:40px;display:block}\n"], dependencies: [{ kind: "directive", type: i9.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i10.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i10.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i10.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i11.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { kind: "directive", type: i12.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "tooltipZIndex", "escape", "tooltipDisabled", "pTooltip", "positionStyle", "tooltipStyleClass", "showDelay", "hideDelay", "life"] }, { kind: "component", type: i13.ContextMenu, selector: "p-contextMenu", inputs: ["autoZIndex", "baseZIndex", "triggerEvent", "model", "global", "target", "style", "styleClass", "appendTo"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i14.Table, selector: "p-table", inputs: ["pageLinks", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "contextMenuSelectionMode", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "filterDelay", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "virtualScrollDelay", "virtualRowHeight", "columnResizeMode", "loadingIcon", "showLoader", "stateStorage", "editMode", "totalRecords", "value", "columns", "first", "rows", "sortField", "sortOrder", "multiSortMeta", "selection", "contextMenuSelection", "frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "rowsPerPageOptions", "paginatorDropdownAppendTo", "showCurrentPageReport", "showJumpToPageDropdown", "selectionMode", "dataKey", "metaKeySelection", "globalFilterFields", "filterLocale", "scrollable", "scrollHeight", "virtualScroll", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "reorderableColumns", "loading", "rowHover", "customSort", "autoLayout", "exportFunction", "stateKey", "minBufferPx", "maxBufferPx"], outputs: ["selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i14.ReorderableRowHandle, selector: "[pReorderableRowHandle]", inputs: ["pReorderableRowHandle"] }, { kind: "directive", type: i14.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "directive", type: i15.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i15.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i15.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i15.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i15.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i15.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i15.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i15.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i16.Checkbox, selector: "p-checkbox", inputs: ["checkboxIcon", "disabled", "value", "name", "binary", "label", "ariaLabelledBy", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "readonly", "required"], outputs: ["onChange"] }, { kind: "directive", type: i17.InputText, selector: "[pInputText]" }, { kind: "directive", type: i18.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }, { kind: "component", type: i19.InputSwitch, selector: "p-inputSwitch", inputs: ["disabled", "style", "styleClass", "tabindex", "inputId", "name", "readonly", "ariaLabelledBy"], outputs: ["onChange"] }, { kind: "component", type: i20.Slider, selector: "p-slider", inputs: ["min", "max", "orientation", "tabindex", "disabled", "animate", "step", "range", "style", "styleClass", "ariaLabelledBy"], outputs: ["onChange", "onSlideEnd"] }, { kind: "directive", type: i21.CurrencyMaskDirective, selector: "[currencyMask]", inputs: ["options", "max", "min"] }, { kind: "component", type: i22.AutoCompletePickerComponent, selector: "autocomplete-picker", inputs: ["control", "groupKey", "valueInGroup", "disabled", "popupSize", "readOnlyValues"], outputs: ["onSelect", "onUnSelect", "onChanged", "onFocus", "onBlur", "onReady"] }, { kind: "component", type: i23.CheckBoxListComponent, selector: "check-box-list", inputs: ["styleClass", "control", "dataSource", "disabled"], outputs: ["onSelect", "onReady"] }, { kind: "component", type: i24.CommonPickerComponent, selector: "common-picker", inputs: ["control", "extraData", "disabled", "groupKey", "valueInGroup"], outputs: ["onSelect", "onUnSelect", "onChanged", "onBlur"] }, { kind: "component", type: i25.CoCauToChucPickerListComponent, selector: "cocautochuc-picker-list", inputs: ["control", "disabled", "readOnlyValues"], outputs: ["onChanged", "onSelect", "onUnSelect", "onClear", "onFocus", "onBlur", "onReady"] }, { kind: "component", type: i26.DatetimePickerComponent, selector: "datetime-picker", inputs: ["control", "disabled"], outputs: ["onSelect", "onChanged", "onFocus", "onBlur", "onClose"] }, { kind: "component", type: i27.DatetimePickerRangeComponent, selector: "tn-datetime-picker-range", inputs: ["control", "disabled"], outputs: ["onClose", "onChanged"] }, { kind: "component", type: i28.DropdownComponent, selector: "dropdown", inputs: ["showClear", "disableDisplayFieldServerSearch", "filter", "control", "defaultLabel", "appendTo", "dataSource", "value", "itemSelectedStyleClass"], outputs: ["onChanged", "onCollapse", "onExpand", "onDropdownClick", "onShow", "onShowSmartEvent", "onHide", "onHideSmartEvent", "onFocus", "onBlur", "onReady", "onDataSourceLoaded", "valueChange", "adjustValue"] }, { kind: "component", type: i29.EntityPickerComponent, selector: "entity-picker", inputs: ["control", "disabled", "readOnly", "children"], outputs: ["onSelect", "onUnSelect", "onChanged"] }, { kind: "component", type: i30.FileUploadComponent, selector: "file-upload", inputs: ["chooseLabel", "readonly", "accept", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageSummary", "invalidFileLimitMessageDetail", "sharedFolderType"], outputs: ["onSelect", "onRemove", "onChanged"] }, { kind: "component", type: i31.MaskComponent, selector: "tn-mask", inputs: ["maskType", "placeholder", "disabled", "suffix", "prefix", "min", "max", "decimalPlaces", "viewMode", "inputStyleClass"], outputs: ["onFocus", "onBlur", "onChanged"] }, { kind: "component", type: i32.NumberPickerRangeComponent, selector: "tn-number-picker-range", inputs: ["readonly", "maskType", "placeholder", "disabled", "suffix", "prefix", "min", "max", "decimalPlaces"], outputs: ["focus", "enterSmart", "enter", "blur", "change"] }, { kind: "component", type: i33.RadioButtonListComponent, selector: "radio-button-list", inputs: ["control", "dataSource", "value", "disabled"], outputs: ["valueChange", "onChanged", "onDataSourceLoaded", "adjustValue", "onReady"] }, { kind: "component", type: i34.ReferenceTextBoxComponent, selector: "reference-textbox", inputs: ["control", "value"] }, { kind: "component", type: i35.TnDialogComponent, selector: "tn-dialog", inputs: ["maskClass", "styleClass", "scrollBarStyleClass", "useDefaultScrollBar", "visible", "disabledButton", "modal", "header", "popupSize", "closeOnEscape", "showFooter", "positionTop", "minY", "hiddenSave", "maximizable"], outputs: ["onSave", "onCancel", "onShow", "onHide"] }, { kind: "component", type: i36.TnColorPickerComponent, selector: "tn-color-picker", inputs: ["disabled", "appendTo"], outputs: ["change"] }, { kind: "component", type: i37.TnCustomScrollbarComponent, selector: "tn-custom-scrollbar", inputs: ["style", "useDefaultScrollBar", "autoMode", "class", "config", "whiteBackGround", "showScrollHorizontal"], outputs: ["scrollY", "scrollUp", "scrollDown", "scrollLeft", "scrollRight", "scrollYReachEnd", "scrollYReachStart", "scrollXReachEnd", "scrollXReachStart"] }, { kind: "component", type: i38.TnTinymceComponent, selector: "tn-tinymce", inputs: ["mode", "disabled", "required", "height", "field", "languageCode"], outputs: ["keydown", "onBlur", "onChanged"] }, { kind: "component", type: i39.CoCauToChucPickerComponent, selector: "cocautochuc-picker", inputs: ["control", "autoDisplayFirst", "multiple", "required", "readonly", "limit", "filter", "isUsingId", "parentOrgId", "parentOrgCode", "showClear", "disabledParentItem", "rootParentId"], outputs: ["onChanged"] }, { kind: "component", type: i40.UserPickerComponent, selector: "user-picker", inputs: ["control", "popupSize", "multiple", "disabled", "readOnlyValues"], outputs: ["onSelect", "onUnSelect", "onChanged", "onFocus", "onBlur", "onReady"] }, { kind: "component", type: i41.AutocompleteDatasourceComponent, selector: "app-autocomplete-datasource", inputs: ["suggestions", "control"], outputs: ["onValueChanged"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: i42.SafeHtmlPipe, name: "safeHtml" }] });
+CrudFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: CrudFormComponent, selector: "crud-form", inputs: { setting: "setting", context: "context", filesUploaded: "filesUploaded", isViewMode: "isViewMode", disableKeypressControl: "disableKeypressControl", disableCaching: "disableCaching", styleClass: "styleClass", formId: "formId", formClass: "formClass", autoFocus: "autoFocus", trapFocus: "trapFocus", data: "data", formState: "formState" }, outputs: { onFormReady: "onFormReady", onControlReady: "onControlReady", onAllControlReady: "onAllControlReady", onModelChanged: "onModelChanged", dataChange: "dataChange", onChange: "onChange", onAfterTrinhKy: "onAfterTrinhKy" }, providers: [ComponentContextService], queries: [{ propertyName: "children", predicate: TemplateRef }], viewQueries: [{ propertyName: "formElement", first: true, predicate: ["formElement"], descendants: true }, { propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"_styleClass\">\r\n    <form #formElement autocomplete=\"off\" autocorrect=\"off\" spellcheck=\"false\"\r\n        [class]=\"'p-grid form-group crud-form' + (formClass ? ' ' + formClass : '')\"\r\n        (keydown.shift.tab)=\"preventBlur($event)\">\r\n        <div class=\"p-grid p-col-12\" style=\"margin: 0\">\r\n            <ng-container *ngFor=\"let control of setting.schema\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"customControl; context: {control: control, data: _modelData, parentPath: '', path: control.field, showLabel: control.showLabel, mdWidth: control.mdWidth}\">\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </form>\r\n</div>\r\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"buttonContexts\">\r\n</p-contextMenu>\r\n<ng-template #customControl let-data=\"data\" let-control=\"control\" let-showLabel=\"showLabel\" let-mdWidth=\"mdWidth\"\r\n    let-rowIndex=\"index\" let-path=\"path\" let-parentPath=\"parentPath\" let-tablePath=\"tablePath\" let-groupKey=\"groupKey\">\r\n    <div *ngIf=\"!checkHidden(control, data, path)\" id=\"{{path}}-holder\"\r\n        class=\"p-col-{{control.gWidth}} p-md-{{mdWidth}} {{control.class}} crud-form-control type-{{control.dataType}}\"\r\n        [class.error]=\"data._errors[control.field].length > 0\"\r\n        [class.not-show-in-box-holder]=\"control.showInBox === false\"\r\n        [class.show-in-box-holder]=\"control.showInBox === true\" [ngStyle]=\"control.style\">\r\n        <div class=\"label\" *ngIf=\"showLabel\">\r\n            <label *ngIf=\"control.label\" [pTooltip]=\"control.fullLabel\" tooltipPosition=\"top\">{{control.label}}\r\n                <span *ngIf=\"control.required\" class=\"star-required\">*</span></label>\r\n            <span *ngIf=\"control.description\" class=\"control-description\">({{control.description}})</span>\r\n        </div>\r\n        <ng-container [ngSwitch]=\"control.controlType\">\r\n            <ng-container *ngSwitchCase=\"'label'\">\r\n                <ng-container [ngTemplateOutlet]=\"labelControl\"\r\n                    [ngTemplateOutletContext]=\"{control: control, data: data}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'title'\">\r\n                <label *ngIf=\"!control.ishtml\" [for]=\"control.for\">{{control.text | translate}}</label>\r\n                <label *ngIf=\"control.ishtml\" [innerHTML]=\"control.text | translate\"></label>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'text'\">\r\n                <div class=\"p-inputgroup\" *ngIf=\"control.suffFix\">\r\n                    <input [placeholder]=\"control.placeholder\"\r\n                        [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText\r\n                        [type]=\"control.dataFormat\" [(ngModel)]=\"data[control.field]\" [max]=\"control.max\"\r\n                        [min]=\"control.min\" [maxlength]=\"control.maxLength\"\r\n                        (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                        (key.enter)=\"handleFieldValueChange(control, $event, 'enter', data, parentPath)\" />\r\n                    <span class=\"p-inputgroup-addon\">({{control.suffFix}})</span>\r\n                </div>\r\n                <input *ngIf=\"!control.suffFix\" [placeholder]=\"control.placeholder\"\r\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText [type]=\"control.dataFormat\"\r\n                    [(ngModel)]=\"data[control.field]\" [max]=\"control.max\" [min]=\"control.min\"\r\n                    [maxlength]=\"control.maxLength\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (key.enter)=\"handleFieldValueChange(control, $event, 'enter', data, parentPath)\" />\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'reference-text'\">\r\n                <reference-textbox [control]=\"control\" [value]=\"data[control.field]\"></reference-textbox>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'template'\">\r\n                <ng-container [ngTemplateOutlet]=\"control.template\"\r\n                    [ngTemplateOutletContext]=\"{$implicit: _rootNode, control: control, data: data, tablePath: tablePath, parentPath: parentPath, rowIndex: rowIndex, funcUpdateModel: updateModelFromExternal}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'mask'\">\r\n                <tn-mask [prefix]=\"control.prefix\" [decimalPlaces]=\"control.decimalPlaces\" [suffix]=\"control.suffix\"\r\n                    [placeholder]=\"control.placeholder\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [maskType]=\"control.maskType\" [min]=\"control.min\" [max]=\"control.max\"\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </tn-mask>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'numberrange'\">\r\n                <tn-number-picker-range [decimalPlaces]=\"control.decimalPlaces\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [maskType]=\"control.maskType\"\r\n                    [(ngModel)]=\"data[control.field]\" [min]=\"control.min\" [max]=\"control.max\"\r\n                    (search)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (blur)=\"handleFieldValueChange(control, $event, 'blur', data, parentPath)\">\r\n                </tn-number-picker-range>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'money'\">\r\n                <input currencyMask [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText type=\"tel\"\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    [options]=\"{prefix: '', thousands: '.', decimal: ',',precision:control.dataFormat === 'money'?0:0 }\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\" />\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'phoneOrfax'\">\r\n                <input [placeholder]=\"control.dataFormat==='phone'?'(999) 999-9999':'999-999-9999'\"\r\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" type=\"tel\" pInputText\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\" />\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'textarea'\">\r\n                <textarea pInputTextarea [rows]=\"control.rows ? control.rows : 5\"\r\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" [(ngModel)]=\"data[control.field]\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"></textarea>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'editor'\">\r\n                <tn-tinymce *ngIf=\"!checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                    [required]=\"control.validators && control.validators.required\" [mode]=\"control.mode\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    [height]=\"control.height ? control.height : 250\" [languageCode]=\"control.languageCode\"\r\n                    [disabled]=\"control.disabled || (control.disableCheck && control.disableCheck(model))\">\r\n                </tn-tinymce>\r\n                <div *ngIf=\"checkDisabled(data, control)\" class=\"html-box\"\r\n                    [innerHTML]=\"data[control.field] ? (data[control.field] | safeHtml) : ''\">\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'datetime'\">\r\n                <datetime-picker [(ngModel)]=\"data[control.field]\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [control]=\"control\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </datetime-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'autocomplete'\">\r\n                <app-autocomplete-datasource [control]=\"control\" [(ngModel)]=\"data[control.field]\"\r\n                    [suggestions]=\"data._source[control.field] || control.dataSource\"\r\n                    (onValueChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </app-autocomplete-datasource>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'datetimerange'\">\r\n                <tn-datetime-picker-range [(ngModel)]=\"data[control.field]\" [disabled]=\"control.disabled\"\r\n                    [control]=\"control\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </tn-datetime-picker-range>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                <dropdown [control]=\"control\" [dataSource]=\"getControlDataSource(control, data)\"\r\n                    [(value)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleChangeDropdown(control, $event, 'change', data, parentPath)\"\r\n                    (onHideSmartEvent)=\"handleChangeDropdown(control, $event, 'hide', data, parentPath)\"\r\n                    (adjustValue)=\"handleAdjustValueDropdownEvent(control, parentPath)\"\r\n                    (onDataSourceLoaded)=\"handleDataSourceLoaded(control, parentPath, $event)\"\r\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\r\n                </dropdown>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'fileManager'\">\r\n                <ng-container *ngTemplateOutlet=\"customTemplate['crudFormFileManagerComponent']; context: {\r\n                    $implicit: data, control: control, parentPath: parentPath, checkDisabled: checkDisabled, handleFieldValueChange: handleFieldValueChange,\r\n                    handleControlReadyEvent: handleControlReadyEvent\r\n                }\"></ng-container>\r\n                <!-- <file-manager [control]=\"control\" [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\r\n                    [entityKey]=\"control.entityKey ? control.entityKey : data[control.entityKeyField]\"\r\n                    [readonly]=\"control.disabled\" [layout]=\"control.layout\" [maxFileSize]=\"control.maxFileSize\"\r\n                    [inTaiLieu]=\"control.inTaiLieu\" [inTaiLieuChung]=\"control.inTaiLieuChung\"\r\n                    [copyToFolderId]=\"control.copyToFolderId\"\r\n                    [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\r\n                    [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\r\n                    [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\r\n                    [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\r\n                    [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\r\n                    [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\"\r\n                    [(value)]=\"data[control.field]\" (onSelected)=\"control.onSelected($event)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\r\n                </file-manager> -->\r\n            </ng-container>\r\n            <span *ngSwitchCase=\"'fileUpload'\">\r\n                <file-upload [(ngModel)]=\"data[control.field]\" [sharedFolderType]=\"control.sharedFolderType\"\r\n                    [maxFileSize]=\"control.maxFileSize\"\r\n                    [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\r\n                    [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\r\n                    [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\r\n                    [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\r\n                    [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\r\n                    [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    [readonly]=\"control.readonly\" [accept]=\"control.accept\">\r\n                </file-upload>\r\n            </span>\r\n            <span *ngSwitchCase=\"'serviceFileUpload'\">\r\n                <ng-container *ngTemplateOutlet=\"customTemplate['crudFormServiceFileUploadComponent']; context: {\r\n                    $implicit: data, control: control, parentContext: context, parentPath: parentPath, \r\n                    checkDisabled: checkDisabled, handleFieldValueChange: handleFieldValueChange,\r\n                    handleControlReadyEvent: handleControlReadyEvent\r\n                }\"></ng-container>\r\n                <!-- <service-file-upload [(ngModel)]=\"data[control.field]\" [parentContext]=\"context\"\r\n                    [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\r\n                    [entityKey]=\"data[control.entityKeyField]\" [control]=\"control\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </service-file-upload> -->\r\n            </span>\r\n            <ng-container *ngSwitchCase=\"'user-picker'\">\r\n                <user-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [readOnlyValues]=\"data[control.field + '_readOnly']\" [(ngModel)]=\"data[control.field]\"\r\n                    [multiple]=\"control.multiple\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\r\n                </user-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'switch'\">\r\n                <p-inputSwitch [(ngModel)]=\"data[control.field]\" [disabled]=\"checkDisabled(data, control)\"\r\n                    (onChange)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </p-inputSwitch>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                <div [class]=\"control.class\" role=\"checkbox-alone\">\r\n                    <p-checkbox [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                        [label]=\"!control.hiddenLabel ? control.label : null\"\r\n                        (onChange)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\" binary=\"true\">\r\n                    </p-checkbox>\r\n                    <!-- <tn-checkbox [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                        [(ngModel)]=\"data[control.field]\"\r\n                        (onChange)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"></tn-checkbox> -->\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'button'\">\r\n                <button type=\"button\" pButton [class]=\"control.btClass\" [icon]=\"control.icon\"\r\n                    [label]=\"control.label | translate\" [ngStyle]=\"control.btStyle\"\r\n                    (click)=\"handleButtonClick(control, $event, parentPath)\"></button>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'container'\">\r\n                <div class=\"p-grid p-col-12\" style=\"margin: 0\" [class.not-show-in-box]=\"!control.showInBox\"\r\n                    [class.show-in-box]=\"control.showInBox\" [ngStyle]=\"control.boxStyle\">\r\n                    <ng-container *ngFor=\"let subControl of control.controls\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"customControl; context: {control: subControl, data: data[control.field], parentPath: path, rowIndex: rowIndex, path: path + '.' + subControl.field, showLabel: subControl.showLabel, mdWidth: subControl.mdWidth}\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'checkboxlist'\">\r\n                <check-box-list [control]=\"control\" [dataSource]=\"data._source[control.field] || control.dataSource\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                    (onSelect)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\r\n                </check-box-list>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'radiobuttonlist'\">\r\n                <radio-button-list [control]=\"control\" [dataSource]=\"control.dataSource\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [(value)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (adjustValue)=\"handleAdjustValueDropdownEvent(control, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\"\r\n                    (onDataSourceLoaded)=\"handleDataSourceLoaded(control, parentPath, $event)\">\r\n                </radio-button-list>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'colorPicker'\">\r\n                <tn-color-picker [(ngModel)]=\"data[control.field]\" [disabled]=\"checkDisabled(data, control)\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </tn-color-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'spanControl'\">\r\n                <span *ngIf=\"!control.ishtml\">{{data[control.field]}}</span>\r\n                <span *ngIf=\"control.ishtml\" [innerHTML]=\"data[control.field]\"></span>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'colorControl'\">\r\n                <span class=\"show-color-control\" [ngStyle]=\"{ backgroundColor: data[control.sourceField]}\"></span>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'address'\">\r\n                <ng-container *ngTemplateOutlet=\"customTemplate['crudFormAddressComponent']; context: {\r\n                    $implicit: data, control: control, parentPath: parentPath, checkDisabled: checkDisabled, handleFieldValueChange: handleFieldValueChange,\r\n                    handleControlReadyEvent: handleControlReadyEvent\r\n                }\"></ng-container>\r\n                <!-- <address-picker [control]=\"control\" [showSubLabel]=\"control.showSubLabel\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [(data)]=\"data[control.field]\"\r\n                    (onSelect)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\r\n                </address-picker> -->\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'autocomplete-picker'\">\r\n                <autocomplete-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\r\n                </autocomplete-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'entity-picker'\">\r\n                <entity-picker [control]=\"control\" [children]=\"children\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </entity-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'cocautochuc'\">\r\n                <cocautochuc-picker [control]=\"control\" [parentOrgId]=\"control.parentOrgId\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [parentOrgCode]=\"control.parentOrgCode\"\r\n                    [filter]=\"control.filter\" [multiple]=\"control.multiple\" [required]=\"control.required\"\r\n                    [isUsingId]=\"control.isUsingId\" [disabledParentItem]=\"control.disabledParentItem\"\r\n                    [rootParentId]=\"control.rootParentId\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </cocautochuc-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'cocautochuc-picker'\">\r\n                <cocautochuc-picker-list [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\r\n                </cocautochuc-picker-list>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'vanban'\">\r\n                <ng-container *ngTemplateOutlet=\"customTemplate['crudFormVanBanPickerComponent']; context: {\r\n                    $implicit: data, control: control, parentPath: parentPath, checkDisabled: checkDisabled, handleFieldValueChange: handleFieldValueChange,\r\n                    handleControlReadyEvent: handleControlReadyEvent\r\n                }\"></ng-container>\r\n                <!-- <vanban-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [(ngModel)]=\"data[control.field]\" [readOnly]=\"control.readOnly\"\r\n                    [loaiVanBan]=\"control.loaiVanBan\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </vanban-picker> -->\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'congviec'\">\r\n                <div>\r\n                    <ng-container *ngTemplateOutlet=\"customTemplate['crudFormCongViecPickerComponent']; context: {\r\n                        $implicit: data, control: control, parentPath: parentPath, checkDisabled: checkDisabled, handleFieldValueChange: handleFieldValueChange,\r\n                        handleControlReadyEvent: handleControlReadyEvent\r\n                    }\"></ng-container>\r\n                    <!-- <congviec-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                        [required]=\"control.required\" [(ngModel)]=\"data[control.field]\"\r\n                        (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                    </congviec-picker> -->\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'percent'\">\r\n                <div>\r\n                    <tn-mask [suffix]=\"'%'\" [placeholder]=\"control.placeholder\" [maskType]=\"'int'\" [min]=\"0\" [max]=\"100\"\r\n                        [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                        (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                    </tn-mask>\r\n                    <p-slider [step]=\"1\" [min]=\"0\" [max]=\"100\" [disabled]=\"checkDisabled(data, control)\"\r\n                        [(ngModel)]=\"data[control.field]\"\r\n                        (onSlideEnd)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                    </p-slider>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'common-picker'\">\r\n                <common-picker [control]=\"control\"\r\n                    [disabled]=\"control.disabled || (control.disableCheck && control.disableCheck(model))\"\r\n                    [groupKey]=\"groupKey\" [valueInGroup]=\"model[control.field]\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event,'change', data, parentPath);\">\r\n                </common-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'table'\">\r\n                <div [class]=\"control.class\">\r\n                    <tn-custom-scrollbar class=\"--has-border\" [showScrollHorizontal]=\"true\">\r\n                        <p-table class=\"new-table scr-table table-control\" [value]=\"data[control.field]\"\r\n                            [columns]=\"control.headerTemplate\" [responsive]=\"true\" [scrollable]=\"false\"\r\n                            [rowTrackBy]=\"trackByFuncId\"\r\n                            (onRowReorder)=\"handleRowOrdered(control, $event, 'rowReorder', data, parentPath)\">\r\n                            <ng-template *ngIf=\"getComponentByType(_prefixCustomHeader + control.field)\"\r\n                                pTemplate=\"header\" let-columns>\r\n                                <ng-container\r\n                                    *ngTemplateOutlet=\"getComponentByType(_prefixCustomHeader + control.field), context: {$implicit: control.headerTemplate, crudForm: this, containerSticky: containerSticky}\">\r\n                                </ng-container>\r\n                            </ng-template>\r\n                            <ng-template *ngIf=\"!getComponentByType(_prefixCustomHeader + control.field)\"\r\n                                pTemplate=\"header\" let-rowData let-columns>\r\n                                <tr>\r\n                                    <th *ngIf=\"control.showNumber\" style=\"text-align: center; width: 5%\">\r\n                                        {{ 'TT' |translate}}\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate\">\r\n                                        <th *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\r\n                                            [pTooltip]=\"subControl.fullLabel || subControl.label\" tooltipPosition=\"top\"\r\n                                            style=\"text-align: center;\" [style.width]=\"subControl.width\">\r\n                                            {{subControl.label}}\r\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                        </th>\r\n                                    </ng-container>\r\n                                    <th *ngIf=\"control.enableReorderRow\" style=\"width: 30px\">\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                    <th *ngIf=\"control.showFunction\" [style.width]=\"control.widthFunctionColumn\"\r\n                                        class=\"table-function column-function\">\r\n                                        <div class=\"cell-header-function\"><span>Ch\u1EE9c n\u0103ng</span></div>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                </tr>\r\n                            </ng-template>\r\n                            <ng-template pTemplate=\"body\" let-rowData let-ri=\"rowIndex\">\r\n                                <tr [pReorderableRow]=\"ri\">\r\n                                    <td class=\"stt\" style=\"text-align: center; vertical-align: inherit\">\r\n                                        <span>\r\n                                            {{ri + 1}}\r\n                                        </span>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </td>\r\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate; let i = index\">\r\n                                        <td *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\r\n                                            [class.control-inside]=\"true\" [class]=\"subControl.class\"\r\n                                            [ngStyle]=\"{'text-align': getTextAlign(subControl.textAlign), 'vertical-align': 'inherit'}\">\r\n                                            <span class=\"p-column-title\">{{subControl.label}}</span>\r\n                                            <ng-template [ngIf]=\"getControlType(subControl) != 'column'\">\r\n                                                <ng-container\r\n                                                    *ngTemplateOutlet=\"customControl; context: getContextTd(subControl, rowData, ri, path)\">\r\n                                                </ng-container>\r\n                                            </ng-template>\r\n                                            <ng-template [ngIf]=\"getControlType(subControl) == 'column'\">\r\n                                                <span>{{_modelData[control.field][ri][subControl.field]}}</span>\r\n                                            </ng-template>\r\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                        </td>\r\n                                    </ng-container>\r\n                                    <td *ngIf=\"control.enableReorderRow\" class=\"no-padding center v-center\">\r\n                                        <i class=\"fas fa-arrows-alt\" style=\"cursor:pointer; padding: 8px; color: #555;\"\r\n                                            pReorderableRowHandle></i>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </td>\r\n                                    <td *ngIf=\"control.showFunction\" style=\"text-align: center\"\r\n                                        class=\"column-function text-center\">\r\n                                        <div *ngIf=\"!control.rowButtonTemplate\"\r\n                                            class=\"p-toolbar-group-center button-group\">\r\n                                            <button *ngIf=\"control.showSave\" [disabled]=\"rowData._disableSave\"\r\n                                                type=\"button\" pButton class=\"p-button-text p-button-rounded\"\r\n                                                icon=\"pi pi-save\" [pTooltip]=\"'L\u01B0u' | translate\" tooltipPosition=\"top\"\r\n                                                (click)=\"saveRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.showEdit\" [disabled]=\"rowData._disableEdit\"\r\n                                                type=\"button\" pButton class=\"p-button-text p-button-rounded\"\r\n                                                icon=\"pi pi-pencil\" [pTooltip]=\"'S\u1EEDa' | translate\" tooltipPosition=\"top\"\r\n                                                (click)=\"editRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.showDelete\" [disabled]=\"rowData._disableDelete\"\r\n                                                type=\"button\" pButton\r\n                                                class=\"p-button-text p-button-danger p-button-rounded\"\r\n                                                icon=\"pi pi-trash\" [pTooltip]=\"'X\u00F3a' | translate\" tooltipPosition=\"top\"\r\n                                                (click)=\"deleteRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.rowButtons\" type=\"button\" pButton\r\n                                                icon=\"pi pi-ellipsis-v\"\r\n                                                class=\"link-or-action p-button-text p-button-rounded\"\r\n                                                pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\" tooltipPosition=\"top\"\r\n                                                (click)=\"showContextMenu($event, rowData, control)\"></button>\r\n                                        </div>\r\n                                        <div *ngIf=\"control.rowButtonTemplate\"\r\n                                            class=\"p-toolbar-group-center button-group\">\r\n                                            <ng-container\r\n                                                *ngTemplateOutlet=\"control.rowButtonTemplate; context: {rowData: _modelData[control.field][ri], rowIndex: ri, path: path, control: control}\">\r\n                                            </ng-container>\r\n                                        </div>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </td>\r\n                                </tr>\r\n                            </ng-template>\r\n                            <ng-template *ngIf=\"control.summaryTemplate\" pTemplate=\"summary\" let-rowData>\r\n                                <ng-container *ngTemplateOutlet=\"control.summaryTemplate; context: {rowData: rowData}\">\r\n                                </ng-container>\r\n                            </ng-template>\r\n                        </p-table>\r\n                    </tn-custom-scrollbar>\r\n                    <div *ngIf=\"control.showFooter\" class=\"--table-schema-footer\">\r\n                        <button *ngIf=\"control.showAdd\" type=\"button\" pButton style=\"width:auto\" label=\"Th\u00EAm m\u1EDBi\"\r\n                            icon=\"pi pi-plus\" class=\"p-button-text\" (click)=\"addNewRow(control, path)\"></button>\r\n                        <span *ngIf=\"control.showDialog\" style=\"font-weight: normal;\">\r\n                            <p-checkbox label=\"M\u1EDF dialog\" [binary]=\"true\" [(ngModel)]=\"control.showEdit\">\r\n                            </p-checkbox>\r\n                        </span>\r\n                        <button *ngIf=\"control.enableAddMulti\" type=\"button\" pButton\r\n                            style=\"width:auto; margin-left:10px;\" label=\"Th\u00EAm nhi\u1EC1u\" icon=\"pi pi-clone\"\r\n                            class=\"p-button-text\" (click)=\"addMultiRow(control, 5, path)\"></button>\r\n                        <button *ngFor=\"let bt of control.footerButtons\" type=\"button\" pButton [class]=\"bt.class\"\r\n                            [icon]=\"bt.icon\" [label]=\"bt.label | translate\" style=\"width:auto; margin-left:10px;\"\r\n                            (click)=\"messageRow( -1, control, path)\"></button>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                <ng-container [ngTemplateOutlet]=\"getComponentByType(control.field)\" [ngTemplateOutletContext]=\"{\r\n                        crudForm: this, data: data, index: rowIndex, parentPath: parentPath, control: control, changeFunc: handleFieldValueChange\r\n                    }\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"validation; context: {control: control, data: data}\">\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #validation let-control=\"control\" let-data=\"data\">\r\n    <ng-container *ngIf=\"data._errors[control.field].length > 0\">\r\n        <div class=\"error-container\">\r\n            <ng-container *ngFor=\"let error of data._errors[control.field]\">\r\n                <div class=\"error-item\" *ngIf=\"error\">\r\n                    <ng-container [ngTemplateOutlet]=\"errorMessage\" [ngTemplateOutletContext]=\"{content: error}\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #errorMessage let-content=\"content\">\r\n    <div class=\"error-content\">\r\n        <i class=\"pi pi-ban\"></i>\r\n        <span> {{content}}</span>\r\n    </div>\r\n</ng-template>\r\n<ng-template #labelControl let-control=\"control\">\r\n    <ng-container>\r\n        <label [class]=\"getLabelClass(control)\" *ngIf=\"!control.ishtml\" [attr.label-index]=\"control.indexLabel\"\r\n            [pTooltip]=\"control.title\" tooltipPosition=\"top\" tooltipStyleClass=\"wrap\" [escape]=\"false\"\r\n            [for]=\"control.for\">{{control.text | translate}}</label>\r\n        <label [class]=\"getLabelClass(control)\" *ngIf=\"control.ishtml\" [innerHTML]=\"control.text | safeHtml\"\r\n            [attr.label-index]=\"control.indexLabel\"></label>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #containerSticky>\r\n    <span class=\"fix-sticky top\"></span>\r\n    <span class=\"fix-sticky right\"></span>\r\n    <span class=\"fix-sticky left\"></span>\r\n</ng-template>\r\n<tn-dialog *ngIf=\"tableFormShow\" #dialog [styleClass]=\"'address-form'\" [header]=\"tableFormTitle | translate\"\r\n    [popupSize]=\"tableFormPopupSize\" (onHide)=\"tableFormShow = false\">\r\n    <ng-container *ngTemplateOutlet=\"customTemplate['crudFormTableDetailForm']; context: {\r\n        $implicit: tableFormSchema, parentSetting: setting, data: tableFormData, onSaved: handleSavedTableRow, onCancel: handleCancelEditTableRow,\r\n        onInit: handleInitTableDetailForm\r\n    }\"></ng-container>\r\n    <!-- <table-detail-form #formBase [parentSetting]=\"setting\" [schema]=\"tableFormSchema\" [data]=\"tableFormData\"\r\n        (onSaved)=\"handleSavedTableRow($event)\" (onCancel)=\"tableFormShow = false\">\r\n    </table-detail-form> -->\r\n    <ng-template #footer>\r\n        <ng-container *ngTemplateOutlet=\"tableFormFooterTemplate\"></ng-container>\r\n    </ng-template>\r\n</tn-dialog>", 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:.3em}div.type-container.not-show-in-box-holder{padding:0}.--table-schema-footer{display:flex;align-items:center;font-weight:600;padding:.5em;border-width:0 1px 1px;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{font-size:.8rem;color:#6c757d;margin-bottom:5px;margin-left:10px}.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}::ng-deep .crud-form-control .tn-check-box-list{margin-top:5px}::ng-deep .crud-form-control>div.label{margin-bottom:5px;font-size:.9em;height:1.15em}::ng-deep .crud-form-control>div.label+*{width:100%}::ng-deep .crud-form-control>.error-container .error-item{overflow:visible;animation:shrink .1s;min-height:20px;padding-top:5px}::ng-deep .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-control>.error-container .error-item .error-content i{font-size:.9em;display:flex;padding-top:1px}::ng-deep .crud-form-control>.error-container .error-item .error-content span{display:flex;padding-left:5px}::ng-deep .crud-form-control.no-label>div.label{display:none}::ng-deep .crud-form-control.error select,::ng-deep .crud-form-control.error textarea,::ng-deep .crud-form-control.error input,::ng-deep .crud-form-control.error .p-inputtext,::ng-deep .crud-form-control.error .p-dropdown,::ng-deep .crud-form-control.error .p-multiselect,::ng-deep .crud-form-control.error .tn-dropdown{border-color:#ff5722!important}::ng-deep .crud-form-control.error .tn-dropdown:not(.p-disabled).p-focus,::ng-deep .crud-form-control.error .p-autocomplete-multiple-container:not(.p-disabled).p-focus,::ng-deep .crud-form-control.error .p-inputtext:enabled:focus{box-shadow:0 0 0 .2rem #ffc4b3}::ng-deep .crud-form-control.error div.crud-form-control:not(.error) select,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) textarea,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) input,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-inputtext,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-dropdown,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-multiselect,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .tn-dropdown{border-color:#ced4da!important}::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-dropdown.tn-dropdown.p-focus,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-inputtext:enabled:focus,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-autocomplete-multiple-container:not(.p-disabled).p-focus{box-shadow:0 0 0 .2rem #a6d5fa}@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-container{padding:.5rem .5rem 0}::ng-deep crud-form .p-datatable .p-datatable-tbody tr td.control-inside{padding:0}::ng-deep crud-form .p-datatable .p-datatable-tbody tr td.control-inside .show-in-box:not(.crud-form-control){padding:0}::ng-deep crud-form base-congviec-form crud-form>.crud-form-container{padding:0}: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 #00000013}: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 #00000013,0 0 3px #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}.no-value{font-size:.8em}:host ::ng-deep .table-schema-paging{margin-bottom:40px;display:block}\n"], dependencies: [{ kind: "directive", type: i9.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i10.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i10.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i10.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i11.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { kind: "directive", type: i12.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "tooltipZIndex", "escape", "tooltipDisabled", "pTooltip", "positionStyle", "tooltipStyleClass", "showDelay", "hideDelay", "life"] }, { kind: "component", type: i13.ContextMenu, selector: "p-contextMenu", inputs: ["autoZIndex", "baseZIndex", "triggerEvent", "model", "global", "target", "style", "styleClass", "appendTo"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i14.Table, selector: "p-table", inputs: ["pageLinks", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "contextMenuSelectionMode", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "filterDelay", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "virtualScrollDelay", "virtualRowHeight", "columnResizeMode", "loadingIcon", "showLoader", "stateStorage", "editMode", "totalRecords", "value", "columns", "first", "rows", "sortField", "sortOrder", "multiSortMeta", "selection", "contextMenuSelection", "frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "rowsPerPageOptions", "paginatorDropdownAppendTo", "showCurrentPageReport", "showJumpToPageDropdown", "selectionMode", "dataKey", "metaKeySelection", "globalFilterFields", "filterLocale", "scrollable", "scrollHeight", "virtualScroll", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "reorderableColumns", "loading", "rowHover", "customSort", "autoLayout", "exportFunction", "stateKey", "minBufferPx", "maxBufferPx"], outputs: ["selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i14.ReorderableRowHandle, selector: "[pReorderableRowHandle]", inputs: ["pReorderableRowHandle"] }, { kind: "directive", type: i14.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "directive", type: i15.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i15.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i15.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i15.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i15.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i15.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i15.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i15.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i16.Checkbox, selector: "p-checkbox", inputs: ["checkboxIcon", "disabled", "value", "name", "binary", "label", "ariaLabelledBy", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "readonly", "required"], outputs: ["onChange"] }, { kind: "directive", type: i17.InputText, selector: "[pInputText]" }, { kind: "directive", type: i18.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }, { kind: "component", type: i19.InputSwitch, selector: "p-inputSwitch", inputs: ["disabled", "style", "styleClass", "tabindex", "inputId", "name", "readonly", "ariaLabelledBy"], outputs: ["onChange"] }, { kind: "component", type: i20.Slider, selector: "p-slider", inputs: ["min", "max", "orientation", "tabindex", "disabled", "animate", "step", "range", "style", "styleClass", "ariaLabelledBy"], outputs: ["onChange", "onSlideEnd"] }, { kind: "directive", type: i21.CurrencyMaskDirective, selector: "[currencyMask]", inputs: ["max", "min", "options"] }, { kind: "component", type: i22.AutoCompletePickerComponent, selector: "autocomplete-picker", inputs: ["control", "groupKey", "valueInGroup", "disabled", "popupSize", "readOnlyValues"], outputs: ["onSelect", "onUnSelect", "onChanged", "onFocus", "onBlur", "onReady"] }, { kind: "component", type: i23.CheckBoxListComponent, selector: "check-box-list", inputs: ["styleClass", "control", "dataSource", "disabled"], outputs: ["onSelect", "onReady"] }, { kind: "component", type: i24.CommonPickerComponent, selector: "common-picker", inputs: ["control", "extraData", "disabled", "groupKey", "valueInGroup"], outputs: ["onSelect", "onUnSelect", "onChanged", "onBlur"] }, { kind: "component", type: i25.CoCauToChucPickerListComponent, selector: "cocautochuc-picker-list", inputs: ["control", "disabled", "readOnlyValues"], outputs: ["onChanged", "onSelect", "onUnSelect", "onClear", "onFocus", "onBlur", "onReady"] }, { kind: "component", type: i26.DatetimePickerComponent, selector: "datetime-picker", inputs: ["control", "disabled"], outputs: ["onSelect", "onChanged", "onFocus", "onBlur", "onClose"] }, { kind: "component", type: i27.DatetimePickerRangeComponent, selector: "tn-datetime-picker-range", inputs: ["control", "disabled"], outputs: ["onClose", "onChanged"] }, { kind: "component", type: i28.DropdownComponent, selector: "dropdown", inputs: ["showClear", "disableDisplayFieldServerSearch", "filter", "control", "defaultLabel", "appendTo", "dataSource", "value", "itemSelectedStyleClass"], outputs: ["onChanged", "onCollapse", "onExpand", "onDropdownClick", "onShow", "onShowSmartEvent", "onHide", "onHideSmartEvent", "onFocus", "onBlur", "onReady", "onDataSourceLoaded", "valueChange", "adjustValue"] }, { kind: "component", type: i29.EntityPickerComponent, selector: "entity-picker", inputs: ["control", "disabled", "readOnly", "children"], outputs: ["onSelect", "onUnSelect", "onChanged"] }, { kind: "component", type: i30.FileUploadComponent, selector: "file-upload", inputs: ["chooseLabel", "readonly", "accept", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageSummary", "invalidFileLimitMessageDetail", "sharedFolderType"], outputs: ["onSelect", "onRemove", "onChanged"] }, { kind: "component", type: i31.MaskComponent, selector: "tn-mask", inputs: ["maskType", "placeholder", "disabled", "suffix", "prefix", "min", "max", "decimalPlaces", "viewMode", "inputStyleClass"], outputs: ["onFocus", "onBlur", "onChanged"] }, { kind: "component", type: i32.NumberPickerRangeComponent, selector: "tn-number-picker-range", inputs: ["readonly", "maskType", "placeholder", "disabled", "suffix", "prefix", "min", "max", "decimalPlaces"], outputs: ["focus", "enterSmart", "enter", "blur", "change"] }, { kind: "component", type: i33.RadioButtonListComponent, selector: "radio-button-list", inputs: ["control", "dataSource", "value", "disabled"], outputs: ["valueChange", "onChanged", "onDataSourceLoaded", "adjustValue", "onReady"] }, { kind: "component", type: i34.ReferenceTextBoxComponent, selector: "reference-textbox", inputs: ["control", "value"] }, { kind: "component", type: i35.TnDialogComponent, selector: "tn-dialog", inputs: ["maskClass", "styleClass", "scrollBarStyleClass", "useDefaultScrollBar", "visible", "disabledButton", "modal", "header", "popupSize", "closeOnEscape", "showFooter", "positionTop", "minY", "hiddenSave", "maximizable"], outputs: ["onSave", "onCancel", "onShow", "onHide"] }, { kind: "component", type: i36.TnColorPickerComponent, selector: "tn-color-picker", inputs: ["disabled", "appendTo"], outputs: ["change"] }, { kind: "component", type: i37.TnCustomScrollbarComponent, selector: "tn-custom-scrollbar", inputs: ["style", "useDefaultScrollBar", "autoMode", "class", "config", "whiteBackGround", "showScrollHorizontal"], outputs: ["scrollY", "scrollUp", "scrollDown", "scrollLeft", "scrollRight", "scrollYReachEnd", "scrollYReachStart", "scrollXReachEnd", "scrollXReachStart"] }, { kind: "component", type: i38.TnTinymceComponent, selector: "tn-tinymce", inputs: ["mode", "disabled", "required", "height", "field", "languageCode"], outputs: ["keydown", "onBlur", "onChanged"] }, { kind: "component", type: i39.CoCauToChucPickerComponent, selector: "cocautochuc-picker", inputs: ["control", "autoDisplayFirst", "multiple", "required", "readonly", "limit", "filter", "isUsingId", "parentOrgId", "parentOrgCode", "showClear", "disabledParentItem", "rootParentId"], outputs: ["onChanged"] }, { kind: "component", type: i40.UserPickerComponent, selector: "user-picker", inputs: ["control", "popupSize", "multiple", "disabled", "readOnlyValues"], outputs: ["onSelect", "onUnSelect", "onChanged", "onFocus", "onBlur", "onReady"] }, { kind: "component", type: i41.AutocompleteDatasourceComponent, selector: "app-autocomplete-datasource", inputs: ["suggestions", "control"], outputs: ["onValueChanged"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: i42.SafeHtmlPipe, name: "safeHtml" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: CrudFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'crud-form', providers: [ComponentContextService], template: "<div [class]=\"_styleClass\">\r\n    <form #formElement autocomplete=\"off\" autocorrect=\"off\" spellcheck=\"false\"\r\n        [class]=\"'p-grid form-group crud-form' + (formClass ? ' ' + formClass : '')\"\r\n        (keydown.shift.tab)=\"preventBlur($event)\">\r\n        <div class=\"p-grid p-col-12\" style=\"margin: 0\">\r\n            <ng-container *ngFor=\"let control of setting.schema\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"customControl; context: {control: control, data: _modelData, parentPath: '', path: control.field, showLabel: control.showLabel, mdWidth: control.mdWidth}\">\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </form>\r\n</div>\r\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"buttonContexts\">\r\n</p-contextMenu>\r\n<ng-template #customControl let-data=\"data\" let-control=\"control\" let-showLabel=\"showLabel\" let-mdWidth=\"mdWidth\"\r\n    let-rowIndex=\"index\" let-path=\"path\" let-parentPath=\"parentPath\" let-tablePath=\"tablePath\" let-groupKey=\"groupKey\">\r\n    <div *ngIf=\"!checkHidden(control, data, path)\" id=\"{{path}}-holder\"\r\n        class=\"p-col-{{control.gWidth}} p-md-{{mdWidth}} {{control.class}} crud-form-control type-{{control.dataType}}\"\r\n        [class.error]=\"data._errors[control.field].length > 0\"\r\n        [class.not-show-in-box-holder]=\"control.showInBox === false\"\r\n        [class.show-in-box-holder]=\"control.showInBox === true\" [ngStyle]=\"control.style\">\r\n        <div class=\"label\" *ngIf=\"showLabel\">\r\n            <label *ngIf=\"control.label\" [pTooltip]=\"control.fullLabel\" tooltipPosition=\"top\">{{control.label}}\r\n                <span *ngIf=\"control.required\" class=\"star-required\">*</span></label>\r\n            <span *ngIf=\"control.description\" class=\"control-description\">({{control.description}})</span>\r\n        </div>\r\n        <ng-container [ngSwitch]=\"control.controlType\">\r\n            <ng-container *ngSwitchCase=\"'label'\">\r\n                <ng-container [ngTemplateOutlet]=\"labelControl\"\r\n                    [ngTemplateOutletContext]=\"{control: control, data: data}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'title'\">\r\n                <label *ngIf=\"!control.ishtml\" [for]=\"control.for\">{{control.text | translate}}</label>\r\n                <label *ngIf=\"control.ishtml\" [innerHTML]=\"control.text | translate\"></label>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'text'\">\r\n                <div class=\"p-inputgroup\" *ngIf=\"control.suffFix\">\r\n                    <input [placeholder]=\"control.placeholder\"\r\n                        [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText\r\n                        [type]=\"control.dataFormat\" [(ngModel)]=\"data[control.field]\" [max]=\"control.max\"\r\n                        [min]=\"control.min\" [maxlength]=\"control.maxLength\"\r\n                        (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                        (key.enter)=\"handleFieldValueChange(control, $event, 'enter', data, parentPath)\" />\r\n                    <span class=\"p-inputgroup-addon\">({{control.suffFix}})</span>\r\n                </div>\r\n                <input *ngIf=\"!control.suffFix\" [placeholder]=\"control.placeholder\"\r\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText [type]=\"control.dataFormat\"\r\n                    [(ngModel)]=\"data[control.field]\" [max]=\"control.max\" [min]=\"control.min\"\r\n                    [maxlength]=\"control.maxLength\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (key.enter)=\"handleFieldValueChange(control, $event, 'enter', data, parentPath)\" />\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'reference-text'\">\r\n                <reference-textbox [control]=\"control\" [value]=\"data[control.field]\"></reference-textbox>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'template'\">\r\n                <ng-container [ngTemplateOutlet]=\"control.template\"\r\n                    [ngTemplateOutletContext]=\"{$implicit: _rootNode, control: control, data: data, tablePath: tablePath, parentPath: parentPath, rowIndex: rowIndex, funcUpdateModel: updateModelFromExternal}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'mask'\">\r\n                <tn-mask [prefix]=\"control.prefix\" [decimalPlaces]=\"control.decimalPlaces\" [suffix]=\"control.suffix\"\r\n                    [placeholder]=\"control.placeholder\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [maskType]=\"control.maskType\" [min]=\"control.min\" [max]=\"control.max\"\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </tn-mask>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'numberrange'\">\r\n                <tn-number-picker-range [decimalPlaces]=\"control.decimalPlaces\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [maskType]=\"control.maskType\"\r\n                    [(ngModel)]=\"data[control.field]\" [min]=\"control.min\" [max]=\"control.max\"\r\n                    (search)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (blur)=\"handleFieldValueChange(control, $event, 'blur', data, parentPath)\">\r\n                </tn-number-picker-range>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'money'\">\r\n                <input currencyMask [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText type=\"tel\"\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    [options]=\"{prefix: '', thousands: '.', decimal: ',',precision:control.dataFormat === 'money'?0:0 }\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\" />\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'phoneOrfax'\">\r\n                <input [placeholder]=\"control.dataFormat==='phone'?'(999) 999-9999':'999-999-9999'\"\r\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" type=\"tel\" pInputText\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\" />\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'textarea'\">\r\n                <textarea pInputTextarea [rows]=\"control.rows ? control.rows : 5\"\r\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" [(ngModel)]=\"data[control.field]\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"></textarea>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'editor'\">\r\n                <tn-tinymce *ngIf=\"!checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                    [required]=\"control.validators && control.validators.required\" [mode]=\"control.mode\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    [height]=\"control.height ? control.height : 250\" [languageCode]=\"control.languageCode\"\r\n                    [disabled]=\"control.disabled || (control.disableCheck && control.disableCheck(model))\">\r\n                </tn-tinymce>\r\n                <div *ngIf=\"checkDisabled(data, control)\" class=\"html-box\"\r\n                    [innerHTML]=\"data[control.field] ? (data[control.field] | safeHtml) : ''\">\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'datetime'\">\r\n                <datetime-picker [(ngModel)]=\"data[control.field]\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [control]=\"control\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </datetime-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'autocomplete'\">\r\n                <app-autocomplete-datasource [control]=\"control\" [(ngModel)]=\"data[control.field]\"\r\n                    [suggestions]=\"data._source[control.field] || control.dataSource\"\r\n                    (onValueChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </app-autocomplete-datasource>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'datetimerange'\">\r\n                <tn-datetime-picker-range [(ngModel)]=\"data[control.field]\" [disabled]=\"control.disabled\"\r\n                    [control]=\"control\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </tn-datetime-picker-range>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                <dropdown [control]=\"control\" [dataSource]=\"getControlDataSource(control, data)\"\r\n                    [(value)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleChangeDropdown(control, $event, 'change', data, parentPath)\"\r\n                    (onHideSmartEvent)=\"handleChangeDropdown(control, $event, 'hide', data, parentPath)\"\r\n                    (adjustValue)=\"handleAdjustValueDropdownEvent(control, parentPath)\"\r\n                    (onDataSourceLoaded)=\"handleDataSourceLoaded(control, parentPath, $event)\"\r\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\r\n                </dropdown>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'fileManager'\">\r\n                <ng-container *ngTemplateOutlet=\"customTemplate['crudFormFileManagerComponent']; context: {\r\n                    $implicit: data, control: control, parentPath: parentPath, checkDisabled: checkDisabled, handleFieldValueChange: handleFieldValueChange,\r\n                    handleControlReadyEvent: handleControlReadyEvent\r\n                }\"></ng-container>\r\n                <!-- <file-manager [control]=\"control\" [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\r\n                    [entityKey]=\"control.entityKey ? control.entityKey : data[control.entityKeyField]\"\r\n                    [readonly]=\"control.disabled\" [layout]=\"control.layout\" [maxFileSize]=\"control.maxFileSize\"\r\n                    [inTaiLieu]=\"control.inTaiLieu\" [inTaiLieuChung]=\"control.inTaiLieuChung\"\r\n                    [copyToFolderId]=\"control.copyToFolderId\"\r\n                    [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\r\n                    [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\r\n                    [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\r\n                    [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\r\n                    [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\r\n                    [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\"\r\n                    [(value)]=\"data[control.field]\" (onSelected)=\"control.onSelected($event)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\r\n                </file-manager> -->\r\n            </ng-container>\r\n            <span *ngSwitchCase=\"'fileUpload'\">\r\n                <file-upload [(ngModel)]=\"data[control.field]\" [sharedFolderType]=\"control.sharedFolderType\"\r\n                    [maxFileSize]=\"control.maxFileSize\"\r\n                    [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\r\n                    [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\r\n                    [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\r\n                    [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\r\n                    [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\r\n                    [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    [readonly]=\"control.readonly\" [accept]=\"control.accept\">\r\n                </file-upload>\r\n            </span>\r\n            <span *ngSwitchCase=\"'serviceFileUpload'\">\r\n                <ng-container *ngTemplateOutlet=\"customTemplate['crudFormServiceFileUploadComponent']; context: {\r\n                    $implicit: data, control: control, parentContext: context, parentPath: parentPath, \r\n                    checkDisabled: checkDisabled, handleFieldValueChange: handleFieldValueChange,\r\n                    handleControlReadyEvent: handleControlReadyEvent\r\n                }\"></ng-container>\r\n                <!-- <service-file-upload [(ngModel)]=\"data[control.field]\" [parentContext]=\"context\"\r\n                    [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\r\n                    [entityKey]=\"data[control.entityKeyField]\" [control]=\"control\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </service-file-upload> -->\r\n            </span>\r\n            <ng-container *ngSwitchCase=\"'user-picker'\">\r\n                <user-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [readOnlyValues]=\"data[control.field + '_readOnly']\" [(ngModel)]=\"data[control.field]\"\r\n                    [multiple]=\"control.multiple\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\r\n                </user-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'switch'\">\r\n                <p-inputSwitch [(ngModel)]=\"data[control.field]\" [disabled]=\"checkDisabled(data, control)\"\r\n                    (onChange)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </p-inputSwitch>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                <div [class]=\"control.class\" role=\"checkbox-alone\">\r\n                    <p-checkbox [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                        [label]=\"!control.hiddenLabel ? control.label : null\"\r\n                        (onChange)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\" binary=\"true\">\r\n                    </p-checkbox>\r\n                    <!-- <tn-checkbox [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                        [(ngModel)]=\"data[control.field]\"\r\n                        (onChange)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"></tn-checkbox> -->\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'button'\">\r\n                <button type=\"button\" pButton [class]=\"control.btClass\" [icon]=\"control.icon\"\r\n                    [label]=\"control.label | translate\" [ngStyle]=\"control.btStyle\"\r\n                    (click)=\"handleButtonClick(control, $event, parentPath)\"></button>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'container'\">\r\n                <div class=\"p-grid p-col-12\" style=\"margin: 0\" [class.not-show-in-box]=\"!control.showInBox\"\r\n                    [class.show-in-box]=\"control.showInBox\" [ngStyle]=\"control.boxStyle\">\r\n                    <ng-container *ngFor=\"let subControl of control.controls\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"customControl; context: {control: subControl, data: data[control.field], parentPath: path, rowIndex: rowIndex, path: path + '.' + subControl.field, showLabel: subControl.showLabel, mdWidth: subControl.mdWidth}\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'checkboxlist'\">\r\n                <check-box-list [control]=\"control\" [dataSource]=\"data._source[control.field] || control.dataSource\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                    (onSelect)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\r\n                </check-box-list>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'radiobuttonlist'\">\r\n                <radio-button-list [control]=\"control\" [dataSource]=\"control.dataSource\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [(value)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (adjustValue)=\"handleAdjustValueDropdownEvent(control, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\"\r\n                    (onDataSourceLoaded)=\"handleDataSourceLoaded(control, parentPath, $event)\">\r\n                </radio-button-list>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'colorPicker'\">\r\n                <tn-color-picker [(ngModel)]=\"data[control.field]\" [disabled]=\"checkDisabled(data, control)\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </tn-color-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'spanControl'\">\r\n                <span *ngIf=\"!control.ishtml\">{{data[control.field]}}</span>\r\n                <span *ngIf=\"control.ishtml\" [innerHTML]=\"data[control.field]\"></span>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'colorControl'\">\r\n                <span class=\"show-color-control\" [ngStyle]=\"{ backgroundColor: data[control.sourceField]}\"></span>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'address'\">\r\n                <ng-container *ngTemplateOutlet=\"customTemplate['crudFormAddressComponent']; context: {\r\n                    $implicit: data, control: control, parentPath: parentPath, checkDisabled: checkDisabled, handleFieldValueChange: handleFieldValueChange,\r\n                    handleControlReadyEvent: handleControlReadyEvent\r\n                }\"></ng-container>\r\n                <!-- <address-picker [control]=\"control\" [showSubLabel]=\"control.showSubLabel\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [(data)]=\"data[control.field]\"\r\n                    (onSelect)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\r\n                </address-picker> -->\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'autocomplete-picker'\">\r\n                <autocomplete-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\r\n                </autocomplete-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'entity-picker'\">\r\n                <entity-picker [control]=\"control\" [children]=\"children\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </entity-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'cocautochuc'\">\r\n                <cocautochuc-picker [control]=\"control\" [parentOrgId]=\"control.parentOrgId\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [parentOrgCode]=\"control.parentOrgCode\"\r\n                    [filter]=\"control.filter\" [multiple]=\"control.multiple\" [required]=\"control.required\"\r\n                    [isUsingId]=\"control.isUsingId\" [disabledParentItem]=\"control.disabledParentItem\"\r\n                    [rootParentId]=\"control.rootParentId\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </cocautochuc-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'cocautochuc-picker'\">\r\n                <cocautochuc-picker-list [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\r\n                </cocautochuc-picker-list>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'vanban'\">\r\n                <ng-container *ngTemplateOutlet=\"customTemplate['crudFormVanBanPickerComponent']; context: {\r\n                    $implicit: data, control: control, parentPath: parentPath, checkDisabled: checkDisabled, handleFieldValueChange: handleFieldValueChange,\r\n                    handleControlReadyEvent: handleControlReadyEvent\r\n                }\"></ng-container>\r\n                <!-- <vanban-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [(ngModel)]=\"data[control.field]\" [readOnly]=\"control.readOnly\"\r\n                    [loaiVanBan]=\"control.loaiVanBan\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </vanban-picker> -->\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'congviec'\">\r\n                <div>\r\n                    <ng-container *ngTemplateOutlet=\"customTemplate['crudFormCongViecPickerComponent']; context: {\r\n                        $implicit: data, control: control, parentPath: parentPath, checkDisabled: checkDisabled, handleFieldValueChange: handleFieldValueChange,\r\n                        handleControlReadyEvent: handleControlReadyEvent\r\n                    }\"></ng-container>\r\n                    <!-- <congviec-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                        [required]=\"control.required\" [(ngModel)]=\"data[control.field]\"\r\n                        (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                    </congviec-picker> -->\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'percent'\">\r\n                <div>\r\n                    <tn-mask [suffix]=\"'%'\" [placeholder]=\"control.placeholder\" [maskType]=\"'int'\" [min]=\"0\" [max]=\"100\"\r\n                        [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                        (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                    </tn-mask>\r\n                    <p-slider [step]=\"1\" [min]=\"0\" [max]=\"100\" [disabled]=\"checkDisabled(data, control)\"\r\n                        [(ngModel)]=\"data[control.field]\"\r\n                        (onSlideEnd)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                    </p-slider>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'common-picker'\">\r\n                <common-picker [control]=\"control\"\r\n                    [disabled]=\"control.disabled || (control.disableCheck && control.disableCheck(model))\"\r\n                    [groupKey]=\"groupKey\" [valueInGroup]=\"model[control.field]\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event,'change', data, parentPath);\">\r\n                </common-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'table'\">\r\n                <div [class]=\"control.class\">\r\n                    <tn-custom-scrollbar class=\"--has-border\" [showScrollHorizontal]=\"true\">\r\n                        <p-table class=\"new-table scr-table table-control\" [value]=\"data[control.field]\"\r\n                            [columns]=\"control.headerTemplate\" [responsive]=\"true\" [scrollable]=\"false\"\r\n                            [rowTrackBy]=\"trackByFuncId\"\r\n                            (onRowReorder)=\"handleRowOrdered(control, $event, 'rowReorder', data, parentPath)\">\r\n                            <ng-template *ngIf=\"getComponentByType(_prefixCustomHeader + control.field)\"\r\n                                pTemplate=\"header\" let-columns>\r\n                                <ng-container\r\n                                    *ngTemplateOutlet=\"getComponentByType(_prefixCustomHeader + control.field), context: {$implicit: control.headerTemplate, crudForm: this, containerSticky: containerSticky}\">\r\n                                </ng-container>\r\n                            </ng-template>\r\n                            <ng-template *ngIf=\"!getComponentByType(_prefixCustomHeader + control.field)\"\r\n                                pTemplate=\"header\" let-rowData let-columns>\r\n                                <tr>\r\n                                    <th *ngIf=\"control.showNumber\" style=\"text-align: center; width: 5%\">\r\n                                        {{ 'TT' |translate}}\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate\">\r\n                                        <th *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\r\n                                            [pTooltip]=\"subControl.fullLabel || subControl.label\" tooltipPosition=\"top\"\r\n                                            style=\"text-align: center;\" [style.width]=\"subControl.width\">\r\n                                            {{subControl.label}}\r\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                        </th>\r\n                                    </ng-container>\r\n                                    <th *ngIf=\"control.enableReorderRow\" style=\"width: 30px\">\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                    <th *ngIf=\"control.showFunction\" [style.width]=\"control.widthFunctionColumn\"\r\n                                        class=\"table-function column-function\">\r\n                                        <div class=\"cell-header-function\"><span>Ch\u1EE9c n\u0103ng</span></div>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                </tr>\r\n                            </ng-template>\r\n                            <ng-template pTemplate=\"body\" let-rowData let-ri=\"rowIndex\">\r\n                                <tr [pReorderableRow]=\"ri\">\r\n                                    <td class=\"stt\" style=\"text-align: center; vertical-align: inherit\">\r\n                                        <span>\r\n                                            {{ri + 1}}\r\n                                        </span>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </td>\r\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate; let i = index\">\r\n                                        <td *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\r\n                                            [class.control-inside]=\"true\" [class]=\"subControl.class\"\r\n                                            [ngStyle]=\"{'text-align': getTextAlign(subControl.textAlign), 'vertical-align': 'inherit'}\">\r\n                                            <span class=\"p-column-title\">{{subControl.label}}</span>\r\n                                            <ng-template [ngIf]=\"getControlType(subControl) != 'column'\">\r\n                                                <ng-container\r\n                                                    *ngTemplateOutlet=\"customControl; context: getContextTd(subControl, rowData, ri, path)\">\r\n                                                </ng-container>\r\n                                            </ng-template>\r\n                                            <ng-template [ngIf]=\"getControlType(subControl) == 'column'\">\r\n                                                <span>{{_modelData[control.field][ri][subControl.field]}}</span>\r\n                                            </ng-template>\r\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                        </td>\r\n                                    </ng-container>\r\n                                    <td *ngIf=\"control.enableReorderRow\" class=\"no-padding center v-center\">\r\n                                        <i class=\"fas fa-arrows-alt\" style=\"cursor:pointer; padding: 8px; color: #555;\"\r\n                                            pReorderableRowHandle></i>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </td>\r\n                                    <td *ngIf=\"control.showFunction\" style=\"text-align: center\"\r\n                                        class=\"column-function text-center\">\r\n                                        <div *ngIf=\"!control.rowButtonTemplate\"\r\n                                            class=\"p-toolbar-group-center button-group\">\r\n                                            <button *ngIf=\"control.showSave\" [disabled]=\"rowData._disableSave\"\r\n                                                type=\"button\" pButton class=\"p-button-text p-button-rounded\"\r\n                                                icon=\"pi pi-save\" [pTooltip]=\"'L\u01B0u' | translate\" tooltipPosition=\"top\"\r\n                                                (click)=\"saveRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.showEdit\" [disabled]=\"rowData._disableEdit\"\r\n                                                type=\"button\" pButton class=\"p-button-text p-button-rounded\"\r\n                                                icon=\"pi pi-pencil\" [pTooltip]=\"'S\u1EEDa' | translate\" tooltipPosition=\"top\"\r\n                                                (click)=\"editRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.showDelete\" [disabled]=\"rowData._disableDelete\"\r\n                                                type=\"button\" pButton\r\n                                                class=\"p-button-text p-button-danger p-button-rounded\"\r\n                                                icon=\"pi pi-trash\" [pTooltip]=\"'X\u00F3a' | translate\" tooltipPosition=\"top\"\r\n                                                (click)=\"deleteRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.rowButtons\" type=\"button\" pButton\r\n                                                icon=\"pi pi-ellipsis-v\"\r\n                                                class=\"link-or-action p-button-text p-button-rounded\"\r\n                                                pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\" tooltipPosition=\"top\"\r\n                                                (click)=\"showContextMenu($event, rowData, control)\"></button>\r\n                                        </div>\r\n                                        <div *ngIf=\"control.rowButtonTemplate\"\r\n                                            class=\"p-toolbar-group-center button-group\">\r\n                                            <ng-container\r\n                                                *ngTemplateOutlet=\"control.rowButtonTemplate; context: {rowData: _modelData[control.field][ri], rowIndex: ri, path: path, control: control}\">\r\n                                            </ng-container>\r\n                                        </div>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </td>\r\n                                </tr>\r\n                            </ng-template>\r\n                            <ng-template *ngIf=\"control.summaryTemplate\" pTemplate=\"summary\" let-rowData>\r\n                                <ng-container *ngTemplateOutlet=\"control.summaryTemplate; context: {rowData: rowData}\">\r\n                                </ng-container>\r\n                            </ng-template>\r\n                        </p-table>\r\n                    </tn-custom-scrollbar>\r\n                    <div *ngIf=\"control.showFooter\" class=\"--table-schema-footer\">\r\n                        <button *ngIf=\"control.showAdd\" type=\"button\" pButton style=\"width:auto\" label=\"Th\u00EAm m\u1EDBi\"\r\n                            icon=\"pi pi-plus\" class=\"p-button-text\" (click)=\"addNewRow(control, path)\"></button>\r\n                        <span *ngIf=\"control.showDialog\" style=\"font-weight: normal;\">\r\n                            <p-checkbox label=\"M\u1EDF dialog\" [binary]=\"true\" [(ngModel)]=\"control.showEdit\">\r\n                            </p-checkbox>\r\n                        </span>\r\n                        <button *ngIf=\"control.enableAddMulti\" type=\"button\" pButton\r\n                            style=\"width:auto; margin-left:10px;\" label=\"Th\u00EAm nhi\u1EC1u\" icon=\"pi pi-clone\"\r\n                            class=\"p-button-text\" (click)=\"addMultiRow(control, 5, path)\"></button>\r\n                        <button *ngFor=\"let bt of control.footerButtons\" type=\"button\" pButton [class]=\"bt.class\"\r\n                            [icon]=\"bt.icon\" [label]=\"bt.label | translate\" style=\"width:auto; margin-left:10px;\"\r\n                            (click)=\"messageRow( -1, control, path)\"></button>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                <ng-container [ngTemplateOutlet]=\"getComponentByType(control.field)\" [ngTemplateOutletContext]=\"{\r\n                        crudForm: this, data: data, index: rowIndex, parentPath: parentPath, control: control, changeFunc: handleFieldValueChange\r\n                    }\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"validation; context: {control: control, data: data}\">\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #validation let-control=\"control\" let-data=\"data\">\r\n    <ng-container *ngIf=\"data._errors[control.field].length > 0\">\r\n        <div class=\"error-container\">\r\n            <ng-container *ngFor=\"let error of data._errors[control.field]\">\r\n                <div class=\"error-item\" *ngIf=\"error\">\r\n                    <ng-container [ngTemplateOutlet]=\"errorMessage\" [ngTemplateOutletContext]=\"{content: error}\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #errorMessage let-content=\"content\">\r\n    <div class=\"error-content\">\r\n        <i class=\"pi pi-ban\"></i>\r\n        <span> {{content}}</span>\r\n    </div>\r\n</ng-template>\r\n<ng-template #labelControl let-control=\"control\">\r\n    <ng-container>\r\n        <label [class]=\"getLabelClass(control)\" *ngIf=\"!control.ishtml\" [attr.label-index]=\"control.indexLabel\"\r\n            [pTooltip]=\"control.title\" tooltipPosition=\"top\" tooltipStyleClass=\"wrap\" [escape]=\"false\"\r\n            [for]=\"control.for\">{{control.text | translate}}</label>\r\n        <label [class]=\"getLabelClass(control)\" *ngIf=\"control.ishtml\" [innerHTML]=\"control.text | safeHtml\"\r\n            [attr.label-index]=\"control.indexLabel\"></label>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #containerSticky>\r\n    <span class=\"fix-sticky top\"></span>\r\n    <span class=\"fix-sticky right\"></span>\r\n    <span class=\"fix-sticky left\"></span>\r\n</ng-template>\r\n<tn-dialog *ngIf=\"tableFormShow\" #dialog [styleClass]=\"'address-form'\" [header]=\"tableFormTitle | translate\"\r\n    [popupSize]=\"tableFormPopupSize\" (onHide)=\"tableFormShow = false\">\r\n    <ng-container *ngTemplateOutlet=\"customTemplate['crudFormTableDetailForm']; context: {\r\n        $implicit: tableFormSchema, parentSetting: setting, data: tableFormData, onSaved: handleSavedTableRow, onCancel: handleCancelEditTableRow,\r\n        onInit: handleInitTableDetailForm\r\n    }\"></ng-container>\r\n    <!-- <table-detail-form #formBase [parentSetting]=\"setting\" [schema]=\"tableFormSchema\" [data]=\"tableFormData\"\r\n        (onSaved)=\"handleSavedTableRow($event)\" (onCancel)=\"tableFormShow = false\">\r\n    </table-detail-form> -->\r\n    <ng-template #footer>\r\n        <ng-container *ngTemplateOutlet=\"tableFormFooterTemplate\"></ng-container>\r\n    </ng-template>\r\n</tn-dialog>", 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:.3em}div.type-container.not-show-in-box-holder{padding:0}.--table-schema-footer{display:flex;align-items:center;font-weight:600;padding:.5em;border-width:0 1px 1px;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{font-size:.8rem;color:#6c757d;margin-bottom:5px;margin-left:10px}.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}::ng-deep .crud-form-control .tn-check-box-list{margin-top:5px}::ng-deep .crud-form-control>div.label{margin-bottom:5px;font-size:.9em;height:1.15em}::ng-deep .crud-form-control>div.label+*{width:100%}::ng-deep .crud-form-control>.error-container .error-item{overflow:visible;animation:shrink .1s;min-height:20px;padding-top:5px}::ng-deep .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-control>.error-container .error-item .error-content i{font-size:.9em;display:flex;padding-top:1px}::ng-deep .crud-form-control>.error-container .error-item .error-content span{display:flex;padding-left:5px}::ng-deep .crud-form-control.no-label>div.label{display:none}::ng-deep .crud-form-control.error select,::ng-deep .crud-form-control.error textarea,::ng-deep .crud-form-control.error input,::ng-deep .crud-form-control.error .p-inputtext,::ng-deep .crud-form-control.error .p-dropdown,::ng-deep .crud-form-control.error .p-multiselect,::ng-deep .crud-form-control.error .tn-dropdown{border-color:#ff5722!important}::ng-deep .crud-form-control.error .tn-dropdown:not(.p-disabled).p-focus,::ng-deep .crud-form-control.error .p-autocomplete-multiple-container:not(.p-disabled).p-focus,::ng-deep .crud-form-control.error .p-inputtext:enabled:focus{box-shadow:0 0 0 .2rem #ffc4b3}::ng-deep .crud-form-control.error div.crud-form-control:not(.error) select,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) textarea,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) input,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-inputtext,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-dropdown,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-multiselect,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .tn-dropdown{border-color:#ced4da!important}::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-dropdown.tn-dropdown.p-focus,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-inputtext:enabled:focus,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-autocomplete-multiple-container:not(.p-disabled).p-focus{box-shadow:0 0 0 .2rem #a6d5fa}@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-container{padding:.5rem .5rem 0}::ng-deep crud-form .p-datatable .p-datatable-tbody tr td.control-inside{padding:0}::ng-deep crud-form .p-datatable .p-datatable-tbody tr td.control-inside .show-in-box:not(.crud-form-control){padding:0}::ng-deep crud-form base-congviec-form crud-form>.crud-form-container{padding:0}: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 #00000013}: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 #00000013,0 0 3px #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}.no-value{font-size:.8em}:host ::ng-deep .table-schema-paging{margin-bottom:40px;display:block}\n"] }]

package/esm2020/components/dropdown/services/dropdown.service.mjs

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { firstValueFrom } from 'rxjs';
 import { DropdownOptions } from '../../../classes/form-schema';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common/http";
@@ -7,7 +8,7 @@ export class DropdownService {
         this._httpClient = _httpClient;
     }
     getDataSource(serviceUri) {
-        return this._httpClient.get(serviceUri).toPromise();
+        return firstValueFrom(this._httpClient.get(serviceUri));
     }
     getPostDataSource(serviceUri, filters, options) {
         return this.getDataDropdownByFilter(serviceUri, filters, options);
@@ -16,9 +17,8 @@ export class DropdownService {
         let apiUrl = serviceUri;
         if (plusUrl != null && plusUrl != '')
             apiUrl += "/" + plusUrl;
-        return this._httpClient
-            .post(apiUrl, gridInfo)
-            .toPromise();
+        return firstValueFrom(this._httpClient
+            .post(apiUrl, gridInfo));
     }
     setDefaultValue(options) {
         if (options.fieldPlus.length > 0 && !options.fieldPlus.startsWith(','))
@@ -63,4 +63,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
                     providedIn: 'root'
                 }]
         }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24uc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NoYXJlZC9zcmMvbGliL2NvbXBvbmVudHMvZHJvcGRvd24vc2VydmljZXMvZHJvcGRvd24uc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzNDLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQzs7O0FBTy9ELE1BQU0sT0FBTyxlQUFlO0lBRXhCLFlBQW9CLFdBQXVCO1FBQXZCLGdCQUFXLEdBQVgsV0FBVyxDQUFZO0lBQUksQ0FBQztJQUVoRCxhQUFhLENBQUMsVUFBa0I7UUFDNUIsT0FBTyxJQUFJLENBQUMsV0FBVyxDQUFDLEdBQUcsQ0FBaUIsVUFBVSxDQUFDLENBQUMsU0FBUyxFQUFFLENBQUM7SUFDeEUsQ0FBQztJQUNELGlCQUFpQixDQUFDLFVBQWtCLEVBQUUsT0FBaUIsRUFBRSxPQUF5QjtRQUM5RSxPQUFPLElBQUksQ0FBQyx1QkFBdUIsQ0FBQyxVQUFVLEVBQUUsT0FBTyxFQUFFLE9BQU8sQ0FBQyxDQUFDO0lBQ3RFLENBQUM7SUFFRCxnQkFBZ0IsQ0FBQyxVQUFrQixFQUFFLFFBQWtCLEVBQUUsVUFBa0IsRUFBRTtRQUN6RSxJQUFJLE1BQU0sR0FBRyxVQUFVLENBQUM7UUFDeEIsSUFBSSxPQUFPLElBQUksSUFBSSxJQUFJLE9BQU8sSUFBSSxFQUFFO1lBQ2hDLE1BQU0sSUFBSSxHQUFHLEdBQUcsT0FBTyxDQUFDO1FBQzVCLE9BQU8sSUFBSSxDQUFDLFdBQVc7YUFDbEIsSUFBSSxDQUFpQixNQUFNLEVBQUUsUUFBUSxDQUFDO2FBQ3RDLFNBQVMsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFFTyxlQUFlLENBQUMsT0FBd0I7UUFDNUMsSUFBSSxPQUFPLENBQUMsU0FBUyxDQUFDLE1BQU0sR0FBRyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsU0FBUyxDQUFDLFVBQVUsQ0FBQyxHQUFHLENBQUM7WUFDbEUsT0FBTyxDQUFDLFNBQVMsR0FBRyxHQUFHLEdBQUcsT0FBTyxDQUFDLFNBQVMsQ0FBQztRQUNoRCxJQUFJLE9BQU8sQ0FBQyxTQUFTLElBQUksRUFBRTtZQUN2QixPQUFPLENBQUMsU0FBUyxHQUFHLE9BQU8sQ0FBQyxZQUFZLENBQUM7UUFDN0MsSUFBSSxPQUFPLENBQUMsWUFBWSxJQUFJLElBQUksSUFBSSxPQUFPLE9BQU8sQ0FBQyxZQUFZLElBQUksVUFBVSxFQUFFO1lBQzNFLE9BQU8sQ0FBQyxZQUFZLEdBQUcsQ0FBQyxJQUFJLEVBQUUsRUFBRTtnQkFDNUIsT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDLFlBQVksQ0FBQyxDQUFDO1lBQ3RDLENBQUMsQ0FBQztTQUNMO0lBQ0wsQ0FBQztJQUVPLHdCQUF3QixDQUFDLE9BQWlCLEVBQUUsT0FBd0I7UUFDeEUsSUFBSSxRQUFRLEdBQUc7WUFDWCxRQUFRLEVBQUU7Z0JBQ04sSUFBSSxFQUFFLENBQUM7Z0JBQ1AsUUFBUSxFQUFFLEVBQUU7YUFDZjtZQUNELE9BQU8sRUFBRSxPQUFPO1lBQ2hCLEtBQUssRUFBRSxDQUFDLEVBQUUsS0FBSyxFQUFFLE9BQU8sQ0FBQyxTQUFTLEVBQUUsR0FBRyxFQUFFLE9BQU8sQ0FBQyxPQUFPLEVBQUUsQ0FBQztZQUMzRCxNQUFNLEVBQUUsR0FBRyxPQUFPLENBQUMsVUFBVSxHQUFHLE9BQU8sQ0FBQyxZQUFZLElBQUksT0FBTyxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxHQUFHLEdBQUcsT0FBTyxDQUFDLFlBQVksR0FBRyxPQUFPLENBQUMsU0FBUyxFQUFFO1NBQ3JJLENBQUE7UUFDRCxPQUFPLFFBQVEsQ0FBQztJQUNwQixDQUFDO0lBRUQsdUJBQXVCLENBQUMsVUFBa0IsRUFBRSxPQUFpQixFQUFFLE9BQXlCO1FBQ3BGLElBQUksT0FBTyxJQUFJLElBQUk7WUFDZixPQUFPLEdBQUcsSUFBSSxlQUFlLEVBQUUsQ0FBQztRQUNwQyxJQUFJLENBQUMsZUFBZSxDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBQzlCLE9BQU8sSUFBSSxPQUFPLENBQUMsQ0FBQyxPQUFPLEVBQUUsTUFBTSxFQUFFLEVBQUU7WUFDbkMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFVBQVUsRUFBRSxJQUFJLENBQUMsd0JBQXdCLENBQUMsT0FBTyxFQUFFLE9BQU8sQ0FBQyxDQUFDO2lCQUM3RSxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUU7Z0JBQ1IsT0FBTyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsQ0FBQztZQUN0QixDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxNQUFNLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQztRQUNyQyxDQUFDLENBQUMsQ0FBQztJQUNQLENBQUM7OzRHQXZEUSxlQUFlO2dIQUFmLGVBQWUsY0FGWixNQUFNOzJGQUVULGVBQWU7a0JBSDNCLFVBQVU7bUJBQUM7b0JBQ1IsVUFBVSxFQUFFLE1BQU07aUJBQ3JCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSHR0cENsaWVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbi9odHRwJztcclxuaW1wb3J0IHsgSW5qZWN0YWJsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBEcm9wZG93bk9wdGlvbnMgfSBmcm9tICcuLi8uLi8uLi9jbGFzc2VzL2Zvcm0tc2NoZW1hJztcclxuaW1wb3J0IHsgRmlsdGVyLCBHcmlkSW5mbyB9IGZyb20gJy4uLy4uLy4uL21vZGVscy9ncmlkLWluZm8nO1xyXG5pbXBvcnQgeyBSZXNwb25zZVJlc3VsdCB9IGZyb20gJy4uLy4uLy4uL21vZGVscy9yZXNwb25zZS1yZXN1bHQnO1xyXG5cclxuQEluamVjdGFibGUoe1xyXG4gICAgcHJvdmlkZWRJbjogJ3Jvb3QnXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBEcm9wZG93blNlcnZpY2Uge1xyXG5cclxuICAgIGNvbnN0cnVjdG9yKHByaXZhdGUgX2h0dHBDbGllbnQ6IEh0dHBDbGllbnQpIHsgfVxyXG5cclxuICAgIGdldERhdGFTb3VyY2Uoc2VydmljZVVyaTogc3RyaW5nKTogUHJvbWlzZTxSZXNwb25zZVJlc3VsdD4ge1xyXG4gICAgICAgIHJldHVybiB0aGlzLl9odHRwQ2xpZW50LmdldDxSZXNwb25zZVJlc3VsdD4oc2VydmljZVVyaSkudG9Qcm9taXNlKCk7XHJcbiAgICB9XHJcbiAgICBnZXRQb3N0RGF0YVNvdXJjZShzZXJ2aWNlVXJpOiBzdHJpbmcsIGZpbHRlcnM6IEZpbHRlcltdLCBvcHRpb25zPzogRHJvcGRvd25PcHRpb25zKTogUHJvbWlzZTxhbnlbXT4ge1xyXG4gICAgICAgIHJldHVybiB0aGlzLmdldERhdGFEcm9wZG93bkJ5RmlsdGVyKHNlcnZpY2VVcmksIGZpbHRlcnMsIG9wdGlvbnMpO1xyXG4gICAgfVxyXG5cclxuICAgIGdldEJ5R3JpZFJlcXVlc3Qoc2VydmljZVVyaTogc3RyaW5nLCBncmlkSW5mbzogR3JpZEluZm8sIHBsdXNVcmw6IHN0cmluZyA9ICcnKTogUHJvbWlzZTxSZXNwb25zZVJlc3VsdD4ge1xyXG4gICAgICAgIGxldCBhcGlVcmwgPSBzZXJ2aWNlVXJpO1xyXG4gICAgICAgIGlmIChwbHVzVXJsICE9IG51bGwgJiYgcGx1c1VybCAhPSAnJylcclxuICAgICAgICAgICAgYXBpVXJsICs9IFwiL1wiICsgcGx1c1VybDtcclxuICAgICAgICByZXR1cm4gdGhpcy5faHR0cENsaWVudFxyXG4gICAgICAgICAgICAucG9zdDxSZXNwb25zZVJlc3VsdD4oYXBpVXJsLCBncmlkSW5mbylcclxuICAgICAgICAgICAgLnRvUHJvbWlzZSgpO1xyXG4gICAgfVxyXG5cclxuICAgIHByaXZhdGUgc2V0RGVmYXVsdFZhbHVlKG9wdGlvbnM6IERyb3Bkb3duT3B0aW9ucykge1xyXG4gICAgICAgIGlmIChvcHRpb25zLmZpZWxkUGx1cy5sZW5ndGggPiAwICYmICFvcHRpb25zLmZpZWxkUGx1cy5zdGFydHNXaXRoKCcsJykpXHJcbiAgICAgICAgICAgIG9wdGlvbnMuZmllbGRQbHVzID0gJywnICsgb3B0aW9ucy5maWVsZFBsdXM7XHJcbiAgICAgICAgaWYgKG9wdGlvbnMuc29ydEZpZWxkID09ICcnKVxyXG4gICAgICAgICAgICBvcHRpb25zLnNvcnRGaWVsZCA9IG9wdGlvbnMuZGlzcGxheUZpZWxkO1xyXG4gICAgICAgIGlmIChvcHRpb25zLmZ1bmNHZXRMYWJlbCA9PSBudWxsIHx8IHR5cGVvZiBvcHRpb25zLmZ1bmNHZXRMYWJlbCAhPSAnZnVuY3Rpb24nKSB7XHJcbiAgICAgICAgICAgIG9wdGlvbnMuZnVuY0dldExhYmVsID0gKGl0ZW0pID0+IHtcclxuICAgICAgICAgICAgICAgIHJldHVybiBpdGVtW29wdGlvbnMuZGlzcGxheUZpZWxkXTtcclxuICAgICAgICAgICAgfTtcclxuICAgICAgICB9XHJcbiAgICB9XHJcblxyXG4gICAgcHJpdmF0ZSBnZW5lcmF0ZUdyaWRJbmZvRHJvcGRvd24oZmlsdGVyczogRmlsdGVyW10sIG9wdGlvbnM6IERyb3Bkb3duT3B0aW9ucykge1xyXG4gICAgICAgIGxldCBncmlkSW5mbyA9IHtcclxuICAgICAgICAgICAgcGFnZUluZm86IHtcclxuICAgICAgICAgICAgICAgIHBhZ2U6IDEsXHJcbiAgICAgICAgICAgICAgICBwYWdlU2l6ZTogMTBcclxuICAgICAgICAgICAgfSxcclxuICAgICAgICAgICAgZmlsdGVyczogZmlsdGVycyxcclxuICAgICAgICAgICAgc29ydHM6IFt7IGZpZWxkOiBvcHRpb25zLnNvcnRGaWVsZCwgZGlyOiBvcHRpb25zLnNvcnREaXIgfV0sXHJcbiAgICAgICAgICAgIGZpZWxkczogYCR7b3B0aW9ucy52YWx1ZUZpZWxkfSR7b3B0aW9ucy5kaXNwbGF5RmllbGQgPT0gb3B0aW9ucy52YWx1ZUZpZWxkID8gJycgOiAnLCcgKyBvcHRpb25zLmRpc3BsYXlGaWVsZH0ke29wdGlvbnMuZmllbGRQbHVzfWBcclxuICAgICAgICB9XHJcbiAgICAgICAgcmV0dXJuIGdyaWRJbmZvO1xyXG4gICAgfVxyXG5cclxuICAgIGdldERhdGFEcm9wZG93bkJ5RmlsdGVyKHNlcnZpY2VVcmk6IHN0cmluZywgZmlsdGVyczogRmlsdGVyW10sIG9wdGlvbnM/OiBEcm9wZG93bk9wdGlvbnMpOiBQcm9taXNlPGFueVtdPiB7XHJcbiAgICAgICAgaWYgKG9wdGlvbnMgPT0gbnVsbClcclxuICAgICAgICAgICAgb3B0aW9ucyA9IG5ldyBEcm9wZG93bk9wdGlvbnMoKTtcclxuICAgICAgICB0aGlzLnNldERlZmF1bHRWYWx1ZShvcHRpb25zKTtcclxuICAgICAgICByZXR1cm4gbmV3IFByb21pc2UoKHJlc29sdmUsIHJlamVjdCkgPT4ge1xyXG4gICAgICAgICAgICB0aGlzLmdldEJ5R3JpZFJlcXVlc3Qoc2VydmljZVVyaSwgdGhpcy5nZW5lcmF0ZUdyaWRJbmZvRHJvcGRvd24oZmlsdGVycywgb3B0aW9ucykpXHJcbiAgICAgICAgICAgICAgICAudGhlbihyZXMgPT4ge1xyXG4gICAgICAgICAgICAgICAgICAgIHJlc29sdmUocmVzLmRhdGEpO1xyXG4gICAgICAgICAgICAgICAgfSkuY2F0Y2goZXJyID0+IHJlamVjdChlcnIpKTtcclxuICAgICAgICB9KTtcclxuICAgIH1cclxufVxyXG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24uc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NoYXJlZC9zcmMvbGliL2NvbXBvbmVudHMvZHJvcGRvd24vc2VydmljZXMvZHJvcGRvd24uc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzNDLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDdEMsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDhCQUE4QixDQUFDOzs7QUFPL0QsTUFBTSxPQUFPLGVBQWU7SUFFeEIsWUFBb0IsV0FBdUI7UUFBdkIsZ0JBQVcsR0FBWCxXQUFXLENBQVk7SUFBSSxDQUFDO0lBRWhELGFBQWEsQ0FBQyxVQUFrQjtRQUM1QixPQUFPLGNBQWMsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLEdBQUcsQ0FBaUIsVUFBVSxDQUFDLENBQUMsQ0FBQztJQUM1RSxDQUFDO0lBQ0QsaUJBQWlCLENBQUMsVUFBa0IsRUFBRSxPQUFpQixFQUFFLE9BQXlCO1FBQzlFLE9BQU8sSUFBSSxDQUFDLHVCQUF1QixDQUFDLFVBQVUsRUFBRSxPQUFPLEVBQUUsT0FBTyxDQUFDLENBQUM7SUFDdEUsQ0FBQztJQUVELGdCQUFnQixDQUFDLFVBQWtCLEVBQUUsUUFBa0IsRUFBRSxVQUFrQixFQUFFO1FBQ3pFLElBQUksTUFBTSxHQUFHLFVBQVUsQ0FBQztRQUN4QixJQUFJLE9BQU8sSUFBSSxJQUFJLElBQUksT0FBTyxJQUFJLEVBQUU7WUFDaEMsTUFBTSxJQUFJLEdBQUcsR0FBRyxPQUFPLENBQUM7UUFDNUIsT0FBTyxjQUFjLENBQUMsSUFBSSxDQUFDLFdBQVc7YUFDakMsSUFBSSxDQUFpQixNQUFNLEVBQUUsUUFBUSxDQUFDLENBQUMsQ0FBQztJQUNqRCxDQUFDO0lBRU8sZUFBZSxDQUFDLE9BQXdCO1FBQzVDLElBQUksT0FBTyxDQUFDLFNBQVMsQ0FBQyxNQUFNLEdBQUcsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FBQyxVQUFVLENBQUMsR0FBRyxDQUFDO1lBQ2xFLE9BQU8sQ0FBQyxTQUFTLEdBQUcsR0FBRyxHQUFHLE9BQU8sQ0FBQyxTQUFTLENBQUM7UUFDaEQsSUFBSSxPQUFPLENBQUMsU0FBUyxJQUFJLEVBQUU7WUFDdkIsT0FBTyxDQUFDLFNBQVMsR0FBRyxPQUFPLENBQUMsWUFBWSxDQUFDO1FBQzdDLElBQUksT0FBTyxDQUFDLFlBQVksSUFBSSxJQUFJLElBQUksT0FBTyxPQUFPLENBQUMsWUFBWSxJQUFJLFVBQVUsRUFBRTtZQUMzRSxPQUFPLENBQUMsWUFBWSxHQUFHLENBQUMsSUFBSSxFQUFFLEVBQUU7Z0JBQzVCLE9BQU8sSUFBSSxDQUFDLE9BQU8sQ0FBQyxZQUFZLENBQUMsQ0FBQztZQUN0QyxDQUFDLENBQUM7U0FDTDtJQUNMLENBQUM7SUFFTyx3QkFBd0IsQ0FBQyxPQUFpQixFQUFFLE9BQXdCO1FBQ3hFLElBQUksUUFBUSxHQUFHO1lBQ1gsUUFBUSxFQUFFO2dCQUNOLElBQUksRUFBRSxDQUFDO2dCQUNQLFFBQVEsRUFBRSxFQUFFO2FBQ2Y7WUFDRCxPQUFPLEVBQUUsT0FBTztZQUNoQixLQUFLLEVBQUUsQ0FBQyxFQUFFLEtBQUssRUFBRSxPQUFPLENBQUMsU0FBUyxFQUFFLEdBQUcsRUFBRSxPQUFPLENBQUMsT0FBTyxFQUFFLENBQUM7WUFDM0QsTUFBTSxFQUFFLEdBQUcsT0FBTyxDQUFDLFVBQVUsR0FBRyxPQUFPLENBQUMsWUFBWSxJQUFJLE9BQU8sQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsR0FBRyxHQUFHLE9BQU8sQ0FBQyxZQUFZLEdBQUcsT0FBTyxDQUFDLFNBQVMsRUFBRTtTQUNySSxDQUFBO1FBQ0QsT0FBTyxRQUFRLENBQUM7SUFDcEIsQ0FBQztJQUVELHVCQUF1QixDQUFDLFVBQWtCLEVBQUUsT0FBaUIsRUFBRSxPQUF5QjtRQUNwRixJQUFJLE9BQU8sSUFBSSxJQUFJO1lBQ2YsT0FBTyxHQUFHLElBQUksZUFBZSxFQUFFLENBQUM7UUFDcEMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUM5QixPQUFPLElBQUksT0FBTyxDQUFDLENBQUMsT0FBTyxFQUFFLE1BQU0sRUFBRSxFQUFFO1lBQ25DLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxVQUFVLEVBQUUsSUFBSSxDQUFDLHdCQUF3QixDQUFDLE9BQU8sRUFBRSxPQUFPLENBQUMsQ0FBQztpQkFDN0UsSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUFFO2dCQUNSLE9BQU8sQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLENBQUM7WUFDdEIsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUM7UUFDckMsQ0FBQyxDQUFDLENBQUM7SUFDUCxDQUFDOzs0R0F0RFEsZUFBZTtnSEFBZixlQUFlLGNBRlosTUFBTTsyRkFFVCxlQUFlO2tCQUgzQixVQUFVO21CQUFDO29CQUNSLFVBQVUsRUFBRSxNQUFNO2lCQUNyQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEh0dHBDbGllbnQgfSBmcm9tICdAYW5ndWxhci9jb21tb24vaHR0cCc7XHJcbmltcG9ydCB7IEluamVjdGFibGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgZmlyc3RWYWx1ZUZyb20gfSBmcm9tICdyeGpzJztcclxuaW1wb3J0IHsgRHJvcGRvd25PcHRpb25zIH0gZnJvbSAnLi4vLi4vLi4vY2xhc3Nlcy9mb3JtLXNjaGVtYSc7XHJcbmltcG9ydCB7IEZpbHRlciwgR3JpZEluZm8gfSBmcm9tICcuLi8uLi8uLi9tb2RlbHMvZ3JpZC1pbmZvJztcclxuaW1wb3J0IHsgUmVzcG9uc2VSZXN1bHQgfSBmcm9tICcuLi8uLi8uLi9tb2RlbHMvcmVzcG9uc2UtcmVzdWx0JztcclxuXHJcbkBJbmplY3RhYmxlKHtcclxuICAgIHByb3ZpZGVkSW46ICdyb290J1xyXG59KVxyXG5leHBvcnQgY2xhc3MgRHJvcGRvd25TZXJ2aWNlIHtcclxuXHJcbiAgICBjb25zdHJ1Y3Rvcihwcml2YXRlIF9odHRwQ2xpZW50OiBIdHRwQ2xpZW50KSB7IH1cclxuXHJcbiAgICBnZXREYXRhU291cmNlKHNlcnZpY2VVcmk6IHN0cmluZyk6IFByb21pc2U8UmVzcG9uc2VSZXN1bHQ+IHtcclxuICAgICAgICByZXR1cm4gZmlyc3RWYWx1ZUZyb20odGhpcy5faHR0cENsaWVudC5nZXQ8UmVzcG9uc2VSZXN1bHQ+KHNlcnZpY2VVcmkpKTtcclxuICAgIH1cclxuICAgIGdldFBvc3REYXRhU291cmNlKHNlcnZpY2VVcmk6IHN0cmluZywgZmlsdGVyczogRmlsdGVyW10sIG9wdGlvbnM/OiBEcm9wZG93bk9wdGlvbnMpOiBQcm9taXNlPGFueVtdPiB7XHJcbiAgICAgICAgcmV0dXJuIHRoaXMuZ2V0RGF0YURyb3Bkb3duQnlGaWx0ZXIoc2VydmljZVVyaSwgZmlsdGVycywgb3B0aW9ucyk7XHJcbiAgICB9XHJcblxyXG4gICAgZ2V0QnlHcmlkUmVxdWVzdChzZXJ2aWNlVXJpOiBzdHJpbmcsIGdyaWRJbmZvOiBHcmlkSW5mbywgcGx1c1VybDogc3RyaW5nID0gJycpOiBQcm9taXNlPFJlc3BvbnNlUmVzdWx0PiB7XHJcbiAgICAgICAgbGV0IGFwaVVybCA9IHNlcnZpY2VVcmk7XHJcbiAgICAgICAgaWYgKHBsdXNVcmwgIT0gbnVsbCAmJiBwbHVzVXJsICE9ICcnKVxyXG4gICAgICAgICAgICBhcGlVcmwgKz0gXCIvXCIgKyBwbHVzVXJsO1xyXG4gICAgICAgIHJldHVybiBmaXJzdFZhbHVlRnJvbSh0aGlzLl9odHRwQ2xpZW50XHJcbiAgICAgICAgICAgIC5wb3N0PFJlc3BvbnNlUmVzdWx0PihhcGlVcmwsIGdyaWRJbmZvKSk7XHJcbiAgICB9XHJcblxyXG4gICAgcHJpdmF0ZSBzZXREZWZhdWx0VmFsdWUob3B0aW9uczogRHJvcGRvd25PcHRpb25zKSB7XHJcbiAgICAgICAgaWYgKG9wdGlvbnMuZmllbGRQbHVzLmxlbmd0aCA+IDAgJiYgIW9wdGlvbnMuZmllbGRQbHVzLnN0YXJ0c1dpdGgoJywnKSlcclxuICAgICAgICAgICAgb3B0aW9ucy5maWVsZFBsdXMgPSAnLCcgKyBvcHRpb25zLmZpZWxkUGx1cztcclxuICAgICAgICBpZiAob3B0aW9ucy5zb3J0RmllbGQgPT0gJycpXHJcbiAgICAgICAgICAgIG9wdGlvbnMuc29ydEZpZWxkID0gb3B0aW9ucy5kaXNwbGF5RmllbGQ7XHJcbiAgICAgICAgaWYgKG9wdGlvbnMuZnVuY0dldExhYmVsID09IG51bGwgfHwgdHlwZW9mIG9wdGlvbnMuZnVuY0dldExhYmVsICE9ICdmdW5jdGlvbicpIHtcclxuICAgICAgICAgICAgb3B0aW9ucy5mdW5jR2V0TGFiZWwgPSAoaXRlbSkgPT4ge1xyXG4gICAgICAgICAgICAgICAgcmV0dXJuIGl0ZW1bb3B0aW9ucy5kaXNwbGF5RmllbGRdO1xyXG4gICAgICAgICAgICB9O1xyXG4gICAgICAgIH1cclxuICAgIH1cclxuXHJcbiAgICBwcml2YXRlIGdlbmVyYXRlR3JpZEluZm9Ecm9wZG93bihmaWx0ZXJzOiBGaWx0ZXJbXSwgb3B0aW9uczogRHJvcGRvd25PcHRpb25zKSB7XHJcbiAgICAgICAgbGV0IGdyaWRJbmZvID0ge1xyXG4gICAgICAgICAgICBwYWdlSW5mbzoge1xyXG4gICAgICAgICAgICAgICAgcGFnZTogMSxcclxuICAgICAgICAgICAgICAgIHBhZ2VTaXplOiAxMFxyXG4gICAgICAgICAgICB9LFxyXG4gICAgICAgICAgICBmaWx0ZXJzOiBmaWx0ZXJzLFxyXG4gICAgICAgICAgICBzb3J0czogW3sgZmllbGQ6IG9wdGlvbnMuc29ydEZpZWxkLCBkaXI6IG9wdGlvbnMuc29ydERpciB9XSxcclxuICAgICAgICAgICAgZmllbGRzOiBgJHtvcHRpb25zLnZhbHVlRmllbGR9JHtvcHRpb25zLmRpc3BsYXlGaWVsZCA9PSBvcHRpb25zLnZhbHVlRmllbGQgPyAnJyA6ICcsJyArIG9wdGlvbnMuZGlzcGxheUZpZWxkfSR7b3B0aW9ucy5maWVsZFBsdXN9YFxyXG4gICAgICAgIH1cclxuICAgICAgICByZXR1cm4gZ3JpZEluZm87XHJcbiAgICB9XHJcblxyXG4gICAgZ2V0RGF0YURyb3Bkb3duQnlGaWx0ZXIoc2VydmljZVVyaTogc3RyaW5nLCBmaWx0ZXJzOiBGaWx0ZXJbXSwgb3B0aW9ucz86IERyb3Bkb3duT3B0aW9ucyk6IFByb21pc2U8YW55W10+IHtcclxuICAgICAgICBpZiAob3B0aW9ucyA9PSBudWxsKVxyXG4gICAgICAgICAgICBvcHRpb25zID0gbmV3IERyb3Bkb3duT3B0aW9ucygpO1xyXG4gICAgICAgIHRoaXMuc2V0RGVmYXVsdFZhbHVlKG9wdGlvbnMpO1xyXG4gICAgICAgIHJldHVybiBuZXcgUHJvbWlzZSgocmVzb2x2ZSwgcmVqZWN0KSA9PiB7XHJcbiAgICAgICAgICAgIHRoaXMuZ2V0QnlHcmlkUmVxdWVzdChzZXJ2aWNlVXJpLCB0aGlzLmdlbmVyYXRlR3JpZEluZm9Ecm9wZG93bihmaWx0ZXJzLCBvcHRpb25zKSlcclxuICAgICAgICAgICAgICAgIC50aGVuKHJlcyA9PiB7XHJcbiAgICAgICAgICAgICAgICAgICAgcmVzb2x2ZShyZXMuZGF0YSk7XHJcbiAgICAgICAgICAgICAgICB9KS5jYXRjaChlcnIgPT4gcmVqZWN0KGVycikpO1xyXG4gICAgICAgIH0pO1xyXG4gICAgfVxyXG59XHJcbiJdfQ==

package/esm2020/components/file-explorer/file-ky-so-sim/file-ky-so-sim.component.mjs

@@ -263,7 +263,7 @@ export class FileKySoSimComponent extends ComponentBase {
     }
 }
 FileKySoSimComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: FileKySoSimComponent, deps: [{ token: i0.Injector }, { token: i1.DomService }, { token: i2.FileExplorerService }, { token: i3.UserService }, { token: i4.NotifierService }, { token: i5.KySoSimSignPDFService }, { token: i6.EnvironmentService }], target: i0.ɵɵFactoryTarget.Component });
-FileKySoSimComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: FileKySoSimComponent, selector: "app-file-ky-so-sim", providers: [ComponentContextService], viewQueries: [{ propertyName: "signContainer", first: true, predicate: ["signContainer"], descendants: true }, { propertyName: "extendedPdfViewer", first: true, predicate: ["extendedPdfViewer"], descendants: true }, { propertyName: "imgSignImage", first: true, predicate: ["signImage"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"isLoading\" class=\"div-loading\">\r\n    <div class=\"div-loading-image\">\r\n        <p-progressSpinner [style]=\"{width: '50px', height: '50px'}\" styleClass=\"custom-spinner\" strokeWidth=\"8\"\r\n            fill=\"#EEEEEE\" animationDuration=\".5s\"></p-progressSpinner>\r\n    </div>\r\n</div>\r\n<div style=\"text-align: center;\">\r\n    <!--  -->\r\n    <ngx-extended-pdf-viewer #extendedPdfViewer pageViewMode=\"single\" useBrowserLocale=\"true\"\r\n        height=\"calc(100vh - 100px)\" [src]=\"model.pdfAsDataUri\" [showToolbar]=\"true\" [showSidebarButton]=\"false\"\r\n        [showFindButton]=\"false\" [showPagingButtons]=\"true\" [showZoomButtons]=\"false\"\r\n        [showPresentationModeButton]=\"false\" [showOpenFileButton]=\"false\" [showPrintButton]=\"false\"\r\n        [showDownloadButton]=\"false\" [showBookmarkButton]=\"false\" [showSecondaryToolbarButton]=\"false\"\r\n        [showRotateButton]=\"false\" [showHandToolButton]=\"false\" [showScrollingButton]=\"false\" [showSpreadButton]=\"false\"\r\n        [showPropertiesButton]=\"false\" [enablePinchOnMobile]=\"true\" [showUnverifiedSignatures]=\"true\"\r\n        [filenameForDownload]=\"'file1.pdf'\" [zoom]=\"100\" [language]=\"'vi-VN'\" [handTool]=\"false\"\r\n        [(page)]=\"myState.currentPage\" (currentZoomFactor)=\"onPDFZoom($event)\" (pagesLoaded)=\"pagesLoaded($event)\">\r\n    </ngx-extended-pdf-viewer>\r\n    <div #signContainer id=\"signContainer\" class=\"sign-container\" (window:resize)=\"onResize($event)\">\r\n        <img #signImage *ngIf=\"model.kySimDataChuKy.signImageAsDataUri != null\" id=\"signImage\"\r\n            [src]=\"model.kySimDataChuKy.signImageAsDataUri\" />\r\n        <span *ngIf=\"model.kySimDataChuKy.signImageAsDataUri == null\">\r\n            <i class=\"fas fa-signature\"></i> Ch\u1ECDn v\u1ECB tr\u00ED k\u00FD\r\n        </span>\r\n        <div class=\"resize top-left\"></div>\r\n        <div class=\"resize bottom-right\"></div>\r\n    </div>\r\n</div>\r\n<tn-dialog *ngIf=\"forms.danhSachChuKy.show\" #dialog [styleClass]=\"'address-form'\" [useDefaultScrollBar]=\"true\"\r\n    [header]=\"forms.danhSachChuKy.header | translate\" [popupSize]=\"forms.danhSachChuKy.popupSize\" [showFooter]=\"true\"\r\n    (onHide)=\"forms.danhSachChuKy.show=false\">\r\n    <app-ky-so-sim-danh-sach-chu-ky [formData]=\"forms.danhSachChuKy\" [parentModel]=\"model\" [parentContext]=\"context\">\r\n    </app-ky-so-sim-danh-sach-chu-ky>\r\n</tn-dialog>", styles: [".sign-container{display:none;position:absolute;z-index:1;top:10px;left:0;touch-action:none;-webkit-user-select:none;user-select:none;background:rgba(33,150,243,.1490196078);border:2px dashed #2196f3}.sign-container span{font-size:20px;color:#555;padding:10px 20px 10px 10px;display:block;font-style:italic;font-weight:700}.sign-container img{width:100%;height:100%}.resize{display:inline-block;position:absolute;width:16px;height:16px;border-radius:50%;border:1px solid #ffffff;background:#2196f3;box-shadow:1px 1px 3px 1px #00000040}.top-left{top:-8px;left:-8px}.bottom-right{bottom:-8px;right:-8px}.div-loading{width:100%;height:100%;top:0px;left:0px;position:fixed;display:block;z-index:99;background:rgba(0,0,0,.4509803922)}.div-loading-image{position:absolute;top:50%;left:50%;z-index:100}\n"], dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.NgxExtendedPdfViewerComponent, selector: "ngx-extended-pdf-viewer", inputs: ["enableDragAndDrop", "formData", "pageViewMode", "scrollMode", "authorization", "httpHeaders", "contextMenuAllowed", "enablePrint", "delayFirstView", "logLevel", "enablePinchOnMobile", "minifiedJSLibraries", "printResolution", "useBrowserLocale", "backgroundColor", "filenameForDownload", "ignoreKeyboard", "ignoreKeys", "acceptKeys", "imageResourcesPath", "localeFolderPath", "language", "listenToURL", "nameddest", "password", "showUnverifiedSignatures", "sidebarVisible", "showFindButton", "showPagingButtons", "showZoomButtons", "showPresentationModeButton", "showOpenFileButton", "showPrintButton", "showDownloadButton", "showBookmarkButton", "theme", "showToolbar", "showSecondaryToolbarButton", "showRotateButton", "handTool", "showHandToolButton", "showScrollingButton", "showSpreadButton", "showPropertiesButton", "showBorders", "pageLabel", "textLayer", "zoom", "zoomLevels", "maxZoom", "minZoom", "_mobileFriendlyZoom", "src", "base64Src", "height", "showSidebarButton", "page", "mobileFriendlyZoom", "customFindbarInputArea", "customToolbar", "customFindbar", "customFindbarButtons", "customSecondaryToolbar", "customSidebar", "customThumbnail", "customFreeFloatingBar", "rotation", "startTabindex", "spread"], outputs: ["formDataChange", "progress", "srcChange", "scrollModeChange", "afterPrint", "beforePrint", "currentZoomFactor", "rotationChange", "sidebarVisibleChange", "handToolChange", "spreadChange", "thumbnailDrawn", "pageChange", "pageLabelChange", "pagesLoaded", "pageRender", "pageRendered", "pdfDownloaded", "pdfLoaded", "pdfLoadingFailed", "textLayerRendered", "updateFindMatchesCount", "updateFindState", "zoomChange"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner", inputs: ["strokeWidth", "fill", "animationDuration", "style", "styleClass"] }, { kind: "component", type: i10.TnDialogComponent, selector: "tn-dialog", inputs: ["maskClass", "styleClass", "scrollBarStyleClass", "useDefaultScrollBar", "visible", "disabledButton", "modal", "header", "popupSize", "closeOnEscape", "showFooter", "positionTop", "minY", "hiddenSave", "maximizable"], outputs: ["onSave", "onCancel", "onShow", "onHide"] }, { kind: "component", type: i11.KySoSimDanhSachChuKyComponent, selector: "app-ky-so-sim-danh-sach-chu-ky", inputs: ["formData"] }, { kind: "pipe", type: i12.TranslatePipe, name: "translate" }] });
+FileKySoSimComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: FileKySoSimComponent, selector: "app-file-ky-so-sim", providers: [ComponentContextService], viewQueries: [{ propertyName: "signContainer", first: true, predicate: ["signContainer"], descendants: true }, { propertyName: "extendedPdfViewer", first: true, predicate: ["extendedPdfViewer"], descendants: true }, { propertyName: "imgSignImage", first: true, predicate: ["signImage"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"isLoading\" class=\"div-loading\">\r\n    <div class=\"div-loading-image\">\r\n        <p-progressSpinner [style]=\"{width: '50px', height: '50px'}\" styleClass=\"custom-spinner\" strokeWidth=\"8\"\r\n            fill=\"#EEEEEE\" animationDuration=\".5s\"></p-progressSpinner>\r\n    </div>\r\n</div>\r\n<div style=\"text-align: center;\">\r\n    <!--  -->\r\n    <ngx-extended-pdf-viewer #extendedPdfViewer pageViewMode=\"single\" useBrowserLocale=\"true\"\r\n        height=\"calc(100vh - 100px)\" [src]=\"model.pdfAsDataUri\" [showToolbar]=\"true\" [showSidebarButton]=\"false\"\r\n        [showFindButton]=\"false\" [showPagingButtons]=\"true\" [showZoomButtons]=\"false\"\r\n        [showPresentationModeButton]=\"false\" [showOpenFileButton]=\"false\" [showPrintButton]=\"false\"\r\n        [showDownloadButton]=\"false\" [showBookmarkButton]=\"false\" [showSecondaryToolbarButton]=\"false\"\r\n        [showRotateButton]=\"false\" [showHandToolButton]=\"false\" [showScrollingButton]=\"false\" [showSpreadButton]=\"false\"\r\n        [showPropertiesButton]=\"false\" [enablePinchOnMobile]=\"true\" [showUnverifiedSignatures]=\"true\"\r\n        [filenameForDownload]=\"'file1.pdf'\" [zoom]=\"100\" [language]=\"'vi-VN'\" [handTool]=\"false\"\r\n        [(page)]=\"myState.currentPage\" (currentZoomFactor)=\"onPDFZoom($event)\" (pagesLoaded)=\"pagesLoaded($event)\">\r\n    </ngx-extended-pdf-viewer>\r\n    <div #signContainer id=\"signContainer\" class=\"sign-container\" (window:resize)=\"onResize($event)\">\r\n        <img #signImage *ngIf=\"model.kySimDataChuKy.signImageAsDataUri != null\" id=\"signImage\"\r\n            [src]=\"model.kySimDataChuKy.signImageAsDataUri\" />\r\n        <span *ngIf=\"model.kySimDataChuKy.signImageAsDataUri == null\">\r\n            <i class=\"fas fa-signature\"></i> Ch\u1ECDn v\u1ECB tr\u00ED k\u00FD\r\n        </span>\r\n        <div class=\"resize top-left\"></div>\r\n        <div class=\"resize bottom-right\"></div>\r\n    </div>\r\n</div>\r\n<tn-dialog *ngIf=\"forms.danhSachChuKy.show\" #dialog [styleClass]=\"'address-form'\" [useDefaultScrollBar]=\"true\"\r\n    [header]=\"forms.danhSachChuKy.header | translate\" [popupSize]=\"forms.danhSachChuKy.popupSize\" [showFooter]=\"true\"\r\n    (onHide)=\"forms.danhSachChuKy.show=false\">\r\n    <app-ky-so-sim-danh-sach-chu-ky [formData]=\"forms.danhSachChuKy\" [parentModel]=\"model\" [parentContext]=\"context\">\r\n    </app-ky-so-sim-danh-sach-chu-ky>\r\n</tn-dialog>", styles: [".sign-container{display:none;position:absolute;z-index:1;top:10px;left:0;touch-action:none;-webkit-user-select:none;user-select:none;background:rgba(33,150,243,.1490196078);border:2px dashed #2196f3}.sign-container span{font-size:20px;color:#555;padding:10px 20px 10px 10px;display:block;font-style:italic;font-weight:700}.sign-container img{width:100%;height:100%}.resize{display:inline-block;position:absolute;width:16px;height:16px;border-radius:50%;border:1px solid #ffffff;background:#2196f3;box-shadow:1px 1px 3px 1px #00000040}.top-left{top:-8px;left:-8px}.bottom-right{bottom:-8px;right:-8px}.div-loading{width:100%;height:100%;top:0px;left:0px;position:fixed;display:block;z-index:99;background:rgba(0,0,0,.4509803922)}.div-loading-image{position:absolute;top:50%;left:50%;z-index:100}\n"], dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.NgxExtendedPdfViewerComponent, selector: "ngx-extended-pdf-viewer", inputs: ["customFindbarInputArea", "customToolbar", "customFindbar", "customFindbarButtons", "customPdfViewer", "customSecondaryToolbar", "customSidebar", "customThumbnail", "customFreeFloatingBar", "showFreeFloatingBar", "enableDragAndDrop", "formData", "pageViewMode", "scrollMode", "authorization", "httpHeaders", "contextMenuAllowed", "enablePrint", "delayFirstView", "logLevel", "enablePinchOnMobile", "minifiedJSLibraries", "printResolution", "rotation", "src", "base64Src", "minHeight", "height", "useBrowserLocale", "forceUsingLegacyES5", "backgroundColor", "pdfBackground", "pdfBackgroundColorToReplace", "filenameForDownload", "ignoreKeyboard", "ignoreKeys", "acceptKeys", "imageResourcesPath", "localeFolderPath", "language", "listenToURL", "nameddest", "password", "showUnverifiedSignatures", "startTabindex", "showSidebarButton", "sidebarVisible", "showFindButton", "showFindHighlightAll", "showFindMatchCase", "showFindCurrentPageOnly", "showFindPageRange", "showFindEntireWord", "showFindEntirePhrase", "showFindIgnoreAccents", "showFindFuzzySearch", "showFindResultsCount", "showFindMessages", "showPagingButtons", "showZoomButtons", "showPresentationModeButton", "showOpenFileButton", "showPrintButton", "showDownloadButton", "showBookmarkButton", "theme", "formTheme", "showToolbar", "showSecondaryToolbarButton", "showRotateButton", "handTool", "showHandToolButton", "showScrollingButton", "showSpreadButton", "showPropertiesButton", "showBorders", "spread", "page", "pageLabel", "textLayer", "zoom", "zoomLevels", "maxZoom", "minZoom", "_mobileFriendlyZoom", "wheelAction", "mobileFriendlyZoom"], outputs: ["formDataChange", "progress", "srcChange", "scrollModeChange", "afterPrint", "beforePrint", "currentZoomFactor", "rotationChange", "sidebarVisibleChange", "handToolChange", "spreadChange", "thumbnailDrawn", "pageChange", "pageLabelChange", "pagesLoaded", "pageRender", "pageRendered", "pdfDownloaded", "pdfLoaded", "pdfLoadingStarts", "pdfLoadingFailed", "textLayerRendered", "updateFindMatchesCount", "updateFindState", "zoomChange"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner", inputs: ["strokeWidth", "fill", "animationDuration", "style", "styleClass"] }, { kind: "component", type: i10.TnDialogComponent, selector: "tn-dialog", inputs: ["maskClass", "styleClass", "scrollBarStyleClass", "useDefaultScrollBar", "visible", "disabledButton", "modal", "header", "popupSize", "closeOnEscape", "showFooter", "positionTop", "minY", "hiddenSave", "maximizable"], outputs: ["onSave", "onCancel", "onShow", "onHide"] }, { kind: "component", type: i11.KySoSimDanhSachChuKyComponent, selector: "app-ky-so-sim-danh-sach-chu-ky", inputs: ["formData"] }, { kind: "pipe", type: i12.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: FileKySoSimComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-file-ky-so-sim', providers: [ComponentContextService], template: "<div *ngIf=\"isLoading\" class=\"div-loading\">\r\n    <div class=\"div-loading-image\">\r\n        <p-progressSpinner [style]=\"{width: '50px', height: '50px'}\" styleClass=\"custom-spinner\" strokeWidth=\"8\"\r\n            fill=\"#EEEEEE\" animationDuration=\".5s\"></p-progressSpinner>\r\n    </div>\r\n</div>\r\n<div style=\"text-align: center;\">\r\n    <!--  -->\r\n    <ngx-extended-pdf-viewer #extendedPdfViewer pageViewMode=\"single\" useBrowserLocale=\"true\"\r\n        height=\"calc(100vh - 100px)\" [src]=\"model.pdfAsDataUri\" [showToolbar]=\"true\" [showSidebarButton]=\"false\"\r\n        [showFindButton]=\"false\" [showPagingButtons]=\"true\" [showZoomButtons]=\"false\"\r\n        [showPresentationModeButton]=\"false\" [showOpenFileButton]=\"false\" [showPrintButton]=\"false\"\r\n        [showDownloadButton]=\"false\" [showBookmarkButton]=\"false\" [showSecondaryToolbarButton]=\"false\"\r\n        [showRotateButton]=\"false\" [showHandToolButton]=\"false\" [showScrollingButton]=\"false\" [showSpreadButton]=\"false\"\r\n        [showPropertiesButton]=\"false\" [enablePinchOnMobile]=\"true\" [showUnverifiedSignatures]=\"true\"\r\n        [filenameForDownload]=\"'file1.pdf'\" [zoom]=\"100\" [language]=\"'vi-VN'\" [handTool]=\"false\"\r\n        [(page)]=\"myState.currentPage\" (currentZoomFactor)=\"onPDFZoom($event)\" (pagesLoaded)=\"pagesLoaded($event)\">\r\n    </ngx-extended-pdf-viewer>\r\n    <div #signContainer id=\"signContainer\" class=\"sign-container\" (window:resize)=\"onResize($event)\">\r\n        <img #signImage *ngIf=\"model.kySimDataChuKy.signImageAsDataUri != null\" id=\"signImage\"\r\n            [src]=\"model.kySimDataChuKy.signImageAsDataUri\" />\r\n        <span *ngIf=\"model.kySimDataChuKy.signImageAsDataUri == null\">\r\n            <i class=\"fas fa-signature\"></i> Ch\u1ECDn v\u1ECB tr\u00ED k\u00FD\r\n        </span>\r\n        <div class=\"resize top-left\"></div>\r\n        <div class=\"resize bottom-right\"></div>\r\n    </div>\r\n</div>\r\n<tn-dialog *ngIf=\"forms.danhSachChuKy.show\" #dialog [styleClass]=\"'address-form'\" [useDefaultScrollBar]=\"true\"\r\n    [header]=\"forms.danhSachChuKy.header | translate\" [popupSize]=\"forms.danhSachChuKy.popupSize\" [showFooter]=\"true\"\r\n    (onHide)=\"forms.danhSachChuKy.show=false\">\r\n    <app-ky-so-sim-danh-sach-chu-ky [formData]=\"forms.danhSachChuKy\" [parentModel]=\"model\" [parentContext]=\"context\">\r\n    </app-ky-so-sim-danh-sach-chu-ky>\r\n</tn-dialog>", styles: [".sign-container{display:none;position:absolute;z-index:1;top:10px;left:0;touch-action:none;-webkit-user-select:none;user-select:none;background:rgba(33,150,243,.1490196078);border:2px dashed #2196f3}.sign-container span{font-size:20px;color:#555;padding:10px 20px 10px 10px;display:block;font-style:italic;font-weight:700}.sign-container img{width:100%;height:100%}.resize{display:inline-block;position:absolute;width:16px;height:16px;border-radius:50%;border:1px solid #ffffff;background:#2196f3;box-shadow:1px 1px 3px 1px #00000040}.top-left{top:-8px;left:-8px}.bottom-right{bottom:-8px;right:-8px}.div-loading{width:100%;height:100%;top:0px;left:0px;position:fixed;display:block;z-index:99;background:rgba(0,0,0,.4509803922)}.div-loading-image{position:absolute;top:50%;left:50%;z-index:100}\n"] }]