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

package/dist/esm/colors/ColorPalette.js

@@ -1,322 +0,0 @@
-// @ts-ignore
-import * as Vue from 'vue';
-var allVue = Vue;
-var gh = allVue.h;
-var isV3 = allVue.version && allVue.version[0] === '3';
-import { ColorPaletteService } from './utils/color-palette.service.js';
-import { classNames, Keys, guid, getTabIndex, validatePackage, setRef, getRef } from '@progress/kendo-vue-common';
-import { packageMetadata } from '../package-metadata.js';
-import { PALETTEPRESETS } from './models/palette-presets.js';
-import { isPresent } from './utils/misc.js';
-import { parseColor } from './utils/color-parser.js';
-/**
- * @hidden
- */
-export var DEFAULT_TILE_SIZE = 24;
-/**
- * @hidden
- */
-export var DEFAULT_COLUMNS_COUNT = 10;
-/**
- * @hidden
- */
-export var DEFAULT_PRESET = 'office';
-/**
- * @hidden
- */
-var ColorPaletteVue2 = {
-  name: 'KendoColorPalette',
-  model: {
-    event: 'changemodel'
-  },
-  // @ts-ignore
-  emits: {
-    'keydown': null,
-    'focus': null,
-    'blur': null,
-    'changemodel': null,
-    'update:modelValue': null,
-    'update:modelRgbaValue': null,
-    'change': null
-  },
-  props: {
-    palette: {
-      type: [String, Array],
-      default: DEFAULT_PRESET
-    },
-    columns: Number,
-    tileSize: {
-      type: [Number, Object],
-      default: DEFAULT_TILE_SIZE
-    },
-    modelValue: String,
-    modelRgbaValue: String,
-    defaultValue: String,
-    value: String,
-    disabled: Boolean,
-    tabIndex: Number,
-    id: String,
-    ariaLabelledBy: String,
-    ariaDescribedBy: String
-  },
-  created: function created() {
-    validatePackage(packageMetadata);
-    this.guid = guid();
-  },
-  mounted: function mounted() {
-    this.wrapper = getRef(this, 'wrapper');
-  },
-  updated: function updated() {
-    this.wrapper = getRef(this, 'wrapper');
-  },
-  computed: {
-    focusedColorCooridanates: function focusedColorCooridanates() {
-      return this.focusedColor ? this.paletteService.getCellCoordsFor(this.focusedColor) : undefined;
-    },
-    isUncontrolled: function isUncontrolled() {
-      return this.$props.value === undefined;
-    },
-    selectedColor: function selectedColor() {
-      return this.$props.value !== undefined ? this.$props.value : this.modelValue !== undefined ? this.modelValue : this.modelRgbaValue !== undefined ? this.modelRgbaValue : this.currentValue !== undefined ? this.currentValue : this.$props.defaultValue;
-    }
-  },
-  data: function data() {
-    return {
-      focusedColor: this.$props.value,
-      currentValue: undefined
-    };
-  },
-  // @ts-ignore
-  setup: !isV3 ? undefined : function () {
-    var v3 = !!isV3;
-    return {
-      v3: v3
-    };
-  },
-  // @ts-ignore
-  render: function render(createElement) {
-    var h = gh || createElement;
-    var paletteInfo = this.getPaletteInfo();
-    var svc = this.paletteService = new ColorPaletteService();
-    svc.setColorMatrix(paletteInfo.colors, paletteInfo.columns);
-    var selectedCellCoords = svc.getCellCoordsFor(this.selectedColor);
-    var focusedCellCoords = svc.getCellCoordsFor(this.focusedColor);
-    var className = classNames('k-colorpalette', {
-      'k-disabled': this.$props.disabled
-    });
-    var renderColumns = function renderColumns(columns, rowIndex, cSelectedCellCoords, cFocusedCellCoords) {
-      var rowIsSelected = cSelectedCellCoords !== undefined && cSelectedCellCoords.row === rowIndex;
-      var selectedColumn = cSelectedCellCoords && cSelectedCellCoords.col;
-      var rowIsFocused = cFocusedCellCoords !== undefined && cFocusedCellCoords.row === rowIndex;
-      var focusedColumn = cFocusedCellCoords && cFocusedCellCoords.col;
-      var tileSize = typeof this.$props.tileSize !== 'number' ? this.$props.tileSize : {
-        width: this.$props.tileSize,
-        height: this.$props.tileSize
-      };
-      var width = tileSize.width + 'px';
-      var height = tileSize.height + 'px';
-      return columns.map(function (color, i) {
-        var _this = this;
-        var isSelected = rowIsSelected && selectedColumn === i;
-        var tdClassName = classNames('k-colorpalette-tile', {
-          'k-selected': isSelected,
-          'k-focus': rowIsFocused && focusedColumn === i
-        });
-        return h("td", {
-          "class": tdClassName,
-          "aria-label": color,
-          attrs: this.v3 ? undefined : {
-            "aria-label": color,
-            "aria-selected": isSelected ? true : this.$props.disabled ? undefined : false,
-            id: this.createCellId({
-              row: rowIndex,
-              col: i
-            }),
-            role: 'gridcell'
-          },
-          "aria-selected": isSelected ? true : this.$props.disabled ? undefined : false,
-          style: {
-            backgroundColor: color,
-            width: width,
-            height: height,
-            minWidth: width
-          },
-          onClick: function onClick(event) {
-            return _this.onColorClick(color, event);
-          },
-          on: this.v3 ? undefined : {
-            "click": function onClick(event) {
-              return _this.onColorClick(color, event);
-            }
-          },
-          id: this.createCellId({
-            row: rowIndex,
-            col: i
-          }),
-          key: i,
-          role: 'gridcell'
-        });
-      }, this);
-    };
-    var renderRows = function renderRows(rows, rSelectedCellCoords, rFocusedCellCoords) {
-      return rows.map(function (row, i) {
-        return h("tr", {
-          role: "row",
-          attrs: this.v3 ? undefined : {
-            role: "row"
-          },
-          key: i
-        }, [renderColumns.call(this, row, i, rSelectedCellCoords, rFocusedCellCoords)]);
-      }, this);
-    };
-    if (paletteInfo.colors.length) {
-      return h("div", {
-        id: this.$props.id,
-        attrs: this.v3 ? undefined : {
-          id: this.$props.id,
-          "aria-disabled": this.$props.disabled ? 'true' : undefined,
-          "aria-activedescendant": focusedCellCoords && this.createCellId(focusedCellCoords),
-          "aria-labelledby": this.$props.ariaLabelledBy,
-          "aria-describedby": this.$props.ariaDescribedBy,
-          role: "grid",
-          tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled)
-        },
-        "class": className,
-        onFocusin: this.onFocus,
-        on: this.v3 ? undefined : {
-          "focusin": this.onFocus,
-          "focusout": this.onBlur,
-          "keydown": this.onKeyDown
-        },
-        onFocusout: this.onBlur,
-        onKeydown: this.onKeyDown,
-        "aria-disabled": this.$props.disabled ? 'true' : undefined,
-        "aria-activedescendant": focusedCellCoords && this.createCellId(focusedCellCoords),
-        "aria-labelledby": this.$props.ariaLabelledBy,
-        "aria-describedby": this.$props.ariaDescribedBy,
-        role: "grid",
-        tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled),
-        ref: setRef(this, 'wrapper')
-      }, [h("table", {
-        "class": "k-colorpalette-table k-palette",
-        role: "presentation",
-        attrs: this.v3 ? undefined : {
-          role: "presentation"
-        }
-      }, [h("tbody", [renderRows.call(this, svc.colorRows, selectedCellCoords, focusedCellCoords)])])]);
-    } else {
-      // In this way, the code prevents an eventual focus of the component when no cells are available.
-      // This is needed because upon focus the first cell gets focused.
-      return '';
-    }
-  },
-  methods: {
-    focus: function focus() {
-      if (this.wrapper) {
-        this.wrapper.focus();
-      }
-    },
-    onKeyDown: function onKeyDown(event) {
-      switch (event.keyCode) {
-        case Keys.down:
-          this.handleCellNavigation(event, 0, 1);
-          break;
-        case Keys.up:
-          this.handleCellNavigation(event, 0, -1);
-          break;
-        case Keys.right:
-          this.handleCellNavigation(event, 1, 0);
-          break;
-        case Keys.left:
-          this.handleCellNavigation(event, -1, 0);
-          break;
-        case Keys.enter:
-          this.handleEnter(event);
-          break;
-        default:
-          this.$emit('keydown', event);
-          return;
-      }
-      this.$emit('keydown', event);
-    },
-    onColorClick: function onColorClick(color, event) {
-      if (this.isUncontrolled) {
-        this.currentValue = color;
-        this.focusedColor = color;
-      } else {
-        this.focusedColor = color;
-      }
-      this.dispatchChangeEvent(color, event);
-    },
-    onFocus: function onFocus(event) {
-      this.focusedColor = this.selectedColor || this.paletteService.colorRows[0][0];
-      this.$emit('focus', {
-        event: event,
-        target: this
-      });
-    },
-    onBlur: function onBlur(event) {
-      this.focusedColor = undefined;
-      this.$emit('blur', {
-        event: event,
-        target: this
-      });
-    },
-    handleCellNavigation: function handleCellNavigation(event, horizontalStep, verticalStep) {
-      event.preventDefault();
-      if (this.focusedColorCooridanates) {
-        var newCoords = this.paletteService.getNextCell(this.focusedColorCooridanates, horizontalStep, verticalStep);
-        this.focusedColor = this.paletteService.getColorAt(newCoords);
-      } else {
-        this.focusedColor = this.paletteService.colorRows[0][0];
-      }
-    },
-    handleEnter: function handleEnter(event) {
-      if (this.isUncontrolled) {
-        this.currentValue = this.focusedColor;
-      }
-      this.dispatchChangeEvent(this.focusedColor, event);
-    },
-    dispatchChangeEvent: function dispatchChangeEvent(value, event) {
-      var rgbaValue = parseColor(value, 'rgba');
-      this.$emit('changemodel', value);
-      this.$emit('update:modelValue', value);
-      this.$emit('update:modelRgbaValue', rgbaValue);
-      this.$emit('change', {
-        event: event,
-        component: this,
-        value: value,
-        rgbaValue: rgbaValue
-      });
-    },
-    getPaletteInfo: function getPaletteInfo() {
-      if (typeof this.$props.palette === 'string') {
-        var preset = PALETTEPRESETS[this.$props.palette];
-        if (isPresent(preset)) {
-          return {
-            colors: preset.colors,
-            columns: this.$props.columns || preset.columns || DEFAULT_COLUMNS_COUNT
-          };
-        } else {
-          return {
-            colors: [],
-            columns: 0
-          };
-        }
-      } else {
-        return {
-          colors: this.$props.palette || [],
-          columns: this.$props.columns || DEFAULT_COLUMNS_COUNT
-        };
-      }
-    },
-    createCellId: function createCellId(cellCoords) {
-      return "".concat(this.guid, "_").concat(cellCoords.row, "_").concat(cellCoords.col);
-    }
-  }
-};
-/**
- * @hidden
- */
-var ColorPalette = ColorPaletteVue2;
-export { ColorPalette, ColorPaletteVue2 };

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

