@progress/kendo-angular-dateinputs
Version:
Kendo UI for Angular Date Inputs Package - Everything you need to add date selection functionality to apps (DatePicker, TimePicker, DateInput, DateRangePicker, DateTimePicker, Calendar, and MultiViewCalendar).
96 lines (95 loc) • 4.71 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 { Injectable } from '@angular/core';
import { isDocumentAvailable } from '@progress/kendo-angular-common';
import { domContainerFactory as containerFactory } from '../../util';
import { AdaptiveService } from '@progress/kendo-angular-utils';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-utils";
const div = containerFactory('div');
const ul = containerFactory('ul');
const li = containerFactory('li');
const span = containerFactory('span');
const listTitle = () => span('hour', 'k-title k-timeselector-title');
const listItem = () => li('<span>02</span>', 'k-item');
const list = () => ul([listItem()], 'k-reset');
const scrollable = () => (div([list()], 'k-time-container k-flex k-content k-scrollable'));
const actionSheetContent = (isDateTimePicker) => ([
isDateTimePicker ? div([div('button', 'k-button k-button-lg')], 'k-datetime-buttongroup') : null,
div([
div([span('title', 'k-title')], 'k-time-header'),
div([listTitle(), div([scrollable()], 'k-time-list')], 'k-time-list-wrapper')
], 'k-timeselector k-timeselector-lg')
]);
const timeListWrapper = (isAdaptiveEnabled = false, windowSize, isDateTimePicker) => {
if (!isDocumentAvailable()) {
return null;
}
if (!isAdaptiveEnabled) {
return div([listTitle(), div([scrollable()], 'k-time-list')], 'k-time-list-wrapper', { left: '-10000px', position: 'absolute' });
}
return div([div([div([div([div([], 'k-i-x k-button-icon k-icon')], 'k-icon-wrapper-host')], 'k-button k-icon-button k-button-lg')], 'k-actionsheet-titlebar'),
div([
isDateTimePicker ? div([...actionSheetContent(isDateTimePicker)], 'k-datetime-wrap k-time-tab') : actionSheetContent(isDateTimePicker)[1]
], 'k-actionsheet-content'),
div([
div('button', 'k-button k-button-lg')
], 'k-adaptive-actionsheet k-actionsheet-footer')], `k-actionsheet k-adaptive-actionsheet ${windowSize === 'small' ? 'k-actionsheet-fullscreen' : ''}`, { height: windowSize === 'small' ? '100%' : '60vh', left: '-10000px', position: 'absolute', top: 0 });
};
/**
* @hidden
*/
export class TimePickerDOMService {
adaptiveService;
constructor(adaptiveService) {
this.adaptiveService = adaptiveService;
}
itemHeight;
timeListHeight;
isAdaptiveEnabled;
isDateTimePicker;
get windowSize() {
return this.adaptiveService.size;
}
ensureHeights() {
if (this.timeListHeight !== undefined) {
return;
}
this.calculateHeights();
}
calculateHeights(container) {
if (!isDocumentAvailable()) {
return;
}
let wrapper;
let hostContainer;
if (!this.isAdaptiveEnabled || this.windowSize === 'large') { // not adaptive
const listContainer = container && container.querySelector('.k-time-list-container');
hostContainer = listContainer || document.body;
wrapper = hostContainer.appendChild(timeListWrapper());
}
else { // adaptive mode
hostContainer = document.body;
wrapper = hostContainer.appendChild(timeListWrapper(true, this.windowSize, this.isDateTimePicker));
}
this.timeListHeight = wrapper.querySelector('.k-scrollable').offsetHeight;
this.itemHeight = wrapper.querySelector('li').offsetHeight;
hostContainer.removeChild(wrapper);
}
isActive(element) {
if (!isDocumentAvailable() || !element) {
return false;
}
return (element.nativeElement || element) === document.activeElement;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimePickerDOMService, deps: [{ token: i1.AdaptiveService }], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimePickerDOMService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimePickerDOMService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return [{ type: i1.AdaptiveService }]; } });