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

package/dist/esm/colors/FlatColorPicker.js

@@ -1,594 +0,0 @@
-var __assign = this && this.__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);
-};
-// @ts-ignore
-import * as Vue from 'vue';
-var allVue = Vue;
-var gh = allVue.h;
-var isV3 = allVue.version && allVue.version[0] === '3';
-import { dropletSlashIcon, dropletSliderIcon, paletteIcon } from '@progress/kendo-svg-icons';
-import { classNames, validatePackage, getTabIndex, setRef, focusContainer, focusFirstFocusableChild, Keys, templateRendering, getListeners, getTemplate, Icon } from '@progress/kendo-vue-common';
-import { ButtonGroup, Button } from '@progress/kendo-vue-buttons';
-import { ColorPalette } from './ColorPalette.js';
-import { ColorGradient } from './ColorGradient.js';
-import { packageMetadata } from '../package-metadata.js';
-import { messages, flatColorPickerApplyBtn, flatColorPickerCancelBtn, flatColorPickerGradientBtn, flatColorPickerPaletteBtn, flatColorPickerClearBtn } from '../messages/main.js';
-import { parseColor } from './utils/color-parser.js';
-import { DEFAULT_GRADIENT_SETTINGS, DEFAULT_PALETTE_SETTINGS } from './utils/color-cache.js';
-import { provideLocalizationService } from '@progress/kendo-vue-intl';
-/**
- * @hidden
- */
-var FlatColorPickerVue2 = {
-  name: 'KendoFlatColorPicker',
-  // @ts-ignore
-  emits: {
-    'viewchange': null,
-    'changemodel': null,
-    'update:modelValue': null,
-    'update:modelRgbaValue': null,
-    'focus': null,
-    'blur': null,
-    'focusout': null,
-    'keydown': null,
-    'change': null
-  },
-  props: {
-    modelValue: String,
-    modelRgbaValue: String,
-    value: String,
-    prevValue: String,
-    tabIndex: Number,
-    disabled: Boolean,
-    view: {
-      type: String,
-      default: 'combo',
-      validator: function validator(value) {
-        return ['gradient', 'palette', 'combo'].includes(value);
-      }
-    },
-    selectedView: {
-      type: Number,
-      default: undefined
-    },
-    header: [String, Function, Object],
-    footer: [String, Function, Object],
-    showClearButton: {
-      type: Boolean,
-      default: true
-    },
-    showPreview: {
-      type: Boolean,
-      default: true
-    },
-    showButtons: {
-      type: Boolean,
-      default: true
-    },
-    gradientSettings: {
-      type: Object,
-      default: function _default() {
-        return DEFAULT_GRADIENT_SETTINGS;
-      }
-    },
-    paletteSettings: {
-      type: Object,
-      default: function _default() {
-        return DEFAULT_PALETTE_SETTINGS;
-      }
-    }
-  },
-  inject: {
-    kendoLocalizationService: {
-      default: null
-    }
-  },
-  created: function created() {
-    validatePackage(packageMetadata);
-  },
-  computed: {
-    isColorGradient: function isColorGradient() {
-      return this.view !== 'combo' ? this.view === 'gradient' : this.selectedView !== undefined ? this.selectedView === 0 : this.currentView === 'gradient';
-    },
-    computedColor: function computedColor() {
-      return this.value !== undefined ? this.value : this.modelValue !== undefined ? this.modelValue : this.modelRgbaValue !== undefined ? this.modelRgbaValue : this.colorValue;
-    },
-    computedPrevColor: function computedPrevColor() {
-      return this.prevValue !== undefined ? this.prevValue : this.currentPrevColor;
-    },
-    previewClass: function previewClass() {
-      return {
-        'k-coloreditor-preview-color': true,
-        'k-color-preview': true,
-        'k-no-color': !this.colorValue
-      };
-    },
-    currentClass: function currentClass() {
-      return {
-        'k-coloreditor-current-color': true,
-        'k-color-preview': true,
-        'k-no-color': !this.computedPrevColor
-      };
-    },
-    computedTabIndex: function computedTabIndex() {
-      return this.focused ? 0 : -1;
-    }
-  },
-  data: function data() {
-    var initialValue = this.value || this.defaultValue || this.modelValue || this.modelRgbaValue;
-    return {
-      currentView: 'gradient',
-      colorValue: initialValue,
-      currentPrevColor: initialValue,
-      focused: false
-    };
-  },
-  // @ts-ignore
-  setup: !isV3 ? undefined : function () {
-    var v3 = !!isV3;
-    return {
-      v3: v3
-    };
-  },
-  // @ts-ignore
-  render: function render(createElement) {
-    var _this2 = this;
-    var _this = this;
-    var h = gh || createElement;
-    var localizationService = provideLocalizationService(this);
-    var gradientMessage = localizationService.toLanguageString(flatColorPickerGradientBtn, messages[flatColorPickerGradientBtn]);
-    var paletteMessage = localizationService.toLanguageString(flatColorPickerPaletteBtn, messages[flatColorPickerPaletteBtn]);
-    var clearMessage = localizationService.toLanguageString(flatColorPickerClearBtn, messages[flatColorPickerClearBtn]);
-    var cancelMessage = localizationService.toLanguageString(flatColorPickerCancelBtn, messages[flatColorPickerCancelBtn]);
-    var applyMessage = localizationService.toLanguageString(flatColorPickerApplyBtn, messages[flatColorPickerApplyBtn]);
-    var headerTemplate = templateRendering.call(this, this.$props.header, getListeners.call(this));
-    var footerTemplate = templateRendering.call(this, this.$props.footer, getListeners.call(this));
-    var header = getTemplate.call(this, {
-      h: h,
-      template: headerTemplate
-    });
-    var footer = getTemplate.call(this, {
-      h: h,
-      template: footerTemplate
-    });
-    var renderGradiente = function renderGradiente() {
-      return h(ColorGradient, __assign({
-        attrs: this.v3 ? undefined : __assign({
-          tabIndex: -1,
-          value: this.colorValue,
-          innerTabIndex: this.computedTabIndex
-        }, this.gradientSettings),
-        ref: setRef(this, 'gradient'),
-        tabIndex: -1,
-        value: this.colorValue,
-        innerTabIndex: this.computedTabIndex,
-        onChange: this.handleColorChange,
-        onKeydown: this.innerKeyDown,
-        on: this.v3 ? undefined : {
-          'change': this.handleColorChange,
-          'keydown': this.innerKeyDown
-        }
-      }, this.gradientSettings));
-    };
-    var renderPalette = function renderPalette() {
-      return h(ColorPalette, __assign({
-        on: this.v3 ? undefined : {
-          'change': this.handlePaletteColorChange,
-          'keydown': this.gradientKeyDown
-        },
-        ref: setRef(this, 'palette'),
-        tabIndex: this.computedTabIndex,
-        value: this.colorValue,
-        attrs: this.v3 ? undefined : __assign({
-          tabIndex: this.computedTabIndex,
-          value: this.colorValue
-        }, this.paletteSettings),
-        onChange: this.handlePaletteColorChange,
-        onKeydown: this.gradientKeyDown
-      }, this.paletteSettings));
-    };
-    return h("div", {
-      tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled),
-      attrs: this.v3 ? undefined : {
-        tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled),
-        "aria-disabled": this.$props.disabled
-      },
-      onFocus: this.onFocus,
-      on: this.v3 ? undefined : {
-        "focus": this.onFocus,
-        "blur": this.onBlur,
-        "focusout": this.onFocusout,
-        "keydown": this.onKeyDownHandler
-      },
-      onBlur: this.onBlur,
-      onFocusout: this.onFocusout,
-      onKeydown: this.onKeyDownHandler,
-      "class": classNames('k-flatcolorpicker k-coloreditor', {
-        'k-disabled': this.$props.disabled
-      }),
-      "aria-disabled": this.$props.disabled
-    }, [header, this.$props.showClearButton && this.$props.showPreview && h("div", {
-      "class": "k-coloreditor-header k-hstack"
-    }, [this.$props.view === 'combo' && h("div", {
-      "class": "k-coloreditor-header-actions k-hstack"
-    }, [
-    // @ts-ignore  function children
-    h(ButtonGroup, {
-      "class": "k-button-group-flat"
-    }, this.v3 ? function () {
-      return [
-      // @ts-ignore  function children
-      h(Button, {
-        tabIndex: _this2.computedTabIndex,
-        attrs: _this2.v3 ? undefined : {
-          tabIndex: _this2.computedTabIndex,
-          type: "button",
-          togglable: true,
-          fillMode: 'flat',
-          selected: _this2.isColorGradient,
-          ariaLabel: gradientMessage
-        },
-        type: "button",
-        togglable: true,
-        fillMode: 'flat',
-        selected: _this2.isColorGradient,
-        onKeydown: _this2.handleButtonKeydown,
-        on: _this2.v3 ? undefined : {
-          "keydown": _this2.handleButtonKeydown,
-          "click": function click(e) {
-            return _this.handleViewChange(e, 'gradient');
-          }
-        },
-        ariaLabel: gradientMessage,
-        onClick: function click(e) {
-          return _this.handleViewChange(e, 'gradient');
-        }
-      }, _this2.v3 ? function () {
-        return [h(Icon, {
-          name: "droplet-slider",
-          attrs: _this2.v3 ? undefined : {
-            name: "droplet-slider",
-            icon: dropletSliderIcon
-          },
-          icon: dropletSliderIcon
-        })];
-      } : [h(Icon, {
-        name: "droplet-slider",
-        attrs: _this2.v3 ? undefined : {
-          name: "droplet-slider",
-          icon: dropletSliderIcon
-        },
-        icon: dropletSliderIcon
-      })]),
-      // @ts-ignore  function children
-      h(Button, {
-        tabIndex: _this2.computedTabIndex,
-        attrs: _this2.v3 ? undefined : {
-          tabIndex: _this2.computedTabIndex,
-          type: "button",
-          togglable: true,
-          fillMode: 'flat',
-          selected: !_this2.isColorGradient,
-          ariaLabel: paletteMessage
-        },
-        type: "button",
-        togglable: true,
-        fillMode: 'flat',
-        selected: !_this2.isColorGradient,
-        onKeydown: _this2.handleButtonKeydown,
-        on: _this2.v3 ? undefined : {
-          "keydown": _this2.handleButtonKeydown,
-          "click": function click(e) {
-            return _this.handleViewChange(e, 'palette');
-          }
-        },
-        ariaLabel: paletteMessage,
-        onClick: function click(e) {
-          return _this.handleViewChange(e, 'palette');
-        }
-      }, _this2.v3 ? function () {
-        return [h(Icon, {
-          name: "palette",
-          attrs: _this2.v3 ? undefined : {
-            name: "palette",
-            icon: paletteIcon
-          },
-          icon: paletteIcon
-        })];
-      } : [h(Icon, {
-        name: "palette",
-        attrs: _this2.v3 ? undefined : {
-          name: "palette",
-          icon: paletteIcon
-        },
-        icon: paletteIcon
-      })])];
-    } : [h(Button, {
-      tabIndex: _this2.computedTabIndex,
-      attrs: _this2.v3 ? undefined : {
-        tabIndex: _this2.computedTabIndex,
-        type: "button",
-        togglable: true,
-        fillMode: 'flat',
-        selected: _this2.isColorGradient,
-        ariaLabel: gradientMessage
-      },
-      type: "button",
-      togglable: true,
-      fillMode: 'flat',
-      selected: _this2.isColorGradient,
-      onKeydown: _this2.handleButtonKeydown,
-      on: _this2.v3 ? undefined : {
-        "keydown": _this2.handleButtonKeydown,
-        "click": function click(e) {
-          return _this.handleViewChange(e, 'gradient');
-        }
-      },
-      ariaLabel: gradientMessage,
-      onClick: function click(e) {
-        return _this.handleViewChange(e, 'gradient');
-      }
-    }, _this2.v3 ? function () {
-      return [h(Icon, {
-        name: "droplet-slider",
-        attrs: _this2.v3 ? undefined : {
-          name: "droplet-slider",
-          icon: dropletSliderIcon
-        },
-        icon: dropletSliderIcon
-      })];
-    } : [h(Icon, {
-      name: "droplet-slider",
-      attrs: _this2.v3 ? undefined : {
-        name: "droplet-slider",
-        icon: dropletSliderIcon
-      },
-      icon: dropletSliderIcon
-    })]), h(Button, {
-      tabIndex: _this2.computedTabIndex,
-      attrs: _this2.v3 ? undefined : {
-        tabIndex: _this2.computedTabIndex,
-        type: "button",
-        togglable: true,
-        fillMode: 'flat',
-        selected: !_this2.isColorGradient,
-        ariaLabel: paletteMessage
-      },
-      type: "button",
-      togglable: true,
-      fillMode: 'flat',
-      selected: !_this2.isColorGradient,
-      onKeydown: _this2.handleButtonKeydown,
-      on: _this2.v3 ? undefined : {
-        "keydown": _this2.handleButtonKeydown,
-        "click": function click(e) {
-          return _this.handleViewChange(e, 'palette');
-        }
-      },
-      ariaLabel: paletteMessage,
-      onClick: function click(e) {
-        return _this.handleViewChange(e, 'palette');
-      }
-    }, _this2.v3 ? function () {
-      return [h(Icon, {
-        name: "palette",
-        attrs: _this2.v3 ? undefined : {
-          name: "palette",
-          icon: paletteIcon
-        },
-        icon: paletteIcon
-      })];
-    } : [h(Icon, {
-      name: "palette",
-      attrs: _this2.v3 ? undefined : {
-        name: "palette",
-        icon: paletteIcon
-      },
-      icon: paletteIcon
-    })])])]), h("div", {
-      "class": "k-spacer"
-    }), h("div", {
-      "class": "k-coloreditor-header-actions k-hstack"
-    }, [this.$props.showClearButton &&
-    // @ts-ignore  function children
-    h(Button, {
-      tabIndex: this.computedTabIndex,
-      attrs: this.v3 ? undefined : {
-        tabIndex: this.computedTabIndex,
-        type: "button",
-        fillMode: 'flat',
-        ariaLabel: clearMessage
-      },
-      type: "button",
-      fillMode: 'flat',
-      ariaLabel: clearMessage,
-      onKeydown: this.handleButtonKeydown,
-      on: this.v3 ? undefined : {
-        "keydown": this.handleButtonKeydown,
-        "click": this.handleResetColor
-      },
-      onClick: this.handleResetColor
-    }, this.v3 ? function () {
-      return [h(Icon, {
-        name: "droplet-slash",
-        attrs: _this2.v3 ? undefined : {
-          name: "droplet-slash",
-          icon: dropletSlashIcon
-        },
-        icon: dropletSlashIcon
-      })];
-    } : [h(Icon, {
-      name: "droplet-slash",
-      attrs: _this2.v3 ? undefined : {
-        name: "droplet-slash",
-        icon: dropletSlashIcon
-      },
-      icon: dropletSlashIcon
-    })]), this.$props.showPreview && h("div", {
-      "class": "k-coloreditor-preview k-vstack"
-    }, [h("span", {
-      "class": this.previewClass,
-      style: {
-        background: this.colorValue
-      }
-    }, [!this.colorValue && h("span", {
-      "class": "k-color-preview-mask"
-    })]), h("span", {
-      "class": this.currentClass,
-      style: {
-        background: this.computedPrevColor
-      },
-      onClick: this.handlePrevColorClick,
-      on: this.v3 ? undefined : {
-        "click": this.handlePrevColorClick
-      }
-    }, [!this.computedPrevColor && h("span", {
-      "class": "k-color-preview-mask"
-    })])])])]), h("div", {
-      "class": "k-coloreditor-views k-vstack"
-    }, [this.isColorGradient ? renderGradiente.call(this) : renderPalette.call(this)]), this.$props.showButtons && h("div", {
-      "class": "k-coloreditor-footer k-actions k-actions-end"
-    }, [
-    // @ts-ignore  function children
-    h(Button, {
-      tabIndex: this.computedTabIndex,
-      attrs: this.v3 ? undefined : {
-        tabIndex: this.computedTabIndex,
-        type: "button"
-      },
-      type: "button",
-      "class": "k-coloreditor-cancel",
-      onKeydown: this.handleButtonKeydown,
-      on: this.v3 ? undefined : {
-        "keydown": this.handleButtonKeydown,
-        "click": this.handleCancelBtnClick
-      },
-      onClick: this.handleCancelBtnClick
-    }, this.v3 ? function () {
-      return [cancelMessage];
-    } : [cancelMessage]),
-    // @ts-ignore  function children
-    h(Button, {
-      tabIndex: this.computedTabIndex,
-      attrs: this.v3 ? undefined : {
-        tabIndex: this.computedTabIndex,
-        type: "button"
-      },
-      type: "button",
-      "class": "k-coloreditor-apply k-primary",
-      onKeydown: this.handleButtonKeydown,
-      on: this.v3 ? undefined : {
-        "keydown": this.handleButtonKeydown,
-        "click": this.triggerChange
-      },
-      onClick: this.triggerChange
-    }, this.v3 ? function () {
-      return [applyMessage];
-    } : [applyMessage])]), footer]);
-  },
-  methods: {
-    focus: function focus() {
-      var _this = this;
-      this.focused = true;
-      setTimeout(function () {
-        focusFirstFocusableChild(_this.$el);
-      }, 1);
-    },
-    onKeyDownHandler: function onKeyDownHandler(e) {
-      var element = this.$el;
-      this.focused = focusContainer(e, element);
-      this.$emit('keydown', e);
-    },
-    handleViewChange: function handleViewChange(event, viewType) {
-      this.currentView = viewType;
-      this.$emit('viewchange', {
-        event: event,
-        viewType: viewType
-      });
-    },
-    handleResetColor: function handleResetColor() {
-      this.colorValue = null;
-      if (!this.showButtons) {
-        this.triggerChange();
-      }
-    },
-    handleColorChange: function handleColorChange(event) {
-      this.colorValue = event.value;
-      if (!this.showButtons) {
-        this.triggerChange(event);
-      }
-    },
-    handlePaletteColorChange: function handlePaletteColorChange(event) {
-      this.colorValue = event.value;
-      if (!this.showButtons) {
-        this.triggerChange(event);
-      }
-    },
-    triggerChange: function triggerChange(event) {
-      var rgbaValue = parseColor(this.colorValue, 'rgba');
-      this.currentPrevColor = this.colorValue;
-      this.$emit('changemodel', this.colorValue);
-      this.$emit('update:modelValue', this.colorValue);
-      this.$emit('update:modelRgbaValue', rgbaValue);
-      this.$emit('change', {
-        event: event,
-        value: this.colorValue,
-        rgbaValue: rgbaValue
-      });
-    },
-    innerKeyDown: function innerKeyDown(event) {
-      if (event.keyCode === Keys.enter) {
-        this.triggerChange(event);
-      }
-    },
-    gradientKeyDown: function gradientKeyDown(event) {
-      event.stopPropagation();
-      if (!this.showButtons && event.keyCode === Keys.enter) {
-        this.triggerChange(event);
-      }
-    },
-    handleButtonKeydown: function handleButtonKeydown(e) {
-      if (e.keyCode === Keys.enter) {
-        e.stopPropagation();
-      }
-    },
-    handleCancelBtnClick: function handleCancelBtnClick() {
-      this.colorValue = this.computedPrevColor;
-    },
-    handlePrevColorClick: function handlePrevColorClick() {
-      this.colorValue = this.computedPrevColor;
-    },
-    onFocus: function onFocus(event) {
-      this.$emit('focus', {
-        event: event,
-        target: this
-      });
-    },
-    onBlur: function onBlur(event) {
-      this.$emit('blur', {
-        event: event,
-        target: this
-      });
-    },
-    onFocusout: function onFocusout(event) {
-      this.$emit('focusout', {
-        event: event,
-        target: this
-      });
-    }
-  }
-};
-/**
- * @hidden
- */
-var FlatColorPicker = FlatColorPickerVue2;
-export { FlatColorPicker, FlatColorPickerVue2 };

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

