@c-standard/angular-devui-extension/fesm2015/c-standard-angular-devui-extension-form.mjs

an extensional components lib for devui

import * as i0 from '@angular/core';
import { Injectable, forwardRef, Component, ViewEncapsulation, Input, ContentChildren, EventEmitter, Output, ViewChild, NgModule } from '@angular/core';
import { TemplateDirective } from '@c-standard/angular-devui-extension/template';
import * as i1 from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as i2 from 'ng-devui';
import { FormModule, LoadingModule, InputNumberModule, ToggleModule } from 'ng-devui';
import * as i3 from '@c-standard/angular-devui-extension/radio';
import { RadioPlusModule } from '@c-standard/angular-devui-extension/radio';
import * as i4 from '@c-standard/angular-devui-extension/select';
import { SelectPlusModule } from '@c-standard/angular-devui-extension/select';
import * as i5 from '@angular/common';
import { CommonModule } from '@angular/common';
import { forEach, mergeWith, isEmpty, isObject, isNull } from 'lodash-es';
import { FormLayout, FormDirective } from 'ng-devui/form';
import * as i4$1 from '@angular/cdk/scrolling';
import { CdkScrollableModule } from '@angular/cdk/scrolling';

class FormField {
}
FormField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FormField, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
FormField.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FormField });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FormField, decorators: [{
            type: Injectable
        }] });

