@progress/kendo-angular-dateinputs 19.0.0-develop.1 → 19.0.0-develop.11

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, isDocumentAvailable, KendoInput, Keys, MultiTabStop, ResizeSensorComponent, EventsOutsideAngularDirective } from '@progress/kendo-angular-common';
+import { hasObservers, isControlRequired, KendoInput, Keys, MultiTabStop, ResizeSensorComponent, EventsOutsideAngularDirective } from '@progress/kendo-angular-common';
 import { AdaptiveService } from '@progress/kendo-angular-utils';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
@@ -24,7 +24,7 @@ import { timeRangeValidator } from '../validators/time-range.validator';
 import { fromEvent } from 'rxjs';
 import { incompleteDateValidator } from '../validators/incomplete-date.validator';
 import { BusViewService } from '../calendar/services/bus-view.service';
-import { clockIcon, xIcon } from '@progress/kendo-svg-icons';
+import { checkIcon, clockIcon } from '@progress/kendo-svg-icons';
 import { ActionSheetComponent, ActionSheetTemplateDirective } from '@progress/kendo-angular-navigation';
 import { TimeSelectorCustomMessagesComponent } from './localization/timeselector-custom-messages.component';
 import { ButtonComponent } from '@progress/kendo-angular-buttons';
@@ -280,18 +280,13 @@ export class TimePickerComponent extends MultiTabStop {
      * Sets the title of the input element of the TimePicker 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).
+     * By default, subtitle is not rendered.
      */
-    set subtitle(subtitle) {
-        this._subtitle = subtitle;
-    }
-    get subtitle() {
-        return this._subtitle || this.placeholder;
-    }
-    _subtitle;
+    adaptiveSubtitle;
     /**
      * Determines whether the built-in min or max validators are enforced when a form is being validated.
      *
@@ -436,7 +431,7 @@ export class TimePickerComponent extends MultiTabStop {
     /**
      * @hidden
      */
-    xIcon = xIcon;
+    checkIcon = checkIcon;
     get isActive() {
         return this._active;
     }
