@progress/kendo-angular-dateinputs 19.0.0-develop.3 → 19.0.0-develop.30

package/esm2022/daterange/date-range-popup.component.mjs

@@ -199,18 +199,12 @@ export class DateRangePopupComponent {
      * Sets the title of the input element of the DateRangePopup and the title text rendered
      * in the header of the popup(action sheet). Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
      */
-    title = "";
+    adaptiveTitle = "";
     /**
      * Sets the subtitle text rendered in the header of the popup(action sheet).
      * Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
      */
-    set subtitle(subtitle) {
-        this._subtitle = subtitle;
-    }
-    get subtitle() {
-        return this._subtitle;
-    }
-    _subtitle;
+    adaptiveSubtitle = "";
     /**
      * @hidden
      *
@@ -299,6 +293,10 @@ export class DateRangePopupComponent {
      * @hidden
      */
     checkIcon = checkIcon;
+    /**
+     * @hidden
+     */
+    windowSize;
     /**
      * Gets or sets the visibility state of the component.
      */
@@ -321,6 +319,13 @@ export class DateRangePopupComponent {
     get show() {
         return this._show;
     }
+    /**
+     * @hidden
+     */
+    handleAccept() {
+        this.dateRangeService.setRange(this._rangeSelection);
+        this.show = false;
+    }
     activateSubscription;
     blurSubscription;
     focusSubscription;
@@ -332,7 +337,6 @@ export class DateRangePopupComponent {
     _calendar;
     _show;
     _rangeSelection;
-    windowSize;
     constructor(popupService, dateRangeService, zone, renderer, localization, cdr, rtl, adaptiveService) {
         this.popupService = popupService;
         this.dateRangeService = dateRangeService;
@@ -375,11 +379,6 @@ export class DateRangePopupComponent {
         if (isWindowAvailable()) {
             this.zone.runOutsideAngular(() => this.windowBlurSubscription = fromEvent(window, 'blur').subscribe(this.handleWindowBlur.bind(this)));
         }
-        if (this.actionSheet && isDocumentAvailable()) {
-            // The following syntax is used as it does not violate CSP compliance
-            this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-height', '60vh');
-            this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-max-height', 'none');
-        }
     }
     ngOnDestroy() {
         this.destroyPopup();
@@ -467,13 +466,6 @@ export class DateRangePopupComponent {
         this.show = false;
         this.cancel.emit();
     }
-    /**
-     * @hidden
-     */
-    handleAccept() {
-        this.dateRangeService.setRange(this._rangeSelection);
-        this.show = false;
-    }
     /**
      * @hidden
      */
@@ -623,7 +615,6 @@ export class DateRangePopupComponent {
         }
         if (show && !this.actionSheet.expanded) {
             this.actionSheet.toggle();
-            this.updateActionSheetAdaptiveAppearance();
             this.renderer.setAttribute(this.actionSheet.element.nativeElement, 'id', this.popupUID);
         }
         else if (!show && this.actionSheet.expanded) {
@@ -631,32 +622,13 @@ export class DateRangePopupComponent {
         }
         this._show = show;
     }
-    updateActionSheetAdaptiveAppearance() {
-        let element;
-        let animationContainer;
-        if (this.actionSheet) {
-            element = this.actionSheet['element'].nativeElement.querySelector('.k-actionsheet');
-            animationContainer = this.actionSheet['element'].nativeElement.querySelector('.k-child-animation-container');
-            if (this.windowSize === 'medium') {
-                this.renderer.removeClass(element, 'k-actionsheet-fullscreen');
-                this.renderer.removeStyle(animationContainer, 'height');
-            }
-            else if (this.windowSize === 'small') {
-                this.renderer.addClass(element, 'k-actionsheet-fullscreen');
-                this.renderer.setStyle(animationContainer, 'height', '100%');
-            }
-            this.renderer.addClass(element, 'k-adaptive-actionsheet');
-            this.renderer.addClass(element, 'k-actionsheet-bottom');
-            this.renderer.setStyle(animationContainer, 'bottom', '0px');
-        }
-    }
     addCalendarSubscription = (calendar) => {
         this.calendarSubscriptions.add(calendar.viewList.focusedCellChange.subscribe((id) => {
             this.dateRangeService.setActiveDescendent(id);
         }));
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateRangePopupComponent, deps: [{ token: i1.PopupService }, { token: i2.DateRangeService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i3.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: RTL, optional: true }, { token: i4.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateRangePopupComponent, isStandalone: true, selector: "kendo-daterange-popup", inputs: { showCalendarHeader: "showCalendarHeader", focusedDate: "focusedDate", disabledDates: "disabledDates", activeView: "activeView", bottomView: "bottomView", topView: "topView", min: "min", max: "max", allowReverse: "allowReverse", animateNavigation: "animateNavigation", disabled: "disabled", views: "views", weekNumber: "weekNumber", animate: "animate", anchor: "anchor", anchorAlign: "anchorAlign", showViewHeader: "showViewHeader", showOtherMonthDays: "showOtherMonthDays", appendTo: "appendTo", collision: "collision", popupAlign: "popupAlign", margin: "margin", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", size: "size" }, outputs: { open: "open", close: "close", onBlur: "blur", onFocus: "focus", cancel: "cancel" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateRangePopupComponent, isStandalone: true, selector: "kendo-daterange-popup", inputs: { showCalendarHeader: "showCalendarHeader", focusedDate: "focusedDate", disabledDates: "disabledDates", activeView: "activeView", bottomView: "bottomView", topView: "topView", min: "min", max: "max", allowReverse: "allowReverse", animateNavigation: "animateNavigation", disabled: "disabled", views: "views", weekNumber: "weekNumber", animate: "animate", anchor: "anchor", anchorAlign: "anchorAlign", showViewHeader: "showViewHeader", showOtherMonthDays: "showOtherMonthDays", appendTo: "appendTo", collision: "collision", popupAlign: "popupAlign", margin: "margin", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", size: "size" }, outputs: { open: "open", close: "close", onBlur: "blur", onFocus: "focus", cancel: "cancel" }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
@@ -675,6 +647,9 @@ export class DateRangePopupComponent {
 
             i18n-cancelLabel="kendo.daterangepopup.cancelLabel|The label for the Cancel button in the timepicker component"
             cancelLabel="Cancel changes"
+
+            i18n-adaptiveCloseButtonTitle="kendo.daterangepopup.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
+            adaptiveCloseButtonTitle="Close"
         >
         </ng-container> 
         <ng-container #container></ng-container>
@@ -710,6 +685,14 @@ export class DateRangePopupComponent {
             #actionSheet
             (overlayClick)="show=false"
             (collapse)="onBlur.emit()"
+            [cssClass]="{
+                'k-adaptive-actionsheet': true,
+                'k-actionsheet-fullscreen': windowSize === 'small',
+                'k-actionsheet-bottom': windowSize === 'medium'
+            }"
+            [cssStyle]="{
+                height: windowSize === 'small' ? '100vh' : '60vh'
+            }"
         >
             <ng-template kendoActionSheetTemplate>
                 <!-- Resize sensor needs to be inside the template because the date-range-popup
@@ -719,22 +702,23 @@ export class DateRangePopupComponent {
                 <div class="k-actionsheet-titlebar">
                     <div class="k-actionsheet-titlebar-group">
                         <div class="k-actionsheet-title">
-                            <div *ngIf="title"  class="k-text-center">{{ title }}</div>
-                            <div *ngIf="subtitle" class="k-actionsheet-subtitle k-text-center">{{ subtitle }}</div>
+                            <div class="k-text-center" *ngIf="adaptiveTitle">{{ adaptiveTitle }}</div>
+                            <div class="k-actionsheet-subtitle k-text-center" *ngIf="adaptiveSubtitle">{{ adaptiveSubtitle }}</div>
                         </div>
                         <div class="k-actionsheet-actions">
                             <button
                                 kendoButton
                                 type="button"
                                 icon="check"
-                                [attr.title]="localization.get('clearTitle')"
+                                [attr.title]="localization.get('adaptiveCloseButtonTitle')"
                                 [svgIcon]="checkIcon"
                                 fillMode="flat"
+                                themeColor="primary"
                                 [tabIndex]="-1"
                                 aria-hidden="true"
-                                themeColor="primary"
                                 size="large"
-                                (click)="show = false">
+                                innerCssClass="k-button-icon"
+                                (click)="handleAccept()">
                             </button>
                         </div>
                     </div>
@@ -763,12 +747,13 @@ export class DateRangePopupComponent {
                             [value]="dateRangeService.selectionRange"
                             selection="range"
                             (rangeSelectionChange)="onRangeSelectionChange($event)"
-                            >
+                        >
                         </kendo-multiviewcalendar>
                     </div>
                 </div>
                 <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
-                    <button kendoButton 
+                    <button kendoButton
+                        class="k-time-cancel"
                         type="button"
                         size="large"
                         [attr.title]="localization.get('cancelLabel')"
@@ -779,6 +764,7 @@ export class DateRangePopupComponent {
                     </button>
 
                     <button kendoButton
+                        class="k-time-accept"
                         type="button"
                         size="large"
                         themeColor="primary"
@@ -791,7 +777,7 @@ export class DateRangePopupComponent {
                 </div>
             </ng-template>
         </kendo-actionsheet>
-    `, isInline: true, dependencies: [{ kind: "directive", type: DateRangePopupLocalizedMessagesDirective, selector: "[kendoDateRangePopupLocalizedMessages]" }, { kind: "component", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["showOtherMonthDays", "showCalendarHeader", "size", "id", "focusedDate", "footer", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "weekDaysFormat", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "footerTemplate", "headerTitleTemplate", "headerTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "rangeSelectionChange", "blur", "focus", "focusCalendar", "onClosePopup", "onTabPress", "onShiftTabPress"], exportAs: ["kendo-multiviewcalendar"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: DateRangePopupLocalizedMessagesDirective, selector: "[kendoDateRangePopupLocalizedMessages]" }, { kind: "component", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["showOtherMonthDays", "showCalendarHeader", "size", "id", "focusedDate", "footer", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "weekDaysFormat", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "footerTemplate", "headerTitleTemplate", "headerTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "rangeSelectionChange", "blur", "focus", "focusCalendar", "onClosePopup", "onTabPress", "onShiftTabPress"], exportAs: ["kendo-multiviewcalendar"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateRangePopupComponent, decorators: [{
             type: Component,
@@ -818,6 +804,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
             i18n-cancelLabel="kendo.daterangepopup.cancelLabel|The label for the Cancel button in the timepicker component"
             cancelLabel="Cancel changes"
+
+            i18n-adaptiveCloseButtonTitle="kendo.daterangepopup.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
+            adaptiveCloseButtonTitle="Close"
         >
         </ng-container> 
         <ng-container #container></ng-container>
@@ -853,6 +842,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             #actionSheet
             (overlayClick)="show=false"
             (collapse)="onBlur.emit()"
+            [cssClass]="{
+                'k-adaptive-actionsheet': true,
+                'k-actionsheet-fullscreen': windowSize === 'small',
+                'k-actionsheet-bottom': windowSize === 'medium'
+            }"
+            [cssStyle]="{
+                height: windowSize === 'small' ? '100vh' : '60vh'
+            }"
         >
             <ng-template kendoActionSheetTemplate>
                 <!-- Resize sensor needs to be inside the template because the date-range-popup
@@ -862,22 +859,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 <div class="k-actionsheet-titlebar">
                     <div class="k-actionsheet-titlebar-group">
                         <div class="k-actionsheet-title">
-                            <div *ngIf="title"  class="k-text-center">{{ title }}</div>
-                            <div *ngIf="subtitle" class="k-actionsheet-subtitle k-text-center">{{ subtitle }}</div>
+                            <div class="k-text-center" *ngIf="adaptiveTitle">{{ adaptiveTitle }}</div>
+                            <div class="k-actionsheet-subtitle k-text-center" *ngIf="adaptiveSubtitle">{{ adaptiveSubtitle }}</div>
                         </div>
                         <div class="k-actionsheet-actions">
                             <button
                                 kendoButton
                                 type="button"
                                 icon="check"
-                                [attr.title]="localization.get('clearTitle')"
+                                [attr.title]="localization.get('adaptiveCloseButtonTitle')"
                                 [svgIcon]="checkIcon"
                                 fillMode="flat"
+                                themeColor="primary"
                                 [tabIndex]="-1"
                                 aria-hidden="true"
-                                themeColor="primary"
                                 size="large"
-                                (click)="show = false">
+                                innerCssClass="k-button-icon"
+                                (click)="handleAccept()">
                             </button>
                         </div>
                     </div>
@@ -906,12 +904,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             [value]="dateRangeService.selectionRange"
                             selection="range"
                             (rangeSelectionChange)="onRangeSelectionChange($event)"
-                            >
+                        >
                         </kendo-multiviewcalendar>
                     </div>
                 </div>
                 <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
-                    <button kendoButton 
+                    <button kendoButton
+                        class="k-time-cancel"
                         type="button"
                         size="large"
                         [attr.title]="localization.get('cancelLabel')"
@@ -922,6 +921,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     </button>
 
                     <button kendoButton
+                        class="k-time-accept"
                         type="button"
                         size="large"
                         themeColor="primary"
@@ -1010,9 +1010,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], adaptiveMode: [{
                 type: Input
-            }], title: [{
+            }], adaptiveTitle: [{
                 type: Input
-            }], subtitle: [{
+            }], adaptiveSubtitle: [{
                 type: Input
             }], size: [{
                 type: Input

package/esm2022/daterange/date-range.component.mjs

@@ -86,7 +86,7 @@ export class DateRangeComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateRangeComponent, isStandalone: true, selector: "kendo-daterange", inputs: { size: "size" }, host: { listeners: { "keydown": "keydown($event)" }, properties: { "class.k-daterangepicker": "this.wrapperClass" } }, providers: [DateRangeService], queries: [{ propertyName: "contentPopup", predicate: DateRangePopupComponent }], ngImport: i0, template: `
         <ng-content></ng-content>
         <kendo-daterange-popup *ngIf="showDefault" [size]="size"></kendo-daterange-popup>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["showCalendarHeader", "focusedDate", "disabledDates", "activeView", "bottomView", "topView", "min", "max", "allowReverse", "animateNavigation", "disabled", "views", "weekNumber", "animate", "anchor", "anchorAlign", "showViewHeader", "showOtherMonthDays", "appendTo", "collision", "popupAlign", "margin", "adaptiveMode", "title", "subtitle", "size"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["showCalendarHeader", "focusedDate", "disabledDates", "activeView", "bottomView", "topView", "min", "max", "allowReverse", "animateNavigation", "disabled", "views", "weekNumber", "animate", "anchor", "anchorAlign", "showViewHeader", "showOtherMonthDays", "appendTo", "collision", "popupAlign", "margin", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "size"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateRangeComponent, decorators: [{
             type: Component,

package/esm2022/daterange/localization/messages.mjs

@@ -25,8 +25,12 @@ export class DateRangePopupMessages extends ComponentMessages {
      * The label of the **Cancel** button in the popup footer of the DateRange Popup.
      */
     cancelLabel;
+    /**
+     * The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode.
+     */
+    adaptiveCloseButtonTitle;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateRangePopupMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DateRangePopupMessages, selector: "kendo-daterangepopup-messages-base", inputs: { accept: "accept", acceptLabel: "acceptLabel", cancel: "cancel", cancelLabel: "cancelLabel" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DateRangePopupMessages, selector: "kendo-daterangepopup-messages-base", inputs: { accept: "accept", acceptLabel: "acceptLabel", cancel: "cancel", cancelLabel: "cancelLabel", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateRangePopupMessages, decorators: [{
             type: Directive,
@@ -42,4 +46,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], cancelLabel: [{
                 type: Input
+            }], adaptiveCloseButtonTitle: [{
+                type: Input
             }] } });