@@ -1,52 +0,0 @@
-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;
-};
-/**
- * @hidden
- */
-export interface HexInputProps {
-    tabIndex: number;
-    hex: string;
-    onHexChange?: any;
-    disabled?: boolean;
-}
-/**
- * @hidden
- */
-export interface HexInputState {
-    originalHex: string;
-    hex: string;
-}
-/**
- * @hidden
- */
-export interface HexInputComputed {
-    [key: string]: any;
-}
-/**
- * @hidden
- */
-export interface HexInputMethods {
-    [key: string]: any;
-}
-/**
- * @hidden
- */
-export interface HexInputData {
-}
-/**
- * @hidden
- */
-export interface HexInputAll extends Vue2type, HexInputMethods, HexInputData, HexInputComputed, HexInputState {
-}
-/**
- * @hidden
- */
-declare let HexInputVue2: ComponentOptions<HexInputAll, DefaultData<HexInputData>, DefaultMethods<HexInputAll>, HexInputComputed, RecordPropsDefinition<HexInputProps>>;
-/**
- * @hidden
- */
-declare const HexInput: DefineComponent<HexInputProps, any, HexInputData, HexInputComputed, HexInputMethods, {}, {}, {}, string, HexInputProps, HexInputProps, {}>;
-export { HexInput, HexInputVue2 };