@@ -492,6 +487,10 @@ export class TimePickerComponent extends MultiTabStop {
     get isControlRequired() {
         return isControlRequired(this.control);
     }
+    /**
+     * @hidden
+     */
+    windowSize;
     get adaptiveAcceptButton() {
         return this.actionSheet.element.nativeElement.querySelector(ACCEPT_BUTTON_SELECTOR);
     }
@@ -522,7 +521,6 @@ export class TimePickerComponent extends MultiTabStop {
     _size = DEFAULT_SIZE;
     _rounded = DEFAULT_ROUNDED;
     _fillMode = DEFAULT_FILL_MODE;
-    windowSize;
     constructor(bus, zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, intl, adaptiveService) {
         super();
         this.bus = bus;
@@ -569,11 +567,6 @@ export class TimePickerComponent extends MultiTabStop {
     ngAfterViewInit() {
         this.setComponentClasses();
         this.windowSize = this.adaptiveService.size;
-        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');
-        }
     }
     /**
      * @hidden
@@ -920,7 +913,6 @@ export class TimePickerComponent extends MultiTabStop {
         }
         if (show && !this.isOpen) {
             this.actionSheet.toggle();
-            this.updateActionSheetAdaptiveAppearance();
             this.renderer.setAttribute(this.actionSheet.element.nativeElement, 'id', this.popupUID);
             this.renderer.setAttribute(this.dateInput?.inputElement, attributeNames.ariaControls, this.popupUID);
         }
@@ -931,6 +923,7 @@ export class TimePickerComponent extends MultiTabStop {
                 this.renderer.removeAttribute(this.dateInput.inputElement, attributeNames.ariaControls);
             }
             this.actionSheet.toggle();
+            this.dateInput.focus();
         }
         this._show = show;
     }
@@ -965,25 +958,6 @@ export class TimePickerComponent extends MultiTabStop {
             }
         }
     }
-    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');
-        }
-    }
     focusInput() {
         if (touchEnabled) {
             return;
@@ -1094,7 +1068,7 @@ export class TimePickerComponent extends MultiTabStop {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimePickerComponent, deps: [{ token: i1.BusViewService }, { token: i0.NgZone }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i4.PickerService }, { token: i5.IntlService }, { token: i6.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimePickerComponent, isStandalone: true, selector: "kendo-timepicker", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", clearButton: "clearButton", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", cancelButton: "cancelButton", nowButton: "nowButton", steps: "steps", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex", title: "title", subtitle: "subtitle", rangeValidation: "rangeValidation", adaptiveMode: "adaptiveMode", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close", escape: "escape" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-timepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimePickerComponent, isStandalone: true, selector: "kendo-timepicker", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", clearButton: "clearButton", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", cancelButton: "cancelButton", nowButton: "nowButton", steps: "steps", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", rangeValidation: "rangeValidation", adaptiveMode: "adaptiveMode", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close", escape: "escape" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-timepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TimePickerComponent), multi: true },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => TimePickerComponent), multi: true },
             { provide: KendoInput, useExisting: forwardRef(() => TimePickerComponent) },
@@ -1146,6 +1120,9 @@ export class TimePickerComponent extends MultiTabStop {
 
             i18n-clearTitle="kendo.timepicker.clearTitle|The title of the clear button"
             clearTitle="clear"
+
+            i18n-adaptiveCloseButtonTitle="kendo.timepicker.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>
         <kendo-dateinput
@@ -1175,7 +1152,7 @@ export class TimePickerComponent extends MultiTabStop {
             [steps]="steps"
             [tabindex]="!show ? tabindex : -1"
             [isRequired]="isControlRequired"
-            [title]="title"
+            [title]="adaptiveTitle"
             [inputAttributes]="inputAttributes"
             [value]="value"
             (valueChange)="handleInputChange($event)"
@@ -1218,32 +1195,39 @@ export class TimePickerComponent extends MultiTabStop {
             (overlayClick)="show=false"
             (collapse)="handleActionSheetCollapse()"
             [titleId]="focusableId"
+            [cssClass]="{
+                'k-adaptive-actionsheet': true,
+                'k-actionsheet-fullscreen': windowSize === 'small',
+                'k-actionsheet-bottom': windowSize === 'medium'
+            }"
+            [cssStyle]="{
+                height: windowSize === 'small' ? '100vh' : '60vh'
+            }"
         >
             <ng-template kendoActionSheetTemplate>
                 <div class="k-actionsheet-titlebar">
-                    <div class="k-actionsheet-titlebar-group k-hbox">
+                    <div class="k-actionsheet-titlebar-group">
                         <div class="k-actionsheet-title">
-                            <div class="k-text-center">{{ title }}</div>
-                            <div 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="x"
-                                [attr.title]="localization.get('clearTitle')"
-                                [svgIcon]="xIcon"
+                                icon="check"
+                                [attr.title]="localization.get('adaptiveCloseButtonTitle')"
+                                [svgIcon]="checkIcon"
                                 fillMode="flat"
                                 size="large"
                                 [tabIndex]="-1"
                                 aria-hidden="true"
-                                innerCssClass="k-button-icon"
                                 (click)="show = false">
                             </button>
                         </div>
                     </div>
                 </div>
-                <div class="k-actionsheet-content !k-overflow-hidden">
+                <div class="k-actionsheet-content">
                     <ng-container *ngTemplateOutlet="timeSelectorTemplate"></ng-container>
                 </div>
                 <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
@@ -1313,7 +1297,7 @@ export class TimePickerComponent extends MultiTabStop {
                 </kendo-timeselector-messages>
             </kendo-timeselector>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { 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"] }, { kind: "component", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart", "tabOutFirstPart", "tabOutNow"], exportAs: ["kendo-timeselector"] }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: 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: "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"] }, { kind: "component", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart", "tabOutFirstPart", "tabOutNow"], exportAs: ["kendo-timeselector"] }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
@@ -1374,6 +1358,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
             i18n-clearTitle="kendo.timepicker.clearTitle|The title of the clear button"
             clearTitle="clear"
+
+            i18n-adaptiveCloseButtonTitle="kendo.timepicker.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>
         <kendo-dateinput
@@ -1403,7 +1390,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [steps]="steps"
             [tabindex]="!show ? tabindex : -1"
             [isRequired]="isControlRequired"
-            [title]="title"
+            [title]="adaptiveTitle"
             [inputAttributes]="inputAttributes"
             [value]="value"
             (valueChange)="handleInputChange($event)"
@@ -1446,32 +1433,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             (overlayClick)="show=false"
             (collapse)="handleActionSheetCollapse()"
             [titleId]="focusableId"
+            [cssClass]="{
+                'k-adaptive-actionsheet': true,
+                'k-actionsheet-fullscreen': windowSize === 'small',
+                'k-actionsheet-bottom': windowSize === 'medium'
+            }"
+            [cssStyle]="{
+                height: windowSize === 'small' ? '100vh' : '60vh'
+            }"
         >
             <ng-template kendoActionSheetTemplate>
                 <div class="k-actionsheet-titlebar">
-                    <div class="k-actionsheet-titlebar-group k-hbox">
+                    <div class="k-actionsheet-titlebar-group">
                         <div class="k-actionsheet-title">
-                            <div class="k-text-center">{{ title }}</div>
-                            <div 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="x"
-                                [attr.title]="localization.get('clearTitle')"
-                                [svgIcon]="xIcon"
+                                icon="check"
+                                [attr.title]="localization.get('adaptiveCloseButtonTitle')"
+                                [svgIcon]="checkIcon"
                                 fillMode="flat"
                                 size="large"
                                 [tabIndex]="-1"
                                 aria-hidden="true"
-                                innerCssClass="k-button-icon"
                                 (click)="show = false">
                             </button>
                         </div>
                     </div>
                 </div>
-                <div class="k-actionsheet-content !k-overflow-hidden">
+                <div class="k-actionsheet-content">
                     <ng-container *ngTemplateOutlet="timeSelectorTemplate"></ng-container>
                 </div>
                 <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
@@ -1602,9 +1596,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], tabIndex: [{
                 type: Input
-            }], title: [{
+            }], adaptiveTitle: [{
                 type: Input
-            }], subtitle: [{
+            }], adaptiveSubtitle: [{
                 type: Input
             }], rangeValidation: [{
                 type: Input