@progress/kendo-angular-dateinputs 13.0.0-develop.2 → 13.0.0-develop.20

package/esm2020/timepicker/timepicker.component.mjs

@@ -443,7 +443,7 @@ export class TimePickerComponent {
             this.toggleTimeSelector(show);
         }
     }
-    get input() {
+    get dateInput() {
         return this.pickerService.input;
     }
     get timeSelector() {
@@ -457,7 +457,7 @@ export class TimePickerComponent {
      * Used by the TextBoxContainer to determine if the component is empty
      */
     isEmpty() {
-        return !this.value && this.input.isEmpty();
+        return !this.value && this.dateInput.isEmpty();
     }
     /**
      * @hidden
@@ -492,6 +492,9 @@ export class TimePickerComponent {
         if (changes.format) {
             this.verifyFormat();
         }
+        if (!this.focusableId || changes.focusableId) {
+            this.focusableId = this.dateInput?.focusableId;
+        }
     }
     /**
      * @hidden
@@ -537,9 +540,9 @@ export class TimePickerComponent {
         this.verifyValue(value);
         this.value = cloneDate(value);
         this.cdr.markForCheck();
-        if (!value && this.input) {
-            this.input.placeholder = this.placeholder;
-            this.input.writeValue(value);
+        if (!value && this.dateInput) {
+            this.dateInput.placeholder = this.placeholder;
+            this.dateInput.writeValue(value);
         }
     }
     /**
@@ -565,7 +568,7 @@ export class TimePickerComponent {
      * @hidden
      */
     validate(control) {
-        return this.timeRangeValidateFn(control) || this.incompleteValidator(control, this.input && this.input.isDateIncomplete);
+        return this.timeRangeValidateFn(control) || this.incompleteValidator(control, this.dateInput && this.dateInput.isDateIncomplete);
     }
     /**
      * @hidden
@@ -589,13 +592,13 @@ export class TimePickerComponent {
      * ```
      */
     focus() {
-        this.input.focus();
+        this.dateInput.focus();
     }
     /**
      * Blurs the TimePicker component.
      */
     blur() {
-        (this.timeSelector || this.input)['blur']();
+        (this.timeSelector || this.dateInput)['blur']();
     }
     /**
      * Toggles the visibility of the popup or actionSheet.
@@ -668,7 +671,7 @@ export class TimePickerComponent {
      * @hidden
      */
     handleInputChange(value) {
-        const val = this.input.formatSections['date'] ? value : this.mergeTime(value);
+        const val = this.dateInput.formatSections['date'] ? value : this.mergeTime(value);
         this.handleChange(val);
     }
     /**
@@ -779,12 +782,12 @@ export class TimePickerComponent {
             this.actionSheet.toggle();
             this.updateActionSheetAdaptiveAppearance();
             this.renderer.setAttribute(this.actionSheet.element.nativeElement, 'id', this.popupUID);
-            this.renderer.setAttribute(this.inputElement, attributeNames.ariaControls, this.popupUID);
+            this.renderer.setAttribute(this.dateInput?.inputElement, attributeNames.ariaControls, this.popupUID);
         }
         else if (!show && this.isOpen) {
             // Need to disable the pointer events to avoid triggering focus on the timelist when acionsheet close down animation starts
             this.renderer.setStyle(this.timeSelector.element.nativeElement, 'pointer-events', 'none');
-            this.renderer.removeAttribute(this.inputElement, attributeNames.ariaControls);
+            this.renderer.removeAttribute(this.dateInput?.inputElement, attributeNames.ariaControls);
             this.actionSheet.toggle();
         }
         this._show = show;
@@ -808,13 +811,13 @@ export class TimePickerComponent {
                 positionMode: 'absolute'
             });
             this.popupRef.popupElement.setAttribute('id', this.popupUID);
-            this.renderer.setAttribute(this.inputElement, attributeNames.ariaControls, this.popupUID);
+            this.renderer.setAttribute(this.dateInput?.inputElement, attributeNames.ariaControls, this.popupUID);
             this.popupRef.popupAnchorViewportLeave.subscribe(() => this.show = false);
         }
         else {
             this.popupRef.close();
             this.popupRef = null;
-            this.renderer.removeAttribute(this.inputElement, attributeNames.ariaControls);
+            this.renderer.removeAttribute(this.dateInput?.inputElement, attributeNames.ariaControls);
         }
     }
     updateActionSheetAdaptiveAppearance() {
@@ -840,7 +843,7 @@ export class TimePickerComponent {
         if (this.touchEnabled) {
             return;
         }
-        this.input.focus();
+        this.dateInput.focus();
     }
     toggleFocus() {
         if (!this.isActive) {
@@ -855,9 +858,9 @@ export class TimePickerComponent {
             }
         }
         else if (!this.touchEnabled) {
-            this.input.focus();
+            this.dateInput.focus();
         }
-        else if (!this.input.isActive) {
+        else if (!this.dateInput.isActive) {
             this.handleBlur();
         }
     }
@@ -906,7 +909,7 @@ export class TimePickerComponent {
         const currentTarget = args && currentFocusTarget(args); // relatedTarget || activeElement
         const target = args && args.target;
         const isInsideActionSheet = this.actionSheet && (this.actionSheet.element.nativeElement.contains(target) || this.actionSheet.element.nativeElement.contains(currentTarget));
-        if (currentTarget && (this.input.containsElement(currentTarget) ||
+        if (currentTarget && (this.dateInput.containsElement(currentTarget) ||
             (this.timeSelector && this.timeSelector.containsElement(currentTarget)) || isInsideActionSheet)) {
             return;
         }
@@ -1053,6 +1056,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             #actionSheet
             (overlayClick)="show=false"
             (collapse)="handleActionSheetCollapse()"
+            [titleId]="focusableId"
         >
             <ng-template kendoActionSheetTemplate>
                 <div class="k-actionsheet-titlebar">
@@ -1141,7 +1145,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </kendo-timeselector-messages>
             </kendo-timeselector>
         </ng-template>
-    `, isInline: true, components: [{ type: i6.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i9.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i10.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i11.TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart"], exportAs: ["kendo-timeselector"] }, { type: i12.TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: i13.TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i14.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i14.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i6.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i9.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i10.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i11.TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart"], exportAs: ["kendo-timeselector"] }, { type: i12.TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: i13.TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i14.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i14.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1255,6 +1259,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             #actionSheet
             (overlayClick)="show=false"
             (collapse)="handleActionSheetCollapse()"
+            [titleId]="focusableId"
         >
             <ng-template kendoActionSheetTemplate>
                 <div class="k-actionsheet-titlebar">

package/esm2020/timepicker/timeselector.component.mjs

@@ -482,22 +482,7 @@ TimeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 </div>
             </ng-template>
         </div>
-        <div class="k-time-footer k-action-buttons k-actions k-actions-stretched" *ngIf="setButton || cancelButton">
-            <button
-                #cancel
-                *ngIf="cancelButton"
-                class="k-button k-time-cancel k-button-md k-rounded-md k-button-solid k-button-solid-base"
-                type="button"
-                [attr.title]="localization.get('cancelLabel')"
-                [attr.aria-label]="localization.get('cancelLabel')"
-                [kendoEventsOutsideAngular]="{
-                    click: handleReject,
-                    focus: handleFocus,
-                    blur: handleBlur
-                }"
-                [scope]="this"
-                [disabled]="disabled"
-            >{{localization.get('cancel')}}</button>
+        <div class="k-time-footer k-actions k-actions-stretched k-actions-horizontal" *ngIf="setButton || cancelButton">
             <button
                 #accept
                 *ngIf="setButton"
@@ -514,6 +499,21 @@ TimeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 [scope]="this"
                 [disabled]="disabled"
             >{{localization.get('accept')}}</button>
+            <button
+                #cancel
+                *ngIf="cancelButton"
+                class="k-button k-time-cancel k-button-md k-rounded-md k-button-solid k-button-solid-base"
+                type="button"
+                [attr.title]="localization.get('cancelLabel')"
+                [attr.aria-label]="localization.get('cancelLabel')"
+                [kendoEventsOutsideAngular]="{
+                    click: handleReject,
+                    focus: handleFocus,
+                    blur: handleBlur
+                }"
+                [scope]="this"
+                [disabled]="disabled"
+            >{{localization.get('cancel')}}</button>
         </div>
     `, isInline: true, components: [{ type: i5.TimeListComponent, selector: "kendo-timelist", inputs: ["min", "max", "part", "step", "disabled", "value", "isLast"], outputs: ["valueChange", "tabOutLastPart"] }], directives: [{ type: i6.TimeSelectorLocalizedMessagesDirective, selector: "[kendoTimeSelectorLocalizedMessages]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimeSelectorComponent, decorators: [{
@@ -602,22 +602,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 </div>
             </ng-template>
         </div>
-        <div class="k-time-footer k-action-buttons k-actions k-actions-stretched" *ngIf="setButton || cancelButton">
-            <button
-                #cancel
-                *ngIf="cancelButton"
-                class="k-button k-time-cancel k-button-md k-rounded-md k-button-solid k-button-solid-base"
-                type="button"
-                [attr.title]="localization.get('cancelLabel')"
-                [attr.aria-label]="localization.get('cancelLabel')"
-                [kendoEventsOutsideAngular]="{
-                    click: handleReject,
-                    focus: handleFocus,
-                    blur: handleBlur
-                }"
-                [scope]="this"
-                [disabled]="disabled"
-            >{{localization.get('cancel')}}</button>
+        <div class="k-time-footer k-actions k-actions-stretched k-actions-horizontal" *ngIf="setButton || cancelButton">
             <button
                 #accept
                 *ngIf="setButton"
@@ -634,6 +619,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [scope]="this"
                 [disabled]="disabled"
             >{{localization.get('accept')}}</button>
+            <button
+                #cancel
+                *ngIf="cancelButton"
+                class="k-button k-time-cancel k-button-md k-rounded-md k-button-solid k-button-solid-base"
+                type="button"
+                [attr.title]="localization.get('cancelLabel')"
+                [attr.aria-label]="localization.get('cancelLabel')"
+                [kendoEventsOutsideAngular]="{
+                    click: handleReject,
+                    focus: handleFocus,
+                    blur: handleBlur
+                }"
+                [scope]="this"
+                [disabled]="disabled"
+            >{{localization.get('cancel')}}</button>
         </div>
     `
                 }]