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

package/dist/esm/colors/ColorPalette.js

@@ -0,0 +1,343 @@
+// @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("div", {
+        "class": "k-colorpalette-table-wrap"
+      }, [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

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