@progress/kendo-angular-dateinputs 21.4.0-develop.1 → 21.4.0-develop.10

package/datetimepicker/datetimepicker.component.d.ts

@@ -541,6 +541,7 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
     private get dateTabButton();
     private get timeTabButton();
     private get todayButton();
+    private get popupClasses();
     /**
      * @hidden
      */

package/esm2022/datepicker/datepicker.component.mjs

@@ -7,7 +7,7 @@ import { NG_VALUE_ACCESSOR, NG_VALIDATORS, NgControl } from '@angular/forms';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { cloneDate } from '@progress/kendo-date-math';
-import { hasObservers, isControlRequired, KendoInput, Keys, MultiTabStop, ResizeSensorComponent, EventsOutsideAngularDirective, normalizeKeys } from '@progress/kendo-angular-common';
+import { hasObservers, isControlRequired, KendoInput, Keys, MultiTabStop, ResizeSensorComponent, EventsOutsideAngularDirective, normalizeKeys, parseCSSClassNames } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { MIN_DATE, MAX_DATE } from '../defaults';
@@ -869,10 +869,15 @@ export class DatePickerComponent extends MultiTabStop {
      * @hidden
      */
     get popupClasses() {
-        return [
-            'k-datepicker-popup',
-            'k-calendar-container'
-        ].concat(this.popupSettings.popupClass || []);
+        const popupClasses = ['k-datepicker-popup', 'k-calendar-container'];
+        if (!this.popupSettings.popupClass) {
+            return popupClasses;
+        }
+        const customClasses = parseCSSClassNames(this.popupSettings.popupClass);
+        if (customClasses?.length) {
+            popupClasses.push(...customClasses);
+        }
+        return popupClasses;
     }
     /**
      * @hidden

package/esm2022/datetimepicker/datetimepicker.component.mjs

@@ -9,7 +9,7 @@ import { tap } from 'rxjs/operators';
 import { cloneDate, isEqual, getDate } from '@progress/kendo-date-math';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { IntlService } from '@progress/kendo-angular-intl';
-import { hasObservers, isControlRequired, KendoInput, Keys, MultiTabStop, ResizeSensorComponent, EventsOutsideAngularDirective, normalizeKeys } from '@progress/kendo-angular-common';
+import { hasObservers, isControlRequired, KendoInput, Keys, MultiTabStop, ResizeSensorComponent, EventsOutsideAngularDirective, normalizeKeys, parseCSSClassNames } from '@progress/kendo-angular-common';
 import { AdaptiveService } from '@progress/kendo-angular-utils';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -745,6 +745,17 @@ export class DateTimePickerComponent extends MultiTabStop {
             return this.popupRef?.popup.instance.container.nativeElement.querySelector(TODAY_BUTTON_SELECTOR);
         }
     }
+    get popupClasses() {
+        const classes = ['k-datetime-container', 'k-datetimepicker-popup'];
+        if (!this.popupSettings.popupClass) {
+            return classes;
+        }
+        const parsedPopupClasses = parseCSSClassNames(this.popupSettings.popupClass);
+        if (parsedPopupClasses?.length) {
+            classes.push(...parsedPopupClasses);
+        }
+        return classes;
+    }
     /**
      * @hidden
      */
@@ -1364,7 +1375,7 @@ export class DateTimePickerComponent extends MultiTabStop {
             positionMode: appendToComponent ? 'fixed' : 'absolute',
             animate: this.popupSettings.animate,
             appendTo: this.appendTo,
-            popupClass: `k-datetime-container k-datetimepicker-popup ${this.popupSettings.popupClass || ''}`,
+            popupClass: this.popupClasses,
             anchorAlign: { vertical: 'bottom', horizontal: direction },
             popupAlign: { vertical: 'top', horizontal: direction }
         });

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1765536291,
-    version: '21.4.0-develop.1',
+    publishDate: 1766140329,
+    version: '21.4.0-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2022/timepicker/timepicker.component.mjs

