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

package/dist/es/colors/ColorPicker.js

@@ -1,506 +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 { Button } from '@progress/kendo-vue-buttons';
-import { classNames, Keys,
-// useDir, 
-getTabIndex, guid, kendoThemeMaps, validatePackage, setRef, getRef, Icon, getIconName } from '@progress/kendo-vue-common';
-import { packageMetadata } from '../package-metadata';
-import { Picker } from './Picker';
-import { FlatColorPicker } from './FlatColorPicker';
-import { DEFAULT_GRADIENT_SETTINGS, DEFAULT_PALETTE_SETTINGS } from './utils/color-cache';
-import { provideLocalizationService } from '@progress/kendo-vue-intl';
-import { messages, colorPickerDropdownButtonAriaLabel } from '../messages/main';
-import { caretAltDownIcon } from '@progress/kendo-svg-icons';
-/**
- * @hidden
- */
-var isControlled = function isControlled(prop) {
-  return prop !== undefined;
-};
-/**
- * @hidden
- */
-var ColorPickerVue2 = {
-  name: 'KendoColorPicker',
-  model: {
-    event: 'changemodel'
-  },
-  // @ts-ignore
-  emits: {
-    'open': null,
-    'close': null,
-    'changemodel': null,
-    'update:modelValue': null,
-    'update:modelRgbaValue': null,
-    'activecolorclick': null,
-    'focus': null,
-    'blur': null,
-    'change': null,
-    'viewchange': null
-  },
-  props: {
-    modelValue: String,
-    modelRgbaValue: String,
-    value: {
-      type: String,
-      default: undefined
-    },
-    defaultValue: String,
-    disabled: Boolean,
-    dir: String,
-    id: String,
-    ariaLabelledBy: String,
-    ariaDescribedBy: String,
-    showClearButton: {
-      type: Boolean,
-      default: true
-    },
-    showPreview: {
-      type: Boolean,
-      default: true
-    },
-    showButtons: {
-      type: Boolean,
-      default: true
-    },
-    paletteSettings: {
-      type: Object,
-      default: function _default() {
-        return DEFAULT_PALETTE_SETTINGS;
-      }
-    },
-    valid: {
-      type: Boolean,
-      default: true
-    },
-    tabIndex: {
-      type: Number,
-      default: 0
-    },
-    title: String,
-    icon: String,
-    svgIcon: Object,
-    iconClassName: String,
-    popupSettings: {
-      type: Object,
-      default: function _default() {
-        return {};
-      }
-    },
-    gradientSettings: {
-      type: Object,
-      default: function _default() {
-        return DEFAULT_GRADIENT_SETTINGS;
-      }
-    },
-    flatColorPickerSettings: {
-      type: Object,
-      default: function _default() {
-        return {};
-      }
-    },
-    open: {
-      type: Boolean,
-      default: undefined
-    },
-    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);
-      }
-    },
-    view: {
-      type: String,
-      default: 'combo',
-      validator: function validator(value) {
-        return ['gradient', 'palette', 'combo'].includes(value);
-      }
-    },
-    selectedView: {
-      type: Number,
-      default: undefined
-    }
-  },
-  inject: {
-    kendoLocalizationService: {
-      default: null
-    }
-  },
-  data: function data() {
-    return {
-      focused: false,
-      currentValue: this.$props.defaultValue,
-      currentOpen: false
-    };
-  },
-  computed: {
-    isValueControlled: function isValueControlled() {
-      return this.$props.value !== undefined;
-    },
-    isOpenControlled: function isOpenControlled() {
-      return this.$props.open !== undefined;
-    },
-    computedValue: function computedValue() {
-      return this.isValueControlled ? this.$props.value : this.$props.modelValue !== undefined ? this.$props.modelValue : this.$props.modelRgbaValue !== undefined ? this.$props.modelRgbaValue : this.currentValue !== undefined ? this.currentValue : this.defaultValue;
-    },
-    computedOpen: function computedOpen() {
-      return this.isOpenControlled ? this.$props.open : this.currentOpen;
-    },
-    wrapperClassName: function wrapperClassName() {
-      var _a;
-      var _b = this.$props,
-        size = _b.size,
-        fillMode = _b.fillMode,
-        rounded = _b.rounded;
-      return _a = {
-        'k-picker': true,
-        'k-colorpicker': true,
-        'k-icon-picker': true
-      }, _a["k-picker-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-picker-".concat(fillMode)] = fillMode, _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-invalid'] = !this.valid, _a['k-disabled'] = this.disabled, _a['k-focus'] = this.focused, _a;
-    }
-  },
-  created: function created() {
-    validatePackage(packageMetadata);
-    this._popupId = 'popup' + guid();
-    this.focusableElementGuid = guid();
-  },
-  mounted: function mounted() {
-    this.button = getRef(this, 'button');
-  },
-  updated: function updated() {
-    // this.button = getRef(this, 'button');
-  },
-  // @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 localizationService = provideLocalizationService(this);
-    // tslint:disable-next-line:max-line-length
-    var colorPickerLabelMessage = localizationService.toLanguageString(colorPickerDropdownButtonAriaLabel, messages[colorPickerDropdownButtonAriaLabel]);
-    var h = gh || createElement;
-    var _a = this.$props,
-      disabled = _a.disabled,
-      tabIndex = _a.tabIndex,
-      dir = _a.dir,
-      view = _a.view,
-      selectedView = _a.selectedView,
-      showClearButton = _a.showClearButton,
-      showPreview = _a.showPreview,
-      showButtons = _a.showButtons,
-      popupSettings = _a.popupSettings;
-    var renderFlatColorPicker = function renderFlatColorPicker() {
-      return h(FlatColorPicker, __assign({
-        onKeydown: this.onKeyDownHandler,
-        on: this.v3 ? undefined : {
-          'keydown': this.onKeyDownHandler,
-          'change': this.onFlatChangeHandler,
-          'focusout': this.onBlurHandler,
-          'viewchange': this.onViewChange
-        },
-        ref: setRef(this, 'flatcolorpicker'),
-        view: view,
-        selectedView: selectedView,
-        showClearButton: showClearButton,
-        showPreview: showPreview,
-        showButtons: showButtons,
-        value: this.computedValue || undefined,
-        attrs: this.v3 ? undefined : __assign({
-          view: view,
-          selectedView: selectedView,
-          showClearButton: showClearButton,
-          showPreview: showPreview,
-          showButtons: showButtons,
-          value: this.computedValue || undefined,
-          paletteSettings: this.paletteSettings,
-          gradientSettings: this.gradientSettings
-        }, this.flatColorPickerSettings),
-        onChange: this.onFlatChangeHandler,
-        onFocusout: this.onBlurHandler,
-        onViewchange: this.onViewChange,
-        paletteSettings: this.paletteSettings,
-        gradientSettings: this.gradientSettings
-      }, this.flatColorPickerSettings));
-    };
-    // const dir = useDir(focusableElementGuid, props.dir);
-    return h("span", {
-      "class": this.wrapperClassName,
-      role: 'combobox',
-      attrs: this.v3 ? undefined : {
-        role: 'combobox',
-        dir: dir,
-        id: this.$props.id,
-        "aria-labelledby": this.$props.ariaLabelledBy,
-        "aria-describedby": this.$props.ariaDescribedBy,
-        "aria-disabled": this.$props.disabled,
-        "aria-haspopup": 'dialog',
-        "aria-expanded": this.computedOpen,
-        tabindex: getTabIndex(tabIndex, disabled),
-        title: this.$props.title
-      },
-      dir: dir,
-      id: this.$props.id,
-      "aria-labelledby": this.$props.ariaLabelledBy,
-      "aria-describedby": this.$props.ariaDescribedBy,
-      "aria-disabled": this.$props.disabled,
-      "aria-haspopup": 'dialog',
-      "aria-expanded": this.computedOpen,
-      ref: this.focusableElementGuid,
-      tabindex: getTabIndex(tabIndex, disabled),
-      title: this.$props.title,
-      onKeydown: this.onButtonKeyDown,
-      on: this.v3 ? undefined : {
-        "keydown": this.onButtonKeyDown,
-        "focusin": this.onFocusHandler,
-        "focusout": this.onButtonBlur
-      },
-      onFocusin: this.onFocusHandler,
-      onFocusout: this.onButtonBlur
-    }, [h("span", {
-      onClick: this.onActiveColorClickHandler,
-      on: this.v3 ? undefined : {
-        "click": this.onActiveColorClickHandler
-      },
-      "class": 'k-input-inner'
-    }, [h("span", {
-      "class": classNames('k-value-icon', 'k-color-preview', {
-        'k-no-color': !this.computedValue,
-        'k-icon-color-preview': this.icon || this.iconClassName
-      })
-    }, [(this.iconClassName || this.icon || this.svgIcon) && h(Icon, {
-      "class": classNames('k-color-preview-icon', this.iconClassName),
-      name: getIconName(this.icon),
-      attrs: this.v3 ? undefined : {
-        name: getIconName(this.icon),
-        icon: this.svgIcon
-      },
-      icon: this.svgIcon
-    }), h("span", {
-      "class": "k-color-preview-mask",
-      style: {
-        backgroundColor: this.computedValue
-      }
-    })])]),
-    // @ts-ignore
-    h(Button, {
-      type: "button",
-      attrs: this.v3 ? undefined : {
-        type: "button",
-        tabindex: -1,
-        rounded: null,
-        icon: 'caret-alt-down',
-        svgIcon: caretAltDownIcon,
-        "aria-label": colorPickerLabelMessage
-      },
-      tabindex: -1,
-      ref: this.v3 ? function (el) {
-        _this.buttonRef = el;
-      } : 'button',
-      onClick: this.onClickHandler,
-      on: this.v3 ? undefined : {
-        "click": this.onClickHandler
-      },
-      rounded: null,
-      "class": "k-input-button",
-      icon: 'caret-alt-down',
-      svgIcon: caretAltDownIcon,
-      "aria-label": colorPickerLabelMessage
-    }),
-    // @ts-ignore function children
-    h(Picker, {
-      dir: dir,
-      attrs: this.v3 ? undefined : {
-        dir: dir,
-        id: this._popupId,
-        open: this.computedOpen,
-        popupAnchor: this.focusableElementGuid,
-        popupSettings: __assign({}, popupSettings)
-      },
-      id: this._popupId,
-      open: this.computedOpen,
-      onOpen: this.onOpenHandler,
-      on: this.v3 ? undefined : {
-        "open": this.onOpenHandler
-      },
-      popupAnchor: this.focusableElementGuid,
-      popupSettings: __assign({}, popupSettings)
-    }, this.v3 ? function () {
-      return [renderFlatColorPicker.call(_this2)];
-    } : [renderFlatColorPicker.call(_this2)])]);
-  },
-  methods: {
-    focusElement: function focusElement() {
-      if (this.$el) {
-        this.$el.focus();
-      }
-    },
-    setOpen: function setOpen(nextOpen, isBlur) {
-      if (!nextOpen && !isBlur && this.$el) {
-        this.$el.focus();
-      }
-      this.currentOpen = nextOpen;
-      this.$emit(nextOpen ? 'open' : 'close');
-    },
-    onButtonKeyDown: function onButtonKeyDown(event) {
-      var altKey = event.altKey,
-        keyCode = event.keyCode;
-      if (keyCode === Keys.esc) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.setOpen(false);
-        return;
-      }
-      if (keyCode === Keys.enter) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.setOpen(!this.computedOpen);
-        return;
-      }
-      if (altKey && keyCode === Keys.down) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.setOpen(true);
-      }
-    },
-    onKeyDownHandler: function onKeyDownHandler(event) {
-      var altKey = event.altKey,
-        keyCode = event.keyCode;
-      if (keyCode === Keys.esc) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.setOpen(false);
-        return;
-      }
-      if (keyCode === Keys.enter) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.focusElement();
-        return;
-      }
-      if (altKey && keyCode === Keys.up) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.setOpen(false);
-        this.focusElement();
-      }
-    },
-    onOpenHandler: function onOpenHandler() {
-      // Skip content autofocus when in controlled mode
-      var flatcolorpicker = getRef(this, 'flatcolorpicker');
-      if (flatcolorpicker) {
-        flatcolorpicker.focus();
-      }
-    },
-    onClickHandler: function onClickHandler() {
-      this.setOpen(!this.computedOpen, true);
-    },
-    onActiveColorClickHandler: function onActiveColorClickHandler(event) {
-      this.$emit('activecolorclick', {
-        event: event,
-        value: this.computedValue
-      });
-    },
-    isViewFocused: function isViewFocused() {
-      return !!(document.activeElement && document.activeElement.closest("#".concat(this._popupId)));
-    },
-    onButtonBlur: function onButtonBlur(event) {
-      this.focused = this.isViewFocused();
-      this.$emit('blur', {
-        event: event
-      });
-    },
-    onFocusHandler: function onFocusHandler(event) {
-      if (this.blurTimeoutRef) {
-        clearTimeout(this.blurTimeoutRef);
-        this.blurTimeoutRef = undefined;
-        // case where moving back to input from popup
-        if (event.target === this.$el) {
-          this.setOpen(false); // in this case we should focus input on keydown
-        }
-      } else {
-        this.focused = true;
-      }
-      this.$emit('focus', {
-        event: event
-      });
-    },
-    onBlurTimeout: function onBlurTimeout() {
-      var viewIsFocused = this.isViewFocused();
-      if (!viewIsFocused) {
-        this.setOpen(false, true);
-      }
-      this.focused = viewIsFocused;
-      this.blurTimeoutRef = undefined;
-    },
-    onBlurHandler: function onBlurHandler() {
-      clearTimeout(this.blurTimeoutRef);
-      this.palette = getRef(this, 'palette');
-      this.gradient = getRef(this, 'gradient');
-      this.blurTimeoutRef = setTimeout(this.onBlurTimeout, 200);
-    },
-    onViewChange: function onViewChange(event) {
-      this.$emit('viewchange', event);
-    },
-    onChangeHandler: function onChangeHandler(event, isPalette) {
-      var currentValue = event.value;
-      if (!this.isValueControlled) {
-        this.currentValue = currentValue;
-      }
-      if (isPalette) {
-        this.setOpen(false);
-      }
-      this.$emit('changemodel', currentValue);
-      this.$emit('update:modelRgbaValue', event.rgbaValue);
-      this.$emit('update:modelValue', currentValue);
-      this.$emit('change', {
-        value: currentValue,
-        rgbaValue: event.rgbaValue,
-        event: event
-      });
-    },
-    onFlatChangeHandler: function onFlatChangeHandler(event) {
-      this.onChangeHandler(event, true);
-    }
-  }
-};
-/**
- * @hidden
- */
-var ColorPicker = ColorPickerVue2;
-export { ColorPicker, ColorPickerVue2 };

