@progress/kendo-vue-dateinputs 3.5.0-dev.202208010922 → 3.5.1-dev.202208100944

package/dist/esm/timepicker/TimeSelector.d.ts

@@ -0,0 +1,96 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { DateFormatPart, IntlService, DateFormatOptions } from '@progress/kendo-vue-intl';
+import { TimePickerIncrementalSteps } from './models/IncrementalSteps';
+/**
+ * @hidden
+ */
+export declare enum Direction {
+    Left = 0,
+    Right = 1
+}
+/**
+ * @hidden
+ */
+export interface TimeSelectorChangeEvent {
+    event?: any;
+    value: Date;
+    target: any;
+}
+/**
+ * @hidden
+ */
+export interface TimeSelectorProps {
+    cancelButton?: boolean;
+    disabled?: boolean;
+    format?: string | DateFormatOptions;
+    max?: Date;
+    min?: Date;
+    nowButton?: boolean;
+    onChange?: any;
+    onReject?: any;
+    steps?: TimePickerIncrementalSteps;
+    smoothScroll?: boolean;
+    tabIndex?: number;
+    value?: Date | null;
+    boundRange?: boolean;
+}
+/**
+ * @hidden
+ */
+export interface TimeSelectorState {
+    _cancelButton: any;
+    _acceptButton: any;
+    dateFormatParts: DateFormatPart[];
+    valueDuringOnChange?: Date | null;
+    timePart: any;
+    mergeValue: Function;
+}
+/**
+ * @hidden
+ */
+export interface TimeSelectorData {
+    currentValue: Date | null;
+    currentState: Date | null;
+}
+/**
+ * @hidden
+ */
+export interface TimeSelectorMethods {
+    [key: string]: any;
+    focusActiveList: () => void;
+    hasActiveButton: () => any;
+    handleKeyDown: (event: any) => void;
+    handleAccept: (event: any) => void;
+    handleReject: (event: any) => void;
+    handleNowClick: (event: any) => void;
+    handleChange: (candidate: Date) => void;
+    handleBlur: (event: any) => void;
+    handleFocus: (event: any) => void;
+}
+/**
+ * @hidden
+ */
+export interface TimeSelectorComputed {
+    [key: string]: any;
+    computedValue: Date | null;
+    intl: IntlService;
+    current: Date | null;
+}
+/**
+ * @hidden
+ */
+export interface TimeSelectorAll extends Vue2type, TimeSelectorMethods, TimeSelectorData, TimeSelectorComputed, TimeSelectorState {
+}
+/**
+ * @hidden
+ */
+declare let TimeSelectorVue2: ComponentOptions<TimeSelectorAll, DefaultData<TimeSelectorData>, DefaultMethods<TimeSelectorAll>, TimeSelectorComputed, RecordPropsDefinition<TimeSelectorProps>>;
+/**
+ * @hidden
+ */
+declare const TimeSelector: DefineComponent<TimeSelectorProps, any, TimeSelectorData, TimeSelectorComputed, TimeSelectorMethods, {}, {}, {}, string, TimeSelectorProps, TimeSelectorProps, {}>;
+export { TimeSelector, TimeSelectorVue2 };

package/dist/esm/timepicker/TimeSelector.js