class FormPlusItemComponent extends FormField {
    constructor(fb) {
        super();
        this.fb = fb;
        this.showLabel = true;
        this.helpText = '';
        this.option = {};
        this.required = false;
        this.disabled = false;
        this.validateRules = [];
        this.disableAll = false;
        this.showContent = false;
        // default value
        this.control = fb.control('');
    }
    ngOnInit() {
        if (this.disabled) {
            this.control.disable();
        }
        else {
            this.control.enable();
        }
    }
    /**
     * todo 父子组件或者树型结构组件存在组件循环导入的问题
     * 1. 使用中间服务来提供数据的共享（推荐） 使用@self注入装饰器
     * 2. 创建注射器token来实现父组件的注入
     */
    get templates() {
        if (this.itemDefinitions != null) {
            const itemTemplates = {};
            for (const definition of this.itemDefinitions.toArray()) {
                itemTemplates[definition.template] = definition.templateRef;
            }
            return itemTemplates;
        }
        else {
            return {};
        }
    }
}
FormPlusItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FormPlusItemComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
FormPlusItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: FormPlusItemComponent, selector: "d-form-plus-item", inputs: { showLabel: "showLabel", label: "label", field: "field", dataType: "dataType", helpText: "helpText", option: "option", required: "required", disabled: "disabled", template: "template", validateRules: "validateRules" }, providers: [
        {
            provide: FormField,
            useExisting: forwardRef(() => FormPlusItemComponent),
        },
    ], queries: [{ propertyName: "itemDefinitions", predicate: TemplateDirective }], usesInheritance: true, ngImport: i0, template: "<d-form-item [dHasFeedback]=\"false\">\r\n    <d-form-label\r\n        *ngIf=\"showLabel\"\r\n        [hasHelp]=\"!!helpText\"\r\n        [helpTips]=\"helpText\"\r\n        [required]=\"required\"\r\n    >\r\n        {{ label }}\r\n    </d-form-label>\r\n    <d-form-control style=\"margin-left: 0\">\r\n        <ng-container *ngIf=\"!showContent\">\r\n            <ng-container\r\n                *ngIf=\"template; else itemTemplate\"\r\n                [ngTemplateOutletContext]=\"{\r\n                    $implicit: {\r\n                        control: control,\r\n                        disabled: disabled,\r\n                        option: option\r\n                    }\r\n                }\"\r\n                [ngTemplateOutlet]=\"templates[template || ''] || defaultItemTemplate\"\r\n            >\r\n            </ng-container>\r\n            <ng-template #defaultItemTemplate> tmpl:{{ option['value'] }} </ng-template>\r\n            <ng-template #itemTemplate>\r\n                <ng-container [ngSwitch]=\"dataType\">\r\n                    <input\r\n                        *ngSwitchDefault\r\n                        dTextInput\r\n                        [formControl]=\"control\"\r\n                        [name]=\"field\"\r\n                        [dValidateRules]=\"validateRules\"\r\n                        [placeholder]=\"option['placeholder']\"\r\n                        [disabled]=\"!!option['disabled'] || disableAll\"\r\n                    />\r\n                    <textarea\r\n                        *ngSwitchCase=\"'text'\"\r\n                        dTextarea\r\n                        [formControl]=\"control\"\r\n                        [dValidateRules]=\"validateRules\"\r\n                        [placeholder]=\"option['placeholder'] || ''\"\r\n                    ></textarea>\r\n                    <d-input-number\r\n                        *ngSwitchCase=\"'number'\"\r\n                        [style.min-width]=\"'120px'\"\r\n                        [formControl]=\"control\"\r\n                        [dValidateRules]=\"validateRules\"\r\n                        [allowEmpty]=\"option['allowEmpty']\"\r\n                        [decimalLimit]=\"option['decimalLimit']\"\r\n                        [maxLength]=\"option['maxLength']\"\r\n                        [placeholder]=\"option['placeholder']\"\r\n                        [step]=\"option['step']\"\r\n                    ></d-input-number>\r\n                    <d-toggle\r\n                        *ngSwitchCase=\"'boolean'\"\r\n                        [formControl]=\"control\"\r\n                        [dValidateRules]=\"validateRules\"\r\n                    ></d-toggle>\r\n                    <d-radio-plus-group\r\n                        *ngSwitchCase=\"'enum'\"\r\n                        [name]=\"field\"\r\n                        [control]=\"control\"\r\n                        [dataSource]=\"option['dataSource']\"\r\n                    >\r\n                    </d-radio-plus-group>\r\n                    <d-select-box\r\n                        *ngSwitchCase=\"'items'\"\r\n                        [allowClear]=\"option['allowClear']\"\r\n                        [dataSource]=\"option['dataSource']\"\r\n                        [displayExpr]=\"option['displayExpr']\"\r\n                        [multiple]=\"option['multiple']\"\r\n                        [formControl]=\"control\"\r\n                        [placeholder]=\"option['placeholder']\"\r\n                        [valueExpr]=\"option['valueExpr']\"\r\n                    >\r\n                    </d-select-box>\r\n                </ng-container>\r\n            </ng-template>\r\n        </ng-container>\r\n        <ng-content></ng-content>\r\n    </d-form-control>\r\n</d-form-item>\r\n", components: [{ type: i2.FormItemComponent, selector: "d-form-item", inputs: ["dFeedbackType", "dHasFeedback"] }, { type: i2.FormLabelComponent, selector: "d-form-label", inputs: ["required", "hasHelp", "helpTips"] }, { type: i2.FormControlComponent, selector: "d-form-control", inputs: ["extraInfo", "feedbackStatus", "suffixTemplate"] }, { type: i2.InputNumberComponent, selector: "d-input-number", inputs: ["step", "disabled", "size", "decimalLimit", "autoFocus", "allowEmpty", "placeholder", "maxLength", "reg", "min", "max"], outputs: ["afterValueChanged", "whileValueChanging"] }, { type: i2.ToggleComponent, selector: "d-toggle", inputs: ["size", "color", "beforeChange", "checkedContent", "uncheckedContent", "checked", "disabled"], outputs: ["change"], exportAs: ["toggle"] }, { type: i3.RadioPlusGroupComponent, selector: "d-radio-plus-group", inputs: ["dataSource", "name", "value", "control", "valueExpr", "displayExpr", "disabled", "align", "validateRules"], outputs: ["checkedValueChange"] }, { type: i4.SelectBoxComponent, selector: "d-select-box", inputs: ["dataSource", "valueExpr", "displayExpr", "placeholder", "multiple", "allowClear", "allowSearch", "disabled", "validateRules"], outputs: ["selectedOptionChange", "expandChange", "initialized"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.DFormControlRuleDirective, selector: "[dValidateRules][formControlName],[dValidateRules][ngModel],[dValidateRules][formControl]", inputs: ["dValidateRules", "dValidatePopConfig"], outputs: ["dRulesStatusChange"], exportAs: ["dValidateRules"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FormPlusItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'd-form-plus-item', encapsulation: ViewEncapsulation.None, providers: [
                        {
                            provide: FormField,
                            useExisting: forwardRef(() => FormPlusItemComponent),
                        },
                    ], template: "<d-form-item [dHasFeedback]=\"false\">\r\n    <d-form-label\r\n        *ngIf=\"showLabel\"\r\n        [hasHelp]=\"!!helpText\"\r\n        [helpTips]=\"helpText\"\r\n        [required]=\"required\"\r\n    >\r\n        {{ label }}\r\n    </d-form-label>\r\n    <d-form-control style=\"margin-left: 0\">\r\n        <ng-container *ngIf=\"!showContent\">\r\n            <ng-container\r\n                *ngIf=\"template; else itemTemplate\"\r\n                [ngTemplateOutletContext]=\"{\r\n                    $implicit: {\r\n                        control: control,\r\n                        disabled: disabled,\r\n                        option: option\r\n                    }\r\n                }\"\r\n                [ngTemplateOutlet]=\"templates[template || ''] || defaultItemTemplate\"\r\n            >\r\n            </ng-container>\r\n            <ng-template #defaultItemTemplate> tmpl:{{ option['value'] }} </ng-template>\r\n            <ng-template #itemTemplate>\r\n                <ng-container [ngSwitch]=\"dataType\">\r\n                    <input\r\n                        *ngSwitchDefault\r\n                        dTextInput\r\n                        [formControl]=\"control\"\r\n                        [name]=\"field\"\r\n                        [dValidateRules]=\"validateRules\"\r\n                        [placeholder]=\"option['placeholder']\"\r\n                        [disabled]=\"!!option['disabled'] || disableAll\"\r\n                    />\r\n                    <textarea\r\n                        *ngSwitchCase=\"'text'\"\r\n                        dTextarea\r\n                        [formControl]=\"control\"\r\n                        [dValidateRules]=\"validateRules\"\r\n                        [placeholder]=\"option['placeholder'] || ''\"\r\n                    ></textarea>\r\n                    <d-input-number\r\n                        *ngSwitchCase=\"'number'\"\r\n                        [style.min-width]=\"'120px'\"\r\n                        [formControl]=\"control\"\r\n                        [dValidateRules]=\"validateRules\"\r\n                        [allowEmpty]=\"option['allowEmpty']\"\r\n                        [decimalLimit]=\"option['decimalLimit']\"\r\n                        [maxLength]=\"option['maxLength']\"\r\n                        [placeholder]=\"option['placeholder']\"\r\n                        [step]=\"option['step']\"\r\n                    ></d-input-number>\r\n                    <d-toggle\r\n                        *ngSwitchCase=\"'boolean'\"\r\n                        [formControl]=\"control\"\r\n                        [dValidateRules]=\"validateRules\"\r\n                    ></d-toggle>\r\n                    <d-radio-plus-group\r\n                        *ngSwitchCase=\"'enum'\"\r\n                        [name]=\"field\"\r\n                        [control]=\"control\"\r\n                        [dataSource]=\"option['dataSource']\"\r\n                    >\r\n                    </d-radio-plus-group>\r\n                    <d-select-box\r\n                        *ngSwitchCase=\"'items'\"\r\n                        [allowClear]=\"option['allowClear']\"\r\n                        [dataSource]=\"option['dataSource']\"\r\n                        [displayExpr]=\"option['displayExpr']\"\r\n                        [multiple]=\"option['multiple']\"\r\n                        [formControl]=\"control\"\r\n                        [placeholder]=\"option['placeholder']\"\r\n                        [valueExpr]=\"option['valueExpr']\"\r\n                    >\r\n                    </d-select-box>\r\n                </ng-container>\r\n            </ng-template>\r\n        </ng-container>\r\n        <ng-content></ng-content>\r\n    </d-form-control>\r\n</d-form-item>\r\n" }]
        }], ctorParameters: function () { return [{ type: i1.FormBuilder }]; }, propDecorators: { showLabel: [{
                type: Input
            }], label: [{
                type: Input
            }], field: [{
                type: Input
            }], dataType: [{
                type: Input
            }], helpText: [{
                type: Input
            }], option: [{
                type: Input
            }], required: [{
                type: Input
            }], disabled: [{
                type: Input
            }], template: [{
                type: Input
            }], validateRules: [{
                type: Input
            }], itemDefinitions: [{
                type: ContentChildren,
                args: [TemplateDirective]
            }] } });

