@progress/kendo-angular-inputs
Version:
Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, Te
81 lines (80 loc) • 3.91 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, ElementRef, HostBinding, Input, Renderer2 } from '@angular/core';
import { validatePackage } from '@progress/kendo-licensing';
import { packageMetadata } from '../package-metadata';
import { calculateColSpan, generateColSpanClass } from './utils';
import { Subscription } from 'rxjs';
import { FormService } from '../common/formservice.service';
import { filter } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "../common/formservice.service";
/**
* Represents the Kendo UI Form Separator component for Angular.
*/
export class FormSeparatorComponent {
renderer;
hostElement;
formService;
hostClass = true;
/**
* Defines the colspan for the separator element related to the parent Form component columns.
* Can be a number or an array of responsive breakpoints.
*/
colSpan;
_formWidth = null;
_colSpanClass = null;
_previousColSpan = null;
subscriptions = new Subscription();
constructor(renderer, hostElement, formService) {
this.renderer = renderer;
this.hostElement = hostElement;
this.formService = formService;
validatePackage(packageMetadata);
this.subscriptions.add(this.formService.formWidth.pipe(filter((width) => width !== null)).subscribe((width) => {
this._formWidth = width;
this.updateColSpanClass();
}));
}
ngOnChanges(changes) {
if (changes['colSpan']) {
this.updateColSpanClass();
}
}
ngOnDestroy() {
this.subscriptions.unsubscribe();
}
updateColSpanClass() {
const hostElement = this.hostElement.nativeElement;
const newColSpan = calculateColSpan(this.colSpan, this._formWidth);
if (newColSpan !== this._previousColSpan) {
const newClass = generateColSpanClass(newColSpan);
if (this._colSpanClass) {
this.renderer.removeClass(hostElement, this._colSpanClass);
}
if (newClass) {
this.renderer.addClass(hostElement, newClass);
}
this._colSpanClass = newClass;
this._previousColSpan = newColSpan;
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormSeparatorComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.FormService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormSeparatorComponent, isStandalone: true, selector: "kendo-form-separator", inputs: { colSpan: "colSpan" }, host: { properties: { "class.k-form-separator": "this.hostClass" } }, exportAs: ["kendoFormSeparator"], usesOnChanges: true, ngImport: i0, template: ``, isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormSeparatorComponent, decorators: [{
type: Component,
args: [{
exportAs: 'kendoFormSeparator',
selector: 'kendo-form-separator',
template: ``,
standalone: true,
}]
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.FormService }]; }, propDecorators: { hostClass: [{
type: HostBinding,
args: ['class.k-form-separator']
}], colSpan: [{
type: Input
}] } });