@@ -0,0 +1,318 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var inject = allVue.inject;
+import { Button } from '@progress/kendo-vue-buttons';
+import { cloneDate } from '@progress/kendo-date-math';
+import { canUseDOM, classNames, Keys } from '@progress/kendo-vue-common';
+import { provideIntlService, provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages, timePickerCancel, timePickerSet } from '../messages.js';
+import { MIN_TIME, MAX_TIME, MIDNIGHT_DATE } from '../utils.js';
+import { generateGetters, getNow, valueMerger } from './utils.js';
+import { TimePart } from './TimePart.js';
+/**
+ * @hidden
+ */
+
+export var Direction;
+
+(function (Direction) {
+  Direction[Direction["Left"] = 0] = "Left";
+  Direction[Direction["Right"] = 1] = "Right";
+})(Direction || (Direction = {}));
+/**
+ * @hidden
+ */
+
+
+var TimeSelectorVue2 = {
+  name: 'KendoTimeSelector',
+  // @ts-ignore
+  emits: {
+    'change': null,
+    'focus': null,
+    'blur': null
+  },
+  props: {
+    cancelButton: {
+      type: Boolean,
+      default: true
+    },
+    boundRange: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    format: {
+      type: String,
+      default: function _default() {
+        return 't';
+      }
+    },
+    max: {
+      type: Date,
+      default: function _default() {
+        return MAX_TIME;
+      }
+    },
+    min: {
+      type: Date,
+      default: function _default() {
+        return MIN_TIME;
+      }
+    },
+    nowButton: Boolean,
+    steps: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    },
+    smoothScroll: {
+      type: Boolean,
+      default: true
+    },
+    tabIndex: Number,
+    value: {
+      type: Date,
+      default: function _default() {
+        return null;
+      }
+    }
+  },
+  created: function created() {
+    this.dateFormatParts = this.intl.splitDateFormat(this.$props.format);
+    this.mergeValue = valueMerger(generateGetters(this.dateFormatParts));
+    this.hasActiveButton = this.hasActiveButton.bind(this);
+    this.currentState = this.$props.value || MIDNIGHT_DATE;
+    this.currentValue = this.$props.value;
+  },
+  inject: {
+    kendoIntlService: {
+      default: null
+    },
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  data: function data() {
+    return {
+      currentState: null,
+      currentValue: null,
+      valueDuringOnChange: undefined
+    };
+  },
+  computed: {
+    computedValue: function computedValue() {
+      var value = this.valueDuringOnChange !== undefined ? this.valueDuringOnChange : this.$props.value !== null ? this.$props.value : this.currentValue;
+      return value !== null ? cloneDate(value) : null;
+    },
+    intl: function intl() {
+      return provideIntlService(this);
+    },
+    current: function current() {
+      return this.currentState !== null ? cloneDate(this.currentState) : null;
+    }
+  },
+  mounted: function mounted() {
+    this.timePart = this.$refs.timePart;
+    this._acceptButton = this.$refs.acceptButton;
+    this._cancelButton = this.$refs.cancelButton;
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var kendoIntlService = inject('kendoIntlService', {});
+    var kendoLocalizationService = inject('kendoLocalizationService', {});
+    return {
+      v3: v3,
+      kendoIntlService: kendoIntlService,
+      kendoLocalizationService: kendoLocalizationService
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var _a = this.$props,
+        format = _a.format,
+        cancelButton = _a.cancelButton,
+        disabled = _a.disabled,
+        tabIndex = _a.tabIndex,
+        smoothScroll = _a.smoothScroll,
+        min = _a.min,
+        max = _a.max,
+        boundRange = _a.boundRange,
+        nowButton = _a.nowButton,
+        steps = _a.steps;
+    var localizationService = provideLocalizationService(this);
+    var cancelMessage = localizationService.toLanguageString(timePickerCancel, messages[timePickerCancel]);
+    var setMessage = localizationService.toLanguageString(timePickerSet, messages[timePickerSet]);
+    return h("div", {
+      tabindex: !disabled ? tabIndex || 0 : undefined,
+      attrs: this.v3 ? undefined : {
+        tabindex: !disabled ? tabIndex || 0 : undefined
+      },
+      "class": classNames('k-timeselector k-reset', {
+        'k-disabled': disabled
+      }),
+      onKeydown: this.handleKeyDown,
+      on: this.v3 ? undefined : {
+        "keydown": this.handleKeyDown
+      }
+    }, [// @ts-ignore  function children
+    h(TimePart, {
+      ref: 'timePart',
+      value: this.current,
+      attrs: this.v3 ? undefined : {
+        value: this.current,
+        format: format,
+        smoothScroll: smoothScroll,
+        min: min,
+        max: max,
+        boundRange: boundRange,
+        disabled: disabled,
+        nowButton: nowButton,
+        steps: steps
+      },
+      onChange: this.handleChange,
+      on: this.v3 ? undefined : {
+        "change": this.handleChange,
+        "nowclick": this.handleNowClick,
+        "focus": this.handleFocus,
+        "blur": this.handleBlur
+      },
+      onNowclick: this.handleNowClick,
+      format: format,
+      smoothScroll: smoothScroll,
+      min: min,
+      max: max,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      boundRange: boundRange,
+      disabled: disabled,
+      nowButton: nowButton,
+      steps: steps
+    }), h("div", {
+      "class": "k-time-footer k-actions k-actions-stretched"
+    }, [cancelButton && // @ts-ignore  function children
+    h(Button, {
+      type: "button",
+      attrs: this.v3 ? undefined : {
+        type: "button",
+        title: cancelMessage,
+        "aria-label": cancelMessage
+      },
+      ref: 'cancelButton',
+      "class": "k-time-cancel",
+      onClick: this.handleReject,
+      on: this.v3 ? undefined : {
+        "click": this.handleReject
+      },
+      title: cancelMessage,
+      "aria-label": cancelMessage
+    }, this.v3 ? function () {
+      return [cancelMessage];
+    } : [cancelMessage]), // @ts-ignore  function children
+    h(Button, {
+      type: "button",
+      attrs: this.v3 ? undefined : {
+        type: "button",
+        themeColor: 'primary',
+        title: setMessage,
+        "aria-label": setMessage
+      },
+      ref: 'acceptButton',
+      themeColor: 'primary',
+      "class": "k-time-accept",
+      onClick: this.handleAccept,
+      on: this.v3 ? undefined : {
+        "click": this.handleAccept
+      },
+      title: setMessage,
+      "aria-label": setMessage
+    }, this.v3 ? function () {
+      return [setMessage];
+    } : [setMessage])])]);
+  },
+  methods: {
+    handleBlur: function handleBlur(event) {
+      this.$emit('blur', event);
+    },
+    handleFocus: function handleFocus(event) {
+      this.$emit('focus', event);
+    },
+    focusActiveList: function focusActiveList() {
+      if (!this.timePart) {
+        return;
+      }
+
+      this.timePart.focus({
+        preventScroll: true
+      });
+    },
+    hasActiveButton: function hasActiveButton() {
+      if (!this._acceptButton) {
+        return false;
+      }
+
+      return canUseDOM && (document.activeElement === this._acceptButton.$el || document.activeElement === this._cancelButton.$el);
+    },
+    handleKeyDown: function handleKeyDown(event) {
+      var keyCode = event.keyCode;
+      this.$emit('keydown', event);
+
+      switch (keyCode) {
+        case Keys.enter:
+          if (!this.hasActiveButton()) {
+            this.handleAccept(event);
+          }
+
+          return;
+
+        default:
+          return;
+      }
+    },
+    handleAccept: function handleAccept(event) {
+      var value = this.mergeValue(cloneDate(this.computedValue || getNow()), this.timePart ? this.timePart.computedValue : this.current);
+      this.currentValue = value;
+      this.valueDuringOnChange = value;
+      this.$emit('change', {
+        event: event,
+        value: this.computedValue,
+        target: this
+      });
+      this.valueDuringOnChange = undefined;
+    },
+    handleReject: function handleReject(event) {
+      this.currentState = this.computedValue;
+      this.$emit('reject', event);
+    },
+    handleNowClick: function handleNowClick(event) {
+      var now = this.mergeValue(cloneDate(this.computedValue || getNow()), getNow());
+      this.currentState = now;
+      this.currentValue = now;
+      this.valueDuringOnChange = now;
+      this.$emit('change', {
+        event: event,
+        value: this.computedValue,
+        target: this
+      });
+      this.valueDuringOnChange = undefined;
+    },
+    handleChange: function handleChange(candidate) {
+      this.currentState = candidate;
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var TimeSelector = TimeSelectorVue2;
+export { TimeSelector, TimeSelectorVue2 };

package/dist/esm/timepicker/models/IncrementalSteps.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The interface which defines all possible incremental steps in the TimePicker.
+ */
+export interface TimePickerIncrementalSteps {
+    hour?: number;
+    minute?: number;
+    second?: number;
+}

package/dist/esm/timepicker/models/IncrementalSteps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/timepicker/models/ListItem.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @hidden
+ */
+export interface ListItem {
+    text: string;
+    value: Date;
+}

package/dist/esm/timepicker/models/ListItem.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/timepicker/models/ListService.d.ts

@@ -0,0 +1,15 @@
+import { ListItem } from './ListItem';
+import { ListServiceSettings } from './ListServiceSettings';
+/**
+ * @hidden
+ */
+export interface ListService {
+    apply(value: Date, candidate: Date): Date;
+    configure(settings: ListServiceSettings): void;
+    data(value?: Date): ListItem[];
+    isRangeChanged(min: Date, max: Date): boolean;
+    limitRange(min: Date, max: Date, value?: Date): Date[];
+    total(value?: Date): number;
+    selectedIndex(value: Date): number;
+    valueInList(value: Date): boolean;
+}

package/dist/esm/timepicker/models/ListService.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/timepicker/models/ListServiceSettings.d.ts

@@ -0,0 +1,12 @@
+import { DateFormatPart } from '@progress/kendo-vue-intl';
+/**
+ * @hidden
+ */
+export interface ListServiceSettings {
+    boundRange: boolean;
+    insertUndividedMax: boolean;
+    min: Date;
+    max: Date;
+    part: DateFormatPart;
+    step: number;
+}

package/dist/esm/timepicker/models/ListServiceSettings.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/timepicker/models/TimePart.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @hidden
+ */
+export declare const TIME_PART: {
+    dayperiod: string;
+    hour: string;
+    millisecond: string;
+    minute: string;
+    second: string;
+};

package/dist/esm/timepicker/models/TimePart.js

@@ -0,0 +1,10 @@
+/**
+ * @hidden
+ */
+export var TIME_PART = {
+    dayperiod: 'dayperiod',
+    hour: 'hour',
+    millisecond: 'millisecond',
+    minute: 'minute',
+    second: 'second'
+};

package/dist/esm/timepicker/models/TimePickerSettings.d.ts

@@ -0,0 +1,168 @@
+import { DateInputFormatPlaceholder } from '../../dateinput/models/format-placeholder';
+import { TimePickerIncrementalSteps } from './IncrementalSteps';
+import { DateInputsPopupSettings } from '../../PopupSettings';
+import { DateFormatOptions } from '@progress/kendo-vue-intl';
+/**
+ * @hidden
+ */
+export interface TimePickerSettings {
+    /**
+     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     * For example these elements could contain error or hint message.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Determines whether to display the **Cancel** button in the popup.
+     */
+    cancelButton?: boolean;
+    /**
+     * 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.
+     */
+    nowButton?: boolean;
+    /**
+     * Sets the default state of the popup upon render ([see example]({% slug default_value_timepicker %}#toc-setting-the-default-popup-state)).
+     */
+    defaultShow?: boolean;
+    /**
+     * Determines whether the TimePicker is disabled ([see example]({% slug disabled_timepicker %})).
+     */
+    disabled?: boolean;
+    /**
+     * Specifies the date format that is used to display the input value ([see example]({% slug formats_timepicker %})).
+     */
+    format?: string | DateFormatOptions;
+    /**
+     * Defines the descriptions of the format sections in the input field ([see example]({% slug placeholders_timepicker %})).
+     */
+    formatPlaceholder?: DateInputFormatPlaceholder;
+    /**
+     * Specifies the `id` of the TimePicker.
+     */
+    id?: string;
+    /**
+     * Specifies the greatest valid time ([see example]({% slug timeranges_timepicker %})).
+     */
+    max?: Date;
+    /**
+     * Specifies the smallest valid time ([see example]({% slug timeranges_timepicker %})).
+     */
+    min?: Date;
+    /**
+     * Specifies the `name` property of the `input` DOM element.
+     */
+    name?: string;
+    /**
+     * Renders a floating label for the TimePicker.
+     */
+    label?: string;
+    /**
+     * Specifies the value of the placeholder.
+     */
+    placeholder?: string;
+    /**
+     * Configures the `size` of the TimeInput.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `class`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
+    /**
+     * Configures the `roundness` of the TimeInput.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - circle
+     * - full
+     * - null—Does not set a rounded `class`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
+    /**
+     * Configures the `fillMode` of the TimeInput.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - link
+     * - null—Does not set a fillMode `class`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'outline' | 'flat' | string;
+    /**
+     * Fires each time any of the TimePicker elements gets blurred.
+     */
+    onBlur?: (event: any) => void;
+    /**
+     * Fires each time the user focuses any of the TimePicker elements.
+     */
+    onFocus?: (event: any) => void;
+    /**
+     * Fires when the icon element is clicked.
+     */
+    onIconclick?: (event: any) => void;
+    /**
+     * Configures the popup options of the TimePicker.
+     *
+     * The available options are:
+     * - `animate: Boolean`—Controls the popup animation. By default, the open and close animations are enabled.
+     * - `appendTo:`— Defines the container to which the Popup will be appended. Defaults to [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body).
+     * - `popupClass: String`—Specifies a list of CSS classes that are used to style the popup.
+     */
+    popupSettings?: DateInputsPopupSettings;
+    /**
+     * Specifies if a time selector will be displayed ([see example]({% slug controlled_timepicker %}#toc-controlling-the-popup-state)).
+     */
+    show?: boolean;
+    /**
+     * Configures the incremental steps of the TimePicker ([see example]({% slug incrementalsteps_timepicker %})).
+     *
+     * > If the incremental step is greater than `1`, the **Now** button will be hidden.
+     */
+    steps?: TimePickerIncrementalSteps;
+    /**
+     * Toggles the smooth scroll animation on time click. By default, the animation is enabled.
+     */
+    smoothScroll?: boolean;
+    /**
+     * Sets the `tabIndex` property of the TimePicker.
+     */
+    tabIndex?: number;
+    /**
+     * Sets the title of the `input` element of the TimePicker.
+     */
+    title?: string;
+    /**
+     * Specifies the width of the TimePicker.
+     */
+    width?: number | string;
+    /**
+     * Enables the customization or the override of the default Popup which is rendered by the TimePicker
+     * ([see example]({% slug custom_rendering_timepicker %}#toc-customizing-the-popup)).
+     */
+    popup?: any;
+    /**
+     * Enables the customization or the override of the default DateInput which is rendered by the TimePicker
+     * ([see example]({% slug custom_rendering_timepicker %}#toc-customizing-the-dateinput)).
+     */
+    dateInput?: any;
+    /**
+     * Specifies the validate of the TimePicker.
+     */
+    validate?: boolean;
+}

package/dist/esm/timepicker/models/TimePickerSettings.js

@@ -0,0 +1,2 @@
+export {};
+// tslint:enable:max-line-length

package/dist/esm/timepicker/models/index.d.ts

@@ -0,0 +1,7 @@
+import { TimePickerIncrementalSteps } from './IncrementalSteps';
+import { TimePickerSettings } from './TimePickerSettings';
+import { ListItem } from './ListItem';
+import { ListService } from './ListService';
+import { ListServiceSettings } from './ListServiceSettings';
+import { TIME_PART } from './TimePart';
+export { TimePickerIncrementalSteps, TimePickerSettings, ListItem, ListService, ListServiceSettings, TIME_PART };

package/dist/esm/timepicker/models/index.js

@@ -0,0 +1,2 @@
+import { TIME_PART } from './TimePart.js';
+export { TIME_PART };

package/dist/esm/timepicker/services/DOMService.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @hidden
+ */
+export declare class DOMService {
+    itemHeight: number;
+    timeListHeight: number;
+    didCalculate: boolean;
+    ensureHeights(): void;
+    calculateHeights(container?: HTMLElement): void;
+}