@progress/kendo-angular-dateinputs 21.1.1-develop.1 → 21.2.0-develop.1

package/esm2022/dateinput/dateinput.component.mjs

@@ -22,7 +22,6 @@ import { Subscription } from 'rxjs';
 import { caretAltDownIcon, caretAltUpIcon, xIcon } from '@progress/kendo-svg-icons';
 import { DateInput } from '@progress/kendo-dateinputs-common';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
-import { NgIf } from '@angular/common';
 import { DateInputLocalizedMessagesDirective } from './localization/dateinput-localized-messages.directive';
 import { MAX_DATE, MIN_DATE } from '../defaults';
 import * as i0 from "@angular/core";
@@ -886,7 +885,7 @@ export class DateInputComponent {
         setHTMLAttributes(attributesToRender, this.renderer, this.dateInput.nativeElement, this.ngZone);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.IntlService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i2.LocalizationService }, { token: i3.PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DateInputComponent, isStandalone: true, selector: "kendo-dateinput", inputs: { focusableId: "focusableId", pickerType: "pickerType", clearButton: "clearButton", disabled: "disabled", readonly: "readonly", title: "title", tabindex: "tabindex", role: "role", ariaReadOnly: "ariaReadOnly", tabIndex: "tabIndex", isRequired: "isRequired", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", max: "max", min: "min", rangeValidation: "rangeValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", allowCaretMode: "allowCaretMode", autoFill: "autoFill", incompleteDateValidation: "incompleteDateValidation", twoDigitYearMax: "twoDigitYearMax", enableMouseWheel: "enableMouseWheel", value: "value", spinners: "spinners", isPopupOpen: "isPopupOpen", hasPopup: "hasPopup", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", valueUpdate: "valueUpdate", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-input": "this.wrapperClass", "class.k-dateinput": "this.wrapperClass", "class.k-disabled": "this.disabledClass" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DateInputComponent, isStandalone: true, selector: "kendo-dateinput", inputs: { focusableId: "focusableId", pickerType: "pickerType", clearButton: "clearButton", disabled: "disabled", readonly: "readonly", title: "title", tabindex: "tabindex", role: "role", ariaReadOnly: "ariaReadOnly", tabIndex: "tabIndex", isRequired: "isRequired", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", max: "max", min: "min", rangeValidation: "rangeValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", allowCaretMode: "allowCaretMode", autoFill: "autoFill", incompleteDateValidation: "incompleteDateValidation", twoDigitYearMax: "twoDigitYearMax", enableMouseWheel: "enableMouseWheel", value: "value", spinners: "spinners", isPopupOpen: "isPopupOpen", hasPopup: "hasPopup", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", valueUpdate: "valueUpdate", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-input": "this.wrapperClass", "class.k-dateinput": "this.wrapperClass", "class.k-disabled": "this.disabledClass" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true },
             { provide: L10N_PREFIX, useValue: 'kendo.dateinput' },
@@ -894,93 +893,96 @@ export class DateInputComponent {
             LocalizationService
         ], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, static: true }, { propertyName: "spinup", first: true, predicate: ["spinup"], descendants: true }, { propertyName: "spindown", first: true, predicate: ["spindown"], descendants: true }], exportAs: ["kendo-dateinput"], usesOnChanges: true, ngImport: i0, template: `
     <ng-container kendoDateInputLocalizedMessages
-        i18n-increment="kendo.dateinput.increment|The label for the **Increment** button in the DateInput"
-        increment="Increase value"
-
-        i18n-decrement="kendo.dateinput.decrement|The label for the **Decrement** button in the DateInput"
-        decrement="Decrease value"
-
-        i18n-clearTitle="kendo.dateinput.clearTitle|The title of the clear button"
-        clearTitle="clear"
-    >
+      i18n-increment="kendo.dateinput.increment|The label for the **Increment** button in the DateInput"
+      increment="Increase value"
+    
+      i18n-decrement="kendo.dateinput.decrement|The label for the **Decrement** button in the DateInput"
+      decrement="Decrease value"
+    
+      i18n-clearTitle="kendo.dateinput.clearTitle|The title of the clear button"
+      clearTitle="clear"
+      >
     </ng-container>
     <input #dateInput
-        class="k-input-inner"
-        [attr.required]="isControlRequired ? '' : null"
-        autocomplete="off"
-        autocorrect="off"
-        autocapitalize="off"
-        spellcheck="false"
-        [attr.role]="role"
-        [attr.aria-readonly]="ariaReadOnly"
-        [id]="focusableId"
-        [title]="title"
-        [tabindex]="tabindex"
-        [disabled]="disabled"
-        [readonly]="readonly"
-        [attr.placeholder]="placeholder"
-        [attr.aria-expanded]="isPopupOpen"
-        [attr.aria-haspopup]="hasPopup"
+      class="k-input-inner"
+      [attr.required]="isControlRequired ? '' : null"
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+      [attr.role]="role"
+      [attr.aria-readonly]="ariaReadOnly"
+      [id]="focusableId"
+      [title]="title"
+      [tabindex]="tabindex"
+      [disabled]="disabled"
+      [readonly]="readonly"
+      [attr.placeholder]="placeholder"
+      [attr.aria-expanded]="isPopupOpen"
+      [attr.aria-haspopup]="hasPopup"
         [kendoEventsOutsideAngular]="{
             dragstart: handleDragAndDrop,
             drop: handleDragAndDrop
         }"
-        [scope]="this"
-        />
-    <span
-        *ngIf="clearButton && showClearButton"
+      [scope]="this"
+      />
+    @if (clearButton && showClearButton) {
+      <span
         class="k-clear-value"
         [attr.title]="localization.get('clearTitle')"
         role="button"
         tabindex="-1"
         (click)="resetInput()"
         (mousedown)="$event.preventDefault()"
-    >
-        <kendo-icon-wrapper
-            name="x"
-            [svgIcon]="xIcon"
         >
+        <kendo-icon-wrapper
+          name="x"
+          [svgIcon]="xIcon"
+          >
         </kendo-icon-wrapper>
-    </span>
-    <span *ngIf="spinners" class="k-input-spinner k-spin-button" (mousedown)="$event.preventDefault()">
+      </span>
+    }
+    @if (spinners) {
+      <span class="k-input-spinner k-spin-button" (mousedown)="$event.preventDefault()">
         <button
-            #spinup
-            tabindex="-1"
-            class="k-spinner-increase k-button k-icon-button"
-            [class.k-active]="arrowDirection === arrow.Up"
-            (mousedown)="arrowDirection = arrow.Up"
-            (mouseleave)="arrowDirection = arrow.None"
-            (click)="handleButtonClick(1)"
-            [title]="localization.get('increment')"
-            [attr.aria-label]="localization.get('increment')"
+          #spinup
+          tabindex="-1"
+          class="k-spinner-increase k-button k-icon-button"
+          [class.k-active]="arrowDirection === arrow.Up"
+          (mousedown)="arrowDirection = arrow.Up"
+          (mouseleave)="arrowDirection = arrow.None"
+          (click)="handleButtonClick(1)"
+          [title]="localization.get('increment')"
+          [attr.aria-label]="localization.get('increment')"
+          >
+          <kendo-icon-wrapper
+            name="caret-alt-up"
+            [svgIcon]="caretAltUpIcon"
+            innerCssClass="k-button-icon"
             >
-                <kendo-icon-wrapper
-                    name="caret-alt-up"
-                    [svgIcon]="caretAltUpIcon"
-                    innerCssClass="k-button-icon"
-                >
-                </kendo-icon-wrapper>
+          </kendo-icon-wrapper>
         </button>
         <button
-            #spindown
-            tabindex="-1"
-            class="k-spinner-decrease k-button k-icon-button"
-            (click)="handleButtonClick(-1)"
-            [class.k-active]="arrowDirection === arrow.Down"
-            (mousedown)="arrowDirection = arrow.Down"
-            (mouseleave)="arrowDirection = arrow.None"
-            [title]="localization.get('decrement')"
-            [attr.aria-label]="localization.get('decrement')"
+          #spindown
+          tabindex="-1"
+          class="k-spinner-decrease k-button k-icon-button"
+          (click)="handleButtonClick(-1)"
+          [class.k-active]="arrowDirection === arrow.Down"
+          (mousedown)="arrowDirection = arrow.Down"
+          (mouseleave)="arrowDirection = arrow.None"
+          [title]="localization.get('decrement')"
+          [attr.aria-label]="localization.get('decrement')"
+          >
+          <kendo-icon-wrapper
+            name="caret-alt-down"
+            [svgIcon]="caretAltDownIcon"
+            innerCssClass="k-button-icon"
             >
-                <kendo-icon-wrapper
-                    name="caret-alt-down"
-                    [svgIcon]="caretAltDownIcon"
-                    innerCssClass="k-button-icon"
-                >
-                </kendo-icon-wrapper>
+          </kendo-icon-wrapper>
         </button>
-    </span>
-  `, isInline: true, dependencies: [{ kind: "directive", type: DateInputLocalizedMessagesDirective, selector: "[kendoDateInputLocalizedMessages]" }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+      </span>
+    }
+    `, isInline: true, dependencies: [{ kind: "directive", type: DateInputLocalizedMessagesDirective, selector: "[kendoDateInputLocalizedMessages]" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateInputComponent, decorators: [{
             type: Component,
@@ -997,95 +999,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-dateinput',
                     template: `
     <ng-container kendoDateInputLocalizedMessages
