@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
154 lines (153 loc) • 8.1 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { ReactiveFormsModule, FormGroup } from '@angular/forms';
import { NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
import { KENDO_BUTTON } from '@progress/kendo-angular-buttons';
import { cancelIcon, saveIcon } from '@progress/kendo-svg-icons';
import { FormFormFieldComponent } from './form-formfield.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "@progress/kendo-angular-buttons";
let idx = 0;
/**
* @hidden
*/
export class FormComponent {
controls = [];
set formSettings(value) {
this._formSettings = { ...this._formSettings, ...value };
}
get formSettings() {
return this._formSettings;
}
formGroup;
set actionButtons(value) {
if (typeof value === 'boolean') {
this.normalizeActionButtonSettings(value);
}
else {
this._actionButtons = value;
}
}
get actionButtons() {
return this._actionButtons;
}
formSubmit = new EventEmitter();
get componentIndex() {
return idx++;
}
_formSettings = {
orientation: 'vertical',
showErrors: true,
floatingLabels: false
};
defaultActionButtons = [{
actionType: 'submit',
text: 'Submit',
svgIcon: saveIcon,
icon: 'save',
themeColor: 'primary'
}, {
actionType: 'reset',
svgIcon: cancelIcon,
text: 'Reset',
icon: 'cancel'
}];
_actionButtons = this.defaultActionButtons;
ngOnInit() {
idx++;
}
normalizeActionButtonSettings(value) {
this._actionButtons = value ? this.defaultActionButtons : [];
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormComponent, isStandalone: true, selector: "kendo-grid-external-form", inputs: { controls: "controls", formSettings: "formSettings", formGroup: "formGroup", actionButtons: "actionButtons" }, outputs: { formSubmit: "formSubmit" }, ngImport: i0, template: `
<div role="form"
class="k-form k-form-md"
[]="formSettings.orientation === 'horizontal'"
[]="formGroup"
(ngSubmit)="formSubmit.next({originalEvent: $event, formGroup})"
(reset)="$event.preventDefault()">
<ng-container *ngFor="let control of controls; let idx = index;">
<ng-container *ngIf="!control.template; else template">
<kendo-form-formfield
[]="control"
[]="formSettings.showErrors"
[]="formSettings.floatingLabels"></kendo-form-formfield>
</ng-container>
<ng-template
<ng-container
[]="control.template"
[]="control.templateContext"></ng-container>
</ng-template>
</ng-container>
<div class="k-form-buttons" *ngIf="$any(actionButtons).length">
<button kendoButton *ngFor="let button of $any(actionButtons)"
[]="button.actionType === 'submit'"
[]="button.size"
[]="button.themeColor || button.actionType === 'submit' ? 'primary' : undefined"
[]="button.rounded"
[]="button.actionType"
[]="button.svgIcon"
[]="button.icon">
{{button.text}}
</button>
</div>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormFormFieldComponent, selector: "kendo-form-formfield", inputs: ["control", "floatingLabel", "showError"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-grid-external-form',
standalone: true,
template: `
<div role="form"
class="k-form k-form-md"
[]="formSettings.orientation === 'horizontal'"
[]="formGroup"
(ngSubmit)="formSubmit.next({originalEvent: $event, formGroup})"
(reset)="$event.preventDefault()">
<ng-container *ngFor="let control of controls; let idx = index;">
<ng-container *ngIf="!control.template; else template">
<kendo-form-formfield
[]="control"
[]="formSettings.showErrors"
[]="formSettings.floatingLabels"></kendo-form-formfield>
</ng-container>
<ng-template
<ng-container
[]="control.template"
[]="control.templateContext"></ng-container>
</ng-template>
</ng-container>
<div class="k-form-buttons" *ngIf="$any(actionButtons).length">
<button kendoButton *ngFor="let button of $any(actionButtons)"
[]="button.actionType === 'submit'"
[]="button.size"
[]="button.themeColor || button.actionType === 'submit' ? 'primary' : undefined"
[]="button.rounded"
[]="button.actionType"
[]="button.svgIcon"
[]="button.icon">
{{button.text}}
</button>
</div>
</div>
`,
imports: [NgFor, NgIf, NgTemplateOutlet, ReactiveFormsModule, FormFormFieldComponent, KENDO_BUTTON],
}]
}], propDecorators: { controls: [{
type: Input
}], formSettings: [{
type: Input
}], formGroup: [{
type: Input
}], actionButtons: [{
type: Input
}], formSubmit: [{
type: Output
}] } });