class FormGroupComponent extends FormField {
    constructor(fb) {
        super();
        this.fb = fb;
        this.groupDataChange = new EventEmitter();
        this.control = fb.group({});
    }
    set data(value) {
        this._data = value;
        if (this._data) {
            this.control.patchValue(this._data);
        }
    }
    ngAfterContentInit() {
        var _a;
        this.addFormControls(this.fields);
        (_a = this.fields) === null || _a === void 0 ? void 0 : _a.changes.subscribe((f) => {
            this.addFormControls(f);
        });
        this.control.valueChanges.subscribe((value) => {
            this.groupDataChange.emit(value);
        });
    }
    addFormControls(fields) {
        if (!fields)
            return;
        // dynamic add、set or remove control
        const changedNames = [];
        forEach(fields.toArray(), (t) => {
            if (this.control.contains(t.field)) {
                this.control.setControl(t.field, t.control);
            }
            else {
                this.control.addControl(t.field, t.control);
            }
            changedNames.push(t.field);
        });
        // Note 表单field发生改变时，移除对应的control以保证校验通过
        const controlNames = Object.keys(this.control.controls);
        controlNames.forEach((name) => {
            if (!changedNames.find((t) => t == name)) {
                this.control.removeControl(name);
            }
        });
        // Note: 当表单field改变时，其对应的默认值再次填充
        this.control.patchValue(mergeWith(this.control.value, this._data, (o, s) => (isEmpty(o) ? s : o)));
    }
}
FormGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FormGroupComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
FormGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: FormGroupComponent, selector: "d-form-plugin-group", inputs: { data: "data", field: "field" }, outputs: { groupDataChange: "groupDataChange" }, providers: [
        {
            provide: FormField,
            useExisting: forwardRef(() => FormGroupComponent),
        },
    ], queries: [{ propertyName: "fields", predicate: FormField }], usesInheritance: true, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FormGroupComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'd-form-plugin-group',
                    template: ` <ng-content></ng-content> `,
                    providers: [
                        {
                            provide: FormField,
                            useExisting: forwardRef(() => FormGroupComponent),
                        },
                    ],
                }]
        }], ctorParameters: function () { return [{ type: i1.FormBuilder }]; }, propDecorators: { data: [{
                type: Input
            }], field: [{
                type: Input
            }], groupDataChange: [{
                type: Output
            }], fields: [{
                type: ContentChildren,
                args: [FormField]
            }] } });

