@progress/kendo-angular-dateinputs 5.3.1-dev.202112011809 → 6.0.0-dev.202201181611

package/dist/npm/timepicker/timepicker.component.js

@@ -31,12 +31,12 @@ var formatRegExp = new RegExp(time_part_default_1.TIME_PART.hour + "|" + time_pa
  * Represents the [Kendo UI TimePicker component for Angular]({% slug overview_timepicker %}#toc-basic-usage).
  */
 var TimePickerComponent = /** @class */ (function () {
-    function TimePickerComponent(zone, localization, cdr, popupService, element, renderer, injector, pickerService, intl, touchEnabled) {
+    function TimePickerComponent(zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, intl, touchEnabled) {
         this.zone = zone;
         this.localization = localization;
         this.cdr = cdr;
         this.popupService = popupService;
-        this.element = element;
+        this.wrapper = wrapper;
         this.renderer = renderer;
         this.injector = injector;
         this.pickerService = pickerService;
@@ -198,6 +198,9 @@ var TimePickerComponent = /** @class */ (function () {
         this._value = null;
         this._active = false;
         this.domEvents = [];
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         kendo_licensing_1.validatePackage(package_metadata_1.packageMetadata);
         this.pickerSubscriptions = this.pickerService.onFocus.subscribe(this.handleFocus.bind(this));
         this.pickerSubscriptions.add(this.pickerService.onBlur.subscribe(this.handleBlur.bind(this)));
@@ -308,6 +311,85 @@ var TimePickerComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(TimePickerComponent.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        /**
+         * Sets the size of the component.
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (Default)
+         * * `'large'`
+         * * `null`
+         *
+         */
+        set: function (size) {
+            this.renderer.removeClass(this.wrapper.nativeElement, util_1.getSizeClass('input', this.size));
+            this.renderer.removeClass(this.toggleButton.nativeElement, util_1.getSizeClass('input', this.size));
+            if (size) {
+                this.renderer.addClass(this.wrapper.nativeElement, util_1.getSizeClass('input', size));
+                this.renderer.addClass(this.toggleButton.nativeElement, util_1.getSizeClass('input', size));
+            }
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TimePickerComponent.prototype, "rounded", {
+        get: function () {
+            return this._rounded;
+        },
+        /**
+         * Sets the border radius of the component.
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (Default)
+         * * `'large'`
+         * * `'full'`
+         * * `null`
+         *
+         */
+        set: function (rounded) {
+            this.renderer.removeClass(this.wrapper.nativeElement, util_1.getRoundedClass(this.rounded));
+            if (rounded) {
+                this.renderer.addClass(this.wrapper.nativeElement, util_1.getRoundedClass(rounded));
+            }
+            this._rounded = rounded;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TimePickerComponent.prototype, "fillMode", {
+        get: function () {
+            return this._fillMode;
+        },
+        /**
+         * Sets the fillMode of the component.
+         *
+         * The possible values are:
+         * * `'solid'` (Default)
+         * * `'flat'`
+         * * `'outline'`
+         * * `null`
+         *
+         */
+        set: function (fillMode) {
+            this.renderer.removeClass(this.wrapper.nativeElement, util_1.getFillModeClass('input', this.fillMode));
+            this.renderer.removeClass(this.toggleButton.nativeElement, util_1.getFillModeClass('button', this.fillMode));
+            this.renderer.removeClass(this.toggleButton.nativeElement, "k-button-" + this.fillMode + "-base");
+            if (fillMode) {
+                this.renderer.addClass(this.wrapper.nativeElement, util_1.getFillModeClass('input', fillMode));
+                this.renderer.addClass(this.toggleButton.nativeElement, util_1.getFillModeClass('button', fillMode));
+                this.renderer.addClass(this.toggleButton.nativeElement, "k-button-" + fillMode + "-base");
+            }
+            this._fillMode = fillMode;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(TimePickerComponent.prototype, "disabledClass", {
         /**
          * @hidden
@@ -339,10 +421,10 @@ var TimePickerComponent = /** @class */ (function () {
             }
             var element = this.wrapper.nativeElement;
             if (value) {
-                this.renderer.addClass(element, 'k-state-focused');
+                this.renderer.addClass(element, 'k-focus');
             }
             else {
-                this.renderer.removeClass(element, 'k-state-focused');
+                this.renderer.removeClass(element, 'k-focus');
             }
         },
         enumerable: true,
@@ -399,13 +481,19 @@ var TimePickerComponent = /** @class */ (function () {
         this.localizationChangeSubscription = this.localization
             .changes.subscribe(function () { return _this.cdr.markForCheck(); });
         this.control = this.injector.get(forms_1.NgControl, null);
-        if (this.element) {
-            this.renderer.removeAttribute(this.element.nativeElement, 'tabindex');
+        if (this.wrapper) {
+            this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
             this.zone.runOutsideAngular(function () {
                 _this.bindEvents();
             });
         }
     };
+    /**
+     * @hidden
+     */
+    TimePickerComponent.prototype.ngAfterViewInit = function () {
+        this.setComponentClasses();
+    };
     /**
      * @hidden
      */
@@ -718,7 +806,7 @@ var TimePickerComponent = /** @class */ (function () {
         }
     };
     TimePickerComponent.prototype.bindEvents = function () {
-        var element = this.element.nativeElement;
+        var element = this.wrapper.nativeElement;
         this.domEvents.push(this.renderer.listen(element, 'keydown', this.handleKeydown.bind(this)));
         if (util_1.isWindowAvailable()) {
             this.windowBlurSubscription = rxjs_1.fromEvent(window, 'blur').subscribe(this.handleWindowBlur.bind(this));
@@ -770,6 +858,20 @@ var TimePickerComponent = /** @class */ (function () {
         this.cdr.markForCheck();
         this.zone.run(function () { return _this.onValidatorChange(); });
     };
+    TimePickerComponent.prototype.setComponentClasses = function () {
+        if (this.size) {
+            this.renderer.addClass(this.wrapper.nativeElement, util_1.getSizeClass('input', this.size));
+            this.renderer.addClass(this.toggleButton.nativeElement, util_1.getSizeClass('button', this.size));
+        }
+        if (this.rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, util_1.getRoundedClass(this.rounded));
+        }
+        if (this.fillMode) {
+            this.renderer.addClass(this.wrapper.nativeElement, util_1.getFillModeClass('input', this.fillMode));
+            this.renderer.addClass(this.toggleButton.nativeElement, util_1.getFillModeClass('button', this.fillMode));
+            this.renderer.addClass(this.toggleButton.nativeElement, "k-button-" + this.fillMode + "-base");
+        }
+    };
     var TimePickerComponent_1;
     tslib_1.__decorate([
         core_1.ViewChild('container', { read: core_1.ViewContainerRef, static: false }),
@@ -780,9 +882,9 @@ var TimePickerComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", core_1.TemplateRef)
     ], TimePickerComponent.prototype, "popupTemplate", void 0);
     tslib_1.__decorate([
-        core_1.ViewChild('wrapper', { static: false }),
+        core_1.ViewChild('toggleButton', { static: true }),
         tslib_1.__metadata("design:type", core_1.ElementRef)
-    ], TimePickerComponent.prototype, "wrapper", void 0);
+    ], TimePickerComponent.prototype, "toggleButton", void 0);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", String)
@@ -865,6 +967,21 @@ var TimePickerComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", Date),
         tslib_1.__metadata("design:paramtypes", [Date])
     ], TimePickerComponent.prototype, "value", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], TimePickerComponent.prototype, "size", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], TimePickerComponent.prototype, "rounded", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], TimePickerComponent.prototype, "fillMode", null);
     tslib_1.__decorate([
         core_1.Output(),
         tslib_1.__metadata("design:type", core_1.EventEmitter)
@@ -886,12 +1003,12 @@ var TimePickerComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", core_1.EventEmitter)
     ], TimePickerComponent.prototype, "close", void 0);
     tslib_1.__decorate([
-        core_1.HostBinding('class.k-widget'),
         core_1.HostBinding('class.k-timepicker'),
+        core_1.HostBinding('class.k-input'),
         tslib_1.__metadata("design:type", Boolean)
     ], TimePickerComponent.prototype, "wrapperClasses", void 0);
     tslib_1.__decorate([
-        core_1.HostBinding('class.k-state-disabled'),
+        core_1.HostBinding('class.k-disabled'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], TimePickerComponent.prototype, "disabledClass", null);
@@ -911,7 +1028,7 @@ var TimePickerComponent = /** @class */ (function () {
                 picker_service_1.PickerService
             ],
             selector: 'kendo-timepicker',
-            template: "\n        <ng-container kendoTimePickerLocalizedMessages\n            i18n-accept=\"kendo.timepicker.accept|The Accept button text in the timepicker component\"\n            accept=\"Set\"\n\n            i18n-acceptLabel=\"kendo.timepicker.acceptLabel|The label for the Accept button in the timepicker component\"\n            acceptLabel=\"Set time\"\n\n            i18n-cancel=\"kendo.timepicker.cancel|The Cancel button text in the timepicker component\"\n            cancel=\"Cancel\"\n\n            i18n-cancelLabel=\"kendo.timepicker.cancelLabel|The label for the Cancel button in the timepicker component\"\n            cancelLabel=\"Cancel changes\"\n\n            i18n-now=\"kendo.timepicker.now|The Now button text in the timepicker component\"\n            now=\"Now\"\n\n            i18n-nowLabel=\"kendo.timepicker.nowLabel|The label for the Now button in the timepicker component\"\n            nowLabel=\"Select now\"\n\n            i18n-toggle=\"kendo.timepicker.toggle|The label for the toggle button in the timepicker component\"\n            toggle=\"Toggle time list\"\n        >\n        </ng-container>\n        <span #wrapper\n            class=\"k-picker-wrap\"\n            [class.k-state-disabled]=\"disabled\"\n        >\n            <kendo-dateinput\n                #input\n                [focusableId]=\"focusableId\"\n                [hasPopup]=\"true\"\n                [isPopupOpen]=\"show\"\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly || readOnlyInput\"\n                [role]=\"inputRole\"\n                [ariaReadOnly]=\"readonly\"\n                [format]=\"format\"\n                [formatPlaceholder]=\"formatPlaceholder\"\n                [placeholder]=\"placeholder\"\n                [min]=\"normalizeTime(min)\"\n                [max]=\"normalizeTime(max)\"\n                [incompleteDateValidation]=\"incompleteDateValidation\"\n                [steps]=\"steps\"\n                [tabindex]=\"!show ? tabindex : -1\"\n                [title]=\"title\"\n                [value]=\"value\"\n                (valueChange)=\"handleInputChange($event)\"\n            ></kendo-dateinput>\n            <span class=\"k-select\"\n                role=\"button\"\n                [attr.title]=\"localization.get('toggle')\"\n                [attr.aria-label]=\"localization.get('toggle')\"\n                [kendoEventsOutsideAngular]=\"{\n                    click: handleIconClick,\n                    mousedown: handleMousedown\n                }\"\n                [scope]=\"this\"\n            >\n                <span class=\"k-icon k-i-clock\"></span>\n            </span>\n            <ng-template #popupTemplate>\n                <kendo-timeselector\n                    #timeSelector\n                    [cancelButton]=\"cancelButton\"\n                    [nowButton]=\"nowButton\"\n                    [format]=\"format\"\n                    [min]=\"min\"\n                    [max]=\"max\"\n                    [steps]=\"steps\"\n                    [value]=\"value\"\n                    [kendoEventsOutsideAngular]=\"{\n                        keydown: handleKeydown,\n                        mousedown: handleMousedown\n                    }\"\n                    [scope]=\"this\"\n                    (valueChange)=\"handleChange($event)\"\n                    (valueReject)=\"handleReject()\"\n                >\n                    <kendo-timeselector-messages\n                        [acceptLabel]=\"localization.get('acceptLabel')\"\n                        [accept]=\"localization.get('accept')\"\n                        [cancelLabel]=\"localization.get('cancelLabel')\"\n                        [cancel]=\"localization.get('cancel')\"\n                        [nowLabel]=\"localization.get('nowLabel')\"\n                        [now]=\"localization.get('now')\"\n                    >\n                    </kendo-timeselector-messages>\n                </kendo-timeselector>\n            </ng-template>\n        </span>\n        <ng-container #container></ng-container>\n    "
+            template: "\n        <ng-container kendoTimePickerLocalizedMessages\n            i18n-accept=\"kendo.timepicker.accept|The Accept button text in the timepicker component\"\n            accept=\"Set\"\n\n            i18n-acceptLabel=\"kendo.timepicker.acceptLabel|The label for the Accept button in the timepicker component\"\n            acceptLabel=\"Set time\"\n\n            i18n-cancel=\"kendo.timepicker.cancel|The Cancel button text in the timepicker component\"\n            cancel=\"Cancel\"\n\n            i18n-cancelLabel=\"kendo.timepicker.cancelLabel|The label for the Cancel button in the timepicker component\"\n            cancelLabel=\"Cancel changes\"\n\n            i18n-now=\"kendo.timepicker.now|The Now button text in the timepicker component\"\n            now=\"Now\"\n\n            i18n-nowLabel=\"kendo.timepicker.nowLabel|The label for the Now button in the timepicker component\"\n            nowLabel=\"Select now\"\n\n            i18n-toggle=\"kendo.timepicker.toggle|The label for the toggle button in the timepicker component\"\n            toggle=\"Toggle time list\"\n        >\n        </ng-container>\n        <kendo-dateinput\n            #input\n            [focusableId]=\"focusableId\"\n            [hasPopup]=\"true\"\n            [isPopupOpen]=\"show\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly || readOnlyInput\"\n            [role]=\"inputRole\"\n            [ariaReadOnly]=\"readonly\"\n            [format]=\"format\"\n            [formatPlaceholder]=\"formatPlaceholder\"\n            [placeholder]=\"placeholder\"\n            [min]=\"normalizeTime(min)\"\n            [max]=\"normalizeTime(max)\"\n            [incompleteDateValidation]=\"incompleteDateValidation\"\n            [fillMode]=\"fillMode\"\n            [rounded]=\"rounded\"\n            [size]=\"size\"\n            [steps]=\"steps\"\n            [tabindex]=\"!show ? tabindex : -1\"\n            [title]=\"title\"\n            [value]=\"value\"\n            (valueChange)=\"handleInputChange($event)\"\n        ></kendo-dateinput>\n        <button\n            #toggleButton\n            type=\"button\"\n            class=\"k-input-button k-button k-icon-button\"\n            [attr.title]=\"localization.get('toggle')\"\n            [attr.aria-label]=\"localization.get('toggle')\"\n            [kendoEventsOutsideAngular]=\"{\n                click: handleIconClick,\n                mousedown: handleMousedown\n            }\"\n            [scope]=\"this\"\n        >\n            <span class=\"k-button-icon k-icon k-i-clock\"></span>\n        </button>\n        <ng-template #popupTemplate>\n            <kendo-timeselector\n                #timeSelector\n                [cancelButton]=\"cancelButton\"\n                [nowButton]=\"nowButton\"\n                [format]=\"format\"\n                [min]=\"min\"\n                [max]=\"max\"\n                [steps]=\"steps\"\n                [value]=\"value\"\n                [kendoEventsOutsideAngular]=\"{\n                    keydown: handleKeydown,\n                    mousedown: handleMousedown\n                }\"\n                [scope]=\"this\"\n                (valueChange)=\"handleChange($event)\"\n                (valueReject)=\"handleReject()\"\n            >\n                <kendo-timeselector-messages\n                    [acceptLabel]=\"localization.get('acceptLabel')\"\n                    [accept]=\"localization.get('accept')\"\n                    [cancelLabel]=\"localization.get('cancelLabel')\"\n                    [cancel]=\"localization.get('cancel')\"\n                    [nowLabel]=\"localization.get('nowLabel')\"\n                    [now]=\"localization.get('now')\"\n                >\n                </kendo-timeselector-messages>\n            </kendo-timeselector>\n        </ng-template>\n        <ng-container #container></ng-container>\n    "
         }),
         tslib_1.__param(9, core_1.Optional()), tslib_1.__param(9, core_1.Inject(touch_enabled_1.TOUCH_ENABLED)),
         tslib_1.__metadata("design:paramtypes", [core_1.NgZone,

package/dist/npm/timepicker/timeselector.component.js

@@ -417,7 +417,7 @@ var TimeSelectorComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", Boolean)
     ], TimeSelectorComponent.prototype, "componentClass", void 0);
     tslib_1.__decorate([
-        core_1.HostBinding('class.k-state-disabled'),
+        core_1.HostBinding('class.k-disabled'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], TimeSelectorComponent.prototype, "disabledClass", null);
@@ -478,7 +478,7 @@ var TimeSelectorComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-timeselector',
-            template: "\n        <ng-container kendoTimeSelectorLocalizedMessages\n            i18n-accept=\"kendo.timeselector.accept|The Accept button text in the timeselector component\"\n            accept=\"Set\"\n\n            i18n-acceptLabel=\"kendo.timeselector.acceptLabel|The label for the Accept button in the timeselector component\"\n            acceptLabel=\"Set time\"\n\n            i18n-cancel=\"kendo.timeselector.cancel|The Cancel button text in the timeselector component\"\n            cancel=\"Cancel\"\n\n            i18n-cancelLabel=\"kendo.timeselector.cancelLabel|The label for the Cancel button in the timeselector component\"\n            cancelLabel=\"Cancel changes\"\n\n            i18n-now=\"kendo.timeselector.now|The Now button text in the timeselector component\"\n            now=\"Now\"\n\n            i18n-nowLabel=\"kendo.timeselector.nowLabel|The label for the Now button in the timeselector component\"\n            nowLabel=\"Select now\"\n        >\n        </ng-container>\n        <div class=\"k-time-header\">\n            <span class=\"k-title k-timeselector-title\">\n                {{ intl.formatDate(current, format) }}\n            </span>\n            <button\n                #now\n                *ngIf=\"showNowButton\"\n                class=\"k-button k-flat k-time-now\" type=\"button\"\n                [attr.title]=\"localization.get('nowLabel')\"\n                [attr.aria-label]=\"localization.get('nowLabel')\"\n                [kendoEventsOutsideAngular]=\"{\n                    click: handleNow,\n                    focus: handleFocus,\n                    blur: handleBlur\n                }\"\n                [scope]=\"this\"\n                [disabled]=\"disabled\"\n            >{{localization.get('now')}}</button>\n        </div>\n        <div class=\"k-time-list-container\">\n            <span class=\"k-time-highlight\"></span>\n            <ng-template ngFor [ngForOf]=\"dateFormatParts\" let-part let-idx=\"index\">\n                <div\n                    #listWrapper\n                    class=\"k-time-list-wrapper\"\n                    role=\"presentation\" tabindex=\"-1\"\n                    *ngIf=\"part.type !== 'literal'\"\n                >\n                    <span class=\"k-title k-timeselector-title\">{{intl.dateFieldName(part)}}</span>\n                    <kendo-timelist\n                        [min]=\"min\"\n                        [max]=\"max\"\n                        [part]=\"part\"\n                        [step]=\"partStep(part)\"\n                        [disabled]=\"disabled\"\n                        [(value)]=\"current\"\n                        [kendoEventsOutsideAngular]=\"{\n                            focus: handleListFocus,\n                            blur: handleBlur\n                        }\"\n                        [scope]=\"this\"\n                        [attr.data-timelist-index]=\"idx\"\n                    ></kendo-timelist>\n                </div>\n                <div class=\"k-time-separator\" *ngIf=\"part.type === 'literal'\">\n                    {{part.pattern}}\n                </div>\n            </ng-template>\n        </div>\n        <div class=\"k-time-footer k-action-buttons\" *ngIf=\"setButton || cancelButton\">\n            <button\n                #cancel\n                *ngIf=\"cancelButton\"\n                class=\"k-button k-time-cancel\" type=\"button\"\n                [attr.title]=\"localization.get('cancelLabel')\"\n                [attr.aria-label]=\"localization.get('cancelLabel')\"\n                [kendoEventsOutsideAngular]=\"{\n                    click: handleReject,\n                    focus: handleFocus,\n                    blur: handleBlur\n                }\"\n                [scope]=\"this\"\n                [disabled]=\"disabled\"\n            >{{localization.get('cancel')}}</button>\n            <button\n                #accept\n                *ngIf=\"setButton\"\n                type=\"button\"\n                class=\"k-time-accept k-button k-primary\"\n                [attr.title]=\"localization.get('acceptLabel')\"\n                [attr.aria-label]=\"localization.get('acceptLabel')\"\n                [kendoEventsOutsideAngular]=\"{\n                    click: handleAccept,\n                    focus: handleFocus,\n                    blur: handleBlur\n                }\"\n                [scope]=\"this\"\n                [disabled]=\"disabled\"\n            >{{localization.get('accept')}}</button>\n        </div>\n    "
+            template: "\n        <ng-container kendoTimeSelectorLocalizedMessages\n            i18n-accept=\"kendo.timeselector.accept|The Accept button text in the timeselector component\"\n            accept=\"Set\"\n\n            i18n-acceptLabel=\"kendo.timeselector.acceptLabel|The label for the Accept button in the timeselector component\"\n            acceptLabel=\"Set time\"\n\n            i18n-cancel=\"kendo.timeselector.cancel|The Cancel button text in the timeselector component\"\n            cancel=\"Cancel\"\n\n            i18n-cancelLabel=\"kendo.timeselector.cancelLabel|The label for the Cancel button in the timeselector component\"\n            cancelLabel=\"Cancel changes\"\n\n            i18n-now=\"kendo.timeselector.now|The Now button text in the timeselector component\"\n            now=\"Now\"\n\n            i18n-nowLabel=\"kendo.timeselector.nowLabel|The label for the Now button in the timeselector component\"\n            nowLabel=\"Select now\"\n        >\n        </ng-container>\n        <div class=\"k-time-header\">\n            <span class=\"k-title k-timeselector-title\">\n                {{ intl.formatDate(current, format) }}\n            </span>\n            <button\n                #now\n                *ngIf=\"showNowButton\"\n                type=\"button\"\n                class=\"k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-time-now\"\n                [attr.title]=\"localization.get('nowLabel')\"\n                [attr.aria-label]=\"localization.get('nowLabel')\"\n                [kendoEventsOutsideAngular]=\"{\n                    click: handleNow,\n                    focus: handleFocus,\n                    blur: handleBlur\n                }\"\n                [scope]=\"this\"\n                [disabled]=\"disabled\"\n            >{{localization.get('now')}}</button>\n        </div>\n        <div class=\"k-time-list-container\">\n            <span class=\"k-time-highlight\"></span>\n            <ng-template ngFor [ngForOf]=\"dateFormatParts\" let-part let-idx=\"index\">\n                <div\n                    #listWrapper\n                    class=\"k-time-list-wrapper\"\n                    role=\"presentation\" tabindex=\"-1\"\n                    *ngIf=\"part.type !== 'literal'\"\n                >\n                    <span class=\"k-title k-timeselector-title\">{{intl.dateFieldName(part)}}</span>\n                    <kendo-timelist\n                        [min]=\"min\"\n                        [max]=\"max\"\n                        [part]=\"part\"\n                        [step]=\"partStep(part)\"\n                        [disabled]=\"disabled\"\n                        [(value)]=\"current\"\n                        [kendoEventsOutsideAngular]=\"{\n                            focus: handleListFocus,\n                            blur: handleBlur\n                        }\"\n                        [scope]=\"this\"\n                        [attr.data-timelist-index]=\"idx\"\n                    ></kendo-timelist>\n                </div>\n                <div class=\"k-time-separator\" *ngIf=\"part.type === 'literal'\">\n                    {{part.pattern}}\n                </div>\n            </ng-template>\n        </div>\n        <div class=\"k-time-footer k-action-buttons k-actions k-hstack k-justify-content-stretch\" *ngIf=\"setButton || cancelButton\">\n            <button\n                #cancel\n                *ngIf=\"cancelButton\"\n                class=\"k-button k-time-cancel k-button-md k-rounded-md k-button-solid k-button-solid-base\"\n                type=\"button\"\n                [attr.title]=\"localization.get('cancelLabel')\"\n                [attr.aria-label]=\"localization.get('cancelLabel')\"\n                [kendoEventsOutsideAngular]=\"{\n                    click: handleReject,\n                    focus: handleFocus,\n                    blur: handleBlur\n                }\"\n                [scope]=\"this\"\n                [disabled]=\"disabled\"\n            >{{localization.get('cancel')}}</button>\n            <button\n                #accept\n                *ngIf=\"setButton\"\n                type=\"button\"\n                class=\"k-button k-time-accept k-button-md k-rounded-md k-button-solid k-button-solid-primary\"\n                [attr.title]=\"localization.get('acceptLabel')\"\n                [attr.aria-label]=\"localization.get('acceptLabel')\"\n                [kendoEventsOutsideAngular]=\"{\n                    click: handleAccept,\n                    focus: handleFocus,\n                    blur: handleBlur\n                }\"\n                [scope]=\"this\"\n                [disabled]=\"disabled\"\n            >{{localization.get('accept')}}</button>\n        </div>\n    "
         }),
         tslib_1.__param(7, core_1.Optional()),
         tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService,

package/dist/npm/util.js

@@ -360,3 +360,40 @@ exports.isTabExitingCalendar = function (calendarType, focusedElement, shiftKey)
         (!shiftKey && focusedElement.classList.contains('k-next-view')) // exited on next button focused and regular tab
     );
 };
+/**
+ * @hidden
+ * Returns the size class based on the component and size input.
+ */
+exports.getSizeClass = function (component, size) {
+    var SIZE_CLASSES = {
+        'small': "k-" + component + "-sm",
+        'medium': "k-" + component + "-md",
+        'large': "k-" + component + "-lg"
+    };
+    return SIZE_CLASSES[size];
+};
+/**
+ * @hidden
+ * Returns the rounded class based on the rounded input.
+ */
+exports.getRoundedClass = function (rounded) {
+    var ROUNDED_CLASSES = {
+        'small': 'k-rounded-sm',
+        'medium': 'k-rounded-md',
+        'large': 'k-rounded-lg',
+        'full': 'k-rounded-full'
+    };
+    return ROUNDED_CLASSES[rounded];
+};
+/**
+ * @hidden
+ * Return the fillMode class based on the component and fillMode input.
+ */
+exports.getFillModeClass = function (component, fillMode) {
+    var FILLMODE_CLASSES = {
+        'solid': "k-" + component + "-solid",
+        'flat': "k-" + component + "-flat",
+        'outline': "k-" + component + "-outline"
+    };
+    return FILLMODE_CLASSES[fillMode];
+};