@progress/kendo-vue-inputs 3.5.0 → 3.5.1-dev.202208150613

package/dist/esm/checkbox/Checkbox.d.ts

@@ -0,0 +1,79 @@
+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 { LocalizationService } from '@progress/kendo-vue-intl';
+import { CheckboxProps } from './interfaces/CheckboxProps';
+/**
+ * @hidden
+ */
+export interface CheckboxHandle {
+    element: any;
+    focus: any;
+}
+/**
+ * @hidden
+ */
+export interface CheckboxData {
+    valueDuringOnChange?: any;
+    currentValue?: any;
+    currentChecked?: boolean;
+    currentDir: string;
+}
+/**
+ * @hidden
+ */
+export interface CheckboxState {
+    defaultValidationMessage: string;
+    optionalMessage: string;
+    localizationService: LocalizationService;
+    calculatedId: string;
+    input: any;
+    inputRef: any;
+    v3: boolean;
+}
+/**
+ * @hidden
+ */
+export interface CheckboxMethods {
+    [key: string]: any;
+    localizeMessage: (message: string) => string;
+    focusElement: () => void;
+    setValue: (e: any, val: boolean) => void;
+    onChangeHandler: (e: any) => void;
+    onKeyDownHandler: (e: any) => void;
+    onFocusHandler: (e: any) => void;
+    onBlurHandler: (e: any) => void;
+    setValidity: () => void;
+}
+/**
+ * @hidden
+ */
+export interface CheckboxComputed {
+    [key: string]: any;
+    valueIsBooleanOrNull: boolean;
+    isCheckedControlled: boolean;
+    isValueControlled: boolean;
+    computedValue: any;
+    computedChecked?: boolean;
+    useValueAsChecked: boolean;
+    checkedProp?: any;
+    valueProp: any;
+    indeterminateProp: any;
+    isValid: boolean;
+}
+/**
+ * @hidden
+ */
+export interface CheckboxAll extends Vue2type, CheckboxMethods, CheckboxState, CheckboxData, CheckboxComputed {
+}
+/**
+ * @hidden
+ */
+declare let CheckboxVue2: ComponentOptions<CheckboxAll, DefaultData<CheckboxData>, DefaultMethods<CheckboxAll>, CheckboxComputed, RecordPropsDefinition<CheckboxProps>>;
+/**
+ * @hidden
+ */
+declare const Checkbox: DefineComponent<CheckboxProps, any, CheckboxData, CheckboxComputed, CheckboxMethods, {}, {}, {}, string, CheckboxProps, CheckboxProps, {}>;
+export { Checkbox, CheckboxVue2 };

package/dist/esm/checkbox/Checkbox.js