class FormPlusComponent {
    constructor(fb, ref, _cdr) {
        this.fb = fb;
        this.ref = ref;
        this._cdr = _cdr;
        this.loading = false;
        this.readonly = false;
        this.initialized = new EventEmitter();
        this.fieldDataChanged = new EventEmitter();
        this.formSubmit = new EventEmitter();
        this.layoutDirection = FormLayout.Horizontal;
        this.formGroup = this.fb.group({});
    }
    set data(value) {
        this._data = value;
        if (this._data) {
            this.formGroup.patchValue(this._data);
        }
    }
    get layout() {
        return (this._layout = 'horizontal');
    }
    set layout(value) {
        this._layout = value;
        if (this._layout) {
            this._layout == 'vertical'
                ? (this.layoutDirection = FormLayout.Vertical)
                : (this.layoutDirection = FormLayout.Horizontal);
        }
    }
    ngOnInit() {
        this.initialized.emit({
            element: this.ref.nativeElement,
            component: this,
        });
    }
    ngAfterContentInit() {
        var _a;
        this.addFormControls(this.fields);
        (_a = this.fields) === null || _a === void 0 ? void 0 : _a.changes.subscribe((f) => {
            this.addFormControls(f);
        });
        // this.formGroup.patchValue(this._data);
        this.formGroup.valueChanges.subscribe((value) => {
            this.fieldDataChanged.emit(value);
        });
    }
    addFormControls(fields) {
        if (!fields)
            return;
        // dynamic add、set or remove control
        const changedNames = [];
        forEach(fields.toArray(), (t) => {
            if (this.formGroup.contains(t.field)) {
                this.formGroup.setControl(t.field, t.control);
            }
            else {
                this.formGroup.addControl(t.field, t.control);
            }
            changedNames.push(t.field);
        });
        // Note 表单field发生改变时，移除对应的control以保证校验通过
        const controlNames = Object.keys(this.formGroup.controls);
        controlNames.forEach((name) => {
            if (!changedNames.find((t) => t == name)) {
                this.formGroup.removeControl(name);
            }
        });
        // Note: 当表单field改变时，其对应的默认值再次填充
        this.formGroup.patchValue(mergeWith(this.formGroup.value, this._data, (o, s) => (isEmpty(o) ? s : o)));
    }
    get templates() {
        if (this.itemDefinitions != null) {
            const itemTemplates = {};
            for (const definition of this.itemDefinitions.toArray()) {
                itemTemplates[definition.template] = definition.templateRef;
            }
            return itemTemplates;
        }
        else {
            return {};
        }
    }
    setValue(value) {
        if (isObject(value) && !isNull(value)) {
            this.formGroup.patchValue(value);
        }
    }
    submit(e) {
        this.formSubmit.emit({
            valid: e.valid,
        });
    }
    check() {
        var _a;
        (_a = this.devuiForm) === null || _a === void 0 ? void 0 : _a.updateOnSubmit();
    }
    get valid() {
        this.check();
        return this.formGroup.valid;
    }
    get value() {
        return Object.assign(Object.assign({}, this._data), this.formGroup.value);
    }
}
FormPlusComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FormPlusComponent, deps: [{ token: i1.FormBuilder }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
FormPlusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: FormPlusComponent, selector: "d-form-plus", inputs: { data: "data", layout: "layout", items: "items", loading: "loading", readonly: "readonly", validateRules: "validateRules", height: "height", maxHeight: "maxHeight" }, outputs: { initialized: "initialized", fieldDataChanged: "fieldDataChanged", formSubmit: "formSubmit" }, queries: [{ propertyName: "itemDefinitions", predicate: TemplateDirective }, { propertyName: "fields", predicate: FormField }], viewQueries: [{ propertyName: "devuiForm", first: true, predicate: FormDirective, descendants: true }], ngImport: i0, template: "<form\r\n    dForm\r\n    ngForm\r\n    cdkScrollable\r\n    labelAlign=\"start\"\r\n    labelSize=\"sm\"\r\n    dLoading\r\n    [formGroup]=\"formGroup\"\r\n    [dValidateRules]=\"validateRules\"\r\n    [showLoading]=\"loading\"\r\n    [layout]=\"layoutDirection\"\r\n    [style.height]=\"height\"\r\n    [style.max-height]=\"maxHeight\"\r\n    (dSubmit)=\"submit($event)\"\r\n>\r\n    <d-form-plus-item\r\n        *ngFor=\"let item of items\"\r\n        [field]=\"item.field\"\r\n        [helpText]=\"item.helpText || ''\"\r\n        [label]=\"item.label\"\r\n        [option]=\"item.options\"\r\n        [dataType]=\"item.dataType\"\r\n        [required]=\"item.required || false\"\r\n        [validateRules]=\"item.validateRules || []\"\r\n        [showLabel]=\"item.showLabel || true\"\r\n        [template]=\"item.template\"\r\n        [disabled]=\"item.disabled\"\r\n    >\r\n        <ng-container *ngIf=\"item.template\">\r\n            <ng-container\r\n                [ngTemplateOutletContext]=\"{ $implicit: { item: item } }\"\r\n                [ngTemplateOutlet]=\"templates[item.template || ''] || defaultItemTemplate\"\r\n            >\r\n            </ng-container>\r\n            <ng-template #defaultItemTemplate>\r\n                <span>formTmpl:{{ item.template }}</span>\r\n            </ng-template>\r\n        </ng-container>\r\n    </d-form-plus-item>\r\n    <ng-content></ng-content>\r\n</form>\r\n", styles: ["form{padding:0 1rem;overflow:auto;max-height:60vh}\n"], components: [{ type: FormPlusItemComponent, selector: "d-form-plus-item", inputs: ["showLabel", "label", "field", "dataType", "helpText", "option", "required", "disabled", "template", "validateRules"] }], directives: [{ type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.DFormGroupRuleDirective, selector: "[dValidateRules][formGroupName],[dValidateRules][formArrayName],[dValidateRules][ngModelGroup],          [dValidateRules][formGroup],[dValidateRules]form:not([ngNoForm]),[dValidateRules][ngForm]", inputs: ["dValidateRules"], outputs: ["dRulesStatusChange"], exportAs: ["dValidateRules"] }, { type: i2.FormDirective, selector: "[dForm]", inputs: ["layout", "labelSize", "labelAlign", "dFeedbackType", "dHasFeedback"], outputs: ["dSubmit"], exportAs: ["dForm"] }, { type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { type: i2.LoadingDirective, selector: "[dLoading]", inputs: ["message", "backdrop", "loadingTemplateRef", "positionType", "view", "showLoading", "loading", "zIndex"], exportAs: ["dLoading"] }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FormPlusComponent, decorators: [{
            type: Component,
            args: [{ selector: 'd-form-plus', styles: [
                        `
            form {
                padding: 0 1rem;
                overflow: auto;
                max-height: 60vh;
            }
        `,
                    ], template: "<form\r\n    dForm\r\n    ngForm\r\n    cdkScrollable\r\n    labelAlign=\"start\"\r\n    labelSize=\"sm\"\r\n    dLoading\r\n    [formGroup]=\"formGroup\"\r\n    [dValidateRules]=\"validateRules\"\r\n    [showLoading]=\"loading\"\r\n    [layout]=\"layoutDirection\"\r\n    [style.height]=\"height\"\r\n    [style.max-height]=\"maxHeight\"\r\n    (dSubmit)=\"submit($event)\"\r\n>\r\n    <d-form-plus-item\r\n        *ngFor=\"let item of items\"\r\n        [field]=\"item.field\"\r\n        [helpText]=\"item.helpText || ''\"\r\n        [label]=\"item.label\"\r\n        [option]=\"item.options\"\r\n        [dataType]=\"item.dataType\"\r\n        [required]=\"item.required || false\"\r\n        [validateRules]=\"item.validateRules || []\"\r\n        [showLabel]=\"item.showLabel || true\"\r\n        [template]=\"item.template\"\r\n        [disabled]=\"item.disabled\"\r\n    >\r\n        <ng-container *ngIf=\"item.template\">\r\n            <ng-container\r\n                [ngTemplateOutletContext]=\"{ $implicit: { item: item } }\"\r\n                [ngTemplateOutlet]=\"templates[item.template || ''] || defaultItemTemplate\"\r\n            >\r\n            </ng-container>\r\n            <ng-template #defaultItemTemplate>\r\n                <span>formTmpl:{{ item.template }}</span>\r\n            </ng-template>\r\n        </ng-container>\r\n    </d-form-plus-item>\r\n    <ng-content></ng-content>\r\n</form>\r\n" }]
        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
                type: Input
            }], layout: [{
                type: Input
            }], items: [{
                type: Input
            }], loading: [{
                type: Input
            }], readonly: [{
                type: Input
            }], validateRules: [{
                type: Input
            }], height: [{
                type: Input
            }], maxHeight: [{
                type: Input
            }], initialized: [{
                type: Output
            }], fieldDataChanged: [{
                type: Output
            }], formSubmit: [{
                type: Output
            }], devuiForm: [{
                type: ViewChild,
                args: [FormDirective]
            }], itemDefinitions: [{
                type: ContentChildren,
                args: [TemplateDirective]
            }], fields: [{
                type: ContentChildren,
                args: [FormField]
            }] } });

