@progress/kendo-angular-scheduler
Version:
Kendo UI Scheduler Angular - Outlook or Google-style angular scheduler calendar. Full-featured and customizable embedded scheduling from the creator developers trust for professional UI components.
194 lines (193 loc) • 7.75 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 { Injector, ViewChild } from '@angular/core';
import { Component, forwardRef, Input, EventEmitter, Output } from '@angular/core';
import { NG_VALUE_ACCESSOR, NgControl, ReactiveFormsModule } from '@angular/forms';
import { timezoneNames } from '@progress/kendo-date-math';
import { ComboBoxComponent } from '@progress/kendo-angular-dropdowns';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
/**
* @hidden
*/
export const TIME_ZONE_VALUE_ACCESSOR = {
multi: true,
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TimeZoneEditorComponent)
};
/**
* Represents the Kendo UI TimeZone Editor component for Angular.
*
* Displays a ComboBox for selecting time zone names, used for editing the `start` and `end` time zones of Scheduler events.
*
* @example
* ```html
* <kendo-scheduler>
* <ng-template kendoSchedulerEditDialogTemplate>
* <div> Select Time Zone:
* <kendo-timezone-editor></kendo-timezone-editor>
* </div>
* </ng-template>
* </kendo-scheduler>
*/
export class TimeZoneEditorComponent {
injector;
tzComboBox;
tzComboBoxControl;
/**
* Specifies the width of the ComboBox that contains the names of the timezones.
* @default 260
*/
width = 260;
/**
* Fires when the value of the component has changed.
*/
valueChange = new EventEmitter();
/**
* @hidden
*/
get focusableId() {
return this.tzComboBox?.focusableId || this.tzComboBoxControl?.focusableId;
}
/**
* @hidden
*/
get formControl() {
const ngControl = this.injector.get(NgControl, null);
return ngControl?.control || null;
}
tz;
tzNames;
tzSource;
constructor(injector) {
this.injector = injector;
this.tzNames = timezoneNames();
this.tzSource = this.tzNames.slice();
}
/**
* @hidden
*/
onTimeZoneChange(tzName) {
this.tz = tzName;
this.onChangeCallback(this.tz);
this.valueChange.emit(tzName);
}
/**
* @hidden
*/
onTimeZoneFilterChange(value) {
this.tzSource = this.tzNames.filter((tz) => tz.toLowerCase().indexOf(value.toLowerCase()) !== -1);
}
/**
* @hidden
*/
writeValue(value) {
if (typeof value === 'string' && this.tzNames.indexOf(value) >= 0) {
this.tz = value;
}
}
/**
* @hidden
*/
focus() {
this.tzComboBox ? this.tzComboBox.focus() : this.tzComboBoxControl.focus();
}
onTouchedCallback = (_) => { };
onChangeCallback = (_) => { };
/**
* @hidden
*/
registerOnChange(fn) {
this.onChangeCallback = fn;
}
/**
* @hidden
*/
registerOnTouched(fn) {
this.onTouchedCallback = fn;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimeZoneEditorComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TimeZoneEditorComponent, isStandalone: true, selector: "kendo-timezone-editor", inputs: { width: "width" }, outputs: { valueChange: "valueChange" }, providers: [
TIME_ZONE_VALUE_ACCESSOR
], viewQueries: [{ propertyName: "tzComboBox", first: true, predicate: ["tzcombobox"], descendants: true, static: true }, { propertyName: "tzComboBoxControl", first: true, predicate: ["tzcomboboxControl"], descendants: true, static: true }], ngImport: i0, template: `
@if (!formControl) {
<kendo-combobox
#tzcombobox
[style.width.px]="width"
[allowCustom]="false"
[data]="tzSource"
[filterable]="true"
[suggest]="true"
[value]="tz"
(filterChange)="onTimeZoneFilterChange($event)"
(valueChange)="onTimeZoneChange($event)">
</kendo-combobox>
}
@if (formControl) {
<kendo-combobox
#tzcomboboxControl
[style.width.px]="width"
[allowCustom]="false"
[data]="tzSource"
[filterable]="true"
[suggest]="true"
[value]="tz"
[formControl]="formControl"
(filterChange)="onTimeZoneFilterChange($event)"
(valueChange)="onTimeZoneChange($event)">
</kendo-combobox>
}
`, isInline: true, dependencies: [{ kind: "component", type: ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "escape"], exportAs: ["kendoComboBox"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimeZoneEditorComponent, decorators: [{
type: Component,
args: [{
providers: [
TIME_ZONE_VALUE_ACCESSOR
],
selector: 'kendo-timezone-editor',
template: `
@if (!formControl) {
<kendo-combobox
#tzcombobox
[style.width.px]="width"
[allowCustom]="false"
[data]="tzSource"
[filterable]="true"
[suggest]="true"
[value]="tz"
(filterChange)="onTimeZoneFilterChange($event)"
(valueChange)="onTimeZoneChange($event)">
</kendo-combobox>
}
@if (formControl) {
<kendo-combobox
#tzcomboboxControl
[style.width.px]="width"
[allowCustom]="false"
[data]="tzSource"
[filterable]="true"
[suggest]="true"
[value]="tz"
[formControl]="formControl"
(filterChange)="onTimeZoneFilterChange($event)"
(valueChange)="onTimeZoneChange($event)">
</kendo-combobox>
}
`,
standalone: true,
imports: [ComboBoxComponent, ReactiveFormsModule]
}]
}], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { tzComboBox: [{
type: ViewChild,
args: ['tzcombobox', { static: true }]
}], tzComboBoxControl: [{
type: ViewChild,
args: ['tzcomboboxControl', { static: true }]
}], width: [{
type: Input
}], valueChange: [{
type: Output
}] } });