@@ -0,0 +1,373 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var ref = allVue.ref;
+var inject = allVue.inject;
+import { Keys, classNames, guid, getTabIndex, getDefaultSlots, validatePackage, templateRendering, getTemplate, getListeners, kendoThemeMaps, setRef, getRef } from '@progress/kendo-vue-common';
+import { packageMetadata } from '../package-metadata.js';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages, checkboxValidation, checkboxOptionalText } from './../messages.js';
+/**
+ * @hidden
+ */
+
+var CheckboxVue2 = {
+  name: 'KendoCheckbox',
+  // @ts-ignore
+  emits: {
+    'changemodel': null,
+    'update:modelValue': null,
+    change: null,
+    focus: null,
+    blur: null
+  },
+  model: {
+    event: 'changemodel'
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  props: {
+    checked: {
+      type: Boolean,
+      default: undefined
+    },
+    defaultChecked: {
+      type: Boolean,
+      default: undefined
+    },
+    defaultValue: {
+      type: [String, Boolean],
+      default: undefined
+    },
+    modelValue: {
+      type: [String, Boolean],
+      default: undefined
+    },
+    dir: String,
+    disabled: Boolean,
+    id: String,
+    ariaLabelledBy: String,
+    ariaDescribedBy: String,
+    label: String,
+    labelRender: [String, Number, Boolean, Object],
+    labelPlacement: String,
+    labelOptional: Boolean,
+    name: String,
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return [null, 'small', 'medium', 'large'].includes(value);
+      }
+    },
+    rounded: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return [null, 'small', 'medium', 'large'].includes(value);
+      }
+    },
+    tabIndex: Number,
+    value: {
+      type: [String, Boolean],
+      default: undefined
+    },
+    validationMessage: String,
+    required: Boolean,
+    valid: {
+      type: Boolean,
+      default: undefined
+    },
+    validityStyles: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data: function data() {
+    return {
+      valueDuringOnChange: undefined,
+      currentDir: 'ltr',
+      currentChecked: undefined,
+      currentValue: undefined
+    };
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+    this.calculatedId = guid();
+
+    if (this.$props.defaultChecked !== undefined) {
+      this.currentChecked = this.$props.defaultChecked;
+    }
+
+    if (this.$props.defaultValue !== undefined) {
+      this.currentValue = this.$props.defaultValue;
+    }
+
+    this.currentDir = this.$props.dir;
+  },
+  computed: {
+    valueIsBooleanOrNull: function valueIsBooleanOrNull() {
+      var value = this.$props.value;
+      return typeof value === 'boolean' || value === null;
+    },
+    isCheckedControlled: function isCheckedControlled() {
+      return this.$props.checked !== undefined;
+    },
+    isValueControlled: function isValueControlled() {
+      return this.$props.value !== undefined && this.valueIsBooleanOrNull;
+    },
+    computedValue: function computedValue() {
+      return this.$data.valueDuringOnChange !== undefined ? this.$data.valueDuringOnChange : this.$props.value !== undefined ? this.$props.value : this.$props.modelValue !== undefined ? this.$props.modelValue : this.$data.currentValue;
+    },
+    computedChecked: function computedChecked() {
+      return this.$data.valueDuringOnChange !== undefined ? this.$data.valueDuringOnChange : this.$props.checked !== undefined ? this.$props.checked : this.$props.modelValue !== undefined ? this.$props.modelValue : this.$data.currentChecked;
+    },
+    useValueAsChecked: function useValueAsChecked() {
+      return this.computedChecked === undefined && this.computedValue;
+    },
+    checkedProp: function checkedProp() {
+      return this.useValueAsChecked ? this.computedValue : this.computedChecked;
+    },
+    valueProp: function valueProp() {
+      var value = this.$props.value;
+      return this.useValueAsChecked || this.isValueControlled ? value === null ? value : undefined : value || this.computedValue;
+    },
+    indeterminateProp: function indeterminateProp() {
+      return this.checkedProp === null || this.valueProp === null;
+    },
+    isValid: function isValid() {
+      var valid = this.$props.valid;
+      return valid !== undefined ? valid : !this.$props.required ? true : this.computedChecked ? true : false;
+    }
+  },
+  mounted: function mounted() {
+    this.input = getRef(this, 'input');
+
+    if (!this.currentDir && window && this.$el) {
+      // Note: getComputedStyle forces reflow
+      var direction = window.getComputedStyle(this.$el).direction;
+
+      if (direction) {
+        this.currentDir = direction;
+      }
+    }
+
+    this.setValidity();
+  },
+  updated: function updated() {
+    if (!this.input) {
+      this.input = getRef(this, 'input');
+    }
+
+    this.setValidity();
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var inputRef = ref(null);
+    var kendoLocalizationService = inject('kendoLocalizationService', {});
+    return {
+      v3: v3,
+      inputRef: inputRef,
+      kendoLocalizationService: kendoLocalizationService
+    };
+  },
+  render: function render(createElement) {
+    var _a;
+
+    var h = gh || createElement;
+    var _b = this.$props,
+        ariaDescribedBy = _b.ariaDescribedBy,
+        ariaLabelledBy = _b.ariaLabelledBy,
+        disabled = _b.disabled,
+        id = _b.id,
+        label = _b.label,
+        labelRender = _b.labelRender,
+        labelPlacement = _b.labelPlacement,
+        name = _b.name,
+        labelOptional = _b.labelOptional,
+        tabIndex = _b.tabIndex,
+        required = _b.required,
+        validityStyles = _b.validityStyles,
+        size = _b.size,
+        rounded = _b.rounded;
+    var defaultSlot = getDefaultSlots(this);
+    var renderedLabel = label;
+    this.localizationService = provideLocalizationService(this);
+    this.defaultValidationMessage = this.localizeMessage(checkboxValidation);
+    this.optionalMessage = this.localizeMessage(checkboxOptionalText);
+    var checkboxClasses = classNames({
+      'k-disabled': disabled
+    });
+    var inputClasses = classNames((_a = {
+      'k-checkbox': true
+    }, _a["k-checkbox-".concat(kendoThemeMaps.sizeMap[size])] = size, _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded])] = rounded, _a['k-indeterminate'] = this.indeterminateProp, _a['k-invalid k-invalid'] = !(this.isValid || validityStyles !== undefined || validityStyles === true), _a));
+
+    var checkboxInput = function checkboxInput() {
+      return h("input", {
+        type: 'checkbox',
+        attrs: this.v3 ? undefined : {
+          type: 'checkbox',
+          name: name,
+          id: id || this.calculatedId,
+          "aria-labelledby": ariaLabelledBy,
+          "aria-describedby": ariaDescribedBy,
+          disabled: disabled,
+          tabindex: getTabIndex(tabIndex, disabled),
+          role: 'checkbox',
+          required: required !== undefined ? required : false,
+          "aria-checked": this.computedChecked || this.checkedProp ? true : this.indeterminateProp ? 'mixed' : false,
+          "aria-disabled": disabled || undefined
+        },
+        "class": inputClasses,
+        name: name,
+        id: id || this.calculatedId,
+        ref: setRef(this, 'input'),
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy,
+        checked: this.v3 ? Boolean(this.checkedProp) : null,
+        domProps: this.v3 ? undefined : {
+          "checked": Boolean(this.checkedProp)
+        },
+        disabled: disabled,
+        tabindex: getTabIndex(tabIndex, disabled),
+        role: 'checkbox',
+        required: required !== undefined ? required : false,
+        "aria-checked": this.computedChecked || this.checkedProp ? true : this.indeterminateProp ? 'mixed' : false,
+        "aria-disabled": disabled || undefined,
+        onChange: this.onChangeHandler,
+        on: this.v3 ? undefined : {
+          "change": this.onChangeHandler,
+          "keydown": this.onKeyDownHandler,
+          "focus": this.onFocusHandler,
+          "blur": this.onBlurHandler
+        },
+        onKeydown: this.onKeyDownHandler,
+        onFocus: this.onFocusHandler,
+        onBlur: this.onBlurHandler
+      });
+    };
+
+    if (labelRender) {
+      var renderTemplate = labelRender ? templateRendering.call(this, labelRender, getListeners.call(this)) : null;
+      renderedLabel = getTemplate.call(this, {
+        h: h,
+        template: renderTemplate
+      });
+    }
+
+    var checkboxLabel = function checkboxLabel() {
+      return renderedLabel !== undefined ? h("label", {
+        "class": 'k-checkbox-label',
+        "for": id || this.calculatedId,
+        attrs: this.v3 ? undefined : {
+          "for": id || this.calculatedId
+        },
+        style: {
+          userSelect: 'none'
+        }
+      }, [renderedLabel, labelOptional && h("span", {
+        "class": "k-label-optional"
+      }, [this.optionalMessage])]) : null;
+    };
+
+    return labelPlacement === 'before' ? h("span", {
+      "class": checkboxClasses,
+      dir: 'rtl',
+      attrs: this.v3 ? undefined : {
+        dir: 'rtl'
+      }
+    }, [checkboxInput.call(this), checkboxLabel.call(this), defaultSlot]) : h("span", {
+      "class": checkboxClasses,
+      dir: this.currentDir,
+      attrs: this.v3 ? undefined : {
+        dir: this.currentDir
+      }
+    }, [checkboxInput.call(this), checkboxLabel.call(this), defaultSlot]);
+  },
+  methods: {
+    setValidity: function setValidity() {
+      var isValid = this.$props.valid !== undefined ? this.$props.valid : !this.$props.required ? true : this.computedChecked ? true : false; // @ts-ignore
+
+      if (this.input && this.input.setCustomValidity) {
+        // @ts-ignore
+        this.input.setCustomValidity(isValid ? '' : this.$props.validationMessage || this.defaultValidationMessage);
+      }
+    },
+    localizeMessage: function localizeMessage(message) {
+      return this.localizationService.toLanguageString(message, messages[message]);
+    },
+    focusElement: function focusElement() {
+      if (this.input) {
+        // @ts-ignore
+        this.input.focus();
+      }
+    },
+    setValue: function setValue(e, val) {
+      this.$data.valueDuringOnChange = val;
+      var that = this;
+      this.$nextTick(function () {
+        if (!that.isCheckedControlled && !that.isValueControlled && !that.$props.disabled) {
+          that.currentValue = val;
+          that.currentChecked = val;
+        }
+
+        if (!that.$props.disabled) {
+          var handle = {
+            element: that.$el,
+            focus: null // focusElement
+
+          };
+          that.$emit('changemodel', val);
+          that.$emit('update:modelValue', val);
+          that.$emit('change', {
+            e: e,
+            handle: handle,
+            value: val
+          });
+        }
+
+        this.$data.valueDuringOnChange = undefined;
+      });
+    },
+    onChangeHandler: function onChangeHandler(e) {
+      var newValue = e.target.checked;
+      this.setValue(e, newValue);
+    },
+    onKeyDownHandler: function onKeyDownHandler(e) {
+      if (this.$props.disabled) {
+        return;
+      }
+
+      var keyCode = e.keyCode;
+      var currentVal = e.currentTarget.checked;
+
+      if (keyCode === Keys.space) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.setValue(e, !currentVal);
+      }
+    },
+    onBlurHandler: function onBlurHandler(e) {
+      if (!this.$props.disabled) {
+        this.$emit('blur', e);
+      }
+    },
+    onFocusHandler: function onFocusHandler(e) {
+      if (!this.$props.disabled) {
+        this.$emit('focus', e);
+      }
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var Checkbox = CheckboxVue2;
+export { Checkbox, CheckboxVue2 };

package/dist/esm/checkbox/interfaces/CheckboxChangeEvent.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The arguments for the `onChange` Checkbox event.
+ */
+export interface CheckboxChangeEvent {
+    /**
+     * The new value of the Checkbox.
+     */
+    value: boolean;
+}

package/dist/esm/checkbox/interfaces/CheckboxChangeEvent.js

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

package/dist/esm/checkbox/interfaces/CheckboxFocusEvent.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The arguments for the `onFocus` Checkbox event.
+ */
+export interface CheckboxFocusEvent {
+}

package/dist/esm/checkbox/interfaces/CheckboxFocusEvent.js

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

package/dist/esm/checkbox/interfaces/CheckboxProps.d.ts

@@ -0,0 +1,110 @@
+import { ToggleBaseProps } from '../../interfaces/ToggleBaseProps';
+import { FormComponentProps } from '@progress/kendo-vue-common';
+import { CheckboxChangeEvent } from './CheckboxChangeEvent';
+import { CheckboxFocusEvent } from './CheckboxFocusEvent';
+/**
+ * Represents the props of the [Kendo UI for Vue Checkbox component]({% slug overview_checkbox %}).
+ */
+export interface CheckboxProps extends ToggleBaseProps, FormComponentProps {
+    /**
+     * Sets the checked state of the Checkbox.
+     * Set to null to enable the indeterminate state of the Checkbox ([see example]({% slug overview_checkbox %})).
+     */
+    checked?: boolean | null;
+    /**
+     * @hidden
+     */
+    modelValue?: string | number | string[] | boolean | null;
+    /**
+     * If the type is different than boolean and the `checked` property is provided it's
+     *  passed to the underlying `input` element.
+     * If set to boolean and the `checked` property is omitted sets the checked state of the Checkbox.
+     * Set null to enable the indeterminate state of the Checkbox ([see example]({% slug overview_checkbox %})).
+     */
+    value?: string | number | string[] | boolean | null;
+    /**
+     * Sets the default value of checked attribute when used in
+     *  uncontrolled mode ([see example]({% slug default_state %})).
+     */
+    defaultChecked?: boolean;
+    /**
+     * The default value of the Checkbox.
+     */
+    defaultValue?: any;
+    /**
+     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
+     */
+    dir?: string;
+    /**
+     * Sets the disabled state of the Checkbox
+     * ([see example]({% slug disabled_checkbox %})).
+     */
+    disabled?: boolean;
+    /**
+     * Sets the `id` of the Checkbox.
+     */
+    id?: string;
+    /**
+     * Configures the `size` of the Checkbox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
+    /**
+     * Configures the `rounded` style of the Checkbox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | string;
+    /**
+     * 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;
+    /**
+     * Sets the label of the Checkbox component ([see example]({% slug labels_checkbox %})).
+     */
+    label?: string | HTMLElement;
+    /**
+     * Sets the label render template of the Checkbox component.
+     *  Accepts a slot name, a `render` function, or a Vue component.
+     */
+    labelRender?: any;
+    /**
+     * Sets the label position of the Checkbox component 'before' | 'after' ([see example]({% slug labels_checkbox %})).
+     */
+    labelPlacement?: string;
+    /**
+     * Sets the optional text after the label of the Checkbox component.
+     */
+    labelOptional?: boolean;
+    /**
+     * The event handler that will be fired when the user edits the value.
+     */
+    onChange?: (event: CheckboxChangeEvent) => void;
+    /**
+     * The event handler that will be fired when Checkbox is focused.
+     */
+    onFocus?: (event: CheckboxFocusEvent) => void;
+    /**
+     * Sets the `tabIndex` property of the Checkbox.
+     * Defaults to `0`.
+     */
+    tabIndex?: number;
+}

package/dist/esm/checkbox/interfaces/CheckboxProps.js

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

package/dist/esm/colors/ColorContrastLabels.d.ts

@@ -0,0 +1,49 @@
+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 { RGBA } from './models/rgba';
+/**
+ * @hidden
+ */
+export interface ColorContrastLabelsProps {
+    bgColor: RGBA;
+    rgba: RGBA;
+}
+/**
+ * @hidden
+ */
+export interface ColorContrastLabelsState {
+}
+/**
+ * @hidden
+ */
+export interface ColorContrastLabelsComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ColorContrastLabelsMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ColorContrastLabelsData {
+}
+/**
+ * @hidden
+ */
+export interface ColorContrastLabelsAll extends Vue2type, ColorContrastLabelsMethods, ColorContrastLabelsData, ColorContrastLabelsComputed, ColorContrastLabelsState {
+}
+/**
+ * @hidden
+ */
+declare let ColorContrastLabelsVue2: ComponentOptions<ColorContrastLabelsAll, DefaultData<ColorContrastLabelsData>, DefaultMethods<ColorContrastLabelsAll>, ColorContrastLabelsComputed, RecordPropsDefinition<ColorContrastLabelsProps>>;
+/**
+ * @hidden
+ */
+declare const ColorContrastLabels: DefineComponent<ColorContrastLabelsProps, any, ColorContrastLabelsData, ColorContrastLabelsComputed, ColorContrastLabelsMethods, {}, {}, {}, string, ColorContrastLabelsProps, ColorContrastLabelsProps, {}>;
+export { ColorContrastLabels, ColorContrastLabelsVue2 };