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

package/dist/esm/colors/ColorPicker.js

@@ -0,0 +1,505 @@
+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 } from '@progress/kendo-vue-common';
+import { packageMetadata } from '../package-metadata.js';
+import { Picker } from './Picker.js';
+import { FlatColorPicker } from './FlatColorPicker.js';
+import { DEFAULT_GRADIENT_SETTINGS, DEFAULT_PALETTE_SETTINGS } from './utils/color-cache.js';
+/**
+ * @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,
+    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
+    }
+  },
+  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;
+    },
+    computedIconClassName: function computedIconClassName() {
+      var icon = this.$props.icon;
+      return this.$props.iconClassName || icon && "k-icon k-i-".concat(icon);
+    },
+    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 _a;
+
+    var _this = this;
+
+    var h = gh || createElement;
+    var _b = this.$props,
+        disabled = _b.disabled,
+        tabIndex = _b.tabIndex,
+        dir = _b.dir,
+        view = _b.view,
+        selectedView = _b.selectedView,
+        showClearButton = _b.showClearButton,
+        showPreview = _b.showPreview,
+        showButtons = _b.showButtons,
+        popupSettings = _b.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,
+      dir: dir,
+      attrs: this.v3 ? undefined : {
+        dir: dir,
+        id: this.$props.id,
+        "aria-labelledby": this.$props.ariaLabelledBy,
+        "aria-describedby": this.$props.ariaDescribedBy,
+        tabindex: getTabIndex(tabIndex, disabled),
+        title: this.$props.title
+      },
+      id: this.$props.id,
+      "aria-labelledby": this.$props.ariaLabelledBy,
+      "aria-describedby": this.$props.ariaDescribedBy,
+      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) && h("span", {
+      "class": classNames('k-color-preview-icon', this.iconClassName, (_a = {}, _a["k-icon k-i-".concat(this.icon)] = this.icon && !this.iconClassName, _a))
+    }), 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: 'arrow-s'
+      },
+      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: 'arrow-s'
+    }), // @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/esm/colors/FlatColorPicker.d.ts

@@ -0,0 +1,139 @@
+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 };