@progress/kendo-vue-inputs 5.3.0-dev.202409130647 → 5.3.0-develop.1

package/dist/npm/textarea/TextArea.js

@@ -1,449 +0,0 @@
-"use strict";
-
-var __assign = undefined && undefined.__assign || function () {
-  __assign = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) {
-        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-      }
-    }
-    return t;
-  };
-  return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TextAreaVue2 = exports.TextArea = void 0;
-// @ts-ignore
-var Vue = require("vue");
-var allVue = Vue;
-var gh = allVue.h;
-var isV3 = allVue.version && allVue.version[0] === '3';
-var kendo_vue_common_1 = require("@progress/kendo-vue-common");
-var package_metadata_1 = require("../package-metadata");
-var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
-var main_1 = require("../main");
-/**
- * @hidden
- */
-var TextAreaVue2 = {
-  name: 'KendoTextArea',
-  model: {
-    event: 'changemodel'
-  },
-  // @ts-ignore
-  emits: {
-    'input': null,
-    'change': null,
-    'changemodel': null,
-    'update:modelValue': null,
-    'focus': null,
-    'blur': null
-  },
-  props: {
-    title: String,
-    ariaDescribedBy: String,
-    ariaLabelledBy: String,
-    autoSize: Boolean,
-    modelValue: {
-      type: [String, Array, Number],
-      default: undefined
-    },
-    defaultValue: [String, Number],
-    dir: String,
-    disabled: Boolean,
-    readOnly: Boolean,
-    rows: Number,
-    id: String,
-    name: String,
-    validationMessage: 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', 'full'].includes(value);
-      }
-    },
-    fillMode: {
-      type: String,
-      default: 'solid',
-      validator: function validator(value) {
-        return [null, 'solid', 'flat', 'outline'].includes(value);
-      }
-    },
-    required: Boolean,
-    placeholder: String,
-    tabIndex: Number,
-    valid: {
-      type: Boolean,
-      default: undefined
-    },
-    value: [String, Array, Number],
-    validityStyles: {
-      type: Boolean,
-      default: true
-    },
-    iconName: String,
-    inputPrefix: kendo_vue_common_1.templateDefinition,
-    inputSuffix: kendo_vue_common_1.templateDefinition,
-    showValidationIcon: Boolean,
-    showLoadingIcon: Boolean,
-    showClearButton: Boolean,
-    inputClass: String,
-    wrapperClass: String,
-    flow: {
-      type: String,
-      default: 'horizontal',
-      validator: function validator(value) {
-        return ['horizontal', 'vertical'].includes(value);
-      }
-    },
-    resizable: {
-      type: String,
-      default: 'vertical',
-      validator: function validator(value) {
-        return ['both', 'horizontal', 'vertical', 'none'].includes(value);
-      }
-    }
-  },
-  created: function created() {
-    (0, kendo_vue_common_1.validatePackage)(package_metadata_1.packageMetadata);
-    this.calculatedId = (0, kendo_vue_common_1.guid)();
-  },
-  computed: {
-    resizableClass: function resizableClass() {
-      var _a = this.$props,
-        resizable = _a.resizable,
-        autoSize = _a.autoSize;
-      return autoSize || resizable === main_1.TextAreaResizeEnum.none ? 'k-resize-none' : resizable === main_1.TextAreaResizeEnum.vertical ? 'k-resize-y' : resizable === main_1.TextAreaResizeEnum.horizontal ? 'k-resize-x' : 'k-resize';
-    },
-    rootClassName: function rootClassName() {
-      var _a;
-      var _b = this.$props,
-        size = _b.size,
-        fillMode = _b.fillMode,
-        rounded = _b.rounded,
-        required = _b.required,
-        showLoadingIcon = _b.showLoadingIcon;
-      var invalid = this.validityStyles === true ? !this.isValid : false;
-      return _a = {
-        'k-input': true,
-        'k-textarea': true
-      }, _a["k-input-".concat(kendo_vue_common_1.kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-".concat(fillMode)] = fillMode, _a["k-rounded-".concat(kendo_vue_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-disabled'] = this.$props.disabled, _a['k-invalid'] = invalid, _a['k-required'] = required, _a['k-loading'] = showLoadingIcon, _a[this.resizableClass] = true, _a['!k-flex-col'] = this.flow === 'vertical', _a['!k-flex-row'] = this.flow === 'horizontal', _a[this.wrapperClass] = this.wrapperClass, _a;
-    },
-    inputInnerClass: function inputInnerClass() {
-      var _a;
-      return _a = {
-        'k-input-inner': true,
-        '!k-resize-none': true,
-        '!k-overflow-auto': true,
-        'k-flex': true
-      }, _a[this.inputClass] = this.inputClass, _a;
-    },
-    prefixRenderClass: function prefixRenderClass() {
-      return {
-        'k-input-prefix': true,
-        '!k-flex-col': this.flow === 'horizontal',
-        '!k-flex-row': this.flow === 'vertical',
-        '!k-align-items-start': this.flow === 'horizontal'
-      };
-    },
-    suffixRenderClass: function suffixRenderClass() {
-      return {
-        'k-input-suffix': true,
-        '!k-flex-col': this.flow === 'horizontal',
-        '!k-flex-row': this.flow === 'vertical',
-        '!k-align-items-start': this.flow === 'horizontal'
-      };
-    },
-    suffixIconWrapClass: function suffixIconWrapClass() {
-      return {
-        'k-flex-wrap': true,
-        '!k-align-items-start': true
-      };
-    },
-    computedValue: function computedValue() {
-      return this.$props.value !== undefined ? this.$props.value : this.$props.modelValue !== undefined ? this.$props.modelValue : this.currentValue;
-    },
-    isValid: function isValid() {
-      return this.valid !== undefined ? this.valid : !this.required ? true : this.computedValue ? true : false;
-    }
-  },
-  data: function data() {
-    return {
-      currentValue: this.$props.defaultValue,
-      textAreaHeight: 'auto',
-      currentDir: 'ltr'
-    };
-  },
-  watch: {
-    size: function size() {
-      this.textAreaHeight = 'auto';
-    },
-    computedValue: function computedValue() {
-      this.textAreaHeight = 'auto';
-    }
-  },
-  mounted: function mounted() {
-    this.element = this.v3 ? this.elementRef : this.$refs.element;
-    this.currentDir = this.$props.dir !== undefined ? this.$props.dir : (0, kendo_vue_common_1.isRtl)(this.$el) ? 'rtl' : 'ltr';
-    this.setValidity();
-  },
-  updated: function updated() {
-    this.element = this.v3 ? this.elementRef : this.$refs.element;
-    this.setValidity();
-  },
-  // @ts-ignore
-  setup: !isV3 ? undefined : function () {
-    var v3 = !!isV3;
-    return {
-      v3: v3
-    };
-  },
-  // @ts-ignore
-  render: function render(createElement) {
-    var _this = this;
-    var h = gh || createElement;
-    var _a = this.$props,
-      ariaDescribedBy = _a.ariaDescribedBy,
-      ariaLabelledBy = _a.ariaLabelledBy,
-      autoSize = _a.autoSize,
-      disabled = _a.disabled,
-      readOnly = _a.readOnly,
-      required = _a.required,
-      rows = _a.rows,
-      id = _a.id,
-      name = _a.name,
-      placeholder = _a.placeholder,
-      tabIndex = _a.tabIndex,
-      iconName = _a.iconName,
-      showValidationIcon = _a.showValidationIcon,
-      showLoadingIcon = _a.showLoadingIcon,
-      showClearButton = _a.showClearButton,
-      title = _a.title;
-    var textAreaAttrs = __assign({
-      id: id || this.calculatedId,
-      name: name,
-      disabled: disabled,
-      rows: rows,
-      title: title,
-      placeholder: placeholder,
-      readOnly: readOnly,
-      required: required,
-      tabIndex: (0, kendo_vue_common_1.getTabIndex)(tabIndex, disabled),
-      'aria-labelledby': ariaLabelledBy,
-      'aria-describedby': ariaDescribedBy,
-      'aria-multiline': true,
-      'aria-disabled': disabled || undefined
-    }, this.$attrs);
-    var inputPrefixTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.inputPrefix, kendo_vue_common_1.getListeners.call(this));
-    var inputSuffixTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.inputSuffix, kendo_vue_common_1.getListeners.call(this));
-    var inputPrefix = kendo_vue_common_1.getTemplate.call(this, {
-      h: h,
-      template: inputPrefixTemplate,
-      additionalProps: {
-        value: this.computedValue,
-        valid: this.isValid
-      }
-    });
-    var inputSuffix = kendo_vue_common_1.getTemplate.call(this, {
-      h: h,
-      template: inputSuffixTemplate,
-      additionalProps: {
-        value: this.computedValue,
-        valid: this.isValid
-      }
-    });
-    var textarea = h('textarea', __assign(__assign({}, textAreaAttrs), {
-      attrs: this.v3 ? undefined : textAreaAttrs,
-      class: this.inputInnerClass,
-      ref: this.v3 ? function (el) {
-        _this.elementRef = el;
-      } : 'element',
-      style: autoSize ? {
-        overflow: 'hidden',
-        height: this.textAreaHeight
-      } : {},
-      value: this.v3 ? this.computedValue : null,
-      domProps: this.v3 ? undefined : {
-        'value': this.computedValue
-      },
-      onChange: this.handleChange,
-      onInput: this.handleInput,
-      on: this.v3 ? undefined : {
-        'change': this.handleChange,
-        'focus': this.handleFocus,
-        'blur': this.handleBlur,
-        input: this.handleInput
-      },
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur
-    }));
-    var renderWithIcons = [iconName && h("span", {
-      "class": "k-flex-wrap"
-    }, [h(kendo_vue_common_1.Icon, {
-      name: iconName,
-      attrs: this.v3 ? undefined : {
-        name: iconName
-      },
-      "class": "k-input-icon"
-    })]), textarea, showValidationIcon && this.isValid && h("span", {
-      "class": this.suffixIconWrapClass
-    }, [h(kendo_vue_common_1.Icon, {
-      name: 'check',
-      attrs: this.v3 ? undefined : {
-        name: 'check'
-      },
-      "class": "k-input-validation-icon"
-    })]), showValidationIcon && !this.isValid && h("span", {
-      "class": this.suffixIconWrapClass
-    }, [h(kendo_vue_common_1.Icon, {
-      name: 'exclamation-circle',
-      attrs: this.v3 ? undefined : {
-        name: 'exclamation-circle',
-        icon: kendo_svg_icons_1.exclamationCircleIcon
-      },
-      icon: kendo_svg_icons_1.exclamationCircleIcon,
-      "class": "k-input-validation-icon"
-    })]), showLoadingIcon && h("span", {
-      "class": this.suffixIconWrapClass
-    }, [h(kendo_vue_common_1.Icon, {
-      name: 'loading',
-      attrs: this.v3 ? undefined : {
-        name: 'loading'
-      },
-      "class": 'k-input-loading-icon'
-    })]), showClearButton && this.computedValue && h("span", {
-      "class": this.suffixIconWrapClass
-    }, [h("span", {
-      onClick: this.clearClick,
-      on: this.v3 ? undefined : {
-        "click": this.clearClick
-      },
-      "class": "k-clear-value"
-    }, [h(kendo_vue_common_1.Icon, {
-      name: 'x',
-      attrs: this.v3 ? undefined : {
-        name: 'x',
-        icon: kendo_svg_icons_1.xIcon
-      },
-      icon: kendo_svg_icons_1.xIcon
-    })])])];
-    return h("span", {
-      "class": this.rootClassName,
-      dir: this.currentDir === 'rtl' ? this.currentDir : '',
-      attrs: this.v3 ? undefined : {
-        dir: this.currentDir === 'rtl' ? this.currentDir : ''
-      },
-      style: this.$attrs.style
-    }, [this.$props.inputPrefix && h("span", {
-      "class": this.prefixRenderClass
-    }, [inputPrefix]), iconName || showValidationIcon || showLoadingIcon || showClearButton ? h("span", {
-      "class": "k-hstack k-flex"
-    }, [renderWithIcons]) : renderWithIcons, this.$props.inputSuffix && h("span", {
-      "class": this.suffixRenderClass
-    }, [inputSuffix])]);
-  },
-  methods: {
-    setValidity: function setValidity() {
-      if (this.element && this.element.setCustomValidity) {
-        this.element.setCustomValidity(this.isValid ? '' : this.validationMessage || '');
-      }
-      if (this.element) {
-        this.textAreaHeight = "".concat(this.element.scrollHeight, "px");
-      }
-    },
-    clearClick: function clearClick(event) {
-      this.emitUpdate(event, 'change', '');
-    },
-    focus: function focus() {
-      if (this.element) {
-        this.element.focus();
-      }
-    },
-    emitUpdate: function emitUpdate(event, eventName, value) {
-      var newValue = value;
-      if (!this.$props.disabled) {
-        this.currentValue = newValue;
-      }
-      if (!this.$props.disabled) {
-        this.$emit('changemodel', newValue);
-        this.$emit('update:modelValue', newValue);
-        this.$emit(eventName, {
-          event: event,
-          component: this,
-          name: this.element.name,
-          value: newValue
-        });
-      }
-    },
-    handleChange: function handleChange(event) {
-      this.emitUpdate(event, 'change', event.target.value);
-    },
-    handleInput: function handleInput(event) {
-      this.emitUpdate(event, 'input', event.target.value);
-    },
-    handleFocus: function handleFocus(event) {
-      if (!this.$props.disabled) {
-        this.$emit('focus', {
-          event: event,
-          component: this,
-          name: this.element.name
-        });
-      }
-    },
-    handleBlur: function handleBlur(event) {
-      if (!this.$props.disabled) {
-        this.$emit('blur', {
-          event: event,
-          component: this,
-          name: this.element.name
-        });
-      }
-    }
-  }
-};
-exports.TextAreaVue2 = TextAreaVue2;
-/**
- * Represents the [Kendo UI for Vue Native TextArea component]({% slug overview_textarea %}).
- *
- * Accepts properties of type [TextAreaProps]({% slug api_inputs_textareaprops %}).
- *
- *
- * ```jsx
- * <template>
- *     <k-form
- *       @submit="handleSubmit">
- *       <formcontent />
- *    </k-form>
- * </template>
- * <script>
- * import { Form } from "@progress/kendo-vue-form";
- * import FormContent from './FormContent.vue';
- *
- * export default {
- *     components: {
- *       'k-form': Form,
- *       'formcontent': FormContent
- *     },
- *     methods: {
- *       handleSubmit (dataItem) {
- *          alert(JSON.stringify(dataItem, null, 2));
- *       }
- *     }
- * };
- *
- * </script>
- * ```
- */
-var TextArea = TextAreaVue2;
-exports.TextArea = TextArea;