-        i18n-increment="kendo.dateinput.increment|The label for the **Increment** button in the DateInput"
-        increment="Increase value"
-
-        i18n-decrement="kendo.dateinput.decrement|The label for the **Decrement** button in the DateInput"
-        decrement="Decrease value"
-
-        i18n-clearTitle="kendo.dateinput.clearTitle|The title of the clear button"
-        clearTitle="clear"
-    >
+      i18n-increment="kendo.dateinput.increment|The label for the **Increment** button in the DateInput"
+      increment="Increase value"
+    
+      i18n-decrement="kendo.dateinput.decrement|The label for the **Decrement** button in the DateInput"
+      decrement="Decrease value"
+    
+      i18n-clearTitle="kendo.dateinput.clearTitle|The title of the clear button"
+      clearTitle="clear"
+      >
     </ng-container>
     <input #dateInput
-        class="k-input-inner"
-        [attr.required]="isControlRequired ? '' : null"
-        autocomplete="off"
-        autocorrect="off"
-        autocapitalize="off"
-        spellcheck="false"
-        [attr.role]="role"
-        [attr.aria-readonly]="ariaReadOnly"
-        [id]="focusableId"
-        [title]="title"
-        [tabindex]="tabindex"
-        [disabled]="disabled"
-        [readonly]="readonly"
-        [attr.placeholder]="placeholder"
-        [attr.aria-expanded]="isPopupOpen"
-        [attr.aria-haspopup]="hasPopup"
+      class="k-input-inner"
+      [attr.required]="isControlRequired ? '' : null"
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+      [attr.role]="role"
+      [attr.aria-readonly]="ariaReadOnly"
+      [id]="focusableId"
+      [title]="title"
+      [tabindex]="tabindex"
+      [disabled]="disabled"
+      [readonly]="readonly"
+      [attr.placeholder]="placeholder"
+      [attr.aria-expanded]="isPopupOpen"
+      [attr.aria-haspopup]="hasPopup"
         [kendoEventsOutsideAngular]="{
             dragstart: handleDragAndDrop,
             drop: handleDragAndDrop
         }"