@@ -1,57 +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 { ColorPickerProps } from './interfaces/ColorPickerProps';
-/**
- * @hidden
- */
-export interface ColorPickerHandle {
-    element: HTMLSpanElement | null;
-}
-/**
- * @hidden
- */
-export interface ColorPickerState {
-    _popupId: string;
-    focusableElementGuid: string;
-    palette: any | null;
-    blurTimeout: any | undefined;
-    button: HTMLSpanElement | null;
-}
-/**
- * @hidden
- */
-export interface ColorPickerComputed {
-    [key: string]: any;
-}
-/**
- * @hidden
- */
-export interface ColorPickerMethods {
-    [key: string]: any;
-    focus: (e: any) => void;
-    toggleIfApplicable: () => void;
-    handleClick: (event: any) => void;
-}
-/**
- * @hidden
- */
-export interface ColorPickerData {
-    currentActive: boolean;
-}
-/**
- * @hidden
- */
-export interface ColorPickerAll extends Vue2type, ColorPickerMethods, ColorPickerData, ColorPickerComputed, ColorPickerState {
-}
-/**
- * @hidden
- */
-declare let ColorPickerVue2: ComponentOptions<ColorPickerAll, DefaultData<ColorPickerData>, DefaultMethods<ColorPickerAll>, ColorPickerComputed, RecordPropsDefinition<ColorPickerProps>>;
-/**
- * @hidden
- */
-declare const ColorPicker: DefineComponent<ColorPickerProps, any, ColorPickerData, ColorPickerComputed, ColorPickerMethods, {}, {}, {}, string, ColorPickerProps, ColorPickerProps, {}>;
-export { ColorPicker, ColorPickerVue2 };