package/dist/npm/textarea/interfaces/TextAreaBlurEvent.d.ts

@@ -1,5 +0,0 @@
-/**
- * The arguments for the `onBlur` TextArea event.
- */
-export interface TextAreaBlurEvent {
-}

package/dist/npm/textarea/interfaces/TextAreaBlurEvent.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/textarea/interfaces/TextAreaChangeEvent.d.ts

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

package/dist/npm/textarea/interfaces/TextAreaChangeEvent.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/textarea/interfaces/TextAreaFlow.d.ts

@@ -1,8 +0,0 @@
-/**
- * Specifies the flow direction of the TextArea sections.
- *
- * The possible values are:
- * * `vertical`(Default) —TextArea sections are placed from top to bottom.
- * * `horizontal`—TextArea sections are placed from left to right in `ltr`, and from right to left in `rtl` mode.
- */
-export declare type TextAreaFlow = 'horizontal' | 'vertical';

package/dist/npm/textarea/interfaces/TextAreaFlow.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/textarea/interfaces/TextAreaFocusEvent.d.ts

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

package/dist/npm/textarea/interfaces/TextAreaFocusEvent.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/textarea/interfaces/TextAreaProps.d.ts

@@ -1,185 +0,0 @@
-import { FormComponentProps } from '@progress/kendo-vue-common';
-import { TextAreaBlurEvent } from './TextAreaBlurEvent';
-import { TextAreaChangeEvent } from './TextAreaChangeEvent';
-import { TextAreaFlow } from './TextAreaFlow';
-import { TextAreaFocusEvent } from './TextAreaFocusEvent';
-import { TextAreaResize } from './TextAreaResize';
-/**
- * Represents the props of the [Kendo UI for Vue TextArea component]({% slug overview_textarea %}).
- */
-export interface TextAreaProps extends FormComponentProps {
-    /**
-     * 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;
-    /**
-     * Identifies the title of the TextArea component.
-     */
-    title?: string;
-    /**
-     * Defines the built-in [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength) property of the text inputs.
-     * * As the property is directly passed to the internal [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element, when defining it, it should be written as it is - `minlength`. Camel-case and kebap-case won't work in this scenario.
-     */
-    minlength?: string;
-    /**
-     * Defines the built-in [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength) property of the text inputs.
-     * * As the property is directly passed to the internal [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element, when defining it, it should be written as it is - `maxlength`. Camel-case and kebap-case won't work in this scenario.
-     */
-    maxlength?: string;
-    /**
-     * Specifies if the textarea element will resize its height automatically ([see example]({% slug sizing_textarea %})).
-     * Defaults to `false`.
-     */
-    autoSize?: boolean;
-    modelValue?: string | string[] | number;
-    /**
-     * Specifies a list of CSS classes that will be added to the TextArea.
-     */
-    className?: string;
-    /**
-     * The default value of the TextArea ([see example]({% slug default_textarea %})).
-     */
-    defaultValue?: string | string[] | number;
-    /**
-     * Represents the `dir` HTML attribute.
-     */
-    dir?: string;
-    /**
-     * Specifies if the TextArea is disabled ([see example]({% slug disabled_textarea %})).
-     */
-    disabled?: boolean;
-    /**
-     * Sets the read-only state of the TextArea.
-     */
-    readOnly?: boolean;
-    /**
-     * Specifies an exact height size for the TextArea to take ([see example]({% slug sizing_textarea %})).
-     */
-    rows?: number;
-    /**
-     * Sets the `id` of the TextArea.
-     */
-    id?: string;
-    /**
-     * Specifies the `name` property of the `textarea` DOM element.
-     *
-     * This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
-     */
-    name?: string;
-    /**
-     * The hint that is displayed when the TextArea is empty.
-     */
-    placeholder?: string;
-    /**
-     * Sets the `tabIndex` property of the TextArea.
-     * Defaults to `0`.
-     */
-    tabIndex?: number;
-    /**
-     * Configures the `size` of the NumericTextBox.
-     *
-     * 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 NumericTextBox.
-     *
-     * The available options are:
-     * - small
-     * - medium
-     * - large
-     * - full
-     * - null—Does not set a rounded `class`.
-     *
-     * @default `medium`
-     */
-    rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
-    /**
-     * Configures the `fillMode` of the NumericTextBox.
-     *
-     * The available options are:
-     * - solid
-     * - outline
-     * - flat
-     * - null—Does not set a fillMode `class`.
-     *
-     * @default `solid`
-     */
-    fillMode?: null | 'solid' | 'flat' | 'outline' | string;
-    /**
-     * Sets the value to be submitted ([see example]({% slug controlled_textarea %})).
-     */
-    value?: string | string[] | number;
-    /**
-     * If set to `false`, no visual representation of the invalid state of the component will be applied.
-     *
-     * This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
-     *
-     * @default true
-     */
-    validityStyles?: boolean;
-    /**
-     * Defines a string prop that controls the input icon. This property works only with the Kendo UI for Vue FontIcons.
-     * Check the [Icons]({% slug icons %}) article for more information about how the Font Icon can be loaded to your project.
-     */
-    iconName?: String;
-    /**
-     * Defines if the inputPrefix will be shown. Accepts a slot name, a `render` function, or a Vue component.
-     */
-    inputPrefix?: Boolean | String | Object | Function;
-    /**
-     * Defines if the inputSuffix will be shown. Accepts a slot name, a `render` function, or a Vue component.
-     */
-    inputSuffix?: Boolean | String | Object | Function;
-    /**
-     * Defines a boolean prop that controls whether to show the validation icon. Defaults to 'false'.
-     */
-    showValidationIcon?: Boolean;
-    /**
-     * Defines a boolean prop that controls whether to show the loading icon. Defaults to 'false'.
-     */
-    showLoadingIcon?: Boolean;
-    /**
-     * Defines a boolean prop that controls whether to show the clear icon. Defaults to 'false'.
-     */
-    showClearButton?: Boolean;
-    /**
-     * Defines additional class to the wrapper element.
-     */
-    wrapperClass?: String;
-    /**
-     * Defines the flow direction of the TextArea sections.
-     */
-    flow?: TextAreaFlow | String;
-    /**
-     * Defines the way the TextArea will resize.
-     */
-    resizable?: TextAreaResize | String;
-    /**
-     * Defines additional class to the input element.
-     */
-    inputClass?: String;
-    /**
-     * The event handler that will be fired when the changes the selected value.
-     */
-    onChange?: (event: TextAreaChangeEvent) => void;
-    /**
-     * The event handler that will be fired when TextArea is focused.
-     */
-    onFocus?: (event: TextAreaFocusEvent) => void;
-    /**
-     * The event handler that will be fired when TextArea is blurred.
-     */
-    onBlur?: (event: TextAreaBlurEvent) => void;
-}

package/dist/npm/textarea/interfaces/TextAreaProps.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});