@progress/kendo-angular-dateinputs 7.0.0-next.202204081436 → 7.0.0-next.202204111442

package/fesm2015/kendo-angular-dateinputs.js

@@ -28,7 +28,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1649428453,
+    publishDate: 1649687993,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -8645,9 +8645,9 @@ class DatePickerComponent {
         this.renderer.removeClass(this.toggleButton.nativeElement, `k-button-${this.fillMode}-base`);
         const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
         if (newFillMode !== 'none') {
-            this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', fillMode));
-            this.renderer.addClass(this.toggleButton.nativeElement, `k-button-${fillMode}-base`);
-            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
+            this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', newFillMode));
+            this.renderer.addClass(this.toggleButton.nativeElement, `k-button-${newFillMode}-base`);
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', newFillMode));
         }
         this._fillMode = newFillMode;
     }
@@ -9128,9 +9128,9 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             [min]="min"
             [max]="max"
             [incompleteDateValidation]="incompleteDateValidation"
-            [fillMode]="null"
-            [rounded]="null"
-            [size]="null"
+            fillMode="none"
+            rounded="none"
+            size="none"
             [value]="value"
             (valueChange)="handleInputChange($event)"
         ></kendo-dateinput>
@@ -9239,9 +9239,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [min]="min"
             [max]="max"
             [incompleteDateValidation]="incompleteDateValidation"
-            [fillMode]="null"
-            [rounded]="null"
-            [size]="null"
+            fillMode="none"
+            rounded="none"
+            size="none"
             [value]="value"
             (valueChange)="handleInputChange($event)"
         ></kendo-dateinput>