-        [scope]="this"
-        />
-    <span
-        *ngIf="clearButton && showClearButton"
+      [scope]="this"
+      />
+    @if (clearButton && showClearButton) {
+      <span
         class="k-clear-value"
         [attr.title]="localization.get('clearTitle')"
         role="button"
         tabindex="-1"
         (click)="resetInput()"
         (mousedown)="$event.preventDefault()"
-    >
-        <kendo-icon-wrapper
-            name="x"
-            [svgIcon]="xIcon"
         >
+        <kendo-icon-wrapper
+          name="x"
+          [svgIcon]="xIcon"
+          >
         </kendo-icon-wrapper>
-    </span>
-    <span *ngIf="spinners" class="k-input-spinner k-spin-button" (mousedown)="$event.preventDefault()">
+      </span>
+    }
+    @if (spinners) {
+      <span class="k-input-spinner k-spin-button" (mousedown)="$event.preventDefault()">
         <button
-            #spinup
-            tabindex="-1"
-            class="k-spinner-increase k-button k-icon-button"
-            [class.k-active]="arrowDirection === arrow.Up"
-            (mousedown)="arrowDirection = arrow.Up"
-            (mouseleave)="arrowDirection = arrow.None"
-            (click)="handleButtonClick(1)"
-            [title]="localization.get('increment')"
-            [attr.aria-label]="localization.get('increment')"
+          #spinup
+          tabindex="-1"
+          class="k-spinner-increase k-button k-icon-button"
+          [class.k-active]="arrowDirection === arrow.Up"
+          (mousedown)="arrowDirection = arrow.Up"
+          (mouseleave)="arrowDirection = arrow.None"
+          (click)="handleButtonClick(1)"
+          [title]="localization.get('increment')"
+          [attr.aria-label]="localization.get('increment')"
+          >
+          <kendo-icon-wrapper
+            name="caret-alt-up"
+            [svgIcon]="caretAltUpIcon"
+            innerCssClass="k-button-icon"
             >
-                <kendo-icon-wrapper
-                    name="caret-alt-up"
-                    [svgIcon]="caretAltUpIcon"
-                    innerCssClass="k-button-icon"
-                >
-                </kendo-icon-wrapper>
+          </kendo-icon-wrapper>
         </button>
         <button
-            #spindown
-            tabindex="-1"
-            class="k-spinner-decrease k-button k-icon-button"
-            (click)="handleButtonClick(-1)"
-            [class.k-active]="arrowDirection === arrow.Down"
-            (mousedown)="arrowDirection = arrow.Down"
-            (mouseleave)="arrowDirection = arrow.None"
-            [title]="localization.get('decrement')"
-            [attr.aria-label]="localization.get('decrement')"
+          #spindown
+          tabindex="-1"
+          class="k-spinner-decrease k-button k-icon-button"
+          (click)="handleButtonClick(-1)"
+          [class.k-active]="arrowDirection === arrow.Down"
+          (mousedown)="arrowDirection = arrow.Down"
+          (mouseleave)="arrowDirection = arrow.None"
+          [title]="localization.get('decrement')"
+          [attr.aria-label]="localization.get('decrement')"
+          >
+          <kendo-icon-wrapper
+            name="caret-alt-down"
+            [svgIcon]="caretAltDownIcon"
+            innerCssClass="k-button-icon"
             >
-                <kendo-icon-wrapper
-                    name="caret-alt-down"
-                    [svgIcon]="caretAltDownIcon"
-                    innerCssClass="k-button-icon"
-                >
-                </kendo-icon-wrapper>
+          </kendo-icon-wrapper>
         </button>
-    </span>
-  `,
+      </span>
+    }
+    `,
                     standalone: true,
-                    imports: [DateInputLocalizedMessagesDirective, EventsOutsideAngularDirective, NgIf, IconWrapperComponent]
+                    imports: [DateInputLocalizedMessagesDirective, EventsOutsideAngularDirective, IconWrapperComponent]
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.IntlService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Injector }, { type: i2.LocalizationService }, { type: i3.PickerService, decorators: [{
                     type: Optional