@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).
127 lines (126 loc) • 6.02 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('04:08:48:49 AM', 'k-title k-timeselector-title'),
div('now', 'k-button k-button-md')
], 'k-time-header'),
div([
span('', 'k-time-highlight'),
div([listTitle(), div([scrollable()], 'k-time-list')], 'k-time-list-wrapper'),
], 'k-time-list-container'),
], '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-actionsheet-title'),
div([
div([
div([div('', 'k-i-check k-button-icon k-icon k-font-icon')], 'k-icon-wrapper-host'),
], 'k-button k-icon-button k-button-lg'),
], 'k-actionsheet-actions'),
], 'k-actionsheet-titlebar-group')], '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-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer'),
], 'k-actionsheet-view'),
], `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();
}
sumCSSProperties(style, ...properties) {
return properties.reduce((sum, property) => sum + parseFloat(style.getPropertyValue(property)), 0) || 0;
}
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));
}
const itemStyle = getComputedStyle(wrapper.querySelector('li'));
const listStyle = getComputedStyle(wrapper.querySelector('.k-scrollable'));
if (this.isAdaptiveEnabled && this.windowSize !== 'large') {
this.itemHeight = parseFloat(itemStyle.getPropertyValue('height'));
}
else {
if (itemStyle['box-sizing'] === 'border-box') {
this.itemHeight = parseFloat(itemStyle.getPropertyValue('height'));
}
else {
this.itemHeight = this.sumCSSProperties(itemStyle, 'height', 'padding-top', 'padding-bottom');
}
}
this.timeListHeight = parseFloat(listStyle.getPropertyValue('height'));
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: "18.2.14", ngImport: i0, type: TimePickerDOMService, deps: [{ token: i1.AdaptiveService }], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimePickerDOMService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimePickerDOMService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [{ type: i1.AdaptiveService }] });