class FormPlusModule {
}
FormPlusModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FormPlusModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
FormPlusModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FormPlusModule, declarations: [FormPlusComponent, FormPlusItemComponent, FormGroupComponent], imports: [CommonModule,
        FormsModule,
        FormModule,
        LoadingModule,
        ReactiveFormsModule,
        CdkScrollableModule,
        RadioPlusModule,
        SelectPlusModule,
        InputNumberModule,
        RadioPlusModule,
        ToggleModule,
        SelectPlusModule], exports: [FormPlusComponent, FormPlusItemComponent, FormGroupComponent] });
FormPlusModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FormPlusModule, imports: [[
            CommonModule,
            FormsModule,
            FormModule,
            LoadingModule,
            ReactiveFormsModule,
            CdkScrollableModule,
            RadioPlusModule,
            SelectPlusModule,
            InputNumberModule,
            RadioPlusModule,
            ToggleModule,
            SelectPlusModule,
        ]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FormPlusModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [FormPlusComponent, FormPlusItemComponent, FormGroupComponent],
                    imports: [
                        CommonModule,
                        FormsModule,
                        FormModule,
                        LoadingModule,
                        ReactiveFormsModule,
                        CdkScrollableModule,
                        RadioPlusModule,
                        SelectPlusModule,
                        InputNumberModule,
                        RadioPlusModule,
                        ToggleModule,
                        SelectPlusModule,
                    ],
                    exports: [FormPlusComponent, FormPlusItemComponent, FormGroupComponent],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { FormGroupComponent, FormPlusComponent, FormPlusItemComponent, FormPlusModule };
//# sourceMappingURL=c-standard-angular-devui-extension-form.mjs.map