package/dist/es/colors/FlatColorPicker.d.ts

@@ -1,139 +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;
-};
-import { ColorPickerChangeEvent } from '../main';
-import { FlatColorPickerViewChangeEvent } from './interfaces/FlatColorPickerViewChangeEvent';
-import { ColorGradientProps } from './interfaces/ColorGradientProps';
-import { ColorPickerPaletteSettings } from './interfaces/ColorPickerPaletteSettings';
-/**
- * Represents the properties of [FlatColorPicker](% slug api_inputs_flatcolorpickerprops %) component.
- */
-export interface FlatColorPickerProps {
-    /**
-     * Sets the `id` property of the top `div` element of the FlatColorPicker.
-     */
-    id?: string;
-    /**
-     * Sets the color model value.
-     */
-    modelValue?: string;
-    /**
-     * The model rgba value of the FlatColorPicker.
-     */
-    modelRgbaValue?: string;
-    /**
-     * Sets the color value.
-     */
-    value?: string;
-    /**
-     * Sets the previous color value.
-     */
-    prevValue?: string;
-    /**
-     * Sets the `tabIndex` property of the FlatColorPicker.
-     */
-    tabIndex?: number;
-    /**
-     * Determines whether the FlatColorPicker is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Sets the FlatColorPicker view. The default is `combo`.
-     */
-    view?: 'combo' | 'gradient' | 'palette' | string;
-    /**
-     * Sets the FlatColorPicker selected view index. The default is `0`.
-     */
-    selectedView?: number;
-    /**
-     * Sets custom header component.
-     */
-    header?: any;
-    /**
-     * Sets custom footer component.
-     */
-    footer?: any;
-    /**
-     * Specifies whether clear button will be rendered in the header.
-     */
-    showClearButton?: boolean;
-    /**
-     * Specifies whether preview and revert color boxes will be rendered in the header.
-     */
-    showPreview?: boolean;
-    /**
-     * Specifies whether action buttons will be rendered in the footer.
-     */
-    showButtons?: boolean;
-    /**
-     * Configures the ColorPalette that is displayed in the ColorPicker popup.
-     */
-    paletteSettings?: ColorPickerPaletteSettings;
-    /**
-     * Configures the ColorGradient that is displayed in the ColorPicker popup.
-     */
-    gradientSettings?: ColorGradientProps;
-    /**
-     * The event handler that will be fired when the view is changed.
-     */
-    onViewchange?: (event: FlatColorPickerViewChangeEvent) => void;
-    /**
-     * The event handler that will be fired when the user edits the value.
-     */
-    onChange?: (event: ColorPickerChangeEvent) => void;
-}
-/**
- * @hidden
- */
-export interface FlatColorPickerHandle {
-    /**
-     * The current element or `null` if there is none.
-     */
-    element: HTMLDivElement | null;
-    /**
-     * The props values of the FlatColorPicker.
-     */
-    props: FlatColorPickerProps;
-    /**
-     * The focus event callback.
-     */
-    focus: () => void;
-}
-/**
- * @hidden
- */
-export interface FlatColorPickerState {
-}
-/**
- * @hidden
- */
-export interface FlatColorPickerComputed {
-    [key: string]: any;
-}
-/**
- * @hidden
- */
-export interface FlatColorPickerMethods {
-    [key: string]: any;
-}
-/**
- * @hidden
- */
-export interface FlatColorPickerData {
-}
-/**
- * @hidden
- */
-export interface FlatColorPickerAll extends Vue2type, FlatColorPickerMethods, FlatColorPickerData, FlatColorPickerComputed, FlatColorPickerState {
-}
-/**
- * @hidden
- */
-declare let FlatColorPickerVue2: ComponentOptions<FlatColorPickerAll, DefaultData<FlatColorPickerData>, DefaultMethods<FlatColorPickerAll>, FlatColorPickerComputed, RecordPropsDefinition<FlatColorPickerProps>>;
-/**
- * @hidden
- */
-declare const FlatColorPicker: DefineComponent<FlatColorPickerProps, any, FlatColorPickerData, FlatColorPickerComputed, FlatColorPickerMethods, {}, {}, {}, string, FlatColorPickerProps, FlatColorPickerProps, {}>;
-export { FlatColorPicker, FlatColorPickerVue2 };