@@ -7,7 +7,7 @@ import { NG_VALUE_ACCESSOR, NG_VALIDATORS, NgControl } from '@angular/forms';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { cloneDate, isEqual } from '@progress/kendo-date-math';
-import { hasObservers, isControlRequired, KendoInput, Keys, MultiTabStop, ResizeSensorComponent, EventsOutsideAngularDirective, normalizeKeys } from '@progress/kendo-angular-common';
+import { hasObservers, isControlRequired, KendoInput, Keys, MultiTabStop, ResizeSensorComponent, EventsOutsideAngularDirective, normalizeKeys, parseCSSClassNames } from '@progress/kendo-angular-common';
 import { AdaptiveService } from '@progress/kendo-angular-utils';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
@@ -760,9 +760,15 @@ export class TimePickerComponent extends MultiTabStop {
      * @hidden
      */
     get popupClasses() {
-        return [
-            'k-timepicker-popup'
-        ].concat(this.popupSettings.popupClass || []);
+        const popupClasses = ['k-timepicker-popup'];
+        if (!this.popupSettings.popupClass) {
+            return popupClasses;
+        }
+        const customClasses = parseCSSClassNames(this.popupSettings.popupClass);
+        if (customClasses?.length) {
+            popupClasses.push(...customClasses);
+        }
+        return popupClasses;
     }
     /**
      * @hidden

package/fesm2022/progress-kendo-angular-dateinputs.mjs

@@ -9,7 +9,7 @@ import * as i1$1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX, RTL } from '@progress/kendo-angular-l10n';
 import { cloneDate, MS_PER_HOUR, MS_PER_MINUTE, addDays, getDate, isEqual, addDecades, addCenturies, firstDecadeOfCentury, lastDecadeOfCentury, lastYearOfDecade, firstYearOfDecade, createDate, lastMonthOfYear, lastDayOfMonth, durationInCenturies, addYears, durationInDecades, addWeeks, addMonths, firstDayOfMonth, dayOfWeek, durationInMonths, firstMonthOfYear, durationInYears, weekInYear } from '@progress/kendo-date-math';
 import * as i19 from '@progress/kendo-angular-common';
-import { normalizeKeys, Keys, isDocumentAvailable, EventsOutsideAngularDirective, guid, hasObservers, isObject, KendoInput, ResizeSensorComponent, isObjectPresent, removeHTMLAttributes, parseAttributes, anyChanged, isControlRequired, setHTMLAttributes, MultiTabStop, ToggleButtonTabStopDirective, ResizeBatchService, KENDO_TOGGLEBUTTONTABSTOP } from '@progress/kendo-angular-common';
+import { normalizeKeys, Keys, isDocumentAvailable, EventsOutsideAngularDirective, guid, hasObservers, isObject, KendoInput, ResizeSensorComponent, isObjectPresent, removeHTMLAttributes, parseAttributes, anyChanged, isControlRequired, setHTMLAttributes, MultiTabStop, parseCSSClassNames, ToggleButtonTabStopDirective, ResizeBatchService, KENDO_TOGGLEBUTTONTABSTOP } from '@progress/kendo-angular-common';
 export { ToggleButtonTabStopDirective } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i1 from '@progress/kendo-angular-intl';
@@ -36,8 +36,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1765536291,
-    version: '21.4.0-develop.1',
+    publishDate: 1766140329,
+    version: '21.4.0-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -10753,10 +10753,15 @@ class DatePickerComponent extends MultiTabStop {
      * @hidden
      */
     get popupClasses() {
-        return [
-            'k-datepicker-popup',
-            'k-calendar-container'
-        ].concat(this.popupSettings.popupClass || []);
+        const popupClasses = ['k-datepicker-popup', 'k-calendar-container'];
+        if (!this.popupSettings.popupClass) {
+            return popupClasses;
+        }
+        const customClasses = parseCSSClassNames(this.popupSettings.popupClass);
+        if (customClasses?.length) {
+            popupClasses.push(...customClasses);
+        }
+        return popupClasses;
     }
     /**
      * @hidden
@@ -14443,9 +14448,15 @@ class TimePickerComponent extends MultiTabStop {
      * @hidden
      */
     get popupClasses() {
-        return [
-            'k-timepicker-popup'
-        ].concat(this.popupSettings.popupClass || []);
+        const popupClasses = ['k-timepicker-popup'];
+        if (!this.popupSettings.popupClass) {
+            return popupClasses;
+        }
+        const customClasses = parseCSSClassNames(this.popupSettings.popupClass);
+        if (customClasses?.length) {
+            popupClasses.push(...customClasses);
+        }
+        return popupClasses;
     }
     /**
      * @hidden
@@ -16143,6 +16154,17 @@ class DateTimePickerComponent extends MultiTabStop {
             return this.popupRef?.popup.instance.container.nativeElement.querySelector(TODAY_BUTTON_SELECTOR);
         }
     }
+    get popupClasses() {
+        const classes = ['k-datetime-container', 'k-datetimepicker-popup'];
+        if (!this.popupSettings.popupClass) {
+            return classes;
+        }
+        const parsedPopupClasses = parseCSSClassNames(this.popupSettings.popupClass);
+        if (parsedPopupClasses?.length) {
+            classes.push(...parsedPopupClasses);
+        }
+        return classes;
+    }
     /**
      * @hidden
      */
@@ -16762,7 +16784,7 @@ class DateTimePickerComponent extends MultiTabStop {
             positionMode: appendToComponent ? 'fixed' : 'absolute',
             animate: this.popupSettings.animate,
             appendTo: this.appendTo,
-            popupClass: `k-datetime-container k-datetimepicker-popup ${this.popupSettings.popupClass || ''}`,
+            popupClass: this.popupClasses,
             anchorAlign: { vertical: 'bottom', horizontal: direction },
             popupAlign: { vertical: 'top', horizontal: direction }
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-dateinputs",
-  "version": "21.4.0-develop.1",
+  "version": "21.4.0-develop.10",
   "description": "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).",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -79,7 +79,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1765536291,
+      "publishDate": 1766140329,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -90,19 +90,19 @@
     "@angular/forms": "18 - 21",
     "@angular/platform-browser": "18 - 21",
     "@progress/kendo-licensing": "^1.7.0",
-    "@progress/kendo-angular-buttons": "21.4.0-develop.1",
-    "@progress/kendo-angular-common": "21.4.0-develop.1",
-    "@progress/kendo-angular-utils": "21.4.0-develop.1",
-    "@progress/kendo-angular-intl": "21.4.0-develop.1",
-    "@progress/kendo-angular-l10n": "21.4.0-develop.1",
-    "@progress/kendo-angular-icons": "21.4.0-develop.1",
-    "@progress/kendo-angular-popup": "21.4.0-develop.1",
-    "@progress/kendo-angular-navigation": "21.4.0-develop.1",
+    "@progress/kendo-angular-buttons": "21.4.0-develop.10",
+    "@progress/kendo-angular-common": "21.4.0-develop.10",
+    "@progress/kendo-angular-utils": "21.4.0-develop.10",
+    "@progress/kendo-angular-intl": "21.4.0-develop.10",
+    "@progress/kendo-angular-l10n": "21.4.0-develop.10",
+    "@progress/kendo-angular-icons": "21.4.0-develop.10",
+    "@progress/kendo-angular-popup": "21.4.0-develop.10",
+    "@progress/kendo-angular-navigation": "21.4.0-develop.10",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "21.4.0-develop.1",
+    "@progress/kendo-angular-schematics": "21.4.0-develop.10",
     "@progress/kendo-common": "^1.0.1",
     "@progress/kendo-date-math": "^1.1.0",
     "@progress/kendo-dateinputs-common": "^0.4.7"

package/popup-settings.model.d.ts

@@ -24,5 +24,5 @@ export interface PopupSettings {
     /**
      * Specifies a list of CSS classes that are used for styling the popup.
      */
-    popupClass?: string;
+    popupClass?: string | Array<string> | object | Set<string>;
 }