@progress/kendo-angular-dateinputs 19.1.2-develop.3 → 19.1.2-develop.5

package/esm2022/timepicker/timepicker.component.mjs

@@ -47,6 +47,22 @@ const ACCEPT_BUTTON_SELECTOR = '.k-button.k-time-accept';
 const CANCEL_BUTTON_SELECTOR = '.k-button.k-time-cancel';
 /**
  * Represents the [Kendo UI TimePicker component for Angular](slug:overview_timepicker).
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-timepicker [(value)]="selectedTime"></kendo-timepicker>
+ *   `
+ * })
+ * export class AppComponent {
+ *   public selectedTime: Date = new Date();
+ * }
+ * ```
+ *
+ * @remarks
+ * Supported children components are: {@link TimePickerCustomMessagesComponent}.
  */
 export class TimePickerComponent extends MultiTabStop {
     bus;
@@ -73,14 +89,15 @@ export class TimePickerComponent extends MultiTabStop {
      */
     focusableId;
     /**
-     * Sets or gets the `disabled` property of the TimePicker and
-     * determines whether the component is active
+     * Determines whether the TimePicker is disabled
      * ([see example]({% slug disabled_timepicker %})).
      * To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_timepicker#toc-managing-the-timepicker-disabled-state-in-reactive-forms).
+     *
+     * @default false
      */
     disabled = false;
     /**
-     * Sets the read-only state of the TimePicker
+     * Determines the read-only state of the TimePicker
      * ([see example]({% slug readonly_timepicker %}#toc-read-only-timepicker)).
      *
      * @default false
@@ -90,8 +107,9 @@ export class TimePickerComponent extends MultiTabStop {
      * Sets the read-only state of the TimePicker input field
      * ([see example]({% slug readonly_timepicker %}#toc-read-only-input)).
      *
-     * > Note that if you set the [`readonly`]({% slug api_dateinputs_timepickercomponent %}#toc-readonly) property value to `true`,
+     * If you set the [`readonly`]({% slug api_dateinputs_timepickercomponent %}#toc-readonly) property value to `true`,
      * the input will be rendered in a read-only state regardless of the `readOnlyInput` value.
+     * @default false
      */
     readOnlyInput = false;
     /**
@@ -103,72 +121,26 @@ export class TimePickerComponent extends MultiTabStop {
     /**
      * Specifies the time format that is used to display the input value
      * ([see example]({% slug formats_timepicker %})).
+     * @default 't'
      */
     format = 't';
     /**
      * Defines the descriptions of the format sections in the input field.
      * For more information, refer to the article on
      * [placeholders]({% slug placeholders_timepicker %}).
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     * <div class="row example-wrapper" [style.min-height.px]="450">
-     *  <div class="col-xs-12 col-md-6 example-col">
-     *    <p>Full-length format description:</p>
-     *    <kendo-timepicker formatPlaceholder="wide"></kendo-timepicker>
-     *  </div>
-     *
-     *  <div class="col-xs-12 col-md-6 example-col">
-     *    <p>Narrow-length format description:</p>
-     *    <kendo-timepicker formatPlaceholder="narrow"></kendo-timepicker>
-     *  </div>
-     *
-     *  <div class="col-xs-12 col-md-6 example-col">
-     *    <p>Short-length format description:</p>
-     *    <kendo-timepicker formatPlaceholder="short"></kendo-timepicker>
-     *  </div>
-     *
-     *  <div class="col-xs-12 col-md-6 example-col">
-     *    <p>Display defined format:</p>
-     *    <kendo-timepicker format="HH:mm:ss" formatPlaceholder="formatPattern"></kendo-timepicker>
-     *  </div>
-     *
-     *  <div class="col-xs-12 col-md-6 example-col">
-     *    <p>Custom defined format descriptions</p>
-     *    <kendo-timepicker format="HH:mm:ss"
-     *      [formatPlaceholder]="{ hour: 'H', minute: 'm', second: 's' }"
-     *    ></kendo-timepicker>
-     *  </div>
-     * </div>
-     * `
-     * })
-     * export class AppComponent { }
-     * ```
      */
     formatPlaceholder;
     /**
      * Specifies the hint the TimePicker displays when its value is `null`.
      * For more information, refer to the article on
      * [placeholders]({% slug placeholders_timepicker %}).
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     *  <kendo-timepicker placeholder="Enter start..."></kendo-timepicker>
-     * `
-     * })
-     * export class AppComponent { }
-     * ```
+     * @default null
      */
     placeholder = null;
     /**
      * Specifies the smallest valid time value
      * ([see example]({% slug timeranges_timepicker %})).
+     * @default `00:00:00`
      */
     set min(min) {
         this._min = cloneDate(min || MIN_TIME);
@@ -179,6 +151,7 @@ export class TimePickerComponent extends MultiTabStop {
     /**
      * Specifies the biggest valid time value
      * ([see example]({% slug timeranges_timepicker %})).
+     * @default `23:59:59`
      */
     set max(max) {
         this._max = cloneDate(max || MAX_TIME);
@@ -188,6 +161,8 @@ export class TimePickerComponent extends MultiTabStop {
     }
     /**
      * Determines whether the built-in validation for incomplete dates is to be enforced when a form is being validated.
+     *
+     * @default false
      */
     incompleteDateValidation = false;
     /**
@@ -214,12 +189,16 @@ export class TimePickerComponent extends MultiTabStop {
     allowCaretMode = false;
     /**
      * Determines whether to display the **Cancel** button in the popup.
+     *
+     * @default true
      */
     cancelButton = true;
     /**
      * Determines whether to display the **Now** button in the popup.
      *
-     * > If the current time is out of range or the incremental step is greater than `1`, the **Now** button will be hidden.
+     * If the current time is out of range or the incremental step is greater than `1`, the **Now** button will be hidden.
+     *
+     * @default true
      */
     nowButton = true;
     /**
@@ -227,21 +206,7 @@ export class TimePickerComponent extends MultiTabStop {
      * For more information, refer to the article on
      * [incremental steps]({% slug incrementalsteps_timepicker %}).
      *
-     * > If the incremental step is greater than `1`, the **Now** button will be hidden.
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     *  <kendo-timepicker format="HH:mm:ss" [steps]="steps"></kendo-timepicker>
-     * `
-     * })
-     * class AppComponent {
-     *   public steps = { hour: 2, minute: 15, second: 15, millisecond: 10 };
-     * }
-     * ```
-     *
+     * If the incremental step is greater than `1`, the **Now** button will be hidden.
      */
     set steps(steps) {
         this._steps = steps || {};
@@ -252,10 +217,9 @@ export class TimePickerComponent extends MultiTabStop {
     /**
      * Configures the popup of the TimePicker.
      *
-     * The available options are:
-     * - `animate: Boolean`&mdash;Controls the popup animation. By default, the open and close animations are enabled.
-     * - `appendTo: 'root' | 'component' | ViewContainerRef`&mdash;Controls the popup container. By default, the popup will be appended to the root component.
-     * - `popupClass: String`&mdash;Specifies a list of CSS classes that are used to style the popup.
+     * The available options are animate which controls the popup animation and by default, the open and close animations are enabled.
+     * The `appendTo` option controls the popup container and by default, the popup will be appended to the root component.
+     * The `popupClass` option specifies a list of CSS classes that are used to style the popup.
      */
     set popupSettings(settings) {
         this._popupSettings = Object.assign({}, { animate: true }, settings);
@@ -264,7 +228,8 @@ export class TimePickerComponent extends MultiTabStop {
         return this._popupSettings;
     }
     /**
-     * Sets or gets the `tabindex` property of the TimePicker.
+     * Sets the tabindex of the TimePicker component.
+     * @default 0
      */
     tabindex = 0;
     /**
@@ -294,13 +259,14 @@ export class TimePickerComponent extends MultiTabStop {
      */
     rangeValidation = true;
     /**
-     * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
+     * Determines whether the TimePicker is in adaptive mode.
+     * @default 'none'
      */
     adaptiveMode = 'none';
     /**
-     * Specifies the value of the TimePicker component.
+     * Determines whether the TimePicker is in adaptive mode.
      *
-     * > The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance or `null`.
+     * The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance or `null`.
      */
     set value(value) {
         this.verifyValue(value);
@@ -311,13 +277,7 @@ export class TimePickerComponent extends MultiTabStop {
     }
     /**
      * Sets the size of the component.
-     *
-     * The possible values are:
-     * * `small`
-     * * `medium` (Default)
-     * * `large`
-     * * `none`
-     *
+     * @default 'medium'
      */
     set size(size) {
         this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
@@ -333,14 +293,8 @@ export class TimePickerComponent extends MultiTabStop {
         return this._size;
     }
     /**
-     * Sets the border radius of the component.
-     *
-     * The possible values are:
-     * * `small`
-     * * `medium` (Default)
-     * * `large`
-     * * `full`
-     * * `none`
+     * Sets the rounded styling of the component.
+     * @default 'medium'
      *
      */
     set rounded(rounded) {
@@ -356,13 +310,7 @@ export class TimePickerComponent extends MultiTabStop {
     }
     /**
      * Sets the fillMode of the component.
-     *
-     * The possible values are:
-     * * `solid` (Default)
-     * * `flat`
-     * * `outline`
-     * * `none`
-     *
+     * @default 'solid'
      */
     set fillMode(fillMode) {
         this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
@@ -670,33 +618,22 @@ export class TimePickerComponent extends MultiTabStop {
     /**
      * Focuses the TimePicker component.
      *
-     * @example
-     * ```ts
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     *  <button (click)="timepicker.focus()">Focus time picker</button>
-     *  <kendo-timepicker #timepicker></kendo-timepicker>
-     * `
-     * })
-     * export class AppComponent { }
-     * ```
      */
     focus() {
         this.dateInput.focus();
     }
     /**
      * Blurs the TimePicker component.
+     *
      */
     blur() {
         (this.timeSelector || this.dateInput)['blur']();
     }
     /**
-     * Toggles the visibility of the popup or actionSheet.
-     * If you use the `toggle` method to show or hide the popup or actionSheet,
-     * the `open` and `close` events do not fire.
+     * Toggles the visibility of the popup or ActionSheet.
+     * If you use the `toggle` method to show or hide the popup or ActionSheet, the `open` and `close` events do not fire.
      *
-     * @param show - The state of the popup.
+     * @param {boolean} show The state of the popup.
      */
     toggle(show) {
         if (this.disabled || this.readonly) {
@@ -707,7 +644,8 @@ export class TimePickerComponent extends MultiTabStop {
         });
     }
     /**
-     * Indicates whether the component is currently open. That is when the popup or actionSheet is open.
+     * Returns whether the component is currently open.
+     * That is when the popup or ActionSheet is open.
      */
     get isOpen() {
         return this.show;
@@ -1190,7 +1128,7 @@ export class TimePickerComponent extends MultiTabStop {
         <ng-container #container></ng-container>
 
         <kendo-resize-sensor *ngIf="isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
-        <kendo-actionsheet 
+        <kendo-actionsheet
             #actionSheet
             (overlayClick)="show=false"
             (collapse)="handleActionSheetCollapse()"
@@ -1231,7 +1169,7 @@ export class TimePickerComponent extends MultiTabStop {
                     <ng-container *ngTemplateOutlet="timeSelectorTemplate"></ng-container>
                 </div>
                 <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
-                    <button kendoButton 
+                    <button kendoButton
                         type="button"
                         (click)="handleReject()"
                         size="large"
@@ -1428,7 +1366,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         <ng-container #container></ng-container>
 
         <kendo-resize-sensor *ngIf="isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
-        <kendo-actionsheet 
+        <kendo-actionsheet
             #actionSheet
             (overlayClick)="show=false"
             (collapse)="handleActionSheetCollapse()"
@@ -1469,7 +1407,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     <ng-container *ngTemplateOutlet="timeSelectorTemplate"></ng-container>
                 </div>
                 <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
-                    <button kendoButton 
+                    <button kendoButton
                         type="button"
                         (click)="handleReject()"
                         size="large"

package/esm2022/timepicker/timepicker.module.mjs

@@ -20,8 +20,19 @@ import * as i2 from "./timepicker.component";
 import * as i3 from "@progress/kendo-angular-common";
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the TimePicker component.
+ * Required for adding all TimePicker features in NgModule-based Angular applications.
+ *
+ * @example
+ * ```typescript
+ * import { NgModule } from '@angular/core';
+ * import { TimePickerModule } from '@progress/kendo-angular-dateinputs';
+ *
+ * @NgModule({
+ *   imports: [TimePickerModule],
+ *   // ...
+ * })
+ * export class AppModule { }
+ * ```
  */
 export class TimePickerModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });

package/esm2022/timepicker/timeselector.component.mjs

@@ -62,62 +62,58 @@ export class TimeSelectorComponent {
         return this.disabled;
     }
     /**
-     * Specifies the time format used to display the time list columns.
+     * Specifies the time format that displays the time list columns.
+     *
+     * @default 't'
      */
     format = 't';
     /**
-     * Specifies the smallest valid time value.
+     * Sets the smallest valid time value.
      */
     min = cloneDate(MIN_TIME);
     /**
-     * Specifies the biggest valid time value.
+     * Sets the largest valid time value.
      */
     max = cloneDate(MAX_TIME);
     /**
-     * Determines whether to display the **Cancel** button in the popup.
+     * Controls the display of the **Cancel** button in the popup.
+     *
+     * @default true
      */
     cancelButton = true;
     /**
-     * Determines whether to display the **Set** button in the popup.
+     * Controls the display of the **Set** button in the popup.
+     *
+     * @default true
      */
     setButton = true;
     /**
-     * Determines whether to display the **Now** button in the popup.
+     * Controls the display of the **Now** button in the popup.
      *
-     * > If the current time is out of range or the incremental step is greater than `1`, the **Now** button will be hidden.
+     * When the current time is out of range or the incremental step is greater than `1`, the **Now** button is hidden.
+     *
+     * @default true
      */
     nowButton = true;
     /**
-     * Sets or gets the `disabled` property of the TimeSelector and determines whether the component is active.
+     * Sets the `disabled` property of the `TimeSelector` and controls whether the component is active.
+     *
+     * @default false
      */
     disabled = false;
     /**
-     * Needed in order to set it in the dom service so that timeselector height can be properly calculated
+     * Sets the adaptive mode for the component.
+     * Use this property to enable proper height calculation in the DOM service.
      */
     isAdaptiveEnabled;
+    /**
+     * Specifies whether the component is used as part of a DateTimePicker.
+     */
     isDateTimePicker;
     /**
      * Configures the incremental steps of the TimeSelector.
      *
-     * The available options are:
-     * - `hour: Number`—Controls the incremental step of the hour value.
-     * - `minute: Number`—Controls the incremental step of the minute value.
-     * - `second: Number`—Controls the incremental step of the second value.
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     *  <kendo-timeselector format="HH:mm:ss" [steps]="steps"></kendo-timeselector>
-     * `
-     * })
-     * export class AppComponent {
-     *   public steps = { hour: 2, minute: 15, second: 15 };
-     * }
-     * ```
-     *
-     * > If the incremental step is greater than `1`, the **Now** button will be hidden.
+     * When the incremental step is greater than `1`, the **Now** button is hidden.
      */
     set steps(steps) {
         this._steps = steps || {};
@@ -225,18 +221,6 @@ export class TimeSelectorComponent {
     }
     /**
      * Focuses the TimeSelector component.
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     *  <button (click)="timeselector.focus()">Focus time picker</button>
-     *  <kendo-timeselector #timeselector></kendo-timeselector>
-     * `
-     * })
-     * export class AppComponent { }
-     * ```
      */
     focus() {
         const list = this.timeLists.first;