@@ -11361,9 +11361,9 @@ class TimePickerComponent {
         this._value = null;
         this._active = false;
         this.domEvents = [];
-        this._size = 'medium';
-        this._rounded = 'medium';
-        this._fillMode = 'solid';
+        this._size = DEFAULT_SIZE;
+        this._rounded = DEFAULT_ROUNDED;
+        this._fillMode = DEFAULT_FILL_MODE;
         validatePackage(packageMetadata);
         this.pickerSubscriptions = this.pickerService.onFocus.subscribe(this.handleFocus.bind(this));
         this.pickerSubscriptions.add(this.pickerService.onBlur.subscribe(this.handleBlur.bind(this)));
@@ -11453,20 +11453,21 @@ class TimePickerComponent {
      * Sets the size of the component.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (Default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     * * `none`
      *
      */
     set size(size) {
         this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
         this.renderer.removeClass(this.toggleButton.nativeElement, getSizeClass('input', this.size));
-        if (size) {
-            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', size));
-            this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('input', size));
+        const newSize = size ? size : DEFAULT_SIZE;
+        if (newSize !== 'none') {
+            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', newSize));
+            this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('input', newSize));
         }
-        this._size = size;
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -11475,19 +11476,20 @@ class TimePickerComponent {
      * Sets the border radius of the component.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (Default)
-     * * `'large'`
-     * * `'full'`
-     * * `null`
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     * * `full`
+     * * `none`
      *
      */
     set rounded(rounded) {
         this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
-        if (rounded) {
-            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
+        if (newRounded !== 'none') {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(newRounded));
         }
-        this._rounded = rounded;
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
@@ -11496,22 +11498,23 @@ class TimePickerComponent {
      * Sets the fillMode of the component.
      *
      * The possible values are:
-     * * `'solid'` (Default)
-     * * `'flat'`
-     * * `'outline'`
-     * * `null`
+     * * `solid` (Default)
+     * * `flat`
+     * * `outline`
+     * * `none`
      *
      */
     set fillMode(fillMode) {
         this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
         this.renderer.removeClass(this.toggleButton.nativeElement, getFillModeClass('button', this.fillMode));
         this.renderer.removeClass(this.toggleButton.nativeElement, `k-button-${this.fillMode}-base`);
-        if (fillMode) {
-            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
-            this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', fillMode));
-            this.renderer.addClass(this.toggleButton.nativeElement, `k-button-${fillMode}-base`);
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
+        if (newFillMode !== 'none') {
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', newFillMode));
+            this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', newFillMode));
+            this.renderer.addClass(this.toggleButton.nativeElement, `k-button-${newFillMode}-base`);
         }
-        this._fillMode = fillMode;
+        this._fillMode = newFillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -12506,9 +12509,9 @@ class DateTimePickerComponent {
         this.disabledDatesValidateFn = noop$2;
         this.incompleteValidator = noop$2;
         this.subscriptions = new Subscription();
-        this._size = 'medium';
-        this._rounded = 'medium';
-        this._fillMode = 'solid';
+        this._size = DEFAULT_SIZE;
+        this._rounded = DEFAULT_ROUNDED;
+        this._fillMode = DEFAULT_FILL_MODE;
         validatePackage(packageMetadata);
     }
     /**
@@ -12674,20 +12677,21 @@ class DateTimePickerComponent {
      * Sets the size of the component.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (Default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     * * `none`
      *
      */
     set size(size) {
         this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
         this.renderer.removeClass(this.toggleButton.nativeElement, getSizeClass('input', this.size));
-        if (size) {
-            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', size));
-            this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('input', size));
+        const newSize = size ? size : DEFAULT_SIZE;
+        if (newSize !== 'none') {
+            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', newSize));
+            this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('input', newSize));
         }
-        this._size = size;
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -12696,19 +12700,20 @@ class DateTimePickerComponent {
      * Sets the border radius of the component.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (Default)
-     * * `'large'`
-     * * `'full'`
-     * * `null`
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     * * `full`
+     * * `none`
      *
      */
     set rounded(rounded) {
         this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
-        if (rounded) {
-            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
+        if (newRounded !== 'none') {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(newRounded));
         }
-        this._rounded = rounded;
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
@@ -12717,22 +12722,23 @@ class DateTimePickerComponent {
      * Sets the fillMode of the component.
      *
      * The possible values are:
-     * * `'solid'` (Default)
-     * * `'flat'`
-     * * `'outline'`
-     * * `null`
+     * * `solid` (Default)
+     * * `flat`
+     * * `outline`
+     * * `none`
      *
      */
     set fillMode(fillMode) {
         this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
         this.renderer.removeClass(this.toggleButton.nativeElement, getFillModeClass('button', this.fillMode));
         this.renderer.removeClass(this.toggleButton.nativeElement, `k-button-${this.fillMode}-base`);
-        if (fillMode) {
-            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
-            this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', fillMode));
-            this.renderer.addClass(this.toggleButton.nativeElement, `k-button-${fillMode}-base`);
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
+        if (newFillMode !== 'none') {
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', newFillMode));
+            this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', newFillMode));
+            this.renderer.addClass(this.toggleButton.nativeElement, `k-button-${newFillMode}-base`);
         }
-        this._fillMode = fillMode;
+        this._fillMode = newFillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -14639,6 +14645,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class DateRangeComponent {
     constructor() {
+        this.wrapperClass = true;
         /**
          * @hidden
          */
@@ -14661,7 +14668,7 @@ class DateRangeComponent {
     }
 }
 DateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateRangeComponent, selector: "kendo-daterange", providers: [DateRangeService], queries: [{ propertyName: "contentPopup", predicate: DateRangePopupComponent }], ngImport: i0, template: `
+DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateRangeComponent, selector: "kendo-daterange", host: { 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"></kendo-daterange-popup>
     `, isInline: true, components: [{ type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["animate", "anchor", "anchorAlign", "appendTo", "collision", "popupAlign", "margin"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
@@ -14675,7 +14682,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <kendo-daterange-popup *ngIf="showDefault"></kendo-daterange-popup>
     `
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { contentPopup: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { wrapperClass: [{
+                type: HostBinding,
+                args: ['class.k-daterangepicker']
+            }], contentPopup: [{
                 type: ContentChildren,
                 args: [DateRangePopupComponent]
             }] } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-dateinputs",
-  "version": "7.0.0-next.202204081436",
+  "version": "7.0.0-next.202204111442",
   "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",

package/timepicker/timepicker.component.d.ts

@@ -209,10 +209,10 @@ export declare class TimePickerComponent implements ControlValueAccessor, OnInit
      * Sets the size of the component.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (Default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     * * `none`
      *
      */
     set size(size: DateInputSize);
@@ -221,11 +221,11 @@ export declare class TimePickerComponent implements ControlValueAccessor, OnInit
      * Sets the border radius of the component.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (Default)
-     * * `'large'`
-     * * `'full'`
-     * * `null`
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     * * `full`
+     * * `none`
      *
      */
     set rounded(rounded: DateInputRounded);
@@ -234,10 +234,10 @@ export declare class TimePickerComponent implements ControlValueAccessor, OnInit
      * Sets the fillMode of the component.
      *
      * The possible values are:
-     * * `'solid'` (Default)
-     * * `'flat'`
-     * * `'outline'`
-     * * `null`
+     * * `solid` (Default)
+     * * `flat`
+     * * `outline`
+     * * `none`
      *
      */
     set fillMode(fillMode: DateInputFillMode);